@codapet/design-system 0.5.0 → 0.5.2

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';
@@ -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

@@ -2167,6 +2167,8 @@ function DateInput({
   className,
   inputClassName,
   calendarClassName,
+  popoverContentClassName,
+  popoverContentProps,
   inputDisabled,
   dateFormat = "MM/DD/YYYY",
   mode,
@@ -2329,7 +2331,11 @@ function DateInput({
         id: "date",
         value,
         placeholder: resolvedPlaceholder,
-        className: cn("bg-background cursor-pointer", "group-data-[state=open]:border-blue-500 group-data-[state=open]:hover:border-blue-500", inputClassName),
+        className: cn(
+          "bg-background cursor-pointer",
+          "group-data-[state=open]:border-blue-500 group-data-[state=open]:hover:border-blue-500",
+          inputClassName
+        ),
         onChange: handleInputChange,
         onBlur: handleBlur,
         disabled: isInputDisabled,
@@ -2345,7 +2351,17 @@ function DateInput({
         ...inputProps
       }
     ) }) }),
-    /* @__PURE__ */ jsx22(PopoverContent, { className: "p-2 flex flex-col overflow-y-auto h-[400px] md:h-auto md:w-[350px]  ", children: /* @__PURE__ */ jsx22(Calendar, { ...resolvedCalendarProps }) })
+    /* @__PURE__ */ jsx22(
+      PopoverContent,
+      {
+        className: cn(
+          "p-0 overflow-y-auto h-[400px] md: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 }) })
+      }
+    )
   ] }) });
 }
 
@@ -2402,6 +2418,8 @@ function DateRangeInput({
   className,
   inputClassName,
   calendarClassName,
+  popoverContentClassName,
+  popoverContentProps,
   inputDisabled,
   dateFormat = "MM/DD/YYYY",
   selected,
@@ -2494,7 +2512,7 @@ function DateRangeInput({
     onMonthChange: onMonthChange ?? setMonthState,
     showOutsideDays,
     className: cn(
-      "w-auto  mx-auto h-[350px] overflow-y-auto md:h-auto m-2",
+      "w-auto mx-auto h-fit shrink-0 md:h-auto m-2",
       calendarClassName
     ),
     classNames,
@@ -2524,31 +2542,41 @@ function DateRangeInput({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs11(PopoverContent, { className: "p-0 flex flex-col overflow-y-auto h-[400px] md:h-auto md:w-[350px]  ", children: [
-      /* @__PURE__ */ jsx23(Calendar, { ...resolvedCalendarProps }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex  flex-col gap-2 px-2 py-2", 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", 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"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
   ] }) });
 }
 
@@ -5237,6 +5265,8 @@ function TimeInput({
   inputDisabled,
   className,
   inputClassName,
+  popoverContentClassName,
+  popoverContentProps,
   size,
   placeholder,
   icon,
@@ -5323,9 +5353,10 @@ function TimeInput({
     /* @__PURE__ */ jsx49(
       PopoverContent,
       {
-        className: "w-auto p-0 ",
+        className: cn("w-auto p-0", popoverContentClassName),
         onOpenAutoFocus: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsxs24("div", { className: "flex divide-x", children: [
+        ...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,
             {
@@ -5341,21 +5372,31 @@ function TimeInput({
             },
             h
           )) }) }),
-          /* @__PURE__ */ jsx49("div", { className: "h-56 w-16 overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ jsx49("div", { ref: minutesRef, className: cn("flex flex-col p-1", minutesList.length <= 12 && "h-full justify-center"), children: minutesList.map((m) => /* @__PURE__ */ jsx49(
-            Button,
+          /* @__PURE__ */ jsx49("div", { className: "h-56 w-16 overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ jsx49(
+            "div",
             {
-              variant: "ghost",
-              size: "sm",
-              "data-selected": selectedMinute === m,
+              ref: minutesRef,
               className: cn(
-                "w-full justify-center font-mono text-sm",
-                selectedMinute === m && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"
+                "flex flex-col p-1",
+                minutesList.length <= 12 && "h-full justify-center"
               ),
-              onClick: () => handleMinuteSelect(m),
-              children: String(m).padStart(2, "0")
-            },
-            m
-          )) }) }),
+              children: minutesList.map((m) => /* @__PURE__ */ jsx49(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  "data-selected": selectedMinute === m,
+                  className: cn(
+                    "w-full justify-center font-mono text-sm",
+                    selectedMinute === m && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"
+                  ),
+                  onClick: () => handleMinuteSelect(m),
+                  children: String(m).padStart(2, "0")
+                },
+                m
+              ))
+            }
+          ) }),
           !is24HourFormat(timeFormat) && /* @__PURE__ */ jsx49("div", { className: "flex flex-col p-1 justify-center gap-1", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx49(
             Button,
             {