Skip to content

Commit

Permalink
fix(calendar): fix label height & add :hover style
Browse files Browse the repository at this point in the history
  • Loading branch information
@auzeonfung
auzeonfung committed Oct 5, 2023
1 parent 4366d30 commit 779f461
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/calendar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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\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"
"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 h-7 text-sm font-medium justify-center items-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={cn(buttonVariants({ variant: \"ghost\" }),\"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"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/new-york/calendar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {...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"
"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-3\",\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 h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex\",\n caption_dropdowns: \"flex justify-center 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\",\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\" }), \"px-2 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"
Expand Down
Loading

0 comments on commit 779f461

Please sign in to comment.