refactor: enhance date and time picker components with new popover and select integration

- Added a new `popover` component for improved date/time picker UI, including attributes for better styling and layout.
- Introduced `bs-time-selects` for time selection in `bs-time-picker` and `bs-datetime-picker`, enhancing user experience with dropdowns for hour, minute, and optional AM/PM.
- Updated registry dependencies to include full URLs for `popover` and `select`, ensuring correct resolution in the component structure.
- Refactored `bs-date-picker` and `bs-datetime-picker` to utilize the new `bs-time-selects` component, streamlining time selection logic.
- Enhanced documentation to reflect new components and usage instructions.

Author: binodnepali

apps/docs/public/r/bs-calendar.json

@@ -10,12 +10,13 @@
   ],
   "registryDependencies": [
     "button",
-    "popover"
+    "https://binodnepali.github.io/react-nepali-datetime-picker/r/popover.json",
+    "select"
   ],
   "files": [
     {
       "path": "registry/web/files/components/bs-date-picker.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { BsCalendar, type BsDate } from \"@/components/bs-calendar\"\nimport {\n  BS_DATE_DISPLAY_PATTERN,\n  formatBsDatePattern,\n} from \"@/lib/bs-day-picker/pattern\"\nimport type { BsLocale } from \"@/lib/bs-day-picker/types\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport type BsDatePickerProps = {\n  value?: BsDate\n  onChange?: (value: BsDate | undefined) => void\n  locale?: BsLocale\n  placeholder?: string\n  /** date-fns-style BS tokens, e.g. `EEEE, d MMMM yyyy` */\n  formatPattern?: string\n  formatValue?: (value: BsDate, locale: BsLocale) => string\n  className?: string\n  disabled?: boolean\n}\n\nfunction resolveDateDisplayLabel(\n  value: BsDate,\n  locale: BsLocale,\n  formatValue?: BsDatePickerProps['formatValue'],\n  formatPattern?: string,\n): string {\n  if (formatValue) return formatValue(value, locale)\n  return formatBsDatePattern(\n    value,\n    formatPattern ?? BS_DATE_DISPLAY_PATTERN,\n    locale,\n  )\n}\n\nexport function BsDatePicker({\n  value,\n  onChange,\n  locale = \"ne\",\n  placeholder = \"Select date\",\n  formatPattern,\n  formatValue,\n  className,\n  disabled = false,\n}: BsDatePickerProps) {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-between gap-2 text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n        >\n          <span className=\"truncate\">\n            {value\n              ? resolveDateDisplayLabel(value, locale, formatValue, formatPattern)\n              : placeholder}\n          </span>\n          <CalendarIcon className=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <BsCalendar\n          mode=\"single\"\n          locale={locale}\n          selected={value}\n          onSelect={(date) => {\n            onChange?.(date)\n            setOpen(false)\n          }}\n          captionLayout=\"dropdown\"\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { BsCalendar, type BsDate } from \"@/components/bs-calendar\"\nimport {\n  BS_DATE_DISPLAY_PATTERN,\n  formatBsDatePattern,\n} from \"@/lib/bs-day-picker/pattern\"\nimport type { BsLocale } from \"@/lib/bs-day-picker/types\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport type BsDatePickerProps = {\n  value?: BsDate\n  onChange?: (value: BsDate | undefined) => void\n  locale?: BsLocale\n  placeholder?: string\n  /** date-fns-style BS tokens, e.g. `EEEE, d MMMM yyyy` */\n  formatPattern?: string\n  formatValue?: (value: BsDate, locale: BsLocale) => string\n  className?: string\n  disabled?: boolean\n}\n\nfunction resolveDateDisplayLabel(\n  value: BsDate,\n  locale: BsLocale,\n  formatValue?: BsDatePickerProps['formatValue'],\n  formatPattern?: string,\n): string {\n  if (formatValue) return formatValue(value, locale)\n  return formatBsDatePattern(\n    value,\n    formatPattern ?? BS_DATE_DISPLAY_PATTERN,\n    locale,\n  )\n}\n\nexport function BsDatePicker({\n  value,\n  onChange,\n  locale = \"ne\",\n  placeholder = \"Select date\",\n  formatPattern,\n  formatValue,\n  className,\n  disabled = false,\n}: BsDatePickerProps) {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-between gap-2 text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n        >\n          <span className=\"truncate\">\n            {value\n              ? resolveDateDisplayLabel(value, locale, formatValue, formatPattern)\n              : placeholder}\n          </span>\n          <CalendarIcon className=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n        <BsCalendar\n          mode=\"single\"\n          locale={locale}\n          selected={value}\n          onSelect={(date) => {\n            onChange?.(date)\n            setOpen(false)\n          }}\n          captionLayout=\"dropdown\"\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:component",
       "target": "components/bs-date-picker.tsx"
     }