@codapet/design-system 0.4.7 → 0.4.9

package/dist/index.d.mts

@@ -482,7 +482,7 @@ declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tool
 declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
 type SidebarContextProps = {
-    state: "expanded" | "collapsed";
+    state: 'expanded' | 'collapsed';
     open: boolean;
     setOpen: (open: boolean) => void;
     openMobile: boolean;
@@ -491,56 +491,56 @@ type SidebarContextProps = {
     toggleSidebar: () => void;
 };
 declare function useSidebar(): SidebarContextProps;
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<'div'> & {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }): react_jsx_runtime.JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
 }): react_jsx_runtime.JSX.Element;
 declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
-declare function SidebarRail({ className, ...props }: React$1.ComponentProps<"button">): react_jsx_runtime.JSX.Element;
-declare function SidebarInset({ className, ...props }: React$1.ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.ComponentProps<'button'>): react_jsx_runtime.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.ComponentProps<'main'>): react_jsx_runtime.JSX.Element;
 declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): react_jsx_runtime.JSX.Element;
-declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
-declare function SidebarContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SidebarGroupLabel({ className, asChild, ...props }: React$1.ComponentProps<"div"> & {
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React$1.ComponentProps<'div'> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarGroupAction({ className, asChild, ...props }: React$1.ComponentProps<"button"> & {
+declare function SidebarGroupAction({ className, asChild, ...props }: React$1.ComponentProps<'button'> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React$1.ComponentProps<"button"> & {
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React$1.ComponentProps<'button'> & {
     asChild?: boolean;
     showOnHover?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<"div"> & {
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<'div'> & {
     showIcon?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
-declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<'a'> & {
     asChild?: boolean;
-    size?: "sm" | "md";
+    size?: 'sm' | 'md';
     isActive?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -588,19 +588,20 @@ interface TimeValue {
     hours: number;
     minutes: number;
 }
-type BaseInputProps = Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect' | 'rightIcon' | 'ref'>;
-interface TimeInputProps extends BaseInputProps {
+interface TimeInputProps {
     time: TimeValue | null;
     setTime: (time: TimeValue | null) => void;
     timeFormat?: TimeFormat;
     minuteStep?: number;
     inputDisabled?: boolean;
     size?: VariantProps<typeof inputVariants>['size'];
+    className?: string;
     inputClassName?: string;
+    placeholder?: string;
     icon?: React$1.ReactNode;
     formatDisplay?: (time: TimeValue) => string;
 }
-declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, size, placeholder, onBlur, icon, formatDisplay, ...restProps }: TimeInputProps): react_jsx_runtime.JSX.Element;
+declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, size, placeholder, icon, formatDisplay }: TimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;

package/dist/index.mjs

@@ -1886,7 +1886,11 @@ function ContextMenuShortcut({
 
 // src/components/ui/date-input.tsx
 import "class-variance-authority";
-import { format as dateFnsFormat, parse as dateFnsParse, isValid } from "date-fns";
+import {
+  format as dateFnsFormat,
+  parse as dateFnsParse,
+  isValid
+} from "date-fns";
 import { CalendarDays } from "lucide-react";
 import * as React20 from "react";
 
@@ -2268,7 +2272,7 @@ function DateInput({
     onMonthChange: onMonthChange ?? setMonthState,
     showOutsideDays,
     className: cn(
-      "md:w-auto w-[calc(100vw-50px)] mx-auto h-[350px] overflow-y-auto md:h-auto m-2",
+      "w-auto  mx-auto h-[350px] overflow-y-auto md:h-auto m-2",
       calendarClassName
     ),
     classNames,
@@ -2325,7 +2329,7 @@ function DateInput({
         id: "date",
         value,
         placeholder: resolvedPlaceholder,
-        className: cn("bg-background cursor-pointer", inputClassName),
+        className: cn("bg-background cursor-pointer", open && "border-blue-500", inputClassName),
         onChange: handleInputChange,
         onBlur: handleBlur,
         disabled: isInputDisabled,
@@ -2341,17 +2345,7 @@ function DateInput({
         ...inputProps
       }
     ) }) }),
-    /* @__PURE__ */ jsx22(
-      PopoverContent,
-      {
-        className: "w-auto overflow-hidden p-0",
-        align: "end",
-        alignOffset: -8,
-        sideOffset: 10,
-        side: "top",
-        children: /* @__PURE__ */ jsx22(Calendar, { ...resolvedCalendarProps })
-      }
-    )
+    /* @__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 }) })
   ] }) });
 }
 
@@ -2519,6 +2513,7 @@ function DateRangeInput({
         className: cn(
           inputVariants({ size }),
           "bg-background cursor-pointer w-full text-left flex items-center justify-between gap-2 font-normal",
+          open && "border-blue-500",
           isInputDisabled && "pointer-events-none cursor-not-allowed opacity-50",
           inputClassName
         ),
@@ -5227,27 +5222,6 @@ function formatTime(time, timeFormat = "12h") {
       return `${h12p}:${m} ${period}`;
   }
 }
-function parseTime(value, timeFormat = "12h") {
-  if (!value.trim()) return null;
-  const v = value.trim();
-  if (is24HourFormat(timeFormat)) {
-    const match2 = v.match(/^(\d{1,2}):(\d{2})$/);
-    if (!match2) return null;
-    const hours2 = parseInt(match2[1], 10);
-    const minutes2 = parseInt(match2[2], 10);
-    if (hours2 < 0 || hours2 > 23 || minutes2 < 0 || minutes2 > 59) return null;
-    return { hours: hours2, minutes: minutes2 };
-  }
-  const match = v.match(/^(\d{1,2}):(\d{2})\s*(AM|PM|am|pm)$/i);
-  if (!match) return null;
-  let hours = parseInt(match[1], 10);
-  const minutes = parseInt(match[2], 10);
-  const period = match[3].toUpperCase();
-  if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null;
-  if (period === "AM" && hours === 12) hours = 0;
-  else if (period === "PM" && hours !== 12) hours += 12;
-  return { hours, minutes };
-}
 function getDisplayHour(hours, timeFormat) {
   if (is24HourFormat(timeFormat)) return hours;
   return hours % 12 || 12;
@@ -5265,28 +5239,19 @@ function TimeInput({
   inputClassName,
   size,
   placeholder,
-  onBlur,
   icon,
-  formatDisplay,
-  ...restProps
+  formatDisplay
 }) {
   const resolvedPlaceholder = placeholder ?? TIME_FORMAT_PLACEHOLDER[timeFormat];
-  const displayFormat = React46.useCallback(
-    (t) => {
-      if (!t) return "";
-      if (formatDisplay) return formatDisplay(t);
-      return formatTime(t, timeFormat);
-    },
-    [formatDisplay, timeFormat]
-  );
+  const displayValue = React46.useMemo(() => {
+    if (!time) return "";
+    if (formatDisplay) return formatDisplay(time);
+    return formatTime(time, timeFormat);
+  }, [time, formatDisplay, timeFormat]);
   const [open, setOpen] = React46.useState(false);
-  const [value, setValue] = React46.useState(displayFormat(time));
   const hoursRef = React46.useRef(null);
   const minutesRef = React46.useRef(null);
   const periodRef = React46.useRef(null);
-  React46.useEffect(() => {
-    setValue(displayFormat(time));
-  }, [time, displayFormat]);
   const scrollToSelected = React46.useCallback(() => {
     requestAnimationFrame(() => {
       for (const ref of [hoursRef, minutesRef, periodRef]) {
@@ -5304,29 +5269,6 @@ function TimeInput({
       scrollToSelected();
     }
   }, [open, scrollToSelected]);
-  const handleInputChange = (e) => {
-    const inputValue = e.target.value;
-    setValue(inputValue);
-    if (inputValue === "") {
-      setTime(null);
-      return;
-    }
-    const parsed = parseTime(inputValue, timeFormat);
-    if (parsed) {
-      setTime(parsed);
-    }
-  };
-  const handleBlur = (e) => {
-    onBlur?.(e);
-    if (value === "") {
-      if (time !== null) setTime(null);
-      return;
-    }
-    const parsed = parseTime(value, timeFormat);
-    if (!parsed) {
-      setValue(displayFormat(time));
-    }
-  };
   const handleHourSelect = (hour) => {
     let h24;
     if (is24HourFormat(timeFormat)) {
@@ -5359,29 +5301,25 @@ function TimeInput({
   const selectedMinute = time?.minutes ?? null;
   const selectedPeriod = time ? getPeriod(time.hours) : null;
   return /* @__PURE__ */ jsx49("div", { className: cn("relative flex gap-2", className), children: /* @__PURE__ */ jsxs24(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, disabled: inputDisabled, children: /* @__PURE__ */ jsx49("div", { className: "w-full relative", children: /* @__PURE__ */ jsx49(
-      Input,
+    /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, disabled: inputDisabled, children: /* @__PURE__ */ jsxs24(
+      Button,
       {
-        value,
-        placeholder: resolvedPlaceholder,
-        className: cn("bg-background cursor-pointer", inputClassName),
-        onChange: handleInputChange,
-        onBlur: handleBlur,
+        type: "button",
+        variant: "outline",
+        className: cn(
+          inputVariants({ size }),
+          "bg-background cursor-pointer w-full text-left flex items-center justify-between gap-2 font-normal",
+          open && "border-blue-500",
+          inputDisabled && "pointer-events-none cursor-not-allowed opacity-50",
+          inputClassName
+        ),
         disabled: inputDisabled,
-        size,
-        onClick: () => {
-          if (!inputDisabled) setOpen(true);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "ArrowDown" && !inputDisabled) {
-            e.preventDefault();
-            setOpen(true);
-          }
-        },
-        rightIcon: icon !== void 0 ? icon : /* @__PURE__ */ jsx49(Clock, { className: "h-4 w-4 text-muted-foreground" }),
-        ...restProps
+        children: [
+          displayValue || resolvedPlaceholder,
+          icon !== void 0 ? icon : /* @__PURE__ */ jsx49(Clock, { className: "h-4 w-4 text-muted-foreground shrink-0" })
+        ]
       }
-    ) }) }),
+    ) }),
     /* @__PURE__ */ jsx49(
       PopoverContent,
       {
@@ -5403,7 +5341,7 @@ 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: "flex flex-col p-1 ", children: minutesList.map((m) => /* @__PURE__ */ jsx49(
+          /* @__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,
             {
               variant: "ghost",