@codapet/design-system 0.5.1 → 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,
@@ -2349,7 +2351,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 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 }) })
+      }
+    )
   ] }) });
 }
 
@@ -2406,6 +2418,8 @@ function DateRangeInput({
   className,
   inputClassName,
   calendarClassName,
+  popoverContentClassName,
+  popoverContentProps,
   inputDisabled,
   dateFormat = "MM/DD/YYYY",
   selected,
@@ -2528,31 +2542,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", 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 +5265,8 @@ function TimeInput({
   inputDisabled,
   className,
   inputClassName,
+  popoverContentClassName,
+  popoverContentProps,
   size,
   placeholder,
   icon,
@@ -5327,8 +5353,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,