@sth87/shadcn-design-system 0.1.9 → 0.2.0

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

@@ -1,54 +1,27 @@
-import { jsxs as T, jsx as c } from "react/jsx-runtime";
+import { jsxs as T, jsx as m } from "react/jsx-runtime";
 import * as D from "react";
-import { Calendar as Co } from "../../packages/ui/src/components/calendar.js";
-import { Popover as Vo, PopoverTrigger as Po, PopoverContent as So } from "../../packages/ui/src/components/popover.js";
-import { Drawer as ko, DrawerTrigger as Oo, DrawerContent as jo, DrawerHeader as Lo, DrawerTitle as Eo, DrawerDescription as $o } from "../../packages/ui/src/components/drawer.js";
-import "@radix-ui/react-slot";
-import "../../packages/ui/src/components/button.js";
-import "../../packages/ui/src/components/button-group.js";
-import "../../packages/ui/src/components/input.js";
-import "../../packages/ui/src/components/textarea.js";
-import "@radix-ui/react-label";
+import { Calendar as xe } from "../../packages/ui/src/components/calendar.js";
+import { Popover as Ce, PopoverTrigger as Ve, PopoverContent as Pe } from "../../packages/ui/src/components/popover.js";
+import { Drawer as Se, DrawerTrigger as ke, DrawerContent as Oe, DrawerHeader as je, DrawerTitle as Le, DrawerDescription as Ee } from "../../packages/ui/src/components/drawer.js";
 import { cn as H } from "../../packages/ui/src/lib/utils.js";
-import "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "@radix-ui/react-scroll-area";
-import "../../packages/ui/src/components/tree-view.js";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-avatar";
-import "../../packages/ui/src/components/badge.js";
-import { CalendarIcon as Ao, MoveRight as Bo } from "lucide-react";
-import "../../packages/ui/src/components/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "cmdk";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "../../packages/ui/src/components/input-otp.js";
-import "../../packages/ui/src/components/radio-group.js";
-import "../../packages/ui/src/components/sidebar.js";
-import "@radix-ui/react-slider";
-import "../../packages/ui/src/components/tabs.js";
-import "../../packages/ui/src/components/toggle.js";
-import { TimePicker as co } from "./TimePicker.js";
+import $e from "../Input/Input.js";
+import Ae from "../Button/Button.js";
+import { TimePicker as ce } from "./TimePicker.js";
+import { CalendarIcon as Be, MoveRight as Ue } from "lucide-react";
 import { isMobile as P } from "react-device-detect";
-import { format as O, parse as Uo, isValid as Yo } from "date-fns";
-import { enUS as _o, vi as Ko } from "date-fns/locale";
-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, d = fo, v) {
-  return p ? O(p, d, v ? { locale: v } : void 0) : "";
+import { format as O, parse as Ye, isValid as _e } from "date-fns";
+import { enUS as Ke, vi as qe } from "date-fns/locale";
+import { DATE_FORMAT as me } from "../../constants/common.js";
+import { FloatingLabel as Ge } from "../FloatLabel.js";
+function Je(w, d = me, h) {
+  return w ? O(w, d, h ? { locale: h } : void 0) : "";
 }
-const y = (p, d = fo) => {
-  const v = Uo(p, d, /* @__PURE__ */ new Date());
-  return Yo(v) ? v : void 0;
+const y = (w, d = me) => {
+  const h = Ye(w, d, /* @__PURE__ */ new Date());
+  return _e(h) ? h : void 0;
 };
-function Wo(p) {
-  return p.replace(/dd|MM|yyyy/g, (d) => {
+function Qe(w) {
+  return w.replace(/dd|MM|yyyy/g, (d) => {
     switch (d) {
       case "dd":
       case "MM":
@@ -70,149 +43,149 @@ function Wo(p) {
     }
   });
 }
-function Et({
-  label: p,
+function lo({
+  label: w,
   value: d,
-  placeholder: v,
+  placeholder: h,
   onChange: R,
-  onSelect: m,
-  calendarClassName: lo,
-  side: uo = "bottom",
-  align: go = "end",
+  onSelect: c,
+  calendarClassName: fe,
+  side: le = "bottom",
+  align: ue = "end",
   format: V = "dd/MM/yyyy",
-  language: po = "vi",
+  language: ge = "vi",
   mask: j,
-  closeOnSelect: wo = !1,
-  showOutsideDays: vo = !0,
+  closeOnSelect: we = !1,
+  showOutsideDays: ve = !0,
   calendarConfig: L,
   timeConfig: Z,
   desktopMode: S = "popover",
-  mobileMode: oo = "drawer",
+  mobileMode: ee = "drawer",
   children: E,
-  separator: ho = /* @__PURE__ */ c(Bo, { className: "ds:size-5" }),
+  separator: he = /* @__PURE__ */ m(Ue, { className: "ds:size-5" }),
   showTime: z = !1,
-  timeFormat: w = "HH:mm",
-  hideDate: to = !1,
-  numberOfMonths: bo = 1,
-  variant: Do = "default",
-  color: yo = "primary",
+  timeFormat: v = "HH:mm",
+  hideDate: oe = !1,
+  numberOfMonths: be = 1,
+  variant: pe = "default",
+  color: De = "primary",
   ...n
 }) {
-  const eo = D.useId();
+  const te = D.useId();
   let l, $;
   typeof V == "string" ? (l = V, $ = V) : (l = V.input, $ = V.output);
   let A;
-  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
-  }, [so, k] = D.useState(!1), [s, f] = D.useState(Mo), [Fo, B] = D.useState(
-    ro || /* @__PURE__ */ new Date()
-  ), [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), No = !!(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;
-  }, Ro = (o) => {
-    f(o);
-    const t = e(o?.from), r = e(o?.to);
-    h(t), b(r), m?.(o, { from: t, to: r });
-  }, To = (o) => {
-    if (h(o), o.trim() === "") {
-      h(""), b("");
+  j === !0 ? A = Qe(l) : typeof j == "string" && (A = j);
+  const re = d?.from ? y(d.from, l) : void 0, ye = d?.to ? y(d.to, l) : void 0, ze = {
+    from: re,
+    to: ye
+  }, [se, k] = D.useState(!1), [s, f] = D.useState(ze), [Me, B] = D.useState(
+    re || /* @__PURE__ */ new Date()
+  ), [I, b] = D.useState(d?.from || ""), [x, p] = D.useState(d?.to || ""), [U, Y] = D.useState(void 0), [_, K] = D.useState(void 0), q = D.useRef(null), G = D.useRef(null), Fe = !!(I.trim() || x.trim()), J = L?.locale ? L?.locale : ge === "en" ? Ke : qe, t = (e) => {
+    if (!e) return "";
+    let o = Je(e, $, J);
+    return z && (o += ` ${O(e, v)}`), o;
+  }, Ne = (e) => {
+    f(e);
+    const o = t(e?.from), r = t(e?.to);
+    b(o), p(r), c?.(e, { from: o, to: r });
+  }, Re = (e) => {
+    if (b(e), e.trim() === "") {
+      b(""), p("");
       const u = { from: void 0, to: void 0 };
-      f(u), m?.(u, u);
+      f(u), c?.(u, u);
       return;
     }
-    let t;
-    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(s?.to)
-    })) : (f(r), m?.(r, {
-      from: e(s?.from),
-      to: e(s?.to)
+    let o;
+    z ? o = y(e, `${l} ${v}`) : o = y(e, l);
+    const r = { from: o, to: s?.to };
+    o ? (f(r), B(o), Y(o), c?.(r, {
+      from: t(o),
+      to: t(s?.to)
+    })) : (f(r), c?.(r, {
+      from: t(s?.from),
+      to: t(s?.to)
     }));
-  }, Ho = (o) => {
-    if (b(o), o.trim() === "") {
-      h(""), b("");
+  }, Te = (e) => {
+    if (p(e), e.trim() === "") {
+      b(""), p("");
       const u = { from: void 0, to: void 0 };
-      f(u), m?.(u, u);
+      f(u), c?.(u, u);
       return;
     }
-    let t;
-    z ? t = y(o, `${l} ${w}`) : t = y(o, l);
+    let o;
+    z ? o = y(e, `${l} ${v}`) : o = y(e, l);
     const r = {
       from: s?.from,
-      to: t
+      to: o
     };
-    t ? (f(r), K(t), m?.(r, {
-      from: e(s?.from),
-      to: e(t)
-    })) : (f(r), m?.(r, {
-      from: e(s?.from),
+    o ? (f(r), K(o), c?.(r, {
+      from: t(s?.from),
+      to: t(o)
+    })) : (f(r), c?.(r, {
+      from: t(s?.from),
       to: void 0
     }));
-  }, Io = (o) => {
-    if (o) {
-      Y(o);
-      const t = new Date(s?.from || /* @__PURE__ */ new Date());
-      t.setHours(
-        o.getHours(),
-        o.getMinutes(),
-        o.getSeconds(),
+  }, He = (e) => {
+    if (e) {
+      Y(e);
+      const o = new Date(s?.from || /* @__PURE__ */ new Date());
+      o.setHours(
+        e.getHours(),
+        e.getMinutes(),
+        e.getSeconds(),
         0
       );
       const r = {
-        from: t,
+        from: o,
         to: s?.to
       };
-      f(r), h(e(t)), m?.(r, {
-        from: e(t),
-        to: e(s?.to)
+      f(r), b(t(o)), c?.(r, {
+        from: t(o),
+        to: t(s?.to)
       }), R?.(r, {
-        from: e(t),
-        to: e(s?.to)
+        from: t(o),
+        to: t(s?.to)
       });
     }
-  }, xo = (o) => {
-    if (o) {
-      K(o);
-      const t = new Date(s?.to || /* @__PURE__ */ new Date());
-      t.setHours(
-        o.getHours(),
-        o.getMinutes(),
-        o.getSeconds(),
+  }, Ie = (e) => {
+    if (e) {
+      K(e);
+      const o = new Date(s?.to || /* @__PURE__ */ new Date());
+      o.setHours(
+        e.getHours(),
+        e.getMinutes(),
+        e.getSeconds(),
         0
       );
       const r = {
         from: s?.from,
-        to: t
+        to: o
       };
-      f(r), b(e(t)), m?.(r, {
-        from: e(s?.from),
-        to: e(t)
+      f(r), p(t(o)), c?.(r, {
+        from: t(s?.from),
+        to: t(o)
       }), R?.(r, {
-        from: e(s?.from),
-        to: e(t)
+        from: t(s?.from),
+        to: t(o)
       });
     }
-  }, no = E ? E({
+  }, ne = E ? E({
     fromValue: I,
     toValue: x,
     range: s,
-    onSelect: Ro,
-    onFromChange: To,
-    onToChange: Ho
+    onSelect: Ne,
+    onFromChange: Re,
+    onToChange: Te
   }) : /* @__PURE__ */ T(
-    Go,
+    Ae,
     {
       variant: "ghost",
       className: "ds:!p-1 ds:!leading-0 ds:h-auto ds:rounded ds:hover:bg-accent ds:transition-colors",
       size: n?.size,
       children: [
-        /* @__PURE__ */ c(
-          Ao,
+        /* @__PURE__ */ m(
+          Be,
           {
             className: H({
               "ds:size-3": n.size === "xs" || n.size === "sm",
@@ -221,193 +194,193 @@ function Et({
             })
           }
         ),
-        /* @__PURE__ */ c("span", { className: "ds:sr-only", children: "Select date range" })
+        /* @__PURE__ */ m("span", { className: "ds:sr-only", children: "Select date range" })
       ]
     }
-  ), io = /* @__PURE__ */ T(
+  ), ie = /* @__PURE__ */ T(
     "div",
     {
-      className: H("ds:flex ds:items-stretch", z && !to ? "ds:gap-0" : ""),
+      className: H("ds:flex ds:items-stretch", z && !oe ? "ds:gap-0" : ""),
       children: [
-        !to && /* @__PURE__ */ c(
-          Co,
+        !oe && /* @__PURE__ */ m(
+          xe,
           {
             ...L,
             mode: "range",
             selected: s,
             captionLayout: "dropdown",
-            month: Fo,
+            month: Me,
             onMonthChange: B,
-            numberOfMonths: P ? 1 : bo || 1,
-            variant: Do,
-            color: yo,
-            onSelect: (o) => {
-              let t = o;
+            numberOfMonths: P ? 1 : be || 1,
+            variant: pe,
+            color: De,
+            onSelect: (e) => {
+              let o = e;
               if (z) {
                 const i = U, a = _;
-                t = {
-                  from: o?.from ? new Date(
-                    o.from.getFullYear(),
-                    o.from.getMonth(),
-                    o.from.getDate(),
+                o = {
+                  from: e?.from ? new Date(
+                    e.from.getFullYear(),
+                    e.from.getMonth(),
+                    e.from.getDate(),
                     i?.getHours() || 0,
                     i?.getMinutes() || 0,
                     i?.getSeconds() || 0
                   ) : void 0,
-                  to: o?.to ? new Date(
-                    o.to.getFullYear(),
-                    o.to.getMonth(),
-                    o.to.getDate(),
+                  to: e?.to ? new Date(
+                    e.to.getFullYear(),
+                    e.to.getMonth(),
+                    e.to.getDate(),
                     a?.getHours() || 0,
                     a?.getMinutes() || 0,
                     a?.getSeconds() || 0
                   ) : void 0
                 };
               }
-              f(t);
-              const r = e(t?.from), u = e(t?.to);
-              h(r), b(u), m?.(t, {
+              f(o);
+              const r = t(o?.from), u = t(o?.to);
+              b(r), p(u), c?.(o, {
                 from: r,
                 to: u
-              }), R?.(t, {
+              }), R?.(o, {
                 from: r,
                 to: u
-              }), wo && t?.from && t?.to && !z && k(!1);
+              }), we && o?.from && o?.to && !z && k(!1);
             },
             locale: J,
             formatters: {
-              formatMonthDropdown: (o) => o.toLocaleString(J.code, { month: "short" })
+              formatMonthDropdown: (e) => e.toLocaleString(J.code, { month: "short" })
             },
-            showOutsideDays: vo,
+            showOutsideDays: ve,
             className: H(
               "ds:mx-auto",
               {
                 "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
+              fe
             )
           }
         ),
         z && /* @__PURE__ */ T("div", { className: "ds:flex ds:gap-0 ds:border-l ds:border-border", children: [
-          /* @__PURE__ */ c(
-            co,
+          /* @__PURE__ */ m(
+            ce,
             {
               ...Z?.[0],
-              value: U ? O(U, w) : void 0,
-              onSelect: Io,
-              format: w,
+              value: U ? O(U, v) : void 0,
+              onSelect: He,
+              format: v,
               showHours: !0,
               showMinutes: !0,
-              showSeconds: w === "HH:mm:ss",
+              showSeconds: v === "HH:mm:ss",
               standalone: !1
             }
           ),
-          /* @__PURE__ */ c("div", { className: "ds:border-l ds:border-border" }),
-          /* @__PURE__ */ c(
-            co,
+          /* @__PURE__ */ m("div", { className: "ds:border-l ds:border-border" }),
+          /* @__PURE__ */ m(
+            ce,
             {
               ...Z?.[1],
-              value: _ ? O(_, w) : void 0,
-              onSelect: xo,
-              format: w,
+              value: _ ? O(_, v) : void 0,
+              onSelect: Ie,
+              format: v,
               showHours: !0,
               showMinutes: !0,
-              showSeconds: w === "HH:mm:ss",
+              showSeconds: v === "HH:mm:ss",
               standalone: !1
             }
           )
         ] })
       ]
     }
-  ), Q = /* @__PURE__ */ T(Vo, { open: so, onOpenChange: k, children: [
-    /* @__PURE__ */ c(Po, { asChild: !0, disabled: n.disabled, children: no }),
-    /* @__PURE__ */ c(
-      So,
+  ), Q = /* @__PURE__ */ T(Ce, { open: se, onOpenChange: k, children: [
+    /* @__PURE__ */ m(Ve, { asChild: !0, disabled: n.disabled, children: ne }),
+    /* @__PURE__ */ m(
+      Pe,
       {
         className: H(
           "ds:w-auto ds:overflow-hidden ds:p-0",
           "ds:backdrop-blur ds:bg-background/50"
         ),
-        side: uo,
-        align: go,
-        children: io
+        side: le,
+        align: ue,
+        children: ie
       }
     )
-  ] }), W = /* @__PURE__ */ T(ko, { open: so, onOpenChange: k, children: [
-    /* @__PURE__ */ c(Oo, { asChild: !0, children: no }),
+  ] }), W = /* @__PURE__ */ T(Se, { open: se, onOpenChange: k, children: [
+    /* @__PURE__ */ m(ke, { asChild: !0, children: ne }),
     /* @__PURE__ */ T(
-      jo,
+      Oe,
       {
         className: H(
           "ds:w-auto ds:overflow-hidden ds:p-0",
           "ds:backdrop-blur ds:bg-background"
         ),
         children: [
-          /* @__PURE__ */ T(Lo, { className: "ds:sr-only", children: [
-            /* @__PURE__ */ c(Eo, { children: "Select date range" }),
-            /* @__PURE__ */ c($o, { children: "Set your date range" })
+          /* @__PURE__ */ T(je, { className: "ds:sr-only", children: [
+            /* @__PURE__ */ m(Le, { children: "Select date range" }),
+            /* @__PURE__ */ m(Ee, { children: "Set your date range" })
           ] }),
-          io
+          ie
         ]
       }
     )
   ] });
   if (E)
-    return (P ? oo : S) === "drawer" ? W : Q;
-  const ao = (o, t, r, u) => {
-    const i = o === "from";
-    return /* @__PURE__ */ c(
-      Jo,
+    return (P ? ee : S) === "drawer" ? W : Q;
+  const ae = (e, o, r, u) => {
+    const i = e === "from";
+    return /* @__PURE__ */ m(
+      $e,
       {
         ...n,
         ...u,
         ref: i ? q : G,
-        id: eo,
+        id: te,
         size: n.isFloatLabel ? n.size ? n.size : "xl" : n.size,
         className: n.className,
         inputClassName: H(
           "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 ds:shadow-none",
           i ? "ds:pr-0" : ""
         ),
-        label: n.isFloatLabel && typeof p == "object" ? i ? p?.from || "" : p?.to || "" : "",
-        placeholder: typeof v == "object" ? i ? v?.from || "" : v?.to || "" : v,
+        label: n.isFloatLabel && typeof w == "object" ? i ? w?.from || "" : w?.to || "" : "",
+        placeholder: typeof h == "object" ? i ? h?.from || "" : h?.to || "" : h,
         clearable: !i,
-        value: t,
+        value: o,
         mask: A,
         onChange: (a) => {
           const M = a.target.value;
           if (r(M), M.trim() === "") {
-            h(""), b("");
+            b(""), p("");
             const F = { from: void 0, to: void 0 };
-            f(F), m?.(F, F), R?.(F, F);
+            f(F), c?.(F, F), R?.(F, F);
             return;
           }
           let g;
-          z ? g = y(M, `${l} ${w}`) : g = y(M, l);
+          z ? g = y(M, `${l} ${v}`) : g = y(M, l);
           const C = i ? { from: g, to: s?.to } : { from: s?.from, to: g };
           if (g) {
             f(C), i && B(g), i ? Y(g) : K(g);
-            const F = e(
+            const F = t(
               i ? g : s?.from
-            ), mo = e(i ? s?.to : g);
-            m?.(C, { from: F, to: mo }), R?.(C, {
+            ), de = t(i ? s?.to : g);
+            c?.(C, { from: F, to: de }), R?.(C, {
               from: i ? M : I,
               to: i ? x : M
             });
           } else
-            m?.(C, {
-              from: e(s?.from),
-              to: i ? e(s?.to) : void 0
+            c?.(C, {
+              from: t(s?.from),
+              to: i ? t(s?.to) : void 0
             }), R?.(C, {
-              from: e(s?.from),
-              to: i ? e(s?.to) : void 0
+              from: t(s?.from),
+              to: i ? t(s?.to) : void 0
             });
         },
         onClear: i ? void 0 : () => {
-          h(""), b("");
+          b(""), p("");
           const a = { from: void 0, to: void 0 };
-          f(a), m?.(a, a), R?.(a, a);
+          f(a), c?.(a, a), R?.(a, a);
         },
         onBlur: () => {
           const a = document.activeElement;
@@ -417,15 +390,15 @@ function Et({
               const g = (N) => {
                 if (N.trim() === "") return !0;
                 let X;
-                return z ? X = y(N, `${l} ${w}`) : X = y(N, l), !!X;
+                return z ? X = y(N, `${l} ${v}`) : X = y(N, l), !!X;
               }, C = g(I), F = g(x);
               if (!C || !F || I.trim() && !x.trim() || !I.trim() && x.trim()) {
-                h(""), b("");
+                b(""), p("");
                 const N = {
                   from: void 0,
                   to: void 0
                 };
-                f(N), m?.(N, N), R?.(N, N);
+                f(N), c?.(N, N), R?.(N, N);
               }
             }
           }, 100);
@@ -449,28 +422,28 @@ function Et({
         }
       ),
       children: [
-        ao("from", I, h),
-        /* @__PURE__ */ c(
+        ae("from", I, b),
+        /* @__PURE__ */ m(
           "span",
           {
             className: H("ds:text-muted-foreground ds:select-none ds:pl-2", {
               "ds:opacity-30": n.disabled
             }),
-            children: ho
+            children: he
           }
         ),
-        ao("to", x, b, {
-          suffixIcon: P ? oo === "drawer" ? W : Q : S === "drawer" ? W : Q
+        ae("to", x, p, {
+          suffixIcon: P ? ee === "drawer" ? W : Q : S === "drawer" ? W : Q
         }),
-        n.isFloatLabel && typeof p == "string" && /* @__PURE__ */ c(
-          qo,
+        n.isFloatLabel && typeof w == "string" && /* @__PURE__ */ m(
+          Ge,
           {
-            htmlFor: eo,
+            htmlFor: te,
             size: n.size,
             infoTooltip: n.infoTooltip,
             className: "ds:z-10",
-            shouldFloat: No,
-            children: p
+            shouldFloat: Fe,
+            children: w
           }
         )
       ]
@@ -478,6 +451,5 @@ function Et({
   );
 }
 export {
-  Et as RangePicker
+  lo as RangePicker
 };
-//# sourceMappingURL=RangePicker.js.map