@codapet/design-system 0.5.1 → 0.5.3

package/dist/index.d.mts

@@ -15,6 +15,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as react_hook_form from 'react-hook-form';
@@ -25,7 +26,6 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput } from 'input-otp';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ResizablePrimitive from 'react-resizable-panels';
@@ -112,7 +112,7 @@ declare function Button({ className, variant, size, asChild, ...props }: React$1
 }): react_jsx_runtime.JSX.Element;
 
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+    buttonVariant?: React$1.ComponentProps<typeof Button>['variant'];
 }): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 
@@ -250,6 +250,11 @@ interface InputProps extends Omit<React$1.ComponentProps<'input'>, 'size'>, Vari
 }
 declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
+declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
 type DateFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY' | 'DD.MM.YYYY' | 'MMMM D, YYYY' | 'D MMMM YYYY';
 type NativeInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect'>;
 type FlattenedCalendarProps$1 = Omit<React$1.ComponentProps<typeof Calendar>, keyof React$1.InputHTMLAttributes<HTMLInputElement> | 'className' | 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'disabled' | 'captionLayout' | 'showOutsideDays' | 'classNames' | 'components' | 'formatters' | 'buttonVariant'>;
@@ -263,6 +268,8 @@ interface DateInputProps extends NativeInputProps, FlattenedCalendarProps$1 {
     size?: VariantProps<typeof inputVariants>['size'];
     inputClassName?: string;
     calendarClassName?: string;
+    popoverContentClassName?: string;
+    popoverContentProps?: Omit<React$1.ComponentProps<typeof PopoverContent>, 'children' | 'className'>;
     dateFormat?: DateFormat;
     mode?: React$1.ComponentProps<typeof Calendar>['mode'];
     selected?: Date;
@@ -277,7 +284,7 @@ interface DateInputProps extends NativeInputProps, FlattenedCalendarProps$1 {
     formatters?: React$1.ComponentProps<typeof Calendar>['formatters'];
     buttonVariant?: React$1.ComponentProps<typeof Calendar>['buttonVariant'];
 }
-declare function DateInput({ date, setDate, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, inputDisabled, dateFormat, mode, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, components, formatters, buttonVariant, placeholder, onBlur, ...restProps }: DateInputProps): react_jsx_runtime.JSX.Element;
+declare function DateInput({ date, setDate, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, popoverContentClassName, popoverContentProps, inputDisabled, dateFormat, mode, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, components, formatters, buttonVariant, placeholder, onBlur, ...restProps }: DateInputProps): react_jsx_runtime.JSX.Element;
 
 type FlattenedCalendarProps = Omit<React$1.ComponentProps<typeof Calendar>, keyof React$1.InputHTMLAttributes<HTMLInputElement> | 'className' | 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'disabled' | 'captionLayout' | 'showOutsideDays' | 'classNames' | 'components' | 'formatters' | 'buttonVariant'>;
 interface DateRangeInputProps extends FlattenedCalendarProps {
@@ -291,6 +298,8 @@ interface DateRangeInputProps extends FlattenedCalendarProps {
     className?: string;
     inputClassName?: string;
     calendarClassName?: string;
+    popoverContentClassName?: string;
+    popoverContentProps?: Omit<React$1.ComponentProps<typeof PopoverContent>, 'children' | 'className'>;
     dateFormat?: DateFormat;
     placeholder?: string;
     selected?: DateRange;
@@ -305,7 +314,7 @@ interface DateRangeInputProps extends FlattenedCalendarProps {
     formatters?: React$1.ComponentProps<typeof Calendar>['formatters'];
     buttonVariant?: React$1.ComponentProps<typeof Calendar>['buttonVariant'];
 }
-declare function DateRangeInput({ dateRange, setDateRange, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, inputDisabled, dateFormat, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, components, formatters, buttonVariant, placeholder, size, ...restProps }: DateRangeInputProps): react_jsx_runtime.JSX.Element;
+declare function DateRangeInput({ dateRange, setDateRange, maxDate, minDate, disableFuture, className, inputClassName, calendarClassName, popoverContentClassName, popoverContentProps, inputDisabled, dateFormat, selected, onSelect, month, onMonthChange, disabled: calendarDisabled, captionLayout, showOutsideDays, classNames, components, formatters, buttonVariant, placeholder, size, ...restProps }: DateRangeInputProps): react_jsx_runtime.JSX.Element;
 
 declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
@@ -430,11 +439,6 @@ declare function PaginationPrevious({ className, ...props }: React$1.ComponentPr
 declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
 
-declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
-declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
-
 declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof ProgressPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
 declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -597,11 +601,13 @@ interface TimeInputProps {
     size?: VariantProps<typeof inputVariants>['size'];
     className?: string;
     inputClassName?: string;
+    popoverContentClassName?: string;
+    popoverContentProps?: Omit<React$1.ComponentProps<typeof PopoverContent>, 'children' | 'className'>;
     placeholder?: string;
     icon?: React$1.ReactNode;
     formatDisplay?: (time: TimeValue) => string;
 }
-declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, size, placeholder, icon, formatDisplay }: TimeInputProps): react_jsx_runtime.JSX.Element;
+declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, popoverContentClassName, popoverContentProps, size, placeholder, icon, formatDisplay }: TimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;

package/dist/index.mjs

@@ -631,13 +631,13 @@ function BreadcrumbEllipsis({
 }
 
 // src/components/ui/calendar.tsx
-import * as React10 from "react";
 import {
   ChevronDownIcon as ChevronDownIcon2,
   ChevronLeftIcon,
   ChevronRightIcon
 } from "lucide-react";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import * as React10 from "react";
+import { DayPicker } from "react-day-picker";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function Calendar({
   className,
@@ -649,13 +649,12 @@ function Calendar({
   components,
   ...props
 }) {
-  const defaultClassNames = getDefaultClassNames();
   return /* @__PURE__ */ jsx11(
     DayPicker,
     {
       showOutsideDays,
       className: cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-3 [--cell-size:--spacing(4)]  md:[--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
@@ -666,86 +665,86 @@ function Calendar({
         ...formatters
       },
       classNames: {
-        root: cn("w-fit", defaultClassNames.root),
+        root: cn("w-fit ", classNames?.root),
         months: cn(
           "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
+          classNames?.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex flex-col w-full gap-4", classNames?.month),
         nav: cn(
           "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
+          classNames?.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          classNames?.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          classNames?.button_next
         ),
         month_caption: cn(
           "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          classNames?.month_caption
         ),
         dropdowns: cn(
           "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
+          classNames?.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
+          classNames?.dropdown_root
         ),
         dropdown: cn(
           "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          classNames?.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
+          classNames?.caption_label
+        ),
+        table: cn("w-full border-collapse", classNames?.table),
+        weekdays: cn(
+          "flex items-center justify-center w-full gap-2",
+          classNames?.weekdays
         ),
-        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
+          "text-muted-foreground rounded-full md:flex-1 size-6 mx-1 font-normal text-[0.8rem] select-none ",
+          classNames?.weekday
+        ),
+        week: cn(
+          "flex w-full md:mt-2 mt-[2px]  items-center justify-center gap-1",
+          classNames?.week
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
+          "select-none w-(--cell-size) ",
+          "flex items-center justify-center ",
+          classNames?.week_number_header
         ),
         week_number: cn(
           "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
+          classNames?.week_number
         ),
         day: cn(
-          "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
+          "relative flex items-center justify-center md:w-full md:h-full p-0 text-center  group/day aspect-square select-none size-7 md:mx-0 mx-1  rounded-full",
+          classNames?.day
         ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        range_start: cn(" bg-accent", classNames?.range_start),
+        range_middle: cn("rounded-none", classNames?.range_middle),
+        range_end: cn(" bg-accent", classNames?.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          "bg-accent text-accent-foreground   rounded-full",
+          classNames?.today
         ),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          classNames?.outside
         ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
+        disabled: cn("text-muted-foreground opacity-50", classNames?.disabled),
+        hidden: cn("invisible", classNames?.hidden)
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
@@ -790,7 +789,6 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const defaultClassNames = getDefaultClassNames();
   const ref = React10.useRef(null);
   React10.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
@@ -807,8 +805,7 @@ function CalendarDayButton({
       "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,
+        "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 md:font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]  [&>span]:text-xs [&>span]:opacity-70  md:p-0 rounded-full md:text-base text-sm font-medium",
         className
       ),
       ...props
@@ -2167,6 +2164,8 @@ function DateInput({
   className,
   inputClassName,
   calendarClassName,
+  popoverContentClassName,
+  popoverContentProps,
   inputDisabled,
   dateFormat = "MM/DD/YYYY",
   mode,
@@ -2272,7 +2271,7 @@ function DateInput({
     onMonthChange: onMonthChange ?? setMonthState,
     showOutsideDays,
     className: cn(
-      "w-auto  mx-auto h-[350px] overflow-y-auto md:h-auto m-2",
+      "w-auto  mx-auto  overflow-y-auto h-auto m-2",
       calendarClassName
     ),
     classNames,
@@ -2349,7 +2348,17 @@ function DateInput({
         ...inputProps
       }
     ) }) }),
-    /* @__PURE__ */ jsx22(PopoverContent, { className: "p-0  overflow-y-auto h-[400px] md:h-auto md:w-[350px]  ", children: /* @__PURE__ */ jsx22("div", { className: "border border-blue-500 h-full w-full rounded-md", children: /* @__PURE__ */ jsx22(Calendar, { ...resolvedCalendarProps }) }) })
+    /* @__PURE__ */ jsx22(
+      PopoverContent,
+      {
+        className: cn(
+          "p-0  w-[var(--radix-popper-anchor-width)] h-auto md:w-[350px]",
+          popoverContentClassName
+        ),
+        ...popoverContentProps,
+        children: /* @__PURE__ */ jsx22("div", { className: "border border-blue-500 h-full w-full rounded-md", children: /* @__PURE__ */ jsx22(Calendar, { ...resolvedCalendarProps }) })
+      }
+    )
   ] }) });
 }
 
@@ -2406,6 +2415,8 @@ function DateRangeInput({
   className,
   inputClassName,
   calendarClassName,
+  popoverContentClassName,
+  popoverContentProps,
   inputDisabled,
   dateFormat = "MM/DD/YYYY",
   selected,
@@ -2497,10 +2508,7 @@ function DateRangeInput({
     month: effectiveMonth,
     onMonthChange: onMonthChange ?? setMonthState,
     showOutsideDays,
-    className: cn(
-      "w-auto mx-auto h-fit shrink-0 md:h-auto m-2",
-      calendarClassName
-    ),
+    className: cn("w-auto  shrink-0 h-auto mt-2", calendarClassName),
     classNames,
     components,
     formatters,
@@ -2528,31 +2536,41 @@ function DateRangeInput({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx23(PopoverContent, { className: "p-0 h-[400px] w-[var(--radix-popper-anchor-width)] md:h-auto md:w-[350px]", children: /* @__PURE__ */ jsxs11("div", { className: "border border-blue-500 h-full w-full rounded-md flex flex-col overflow-y-auto", children: [
-      /* @__PURE__ */ jsx23(Calendar, { ...resolvedCalendarProps }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2 px-2 py-2 shrink-0", children: [
-        /* @__PURE__ */ jsx23(
-          Button,
-          {
-            variant: "ghost-secondary",
-            size: "sm",
-            onClick: handleClear,
-            type: "button",
-            children: "Clear"
-          }
+    /* @__PURE__ */ jsx23(
+      PopoverContent,
+      {
+        className: cn(
+          "p-0 h-[400px] w-[var(--radix-popper-anchor-width)] md:h-auto md:w-[350px]",
+          popoverContentClassName
         ),
-        /* @__PURE__ */ jsx23(
-          Button,
-          {
-            variant: "primary",
-            size: "sm",
-            onClick: handleAdd,
-            type: "button",
-            children: "Add"
-          }
-        )
-      ] })
-    ] }) })
+        ...popoverContentProps,
+        children: /* @__PURE__ */ jsxs11("div", { className: "border border-blue-500 h-full w-full rounded-md flex flex-col overflow-y-auto justify-between", children: [
+          /* @__PURE__ */ jsx23(Calendar, { ...resolvedCalendarProps }),
+          /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2 px-2 py-2 shrink-0", children: [
+            /* @__PURE__ */ jsx23(
+              Button,
+              {
+                variant: "ghost-secondary",
+                size: "sm",
+                onClick: handleClear,
+                type: "button",
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsx23(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: handleAdd,
+                type: "button",
+                children: "Add"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
   ] }) });
 }
 
@@ -5241,6 +5259,8 @@ function TimeInput({
   inputDisabled,
   className,
   inputClassName,
+  popoverContentClassName,
+  popoverContentProps,
   size,
   placeholder,
   icon,
@@ -5327,8 +5347,9 @@ function TimeInput({
     /* @__PURE__ */ jsx49(
       PopoverContent,
       {
-        className: "w-auto p-0 ",
+        className: cn("w-auto p-0", popoverContentClassName),
         onOpenAutoFocus: (e) => e.preventDefault(),
+        ...popoverContentProps,
         children: /* @__PURE__ */ jsxs24("div", { className: "flex divide-x border border-blue-500 rounded-md", children: [
           /* @__PURE__ */ jsx49("div", { className: "h-56 w-16 overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ jsx49("div", { ref: hoursRef, className: "flex flex-col p-1 ", children: hoursList.map((h) => /* @__PURE__ */ jsx49(
             Button,