@undp/design-system-react
Version:
React based design system for UNDP
1 lines • 4.11 kB
Source Map (JSON)
{"version":3,"file":"DatePicker.cjs","names":[],"sources":["../src/components/ui/date-picker.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport * as React from 'react';\nimport type { PropsSingle } from 'react-day-picker';\nimport { cn } from '@/lib/utils';\nimport { Calendar } from './calendar-card';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\ntype SingleCalendarProps = Omit<PropsSingle, 'mode'>;\n\nconst datePickerVariants = cva(\n 'w-full h-auto bg-background rounded-base text-content-primary text-base transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-disabled placeholder:text-content-placeholder',\n {\n variants: {\n variant: {\n light: 'border border-stroke',\n normal: 'border-2 border-foreground',\n },\n rounded: {\n base: 'rounded',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n full: 'rounded-full',\n },\n inputSize: {\n sm: 'px-2.5 py-1',\n base: 'p-2.5',\n },\n },\n defaultVariants: {\n inputSize: 'base',\n variant: 'normal',\n rounded: 'base',\n },\n },\n);\n\nexport function DatePicker({\n selected,\n onSelect,\n disablePopover,\n classNames,\n variant,\n inputSize,\n placeHolder = 'Pick a date',\n ...props\n}: SingleCalendarProps &\n VariantProps<typeof datePickerVariants> & {\n disablePopover?: boolean;\n classNames?: {\n popOverTrigger?: string;\n popOverContent?: string;\n popOverTriggerIcon?: string;\n popOverTriggerButton?: string;\n };\n placeHolder?: string;\n }) {\n const [date, setDate] = React.useState<Date>();\n const [open, setOpen] = React.useState(false);\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n className={cn(datePickerVariants({ inputSize, variant }), classNames?.popOverTrigger)}\n >\n <CalendarIcon\n className={cn('size-4 text-content-placeholder', classNames?.popOverTriggerIcon)}\n />\n {date ? (\n <p className='mt-1 p-0 font-body text-content-primary'>{format(date, 'MMM d, yyyy')}</p>\n ) : (\n <p className='mt-1 p-0 font-body text-content-placeholder'>{placeHolder}</p>\n )}\n </PopoverTrigger>\n <PopoverContent className={cn('w-auto p-0', classNames?.popOverContent)} align='start'>\n <Calendar\n mode='single'\n selected={selected || date}\n onSelect={(date, triggerDate, modifiers, event) => {\n setDate(date);\n onSelect?.(date, triggerDate, modifiers, event);\n setOpen(false);\n }}\n {...props}\n />\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"iXAWA,IAAM,EAAqB,EAAA,EACzB,yOACA,CACE,SAAU,CACR,QAAS,CACP,MAAO,uBACP,OAAQ,4BACV,EACA,QAAS,CACP,KAAM,UACN,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,MAAO,cACP,KAAM,cACR,EACA,UAAW,CACT,GAAI,cACJ,KAAM,OACR,CACF,EACA,gBAAiB,CACf,UAAW,OACX,QAAS,SACT,QAAS,MACX,CACF,CACF,EAEA,SAAgB,EAAW,CACzB,WACA,WACA,iBACA,aACA,UACA,YACA,cAAc,cACd,GAAG,GAWA,CACH,GAAM,CAAC,EAAM,GAAW,EAAM,SAAe,EACvC,CAAC,EAAM,GAAW,EAAM,SAAS,EAAK,EAC5C,OACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CAAe,OAAM,aAAc,WAAnC,EACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CACE,UAAW,EAAA,EAAG,EAAmB,CAAE,YAAW,SAAQ,CAAC,EAAG,GAAY,cAAc,WADtF,EAGE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,UAAW,EAAA,EAAG,kCAAmC,GAAY,kBAAkB,CAChF,CAAA,EACA,GACC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,mDAA2C,EAAA,EAAO,EAAM,aAAa,CAAK,CAAA,GAEvF,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,uDAA+C,CAAe,CAAA,CAE/D,KAChB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAgB,UAAW,EAAA,EAAG,aAAc,GAAY,cAAc,EAAG,MAAM,kBAC7E,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,KAAK,SACL,SAAU,GAAY,EACtB,UAAW,EAAM,EAAa,EAAW,IAAU,CACjD,EAAQ,CAAI,EACZ,IAAW,EAAM,EAAa,EAAW,CAAK,EAC9C,EAAQ,EAAK,CACf,EACA,GAAI,CACL,CAAA,CACa,CAAA,CACT,GAEb"}