@codapet/design-system 0.4.3 → 0.4.5

package/dist/index.d.mts

@@ -251,9 +251,9 @@ interface InputProps extends Omit<React$1.ComponentProps<'input'>, 'size'>, Vari
 declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 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$2 = 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'>;
-interface DateInputProps extends NativeInputProps$2, FlattenedCalendarProps$1 {
+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'>;
+interface DateInputProps extends NativeInputProps, FlattenedCalendarProps$1 {
     date: Date | null;
     setDate: (date: Date | null) => void;
     maxDate?: Date | null;
@@ -273,12 +273,14 @@ interface DateInputProps extends NativeInputProps$2, FlattenedCalendarProps$1 {
     captionLayout?: React$1.ComponentProps<typeof Calendar>['captionLayout'];
     showOutsideDays?: React$1.ComponentProps<typeof Calendar>['showOutsideDays'];
     classNames?: React$1.ComponentProps<typeof Calendar>['classNames'];
+    components?: React$1.ComponentProps<typeof Calendar>['components'];
+    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, placeholder, onBlur, ...restProps }: DateInputProps): react_jsx_runtime.JSX.Element;
+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;
 
-type NativeInputProps$1 = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect'>;
-type FlattenedCalendarProps = Omit<React$1.ComponentProps<typeof Calendar>, keyof React$1.InputHTMLAttributes<HTMLInputElement> | 'className' | 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'disabled' | 'captionLayout' | 'showOutsideDays' | 'classNames'>;
-interface DateRangeInputProps extends NativeInputProps$1, FlattenedCalendarProps {
+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 {
     dateRange: DateRange | undefined;
     setDateRange: (range: DateRange | undefined) => void;
     maxDate?: Date | null;
@@ -286,9 +288,11 @@ interface DateRangeInputProps extends NativeInputProps$1, FlattenedCalendarProps
     disableFuture?: boolean;
     inputDisabled?: boolean;
     size?: VariantProps<typeof inputVariants>['size'];
+    className?: string;
     inputClassName?: string;
     calendarClassName?: string;
     dateFormat?: DateFormat;
+    placeholder?: string;
     selected?: DateRange;
     onSelect?: (range: DateRange | undefined) => void;
     month?: React$1.ComponentProps<typeof Calendar>['month'];
@@ -297,8 +301,11 @@ interface DateRangeInputProps extends NativeInputProps$1, FlattenedCalendarProps
     captionLayout?: React$1.ComponentProps<typeof Calendar>['captionLayout'];
     showOutsideDays?: React$1.ComponentProps<typeof Calendar>['showOutsideDays'];
     classNames?: React$1.ComponentProps<typeof Calendar>['classNames'];
+    components?: React$1.ComponentProps<typeof Calendar>['components'];
+    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, placeholder, onBlur, ...restProps }: DateRangeInputProps): react_jsx_runtime.JSX.Element;
+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 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;
@@ -576,13 +583,13 @@ declare function TabsList({ className, ...props }: React$1.ComponentProps<typeof
 declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-type TimeFormat = '12h' | '24h';
+type TimeFormat = '12h' | '24h' | 'h:mm a' | 'h:mm A';
 interface TimeValue {
     hours: number;
     minutes: number;
 }
-type NativeInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect'>;
-interface TimeInputProps extends NativeInputProps {
+type BaseInputProps = Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange' | 'min' | 'max' | 'size' | 'disabled' | 'onSelect' | 'rightIcon' | 'ref'>;
+interface TimeInputProps extends BaseInputProps {
     time: TimeValue | null;
     setTime: (time: TimeValue | null) => void;
     timeFormat?: TimeFormat;
@@ -590,8 +597,10 @@ interface TimeInputProps extends NativeInputProps {
     inputDisabled?: boolean;
     size?: VariantProps<typeof inputVariants>['size'];
     inputClassName?: string;
+    icon?: React$1.ReactNode;
+    formatDisplay?: (time: TimeValue) => string;
 }
-declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, size, placeholder, onBlur, ...restProps }: TimeInputProps): react_jsx_runtime.JSX.Element;
+declare function TimeInput({ time, setTime, timeFormat, minuteStep, inputDisabled, className, inputClassName, size, placeholder, onBlur, icon, formatDisplay, ...restProps }: TimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;

package/dist/index.mjs

@@ -2174,6 +2174,9 @@ function DateInput({
   captionLayout = "dropdown",
   showOutsideDays = false,
   classNames,
+  components,
+  formatters,
+  buttonVariant,
   placeholder,
   onBlur,
   ...restProps
@@ -2269,6 +2272,9 @@ function DateInput({
       calendarClassName
     ),
     classNames,
+    components,
+    formatters,
+    buttonVariant,
     onSelect: onSelect ?? defaultCalendarOnSelect,
     disabled: calendarDisabled ?? defaultCalendarDisabled
   };
@@ -2351,7 +2357,7 @@ function DateInput({
 
 // src/components/ui/date-range-input.tsx
 import "class-variance-authority";
-import { format as dateFnsFormat2, parse as dateFnsParse2, isValid as isValid2 } from "date-fns";
+import { format as dateFnsFormat2, isValid as isValid2 } from "date-fns";
 import { CalendarDays as CalendarDays2 } from "lucide-react";
 import * as React21 from "react";
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -2375,65 +2381,6 @@ var DATE_FORMAT_PLACEHOLDER2 = {
   "MMMM D, YYYY": "Month d, yyyy",
   "D MMMM YYYY": "d Month yyyy"
 };
-var INPUT_PROP_KEYS2 = /* @__PURE__ */ new Set([
-  "accept",
-  "alt",
-  "autoComplete",
-  "autoFocus",
-  "capture",
-  "checked",
-  "dirName",
-  "form",
-  "formAction",
-  "formEncType",
-  "formMethod",
-  "formNoValidate",
-  "formTarget",
-  "height",
-  "list",
-  "maxLength",
-  "minLength",
-  "multiple",
-  "name",
-  "pattern",
-  "readOnly",
-  "required",
-  "size",
-  "src",
-  "step",
-  "type",
-  "width",
-  "id",
-  "inputMode",
-  "lang",
-  "tabIndex",
-  "title",
-  "role",
-  "style",
-  "onFocus",
-  "onFocusCapture",
-  "onBlurCapture",
-  "onInput",
-  "onInvalid",
-  "onKeyDownCapture",
-  "onKeyPress",
-  "onKeyPressCapture",
-  "onKeyUp",
-  "onKeyUpCapture",
-  "onPaste",
-  "onPasteCapture",
-  "onPointerDown",
-  "onPointerDownCapture",
-  "onPointerUp",
-  "onPointerUpCapture",
-  "onMouseDown",
-  "onMouseDownCapture",
-  "onMouseUp",
-  "onMouseUpCapture",
-  "onCompositionEnd",
-  "onCompositionStart",
-  "onCompositionUpdate"
-]);
 function formatDate2(date, dateFormat = "MM/DD/YYYY") {
   if (!date || !isValid2(date)) {
     return "";
@@ -2444,23 +2391,10 @@ function formatRange(range, dateFormat = "MM/DD/YYYY") {
   if (!range) return "";
   const from = formatDate2(range.from, dateFormat);
   const to = formatDate2(range.to, dateFormat);
-  if (from && to) return `${from} \u2013 ${to}`;
-  if (from) return `${from} \u2013`;
+  if (from && to) return from === to ? from : `${from} \u2013 ${to}`;
+  if (from) return from;
   return "";
 }
-function parseRange(value, dateFormat = "MM/DD/YYYY") {
-  if (!value) return null;
-  const parts = value.split(/\s*[\u2013\-]\s*/);
-  const fromStr = parts[0]?.trim();
-  if (!fromStr) return null;
-  const fromParsed = dateFnsParse2(fromStr, DATE_FORMAT_TOKENS2[dateFormat], /* @__PURE__ */ new Date());
-  if (!isValid2(fromParsed)) return null;
-  const toStr = parts[1]?.trim();
-  if (!toStr) return { from: fromParsed, to: void 0 };
-  const toParsed = dateFnsParse2(toStr, DATE_FORMAT_TOKENS2[dateFormat], /* @__PURE__ */ new Date());
-  if (!isValid2(toParsed)) return { from: fromParsed, to: void 0 };
-  return { from: fromParsed, to: toParsed };
-}
 function rangePlaceholder(dateFormat) {
   const p = DATE_FORMAT_PLACEHOLDER2[dateFormat];
   return `${p} \u2013 ${p}`;
@@ -2484,8 +2418,11 @@ function DateRangeInput({
   captionLayout = "dropdown",
   showOutsideDays = false,
   classNames,
+  components,
+  formatters,
+  buttonVariant,
   placeholder,
-  onBlur,
+  size,
   ...restProps
 }) {
   const resolvedPlaceholder = placeholder ?? rangePlaceholder(dateFormat);
@@ -2493,23 +2430,12 @@ function DateRangeInput({
   const [monthState, setMonthState] = React21.useState(
     dateRange?.from ?? null
   );
-  const [value, setValue] = React21.useState(formatRange(dateRange, dateFormat));
-  const [inputProps, calendarProps] = React21.useMemo(() => {
-    const nextInputProps = {};
-    const nextCalendarProps = {};
-    for (const [key, val] of Object.entries(restProps)) {
-      const isInputProp = INPUT_PROP_KEYS2.has(key) || key.startsWith("aria-") || key.startsWith("data-");
-      if (isInputProp) {
-        nextInputProps[key] = val;
-      } else {
-        nextCalendarProps[key] = val;
-      }
+  const displayValue = formatRange(dateRange, dateFormat);
+  React21.useEffect(() => {
+    if (dateRange?.from) {
+      setMonthState(dateRange.from);
     }
-    return [
-      nextInputProps,
-      nextCalendarProps
-    ];
-  }, [restProps]);
+  }, [dateRange]);
   const today = React21.useMemo(() => {
     const d = /* @__PURE__ */ new Date();
     d.setHours(0, 0, 0, 0);
@@ -2539,12 +2465,6 @@ function DateRangeInput({
     }
     return null;
   }, [minDate]);
-  React21.useEffect(() => {
-    setValue(formatRange(dateRange, dateFormat));
-    if (dateRange?.from) {
-      setMonthState(dateRange.from);
-    }
-  }, [dateRange, dateFormat]);
   const effectiveMonth = month ?? monthState ?? void 0;
   const effectiveSelected = selected ?? dateRange;
   const isInputDisabled = inputDisabled ?? (typeof calendarDisabled === "boolean" ? calendarDisabled : false);
@@ -2565,8 +2485,14 @@ function DateRangeInput({
     }
     setDateRange(range);
   };
+  const handleClear = () => {
+    setDateRange(void 0);
+  };
+  const handleAdd = () => {
+    setOpen(false);
+  };
   const resolvedCalendarProps = {
-    ...calendarProps,
+    ...restProps,
     mode: "range",
     selected: effectiveSelected,
     captionLayout,
@@ -2578,93 +2504,56 @@ function DateRangeInput({
       calendarClassName
     ),
     classNames,
+    components,
+    formatters,
+    buttonVariant,
     onSelect: handleCalendarSelect,
     disabled: calendarDisabled ?? defaultCalendarDisabled
   };
-  const handleInputChange = (e) => {
-    const inputValue = e.target.value;
-    setValue(inputValue);
-    if (inputValue === "") {
-      setDateRange(void 0);
-      return;
-    }
-    const parsed = parseRange(inputValue, dateFormat);
-    if (!parsed || !parsed.from) return;
-    const from = new Date(parsed.from);
-    from.setHours(0, 0, 0, 0);
-    if (!isWithinBounds(from)) return;
-    if (parsed.to) {
-      const to = new Date(parsed.to);
-      to.setHours(0, 0, 0, 0);
-      if (isWithinBounds(to) && from <= to) {
-        setDateRange(parsed);
-        setMonthState(from);
-      }
-    } else {
-      setDateRange({ from: parsed.from, to: void 0 });
-      setMonthState(from);
-    }
-  };
-  const handleBlur = (e) => {
-    onBlur?.(e);
-    if (value === "") {
-      if (dateRange !== void 0) {
-        setDateRange(void 0);
-      }
-      return;
-    }
-    const parsed = parseRange(value, dateFormat);
-    if (!parsed || !parsed.from) {
-      setValue(formatRange(dateRange, dateFormat));
-      return;
-    }
-    const from = new Date(parsed.from);
-    from.setHours(0, 0, 0, 0);
-    if (!isWithinBounds(from)) {
-      setValue(formatRange(dateRange, dateFormat));
-      return;
-    }
-    if (parsed.to) {
-      const to = new Date(parsed.to);
-      to.setHours(0, 0, 0, 0);
-      if (!isWithinBounds(to) || from > to) {
-        setValue(formatRange(dateRange, dateFormat));
-      }
-    }
-  };
   return /* @__PURE__ */ jsx23("div", { className: cn("relative flex gap-2", className), children: /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx23(PopoverTrigger, { asChild: true, disabled: isInputDisabled, children: /* @__PURE__ */ jsx23("div", { className: "w-full relative", children: /* @__PURE__ */ jsx23(
-      Input,
+    /* @__PURE__ */ jsx23(PopoverTrigger, { asChild: true, disabled: isInputDisabled, children: /* @__PURE__ */ jsxs11(
+      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",
+          isInputDisabled && "pointer-events-none cursor-not-allowed opacity-50",
+          inputClassName
+        ),
         disabled: isInputDisabled,
-        onKeyDown: (e) => {
-          if (e.key === "ArrowDown" && !isInputDisabled) {
-            e.preventDefault();
-            setOpen(true);
-          }
-        },
-        rightIcon: /* @__PURE__ */ jsx23(CalendarDays2, { className: "h-4 w-4 text-muted-foreground" }),
-        rightIconOnClick: isInputDisabled ? void 0 : () => setOpen(!open),
-        rightIconButtonProps: { disabled: isInputDisabled },
-        ...inputProps
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx23(
-      PopoverContent,
-      {
-        className: "w-auto overflow-hidden p-0",
-        align: "end",
-        alignOffset: -8,
-        sideOffset: 10,
-        side: "top",
-        children: /* @__PURE__ */ jsx23(Calendar, { ...resolvedCalendarProps })
+        children: [
+          displayValue || resolvedPlaceholder,
+          /* @__PURE__ */ jsx23(CalendarDays2, { className: "h-4 w-4 text-muted-foreground shrink-0" })
+        ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxs11(PopoverContent, { className: "p-0 flex flex-col overflow-y-auto max-h-[min(90dvh,520px)] md:w-[350px] w-[var(--radix-popover-trigger-width)] ", 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(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: handleAdd,
+            type: "button",
+            children: "Add"
+          }
+        )
+      ] })
+    ] })
   ] }) });
 }
 
@@ -5309,26 +5198,47 @@ import "class-variance-authority";
 import { Clock } from "lucide-react";
 import * as React46 from "react";
 import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+var TIME_FORMAT_PLACEHOLDER = {
+  "12h": "hh:mm AM/PM",
+  "24h": "HH:mm",
+  "h:mm a": "h:mm am/pm",
+  "h:mm A": "h:mm AM/PM"
+};
+function is24HourFormat(tf) {
+  return tf === "24h";
+}
 function formatTime(time, timeFormat = "12h") {
   if (!time) return "";
-  if (timeFormat === "24h") {
-    return `${String(time.hours).padStart(2, "0")}:${String(time.minutes).padStart(2, "0")}`;
+  const { hours, minutes } = time;
+  const h24 = String(hours).padStart(2, "0");
+  const m = String(minutes).padStart(2, "0");
+  const h12 = hours % 12 || 12;
+  const h12p = String(h12).padStart(2, "0");
+  const period = hours >= 12 ? "PM" : "AM";
+  switch (timeFormat) {
+    case "24h":
+      return `${h24}:${m}`;
+    case "h:mm a":
+      return `${h12}:${m} ${period.toLowerCase()}`;
+    case "h:mm A":
+      return `${h12}:${m} ${period}`;
+    case "12h":
+    default:
+      return `${h12p}:${m} ${period}`;
   }
-  const period = time.hours >= 12 ? "PM" : "AM";
-  const h12 = time.hours % 12 || 12;
-  return `${String(h12).padStart(2, "0")}:${String(time.minutes).padStart(2, "0")} ${period}`;
 }
 function parseTime(value, timeFormat = "12h") {
   if (!value.trim()) return null;
-  if (timeFormat === "24h") {
-    const match2 = value.trim().match(/^(\d{1,2}):(\d{2})$/);
+  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 = value.trim().match(/^(\d{1,2}):(\d{2})\s*(AM|PM|am|pm)$/i);
+  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);
@@ -5339,7 +5249,7 @@ function parseTime(value, timeFormat = "12h") {
   return { hours, minutes };
 }
 function getDisplayHour(hours, timeFormat) {
-  if (timeFormat === "24h") return hours;
+  if (is24HourFormat(timeFormat)) return hours;
   return hours % 12 || 12;
 }
 function getPeriod(hours) {
@@ -5356,17 +5266,27 @@ function TimeInput({
   size,
   placeholder,
   onBlur,
+  icon,
+  formatDisplay,
   ...restProps
 }) {
-  const resolvedPlaceholder = placeholder ?? (timeFormat === "12h" ? "hh:mm AM/PM" : "HH:mm");
+  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 [open, setOpen] = React46.useState(false);
-  const [value, setValue] = React46.useState(formatTime(time, timeFormat));
+  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(formatTime(time, timeFormat));
-  }, [time, timeFormat]);
+    setValue(displayFormat(time));
+  }, [time, displayFormat]);
   const scrollToSelected = React46.useCallback(() => {
     requestAnimationFrame(() => {
       for (const ref of [hoursRef, minutesRef, periodRef]) {
@@ -5404,12 +5324,12 @@ function TimeInput({
     }
     const parsed = parseTime(value, timeFormat);
     if (!parsed) {
-      setValue(formatTime(time, timeFormat));
+      setValue(displayFormat(time));
     }
   };
   const handleHourSelect = (hour) => {
     let h24;
-    if (timeFormat === "24h") {
+    if (is24HourFormat(timeFormat)) {
       h24 = hour;
     } else {
       const currentPeriod = time ? getPeriod(time.hours) : "AM";
@@ -5430,7 +5350,7 @@ function TimeInput({
     const newHours = period === "AM" ? currentH12 : currentH12 + 12;
     setTime({ hours: newHours, minutes: time?.minutes ?? 0 });
   };
-  const hoursList = timeFormat === "12h" ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const hoursList = is24HourFormat(timeFormat) ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
   const minutesList = Array.from(
     { length: Math.ceil(60 / minuteStep) },
     (_, i) => i * minuteStep
@@ -5458,21 +5378,17 @@ function TimeInput({
             setOpen(true);
           }
         },
-        rightIcon: /* @__PURE__ */ jsx49(Clock, { className: "h-4 w-4 text-muted-foreground" }),
+        rightIcon: icon !== void 0 ? icon : /* @__PURE__ */ jsx49(Clock, { className: "h-4 w-4 text-muted-foreground" }),
         ...restProps
       }
     ) }) }),
     /* @__PURE__ */ jsx49(
       PopoverContent,
       {
-        className: "w-auto p-0",
-        align: "end",
-        alignOffset: -8,
-        sideOffset: 10,
-        side: "top",
+        className: "w-auto p-0 ",
         onOpenAutoFocus: (e) => e.preventDefault(),
         children: /* @__PURE__ */ jsxs24("div", { className: "flex divide-x", children: [
-          /* @__PURE__ */ jsx49("div", { className: "h-56 w-16 overflow-y-auto overscroll-contain  ", children: /* @__PURE__ */ jsx49("div", { ref: hoursRef, className: "flex flex-col p-1 ", children: hoursList.map((h) => /* @__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: hoursRef, className: "flex flex-col p-1 ", children: hoursList.map((h) => /* @__PURE__ */ jsx49(
             Button,
             {
               variant: "ghost",
@@ -5487,7 +5403,7 @@ function TimeInput({
             },
             h
           )) }) }),
-          /* @__PURE__ */ jsx49("div", { className: "h-56 w-16 overflow-y-auto overscroll-contain", 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: "flex flex-col p-1 ", children: minutesList.map((m) => /* @__PURE__ */ jsx49(
             Button,
             {
               variant: "ghost",
@@ -5502,7 +5418,7 @@ function TimeInput({
             },
             m
           )) }) }),
-          timeFormat === "12h" && /* @__PURE__ */ jsx49("div", { className: "flex flex-col p-1 justify-center gap-1", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx49(
+          !is24HourFormat(timeFormat) && /* @__PURE__ */ jsx49("div", { className: "flex flex-col p-1 justify-center gap-1", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx49(
             Button,
             {
               variant: "ghost",