@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 14.5 kB
Source Map (JSON)
{"version":3,"file":"components\\ui\\calendar.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/calendar.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n }\n }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n ChevronDownIcon,\r\n ChevronLeftIcon,\r\n ChevronRightIcon,\r\n} from \"lucide-react\";\r\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button, buttonVariants } from \"@/components/ui/button\";\r\n\r\nfunction Calendar({\r\n className,\r\n classNames,\r\n showOutsideDays = true,\r\n captionLayout = \"label\",\r\n buttonVariant = \"ghost\",\r\n formatters,\r\n components,\r\n ...props\r\n}: React.ComponentProps<typeof DayPicker> & {\r\n buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\r\n}) {\r\n const defaultClassNames = getDefaultClassNames();\r\n\r\n return (\r\n <DayPicker\r\n showOutsideDays={showOutsideDays}\r\n className={cn(\r\n \"bg-white group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent dark:bg-neutral-950\",\r\n String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\r\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\r\n className,\r\n )}\r\n captionLayout={captionLayout}\r\n formatters={{\r\n formatMonthDropdown: (date) =>\r\n date.toLocaleString(\"default\", { month: \"short\" }),\r\n ...formatters,\r\n }}\r\n classNames={{\r\n root: cn(\"w-fit\", defaultClassNames.root),\r\n months: cn(\r\n \"flex gap-4 flex-col md:flex-row relative\",\r\n defaultClassNames.months,\r\n ),\r\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\r\n nav: cn(\r\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\r\n defaultClassNames.nav,\r\n ),\r\n button_previous: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_previous,\r\n ),\r\n button_next: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_next,\r\n ),\r\n month_caption: cn(\r\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\r\n defaultClassNames.month_caption,\r\n ),\r\n dropdowns: cn(\r\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\r\n defaultClassNames.dropdowns,\r\n ),\r\n dropdown_root: cn(\r\n \"relative has-focus:border-neutral-950 border border-neutral-200 shadow-xs has-focus:ring-neutral-950/50 has-focus:ring-[3px] rounded-md dark:has-focus:border-neutral-300 dark:border-neutral-800 dark:has-focus:ring-neutral-300/50\",\r\n defaultClassNames.dropdown_root,\r\n ),\r\n dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\r\n caption_label: cn(\r\n \"select-none font-medium\",\r\n captionLayout === \"label\"\r\n ? \"text-sm\"\r\n : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-neutral-500 [&>svg]:size-3.5 dark:[&>svg]:text-neutral-400\",\r\n defaultClassNames.caption_label,\r\n ),\r\n table: \"w-full border-collapse\",\r\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\r\n weekday: cn(\r\n \"text-neutral-500 rounded-md flex-1 font-normal text-[0.8rem] select-none dark:text-neutral-400\",\r\n defaultClassNames.weekday,\r\n ),\r\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\r\n week_number_header: cn(\r\n \"select-none w-(--cell-size)\",\r\n defaultClassNames.week_number_header,\r\n ),\r\n week_number: cn(\r\n \"text-[0.8rem] select-none text-neutral-500 dark:text-neutral-400\",\r\n defaultClassNames.week_number,\r\n ),\r\n day: cn(\r\n \"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\",\r\n defaultClassNames.day,\r\n ),\r\n range_start: cn(\r\n \"rounded-l-md bg-neutral-100 dark:bg-neutral-800\",\r\n defaultClassNames.range_start,\r\n ),\r\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\r\n range_end: cn(\r\n \"rounded-r-md bg-neutral-100 dark:bg-neutral-800\",\r\n defaultClassNames.range_end,\r\n ),\r\n today: cn(\r\n \"bg-neutral-100 text-neutral-900 rounded-md data-[selected=true]:rounded-none dark:bg-neutral-800 dark:text-neutral-50\",\r\n defaultClassNames.today,\r\n ),\r\n outside: cn(\r\n \"text-neutral-500 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:text-neutral-400\",\r\n defaultClassNames.outside,\r\n ),\r\n disabled: cn(\r\n \"text-neutral-500 opacity-50 dark:text-neutral-400\",\r\n defaultClassNames.disabled,\r\n ),\r\n hidden: cn(\"invisible\", defaultClassNames.hidden),\r\n ...classNames,\r\n }}\r\n components={{\r\n Root: ({ className, rootRef, ...props }) => {\r\n return (\r\n <div\r\n data-slot=\"calendar\"\r\n ref={rootRef}\r\n className={cn(className)}\r\n {...props}\r\n />\r\n );\r\n },\r\n Chevron: ({ className, orientation, ...props }) => {\r\n if (orientation === \"left\") {\r\n return (\r\n <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\r\n );\r\n }\r\n\r\n if (orientation === \"right\") {\r\n return (\r\n <ChevronRightIcon\r\n className={cn(\"size-4\", className)}\r\n {...props}\r\n />\r\n );\r\n }\r\n\r\n return (\r\n <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\r\n );\r\n },\r\n DayButton: CalendarDayButton,\r\n WeekNumber: ({ children, ...props }) => {\r\n return (\r\n <td {...props}>\r\n <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\r\n {children}\r\n </div>\r\n </td>\r\n );\r\n },\r\n ...components,\r\n }}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction CalendarDayButton({\r\n className,\r\n day,\r\n modifiers,\r\n ...props\r\n}: React.ComponentProps<typeof DayButton>) {\r\n const defaultClassNames = getDefaultClassNames();\r\n\r\n const ref = React.useRef<HTMLButtonElement>(null);\r\n React.useEffect(() => {\r\n if (modifiers[\"focused\"]) ref.current?.focus();\r\n }, [modifiers[\"focused\"]]);\r\n\r\n return (\r\n <Button\r\n ref={ref}\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n data-day={day.date.toLocaleDateString()}\r\n data-selected-single={\r\n modifiers[\"selected\"] &&\r\n !modifiers[\"range_start\"] &&\r\n !modifiers[\"range_end\"] &&\r\n !modifiers[\"range_middle\"]\r\n }\r\n data-range-start={modifiers[\"range_start\"]}\r\n data-range-end={modifiers[\"range_end\"]}\r\n data-range-middle={modifiers[\"range_middle\"]}\r\n className={cn(\r\n \"data-[selected-single=true]:bg-neutral-900 data-[selected-single=true]:text-neutral-50 data-[range-middle=true]:bg-neutral-100 data-[range-middle=true]:text-neutral-900 data-[range-start=true]:bg-neutral-900 data-[range-start=true]:text-neutral-50 data-[range-end=true]:bg-neutral-900 data-[range-end=true]:text-neutral-50 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-neutral-900 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 dark:data-[selected-single=true]:bg-neutral-50 dark:data-[selected-single=true]:text-neutral-900 dark:data-[range-middle=true]:bg-neutral-800 dark:data-[range-middle=true]:text-neutral-50 dark:data-[range-start=true]:bg-neutral-50 dark:data-[range-start=true]:text-neutral-900 dark:data-[range-end=true]:bg-neutral-50 dark:data-[range-end=true]:text-neutral-900 dark:dark:hover:text-neutral-50\",\r\n defaultClassNames.day,\r\n className,\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport { Calendar, CalendarDayButton };\r\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","Calendar","className","classNames","showOutsideDays","captionLayout","buttonVariant","formatters","components","props","defaultClassNames","getDefaultClassNames","DayPicker","cn","String","date","buttonVariants","rootRef","orientation","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","CalendarDayButton","children","day","modifiers","ref","React","Button"],"mappings":";;;;IAAAA,oBAAoB,CAAC,GAAG,CAAC,UAASC;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGD,oBAAoB,CAAC,CAACC,YAAYC,QAAQ,CAACF,oBAAoB,CAAC,CAAC,UAASE,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAF,oBAAoB,CAAC,GAAG,CAACI,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFL,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,sBAAOM,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;;;;;ACOA,SAASI,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,kBAAkB,IAAI,EACtBC,gBAAgB,OAAO,EACvBC,gBAAgB,OAAO,EACvBC,UAAU,EACVC,UAAU,EACV,GAAGC,OAGJ;IACC,MAAMC,oBAAoBC,IAAAA,0CAAAA,oBAAAA;IAE1B,OACE,WADF,GACE,qCAACC,0CAAAA,SAASA,EAAAA;QACR,iBAAiBR;QACjB,WAAWS,IAAAA,0BAAAA,EAAAA,EACT,yKACAC,OAAO,GAAG,CAAC,yCAAyC,CAAC,EACrDA,OAAO,GAAG,CAAC,6CAA6C,CAAC,EACzDZ;QAEF,eAAeG;QACf,YAAY;YACV,qBAAqB,CAACU,OACpBA,KAAK,cAAc,CAAC,WAAW;oBAAE,OAAO;gBAAQ;YAClD,GAAGR,UAAU;QACf;QACA,YAAY;YACV,MAAMM,IAAAA,0BAAAA,EAAAA,EAAG,SAASH,kBAAkB,IAAI;YACxC,QAAQG,IAAAA,0BAAAA,EAAAA,EACN,4CACAH,kBAAkB,MAAM;YAE1B,OAAOG,IAAAA,0BAAAA,EAAAA,EAAG,8BAA8BH,kBAAkB,KAAK;YAC/D,KAAKG,IAAAA,0BAAAA,EAAAA,EACH,2EACAH,kBAAkB,GAAG;YAEvB,iBAAiBG,IAAAA,0BAAAA,EAAAA,EACfG,IAAAA,oCAAAA,cAAAA,EAAe;gBAAE,SAASV;YAAc,IACxC,+DACAI,kBAAkB,eAAe;YAEnC,aAAaG,IAAAA,0BAAAA,EAAAA,EACXG,IAAAA,oCAAAA,cAAAA,EAAe;gBAAE,SAASV;YAAc,IACxC,+DACAI,kBAAkB,WAAW;YAE/B,eAAeG,IAAAA,0BAAAA,EAAAA,EACb,4EACAH,kBAAkB,aAAa;YAEjC,WAAWG,IAAAA,0BAAAA,EAAAA,EACT,uFACAH,kBAAkB,SAAS;YAE7B,eAAeG,IAAAA,0BAAAA,EAAAA,EACb,wOACAH,kBAAkB,aAAa;YAEjC,UAAUG,IAAAA,0BAAAA,EAAAA,EAAG,8BAA8BH,kBAAkB,QAAQ;YACrE,eAAeG,IAAAA,0BAAAA,EAAAA,EACb,2BACAR,YAAAA,gBACI,YACA,oIACJK,kBAAkB,aAAa;YAEjC,OAAO;YACP,UAAUG,IAAAA,0BAAAA,EAAAA,EAAG,QAAQH,kBAAkB,QAAQ;YAC/C,SAASG,IAAAA,0BAAAA,EAAAA,EACP,kGACAH,kBAAkB,OAAO;YAE3B,MAAMG,IAAAA,0BAAAA,EAAAA,EAAG,oBAAoBH,kBAAkB,IAAI;YACnD,oBAAoBG,IAAAA,0BAAAA,EAAAA,EAClB,+BACAH,kBAAkB,kBAAkB;YAEtC,aAAaG,IAAAA,0BAAAA,EAAAA,EACX,oEACAH,kBAAkB,WAAW;YAE/B,KAAKG,IAAAA,0BAAAA,EAAAA,EACH,6LACAH,kBAAkB,GAAG;YAEvB,aAAaG,IAAAA,0BAAAA,EAAAA,EACX,mDACAH,kBAAkB,WAAW;YAE/B,cAAcG,IAAAA,0BAAAA,EAAAA,EAAG,gBAAgBH,kBAAkB,YAAY;YAC/D,WAAWG,IAAAA,0BAAAA,EAAAA,EACT,mDACAH,kBAAkB,SAAS;YAE7B,OAAOG,IAAAA,0BAAAA,EAAAA,EACL,yHACAH,kBAAkB,KAAK;YAEzB,SAASG,IAAAA,0BAAAA,EAAAA,EACP,6GACAH,kBAAkB,OAAO;YAE3B,UAAUG,IAAAA,0BAAAA,EAAAA,EACR,qDACAH,kBAAkB,QAAQ;YAE5B,QAAQG,IAAAA,0BAAAA,EAAAA,EAAG,aAAaH,kBAAkB,MAAM;YAChD,GAAGP,UAAU;QACf;QACA,YAAY;YACV,MAAM,CAAC,EAAED,SAAS,EAAEe,OAAO,EAAE,GAAGR,OAAO,GAEnC,WADF,GACE,qCAAC;oBACC,aAAU;oBACV,KAAKQ;oBACL,WAAWJ,IAAAA,0BAAAA,EAAAA,EAAGX;oBACb,GAAGO,KAAK;;YAIf,SAAS,CAAC,EAAEP,SAAS,EAAEgB,WAAW,EAAE,GAAGT,OAAO;gBAC5C,IAAIS,WAAAA,aACF,OACE,WADF,GACE,qCAACC,sCAAAA,eAAeA,EAAAA;oBAAC,WAAWN,IAAAA,0BAAAA,EAAAA,EAAG,UAAUX;oBAAa,GAAGO,KAAK;;gBAIlE,IAAIS,YAAAA,aACF,OACE,WADF,GACE,qCAACE,sCAAAA,gBAAgBA,EAAAA;oBACf,WAAWP,IAAAA,0BAAAA,EAAAA,EAAG,UAAUX;oBACvB,GAAGO,KAAK;;gBAKf,OACE,WADF,GACE,qCAACY,sCAAAA,eAAeA,EAAAA;oBAAC,WAAWR,IAAAA,0BAAAA,EAAAA,EAAG,UAAUX;oBAAa,GAAGO,KAAK;;YAElE;YACA,WAAWa;YACX,YAAY,CAAC,EAAEC,QAAQ,EAAE,GAAGd,OAAO,GAE/B,WADF,GACE,qCAAC;oBAAI,GAAGA,KAAK;8BACX,mDAAC;wBAAI,WAAU;kCACZc;;;YAKT,GAAGf,UAAU;QACf;QACC,GAAGC,KAAK;;AAGf;AAEA,SAASa,kBAAkB,EACzBpB,SAAS,EACTsB,GAAG,EACHC,SAAS,EACT,GAAGhB,OACoC;IACvC,MAAMC,oBAAoBC,IAAAA,0CAAAA,oBAAAA;IAE1B,MAAMe,MAAMC,+BAAAA,MAAY,CAAoB;IAC5CA,+BAAAA,SAAe,CAAC;QACd,IAAIF,SAAS,CAAC,UAAU,EAAEC,IAAI,OAAO,EAAE;IACzC,GAAG;QAACD,SAAS,CAAC,UAAU;KAAC;IAEzB,OACE,WADF,GACE,qCAACG,oCAAAA,MAAMA,EAAAA;QACL,KAAKF;QACL,SAAQ;QACR,MAAK;QACL,YAAUF,IAAI,IAAI,CAAC,kBAAkB;QACrC,wBACEC,SAAS,CAAC,WAAW,IACrB,CAACA,SAAS,CAAC,cAAc,IACzB,CAACA,SAAS,CAAC,YAAY,IACvB,CAACA,SAAS,CAAC,eAAe;QAE5B,oBAAkBA,SAAS,CAAC,cAAc;QAC1C,kBAAgBA,SAAS,CAAC,YAAY;QACtC,qBAAmBA,SAAS,CAAC,eAAe;QAC5C,WAAWZ,IAAAA,0BAAAA,EAAAA,EACT,2uCACAH,kBAAkB,GAAG,EACrBR;QAED,GAAGO,KAAK;;AAGf"}