|
|
@@ -1,69 +1,210 @@
|
|
|
import * as React from 'react'
|
|
|
-import { DayPicker } from 'react-day-picker'
|
|
|
+import {
|
|
|
+ ChevronDownIcon,
|
|
|
+ ChevronLeftIcon,
|
|
|
+ ChevronRightIcon,
|
|
|
+} from 'lucide-react'
|
|
|
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
|
|
|
import { cn } from '@/lib/utils'
|
|
|
-import { buttonVariants } from '@/components/ui/button'
|
|
|
+import { Button, buttonVariants } from '@/components/ui/button'
|
|
|
|
|
|
function Calendar({
|
|
|
className,
|
|
|
classNames,
|
|
|
showOutsideDays = true,
|
|
|
+ captionLayout = 'label',
|
|
|
+ buttonVariant = 'ghost',
|
|
|
+ formatters,
|
|
|
+ components,
|
|
|
...props
|
|
|
-}: React.ComponentProps<typeof DayPicker>) {
|
|
|
+}: React.ComponentProps<typeof DayPicker> & {
|
|
|
+ buttonVariant?: React.ComponentProps<typeof Button>['variant']
|
|
|
+}) {
|
|
|
+ const defaultClassNames = getDefaultClassNames()
|
|
|
+
|
|
|
return (
|
|
|
<DayPicker
|
|
|
showOutsideDays={showOutsideDays}
|
|
|
- className={cn('p-3', className)}
|
|
|
- mode='single'
|
|
|
+ className={cn(
|
|
|
+ 'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
|
|
|
+ String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
|
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
|
+ className
|
|
|
+ )}
|
|
|
+ captionLayout={captionLayout}
|
|
|
+ formatters={{
|
|
|
+ formatMonthDropdown: (date) =>
|
|
|
+ date.toLocaleString('default', { month: 'short' }),
|
|
|
+ ...formatters,
|
|
|
+ }}
|
|
|
classNames={{
|
|
|
- months: 'flex flex-col sm:flex-row gap-2',
|
|
|
- month: 'flex flex-col gap-4',
|
|
|
- month_caption: 'flex justify-center pt-1 relative items-center w-full',
|
|
|
- caption_label: 'text-sm font-medium',
|
|
|
- nav: 'flex items-center gap-1',
|
|
|
+ root: cn('w-fit', defaultClassNames.root),
|
|
|
+ months: cn(
|
|
|
+ 'flex gap-4 flex-col md:flex-row relative',
|
|
|
+ defaultClassNames.months
|
|
|
+ ),
|
|
|
+ month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
|
|
|
+ nav: cn(
|
|
|
+ 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
|
|
|
+ defaultClassNames.nav
|
|
|
+ ),
|
|
|
button_previous: cn(
|
|
|
- buttonVariants({ variant: 'outline' }),
|
|
|
- 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10',
|
|
|
- 'absolute left-4 top-3'
|
|
|
+ buttonVariants({ variant: buttonVariant }),
|
|
|
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
|
|
|
+ defaultClassNames.button_previous
|
|
|
),
|
|
|
button_next: cn(
|
|
|
- buttonVariants({ variant: 'outline' }),
|
|
|
- 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10',
|
|
|
- 'absolute right-4 top-3'
|
|
|
- ),
|
|
|
- month_grid: 'w-full border-collapse space-x-1',
|
|
|
- weekdays: 'flex',
|
|
|
- weekday:
|
|
|
- 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
|
|
|
- week: 'flex w-full mt-2',
|
|
|
+ buttonVariants({ variant: buttonVariant }),
|
|
|
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
|
|
|
+ defaultClassNames.button_next
|
|
|
+ ),
|
|
|
+ month_caption: cn(
|
|
|
+ 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
|
|
|
+ defaultClassNames.month_caption
|
|
|
+ ),
|
|
|
+ dropdowns: cn(
|
|
|
+ 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
|
|
|
+ defaultClassNames.dropdowns
|
|
|
+ ),
|
|
|
+ dropdown_root: cn(
|
|
|
+ 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
|
|
|
+ defaultClassNames.dropdown_root
|
|
|
+ ),
|
|
|
+ dropdown: cn(
|
|
|
+ 'absolute bg-popover inset-0 opacity-0',
|
|
|
+ defaultClassNames.dropdown
|
|
|
+ ),
|
|
|
+ caption_label: cn(
|
|
|
+ 'select-none font-medium',
|
|
|
+ captionLayout === 'label'
|
|
|
+ ? 'text-sm'
|
|
|
+ : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
|
|
|
+ defaultClassNames.caption_label
|
|
|
+ ),
|
|
|
+ table: 'w-full border-collapse',
|
|
|
+ weekdays: cn('flex', defaultClassNames.weekdays),
|
|
|
+ weekday: cn(
|
|
|
+ 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
|
|
|
+ defaultClassNames.weekday
|
|
|
+ ),
|
|
|
+ week: cn('flex w-full mt-2', defaultClassNames.week),
|
|
|
+ week_number_header: cn(
|
|
|
+ 'select-none w-(--cell-size)',
|
|
|
+ defaultClassNames.week_number_header
|
|
|
+ ),
|
|
|
+ week_number: cn(
|
|
|
+ 'text-[0.8rem] select-none text-muted-foreground',
|
|
|
+ defaultClassNames.week_number
|
|
|
+ ),
|
|
|
day: cn(
|
|
|
- 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
|
|
|
- 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'
|
|
|
- : 'aria-selected:rounded-md [&[aria-selected="true"]>button]:hover:bg-foreground [&[aria-selected="true"]>button]:hover:text-background/85'
|
|
|
- ),
|
|
|
- day_button: cn(
|
|
|
- buttonVariants({ variant: 'ghost' }),
|
|
|
- 'size-8 p-0 font-normal aria-selected:opacity-100'
|
|
|
- ),
|
|
|
- day_selected: 'opacity-100 bg-yellow-500',
|
|
|
- range_start:
|
|
|
- 'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
|
|
|
- range_end:
|
|
|
- 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
|
|
|
- selected:
|
|
|
- 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
|
|
|
- today: 'bg-accent text-accent-foreground rounded-md',
|
|
|
- outside:
|
|
|
- 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
|
|
|
- disabled: 'text-muted-foreground opacity-50',
|
|
|
- range_middle:
|
|
|
- 'aria-selected:bg-accent aria-selected:text-accent-foreground',
|
|
|
- hidden: 'invisible',
|
|
|
+ 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
|
|
|
+ defaultClassNames.day
|
|
|
+ ),
|
|
|
+ range_start: cn(
|
|
|
+ 'rounded-l-md bg-accent',
|
|
|
+ defaultClassNames.range_start
|
|
|
+ ),
|
|
|
+ range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
|
+ range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
|
|
|
+ today: cn(
|
|
|
+ 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
|
|
|
+ defaultClassNames.today
|
|
|
+ ),
|
|
|
+ outside: cn(
|
|
|
+ 'text-muted-foreground aria-selected:text-muted-foreground',
|
|
|
+ defaultClassNames.outside
|
|
|
+ ),
|
|
|
+ disabled: cn(
|
|
|
+ 'text-muted-foreground opacity-50',
|
|
|
+ defaultClassNames.disabled
|
|
|
+ ),
|
|
|
+ hidden: cn('invisible', defaultClassNames.hidden),
|
|
|
...classNames,
|
|
|
}}
|
|
|
+ components={{
|
|
|
+ Root: ({ className, rootRef, ...props }) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ data-slot='calendar'
|
|
|
+ ref={rootRef}
|
|
|
+ className={cn(className)}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ },
|
|
|
+ Chevron: ({ className, orientation, ...props }) => {
|
|
|
+ if (orientation === 'left') {
|
|
|
+ return (
|
|
|
+ <ChevronLeftIcon className={cn('size-4', className)} {...props} />
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ if (orientation === 'right') {
|
|
|
+ return (
|
|
|
+ <ChevronRightIcon
|
|
|
+ className={cn('size-4', className)}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <ChevronDownIcon className={cn('size-4', className)} {...props} />
|
|
|
+ )
|
|
|
+ },
|
|
|
+ DayButton: CalendarDayButton,
|
|
|
+ WeekNumber: ({ children, ...props }) => {
|
|
|
+ return (
|
|
|
+ <td {...props}>
|
|
|
+ <div className='flex size-(--cell-size) items-center justify-center text-center'>
|
|
|
+ {children}
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ )
|
|
|
+ },
|
|
|
+ ...components,
|
|
|
+ }}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+function CalendarDayButton({
|
|
|
+ className,
|
|
|
+ day,
|
|
|
+ modifiers,
|
|
|
+ ...props
|
|
|
+}: React.ComponentProps<typeof DayButton>) {
|
|
|
+ const defaultClassNames = getDefaultClassNames()
|
|
|
+
|
|
|
+ const ref = React.useRef<HTMLButtonElement>(null)
|
|
|
+ React.useEffect(() => {
|
|
|
+ if (modifiers.focused) ref.current?.focus()
|
|
|
+ }, [modifiers.focused])
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Button
|
|
|
+ ref={ref}
|
|
|
+ variant='ghost'
|
|
|
+ size='icon'
|
|
|
+ data-day={day.date.toLocaleDateString()}
|
|
|
+ data-selected-single={
|
|
|
+ modifiers.selected &&
|
|
|
+ !modifiers.range_start &&
|
|
|
+ !modifiers.range_end &&
|
|
|
+ !modifiers.range_middle
|
|
|
+ }
|
|
|
+ data-range-start={modifiers.range_start}
|
|
|
+ data-range-end={modifiers.range_end}
|
|
|
+ data-range-middle={modifiers.range_middle}
|
|
|
+ className={cn(
|
|
|
+ 'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
|
|
|
+ defaultClassNames.day,
|
|
|
+ className
|
|
|
+ )}
|
|
|
{...props}
|
|
|
/>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-export { Calendar }
|
|
|
+export { Calendar, CalendarDayButton }
|
Sat Naing