From 4366d30b0ae72848442a8eb45da4eaa47242d3c3 Mon Sep 17 00:00:00 2001
From: "ZEONFUNG NGAU(ox)" <github@ox.ci>
Date: Thu, 5 Oct 2023 20:16:47 +0900
Subject: [PATCH] fix(calendar): fix TS type error

---
 apps/www/public/registry/styles/default/calendar.json      | 2 +-
 apps/www/public/registry/styles/new-york/calendar.json     | 2 +-
 .../registry/default/example/calendar-dropdown-button.tsx  | 1 -
 apps/www/registry/default/ui/calendar.tsx                  | 7 ++++---
 .../registry/new-york/example/calendar-dropdown-button.tsx | 1 -
 apps/www/registry/new-york/ui/calendar.tsx                 | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json
index d42eae8c207..0153f65fda3 100644
--- a/apps/www/public/registry/styles/default/calendar.json
+++ b/apps/www/public/registry/styles/default/calendar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/default/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-8 pr-9\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            {...props}\n            value={`${props.value}`}\n          >\n            <SelectTrigger className=\"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\">\n              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/default/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n    \n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-8 pr-9\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className=\"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\">\n              <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json
index 423f51acb10..b04d5eee868 100644
--- a/apps/www/public/registry/styles/new-york/calendar.json
+++ b/apps/www/public/registry/styles/new-york/calendar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/new-york/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-7 pr-8\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-6 w-6 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            {...props}\n            value={`${props.value}`}\n          >\n            <SelectTrigger className={cn(buttonVariants({ variant: \"ghost\" }), \"w-auto px-1 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\")}>\n              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/new-york/ui/select\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {\n\n  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event);\n  };\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption_start: \"is-start\",\n        caption_between: \"is-between\",\n        caption_end: \"is-end\",\n        caption: \"flex justify-center pt-1 relative items-center gap-1\",\n        caption_label: \"flex text-sm font-medium justify-center grow [.is-multiple_&]:flex\",\n        caption_dropdowns: \"flex justify-center gap-1 grow dropdowns pl-7 pr-8\",\n        multiple_months: \"is-multiple\",\n        vhidden: \"hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden\",\n        nav: \"flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-6 w-6 bg-transparent p-0 text-muted-foreground\"\n        ),\n        nav_button_previous: 'absolute left-1',\n        nav_button_next: 'absolute right-1',\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n        Dropdown: ({ ...props }) => (\n          <Select\n            {...props}\n            onValueChange={(value) => {\n              if (props.onChange) {\n                handleCalendarChange(value, props.onChange)\n              }\n            }}\n            value={props.value as string}\n          >\n            <SelectTrigger className={cn(buttonVariants({ variant: \"ghost\" }), \"w-auto px-1 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex\")}>\n              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]\">\n              {props.children &&\n                React.Children.map(props.children, (child) =>\n                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>\n                )\n              }\n            </SelectContent>\n          </Select>\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/registry/default/example/calendar-dropdown-button.tsx b/apps/www/registry/default/example/calendar-dropdown-button.tsx
index 299c902b37d..40f9aa8628b 100644
--- a/apps/www/registry/default/example/calendar-dropdown-button.tsx
+++ b/apps/www/registry/default/example/calendar-dropdown-button.tsx
@@ -14,7 +14,6 @@ export default function CalendarDropdown() {
       captionLayout="dropdown-buttons"
       fromYear={2022}
       toYear={2023}
-      // numberOfMonths={2}
       selected={date}
       onSelect={setDate}
       className="rounded-md border"
diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index ff3024575fa..d1235b06563 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -23,6 +23,7 @@ function Calendar({
       },
     } as React.ChangeEvent<HTMLSelectElement>
     _e(_event);
+    
   };
 
   return (
@@ -76,16 +77,16 @@ function Calendar({
         IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
         Dropdown: ({ ...props }) => (
           <Select
+            {...props}
             onValueChange={(value) => {
               if (props.onChange) {
                 handleCalendarChange(value, props.onChange)
               }
             }}
-            {...props}
-            value={`${props.value}`}
+            value={props.value as string}
           >
             <SelectTrigger className="pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex">
-              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>
+              <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>
             </SelectTrigger>
             <SelectContent className="max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">
               {props.children &&
diff --git a/apps/www/registry/new-york/example/calendar-dropdown-button.tsx b/apps/www/registry/new-york/example/calendar-dropdown-button.tsx
index d1d73af185b..420fb1540ad 100644
--- a/apps/www/registry/new-york/example/calendar-dropdown-button.tsx
+++ b/apps/www/registry/new-york/example/calendar-dropdown-button.tsx
@@ -14,7 +14,6 @@ export default function CalendarDropdownButton() {
       captionLayout="dropdown-buttons"
       fromYear={2022}
       toYear={2023}
-      // numberOfMonths={2}
       selected={date}
       onSelect={setDate}
       className="rounded-md border"
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index 95fbc99f3da..7768847e2da 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -77,13 +77,13 @@ function Calendar({
         IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
         Dropdown: ({ ...props }) => (
           <Select
+            {...props}
             onValueChange={(value) => {
               if (props.onChange) {
                 handleCalendarChange(value, props.onChange)
               }
             }}
-            {...props}
-            value={`${props.value}`}
+            value={props.value as string}
           >
             <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }), "w-auto px-1 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
               <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>