From b76f31874a00f8e1fa3df3bc0985e420cdb3f20e Mon Sep 17 00:00:00 2001 From: NGAU Zeonfung Date: Thu, 13 Jul 2023 14:28:37 +0900 Subject: [PATCH 1/7] Support for selecting the year and month using the select component. ## Support for selecting the year and month using the select component. Related to: #320 #546 #509 #880 ### Usage: ``` ``` --- ZEONFUNG, NGAU github@ox.ci #230713 142000 --- apps/www/registry/default/ui/calendar.tsx | 58 +++++++++++++++++------ 1 file changed, 44 insertions(+), 14 deletions(-) diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx index 303c68eef00..78dcdb5f8fc 100644 --- a/apps/www/registry/default/ui/calendar.tsx +++ b/apps/www/registry/default/ui/calendar.tsx @@ -3,9 +3,9 @@ import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" - import { cn } from "@/lib/utils" import { buttonVariants } from "@/registry/default/ui/button" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/default/ui/select" export type CalendarProps = React.ComponentProps @@ -14,7 +14,17 @@ function Calendar({ classNames, showOutsideDays = true, ...props -}: CalendarProps) { +}: CalendarProps & { onChange: React.ChangeEventHandler }) { + + const handleCalendarChange = (_value: string, _e: React.ChangeEventHandler) => { + const _event = { + target: { + value: _value + }, + } as React.ChangeEvent + _e(_event); + }; + return ( , - IconRight: ({ ...props }) => , + IconLeft: ({ ...props }) => , + IconRight: ({ ...props }) => , + Dropdown: ({ ...props }) => ( + + ), }} {...props} /> From e9fae3913cdd733b0a7ba87534e2355146a70dd0 Mon Sep 17 00:00:00 2001 From: NGAU Zeonfung Date: Thu, 13 Jul 2023 14:58:13 +0900 Subject: [PATCH 2/7] Update calendar.tsx New York --- apps/www/registry/new-york/ui/calendar.tsx | 54 +++++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index 18f44478a75..d7543a49267 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -3,9 +3,9 @@ import * as React from "react" import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" import { DayPicker } from "react-day-picker" - import { cn } from "@/lib/utils" import { buttonVariants } from "@/registry/default/ui/button" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/default/ui/select" export type CalendarProps = React.ComponentProps @@ -14,7 +14,17 @@ function Calendar({ classNames, showOutsideDays = true, ...props -}: CalendarProps) { +}: CalendarProps & { onChange: React.ChangeEventHandler }) { + + const handleCalendarChange = (_value: string, _e: React.ChangeEventHandler) => { + const _event = { + target: { + value: _value + }, + } as React.ChangeEvent + _e(_event); + }; + return ( , IconRight: ({ ...props }) => , + Dropdown: ({ ...props }) => ( + + ), }} {...props} /> From c48489ecf269a2a77233e0226b5015b6036b99e9 Mon Sep 17 00:00:00 2001 From: NGAU Zeonfung Date: Fri, 14 Jul 2023 00:08:18 +0900 Subject: [PATCH 3/7] Fix the typo --- apps/www/registry/default/ui/calendar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx index 78dcdb5f8fc..fde5c62ac30 100644 --- a/apps/www/registry/default/ui/calendar.tsx +++ b/apps/www/registry/default/ui/calendar.tsx @@ -49,8 +49,7 @@ function Calendar({ row: "flex w-full mt-2", cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn( - day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"), - buttonVariants({ variant: "ghost" }), + buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100" ), day_selected: From 5ccfe0ceaf5a6635190332f352a59b276d2329f5 Mon Sep 17 00:00:00 2001 From: NGAU Zeonfung Date: Fri, 14 Jul 2023 00:13:47 +0900 Subject: [PATCH 4/7] Fix a typo --- apps/www/registry/new-york/ui/calendar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index d7543a49267..3de6a97e574 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -49,7 +49,6 @@ function Calendar({ row: "flex w-full mt-2", cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn( - day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"), buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100" ), From 96c75c73fad1c227ef5f3509ba4f6701b7155dc8 Mon Sep 17 00:00:00 2001 From: "ZEONFUNG NGAU(ox)" Date: Thu, 5 Oct 2023 19:24:45 +0900 Subject: [PATCH 5/7] feat(calendar): enhance calendar component with dropdown Selector --- apps/www/__registry__/index.tsx | 14 +++++ apps/www/content/docs/components/calendar.mdx | 11 +++- .../content/docs/components/date-picker.mdx | 2 +- apps/www/public/registry/colors/index.json | 2 +- apps/www/public/registry/colors/slate.json | 2 +- .../registry/styles/default/calendar.json | 2 +- .../registry/styles/default/scroll-area.json | 2 +- .../public/registry/styles/default/table.json | 2 +- .../registry/styles/new-york/calendar.json | 2 +- .../registry/styles/new-york/scroll-area.json | 2 +- .../registry/styles/new-york/table.json | 2 +- apps/www/public/registry/themes/slate.json | 4 +- .../example/calendar-dropdown-button.tsx | 23 ++++++++ .../default/example/calendar-form.tsx | 3 + .../example/date-picker-with-range.tsx | 3 + apps/www/registry/default/ui/calendar.tsx | 59 +++++++++++-------- .../example/calendar-dropdown-button.tsx | 23 ++++++++ .../new-york/example/calendar-form.tsx | 3 + .../example/date-picker-with-range.tsx | 3 + apps/www/registry/new-york/ui/calendar.tsx | 53 +++++++++-------- apps/www/registry/registry.ts | 6 ++ 21 files changed, 163 insertions(+), 60 deletions(-) create mode 100644 apps/www/registry/default/example/calendar-dropdown-button.tsx create mode 100644 apps/www/registry/new-york/example/calendar-dropdown-button.tsx diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 26fc8aace90..9fbdbacc718 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -411,6 +411,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/default/example/calendar-demo")), files: ["registry/default/example/calendar-demo.tsx"], }, + "calendar-dropdown-button": { + name: "calendar-dropdown-button", + type: "components:example", + registryDependencies: ["calendar"], + component: React.lazy(() => import("@/registry/default/example/calendar-dropdown-button")), + files: ["registry/default/example/calendar-dropdown-button.tsx"], + }, "calendar-form": { name: "calendar-form", type: "components:example", @@ -1420,6 +1427,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/new-york/example/calendar-demo")), files: ["registry/new-york/example/calendar-demo.tsx"], }, + "calendar-dropdown-button": { + name: "calendar-dropdown-button", + type: "components:example", + registryDependencies: ["calendar"], + component: React.lazy(() => import("@/registry/new-york/example/calendar-dropdown-button")), + files: ["registry/new-york/example/calendar-dropdown-button.tsx"], + }, "calendar-form": { name: "calendar-form", type: "components:example", diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx index f276a9d551c..5617221ce7f 100644 --- a/apps/www/content/docs/components/calendar.mdx +++ b/apps/www/content/docs/components/calendar.mdx @@ -36,9 +36,9 @@ npx shadcn-ui@latest add calendar npm install react-day-picker date-fns ``` -Add the `Button` component to your project. +Add the `Button` and `Select` components to your project. -The `Calendar` component uses the `Button` component. Make sure you have it installed in your project. +The `Calendar` component uses the `Button` and `Select` component. Make sure you have it installed in your project. Copy and paste the following code into your project. @@ -71,6 +71,7 @@ return ( ) ``` + See the [React DayPicker](https://react-day-picker.js.org) documentation for more information. ## Date Picker @@ -79,6 +80,10 @@ You can use the `` component to build a date picker. See the [Date Pic ## Examples +### With Dropdown Selector + + + ### Form - + \ No newline at end of file diff --git a/apps/www/content/docs/components/date-picker.mdx b/apps/www/content/docs/components/date-picker.mdx index 040dbf89591..5369d24f6c6 100644 --- a/apps/www/content/docs/components/date-picker.mdx +++ b/apps/www/content/docs/components/date-picker.mdx @@ -68,7 +68,7 @@ See the [React DayPicker](https://react-day-picker.js.org) documentation for mor -### Date Range Picker +### Date Range Picker With Dropdown Selector diff --git a/apps/www/public/registry/colors/index.json b/apps/www/public/registry/colors/index.json index 6b70773e73f..c25158efb11 100644 --- a/apps/www/public/registry/colors/index.json +++ b/apps/www/public/registry/colors/index.json @@ -1996,4 +1996,4 @@ "hslChannel": "343.1 87.7% 15.9%" } ] -} +} \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 5db830be4bf..6d80bc78579 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -89,4 +89,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} +} \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json index aac65b09232..d42eae8c207 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 { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n {...props}\n value={`${props.value}`}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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/default/scroll-area.json b/apps/www/public/registry/styles/default/scroll-area.json index ee9db739071..c24fd70f8d0 100644 --- a/apps/www/public/registry/styles/default/scroll-area.json +++ b/apps/www/public/registry/styles/default/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/table.json b/apps/www/public/registry/styles/default/table.json index 5f61c81b3b9..be0a9d236df 100644 --- a/apps/www/public/registry/styles/default/table.json +++ b/apps/www/public/registry/styles/default/table.json @@ -3,7 +3,7 @@ "files": [ { "name": "table.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\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 0998cfa90ae..423f51acb10 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\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n .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:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => ,\n IconRight: ({ ...props }) => ,\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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n {...props}\n value={`${props.value}`}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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/scroll-area.json b/apps/www/public/registry/styles/new-york/scroll-area.json index ee9db739071..c24fd70f8d0 100644 --- a/apps/www/public/registry/styles/new-york/scroll-area.json +++ b/apps/www/public/registry/styles/new-york/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/table.json b/apps/www/public/registry/styles/new-york/table.json index 66e3077ef6e..0bcade86884 100644 --- a/apps/www/public/registry/styles/new-york/table.json +++ b/apps/www/public/registry/styles/new-york/table.json @@ -3,7 +3,7 @@ "files": [ { "name": "table.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json index 2cd8397f282..7c72a9d6db3 100644 --- a/apps/www/public/registry/themes/slate.json +++ b/apps/www/public/registry/themes/slate.json @@ -42,7 +42,7 @@ "destructive-foreground": "210 40% 98%", "border": "217.2 32.6% 17.5%", "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8 83.9%" + "ring": "212.7 26.8% 83.9%" } } -} +} \ No newline at end of file diff --git a/apps/www/registry/default/example/calendar-dropdown-button.tsx b/apps/www/registry/default/example/calendar-dropdown-button.tsx new file mode 100644 index 00000000000..299c902b37d --- /dev/null +++ b/apps/www/registry/default/example/calendar-dropdown-button.tsx @@ -0,0 +1,23 @@ +"use client" + +import * as React from "react" + +import { Calendar } from "@/registry/default/ui/calendar" + +export default function CalendarDropdown() { + const [date, setDate] = React.useState(new Date()) + + return ( + + ) +} diff --git a/apps/www/registry/default/example/calendar-form.tsx b/apps/www/registry/default/example/calendar-form.tsx index 16f45db36b1..2a12c2447cc 100644 --- a/apps/www/registry/default/example/calendar-form.tsx +++ b/apps/www/registry/default/example/calendar-form.tsx @@ -78,6 +78,9 @@ export default function CalendarForm() { diff --git a/apps/www/registry/default/example/date-picker-with-range.tsx b/apps/www/registry/default/example/date-picker-with-range.tsx index 4d88bcf0834..c19b4fa6709 100644 --- a/apps/www/registry/default/example/date-picker-with-range.tsx +++ b/apps/www/registry/default/example/date-picker-with-range.tsx @@ -53,6 +53,9 @@ export default function DatePickerWithRange({ }) { +}: CalendarProps & { onChange?: React.ChangeEventHandler }) { - const handleCalendarChange = (_value: string, _e: React.ChangeEventHandler) => { + const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => { const _event = { target: { - value: _value + value: String(_value) }, } as React.ChangeEvent _e(_event); @@ -32,26 +32,37 @@ function Calendar({ classNames={{ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", - caption: "flex justify-center pt-1 relative items-center gap-2", - caption_label: "flex text-sm font-medium justify-center grow", - caption_dropdowns: "flex justify-center gap-1 grow dropdowns", - vhidden: "hidden", - nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last", + caption_start: "is-start", + caption_between: "is-between", + caption_end: "is-end", + caption: "flex justify-center pt-1 relative items-center gap-1", + caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex", + caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-8 pr-9", + multiple_months: "is-multiple", + vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden", + nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1", nav_button: cn( buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 text-muted-foreground" ), - nav_button_previous: cn({ 'absolute left-1': props.mode === 'single'}), - nav_button_next: cn({ 'absolute right-1' : props.mode === 'single'}), + nav_button_previous: 'absolute left-1', + nav_button_next: 'absolute right-1', table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", row: "flex w-full mt-2", - cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", + cell: cn( + "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent", + props.mode === "range" + ? "[&: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" + : "[&:has([aria-selected])]:rounded-md" + ), day: cn( - buttonVariants({ variant: "ghost" }), + buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100" ), + day_range_start: "day-range-start", + day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", @@ -59,26 +70,28 @@ function Calendar({ day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible", - ...classNames, }} components={{ IconLeft: ({ ...props }) => , IconRight: ({ ...props }) => , Dropdown: ({ ...props }) => ( diff --git a/apps/www/registry/new-york/example/calendar-dropdown-button.tsx b/apps/www/registry/new-york/example/calendar-dropdown-button.tsx new file mode 100644 index 00000000000..d1d73af185b --- /dev/null +++ b/apps/www/registry/new-york/example/calendar-dropdown-button.tsx @@ -0,0 +1,23 @@ +"use client" + +import * as React from "react" + +import { Calendar } from "@/registry/new-york/ui/calendar" + +export default function CalendarDropdownButton() { + const [date, setDate] = React.useState(new Date()) + + return ( + + ) +} diff --git a/apps/www/registry/new-york/example/calendar-form.tsx b/apps/www/registry/new-york/example/calendar-form.tsx index e769ca99d5a..51a09d91eae 100644 --- a/apps/www/registry/new-york/example/calendar-form.tsx +++ b/apps/www/registry/new-york/example/calendar-form.tsx @@ -78,6 +78,9 @@ export default function CalendarForm() { diff --git a/apps/www/registry/new-york/example/date-picker-with-range.tsx b/apps/www/registry/new-york/example/date-picker-with-range.tsx index 2d987288472..c95ce81f165 100644 --- a/apps/www/registry/new-york/example/date-picker-with-range.tsx +++ b/apps/www/registry/new-york/example/date-picker-with-range.tsx @@ -53,6 +53,9 @@ export default function DatePickerWithRange({ @@ -14,12 +14,12 @@ function Calendar({ classNames, showOutsideDays = true, ...props -}: CalendarProps & { onChange: React.ChangeEventHandler }) { +}: CalendarProps & { onChange?: React.ChangeEventHandler }) { - const handleCalendarChange = (_value: string, _e: React.ChangeEventHandler) => { + const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => { const _event = { target: { - value: _value + value: String(_value) }, } as React.ChangeEvent _e(_event); @@ -32,20 +32,24 @@ function Calendar({ classNames={{ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", - caption: "flex justify-center pt-1 relative items-center gap-2", - caption_label: "flex text-sm font-medium justify-center grow", - caption_dropdowns: "flex justify-center gap-1 grow dropdowns", - vhidden: "hidden", - nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last", + caption_start: "is-start", + caption_between: "is-between", + caption_end: "is-end", + caption: "flex justify-center pt-1 relative items-center gap-1", + caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex", + caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-7 pr-8", + multiple_months: "is-multiple", + vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden", + nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1", nav_button: cn( buttonVariants({ variant: "outline" }), - "h-7 w-7 bg-transparent p-0 text-muted-foreground" + "h-6 w-6 bg-transparent p-0 text-muted-foreground" ), - nav_button_previous: cn({ 'absolute left-1': props.mode === 'single'}), - nav_button_next: cn({ 'absolute right-1' : props.mode === 'single'}), + nav_button_previous: 'absolute left-1', + nav_button_next: 'absolute right-1', table: "w-full border-collapse space-y-1", head_row: "flex", - head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", + head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: cn( "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent", @@ -73,19 +77,22 @@ function Calendar({ IconRight: ({ ...props }) => , Dropdown: ({ ...props }) => ( diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts index 789a4cfcdc8..d04f899f668 100644 --- a/apps/www/registry/registry.ts +++ b/apps/www/registry/registry.ts @@ -355,6 +355,12 @@ const example: Registry = [ registryDependencies: ["calendar"], files: ["example/calendar-demo.tsx"], }, + { + name: "calendar-dropdown-button", + type: "components:example", + registryDependencies: ["calendar"], + files: ["example/calendar-dropdown-button.tsx"], + }, { name: "calendar-form", type: "components:example", From 4366d30b0ae72848442a8eb45da4eaa47242d3c3 Mon Sep 17 00:00:00 2001 From: "ZEONFUNG NGAU(ox)" Date: Thu, 5 Oct 2023 20:16:47 +0900 Subject: [PATCH 6/7] 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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n {...props}\n value={`${props.value}`}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n \n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n {...props}\n value={`${props.value}`}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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 _e(_event); + }; return ( @@ -76,16 +77,16 @@ function Calendar({ IconRight: ({ ...props }) => , Dropdown: ({ ...props }) => ( { if (props.onChange) { handleCalendarChange(value, props.onChange) } }} - {...props} - value={`${props.value}`} + value={props.value as string} > {props?.caption} From 779f461949016b9084d925c7c1dd1a3301122573 Mon Sep 17 00:00:00 2001 From: "ZEONFUNG NGAU(ox)" Date: Thu, 5 Oct 2023 23:00:26 +0900 Subject: [PATCH 7/7] fix(calendar): fix label height & add :hover style --- apps/www/public/registry/styles/default/calendar.json | 2 +- apps/www/public/registry/styles/new-york/calendar.json | 2 +- apps/www/registry/default/ui/calendar.tsx | 4 ++-- apps/www/registry/new-york/ui/calendar.tsx | 10 +++++----- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json index 0153f65fda3..43aac64dd38 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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n \n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n \n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)]\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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 b04d5eee868..9eca07f0296 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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \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\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps & { onChange?: React.ChangeEventHandler }) {\n\n const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler) => {\n const _event = {\n target: {\n value: String(_value)\n },\n } as React.ChangeEvent\n _e(_event);\n };\n\n return (\n .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 }) => ,\n IconRight: ({ ...props }) => ,\n Dropdown: ({ ...props }) => (\n {\n if (props.onChange) {\n handleCalendarChange(value, props.onChange)\n }\n }}\n value={props.value as string}\n >\n \n {props?.caption}\n \n \n {props.children &&\n React.Children.map(props.children, (child) =>\n )?.props?.value} className=\"min-w-[var(--radix-popper-anchor-width)] pr-7\">{(child as React.ReactElement)?.props?.children}\n )\n }\n \n \n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n" } ], "type": "components:ui" diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx index d1235b06563..d1d4a08655d 100644 --- a/apps/www/registry/default/ui/calendar.tsx +++ b/apps/www/registry/default/ui/calendar.tsx @@ -37,7 +37,7 @@ function Calendar({ caption_between: "is-between", caption_end: "is-end", caption: "flex justify-center pt-1 relative items-center gap-1", - caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex", + caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex", caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-8 pr-9", multiple_months: "is-multiple", vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden", @@ -85,7 +85,7 @@ function Calendar({ }} value={props.value as string} > - + {props?.caption} diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index 7768847e2da..3b66d89d169 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -31,16 +31,16 @@ function Calendar({ className={cn("p-3", className)} classNames={{ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", - month: "space-y-4", + month: "space-y-3", caption_start: "is-start", caption_between: "is-between", caption_end: "is-end", caption: "flex justify-center pt-1 relative items-center gap-1", - caption_label: "flex text-sm font-medium justify-center grow [.is-multiple_&]:flex", - caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-7 pr-8", + caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex", + caption_dropdowns: "flex justify-center grow dropdowns pl-7 pr-8", multiple_months: "is-multiple", vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden", - nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1", + nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last", nav_button: cn( buttonVariants({ variant: "outline" }), "h-6 w-6 bg-transparent p-0 text-muted-foreground" @@ -85,7 +85,7 @@ function Calendar({ }} value={props.value as string} > - + {props?.caption}