@yuno-payments/dashboard-design-system 0.0.112 → 0.0.115

package/dist/components/atoms/time-picker/time-picker.d.ts

@@ -25,17 +25,45 @@ export interface TimePickerProps extends Omit<TimePickerPrimitiveProps, "onChang
      * Callback fired when the time value changes
      */
     onChange?: (value: string) => void;
+    /**
+     * Picker mode
+     * - "native": HTML5 native input (default)
+     * - "dropdown": Custom dropdown with columns
+     * @default "native"
+     */
+    mode?: "native" | "dropdown";
+    /**
+     * Minute intervals (only for mode="dropdown")
+     * 0 = all minutes, 15 = every 15 minutes, etc.
+     * @default 0
+     */
+    divisorMinutes?: number;
+    /**
+     * Width of the picker (only for mode="dropdown")
+     * @default 140
+     */
+    width?: number | string;
 }
 /**
  * Time input picker with label, description, and error handling.
+ * Supports two modes: native HTML5 input or custom dropdown.
  *
  * @example
  * ```tsx
+ * // Native mode (default)
  * <TimePicker
  *   label="Select time"
  *   value={time}
  *   onChange={(value) => setTime(value)}
  * />
+ *
+ * // Dropdown mode with 15-minute intervals
+ * <TimePicker
+ *   mode="dropdown"
+ *   divisorMinutes={15}
+ *   value={time}
+ *   onChange={(value) => setTime(value)}
+ * />
  * ```
  */
 declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/time-picker/time-picker.js

@@ -1,56 +1,212 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as v from "react";
-import { useId as h } from "react";
-import { cn as c } from "../../../lib/utils.js";
-import { TimePicker as j } from "../../../vendor/shadcn/time-picker.js";
-import { Field as k, FieldLabel as P, FieldDescription as F, FieldError as g } from "../../../vendor/shadcn/field.js";
-const T = v.forwardRef(
+import * as U from "react";
+import { useId as B, useState as k, useRef as I, useEffect as S } from "react";
+import { cn as s } from "../../../lib/utils.js";
+import { Icon as W } from "../icon/icon.js";
+import { TimePicker as q } from "../../../vendor/shadcn/time-picker.js";
+import { Field as C, FieldLabel as E, FieldDescription as T, FieldError as R } from "../../../vendor/shadcn/field.js";
+const G = Array.from({ length: 12 }, (t, n) => n + 1), J = ["AM", "PM"], K = (t) => {
+  if (t === 0)
+    return Array.from({ length: 60 }, (o, i) => i);
+  const n = 60 / t;
+  return Array.from({ length: n }, (o, i) => i * t);
+}, u = (t) => t.toString().padStart(2, "0"), Q = (t) => {
+  const n = t >= 12 ? "PM" : "AM";
+  return { hour: t === 0 ? 12 : t > 12 ? t - 12 : t, meridiem: n };
+}, X = (t, n) => t === 12 ? n === "AM" ? 0 : 12 : n === "PM" ? t + 12 : t, Y = U.forwardRef(
   ({
-    className: o,
-    label: s,
-    error: i,
-    description: r,
-    orientation: m = "vertical",
-    id: n,
-    onChange: l,
-    ...f
-  }, x) => {
-    const p = h(), t = n || p, d = !!i, a = /* @__PURE__ */ e.jsx(
-      j,
-      {
-        ref: x,
-        id: t,
-        className: c(
-          d && "border-destructive focus-visible:border-destructive",
-          !(s || i || r) && o
-        ),
-        "aria-invalid": d ? !0 : void 0,
-        "aria-describedby": r || i ? `${t}-description` : void 0,
-        ...f,
-        onChange: (u) => {
-          l?.(u.target.value);
+    className: t,
+    label: n,
+    error: o,
+    description: i,
+    orientation: x = "vertical",
+    id: c,
+    onChange: m,
+    mode: b = "native",
+    divisorMinutes: g = 0,
+    width: l = 140,
+    value: f,
+    disabled: y,
+    ...p
+  }, M) => {
+    const N = B(), a = c || N, v = !!o;
+    if (b === "native") {
+      const d = /* @__PURE__ */ e.jsx(
+        q,
+        {
+          ref: M,
+          id: a,
+          value: f,
+          disabled: y,
+          className: s(
+            v && "border-destructive focus-visible:border-destructive",
+            !(n || o || i) && t
+          ),
+          "aria-invalid": v ? !0 : void 0,
+          "aria-describedby": i || o ? `${a}-description` : void 0,
+          ...p,
+          onChange: (P) => {
+            m?.(P.target.value);
+          }
         }
-      }
-    );
-    return s || i || r ? /* @__PURE__ */ e.jsxs(
-      k,
+      );
+      return n || o || i ? /* @__PURE__ */ e.jsxs(
+        C,
+        {
+          orientation: x,
+          "data-invalid": v,
+          className: s("w-full", t),
+          children: [
+            n && /* @__PURE__ */ e.jsx(E, { htmlFor: a, children: n }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+              d,
+              i && !o && /* @__PURE__ */ e.jsx(T, { id: `${a}-description`, children: i }),
+              o && /* @__PURE__ */ e.jsx(R, { id: `${a}-description`, children: o })
+            ] })
+          ]
+        }
+      ) : d;
+    }
+    return /* @__PURE__ */ e.jsx(
+      Z,
       {
-        orientation: m,
-        "data-invalid": d,
-        className: c("w-full", o),
-        children: [
-          s && /* @__PURE__ */ e.jsx(P, { htmlFor: t, children: s }),
-          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-            a,
-            r && !i && /* @__PURE__ */ e.jsx(F, { id: `${t}-description`, children: r }),
-            i && /* @__PURE__ */ e.jsx(g, { id: `${t}-description`, children: i })
-          ] })
-        ]
+        value: f || "12:00",
+        onChange: m,
+        divisorMinutes: g,
+        width: l,
+        label: n,
+        error: o,
+        description: i,
+        disabled: y,
+        className: t
       }
-    ) : a;
+    );
   }
 );
-T.displayName = "TimePicker";
+Y.displayName = "TimePicker";
+const Z = ({
+  value: t,
+  onChange: n,
+  divisorMinutes: o,
+  width: i,
+  label: x,
+  error: c,
+  description: m,
+  disabled: b,
+  className: g
+}) => {
+  const [l, f] = k(!1), y = I(null), p = I(null), M = (r) => {
+    const [h, O] = r.split(":"), _ = parseInt(h, 10) || 0, L = parseInt(O, 10) || 0, { hour: V, meridiem: z } = Q(_);
+    return { hour: V, minute: L, meridiem: z };
+  }, { hour: N, minute: a, meridiem: v } = M(t), [d, P] = k(N), [j, A] = k(a), [w, D] = k(v), F = K(o);
+  S(() => {
+    const r = X(d, w), h = `${u(r)}:${u(j)}`;
+    n?.(h);
+  }, [d, j, w, n]), S(() => {
+    const r = (h) => {
+      p.current && !p.current.contains(h.target) && f(!1);
+    };
+    if (l)
+      return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [l]);
+  const H = `${u(d)}:${u(j)} ${w}`, $ = /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: p,
+      className: s("relative inline-block", g),
+      style: { width: typeof i == "number" ? `${i}px` : i },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: b,
+            onClick: () => !b && f(!l),
+            className: s(
+              "flex items-center justify-between w-full h-9 px-3 py-2",
+              "text-sm rounded-md border border-input bg-background",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              c && "border-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ e.jsx("span", { children: H }),
+              /* @__PURE__ */ e.jsx(
+                W,
+                {
+                  name: l ? "CaretUp" : "CaretDown",
+                  size: "sm",
+                  className: "ml-2"
+                }
+              )
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ e.jsxs(
+          "div",
+          {
+            ref: y,
+            className: s(
+              "absolute z-50 mt-1 bg-popover border border-border rounded-md shadow-lg",
+              "flex divide-x divide-border"
+            ),
+            style: { width: "fit-content", minWidth: "200px" },
+            children: [
+              /* @__PURE__ */ e.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: G.map((r) => /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => P(r),
+                  className: s(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    d === r && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: u(r)
+                },
+                r
+              )) }),
+              /* @__PURE__ */ e.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: F.map((r) => /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => A(r),
+                  className: s(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    j === r && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: u(r)
+                },
+                r
+              )) }),
+              /* @__PURE__ */ e.jsx("div", { className: "flex flex-col min-w-[60px]", children: J.map((r) => /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => D(r),
+                  className: s(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    w === r && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: r
+                },
+                r
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return x || c || m ? /* @__PURE__ */ e.jsxs(C, { orientation: "vertical", className: s("w-full", g), children: [
+    x && /* @__PURE__ */ e.jsx(E, { children: x }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+      $,
+      m && !c && /* @__PURE__ */ e.jsx(T, { children: m }),
+      c && /* @__PURE__ */ e.jsx(R, { children: c })
+    ] })
+  ] }) : $;
+};
 export {
-  T as TimePicker
+  Y as TimePicker
 };