@mesob/ui 0.5.7 → 0.5.9

package/dist/components.js

@@ -5019,10 +5019,12 @@ function EntityFormActions({
   isSubmitting = false,
   isDeleting = false,
   disabled = false,
+  deleteDisabled,
   submitLabel,
   deleteLabel = "Delete",
   itemName = "item"
 }) {
+  const deleteTriggerDisabled = deleteDisabled ?? disabled;
   const defaultSubmitLabel = mode === "new" ? "Create" : "Update";
   const label = submitLabel || defaultSubmitLabel;
   return /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
@@ -5058,7 +5060,7 @@ function EntityFormActions({
             Button,
             {
               variant: "destructive",
-              disabled,
+              disabled: deleteTriggerDisabled,
               loading: isDeleting,
               className: "cursor-pointer",
               leftIcon: /* @__PURE__ */ jsx44(IconTrash3, { className: "size-4" })
@@ -8384,7 +8386,7 @@ function DatePickerContent({
               }
             )
           ] }),
-          view === "days" && /* @__PURE__ */ jsx76(Fragment14, { children: (() => {
+          view === "days" && (() => {
             const dayGridClass = withWeekNumbers ? "grid grid-cols-[2rem_repeat(7,minmax(0,1fr))]" : "grid grid-cols-7";
             const rowCount = cells.length / 7;
             const labels = weekdayHeaderLabels(firstDayOfWeek);
@@ -8510,7 +8512,7 @@ function DatePickerContent({
                 }
               )
             ] });
-          })() }),
+          })(),
           view === "months" && /* @__PURE__ */ jsx76("div", { className: "grid grid-cols-3 gap-1 py-2", children: monthShortList.map((m, i) => {
             const sel = calendarType === "EC" ? (() => {
               if (!primaryDate) {
@@ -11849,7 +11851,8 @@ var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
   variant = "default",
   leftSection,
   leftSectionPointerEvents = "auto",
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  rightSection
 }, ref) {
   const filled = variant === "filled";
   return /* @__PURE__ */ jsxs68(
@@ -11861,7 +11864,7 @@ var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
       "aria-label": ariaLabel,
       "aria-invalid": !!error || void 0,
       className: cn(
-        "relative w-full overflow-hidden border pr-10 text-left transition-colors focus:outline-none",
+        "relative flex w-full items-center overflow-hidden border pr-10 text-left transition-colors focus:outline-none",
         TRIGGER_SIZE_CLASSES[size],
         leftSection && "pl-10",
         TRIGGER_RADIUS_CLASSES[radius],
@@ -11882,7 +11885,17 @@ var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
             children: leftSection
           }
         ) : null,
-        displayValue ? /* @__PURE__ */ jsx100("span", { className: "block truncate text-foreground", children: displayValue }) : /* @__PURE__ */ jsx100("span", { className: error ? "text-destructive" : "text-muted-foreground", children: placeholder })
+        displayValue ? /* @__PURE__ */ jsx100("span", { className: "min-w-0 flex-1 truncate text-foreground", children: displayValue }) : /* @__PURE__ */ jsx100(
+          "span",
+          {
+            className: cn(
+              "min-w-0 flex-1 truncate",
+              error ? "text-destructive" : "text-muted-foreground"
+            ),
+            children: placeholder
+          }
+        ),
+        rightSection ? /* @__PURE__ */ jsx100("span", { className: "ml-2 shrink-0", children: rightSection }) : null
       ]
     }
   );
@@ -11915,6 +11928,8 @@ function DateInputShell({
   triggerRef,
   onClear,
   dropdownClassName,
+  popoverProps,
+  rightSection,
   children,
   buttonRef
 }) {
@@ -11933,7 +11948,8 @@ function DateInputShell({
       variant,
       leftSection,
       leftSectionPointerEvents,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      rightSection
     }
   );
   const wrapper = /* @__PURE__ */ jsxs69("div", { className: cn("relative inline-block w-full", className), children: [
@@ -12009,14 +12025,16 @@ function DateInputShell({
       PopoverContent,
       {
         anchor: triggerRef,
-        side: contentSide,
+        side: popoverProps?.side ?? contentSide,
         sideOffset: 8,
-        align: "center",
+        align: popoverProps?.align ?? "center",
         alignOffset: 0,
         className: cn(
           "max-w-[calc(100vw-1rem)] rounded-md border border-border bg-background p-0 shadow-xl",
+          popoverProps?.width === "target" && "w-[var(--anchor-width)]",
           dropdownClassName
         ),
+        style: popoverProps?.width && popoverProps.width !== "target" ? { width: popoverProps.width } : void 0,
         children
       }
     )
@@ -12587,6 +12605,25 @@ function formatDateTimeDisplay(d, calendarType, withSeconds) {
 }
 
 // src/components/date-time/datetime-picker/time-utils.ts
+function getTimeColumnOptions(field, step2, is12h) {
+  if (field === "h") {
+    const max = is12h ? 12 : 23;
+    const start = is12h ? 1 : 0;
+    const opts = [];
+    for (let i = start; i <= max; i += step2) {
+      opts.push(pad2(i));
+    }
+    return opts;
+  }
+  if (field === "m" || field === "s") {
+    const opts = [];
+    for (let i = 0; i <= 59; i += step2) {
+      opts.push(pad2(i));
+    }
+    return opts;
+  }
+  return [];
+}
 function clampAndPad(raw, max) {
   if (!raw) {
     return "";
@@ -13105,213 +13142,584 @@ function TextDateInput({
 }
 
 // src/components/date-time/datetime-picker/time-grid.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
-function buildSlots(stepMinutes, minHour, maxHour) {
-  const slots = [];
-  const d = new Date(0, 0, 1, 0, 0, 0);
-  for (let h = minHour; h < maxHour; h++) {
-    for (let m = 0; m < 60; m += stepMinutes) {
-      d.setHours(h, m, 0, 0);
-      slots.push(new Date(d.getTime()));
-    }
+import { useState as useState30 } from "react";
+
+// src/components/date-time/time-picker/get-time-range.ts
+function parseToMinutes(str) {
+  const parts = str.trim().split(":");
+  if (parts.length < 2) {
+    return 0;
+  }
+  const h = Number.parseInt(parts[0], 10) || 0;
+  const m = Number.parseInt(parts[1], 10) || 0;
+  const s = parts[2] ? Number.parseInt(parts[2], 10) || 0 : 0;
+  return h * 60 + m + s / 60;
+}
+function minutesToTime(totalMins) {
+  const h = Math.floor(totalMins / 60) % 24;
+  const m = Math.floor(totalMins % 60);
+  const s = Math.round(totalMins % 1 * 60);
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+function getTimeRange(options) {
+  const start = options.startTime ?? options.from ?? "00:00";
+  const end = options.endTime ?? options.to ?? "23:59";
+  const step2 = options.interval ?? options.step ?? "01:00";
+  const withSeconds = options.withSeconds;
+  const startMins = parseToMinutes(start);
+  const endMins = parseToMinutes(end);
+  const intervalMins = parseToMinutes(step2);
+  if (intervalMins <= 0) {
+    return [];
+  }
+  const result = [];
+  let current = startMins;
+  while (current <= endMins) {
+    const time = minutesToTime(current);
+    result.push(withSeconds === false ? time.slice(0, 5) : time);
+    current += intervalMins;
   }
-  return slots;
+  return result;
+}
+
+// src/components/date-time/datetime-picker/time-grid.tsx
+import { jsx as jsx107 } from "react/jsx-runtime";
+function to12h(time24) {
+  const [hStr] = time24.split(":");
+  const h = Number.parseInt(hStr ?? "0", 10);
+  if (h === 0) {
+    return { h: 12, amPm: "AM" };
+  }
+  if (h < 12) {
+    return { h, amPm: "AM" };
+  }
+  if (h === 12) {
+    return { h: 12, amPm: "PM" };
+  }
+  return { h: h - 12, amPm: "PM" };
+}
+function formatTimeForDisplay(time24, format, withSeconds, amPmLabels) {
+  const parts = time24.split(":");
+  const h = Number.parseInt(parts[0] ?? "0", 10);
+  const m = parts[1] ?? "00";
+  const s = parts[2] ?? "00";
+  if (format === "12h") {
+    const { h: h12, amPm } = to12h(time24);
+    const suffix2 = withSeconds ? `:${s}` : "";
+    const ap = amPm === "AM" ? amPmLabels.am : amPmLabels.pm;
+    return `${h12}:${m}${suffix2} ${ap}`;
+  }
+  const suffix = withSeconds ? `:${s}` : "";
+  return `${pad2(h)}:${m}${suffix}`;
+}
+function parseToMinutes2(time) {
+  const parts = time.trim().split(":");
+  if (parts.length < 2) {
+    return 0;
+  }
+  const h = Number.parseInt(parts[0], 10) || 0;
+  const m = Number.parseInt(parts[1], 10) || 0;
+  const s = parts[2] ? Number.parseInt(parts[2], 10) || 0 : 0;
+  return h * 60 + m + s / 60;
+}
+function normalizeTimeStr(t) {
+  const parts = t.trim().split(":");
+  const h = Number.parseInt(parts[0], 10) || 0;
+  const m = Number.parseInt(parts[1], 10) || 0;
+  return `${pad2(h)}:${pad2(m)}`;
+}
+var SIZE_CLASSES = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-2.5 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
+var RADIUS_CLASSES = {
+  xs: "rounded",
+  sm: "rounded",
+  md: "rounded-md",
+  lg: "rounded-lg"
+};
+var SPACING_CLASSES = {
+  xs: "gap-2",
+  sm: "gap-3",
+  md: "gap-3",
+  lg: "gap-4"
+};
+function buildDataFromLegacy(stepMinutes, minHour, maxHour) {
+  const lastM = stepMinutes >= 60 ? 0 : 60 - stepMinutes;
+  const lastH = stepMinutes >= 60 ? maxHour - 1 : maxHour - 1;
+  return getTimeRange({
+    from: `${pad2(minHour)}:00`,
+    to: `${pad2(lastH)}:${pad2(lastM)}`,
+    step: `00:${pad2(stepMinutes)}`,
+    withSeconds: false
+  });
 }
 function TimeGrid({
-  value,
+  data: dataProp,
+  value: controlledValue,
   onChange,
+  defaultValue = null,
+  format = "24h",
+  withSeconds = false,
+  amPmLabels = { am: "AM", pm: "PM" },
+  minTime,
+  maxTime,
+  disableTime = [],
+  allowDeselect = false,
+  disabled = false,
+  size = "md",
+  radius = "md",
+  simpleGridProps = {},
   stepMinutes = 30,
   minHour = 0,
   maxHour = 24,
-  baseDate = /* @__PURE__ */ new Date(),
   className
 }) {
-  const base = new Date(
-    baseDate.getFullYear(),
-    baseDate.getMonth(),
-    baseDate.getDate()
-  );
-  const slots = buildSlots(stepMinutes, minHour, maxHour);
-  const valueMinutes = value != null ? value.getHours() * 60 + value.getMinutes() : null;
-  return /* @__PURE__ */ jsx107(
+  const data = dataProp ?? buildDataFromLegacy(stepMinutes, minHour, maxHour);
+  const isControlled = controlledValue !== void 0;
+  const [internal, setInternal] = useState30(defaultValue);
+  const value = isControlled ? controlledValue : internal;
+  const setValue = (v) => {
+    if (!isControlled) {
+      setInternal(v);
+    }
+    onChange?.(v);
+  };
+  const minMins = minTime != null ? parseToMinutes2(minTime) : -1;
+  const maxMins = maxTime != null ? parseToMinutes2(maxTime) : Number.POSITIVE_INFINITY;
+  const disabledSet = new Set(disableTime.map((t) => normalizeTimeStr(t)));
+  const cols = simpleGridProps.cols ?? 3;
+  const spacing = simpleGridProps.spacing ?? "sm";
+  const colsClass = (() => {
+    if (typeof cols === "number") {
+      if (cols === 1) {
+        return "grid-cols-1";
+      }
+      if (cols === 2) {
+        return "grid-cols-2";
+      }
+      if (cols === 3) {
+        return "grid-cols-3";
+      }
+      if (cols === 4) {
+        return "grid-cols-4";
+      }
+      return "grid-cols-3";
+    }
+    return cn(
+      (cols.base ?? 1) === 1 && "grid-cols-1",
+      (cols.base ?? 1) === 2 && "grid-cols-2",
+      (cols.base ?? 1) === 3 && "grid-cols-3",
+      (cols.base ?? 1) === 4 && "grid-cols-4",
+      cols.sm === 1 && "sm:grid-cols-1",
+      cols.sm === 2 && "sm:grid-cols-2",
+      cols.sm === 3 && "sm:grid-cols-3",
+      cols.sm === 4 && "sm:grid-cols-4",
+      cols.md === 1 && "md:grid-cols-1",
+      cols.md === 2 && "md:grid-cols-2",
+      cols.md === 3 && "md:grid-cols-3",
+      cols.md === 4 && "md:grid-cols-4",
+      cols.lg === 1 && "lg:grid-cols-1",
+      cols.lg === 2 && "lg:grid-cols-2",
+      cols.lg === 3 && "lg:grid-cols-3",
+      cols.lg === 4 && "lg:grid-cols-4"
+    );
+  })();
+  return /* @__PURE__ */ jsx107("div", { className: cn("flex w-full justify-center", className), children: /* @__PURE__ */ jsx107(
     "div",
     {
       className: cn(
-        "grid grid-cols-4 gap-1 overflow-y-auto rounded-md border border-border bg-background p-2 max-h-[200px]",
-        className
+        "inline-grid w-fit overflow-y-auto rounded-lg border border-border bg-background p-3",
+        colsClass,
+        SPACING_CLASSES[spacing],
+        "max-h-[200px]"
       ),
-      children: slots.map((slot) => {
-        const slotMinutes = slot.getHours() * 60 + slot.getMinutes();
-        const selected = valueMinutes === slotMinutes;
-        const date = new Date(base);
-        date.setHours(slot.getHours(), slot.getMinutes(), 0, 0);
-        const label = `${pad2(slot.getHours())}:${pad2(slot.getMinutes())}`;
+      children: data.map((slot) => {
+        const normalized = normalizeTimeStr(slot);
+        const slotMins = parseToMinutes2(normalized);
+        const isDisabled = disabled || minMins >= 0 && slotMins < minMins || maxMins < Number.POSITIVE_INFINITY && slotMins > maxMins || disabledSet.has(normalized);
+        const selected = value != null && normalizeTimeStr(value) === normalized;
         return /* @__PURE__ */ jsx107(
           "button",
           {
             type: "button",
-            onClick: () => onChange(selected ? null : date),
+            disabled: isDisabled,
+            onClick: () => {
+              if (isDisabled) {
+                return;
+              }
+              if (selected && allowDeselect) {
+                setValue(null);
+              } else if (!selected) {
+                setValue(normalized);
+              }
+            },
             className: cn(
-              "rounded px-2 py-1.5 text-center text-sm transition-colors",
-              selected ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-muted"
+              "rounded border bg-background text-center transition-colors",
+              SIZE_CLASSES[size],
+              RADIUS_CLASSES[radius],
+              isDisabled && "cursor-not-allowed border-gray-200 text-gray-400 dark:border-gray-600 dark:text-gray-500",
+              !isDisabled && (selected ? "border-primary bg-primary text-primary-foreground" : "border-gray-200 text-foreground hover:bg-muted dark:border-gray-600")
             ),
-            children: label
+            children: formatTimeForDisplay(
+              normalized,
+              format,
+              withSeconds,
+              amPmLabels
+            )
           },
-          label
+          normalized
         );
       })
     }
-  );
+  ) });
 }
 
 // src/components/date-time/datetime-picker/time-input.tsx
-import { useCallback as useCallback13, useEffect as useEffect18, useState as useState30 } from "react";
+import {
+  forwardRef as forwardRef8,
+  useCallback as useCallback13,
+  useEffect as useEffect18,
+  useId as useId5,
+  useImperativeHandle,
+  useRef as useRef13,
+  useState as useState31
+} from "react";
 import { Fragment as Fragment19, jsx as jsx108, jsxs as jsxs71 } from "react/jsx-runtime";
-function TimeInput({
-  value,
-  onChange,
-  withSeconds = false,
-  disabled = false,
-  baseDate = /* @__PURE__ */ new Date(),
-  className,
-  "aria-label": ariaLabel
-}) {
-  const base = new Date(
-    baseDate.getFullYear(),
-    baseDate.getMonth(),
-    baseDate.getDate()
-  );
-  const [h, setH] = useState30(value ? pad2(value.getHours()) : "");
-  const [m, setM] = useState30(value ? pad2(value.getMinutes()) : "");
-  const [s, setS] = useState30(value ? pad2(value.getSeconds()) : "");
-  const [focus, setFocus] = useState30(null);
-  useEffect18(() => {
+function to12h2(hour24) {
+  if (hour24 === 0) {
+    return { h: 12, amPm: "AM" };
+  }
+  if (hour24 < 12) {
+    return { h: hour24, amPm: "AM" };
+  }
+  if (hour24 === 12) {
+    return { h: 12, amPm: "PM" };
+  }
+  return { h: hour24 - 12, amPm: "PM" };
+}
+function to24h(h12, amPm) {
+  if (amPm === "AM") {
+    return h12 === 12 ? 0 : h12;
+  }
+  return h12 === 12 ? 12 : h12 + 12;
+}
+var TimeInput = forwardRef8(
+  function TimeInput2({
+    value,
+    onChange,
+    withSeconds = false,
+    format = "24h",
+    disabled = false,
+    baseDate = /* @__PURE__ */ new Date(),
+    leftSection,
+    rightSection,
+    label,
+    className,
+    "aria-label": ariaLabel
+  }, ref) {
+    const hoursInputId = useId5();
+    const base = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate()
+    );
+    const is12h = format === "12h";
+    const hourMax = is12h ? 12 : 23;
+    const [h, setH] = useState31(() => {
+      if (!value) {
+        return "";
+      }
+      return is12h ? pad2(to12h2(value.getHours()).h) : pad2(value.getHours());
+    });
+    const [m, setM] = useState31(value ? pad2(value.getMinutes()) : "");
+    const [s, setS] = useState31(value ? pad2(value.getSeconds()) : "");
+    const [amPm, setAmPm] = useState31(
+      () => value ? to12h2(value.getHours()).amPm : "AM"
+    );
+    const [focus, setFocus] = useState31(null);
+    useEffect18(() => {
+      if (value) {
+        if (is12h) {
+          const { h: h12, amPm: ap } = to12h2(value.getHours());
+          setH(pad2(h12));
+          setAmPm(ap);
+        } else {
+          setH(pad2(value.getHours()));
+        }
+        setM(pad2(value.getMinutes()));
+        setS(pad2(value.getSeconds()));
+      } else {
+        setH("");
+        setM("");
+        setS("");
+        if (is12h) {
+          setAmPm("AM");
+        }
+      }
+    }, [value, is12h]);
+    const commit = useCallback13(
+      (hh, mm, ss, ap = "AM") => {
+        const nm = clampAndPad(mm, 59);
+        const ns = withSeconds ? clampAndPad(ss, 59) : "00";
+        if (!(hh && nm)) {
+          onChange?.(null);
+          return;
+        }
+        const h12Raw = Number.parseInt(clampAndPad(hh, 12), 10);
+        const hour24 = is12h ? to24h(h12Raw === 0 ? 12 : h12Raw, ap) : Number.parseInt(clampAndPad(hh, 23), 10);
+        const d = new Date(base);
+        d.setHours(hour24, Number.parseInt(nm, 10), Number.parseInt(ns, 10), 0);
+        onChange?.(d);
+      },
+      [base, onChange, withSeconds, is12h]
+    );
+    const handleBlur = useCallback13(() => {
+      setFocus(null);
+      const nh = clampAndPad(h, hourMax);
+      const nm = clampAndPad(m, 59);
+      const ns = withSeconds ? clampAndPad(s, 59) : "00";
+      if (nh) {
+        setH(nh);
+      }
+      if (nm) {
+        setM(nm);
+      }
+      if (withSeconds && ns) {
+        setS(ns);
+      }
+      commit(nh || h, nm || m, withSeconds ? ns || s : "00", amPm);
+    }, [h, m, s, amPm, commit, withSeconds, hourMax]);
+    const nativeInputRef = useRef13(null);
+    useImperativeHandle(ref, () => nativeInputRef.current);
+    let nativeValue = "";
     if (value) {
-      setH(pad2(value.getHours()));
-      setM(pad2(value.getMinutes()));
-      setS(pad2(value.getSeconds()));
-    } else {
-      setH("");
-      setM("");
-      setS("");
+      if (withSeconds) {
+        nativeValue = `${pad2(value.getHours())}:${pad2(value.getMinutes())}:${pad2(value.getSeconds())}`;
+      } else {
+        nativeValue = `${pad2(value.getHours())}:${pad2(value.getMinutes())}`;
+      }
     }
-  }, [value]);
-  const commit = useCallback13(
-    (hh, mm, ss) => {
-      const nh = clampAndPad(hh, 23);
-      const nm = clampAndPad(mm, 59);
-      const ns = withSeconds ? clampAndPad(ss, 59) : "00";
-      if (nh && nm) {
+    const handleNativeChange = useCallback13(
+      (e) => {
+        const v = e.target.value;
+        if (!v) {
+          onChange?.(null);
+          return;
+        }
+        const [hh, mm, ss = "00"] = v.split(":").map((x) => x.padStart(2, "0"));
         const d = new Date(base);
         d.setHours(
-          Number.parseInt(nh, 10),
-          Number.parseInt(nm, 10),
-          Number.parseInt(ns, 10),
+          Number.parseInt(hh, 10),
+          Number.parseInt(mm, 10),
+          Number.parseInt(ss, 10),
           0
         );
         onChange?.(d);
-      } else {
-        onChange?.(null);
-      }
-    },
-    [base, onChange, withSeconds]
-  );
-  const handleBlur = useCallback13(() => {
-    setFocus(null);
-    const nh = clampAndPad(h, 23);
-    const nm = clampAndPad(m, 59);
-    const ns = withSeconds ? clampAndPad(s, 59) : "00";
-    if (nh) {
-      setH(nh);
-    }
-    if (nm) {
-      setM(nm);
-    }
-    if (withSeconds && ns) {
-      setS(ns);
-    }
-    commit(nh || h, nm || m, withSeconds ? ns || s : "00");
-  }, [h, m, s, commit, withSeconds]);
-  return /* @__PURE__ */ jsxs71(
-    "fieldset",
-    {
-      className: cn(
-        "flex flex-row items-center gap-0.5 rounded border border-input bg-background px-2.5 py-1.5",
-        disabled && "opacity-50 cursor-not-allowed",
-        className
-      ),
-      "aria-label": ariaLabel ?? "Time",
-      children: [
-        /* @__PURE__ */ jsx108("legend", { className: "sr-only", children: "Time" }),
-        /* @__PURE__ */ jsx108(
-          "input",
-          {
-            type: "text",
-            inputMode: "numeric",
-            value: focus === "h" ? h : h || "--",
-            placeholder: "--",
-            "aria-label": "Hours",
-            disabled,
-            onFocus: () => setFocus("h"),
-            onBlur: handleBlur,
-            onChange: (e) => setH(e.target.value.replace(/\D/g, "").slice(0, 2)),
-            className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
-          }
-        ),
-        /* @__PURE__ */ jsx108("span", { className: "select-none text-sm text-muted-foreground", children: ":" }),
-        /* @__PURE__ */ jsx108(
-          "input",
-          {
-            type: "text",
-            inputMode: "numeric",
-            value: focus === "m" ? m : m || "--",
-            placeholder: "--",
-            "aria-label": "Minutes",
-            disabled,
-            onFocus: () => setFocus("m"),
-            onBlur: handleBlur,
-            onChange: (e) => setM(e.target.value.replace(/\D/g, "").slice(0, 2)),
-            className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
-          }
+      },
+      [base, onChange]
+    );
+    const fieldset = /* @__PURE__ */ jsxs71(
+      "fieldset",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-row items-center gap-0.5 rounded border border-input bg-background px-2.5 py-1.5",
+          disabled && "opacity-50 cursor-not-allowed",
+          leftSection && "pl-9",
+          rightSection && "pr-9",
+          className
         ),
-        withSeconds && /* @__PURE__ */ jsxs71(Fragment19, { children: [
+        "aria-label": ariaLabel ?? "Time",
+        children: [
+          /* @__PURE__ */ jsx108("legend", { className: "sr-only", children: "Time" }),
+          /* @__PURE__ */ jsx108(
+            "input",
+            {
+              ref: nativeInputRef,
+              type: "time",
+              value: nativeValue,
+              onChange: handleNativeChange,
+              className: "absolute size-0 opacity-0 pointer-events-none",
+              tabIndex: -1,
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx108(
+            "input",
+            {
+              id: hoursInputId,
+              type: "text",
+              inputMode: "numeric",
+              value: focus === "h" ? h : h || "--",
+              placeholder: "--",
+              "aria-label": "Hours",
+              disabled,
+              onFocus: () => setFocus("h"),
+              onBlur: handleBlur,
+              onChange: (e) => {
+                const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
+                if (is12h && raw) {
+                  const n = Number.parseInt(raw, 10);
+                  if (n > 12) {
+                    setH("12");
+                  } else {
+                    setH(raw);
+                  }
+                } else {
+                  setH(raw);
+                }
+              },
+              className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            }
+          ),
           /* @__PURE__ */ jsx108("span", { className: "select-none text-sm text-muted-foreground", children: ":" }),
           /* @__PURE__ */ jsx108(
             "input",
             {
               type: "text",
               inputMode: "numeric",
-              value: focus === "s" ? s : s || "--",
+              value: focus === "m" ? m : m || "--",
               placeholder: "--",
-              "aria-label": "Seconds",
+              "aria-label": "Minutes",
               disabled,
-              onFocus: () => setFocus("s"),
+              onFocus: () => setFocus("m"),
               onBlur: handleBlur,
-              onChange: (e) => setS(e.target.value.replace(/\D/g, "").slice(0, 2)),
+              onChange: (e) => setM(e.target.value.replace(/\D/g, "").slice(0, 2)),
               className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
             }
-          )
-        ] })
-      ]
+          ),
+          withSeconds && /* @__PURE__ */ jsxs71(Fragment19, { children: [
+            /* @__PURE__ */ jsx108("span", { className: "select-none text-sm text-muted-foreground", children: ":" }),
+            /* @__PURE__ */ jsx108(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                value: focus === "s" ? s : s || "--",
+                placeholder: "--",
+                "aria-label": "Seconds",
+                disabled,
+                onFocus: () => setFocus("s"),
+                onBlur: handleBlur,
+                onChange: (e) => setS(e.target.value.replace(/\D/g, "").slice(0, 2)),
+                className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          is12h && /* @__PURE__ */ jsxs71(Fragment19, { children: [
+            /* @__PURE__ */ jsx108("span", { className: "w-1 shrink-0" }),
+            /* @__PURE__ */ jsx108(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: () => {
+                  const next = amPm === "AM" ? "PM" : "AM";
+                  setAmPm(next);
+                  if (h && m) {
+                    commit(h, m, withSeconds ? s || "00" : "00", next);
+                  }
+                },
+                className: cn(
+                  "rounded px-2 py-0.5 text-sm font-medium transition-colors",
+                  "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  disabled && "cursor-not-allowed opacity-50"
+                ),
+                "aria-label": amPm === "AM" ? "Switch to PM" : "Switch to AM",
+                children: amPm
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const wrapper = /* @__PURE__ */ jsxs71("div", { className: "relative flex w-full min-w-0", children: [
+      leftSection && /* @__PURE__ */ jsx108("span", { className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4", children: leftSection }),
+      fieldset,
+      rightSection && /* @__PURE__ */ jsx108("span", { className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4 [&_button]:pointer-events-auto", children: rightSection })
+    ] });
+    if (label) {
+      return /* @__PURE__ */ jsxs71("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx108(
+          "label",
+          {
+            htmlFor: hoursInputId,
+            className: "block text-sm font-semibold text-foreground",
+            children: label
+          }
+        ),
+        wrapper
+      ] });
     }
-  );
-}
+    return wrapper;
+  }
+);
 
 // src/components/date-time/datetime-picker/time-value.tsx
 import { jsx as jsx109 } from "react/jsx-runtime";
+function to12h3(hour24) {
+  if (hour24 === 0) {
+    return { h: 12, amPm: "AM" };
+  }
+  if (hour24 < 12) {
+    return { h: hour24, amPm: "AM" };
+  }
+  if (hour24 === 12) {
+    return { h: 12, amPm: "PM" };
+  }
+  return { h: hour24 - 12, amPm: "PM" };
+}
+function parseTimeString(str) {
+  const parts = str.trim().split(":");
+  if (parts.length < 2) {
+    return null;
+  }
+  const h = Number.parseInt(parts[0], 10);
+  const m = Number.parseInt(parts[1], 10);
+  const s = parts[2] ? Number.parseInt(parts[2], 10) : 0;
+  if (Number.isNaN(h) || Number.isNaN(m)) {
+    return null;
+  }
+  return { h, m, s };
+}
 function TimeValue({
   value,
-  format,
+  format = "24h",
   withSeconds = false,
+  amPmLabels = { am: "AM", pm: "PM" },
   className
 }) {
-  const defaultFormat2 = (d) => `${pad2(d.getHours())}:${pad2(d.getMinutes())}${withSeconds ? `:${pad2(d.getSeconds())}` : ""}`;
-  const str = format ? format(value) : defaultFormat2(value);
+  let h;
+  let m;
+  let s;
+  if (value instanceof Date) {
+    h = value.getHours();
+    m = value.getMinutes();
+    s = value.getSeconds();
+  } else {
+    const parsed = parseTimeString(value);
+    if (!parsed) {
+      return /* @__PURE__ */ jsx109("span", { className, children: "--:--" });
+    }
+    ({ h, m, s } = parsed);
+  }
+  let str;
+  if (format === "12h") {
+    const { h: h12, amPm } = to12h3(h);
+    const suffix = withSeconds ? `:${pad2(s)}` : "";
+    const ap = amPm === "AM" ? amPmLabels.am : amPmLabels.pm;
+    str = `${h12}:${pad2(m)}${suffix} ${ap}`;
+  } else {
+    const suffix = withSeconds ? `:${pad2(s)}` : "";
+    str = `${pad2(h)}:${pad2(m)}${suffix}`;
+  }
   return /* @__PURE__ */ jsx109("span", { className, children: str });
 }
 
 // src/components/date-time/mini-calendar/use-mini-calendar.ts
-import { useCallback as useCallback14, useEffect as useEffect19, useState as useState31 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect19, useState as useState32 } from "react";
 function dayInWindow(day, windowStart, numberOfDays) {
   const end = addDays(windowStart, numberOfDays - 1);
   const t = stripTime2(day).getTime();
@@ -13328,7 +13736,7 @@ function useMiniCalendar(props) {
     maxDate
   } = props;
   const isControlled = valueProp !== void 0;
-  const [internalValue, setInternalValue] = useState31(
+  const [internalValue, setInternalValue] = useState32(
     defaultValue
   );
   const selectedIso = valueProp !== void 0 ? valueProp : internalValue;
@@ -13348,7 +13756,7 @@ function useMiniCalendar(props) {
     }
     return parseAnchorDate(defaultDate, today);
   })();
-  const [windowStart, setWindowStart] = useState31(() => stripTime2(initialStart));
+  const [windowStart, setWindowStart] = useState32(() => stripTime2(initialStart));
   const setSelected = useCallback14(
     (iso) => {
       if (!isControlled) {
@@ -13776,7 +14184,7 @@ function MonthPickerContent({
 }
 
 // src/components/date-time/month-picker/use-month-picker.ts
-import { useCallback as useCallback15, useEffect as useEffect20, useState as useState32 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect20, useState as useState33 } from "react";
 function useMonthPicker(props) {
   const {
     defaultCalendarType = "GC",
@@ -13789,13 +14197,13 @@ function useMonthPicker(props) {
   const type = props.type ?? "default";
   const isControlled = props.value !== void 0;
   const isDateControlled = controlledDate !== void 0;
-  const [_single, _setSingle] = useState32(
+  const [_single, _setSingle] = useState33(
     type === "default" ? props.defaultValue ?? null : null
   );
-  const [_multi, _setMulti] = useState32(
+  const [_multi, _setMulti] = useState33(
     type === "multiple" ? props.defaultValue ?? [] : []
   );
-  const [_range, _setRange] = useState32(
+  const [_range, _setRange] = useState33(
     type === "range" ? props.defaultValue ?? [
       null,
       null
@@ -13817,7 +14225,7 @@ function useMonthPicker(props) {
     multiValue = [];
     rangeValue = isControlled ? props.value : _range;
   }
-  const [hoveredMonth, setHoveredMonth] = useState32(null);
+  const [hoveredMonth, setHoveredMonth] = useState33(null);
   let hasValue;
   if (type === "default") {
     hasValue = !!singleValue;
@@ -13834,17 +14242,17 @@ function useMonthPicker(props) {
   } else {
     primaryDate = rangeValue[0];
   }
-  const [view, setView] = useState32("months");
-  const [calendarType, setCalendarType] = useState32(defaultCalendarType);
+  const [view, setView] = useState33("months");
+  const [calendarType, setCalendarType] = useState33(defaultCalendarType);
   const now = /* @__PURE__ */ new Date();
   const initDate = controlledDate ?? defaultDate ?? primaryDate ?? now;
-  const [gcViewYear, setGcViewYear] = useState32(initDate.getFullYear());
+  const [gcViewYear, setGcViewYear] = useState33(initDate.getFullYear());
   const initEC = toEC(
     initDate.getFullYear(),
     initDate.getMonth() + 1,
     initDate.getDate()
   );
-  const [ecViewYear, setEcViewYear] = useState32(initEC[0]);
+  const [ecViewYear, setEcViewYear] = useState33(initEC[0]);
   useEffect20(() => {
     if (!(isDateControlled && controlledDate)) {
       return;
@@ -14128,7 +14536,7 @@ function MonthPicker(props) {
 }
 
 // src/components/date-time/month-picker-input/month-picker-input.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/components/date-time/month-picker-input/use-month-picker-input.ts
 import { useCallback as useCallback16 } from "react";
@@ -14238,7 +14646,7 @@ function useMonthPickerInput(props) {
 
 // src/components/date-time/month-picker-input/month-picker-input.tsx
 import { jsx as jsx113 } from "react/jsx-runtime";
-var MonthPickerInput = forwardRef8(function MonthPickerInput2(props, ref) {
+var MonthPickerInput = forwardRef9(function MonthPickerInput2(props, ref) {
   const {
     label,
     placeholder = "Pick month",
@@ -14308,9 +14716,10 @@ var MonthPickerInput = forwardRef8(function MonthPickerInput2(props, ref) {
 });
 
 // src/components/date-time/time-picker/time-picker.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 
 // src/components/date-time/time-picker/time-picker-content.tsx
+import { useEffect as useEffect21, useRef as useRef14 } from "react";
 import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs74 } from "react/jsx-runtime";
 var CheckIcon = /* @__PURE__ */ jsxs74(
   "svg",
@@ -14327,12 +14736,82 @@ var CheckIcon = /* @__PURE__ */ jsxs74(
     ]
   }
 );
+function TimeColumn({
+  options,
+  value,
+  onSelect,
+  "aria-label": ariaLabel
+}) {
+  const listRef = useRef14(null);
+  const itemRef = useRef14(null);
+  useEffect21(() => {
+    if (!(value && listRef.current)) {
+      return;
+    }
+    const el = listRef.current.querySelector(
+      `[data-value="${value}"]`
+    );
+    if (el) {
+      const container = listRef.current;
+      const elementTop = el.offsetTop;
+      const elementHeight = el.offsetHeight;
+      const containerHeight = container.clientHeight;
+      const scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+      container.scrollTop = Math.max(0, scrollTop);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx114(
+    "div",
+    {
+      ref: listRef,
+      className: "no-scrollbar flex max-h-48 flex-col overflow-y-auto py-1",
+      role: "listbox",
+      "aria-label": ariaLabel,
+      children: options.map((opt) => /* @__PURE__ */ jsx114(
+        "button",
+        {
+          ref: (r) => {
+            if (opt === value) {
+              itemRef.current = r;
+            }
+          },
+          type: "button",
+          role: "option",
+          "data-value": opt,
+          "aria-selected": opt === value,
+          onClick: () => onSelect(opt),
+          className: cn(
+            "mx-0.5 min-w-10 shrink-0 rounded-md px-2 py-1 text-center text-sm transition-colors",
+            opt === value ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-muted"
+          ),
+          children: opt
+        },
+        opt
+      ))
+    }
+  );
+}
 function TimePickerContent({
   timeH,
   timeM,
   timeS,
   timeFocus,
   withSeconds,
+  is12h = false,
+  amPm = "AM",
+  setAmPm,
+  amPmLabels = { am: "AM", pm: "PM" },
+  isWithinRange: _isWithinRange,
+  hoursStep = 1,
+  minutesStep = 1,
+  secondsStep = 1,
+  presets,
+  readOnly = false,
+  withDropdown = false,
+  onPresetClick,
+  onStep,
+  onColumnSelect,
+  onAmPmSelect,
   onTimeFocus,
   onTimeBlur,
   onTimeHChange,
@@ -14340,96 +14819,309 @@ function TimePickerContent({
   onTimeSChange,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsx114("div", { className: "p-3", children: /* @__PURE__ */ jsxs74("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxs74("fieldset", { className: "flex flex-1 flex-row items-center gap-0.5 rounded border border-solid border-input bg-background px-2.5 py-0", children: [
-      /* @__PURE__ */ jsx114("legend", { className: "sr-only", children: "Time" }),
+  const handleKeyDown = (field) => (e) => {
+    if (!(!readOnly && onStep)) {
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      onStep(field, 1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      onStep(field, -1);
+    }
+  };
+  if (withDropdown && onColumnSelect) {
+    const hourOpts = getTimeColumnOptions("h", hoursStep, is12h);
+    const minOpts = getTimeColumnOptions("m", minutesStep, false);
+    const secOpts = getTimeColumnOptions("s", secondsStep, false);
+    return /* @__PURE__ */ jsxs74("div", { className: "flex p-1", children: [
       /* @__PURE__ */ jsx114(
-        "input",
+        TimeColumn,
         {
-          type: "text",
-          inputMode: "numeric",
-          value: timeFocus === "h" ? timeH : timeH || "--",
-          placeholder: "--",
-          "aria-label": "Hours",
-          onFocus: (e) => {
-            onTimeFocus("h");
-            e.target.select();
-          },
-          onBlur: () => onTimeBlur("h"),
-          onChange: (e) => onTimeHChange(e.target.value.replace(/\D/g, "").slice(0, 2)),
-          className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          options: hourOpts,
+          value: timeH || hourOpts[0],
+          onSelect: (v) => onColumnSelect("h", v),
+          "aria-label": "Hours"
         }
       ),
-      /* @__PURE__ */ jsx114("span", { className: "select-none px-1 text-sm text-muted-foreground", children: ":" }),
       /* @__PURE__ */ jsx114(
-        "input",
+        TimeColumn,
         {
-          type: "text",
-          inputMode: "numeric",
-          value: timeFocus === "m" ? timeM : timeM || "--",
-          placeholder: "--",
-          "aria-label": "Minutes",
-          onFocus: (e) => {
-            onTimeFocus("m");
-            e.target.select();
-          },
-          onBlur: () => onTimeBlur("m"),
-          onChange: (e) => onTimeMChange(e.target.value.replace(/\D/g, "").slice(0, 2)),
-          className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          options: minOpts,
+          value: timeM || minOpts[0],
+          onSelect: (v) => onColumnSelect("m", v),
+          "aria-label": "Minutes"
+        }
+      ),
+      withSeconds && /* @__PURE__ */ jsx114(
+        TimeColumn,
+        {
+          options: secOpts,
+          value: timeS || secOpts[0],
+          onSelect: (v) => onColumnSelect("s", v),
+          "aria-label": "Seconds"
         }
       ),
-      withSeconds && /* @__PURE__ */ jsxs74(Fragment20, { children: [
+      is12h && (onAmPmSelect || setAmPm) && /* @__PURE__ */ jsx114(
+        "div",
+        {
+          className: "no-scrollbar flex max-h-48 flex-col overflow-y-auto py-1",
+          role: "listbox",
+          "aria-label": "AM/PM",
+          children: ["AM", "PM"].map((ap) => /* @__PURE__ */ jsx114(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": amPm === ap,
+              onClick: () => (onAmPmSelect ?? setAmPm)(ap),
+              className: cn(
+                "mx-0.5 min-w-10 shrink-0 rounded-md px-2 py-1 text-center text-sm transition-colors",
+                amPm === ap ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-muted"
+              ),
+              children: ap === "AM" ? amPmLabels.am : amPmLabels.pm
+            },
+            ap
+          ))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs74("div", { className: "p-3", children: [
+    /* @__PURE__ */ jsxs74("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs74("fieldset", { className: "flex flex-1 flex-row items-center gap-0.5 rounded border border-solid border-input bg-background px-2.5 py-0", children: [
+        /* @__PURE__ */ jsx114("legend", { className: "sr-only", children: "Time" }),
+        /* @__PURE__ */ jsx114(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            value: timeFocus === "h" ? timeH : timeH || "--",
+            placeholder: "--",
+            "aria-label": "Hours",
+            onFocus: (e) => {
+              onTimeFocus("h");
+              e.target.select();
+            },
+            onBlur: () => onTimeBlur("h"),
+            onKeyDown: handleKeyDown("h"),
+            readOnly,
+            onChange: (e) => {
+              const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
+              if (is12h && raw) {
+                const n = Number.parseInt(raw, 10);
+                onTimeHChange(n > 12 ? "12" : raw);
+              } else {
+                onTimeHChange(raw);
+              }
+            },
+            className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          }
+        ),
         /* @__PURE__ */ jsx114("span", { className: "select-none px-1 text-sm text-muted-foreground", children: ":" }),
         /* @__PURE__ */ jsx114(
           "input",
           {
             type: "text",
             inputMode: "numeric",
-            value: timeFocus === "s" ? timeS : timeS || "--",
+            value: timeFocus === "m" ? timeM : timeM || "--",
             placeholder: "--",
-            "aria-label": "Seconds",
+            "aria-label": "Minutes",
             onFocus: (e) => {
-              onTimeFocus("s");
+              onTimeFocus("m");
               e.target.select();
             },
-            onBlur: () => onTimeBlur("s"),
-            onChange: (e) => onTimeSChange(e.target.value.replace(/\D/g, "").slice(0, 2)),
+            onBlur: () => onTimeBlur("m"),
+            onKeyDown: handleKeyDown("m"),
+            readOnly,
+            onChange: (e) => onTimeMChange(e.target.value.replace(/\D/g, "").slice(0, 2)),
             className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
           }
-        )
-      ] })
+        ),
+        withSeconds && /* @__PURE__ */ jsxs74(Fragment20, { children: [
+          /* @__PURE__ */ jsx114("span", { className: "select-none px-1 text-sm text-muted-foreground", children: ":" }),
+          /* @__PURE__ */ jsx114(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              value: timeFocus === "s" ? timeS : timeS || "--",
+              placeholder: "--",
+              "aria-label": "Seconds",
+              onFocus: (e) => {
+                onTimeFocus("s");
+                e.target.select();
+              },
+              onBlur: () => onTimeBlur("s"),
+              onKeyDown: handleKeyDown("s"),
+              readOnly,
+              onChange: (e) => onTimeSChange(e.target.value.replace(/\D/g, "").slice(0, 2)),
+              className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            }
+          )
+        ] }),
+        is12h && setAmPm && /* @__PURE__ */ jsxs74(Fragment20, { children: [
+          /* @__PURE__ */ jsx114("span", { className: "w-1 shrink-0" }),
+          /* @__PURE__ */ jsx114(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAmPm(amPm === "AM" ? "PM" : "AM"),
+              className: cn(
+                "rounded px-2 py-0.5 text-sm font-medium transition-colors",
+                "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              "aria-label": amPm === "AM" ? "Switch to PM" : "Switch to AM",
+              children: amPm === "AM" ? amPmLabels.am : amPmLabels.pm
+            }
+          )
+        ] })
+      ] }),
+      !readOnly && /* @__PURE__ */ jsx114(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          "aria-label": "Apply time",
+          className: "flex size-8 shrink-0 items-center justify-center rounded border border-border text-muted-foreground transition-colors hover:bg-muted",
+          children: CheckIcon
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx114(
-      "button",
-      {
-        type: "button",
-        onClick: onConfirm,
-        "aria-label": "Apply time",
-        className: "flex size-8 shrink-0 items-center justify-center rounded border border-border text-muted-foreground transition-colors hover:bg-muted",
-        children: CheckIcon
-      }
-    )
-  ] }) });
+    presets && onPresetClick && presets.length > 0 && /* @__PURE__ */ jsx114("div", { className: "mt-3 border-t border-border pt-3", children: presets.map(
+      (p) => typeof p === "string" ? /* @__PURE__ */ jsx114(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPresetClick(p),
+          className: "mr-2 mb-2 rounded border border-border bg-background px-2.5 py-1 text-sm text-foreground transition-colors hover:bg-muted",
+          children: p
+        },
+        p
+      ) : /* @__PURE__ */ jsxs74("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx114("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: p.label }),
+        /* @__PURE__ */ jsx114("div", { className: "flex flex-wrap gap-1", children: p.values.map((v) => /* @__PURE__ */ jsx114(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPresetClick(v),
+            className: "rounded border border-border bg-background px-2.5 py-1 text-sm text-foreground transition-colors hover:bg-muted",
+            children: v
+          },
+          v
+        )) })
+      ] }, p.label)
+    ) })
+  ] });
 }
 
 // src/components/date-time/time-picker/use-time-picker.ts
-import { useCallback as useCallback17, useState as useState33 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect22, useState as useState34 } from "react";
+function to12h4(hour24) {
+  if (hour24 === 0) {
+    return { h: 12, amPm: "AM" };
+  }
+  if (hour24 < 12) {
+    return { h: hour24, amPm: "AM" };
+  }
+  if (hour24 === 12) {
+    return { h: 12, amPm: "PM" };
+  }
+  return { h: hour24 - 12, amPm: "PM" };
+}
+function to24h2(h12, amPm) {
+  if (amPm === "AM") {
+    return h12 === 12 ? 0 : h12;
+  }
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function parseTimeString2(str) {
+  const parts = str.trim().split(":");
+  if (parts.length < 2) {
+    return null;
+  }
+  const h = Number.parseInt(parts[0], 10);
+  const m = Number.parseInt(parts[1], 10);
+  const s = parts[2] ? Number.parseInt(parts[2], 10) : 0;
+  if (Number.isNaN(h) || Number.isNaN(m)) {
+    return null;
+  }
+  return { h, m, s };
+}
 function useTimePicker(props) {
   const {
     value: controlledValue,
     defaultValue = null,
     onChange,
-    withSeconds = false
+    withSeconds = false,
+    format = "24h",
+    amPmLabels = { am: "AM", pm: "PM" },
+    min,
+    max,
+    hoursStep = 1,
+    minutesStep = 1,
+    secondsStep = 1,
+    presets,
+    open: controlledOpen,
+    onOpenChange,
+    readOnly = false,
+    popoverProps
   } = props;
   const isControlled = controlledValue !== void 0;
-  const [internal, setInternal] = useState33(defaultValue);
+  const isOpenControlled = controlledOpen !== void 0 || popoverProps?.opened !== void 0;
+  const [internal, setInternal] = useState34(defaultValue);
   const value = isControlled ? controlledValue : internal;
-  const { open, setOpen, triggerRef, contentSide, updatePreferredSide } = usePopoverState();
+  const is12h = format === "12h";
+  const hourMax = is12h ? 12 : 23;
+  const popoverState = usePopoverState();
+  const internalOpen = popoverState.open;
+  const internalSetOpen = popoverState.setOpen;
+  const open = popoverProps?.opened ?? (isOpenControlled && controlledOpen !== void 0 ? controlledOpen : internalOpen);
+  const setOpen = useCallback17(
+    (next) => {
+      popoverProps?.onChange?.(next);
+      if (!isOpenControlled) {
+        internalSetOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, internalSetOpen, onOpenChange, popoverProps]
+  );
+  const { triggerRef, contentSide, updatePreferredSide } = popoverState;
   const now = /* @__PURE__ */ new Date();
-  const [timeH, setTimeH] = useState33(value ? pad2(value.getHours()) : "");
-  const [timeM, setTimeM] = useState33(value ? pad2(value.getMinutes()) : "");
-  const [timeS, setTimeS] = useState33(value ? pad2(value.getSeconds()) : "");
-  const [timeFocus, setTimeFocus] = useState33(null);
+  const getInitialH = () => {
+    if (!value) {
+      return "";
+    }
+    return is12h ? pad2(to12h4(value.getHours()).h) : pad2(value.getHours());
+  };
+  const getInitialAmPm = () => value ? to12h4(value.getHours()).amPm : "AM";
+  const [timeH, setTimeH] = useState34(getInitialH);
+  const [timeM, setTimeM] = useState34(value ? pad2(value.getMinutes()) : "");
+  const [timeS, setTimeS] = useState34(value ? pad2(value.getSeconds()) : "");
+  const [amPm, setAmPm] = useState34(getInitialAmPm);
+  const [timeFocus, setTimeFocus] = useState34(null);
+  useEffect22(() => {
+    if (value) {
+      if (is12h) {
+        const { h, amPm: ap } = to12h4(value.getHours());
+        setTimeH(pad2(h));
+        setAmPm(ap);
+      } else {
+        setTimeH(pad2(value.getHours()));
+      }
+      setTimeM(pad2(value.getMinutes()));
+      setTimeS(pad2(value.getSeconds()));
+    } else {
+      setTimeH("");
+      setTimeM("");
+      setTimeS("");
+      if (is12h) {
+        setAmPm("AM");
+      }
+    }
+  }, [value, is12h]);
   const updateValue = useCallback17(
     (d) => {
       if (!isControlled) {
@@ -14442,8 +15134,8 @@ function useTimePicker(props) {
   function handleTimeBlur(field) {
     setTimeFocus(null);
     const raw = { h: timeH, m: timeM, s: timeS }[field];
-    const max = field === "h" ? 23 : 59;
-    const padded = clampAndPad(raw, max);
+    const maxVal = field === "h" ? hourMax : 59;
+    const padded = clampAndPad(raw, maxVal);
     if (field === "h") {
       setTimeH(padded);
     } else if (field === "m") {
@@ -14453,8 +15145,9 @@ function useTimePicker(props) {
     }
     if (value && padded) {
       const d = new Date(value);
+      const h24 = field === "h" && is12h ? to24h2(Number.parseInt(padded, 10) || 12, amPm) : Number.parseInt(padded, 10);
       if (field === "h") {
-        d.setHours(Number.parseInt(padded, 10));
+        d.setHours(is12h ? h24 : Number.parseInt(padded, 10));
       } else if (field === "m") {
         d.setMinutes(Number.parseInt(padded, 10));
       } else {
@@ -14463,8 +15156,33 @@ function useTimePicker(props) {
       updateValue(d);
     }
   }
+  function isWithinRange(d) {
+    if (!(min || max)) {
+      return true;
+    }
+    const mins = d.getHours() * 60 + d.getMinutes() + d.getSeconds() / 60;
+    if (min) {
+      const p = parseTimeString2(min);
+      if (p) {
+        const minMins = p.h * 60 + p.m + p.s / 60;
+        if (mins < minMins) {
+          return false;
+        }
+      }
+    }
+    if (max) {
+      const p = parseTimeString2(max);
+      if (p) {
+        const maxMins = p.h * 60 + p.m + p.s / 60;
+        if (mins > maxMins) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
   function handleConfirm() {
-    const h = clampAndPad(timeH, 23);
+    const h = clampAndPad(timeH, hourMax);
     const m = clampAndPad(timeM, 59);
     const s = clampAndPad(timeS, 59);
     if (h) {
@@ -14476,25 +15194,32 @@ function useTimePicker(props) {
     if (withSeconds && s) {
       setTimeS(s);
     }
+    const h24 = is12h ? to24h2(Number.parseInt(clampAndPad(h, 12), 10) || 12, amPm) : Number.parseInt(h || "0", 10);
     const base = value ?? new Date(now.getFullYear(), now.getMonth(), now.getDate());
     const d = new Date(base);
     d.setHours(
-      h ? Number.parseInt(h, 10) : 0,
+      h24,
       m ? Number.parseInt(m, 10) : 0,
       withSeconds && s ? Number.parseInt(s, 10) : 0,
       0
     );
-    if (value || h || m || withSeconds && s) {
+    if ((value || h || m || withSeconds && s) && isWithinRange(d)) {
       updateValue(d);
+      setOpen(false);
+      setTimeFocus(null);
     }
-    setOpen(false);
-    setTimeFocus(null);
   }
   const handleOpenChange = useCallback17(
     (next) => {
       if (next) {
         if (value) {
-          setTimeH(pad2(value.getHours()));
+          if (is12h) {
+            const { h, amPm: ap } = to12h4(value.getHours());
+            setTimeH(pad2(h));
+            setAmPm(ap);
+          } else {
+            setTimeH(pad2(value.getHours()));
+          }
           setTimeM(pad2(value.getMinutes()));
           setTimeS(pad2(value.getSeconds()));
         }
@@ -14504,7 +15229,7 @@ function useTimePicker(props) {
       }
       setOpen(next);
     },
-    [updatePreferredSide, value, setOpen]
+    [updatePreferredSide, value, setOpen, is12h]
   );
   function handleClear() {
     updateValue(null);
@@ -14512,10 +15237,125 @@ function useTimePicker(props) {
     setTimeM("");
     setTimeS("");
   }
+  function handleStep(field, delta) {
+    let step2;
+    if (field === "h") {
+      step2 = hoursStep;
+    } else if (field === "m") {
+      step2 = minutesStep;
+    } else {
+      step2 = secondsStep;
+    }
+    const maxVal = field === "h" ? hourMax : 59;
+    const raw = { h: timeH, m: timeM, s: timeS }[field];
+    const current = Number.parseInt(raw || "0", 10);
+    let next = current + delta * step2;
+    if (next < 0) {
+      next = field === "h" ? maxVal : 59;
+    }
+    if (next > maxVal) {
+      next = 0;
+    }
+    const padded = pad2(next);
+    if (field === "h") {
+      setTimeH(padded);
+      if (value) {
+        const d = new Date(value);
+        const h24 = is12h ? to24h2(next, amPm) : next;
+        d.setHours(h24);
+        updateValue(d);
+      }
+    } else if (field === "m") {
+      setTimeM(padded);
+      if (value) {
+        const d = new Date(value);
+        d.setMinutes(next);
+        updateValue(d);
+      }
+    } else {
+      setTimeS(padded);
+      if (value) {
+        const d = new Date(value);
+        d.setSeconds(next);
+        updateValue(d);
+      }
+    }
+  }
+  function handleColumnSelect(field, val) {
+    const n = Number.parseInt(val, 10);
+    if (Number.isNaN(n)) {
+      return;
+    }
+    const padded = pad2(n);
+    if (field === "h") {
+      setTimeH(padded);
+    } else if (field === "m") {
+      setTimeM(padded);
+    } else {
+      setTimeS(padded);
+    }
+    const newH = field === "h" ? padded : timeH;
+    const newM = field === "m" ? padded : timeM;
+    const newS = field === "s" ? padded : timeS;
+    const h24 = is12h ? to24h2(Number.parseInt(newH || "12", 10) || 12, amPm) : Number.parseInt(newH || "0", 10);
+    const base = value ?? new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const d = new Date(base);
+    d.setHours(
+      h24,
+      newM ? Number.parseInt(newM, 10) : 0,
+      withSeconds && newS ? Number.parseInt(newS, 10) : 0,
+      0
+    );
+    if (isWithinRange(d)) {
+      updateValue(d);
+    }
+  }
+  function handleAmPmSelect(ap) {
+    setAmPm(ap);
+    const h = timeH || (is12h ? "12" : "00");
+    const m = timeM || "00";
+    const s = timeS || "00";
+    const h24 = to24h2(Number.parseInt(h, 10) || 12, ap);
+    const base = value ?? new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const d = new Date(base);
+    d.setHours(
+      h24,
+      m ? Number.parseInt(m, 10) : 0,
+      withSeconds && s ? Number.parseInt(s, 10) : 0,
+      0
+    );
+    if (isWithinRange(d)) {
+      updateValue(d);
+    }
+  }
+  function handlePresetClick(presetStr) {
+    const p = parseTimeString2(presetStr);
+    if (!p) {
+      return;
+    }
+    const base = value ?? new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const d = new Date(base);
+    d.setHours(p.h, p.m, p.s, 0);
+    if (isWithinRange(d)) {
+      updateValue(d);
+      setTimeH(is12h ? pad2(to12h4(p.h).h) : pad2(p.h));
+      setTimeM(pad2(p.m));
+      setTimeS(pad2(p.s));
+      if (is12h) {
+        setAmPm(to12h4(p.h).amPm);
+      }
+      setOpen(false);
+    }
+  }
   let displayValue = null;
   if (value) {
     if (props.valueFormat) {
       displayValue = props.valueFormat(value);
+    } else if (is12h) {
+      const { h, amPm: ap } = to12h4(value.getHours());
+      const suffix = withSeconds ? `:${pad2(value.getSeconds())}` : "";
+      const apLabel = ap === "AM" ? amPmLabels.am : amPmLabels.pm;
+      displayValue = `${pad2(h)}:${pad2(value.getMinutes())}${suffix} ${apLabel}`;
     } else {
       const suffix = withSeconds ? `:${pad2(value.getSeconds())}` : "";
       displayValue = `${pad2(value.getHours())}:${pad2(value.getMinutes())}${suffix}`;
@@ -14540,13 +15380,28 @@ function useTimePicker(props) {
     handleTimeBlur,
     handleConfirm,
     handleOpenChange,
-    handleClear
+    handleClear,
+    is12h,
+    amPm,
+    setAmPm,
+    amPmLabels,
+    isWithinRange,
+    hoursStep,
+    minutesStep,
+    secondsStep,
+    presets,
+    readOnly,
+    handlePresetClick,
+    handleStep,
+    handleColumnSelect,
+    handleAmPmSelect,
+    withDropdown: props.withDropdown ?? false
   };
 }
 
 // src/components/date-time/time-picker/time-picker.tsx
 import { jsx as jsx115 } from "react/jsx-runtime";
-var TimePicker = forwardRef9(
+var TimePicker = forwardRef10(
   function TimePicker2(props, ref) {
     const {
       label,
@@ -14554,9 +15409,11 @@ var TimePicker = forwardRef9(
       disabled = false,
       clearable = false,
       withSeconds = false,
+      withDropdown = false,
       size = "md",
       radius = "md",
       dropdownType = "popover",
+      rightSection,
       "aria-label": ariaLabel,
       className
     } = props;
@@ -14569,7 +15426,7 @@ var TimePicker = forwardRef9(
         description: void 0,
         error: void 0,
         required: false,
-        disabled,
+        disabled: disabled || props.readOnly,
         clearable,
         size,
         radius,
@@ -14578,13 +15435,17 @@ var TimePicker = forwardRef9(
         className,
         displayValue: state2.displayValue,
         hasValue: !!state2.value,
-        open: state2.open,
-        onOpenChange: state2.handleOpenChange,
+        open: props.readOnly ? false : state2.open,
+        onOpenChange: props.readOnly ? () => {
+          return void 0;
+        } : state2.handleOpenChange,
+        popoverProps: props.popoverProps,
         contentSide: state2.contentSide,
         triggerRef: state2.triggerRef,
         onClear: state2.handleClear,
-        dropdownClassName: "w-[200px]",
+        dropdownClassName: cn(!props.popoverProps?.width && "w-[200px]"),
         buttonRef: ref,
+        rightSection,
         children: /* @__PURE__ */ jsx115(
           TimePickerContent,
           {
@@ -14593,12 +15454,27 @@ var TimePicker = forwardRef9(
             timeS: state2.timeS,
             timeFocus: state2.timeFocus,
             withSeconds,
+            is12h: state2.is12h,
+            amPm: state2.amPm,
+            setAmPm: state2.setAmPm,
+            amPmLabels: state2.amPmLabels,
+            isWithinRange: state2.isWithinRange,
             onTimeFocus: state2.setTimeFocus,
             onTimeBlur: state2.handleTimeBlur,
             onTimeHChange: state2.setTimeH,
             onTimeMChange: state2.setTimeM,
             onTimeSChange: state2.setTimeS,
-            onConfirm: state2.handleConfirm
+            onConfirm: state2.handleConfirm,
+            hoursStep: props.hoursStep,
+            minutesStep: props.minutesStep,
+            secondsStep: props.secondsStep,
+            presets: props.presets,
+            readOnly: props.readOnly,
+            withDropdown,
+            onPresetClick: state2.handlePresetClick,
+            onStep: state2.handleStep,
+            onColumnSelect: state2.handleColumnSelect,
+            onAmPmSelect: state2.handleAmPmSelect
           }
         )
       }
@@ -14630,11 +15506,15 @@ var ChevronRight5 = /* @__PURE__ */ jsx116(
     children: /* @__PURE__ */ jsx116("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
   }
 );
+var SIZE_CLASSES2 = {
+  sm: "px-3 py-2 text-xs",
+  md: "px-4 py-3 text-sm",
+  lg: "px-5 py-4 text-base",
+  xl: "px-6 py-5 text-lg"
+};
 function YearPickerContent({
   calendarType,
-  years,
-  decadeStart,
-  headerLabel,
+  views,
   onPrev,
   onNext,
   onYearClick,
@@ -14644,28 +15524,103 @@ function YearPickerContent({
   isYearSelected,
   isYearInRange,
   isRangeStart,
-  isRangeEnd
-}) {
-  return /* @__PURE__ */ jsxs75("div", { className: "min-w-[22rem] p-3", children: [
-    /* @__PURE__ */ jsxs75("div", { className: "mb-2 flex items-center justify-between", children: [
+  isRangeEnd,
+  canPrev = true,
+  canNext = true,
+  isYearDisabled = () => false,
+  formatYear = (y) => String(y),
+  getYearControlProps,
+  yearToDate = (y) => new Date(y, 0, 1),
+  size = "md"
+}) {
+  const sizeClass = SIZE_CLASSES2[size];
+  const renderYearGrid = (view) => /* @__PURE__ */ jsx116(
+    "div",
+    {
+      className: "grid grid-cols-3 gap-x-4 gap-y-3 py-3",
+      onMouseLeave: onGridMouseLeave,
+      children: view.years.map((y) => {
+        const inRange = y >= view.decadeStart && y <= view.decadeStart + 9;
+        const controlProps = getYearControlProps?.(yearToDate(y)) ?? {};
+        const userDisabled = controlProps.disabled === true;
+        const disabled = isYearDisabled(y) || userDisabled;
+        const sel = isYearSelected(y);
+        const inR = isYearInRange(y);
+        const start = isRangeStart(y);
+        const end = isRangeEnd(y);
+        const unselected = !(sel || inR);
+        const inRangeOnly = inR && !sel;
+        const unselectedInRange = unselected && inRange;
+        const unselectedOutRange = unselected && !inRange;
+        const {
+          className: userClassName,
+          style: userStyle,
+          ...restProps
+        } = controlProps;
+        return /* @__PURE__ */ jsx116(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => onYearClick(y),
+            onMouseEnter: () => onYearHover(y),
+            className: cn(
+              "rounded transition-colors",
+              sizeClass,
+              disabled && "cursor-not-allowed opacity-40",
+              sel && !disabled && "bg-primary font-medium text-primary-foreground",
+              inRangeOnly && !disabled && "bg-primary/20 text-foreground",
+              start && "rounded-e-none",
+              end && "rounded-s-none",
+              unselectedInRange && !disabled && "text-foreground hover:bg-muted",
+              unselectedOutRange && !disabled && "text-muted-foreground hover:bg-muted/50",
+              userClassName
+            ),
+            style: userStyle,
+            ...restProps,
+            children: formatYear(y)
+          },
+          y
+        );
+      })
+    },
+    view.decadeStart
+  );
+  return /* @__PURE__ */ jsxs75("div", { className: "min-w-[280px] p-3", children: [
+    /* @__PURE__ */ jsxs75("div", { className: "mb-2 flex w-full items-center justify-between", children: [
       /* @__PURE__ */ jsx116(
         "button",
         {
           type: "button",
           onClick: onPrev,
           "aria-label": "Previous decade",
-          className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted",
+          disabled: !canPrev,
+          className: cn(
+            "flex size-7 items-center justify-center rounded",
+            canPrev ? "text-muted-foreground hover:bg-muted" : "cursor-not-allowed opacity-40"
+          ),
           children: ChevronLeft5
         }
       ),
-      /* @__PURE__ */ jsx116("span", { className: "rounded px-3 py-1 text-sm font-semibold text-foreground", children: headerLabel }),
+      /* @__PURE__ */ jsx116("div", { className: "flex flex-1 flex-wrap items-center justify-center gap-2", children: views.map((v) => /* @__PURE__ */ jsx116(
+        "span",
+        {
+          className: "rounded px-3 py-1 text-sm font-semibold text-foreground",
+          children: v.headerLabel
+        },
+        v.decadeStart
+      )) }),
       /* @__PURE__ */ jsx116(
         "button",
         {
           type: "button",
           onClick: onNext,
           "aria-label": "Next decade",
-          className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted",
+          disabled: !canNext,
+          className: cn(
+            "flex size-7 items-center justify-center rounded",
+            canNext ? "text-muted-foreground hover:bg-muted" : "cursor-not-allowed opacity-40"
+          ),
           children: ChevronRight5
         }
       )
@@ -14673,38 +15628,11 @@ function YearPickerContent({
     /* @__PURE__ */ jsx116(
       "div",
       {
-        className: "grid grid-cols-3 gap-1 py-2",
-        onMouseLeave: onGridMouseLeave,
-        children: years.map((y) => {
-          const inRange = y >= decadeStart && y <= decadeStart + 9;
-          const sel = isYearSelected(y);
-          const inR = isYearInRange(y);
-          const start = isRangeStart(y);
-          const end = isRangeEnd(y);
-          const unselected = !(sel || inR);
-          const inRangeOnly = inR && !sel;
-          const unselectedInRange = unselected && inRange;
-          const unselectedOutRange = unselected && !inRange;
-          return /* @__PURE__ */ jsx116(
-            "button",
-            {
-              type: "button",
-              onClick: () => onYearClick(y),
-              onMouseEnter: () => onYearHover(y),
-              className: cn(
-                "rounded py-3 text-sm transition-colors",
-                sel && "bg-primary font-medium text-primary-foreground",
-                inRangeOnly && "bg-primary/20 text-foreground",
-                start && "rounded-e-none",
-                end && "rounded-s-none",
-                unselectedInRange && "text-foreground hover:bg-muted",
-                unselectedOutRange && "text-muted-foreground hover:bg-muted/50"
-              ),
-              children: y
-            },
-            y
-          );
-        })
+        className: cn(
+          "flex w-full justify-center",
+          views.length > 1 ? "gap-12 flex-wrap" : "gap-4"
+        ),
+        children: views.map((view) => renderYearGrid(view))
       }
     ),
     /* @__PURE__ */ jsxs75("div", { className: "mt-2 flex justify-end gap-1 border-t border-border pt-2", children: [
@@ -14741,42 +15669,53 @@ function YearPickerContent({
 }
 
 // src/components/date-time/year-picker/use-year-picker.ts
-import { useCallback as useCallback18, useEffect as useEffect21, useState as useState34 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect23, useState as useState35 } from "react";
 function useYearPicker(props) {
   const {
     defaultCalendarType = "GC",
     allowDeselect = false,
     defaultDate,
     date: controlledDate,
-    onDateChange
+    onDateChange,
+    minDate,
+    maxDate,
+    getYearControlProps,
+    numberOfColumns = 1,
+    yearsListFormat = "YYYY",
+    decadeLabelFormat = "YYYY"
   } = props;
   const type = props.type ?? "default";
   const isControlled = props.value !== void 0;
   const isDateControlled = controlledDate !== void 0;
-  const [_single, _setSingle] = useState34(
+  const [_single, _setSingle] = useState35(
     type === "default" ? props.defaultValue ?? null : null
   );
-  const [_range, _setRange] = useState34(
+  const [_range, _setRange] = useState35(
     type === "range" ? props.defaultValue ?? [
       null,
       null
     ] : [null, null]
   );
+  const [_multi, _setMulti] = useState35(
+    type === "multiple" ? props.defaultValue ?? [] : []
+  );
   const singleValue = type === "default" ? isControlled ? props.value : _single : null;
   const rangeValue = type === "range" ? isControlled ? props.value : _range : [null, null];
-  const [hoveredYear, setHoveredYear] = useState34(null);
-  const [calendarType, setCalendarType] = useState34(defaultCalendarType);
+  const multiValue = type === "multiple" ? isControlled ? props.value : _multi : [];
+  const [hoveredYear, setHoveredYear] = useState35(null);
+  const [calendarType, setCalendarType] = useState35(defaultCalendarType);
   const now = /* @__PURE__ */ new Date();
-  const initDate = controlledDate ?? defaultDate ?? (type === "default" ? singleValue : rangeValue[0]) ?? now;
-  const [gcViewYear, setGcViewYear] = useState34(initDate.getFullYear());
-  const [ecViewYear, setEcViewYear] = useState34(
+  const primaryForInit = type === "default" ? singleValue : type === "range" ? rangeValue[0] : multiValue[0] ?? null;
+  const initDate = controlledDate ?? defaultDate ?? primaryForInit ?? now;
+  const [gcViewYear, setGcViewYear] = useState35(initDate.getFullYear());
+  const [ecViewYear, setEcViewYear] = useState35(
     toEC(
       initDate.getFullYear(),
       initDate.getMonth() + 1,
       initDate.getDate()
     )[0]
   );
-  useEffect21(() => {
+  useEffect23(() => {
     if (!(isDateControlled && controlledDate)) {
       return;
     }
@@ -14798,7 +15737,18 @@ function useYearPicker(props) {
   const activeViewYear = calendarType === "EC" ? ecViewYear : gcViewYear;
   const decadeStart = getDecadeStart(activeViewYear);
   const years = buildYears(activeViewYear);
-  const primaryDate = type === "default" ? singleValue : rangeValue[0];
+  const cols = Math.max(1, Math.min(numberOfColumns ?? 1, 3));
+  const formatYear = (y) => yearsListFormat === "YY" ? String(y).slice(-2) : String(y);
+  const formatDecadeLabel = (ds) => decadeLabelFormat === "YY" ? `${String(ds).slice(-2)} \u2013 ${String(ds + 9).slice(-2)}` : `${ds} \u2013 ${ds + 9}`;
+  const decadeViews = cols <= 1 ? [{ decadeStart, years, headerLabel: formatDecadeLabel(decadeStart) }] : Array.from({ length: cols }, (_, i) => {
+    const ds = decadeStart + i * 10;
+    return {
+      decadeStart: ds,
+      years: buildYears(ds),
+      headerLabel: formatDecadeLabel(ds)
+    };
+  });
+  const primaryDate = type === "default" ? singleValue : type === "range" ? rangeValue[0] : multiValue[0] ?? null;
   const hasRange = type === "range" && !!rangeValue[0] && !!(rangeValue[1] ?? hoveredYear);
   function yearToDate(y) {
     if (calendarType === "EC") {
@@ -14813,9 +15763,6 @@ function useYearPicker(props) {
     }
     return d.getFullYear();
   }
-  function headerLabel() {
-    return `${decadeStart} \u2013 ${decadeStart + 9}`;
-  }
   function callOnChange(next) {
     if (props.onChange) {
       props.onChange(next);
@@ -14825,6 +15772,9 @@ function useYearPicker(props) {
     if (type === "default") {
       return !!singleValue && getViewYear(singleValue) === y;
     }
+    if (type === "multiple") {
+      return multiValue.some((d) => getViewYear(d) === y);
+    }
     const y0 = rangeValue[0] ? getViewYear(rangeValue[0]) : null;
     const y1 = rangeValue[1] ? getViewYear(rangeValue[1]) : null;
     return y0 !== null && y0 === y || y1 !== null && y1 === y;
@@ -14849,7 +15799,32 @@ function useYearPicker(props) {
     const end = rangeValue[1] ?? (hoveredYear != null ? yearToDate(hoveredYear) : null);
     return !!(type === "range" && end && getViewYear(end) === y);
   }
+  function getMinMaxYear(ct) {
+    if (!(minDate || maxDate)) {
+      return { min: null, max: null };
+    }
+    return {
+      min: minDate ? ct === "EC" ? toEC(
+        minDate.getFullYear(),
+        minDate.getMonth() + 1,
+        minDate.getDate()
+      )[0] : minDate.getFullYear() : null,
+      max: maxDate ? ct === "EC" ? toEC(
+        maxDate.getFullYear(),
+        maxDate.getMonth() + 1,
+        maxDate.getDate()
+      )[0] : maxDate.getFullYear() : null
+    };
+  }
+  const { min: minYear, max: maxYear } = getMinMaxYear(calendarType);
+  const lastDecadeEnd = decadeStart + (cols - 1) * 10 + 9;
+  const canPrev = minYear == null || decadeStart > minYear;
+  const canNext = maxYear == null || lastDecadeEnd < maxYear;
+  const isYearDisabled = (year) => minYear != null && year < minYear || maxYear != null && year > maxYear;
   function handleYearClick(y) {
+    if (isYearDisabled(y)) {
+      return;
+    }
     const clicked = yearToDate(y);
     if (type === "default") {
       if (allowDeselect && singleValue && getViewYear(singleValue) === y) {
@@ -14863,6 +15838,16 @@ function useYearPicker(props) {
         }
         callOnChange(clicked);
       }
+    } else if (type === "multiple") {
+      const vy = getViewYear(clicked);
+      const idx = multiValue.findIndex((d) => getViewYear(d) === vy);
+      const next = idx >= 0 ? multiValue.filter((_, i) => i !== idx) : [...multiValue, clicked].sort(
+        (a, b) => getViewYear(a) - getViewYear(b)
+      );
+      if (!isControlled) {
+        _setMulti(next);
+      }
+      callOnChange(next);
     } else {
       const [start, end] = rangeValue;
       if (!start || start && end) {
@@ -14897,6 +15882,9 @@ function useYearPicker(props) {
     }
   }
   function handlePrev() {
+    if (!canPrev) {
+      return;
+    }
     if (calendarType === "EC") {
       setEcViewYear((y) => y - 10);
     } else {
@@ -14905,6 +15893,9 @@ function useYearPicker(props) {
     }
   }
   function handleNext() {
+    if (!canNext) {
+      return;
+    }
     if (calendarType === "EC") {
       setEcViewYear((y) => y + 10);
     } else {
@@ -14912,6 +15903,24 @@ function useYearPicker(props) {
       notifyDateChange(gcViewYear + 10);
     }
   }
+  function handleClear() {
+    if (type === "default") {
+      if (!isControlled) {
+        _setSingle(null);
+      }
+      callOnChange(null);
+    } else if (type === "multiple") {
+      if (!isControlled) {
+        _setMulti([]);
+      }
+      callOnChange([]);
+    } else {
+      if (!isControlled) {
+        _setRange([null, null]);
+      }
+      callOnChange([null, null]);
+    }
+  }
   function handleCalendarTypeChange(nextType) {
     if (nextType === calendarType) {
       return;
@@ -14933,23 +15942,32 @@ function useYearPicker(props) {
     calendarType,
     years,
     decadeStart,
+    decadeViews,
     ecViewYear,
     gcViewYear,
     primaryDate,
     hasRange,
     singleValue,
     rangeValue,
-    headerLabel,
+    multiValue,
+    formatYear,
+    formatDecadeLabel,
+    getYearControlProps,
+    yearToDate,
     handlePrev,
     handleNext,
     handleYearClick,
     handleYearHover,
+    handleClear,
     handleGridMouseLeave,
     handleCalendarTypeChange,
     isYearSelected,
     isYearInRange,
     isRangeStart,
-    isRangeEnd
+    isRangeEnd,
+    canPrev,
+    canNext,
+    isYearDisabled
   };
 }
 
@@ -14962,9 +15980,7 @@ function YearPicker(props) {
     YearPickerContent,
     {
       calendarType: state2.calendarType,
-      years: state2.years,
-      decadeStart: state2.decadeStart,
-      headerLabel: state2.headerLabel(),
+      views: state2.decadeViews,
       onPrev: state2.handlePrev,
       onNext: state2.handleNext,
       onYearClick: state2.handleYearClick,
@@ -14974,13 +15990,20 @@ function YearPicker(props) {
       isYearSelected: state2.isYearSelected,
       isYearInRange: state2.isYearInRange,
       isRangeStart: state2.isRangeStart,
-      isRangeEnd: state2.isRangeEnd
+      isRangeEnd: state2.isRangeEnd,
+      canPrev: state2.canPrev,
+      canNext: state2.canNext,
+      isYearDisabled: state2.isYearDisabled,
+      formatYear: state2.formatYear,
+      getYearControlProps: state2.getYearControlProps,
+      yearToDate: state2.yearToDate,
+      size: props.size ?? "md"
     }
   ) });
 }
 
 // src/components/date-time/year-picker-input/year-picker-input.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 
 // src/components/date-time/year-picker-input/use-year-picker-input.ts
 import { useCallback as useCallback19 } from "react";
@@ -15017,12 +16040,21 @@ function useYearPickerInput(props) {
     if (type === "default") {
       return picker.singleValue ? valueFormatter({ type: "default", date: picker.singleValue }) : null;
     }
+    if (type === "multiple") {
+      return valueFormatter({ type: "multiple", date: picker.multiValue });
+    }
     return picker.rangeValue[0] ? valueFormatter({ type: "range", date: picker.rangeValue }) : null;
   }
   function formatWithFmt() {
     if (type === "default") {
       return picker.singleValue ? fmt(picker.singleValue) : null;
     }
+    if (type === "multiple") {
+      if (picker.multiValue.length === 0) {
+        return null;
+      }
+      return [...picker.multiValue].sort((a2, b2) => a2.getFullYear() - b2.getFullYear()).map((d) => fmt(d)).join(", ");
+    }
     if (!picker.rangeValue[0]) {
       return null;
     }
@@ -15030,21 +16062,14 @@ function useYearPickerInput(props) {
     if (!b) {
       return a ? fmt(a) : null;
     }
-    const start = picker.rangeValue[0];
-    return start ? `${fmt(start)} \u2013 ${fmt(b)}` : null;
+    const y1 = a.getFullYear();
+    const y2 = b.getFullYear();
+    const [lo, hi] = y1 <= y2 ? [a, b] : [b, a];
+    return `${fmt(lo)} \u2013 ${fmt(hi)}`;
   }
   const displayValue = formatWithFormatter() ?? formatWithFmt();
   function handleClear() {
-    if (props.onChange) {
-      if (type === "default") {
-        props.onChange(null);
-      } else {
-        props.onChange([
-          null,
-          null
-        ]);
-      }
-    }
+    picker.handleClear();
   }
   return {
     displayValue,
@@ -15060,7 +16085,7 @@ function useYearPickerInput(props) {
 
 // src/components/date-time/year-picker-input/year-picker-input.tsx
 import { jsx as jsx118 } from "react/jsx-runtime";
-var YearPickerInput = forwardRef10(function YearPickerInput2(props, ref) {
+var YearPickerInput = forwardRef11(function YearPickerInput2(props, ref) {
   const {
     label,
     placeholder = "Pick year",
@@ -15104,9 +16129,7 @@ var YearPickerInput = forwardRef10(function YearPickerInput2(props, ref) {
         YearPickerContent,
         {
           calendarType: p.calendarType,
-          years: p.years,
-          decadeStart: p.decadeStart,
-          headerLabel: p.headerLabel(),
+          views: p.decadeViews,
           onPrev: p.handlePrev,
           onNext: p.handleNext,
           onYearClick: p.handleYearClick,
@@ -15116,7 +16139,14 @@ var YearPickerInput = forwardRef10(function YearPickerInput2(props, ref) {
           isYearSelected: p.isYearSelected,
           isYearInRange: p.isYearInRange,
           isRangeStart: p.isRangeStart,
-          isRangeEnd: p.isRangeEnd
+          isRangeEnd: p.isRangeEnd,
+          canPrev: p.canPrev,
+          canNext: p.canNext,
+          isYearDisabled: p.isYearDisabled,
+          formatYear: p.formatYear,
+          getYearControlProps: p.getYearControlProps,
+          yearToDate: p.yearToDate,
+          size: props.size ?? "md"
         }
       )
     }
@@ -15537,7 +16567,7 @@ function Anchor({
 }
 
 // src/components/ui/angle-slider.tsx
-import { useCallback as useCallback20, useRef as useRef13, useState as useState35 } from "react";
+import { useCallback as useCallback20, useRef as useRef15, useState as useState36 } from "react";
 import { jsx as jsx124, jsxs as jsxs78 } from "react/jsx-runtime";
 var TAU = 2 * Math.PI;
 var px = (n) => `${Math.round(n * 1e4) / 1e4}px`;
@@ -15554,7 +16584,7 @@ function AngleSlider({
   disabled = false,
   ...props
 }) {
-  const [internalValue, setInternalValue] = useState35(defaultValue);
+  const [internalValue, setInternalValue] = useState36(defaultValue);
   const value = valueProp ?? internalValue;
   const isControlled = valueProp !== void 0;
   const setValue = useCallback20(
@@ -15567,8 +16597,8 @@ function AngleSlider({
     },
     [isControlled, onChange]
   );
-  const ref = useRef13(null);
-  const angleRef = useRef13(value);
+  const ref = useRef15(null);
+  const angleRef = useRef15(value);
   const getAngle = useCallback20(
     (clientX, clientY) => {
       const el = ref.current;
@@ -15709,7 +16739,7 @@ function AngleSlider({
 import { useMesob as useMesob8 } from "@mesob/ui/providers";
 import { IconChevronDown as IconChevronDown7 } from "@tabler/icons-react";
 import { motion } from "motion/react";
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo12, useRef as useRef14, useState as useState36 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo12, useRef as useRef16, useState as useState37 } from "react";
 import { jsx as jsx125, jsxs as jsxs79 } from "react/jsx-runtime";
 function AnimatedTabs({
   tabs,
@@ -15722,17 +16752,17 @@ function AnimatedTabs({
   const mesob = useMesob8();
   const LinkComponent = linkProp ?? mesob?.navigation?.Link;
   const locale = mesob?.locale;
-  const [internalActiveTab, setInternalActiveTab] = useState36(
+  const [internalActiveTab, setInternalActiveTab] = useState37(
     defaultTab ?? tabs[0]?.value ?? ""
   );
   const activeTab = controlledActiveTab ?? internalActiveTab;
-  const [visibleTabs, setVisibleTabs] = useState36(tabs);
-  const [overflowTabs, setOverflowTabs] = useState36([]);
-  const containerRef = useRef14(null);
-  const tabsListRef = useRef14(null);
-  const dropdownTriggerRef = useRef14(null);
-  const tabRefs = useRef14([]);
-  const [underlineStyle, setUnderlineStyle] = useState36({ left: 0, width: 0 });
+  const [visibleTabs, setVisibleTabs] = useState37(tabs);
+  const [overflowTabs, setOverflowTabs] = useState37([]);
+  const containerRef = useRef16(null);
+  const tabsListRef = useRef16(null);
+  const dropdownTriggerRef = useRef16(null);
+  const tabRefs = useRef16([]);
+  const [underlineStyle, setUnderlineStyle] = useState37({ left: 0, width: 0 });
   const handleTabChange = (newValue) => {
     if (!controlledActiveTab) {
       setInternalActiveTab(newValue);
@@ -16710,6 +17740,7 @@ var ChartStyle = ({ id, config }) => {
     "style",
     {
       dangerouslySetInnerHTML: {
+        // biome-ignore lint/style/useNamingConvention: React requires `__html` on innerHTML object
         __html: Object.entries(THEMES).map(
           ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
@@ -17006,7 +18037,7 @@ function CollapsibleContent({
 // src/components/ui/color-input.tsx
 import { IconColorPicker } from "@tabler/icons-react";
 import * as React14 from "react";
-import { useCallback as useCallback22, useEffect as useEffect25, useRef as useRef17, useState as useState39 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect27, useRef as useRef19, useState as useState40 } from "react";
 
 // src/lib/color-utils.ts
 function hex2rgb(hex) {
@@ -17208,7 +18239,7 @@ function hasAlpha(format) {
 }
 
 // src/components/ui/color-picker.tsx
-import { useCallback as useCallback21, useEffect as useEffect24, useRef as useRef16, useState as useState38 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect26, useRef as useRef18, useState as useState39 } from "react";
 
 // src/components/ui/color-swatch.tsx
 import { jsx as jsx139, jsxs as jsxs83 } from "react/jsx-runtime";
@@ -17300,8 +18331,8 @@ function HueAlphaSlider({
   ariaLabel,
   className
 }) {
-  const ref = useRef16(null);
-  const lastRef = useRef16(value);
+  const ref = useRef18(null);
+  const lastRef = useRef18(value);
   const handleMove = useCallback21(
     (clientX) => {
       const el = ref.current;
@@ -17396,15 +18427,15 @@ function ColorPicker({
   alphaLabel,
   ...inputProps
 }) {
-  const [hsva, setHsva] = useState38(
+  const [hsva, setHsva] = useState39(
     () => parseColor(String(value ?? inputProps.defaultValue ?? "#000000"))
   );
   const isControlled = value !== void 0;
-  const valueRef = useRef16(value);
-  const saturationRef = useRef16(null);
-  const lastHsvaRef = useRef16(hsva);
+  const valueRef = useRef18(value);
+  const saturationRef = useRef18(null);
+  const lastHsvaRef = useRef18(hsva);
   lastHsvaRef.current = hsva;
-  useEffect24(() => {
+  useEffect26(() => {
     if (value === valueRef.current) {
       return;
     }
@@ -17745,9 +18776,9 @@ var ColorInput = React14.forwardRef(
     placeholder,
     ...inputProps
   }, ref) => {
-    const [dropdownOpened, setDropdownOpened] = useState39(false);
-    const [lastValidValue, setLastValidValue] = useState39("");
-    const [internalValue, setInternalValue] = useState39(
+    const [dropdownOpened, setDropdownOpened] = useState40(false);
+    const [lastValidValue, setLastValidValue] = useState40("");
+    const [internalValue, setInternalValue] = useState40(
       defaultValue ?? valueProp ?? ""
     );
     const isControlled = valueProp !== void 0;
@@ -17764,18 +18795,18 @@ var ColorInput = React14.forwardRef(
     );
     const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
     const _withEyeDropper = withEyeDropperProp && eyeDropperSupported;
-    const inputRef = useRef17(null);
-    const anchorRef = useRef17(null);
-    const popoverContentRef = useRef17(null);
-    const openTimestampRef = useRef17(0);
-    const pointerDownInPopoverRef = useRef17(false);
-    useEffect25(() => {
+    const inputRef = useRef19(null);
+    const anchorRef = useRef19(null);
+    const popoverContentRef = useRef19(null);
+    const openTimestampRef = useRef19(0);
+    const pointerDownInPopoverRef = useRef19(false);
+    useEffect27(() => {
       if (isColorValid(value) || value.trim() === "") {
         setLastValidValue(value);
       }
     }, [value]);
-    const prevFormatRef = useRef17(format);
-    useEffect25(() => {
+    const prevFormatRef = useRef19(format);
+    useEffect27(() => {
       if (prevFormatRef.current !== format && isColorValid(value)) {
         setValue(formatColor(parseColor(value), format));
         prevFormatRef.current = format;
@@ -18008,7 +19039,7 @@ ColorInput.displayName = "ColorInput";
 // src/components/ui/combobox.tsx
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { IconCheck as IconCheck4, IconChevronDown as IconChevronDown9 } from "@tabler/icons-react";
-import { useMemo as useMemo13, useState as useState40 } from "react";
+import { useMemo as useMemo13, useState as useState41 } from "react";
 import { jsx as jsx142, jsxs as jsxs86 } from "react/jsx-runtime";
 var COMBOBOX_CONTENT_BASE_CN = "cn-menu-target group/combobox-content relative max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)] max-w-[min(100vw,var(--available-width,100vw))] min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-[var(--anchor-width,auto)]";
 var COMBOBOX_ITEM_BASE_CN = "relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
@@ -18023,7 +19054,7 @@ function Combobox({
   className,
   ...props
 }) {
-  const [inputValue, setInputValue] = useState40("");
+  const [inputValue, setInputValue] = useState41("");
   const selectedOption = useMemo13(
     () => options.find((opt) => opt.value === value) ?? null,
     [options, value]
@@ -18475,7 +19506,7 @@ function ContextMenuShortcut({
 
 // src/components/ui/copy-button.tsx
 import { IconCheck as IconCheck6, IconCopy } from "@tabler/icons-react";
-import { useState as useState41 } from "react";
+import { useState as useState42 } from "react";
 import { jsx as jsx145 } from "react/jsx-runtime";
 function CopyButton({
   value,
@@ -18486,7 +19517,7 @@ function CopyButton({
   className,
   ...props
 }) {
-  const [copied, setCopied] = useState41(false);
+  const [copied, setCopied] = useState42(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(value);
@@ -19073,7 +20104,7 @@ function DropdownButton({
 }
 
 // src/components/ui/file-button.tsx
-import { useRef as useRef18 } from "react";
+import { useRef as useRef20 } from "react";
 import { Fragment as Fragment27, jsx as jsx152, jsxs as jsxs93 } from "react/jsx-runtime";
 function FileButton({
   onChange,
@@ -19085,7 +20116,7 @@ function FileButton({
   className,
   ...props
 }) {
-  const inputRef = useRef18(null);
+  const inputRef = useRef20(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -19122,7 +20153,7 @@ function FileButton({
 
 // src/components/ui/file-drop-input.tsx
 import { IconPencil as IconPencil2, IconPhoto as IconPhoto4, IconTrash as IconTrash6 } from "@tabler/icons-react";
-import { useId as useId6, useRef as useRef19, useState as useState44 } from "react";
+import { useId as useId7, useRef as useRef21, useState as useState45 } from "react";
 
 // src/components/files/file-preview.tsx
 import {
@@ -19132,7 +20163,7 @@ import {
   IconPhoto as IconPhoto3,
   IconVideo as IconVideo2
 } from "@tabler/icons-react";
-import { useEffect as useEffect26, useMemo as useMemo15, useState as useState43 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo15, useState as useState44 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
 function formatBytes2(size) {
   if (!size) {
@@ -19168,12 +20199,12 @@ function buildPreviewKey(item) {
   return item.id ?? `${item.source}-${item.name}-${item.fileIndex ?? item.url}`;
 }
 function useResolvedPreviewItems(files, previewItems = []) {
-  const [localItems, setLocalItems] = useState43([]);
+  const [localItems, setLocalItems] = useState44([]);
   const remoteItems = useMemo15(
     () => previewItems.map((item) => ({ ...item, source: "remote" })),
     [previewItems]
   );
-  useEffect26(() => {
+  useEffect28(() => {
     let active = true;
     const objectUrls = [];
     async function resolveFiles() {
@@ -19286,12 +20317,12 @@ function FileDropInput({
   disabled,
   ...props
 }) {
-  const inputId = useId6();
-  const inputRef = useRef19(null);
-  const [internalFiles, setInternalFiles] = useState44(defaultFiles);
-  const [dragging, setDragging] = useState44(false);
-  const [pendingCropFile, setPendingCropFile] = useState44(null);
-  const [cropOpen, setCropOpen] = useState44(false);
+  const inputId = useId7();
+  const inputRef = useRef21(null);
+  const [internalFiles, setInternalFiles] = useState45(defaultFiles);
+  const [dragging, setDragging] = useState45(false);
+  const [pendingCropFile, setPendingCropFile] = useState45(null);
+  const [cropOpen, setCropOpen] = useState45(false);
   const files = filesProp ?? internalFiles;
   const items = useResolvedPreviewItems(files, previewItems);
   const singleItem = !multiple && items.length === 1 ? items[0] : null;
@@ -19551,7 +20582,7 @@ import {
   IconUpload as IconUpload2,
   IconX as IconX12
 } from "@tabler/icons-react";
-import { useId as useId7, useRef as useRef20, useState as useState45 } from "react";
+import { useId as useId8, useRef as useRef22, useState as useState46 } from "react";
 import { Fragment as Fragment29, jsx as jsx155, jsxs as jsxs95 } from "react/jsx-runtime";
 function FileInput({
   className,
@@ -19577,13 +20608,15 @@ function FileInput({
   errorProps,
   inputContainer,
   disabled,
+  id: inputIdProp,
   ...props
 }) {
-  const inputRef = useRef20(null);
-  const inputId = useId7();
-  const [internalFiles, setInternalFiles] = useState45(defaultFiles);
-  const [pendingCropFile, setPendingCropFile] = useState45(null);
-  const [cropOpen, setCropOpen] = useState45(false);
+  const inputRef = useRef22(null);
+  const generatedInputId = useId8();
+  const inputId = inputIdProp ?? generatedInputId;
+  const [internalFiles, setInternalFiles] = useState46(defaultFiles);
+  const [pendingCropFile, setPendingCropFile] = useState46(null);
+  const [cropOpen, setCropOpen] = useState46(false);
   const files = filesProp ?? internalFiles;
   const items = useResolvedPreviewItems(files, previewItems);
   const singleItem = !multiple && items.length === 1 ? items[0] : null;
@@ -19632,7 +20665,14 @@ function FileInput({
   const hasWrapper = label || description || error || required || withAsterisk;
   const RootIcon = singleItem ? getFileIcon2(singleItem.type) : IconPaperclip;
   let metaContent = null;
-  if (items.length > 1) {
+  if (multiple && items.length > 0) {
+    metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
+      items.length,
+      " file",
+      items.length === 1 ? "" : "s",
+      " selected"
+    ] });
+  } else if (!multiple && items.length > 1) {
     metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
       items.length,
       " files selected"
@@ -19666,13 +20706,11 @@ function FileInput({
             }
           ),
           /* @__PURE__ */ jsx155(
-            "button",
+            "label",
             {
-              type: "button",
+              htmlFor: inputId,
               "data-slot": "file-input-root",
               className: "cn-file-input-root",
-              onClick: () => inputRef.current?.click(),
-              disabled,
               children: singleItem ? /* @__PURE__ */ jsxs95(Fragment29, { children: [
                 /* @__PURE__ */ jsx155(
                   "div",
@@ -19712,6 +20750,7 @@ function FileInput({
                           variant: "ghost",
                           size: "icon-sm",
                           onClick: (event) => {
+                            event.preventDefault();
                             event.stopPropagation();
                             handleEdit();
                           },
@@ -19727,6 +20766,7 @@ function FileInput({
                           variant: "ghost",
                           size: "icon-sm",
                           onClick: (event) => {
+                            event.preventDefault();
                             event.stopPropagation();
                             handleClear();
                           },
@@ -19769,7 +20809,7 @@ function FileInput({
               ] })
             }
           ),
-          !singleItem && items.length > 1 ? /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-list", className: "cn-file-input-list", children: items.map((item) => {
+          !singleItem && (multiple ? items.length > 0 : items.length > 1) ? /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-list", className: "cn-file-input-list", children: items.map((item) => {
             const ItemIcon = getFileIcon2(item.type);
             return /* @__PURE__ */ jsxs95(
               "div",
@@ -19953,7 +20993,7 @@ function Flex({
 }
 
 // src/components/ui/floating-indicator.tsx
-import { useEffect as useEffect27, useState as useState46 } from "react";
+import { useEffect as useEffect29, useState as useState47 } from "react";
 import { jsx as jsx157 } from "react/jsx-runtime";
 function FloatingIndicator({
   className,
@@ -19964,9 +21004,9 @@ function FloatingIndicator({
   style,
   ...props
 }) {
-  const [position, setPosition] = useState46({ x: 0, y: 0, width: 0, height: 0 });
-  const [isVisible, setIsVisible] = useState46(!displayAfterTransitionEnd);
-  useEffect27(() => {
+  const [position, setPosition] = useState47({ x: 0, y: 0, width: 0, height: 0 });
+  const [isVisible, setIsVisible] = useState47(!displayAfterTransitionEnd);
+  useEffect29(() => {
     const hasTargetAndParent2 = target && parent;
     if (!hasTargetAndParent2) {
       return;
@@ -20021,7 +21061,7 @@ function FloatingIndicator({
 }
 
 // src/components/ui/focus-trap.tsx
-import { cloneElement as cloneElement2, useEffect as useEffect28, useRef as useRef21 } from "react";
+import { cloneElement as cloneElement2, useEffect as useEffect30, useRef as useRef23 } from "react";
 import { jsx as jsx158 } from "react/jsx-runtime";
 var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function getFocusableElements(container) {
@@ -20030,8 +21070,8 @@ function getFocusableElements(container) {
   );
 }
 function useFocusTrap(active) {
-  const ref = useRef21(null);
-  useEffect28(() => {
+  const ref = useRef23(null);
+  useEffect30(() => {
     if (!active) {
       return;
     }
@@ -20620,7 +21660,7 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/json-input.tsx
-import { useState as useState47 } from "react";
+import { useState as useState48 } from "react";
 import { jsx as jsx165, jsxs as jsxs97 } from "react/jsx-runtime";
 function JsonInput({
   className,
@@ -20642,10 +21682,10 @@ function JsonInput({
     }
     return "";
   };
-  const [internalValue, setInternalValue] = useState47(
+  const [internalValue, setInternalValue] = useState48(
     stringifyValue(defaultValue) || "{}"
   );
-  const [error, setError] = useState47(null);
+  const [error, setError] = useState48(null);
   const currentValue = value !== void 0 ? stringifyValue(value) : internalValue;
   const handleChange = (e) => {
     const newValue = e.target.value;
@@ -21076,7 +22116,7 @@ function MenubarSubContent({
 }
 
 // src/components/ui/money-input.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback23, useState as useState48 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback23, useState as useState49 } from "react";
 import { jsx as jsx170, jsxs as jsxs99 } from "react/jsx-runtime";
 var defaultCurrencies = [
   { label: "ETB", value: "etb", symbol: "Br" },
@@ -21112,7 +22152,7 @@ var sizeClasses4 = {
     select: "w-[90px] text-base"
   }
 };
-var MoneyInput = forwardRef12(
+var MoneyInput = forwardRef13(
   ({
     value = 0,
     currency = "etb",
@@ -21126,9 +22166,9 @@ var MoneyInput = forwardRef12(
     id
   }, ref) => {
     const placeholder = placeholderProp ?? (fractionDigits > 0 ? `0.${"0".repeat(fractionDigits)}` : "0");
-    const [internalValue, setInternalValue] = useState48(value);
-    const [internalCurrency, setInternalCurrency] = useState48(currency);
-    const [displayValue, setDisplayValue] = useState48(
+    const [internalValue, setInternalValue] = useState49(value);
+    const [internalCurrency, setInternalCurrency] = useState49(currency);
+    const [displayValue, setDisplayValue] = useState49(
       () => formatNumber(value, fractionDigits)
     );
     const currentCurrency = currencies.find(
@@ -21222,7 +22262,7 @@ MoneyInput.displayName = "MoneyInput";
 // src/components/ui/multi-select.tsx
 import { Autocomplete as AutocompletePrimitive2 } from "@base-ui/react/autocomplete";
 import { IconCheck as IconCheck8, IconChevronDown as IconChevronDown11, IconX as IconX13 } from "@tabler/icons-react";
-import { useState as useState49 } from "react";
+import { useState as useState50 } from "react";
 import { jsx as jsx171, jsxs as jsxs100 } from "react/jsx-runtime";
 function MultiSelect({
   options,
@@ -21234,8 +22274,8 @@ function MultiSelect({
   disabled,
   ...props
 }) {
-  const [open, setOpen] = useState49(false);
-  const [inputValue, setInputValue] = useState49("");
+  const [open, setOpen] = useState50(false);
+  const [inputValue, setInputValue] = useState50("");
   const selectedOptions = options.filter((opt) => value.includes(opt.value));
   const filteredOptions = inputValue === "" ? options : options.filter(
     (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
@@ -21352,7 +22392,7 @@ function MultiSelect({
 
 // src/components/ui/native-select.tsx
 import { IconChevronDown as IconChevronDown12 } from "@tabler/icons-react";
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx172, jsxs as jsxs101 } from "react/jsx-runtime";
 function mapNativeSelectSize(size) {
   return size === "xs" || size === "sm" ? "sm" : "default";
@@ -21362,7 +22402,7 @@ function parseOptions(data) {
     (item) => typeof item === "string" ? { value: item, label: item } : item
   );
 }
-var NativeSelectBase = forwardRef13(
+var NativeSelectBase = forwardRef14(
   ({ className, size = "md", data, children, rightSection, ...props }, ref) => {
     const options = data ? parseOptions(data) : null;
     const mappedSize = mapNativeSelectSize(size);
@@ -21404,7 +22444,7 @@ var NativeSelectBase = forwardRef13(
   }
 );
 NativeSelectBase.displayName = "NativeSelectBase";
-var NativeSelect = forwardRef13(
+var NativeSelect = forwardRef14(
   ({
     label,
     description,
@@ -21681,7 +22721,7 @@ function NavigationMenuIndicator({
 }
 
 // src/components/ui/nprogress.tsx
-import { useEffect as useEffect29, useSyncExternalStore } from "react";
+import { useEffect as useEffect31, useSyncExternalStore } from "react";
 import { jsx as jsx175 } from "react/jsx-runtime";
 var DEFAULT_STEP_INTERVAL = 450;
 var DEFAULT_INITIAL_PROGRESS = 8;
@@ -21845,13 +22885,13 @@ function NProgress({
 }) {
   const current = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const translateX = current.progress - MAX_PROGRESS;
-  useEffect29(() => {
+  useEffect31(() => {
     if (!pathname) {
       return;
     }
     completeNProgress();
   }, [pathname]);
-  useEffect29(() => {
+  useEffect31(() => {
     if (!withNavigation) {
       return;
     }
@@ -21959,7 +22999,7 @@ function NumberFormatter({
 
 // src/components/ui/number-input.tsx
 import { IconChevronDown as IconChevronDown14, IconChevronUp as IconChevronUp4 } from "@tabler/icons-react";
-import { forwardRef as forwardRef14, useCallback as useCallback24 } from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback24 } from "react";
 
 // src/components/ui/unstyled-button.tsx
 import { useRender as useRender9 } from "@base-ui/react/use-render";
@@ -22016,7 +23056,7 @@ function getDisplayValue({
   }
   return "";
 }
-var NumberInput = forwardRef14(
+var NumberInput = forwardRef15(
   ({
     value,
     defaultValue,
@@ -22349,11 +23389,11 @@ function Paper({
 
 // src/components/ui/password-input.tsx
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { forwardRef as forwardRef15, useState as useState50 } from "react";
+import { forwardRef as forwardRef16, useState as useState51 } from "react";
 import { jsx as jsx181, jsxs as jsxs106 } from "react/jsx-runtime";
-var PasswordInput = forwardRef15(
+var PasswordInput = forwardRef16(
   ({ className, showToggle = true, size, ...props }, ref) => {
-    const [showPassword, setShowPassword] = useState50(false);
+    const [showPassword, setShowPassword] = useState51(false);
     const groupSizeClasses = {
       xs: "h-7",
       sm: "h-8",
@@ -22397,7 +23437,7 @@ var PasswordInput = forwardRef15(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var PasswordInputWithWrapper = forwardRef15(
+var PasswordInputWithWrapper = forwardRef16(
   ({
     label,
     description,
@@ -22583,7 +23623,7 @@ import {
   IconStarFilled,
   IconStarHalfFilled
 } from "@tabler/icons-react";
-import { useState as useState51 } from "react";
+import { useState as useState52 } from "react";
 import { jsx as jsx184 } from "react/jsx-runtime";
 function Rating({
   count = 5,
@@ -22597,7 +23637,7 @@ function Rating({
   className,
   ...props
 }) {
-  const [hoverValue, setHoverValue] = useState51(null);
+  const [hoverValue, setHoverValue] = useState52(null);
   const isDisabled = readOnly || disabled;
   const sizeClasses6 = {
     sm: "size-4",
@@ -22974,7 +24014,7 @@ function Space({ className, h, w, style, ...props }) {
 
 // src/components/ui/spoiler.tsx
 import { IconChevronDown as IconChevronDown15 } from "@tabler/icons-react";
-import { useEffect as useEffect30, useRef as useRef22, useState as useState52 } from "react";
+import { useEffect as useEffect32, useRef as useRef24, useState as useState53 } from "react";
 import { jsx as jsx190, jsxs as jsxs110 } from "react/jsx-runtime";
 function Spoiler({
   maxHeight = 100,
@@ -22985,10 +24025,10 @@ function Spoiler({
   className,
   ...props
 }) {
-  const [isExpanded, setIsExpanded] = useState52(initialState);
-  const [shouldShowButton, setShouldShowButton] = useState52(false);
-  const contentRef = useRef22(null);
-  useEffect30(() => {
+  const [isExpanded, setIsExpanded] = useState53(initialState);
+  const [shouldShowButton, setShouldShowButton] = useState53(false);
+  const contentRef = useRef24(null);
+  useEffect32(() => {
     const el = contentRef.current;
     if (!el) {
       return;
@@ -23105,7 +24145,7 @@ function Stack({
 }
 
 // src/components/ui/status-dropdown-button.tsx
-import { useCallback as useCallback25, useMemo as useMemo16, useState as useState53 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo16, useState as useState54 } from "react";
 import { Fragment as Fragment30, jsx as jsx192, jsxs as jsxs111 } from "react/jsx-runtime";
 var STATUS_MENU_SEPARATOR = "separator";
 function resolveConfirmConfig(target, entityLabel) {
@@ -23177,7 +24217,7 @@ function StatusDropdownButton({
   variant,
   ...dropdownProps
 }) {
-  const [pending, setPending] = useState53(null);
+  const [pending, setPending] = useState54(null);
   const onPick = useCallback25(
     (next) => {
       const target = states.find((s) => s.value === next);
@@ -23447,7 +24487,7 @@ function TableOfContents({
 
 // src/components/ui/tags-input.tsx
 import { IconX as IconX14 } from "@tabler/icons-react";
-import { useState as useState54 } from "react";
+import { useState as useState55 } from "react";
 import { jsx as jsx196, jsxs as jsxs113 } from "react/jsx-runtime";
 function TagsInput({
   className,
@@ -23461,8 +24501,8 @@ function TagsInput({
   disabled = false,
   ...props
 }) {
-  const [internalValue, setInternalValue] = useState54(defaultValue);
-  const [inputValue, setInputValue] = useState54("");
+  const [internalValue, setInternalValue] = useState55(defaultValue);
+  const [inputValue, setInputValue] = useState55("");
   const tags = value ?? internalValue;
   const addTag = (tag) => {
     const trimmed = tag.trim();
@@ -23556,9 +24596,9 @@ function TagsInput({
 }
 
 // src/components/ui/text-input.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx197, jsxs as jsxs114 } from "react/jsx-runtime";
-var TextInput = forwardRef16(
+var TextInput = forwardRef17(
   ({
     label,
     description,
@@ -24057,7 +25097,7 @@ function ToggleGroupItem({
 }
 
 // src/components/ui/transition.tsx
-import { useEffect as useEffect31, useState as useState55 } from "react";
+import { useEffect as useEffect33, useState as useState56 } from "react";
 import { Fragment as Fragment31, jsx as jsx203 } from "react/jsx-runtime";
 var TRANSITIONS = {
   fade: {
@@ -24112,11 +25152,11 @@ var TRANSITIONS = {
   }
 };
 function useTransitionState(mounted, duration, exitDuration, timingFunction, onEnter, onEntered, onExit, onExited, enterDelay, exitDelay) {
-  const [status, setStatus] = useState55(
+  const [status, setStatus] = useState56(
     mounted ? "entered" : "exited"
   );
-  const [displayDuration, setDisplayDuration] = useState55(duration);
-  useEffect31(() => {
+  const [displayDuration, setDisplayDuration] = useState56(duration);
+  useEffect33(() => {
     if (mounted) {
       setDisplayDuration(duration);
       const t12 = setTimeout(() => {
@@ -24229,7 +25269,7 @@ function Transition({
 
 // src/components/ui/tree.tsx
 import { IconChevronRight as IconChevronRight11 } from "@tabler/icons-react";
-import { useState as useState56 } from "react";
+import { useState as useState57 } from "react";
 import { jsx as jsx204, jsxs as jsxs115 } from "react/jsx-runtime";
 function Tree({
   className,
@@ -24244,7 +25284,7 @@ function Tree({
   renderNode,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = useState56(
+  const [internalExpanded, setInternalExpanded] = useState57(
     /* @__PURE__ */ new Set()
   );
   const expanded = expandedProp !== void 0 ? expandedProp : internalExpanded;
@@ -24844,6 +25884,7 @@ export {
   containerVariants,
   dateToIsoDate,
   formatDateWithPattern,
+  getTimeRange,
   gridColVariants,
   gridVariants,
   incrementNProgress,