@sth87/shadcn-design-system 0.0.36 → 0.1.0

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

@@ -1,4 +1,4 @@
-import { jsxs as N, jsx as f } from "react/jsx-runtime";
+import { jsxs as N, jsx as c } from "react/jsx-runtime";
 import * as D from "react";
 import { Calendar as Vo } from "../../packages/ui/src/components/calendar.js";
 import { Popover as Co, PopoverTrigger as Po, PopoverContent as So } from "../../packages/ui/src/components/popover.js";
@@ -40,42 +40,42 @@ import { DATE_FORMAT as fo } from "../../constants/common.js";
 import { FloatingLabel as qo } from "../FloatLabel.js";
 import Go from "../Button/Button.js";
 import Jo from "../Input/Input.js";
-function Qo(p, m = fo, v) {
-  return p ? O(p, m, v ? { locale: v } : void 0) : "";
+function Qo(p, d = fo, v) {
+  return p ? O(p, d, v ? { locale: v } : void 0) : "";
 }
-const y = (p, m = fo) => {
-  const v = Uo(p, m, /* @__PURE__ */ new Date());
+const y = (p, d = fo) => {
+  const v = Uo(p, d, /* @__PURE__ */ new Date());
   return Yo(v) ? v : void 0;
 };
 function Wo(p) {
-  return p.replace(/dd|MM|yyyy/g, (m) => {
-    switch (m) {
+  return p.replace(/dd|MM|yyyy/g, (d) => {
+    switch (d) {
       case "dd":
       case "MM":
         return "99";
       case "yyyy":
         return "9999";
       default:
-        return m;
+        return d;
     }
-  }).replace(/d|M|y/g, (m) => {
-    switch (m) {
+  }).replace(/d|M|y/g, (d) => {
+    switch (d) {
       case "d":
       case "M":
         return "9";
       case "y":
         return "9";
       default:
-        return m;
+        return d;
     }
   });
 }
 function Et({
   label: p,
-  value: m,
+  value: d,
   placeholder: v,
   onChange: T,
-  onSelect: c,
+  onSelect: m,
   calendarClassName: lo,
   side: uo = "bottom",
   align: go = "end",
@@ -89,74 +89,74 @@ function Et({
   desktopMode: S = "popover",
   mobileMode: oo = "drawer",
   children: E,
-  separator: ho = /* @__PURE__ */ f(Bo, { className: "size-5" }),
+  separator: ho = /* @__PURE__ */ c(Bo, { className: "ds:size-5" }),
   showTime: z = !1,
   timeFormat: w = "HH:mm",
   hideDate: to = !1,
   numberOfMonths: bo = 1,
   variant: Do = "default",
   color: yo = "primary",
-  ...i
+  ...n
 }) {
   const eo = D.useId();
-  let u, $;
-  typeof C == "string" ? (u = C, $ = C) : (u = C.input, $ = C.output);
+  let l, $;
+  typeof C == "string" ? (l = C, $ = C) : (l = C.input, $ = C.output);
   let A;
-  j === !0 ? A = Wo(u) : typeof j == "string" && (A = j);
-  const ro = m?.from ? y(m.from, u) : void 0, zo = m?.to ? y(m.to, u) : void 0, Mo = {
+  j === !0 ? A = Wo(l) : typeof j == "string" && (A = j);
+  const ro = d?.from ? y(d.from, l) : void 0, zo = d?.to ? y(d.to, l) : void 0, Mo = {
     from: ro,
     to: zo
-  }, [no, k] = D.useState(!1), [n, l] = D.useState(Mo), [Fo, B] = D.useState(
+  }, [so, k] = D.useState(!1), [s, f] = D.useState(Mo), [Fo, B] = D.useState(
     ro || /* @__PURE__ */ new Date()
-  ), [I, h] = D.useState(m?.from || ""), [x, b] = D.useState(m?.to || ""), [U, Y] = D.useState(void 0), [_, K] = D.useState(void 0), q = D.useRef(null), G = D.useRef(null), Ro = !!(I.trim() || x.trim()), J = L?.locale ? L?.locale : po === "en" ? _o : Ko, e = (o) => {
+  ), [I, h] = D.useState(d?.from || ""), [x, b] = D.useState(d?.to || ""), [U, Y] = D.useState(void 0), [_, K] = D.useState(void 0), q = D.useRef(null), G = D.useRef(null), Ro = !!(I.trim() || x.trim()), J = L?.locale ? L?.locale : po === "en" ? _o : Ko, e = (o) => {
     if (!o) return "";
     let t = Qo(o, $, J);
     return z && (t += ` ${O(o, w)}`), t;
   }, To = (o) => {
-    l(o);
+    f(o);
     const t = e(o?.from), r = e(o?.to);
-    h(t), b(r), c?.(o, { from: t, to: r });
+    h(t), b(r), m?.(o, { from: t, to: r });
   }, No = (o) => {
     if (h(o), o.trim() === "") {
       h(""), b("");
-      const d = { from: void 0, to: void 0 };
-      l(d), c?.(d, d);
+      const u = { from: void 0, to: void 0 };
+      f(u), m?.(u, u);
       return;
     }
     let t;
-    z ? t = y(o, `${u} ${w}`) : t = y(o, u);
-    const r = { from: t, to: n?.to };
-    t ? (l(r), B(t), Y(t), c?.(r, {
+    z ? t = y(o, `${l} ${w}`) : t = y(o, l);
+    const r = { from: t, to: s?.to };
+    t ? (f(r), B(t), Y(t), m?.(r, {
       from: e(t),
-      to: e(n?.to)
-    })) : (l(r), c?.(r, {
-      from: e(n?.from),
-      to: e(n?.to)
+      to: e(s?.to)
+    })) : (f(r), m?.(r, {
+      from: e(s?.from),
+      to: e(s?.to)
     }));
   }, Ho = (o) => {
     if (b(o), o.trim() === "") {
       h(""), b("");
-      const d = { from: void 0, to: void 0 };
-      l(d), c?.(d, d);
+      const u = { from: void 0, to: void 0 };
+      f(u), m?.(u, u);
       return;
     }
     let t;
-    z ? t = y(o, `${u} ${w}`) : t = y(o, u);
+    z ? t = y(o, `${l} ${w}`) : t = y(o, l);
     const r = {
-      from: n?.from,
+      from: s?.from,
       to: t
     };
-    t ? (l(r), K(t), c?.(r, {
-      from: e(n?.from),
+    t ? (f(r), K(t), m?.(r, {
+      from: e(s?.from),
       to: e(t)
-    })) : (l(r), c?.(r, {
-      from: e(n?.from),
+    })) : (f(r), m?.(r, {
+      from: e(s?.from),
       to: void 0
     }));
   }, Io = (o) => {
     if (o) {
       Y(o);
-      const t = new Date(n?.from || /* @__PURE__ */ new Date());
+      const t = new Date(s?.from || /* @__PURE__ */ new Date());
       t.setHours(
         o.getHours(),
         o.getMinutes(),
@@ -165,20 +165,20 @@ function Et({
       );
       const r = {
         from: t,
-        to: n?.to
+        to: s?.to
       };
-      l(r), h(e(t)), c?.(r, {
+      f(r), h(e(t)), m?.(r, {
         from: e(t),
-        to: e(n?.to)
+        to: e(s?.to)
       }), T?.(r, {
         from: e(t),
-        to: e(n?.to)
+        to: e(s?.to)
       });
     }
   }, xo = (o) => {
     if (o) {
       K(o);
-      const t = new Date(n?.to || /* @__PURE__ */ new Date());
+      const t = new Date(s?.to || /* @__PURE__ */ new Date());
       t.setHours(
         o.getHours(),
         o.getMinutes(),
@@ -186,21 +186,21 @@ function Et({
         0
       );
       const r = {
-        from: n?.from,
+        from: s?.from,
         to: t
       };
-      l(r), b(e(t)), c?.(r, {
-        from: e(n?.from),
+      f(r), b(e(t)), m?.(r, {
+        from: e(s?.from),
         to: e(t)
       }), T?.(r, {
-        from: e(n?.from),
+        from: e(s?.from),
         to: e(t)
       });
     }
-  }, io = E ? E({
+  }, no = E ? E({
     fromValue: I,
     toValue: x,
-    range: n,
+    range: s,
     onSelect: To,
     onFromChange: No,
     onToChange: Ho
@@ -208,33 +208,33 @@ function Et({
     Go,
     {
       variant: "ghost",
-      className: "!p-1 !leading-0 h-auto rounded hover:bg-accent transition-colors",
-      size: i?.size,
+      className: "ds:!p-1 ds:!leading-0 ds:h-auto ds:rounded ds:hover:bg-accent ds:transition-colors",
+      size: n?.size,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ c(
           Ao,
           {
             className: H({
-              "size-3": i.size === "xs" || i.size === "sm",
-              "size-3.5": !i.size || i.size === "normal",
-              "size-4": i.size === "lg" || i.size === "xl"
+              "ds:size-3": n.size === "xs" || n.size === "sm",
+              "ds:size-3.5": !n.size || n.size === "normal",
+              "ds:size-4": n.size === "lg" || n.size === "xl"
             })
           }
         ),
-        /* @__PURE__ */ f("span", { className: "sr-only", children: "Select date range" })
+        /* @__PURE__ */ c("span", { className: "ds:sr-only", children: "Select date range" })
       ]
     }
-  ), so = /* @__PURE__ */ N(
+  ), io = /* @__PURE__ */ N(
     "div",
     {
-      className: H("flex items-stretch", z && !to ? "gap-0" : ""),
+      className: H("ds:flex ds:items-stretch", z && !to ? "ds:gap-0" : ""),
       children: [
-        !to && /* @__PURE__ */ f(
+        !to && /* @__PURE__ */ c(
           Vo,
           {
             ...L,
             mode: "range",
-            selected: n,
+            selected: s,
             captionLayout: "dropdown",
             month: Fo,
             onMonthChange: B,
@@ -244,15 +244,15 @@ function Et({
             onSelect: (o) => {
               let t = o;
               if (z) {
-                const s = U, a = _;
+                const i = U, a = _;
                 t = {
                   from: o?.from ? new Date(
                     o.from.getFullYear(),
                     o.from.getMonth(),
                     o.from.getDate(),
-                    s?.getHours() || 0,
-                    s?.getMinutes() || 0,
-                    s?.getSeconds() || 0
+                    i?.getHours() || 0,
+                    i?.getMinutes() || 0,
+                    i?.getSeconds() || 0
                   ) : void 0,
                   to: o?.to ? new Date(
                     o.to.getFullYear(),
@@ -264,14 +264,14 @@ function Et({
                   ) : void 0
                 };
               }
-              l(t);
-              const r = e(t?.from), d = e(t?.to);
-              h(r), b(d), c?.(t, {
+              f(t);
+              const r = e(t?.from), u = e(t?.to);
+              h(r), b(u), m?.(t, {
                 from: r,
-                to: d
+                to: u
               }), T?.(t, {
                 from: r,
-                to: d
+                to: u
               }), wo && t?.from && t?.to && !z && k(!1);
             },
             locale: J,
@@ -280,17 +280,17 @@ function Et({
             },
             showOutsideDays: vo,
             className: H(
-              "mx-auto",
+              "ds:mx-auto",
               {
-                "[--cell-size:clamp(0px,calc(100vw/7.5),52px)] mb-8 bg-transparent": P || S === "drawer",
-                "[--cell-size:clamp(0px,calc(100vw/7.5),34px)]": !P && S !== "drawer"
+                "ds:[--cell-size:clamp(0px,calc(100vw/7.5),52px)] ds:mb-8 ds:bg-transparent": P || S === "drawer",
+                "ds:[--cell-size:clamp(0px,calc(100vw/7.5),34px)]": !P && S !== "drawer"
               },
               lo
             )
           }
         ),
-        z && /* @__PURE__ */ N("div", { className: "flex gap-0 border-l border-border", children: [
-          /* @__PURE__ */ f(
+        z && /* @__PURE__ */ N("div", { className: "ds:flex ds:gap-0 ds:border-l ds:border-border", children: [
+          /* @__PURE__ */ c(
             co,
             {
               ...Z?.[0],
@@ -303,8 +303,8 @@ function Et({
               standalone: !1
             }
           ),
-          /* @__PURE__ */ f("div", { className: "border-l border-border" }),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ c("div", { className: "ds:border-l ds:border-border" }),
+          /* @__PURE__ */ c(
             co,
             {
               ...Z?.[1],
@@ -320,59 +320,59 @@ function Et({
         ] })
       ]
     }
-  ), Q = /* @__PURE__ */ N(Co, { open: no, onOpenChange: k, children: [
-    /* @__PURE__ */ f(Po, { asChild: !0, disabled: i.disabled, children: io }),
-    /* @__PURE__ */ f(
+  ), Q = /* @__PURE__ */ N(Co, { open: so, onOpenChange: k, children: [
+    /* @__PURE__ */ c(Po, { asChild: !0, disabled: n.disabled, children: no }),
+    /* @__PURE__ */ c(
       So,
       {
         className: H(
-          "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"
         ),
         side: uo,
         align: go,
-        children: so
+        children: io
       }
     )
-  ] }), W = /* @__PURE__ */ N(ko, { open: no, onOpenChange: k, children: [
-    /* @__PURE__ */ f(Oo, { asChild: !0, children: io }),
+  ] }), W = /* @__PURE__ */ N(ko, { open: so, onOpenChange: k, children: [
+    /* @__PURE__ */ c(Oo, { asChild: !0, children: no }),
     /* @__PURE__ */ N(
       jo,
       {
         className: H(
-          "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__ */ N(Lo, { className: "sr-only", children: [
-            /* @__PURE__ */ f(Eo, { children: "Select date range" }),
-            /* @__PURE__ */ f($o, { children: "Set your date range" })
+          /* @__PURE__ */ N(Lo, { className: "ds:sr-only", children: [
+            /* @__PURE__ */ c(Eo, { children: "Select date range" }),
+            /* @__PURE__ */ c($o, { children: "Set your date range" })
           ] }),
-          so
+          io
         ]
       }
     )
   ] });
   if (E)
     return (P ? oo : S) === "drawer" ? W : Q;
-  const ao = (o, t, r, d) => {
-    const s = o === "from";
-    return /* @__PURE__ */ f(
+  const ao = (o, t, r, u) => {
+    const i = o === "from";
+    return /* @__PURE__ */ c(
       Jo,
       {
-        ...i,
-        ...d,
-        ref: s ? q : G,
+        ...n,
+        ...u,
+        ref: i ? q : G,
         id: eo,
-        size: i.isFloatLabel ? i.size ? i.size : "xl" : i.size,
+        size: n.isFloatLabel ? n.size ? n.size : "xl" : n.size,
         className: H(
-          i.className,
-          "relative peer border-0 focus:ring-0 rounded-none hover:bg-transparent active:bg-transparent focus-visible:ring-0 focus-visible:border-0",
-          s ? "pr-0" : ""
+          n.className,
+          "ds:relative ds:peer ds:border-0 ds:focus:ring-0 ds:rounded-none ds:hover:bg-transparent ds:active:bg-transparent ds:focus-visible:ring-0 ds:focus-visible:border-0",
+          i ? "ds:pr-0" : ""
         ),
-        label: i.isFloatLabel && typeof p == "object" ? s ? p?.from || "" : p?.to || "" : "",
-        placeholder: typeof v == "object" ? s ? v?.from || "" : v?.to || "" : v,
-        clearable: !s,
+        label: n.isFloatLabel && typeof p == "object" ? i ? p?.from || "" : p?.to || "" : "",
+        placeholder: typeof v == "object" ? i ? v?.from || "" : v?.to || "" : v,
+        clearable: !i,
         value: t,
         mask: A,
         onChange: (a) => {
@@ -380,34 +380,34 @@ function Et({
           if (r(M), M.trim() === "") {
             h(""), b("");
             const F = { from: void 0, to: void 0 };
-            l(F), c?.(F, F), T?.(F, F);
+            f(F), m?.(F, F), T?.(F, F);
             return;
           }
           let g;
-          z ? g = y(M, `${u} ${w}`) : g = y(M, u);
-          const V = s ? { from: g, to: n?.to } : { from: n?.from, to: g };
+          z ? g = y(M, `${l} ${w}`) : g = y(M, l);
+          const V = i ? { from: g, to: s?.to } : { from: s?.from, to: g };
           if (g) {
-            l(V), s && B(g), s ? Y(g) : K(g);
+            f(V), i && B(g), i ? Y(g) : K(g);
             const F = e(
-              s ? g : n?.from
-            ), mo = e(s ? n?.to : g);
-            c?.(V, { from: F, to: mo }), T?.(V, {
-              from: s ? M : I,
-              to: s ? x : M
+              i ? g : s?.from
+            ), mo = e(i ? s?.to : g);
+            m?.(V, { from: F, to: mo }), T?.(V, {
+              from: i ? M : I,
+              to: i ? x : M
             });
           } else
-            c?.(V, {
-              from: e(n?.from),
-              to: s ? e(n?.to) : void 0
+            m?.(V, {
+              from: e(s?.from),
+              to: i ? e(s?.to) : void 0
             }), T?.(V, {
-              from: e(n?.from),
-              to: s ? e(n?.to) : void 0
+              from: e(s?.from),
+              to: i ? e(s?.to) : void 0
             });
         },
-        onClear: s ? void 0 : () => {
+        onClear: i ? void 0 : () => {
           h(""), b("");
           const a = { from: void 0, to: void 0 };
-          l(a), c?.(a, a), T?.(a, a);
+          f(a), m?.(a, a), T?.(a, a);
         },
         onBlur: () => {
           const a = document.activeElement;
@@ -417,7 +417,7 @@ function Et({
               const g = (R) => {
                 if (R.trim() === "") return !0;
                 let X;
-                return z ? X = y(R, `${u} ${w}`) : X = y(R, u), !!X;
+                return z ? X = y(R, `${l} ${w}`) : X = y(R, l), !!X;
               }, V = g(I), F = g(x);
               if (!V || !F || I.trim() && !x.trim() || !I.trim() && x.trim()) {
                 h(""), b("");
@@ -425,7 +425,7 @@ function Et({
                   from: void 0,
                   to: void 0
                 };
-                l(R), c?.(R, R), T?.(R, R);
+                f(R), m?.(R, R), T?.(R, R);
               }
             }
           }, 100);
@@ -440,21 +440,21 @@ function Et({
     "div",
     {
       className: H(
-        "group relative flex items-center border rounded-md focus-within:ring-2 focus-within:ring-offset-2 bg-background transition-[color,box-shadow]",
+        "ds:group ds:relative ds:flex ds:items-center ds:border ds:rounded-md ds:focus-within:ring-2 ds:focus-within:ring-offset-2 ds:bg-background ds:transition-[color,box-shadow]",
         {
-          "border-input focus-within:ring-ring": !i.state,
-          "border-success focus-within:ring-success": i.state === "success",
-          "border-warning focus-within:ring-warning": i.state === "warning",
-          "border-error focus-within:ring-error": i.state === "error"
+          "ds:border-input ds:focus-within:ring-ring": !n.state,
+          "ds:border-success ds:focus-within:ring-success": n.state === "success",
+          "ds:border-warning ds:focus-within:ring-warning": n.state === "warning",
+          "ds:border-error ds:focus-within:ring-error": n.state === "error"
         }
       ),
       children: [
         ao("from", I, h),
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ c(
           "span",
           {
-            className: H("text-muted-foreground select-none pl-2", {
-              "opacity-30": i.disabled
+            className: H("ds:text-muted-foreground ds:select-none ds:pl-2", {
+              "ds:opacity-30": n.disabled
             }),
             children: ho
           }
@@ -462,13 +462,13 @@ function Et({
         ao("to", x, b, {
           suffixIcon: P ? oo === "drawer" ? W : Q : S === "drawer" ? W : Q
         }),
-        i.isFloatLabel && typeof p == "string" && /* @__PURE__ */ f(
+        n.isFloatLabel && typeof p == "string" && /* @__PURE__ */ c(
           qo,
           {
             htmlFor: eo,
-            size: i.size,
-            infoTooltip: i.infoTooltip,
-            className: "z-10",
+            size: n.size,
+            infoTooltip: n.infoTooltip,
+            className: "ds:z-10",
             shouldFloat: Ro,
             children: p
           }