@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/DatePicker/TimePicker.js

@@ -1,4 +1,4 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import { useState as E, useEffect as Ne, useRef as U, useMemo as _, useCallback as V, memo as ze } from "react";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
@@ -39,59 +39,59 @@ import { parse as Ze, isValid as Me, format as _e } from "date-fns";
 import Be from "../Select/Select.js";
 import L from "../Button/Button.js";
 import Le from "../Input/Input.js";
-const ee = (n, f = 1) => {
+const ee = (n, m = 1) => {
   const H = [];
-  for (let v = 0; v < n; v += f)
+  for (let v = 0; v < n; v += m)
     H.push(v);
   return H;
-}, q = (n) => String(n).padStart(2, "0"), Se = (n, f = "HH:mm") => !n || !Me(n) ? "" : _e(n, f), ye = (n, f = "HH:mm") => {
+}, q = (n) => String(n).padStart(2, "0"), Se = (n, m = "HH:mm") => !n || !Me(n) ? "" : _e(n, m), ye = (n, m = "HH:mm") => {
   if (!n) return;
-  const v = Ze(n, f, /* @__PURE__ */ new Date());
+  const v = Ze(n, m, /* @__PURE__ */ new Date());
   if (Me(v))
     return v;
 };
-function et(n) {
-  return n.replace(/HH|mm|ss/g, (f) => {
-    switch (f) {
+function es(n) {
+  return n.replace(/HH|mm|ss/g, (m) => {
+    switch (m) {
       case "HH":
       case "mm":
       case "ss":
         return "99";
       default:
-        return f;
+        return m;
     }
   }).replace(/H|m|s/g, () => "9");
 }
-function Gt({
+function Gs({
   value: n,
-  onChange: f,
+  onChange: m,
   onSelect: H,
   showHours: v = !0,
-  showMinutes: te = !0,
+  showMinutes: se = !0,
   showSeconds: P = !1,
   disabled: w = !1,
-  className: re,
+  className: te,
   timeLabel: c,
   mask: A,
   format: y,
   mode: l = "wheel",
-  hourInterval: oe = 1,
-  minuteInterval: se = 1,
+  hourInterval: re = 1,
+  minuteInterval: oe = 1,
   secondInterval: ne = 1,
   disabledTimes: ie = [],
   disabledTimeRanges: ce = [],
   showNowButton: le = !1,
-  nowButtonLabel: ae = "Now",
+  nowButtonLabel: de = "Now",
   standalone: O = !0,
-  desktopMode: ue = "popover",
+  desktopMode: ae = "popover",
   mobileMode: ke = "drawer",
   color: R = "primary",
-  isOpen: me,
+  isOpen: ue,
   ...Ve
 }) {
   let x, T;
   typeof y == "string" ? (x = y, T = y) : y ? (x = y.input, T = y.output) : (x = P ? "HH:mm:ss" : "HH:mm", T = P ? "HH:mm:ss" : "HH:mm");
-  const [p, N] = E(void 0), [d, D] = E(void 0), [g, S] = E(void 0), [$, fe] = E(!1);
+  const [f, N] = E(void 0), [p, D] = E(void 0), [g, S] = E(void 0), [$, me] = E(!1);
   Ne(() => {
     if (n) {
       const e = ye(n, x);
@@ -100,21 +100,21 @@ function Gt({
       N(void 0), D(void 0), S(void 0);
   }, [n, x]);
   const G = U(null), J = U(null), K = U(null), Q = U(null), M = _(
-    () => ee(24, oe),
-    [oe]
+    () => ee(24, re),
+    [re]
   ), k = _(
-    () => ee(60, se),
-    [se]
+    () => ee(60, oe),
+    [oe]
   ), j = _(
     () => ee(60, ne),
     [ne]
-  ), a = V(
-    (e, t, r = 0) => {
-      const s = `${q(e ?? 0)}:${q(t ?? 0)}${P ? `:${q(r ?? 0)}` : ""}`;
-      if (ie.includes(s))
+  ), d = V(
+    (e, s, t = 0) => {
+      const o = `${q(e ?? 0)}:${q(s ?? 0)}${P ? `:${q(t ?? 0)}` : ""}`;
+      if (ie.includes(o))
         return !0;
-      for (const u of ce) {
-        const [m, i, h = 0] = u.from.split(":").map(Number), [z, Fe, Oe = 0] = u.to.split(":").map(Number), Te = (e ?? 0) * 3600 + (t ?? 0) * 60 + (r ?? 0), Re = m * 3600 + i * 60 + h, $e = z * 3600 + Fe * 60 + Oe;
+      for (const a of ce) {
+        const [u, i, h = 0] = a.from.split(":").map(Number), [z, Fe, Oe = 0] = a.to.split(":").map(Number), Te = (e ?? 0) * 3600 + (s ?? 0) * 60 + (t ?? 0), Re = u * 3600 + i * 60 + h, $e = z * 3600 + Fe * 60 + Oe;
         if (Te >= Re && Te <= $e)
           return !0;
       }
@@ -127,55 +127,55 @@ function Gt({
         return typeof c == "boolean" ? c ? e === "hours" ? "Hour" : e === "minutes" ? "Minute" : "Second" : void 0 : typeof c == "string" ? c : e === "hours" ? c.hours || "Hour" : e === "minutes" ? c.minutes || "Minute" : c.seconds || "Second";
     },
     [c]
-  ), pe = typeof c == "string" && /* @__PURE__ */ o(
+  ), fe = typeof c == "string" && /* @__PURE__ */ r(
     "div",
     {
-      className: "text-xs font-semibold text-muted-foreground uppercase p-2 border-b w-full text-center",
+      className: "ds:text-xs ds:font-semibold ds:text-muted-foreground ds:uppercase ds:p-2 ds:border-b ds:w-full ds:text-center",
       children: c
     },
     "common-label"
   ), Pe = V(
-    (e, t, r = 0) => {
-      const s = M.reduce(
+    (e, s, t = 0) => {
+      const o = M.reduce(
         (i, h) => Math.abs(h - e) < Math.abs(i - e) ? h : i
-      ), u = k.reduce(
+      ), a = k.reduce(
+        (i, h) => Math.abs(h - s) < Math.abs(i - s) ? h : i
+      ), u = j.reduce(
         (i, h) => Math.abs(h - t) < Math.abs(i - t) ? h : i
-      ), m = j.reduce(
-        (i, h) => Math.abs(h - r) < Math.abs(i - r) ? h : i
       );
-      if (a(s, u, m)) {
+      if (d(o, a, u)) {
         for (const i of M)
           for (const h of k)
             for (const z of j)
-              if (!a(i, h, z))
+              if (!d(i, h, z))
                 return { h: i, m: h, s: z };
       }
-      return { h: s, m: u, s: m };
+      return { h: o, m: a, s: u };
     },
-    [M, k, j, a]
+    [M, k, j, d]
   ), I = V(
-    (e, t, r) => {
-      const s = /* @__PURE__ */ new Date();
-      s.setHours(e, t, r, 0);
-      const u = Se(s, T);
-      f?.(void 0, u, s), H?.(s, u);
+    (e, s, t) => {
+      const o = /* @__PURE__ */ new Date();
+      o.setHours(e, s, t, 0);
+      const a = Se(o, T);
+      m?.(void 0, a, o), H?.(o, a);
     },
-    [T, f, H]
-  ), de = (e) => {
-    a(e, d, g) || (N(e), I(e, d ?? 0, g ?? 0));
+    [T, m, H]
+  ), pe = (e) => {
+    d(e, p, g) || (N(e), I(e, p ?? 0, g ?? 0));
   }, he = (e) => {
-    a(p, e, g) || (D(e), I(p ?? 0, e, g ?? 0));
+    d(f, e, g) || (D(e), I(f ?? 0, e, g ?? 0));
   }, ge = (e) => {
-    a(p, d, e) || (S(e), I(p ?? 0, d ?? 0, e));
+    d(f, p, e) || (S(e), I(f ?? 0, p ?? 0, e));
   }, F = V(
     (e) => {
       if (e.current) {
-        const t = e.current.querySelector(
+        const s = e.current.querySelector(
           "[data-selected]"
         );
-        if (t) {
-          const r = e.current, s = r.clientHeight, u = t.offsetTop, m = t.clientHeight, i = u - s / 2 + m / 2;
-          r.scrollTo({
+        if (s) {
+          const t = e.current, o = t.clientHeight, a = s.offsetTop, u = s.clientHeight, i = a - o / 2 + u / 2;
+          t.scrollTo({
             top: i,
             behavior: "smooth"
           });
@@ -186,132 +186,132 @@ function Gt({
   ), X = V(() => {
     l === "wheel" ? (F(G), F(J), F(K)) : l === "compact" && F(Q);
   }, [G, J, K, Q, l, F]), ve = () => {
-    const e = /* @__PURE__ */ new Date(), { h: t, m: r, s } = Pe(
+    const e = /* @__PURE__ */ new Date(), { h: s, m: t, s: o } = Pe(
       e.getHours(),
       e.getMinutes(),
       e.getSeconds()
     );
-    N(t), D(r), S(s), I(t, r, s), setTimeout(() => X(), 100);
+    N(s), D(t), S(o), I(s, t, o), setTimeout(() => X(), 100);
   };
   Ne(() => {
-    if ((O ? $ : me) || (p !== void 0 || d !== void 0 || g !== void 0)) {
-      const r = setTimeout(() => X(), 100);
-      return () => clearTimeout(r);
+    if ((O ? $ : ue) || (f !== void 0 || p !== void 0 || g !== void 0)) {
+      const t = setTimeout(() => X(), 100);
+      return () => clearTimeout(t);
     }
   }, [
     $,
-    me,
+    ue,
     O,
     l,
     X,
+    f,
     p,
-    d,
     g
   ]);
   const Y = ze(
     ({
       items: e,
-      value: t,
-      onChange: r,
-      timeLabel: s,
-      type: u
-    }) => /* @__PURE__ */ b("div", { className: "flex flex-col gap-2", children: [
-      s && /* @__PURE__ */ o("div", { className: "text-xs font-semibold text-muted-foreground uppercase p-2 border-b w-full text-center", children: s }),
-      /* @__PURE__ */ o("div", { className: "p-2", children: /* @__PURE__ */ o(
+      value: s,
+      onChange: t,
+      timeLabel: o,
+      type: a
+    }) => /* @__PURE__ */ b("div", { className: "ds:flex ds:flex-col ds:gap-2", children: [
+      o && /* @__PURE__ */ r("div", { className: "ds:text-xs ds:font-semibold ds:text-muted-foreground ds:uppercase ds:p-2 ds:border-b ds:w-full ds:text-center", children: o }),
+      /* @__PURE__ */ r("div", { className: "ds:p-2", children: /* @__PURE__ */ r(
         Be,
         {
-          value: t?.toString() || "",
-          onValueChange: (m) => r(Number(m)),
+          value: s?.toString() || "",
+          onValueChange: (u) => t(Number(u)),
           disabled: w,
           clearable: !1,
           search: !1,
-          options: e.map((m) => {
-            const i = u === "hours" && a(m, d, g) || u === "minutes" && a(p, m, g) || u === "seconds" && a(p, d, m);
+          options: e.map((u) => {
+            const i = a === "hours" && d(u, p, g) || a === "minutes" && d(f, u, g) || a === "seconds" && d(f, p, u);
             return {
-              label: q(m),
-              value: m.toString(),
+              label: q(u),
+              value: u.toString(),
               disabled: i
             };
           })
         }
       ) })
     ] })
-  ), je = (e, t) => {
-    a(e, t, 0) || (N(e), D(t), S(0), I(e, t, 0));
+  ), je = (e, s) => {
+    d(e, s, 0) || (N(e), D(s), S(0), I(e, s, 0));
   }, we = () => {
     const e = [];
     if (l === "compact")
-      return /* @__PURE__ */ o(
+      return /* @__PURE__ */ r(
         Ye,
         {
           HOURS: M,
           MINUTES: k,
-          hours: p,
-          minutes: d,
+          hours: f,
+          minutes: p,
           disabled: w,
-          isTimeDisabled: a,
+          isTimeDisabled: d,
           onTimeSelect: je,
           ref: Q,
           color: R
         }
       );
     if (v) {
-      const t = typeof c == "string" ? void 0 : W("hours");
+      const s = typeof c == "string" ? void 0 : W("hours");
       l === "wheel" ? e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           B,
           {
             ref: G,
             items: M,
-            value: p,
-            onChange: de,
-            timeLabel: t,
-            isItemDisabled: (r) => a(r, d, g),
+            value: f,
+            onChange: pe,
+            timeLabel: s,
+            isItemDisabled: (t) => d(t, p, g),
             disabled: w,
             color: R
           },
           "hours"
         )
       ) : l === "select" && e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           Y,
           {
             items: M,
-            value: p,
-            onChange: de,
-            timeLabel: t,
+            value: f,
+            onChange: pe,
+            timeLabel: s,
             type: "hours"
           },
           "hours"
         )
       );
     }
-    if (te) {
-      const t = typeof c == "string" ? void 0 : W("minutes");
+    if (se) {
+      const s = typeof c == "string" ? void 0 : W("minutes");
       l === "wheel" ? e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           B,
           {
             ref: J,
             items: k,
-            value: d,
+            value: p,
             onChange: he,
-            timeLabel: t,
-            itemClassName: v ? "border-l" : void 0,
-            isItemDisabled: (r) => a(p, r, g),
+            timeLabel: s,
+            itemClassName: v ? "ds:border-l" : void 0,
+            isItemDisabled: (t) => d(f, t, g),
             disabled: w,
             color: R
           },
           "minutes"
         )
       ) : l === "select" && e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           Y,
           {
             items: k,
-            value: d,
+            value: p,
             onChange: he,
-            timeLabel: t,
+            timeLabel: s,
             type: "minutes"
           },
           "minutes"
@@ -319,31 +319,31 @@ function Gt({
       );
     }
     if (P) {
-      const t = typeof c == "string" ? void 0 : W("seconds");
+      const s = typeof c == "string" ? void 0 : W("seconds");
       l === "wheel" ? e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           B,
           {
             ref: K,
             items: j,
             value: g,
             onChange: ge,
-            timeLabel: t,
-            itemClassName: te || v ? "border-l" : void 0,
-            isItemDisabled: (r) => a(p, d, r),
+            timeLabel: s,
+            itemClassName: se || v ? "ds:border-l" : void 0,
+            isItemDisabled: (t) => d(f, p, t),
             disabled: w,
             color: R
           },
           "seconds"
         )
       ) : l === "select" && e.push(
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           Y,
           {
             items: j,
             value: g,
             onChange: ge,
-            timeLabel: t,
+            timeLabel: s,
             type: "seconds"
           },
           "seconds"
@@ -356,20 +356,20 @@ function Gt({
     return /* @__PURE__ */ b(
       "div",
       {
-        className: C("flex flex-col gap-2 h-full justify-between", re),
+        className: C("ds:flex ds:flex-col ds:gap-2 ds:h-full ds:justify-between", te),
         children: [
-          pe,
-          /* @__PURE__ */ o(
+          fe,
+          /* @__PURE__ */ r(
             "div",
             {
               className: C(
-                "flex rounded overflow-clip mb-auto",
-                l === "wheel" ? "items-end justify-center p-0 h-72" : "items-start justify-center"
+                "ds:flex ds:rounded ds:overflow-clip ds:mb-auto",
+                l === "wheel" ? "ds:items-end ds:justify-center ds:p-0 ds:h-72" : "ds:items-start ds:justify-center"
               ),
               children: we()
             }
           ),
-          le && /* @__PURE__ */ o(
+          le && /* @__PURE__ */ r(
             L,
             {
               type: "button",
@@ -377,30 +377,30 @@ function Gt({
               size: "xs",
               onClick: ve,
               disabled: w,
-              className: C("rounded-none"),
-              children: ae
+              className: C("ds:rounded-none"),
+              children: de
             }
           )
         ]
       }
     );
-  const He = /* @__PURE__ */ b("div", { className: C("flex flex-col gap-4 h-full", re), children: [
-    pe,
-    /* @__PURE__ */ o(
+  const He = /* @__PURE__ */ b("div", { className: C("ds:flex ds:flex-col ds:gap-4 ds:h-full", te), children: [
+    fe,
+    /* @__PURE__ */ r(
       "div",
       {
         className: C(
-          "flex rounded overflow-clip my-auto mx-auto max-w-sm md:max-w-md lg:max-w-lg relative",
-          l === "wheel" ? "items-end justify-center p-0" : "items-start justify-center",
+          "ds:flex ds:rounded ds:overflow-clip ds:my-auto ds:mx-auto ds:max-w-sm ds:md:max-w-md ds:lg:max-w-lg ds:relative",
+          l === "wheel" ? "ds:items-end ds:justify-center ds:p-0" : "ds:items-start ds:justify-center",
           {
-            "h-72": l === "wheel",
-            "w-xs": O && (De || ue === "drawer")
+            "ds:h-72": l === "wheel",
+            "ds:w-xs": O && (De || ae === "drawer")
           }
         ),
         children: we()
       }
     ),
-    le && /* @__PURE__ */ o(
+    le && /* @__PURE__ */ r(
       L,
       {
         type: "button",
@@ -408,46 +408,46 @@ function Gt({
         size: "xs",
         onClick: ve,
         disabled: w,
-        className: C("rounded-none"),
-        children: ae
+        className: C("ds:rounded-none"),
+        children: de
       }
     )
   ] }), be = /* @__PURE__ */ b(
     L,
     {
       variant: "ghost",
-      className: "!p-1 !leading-0 h-auto rounded hover:bg-accent transition-colors",
+      className: "ds:!p-1 ds:!leading-0 ds:h-auto ds:rounded ds:hover:bg-accent ds:transition-colors",
       disabled: w,
       children: [
-        /* @__PURE__ */ o(Ee, { className: "size-4" }),
-        /* @__PURE__ */ o("span", { className: "sr-only", children: "Select time" })
+        /* @__PURE__ */ r(Ee, { className: "ds:size-4" }),
+        /* @__PURE__ */ r("span", { className: "ds:sr-only", children: "Select time" })
       ]
     }
-  ), Ce = /* @__PURE__ */ b(Ue, { open: $, onOpenChange: fe, children: [
-    /* @__PURE__ */ o(qe, { asChild: !0, disabled: w, children: be }),
-    /* @__PURE__ */ o(
+  ), Ce = /* @__PURE__ */ b(Ue, { open: $, onOpenChange: me, children: [
+    /* @__PURE__ */ r(qe, { asChild: !0, disabled: w, children: be }),
+    /* @__PURE__ */ r(
       Ae,
       {
         className: C(
-          "w-auto overflow-hidden p-0",
-          "backdrop-blur bg-background/50"
+          "ds:w-auto ds:overflow-hidden ds:p-0",
+          "ds:backdrop-blur ds:bg-background/50"
         ),
         children: He
       }
     )
-  ] }), xe = /* @__PURE__ */ b(Ge, { open: $, onOpenChange: fe, children: [
-    /* @__PURE__ */ o(Je, { asChild: !0, children: be }),
+  ] }), xe = /* @__PURE__ */ b(Ge, { open: $, onOpenChange: me, children: [
+    /* @__PURE__ */ r(Je, { asChild: !0, children: be }),
     /* @__PURE__ */ b(
       Ke,
       {
         className: C(
-          "w-auto overflow-hidden p-0",
-          "backdrop-blur bg-background"
+          "ds:w-auto ds:overflow-hidden ds:p-0",
+          "ds:backdrop-blur ds:bg-background"
         ),
         children: [
-          /* @__PURE__ */ b(Qe, { className: "sr-only", children: [
-            /* @__PURE__ */ o(We, { children: "Select time" }),
-            /* @__PURE__ */ o(Xe, { children: "Choose a time" })
+          /* @__PURE__ */ b(Qe, { className: "ds:sr-only", children: [
+            /* @__PURE__ */ r(We, { children: "Select time" }),
+            /* @__PURE__ */ r(Xe, { children: "Choose a time" })
           ] }),
           He
         ]
@@ -455,7 +455,7 @@ function Gt({
     )
   ] }), Ie = T;
   let Z;
-  return A === !0 ? Z = et(x) : typeof A == "string" && (Z = A), /* @__PURE__ */ o(
+  return A === !0 ? Z = es(x) : typeof A == "string" && (Z = A), /* @__PURE__ */ r(
     Le,
     {
       ...Ve,
@@ -464,21 +464,21 @@ function Gt({
       placeholder: Ie,
       mask: Z,
       disabled: w,
-      className: "cursor-pointer",
+      className: "ds:cursor-pointer",
       onChange: (e) => {
-        const t = e.target.value, r = ye(t, x);
-        if (r) {
-          N(r.getHours()), D(r.getMinutes()), S(r.getSeconds());
-          const s = Se(r, T);
-          f?.(e, s, r), H?.(r, s);
+        const s = e.target.value, t = ye(s, x);
+        if (t) {
+          N(t.getHours()), D(t.getMinutes()), S(t.getSeconds());
+          const o = Se(t, T);
+          m?.(e, o, t), H?.(t, o);
         } else
-          N(0), D(0), S(0), f?.(e, t, void 0), H?.(void 0, t);
+          N(0), D(0), S(0), m?.(e, s, void 0), H?.(void 0, s);
       },
-      suffixIcon: De ? ke === "drawer" ? xe : Ce : ue === "drawer" ? xe : Ce
+      suffixIcon: De ? ke === "drawer" ? xe : Ce : ae === "drawer" ? xe : Ce
     }
   );
 }
 export {
-  Gt as TimePicker
+  Gs as TimePicker
 };
 //# sourceMappingURL=TimePicker.js.map