@sth87/shadcn-design-system 0.1.9 → 0.2.1

package/dist/esm/components/ImageViewer/ImageViewer.js

@@ -1,51 +1,21 @@
-import { jsx as t, jsxs as v, Fragment as F } from "react/jsx-runtime";
+import { jsx as s, jsxs as v, Fragment as F } from "react/jsx-runtime";
 import B, { useState as c, useEffect as _, useCallback as C } from "react";
 import { ZoomIn as q } from "lucide-react";
-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 { cn as L } 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 "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-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 "../../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";
-typeof window < "u" && import("../../_virtual/index.js").then((r) => r.i).then((r) => {
-  r.default;
+typeof window < "u" && import("../../_virtual/index.js").then((t) => t.i).then((t) => {
+  t.default;
 });
 const j = ({
-  images: r,
-  visible: m = !1,
-  onClose: n,
-  activeIndex: i = 0,
-  onIndexChange: a,
-  zoomSpeed: w = 0.1,
-  disableKeyboardSupport: l = !1,
-  noNavbar: d = !1,
-  noToolbar: f = !1,
-  rotatable: h = !0,
+  images: t,
+  visible: u = !1,
+  onClose: o,
+  activeIndex: a = 0,
+  onIndexChange: d,
+  zoomSpeed: f = 0.1,
+  disableKeyboardSupport: i = !1,
+  noNavbar: l = !1,
+  noToolbar: h = !1,
+  rotatable: p = !0,
   scalable: b = !0,
   changeable: U = !0,
   noClose: P = !1,
@@ -58,47 +28,47 @@ const j = ({
   noResetZoomAfterChange: R = !1,
   drag: G = !1
 }) => {
-  const [u, V] = c(i), [p, M] = c(null);
+  const [m, V] = c(a), [w, M] = c(null);
   _(() => {
-    typeof window < "u" && !p && import("../../_virtual/index.js").then((e) => e.i).then((e) => {
+    typeof window < "u" && !w && import("../../_virtual/index.js").then((e) => e.i).then((e) => {
       M(() => e.default);
     });
-  }, [p]), _(() => {
-    V(i);
-  }, [i]);
+  }, [w]), _(() => {
+    V(a);
+  }, [a]);
   const N = C(() => {
-    n?.();
-  }, [n]), D = C(
-    (e, o) => {
-      V(o), a?.(o);
+    o?.();
+  }, [o]), D = C(
+    (e, r) => {
+      V(r), d?.(r);
     },
-    [a]
+    [d]
   ), Z = C(() => {
-    const e = r[u], o = e.downloadUrl || e.src, s = document.createElement("a");
-    s.href = o, s.download = e.alt || `image-${u + 1}`, fetch(o).then((O) => O.blob()).then((O) => {
+    const e = t[m], r = e.downloadUrl || e.src, n = document.createElement("a");
+    n.href = r, n.download = e.alt || `image-${m + 1}`, fetch(r).then((O) => O.blob()).then((O) => {
       const T = window.URL.createObjectURL(O);
-      s.href = T, document.body.appendChild(s), s.click(), document.body.removeChild(s), window.URL.revokeObjectURL(T);
+      n.href = T, document.body.appendChild(n), n.click(), document.body.removeChild(n), window.URL.revokeObjectURL(T);
     }).catch(() => {
     });
-  }, [r, u]), $ = r.map((e) => ({
+  }, [t, m]), $ = t.map((e) => ({
     src: e.src,
     alt: e.alt || "",
     downloadUrl: e.downloadUrl || e.src
   }));
-  return p ? /* @__PURE__ */ t(
-    p,
+  return w ? /* @__PURE__ */ s(
+    w,
     {
-      visible: m,
+      visible: u,
       onClose: N,
       onMaskClick: N,
       images: $,
-      activeIndex: u,
+      activeIndex: m,
       onChange: D,
-      zoomSpeed: w,
-      disableKeyboardSupport: l,
-      noNavbar: d,
-      noToolbar: f,
-      rotatable: h,
+      zoomSpeed: f,
+      disableKeyboardSupport: i,
+      noNavbar: l,
+      noToolbar: h,
+      rotatable: p,
       scalable: b,
       changeable: U,
       noClose: P,
@@ -111,12 +81,12 @@ const j = ({
       noResetZoomAfterChange: R,
       showTotal: !0,
       drag: G,
-      customToolbar: (e) => e.map((o) => o.key === "download" ? {
-        ...o,
+      customToolbar: (e) => e.map((r) => r.key === "download" ? {
+        ...r,
         actionType: void 0,
         // Remove default action
         onClick: void 0,
-        render: /* @__PURE__ */ t(
+        render: /* @__PURE__ */ s(
           "button",
           {
             type: "button",
@@ -128,8 +98,8 @@ const j = ({
               cursor: "pointer",
               padding: 0
             },
-            onClick: (s) => {
-              s.preventDefault(), s.stopPropagation(), Z();
+            onClick: (n) => {
+              n.preventDefault(), n.stopPropagation(), Z();
             },
             children: /* @__PURE__ */ v(
               "svg",
@@ -140,7 +110,7 @@ const j = ({
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
                 children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ s(
                     "path",
                     {
                       d: "M10 3v10m0 0l-4-4m4 4l4-4",
@@ -150,7 +120,7 @@ const j = ({
                       strokeLinejoin: "round"
                     }
                   ),
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ s(
                     "rect",
                     {
                       x: "4",
@@ -166,22 +136,22 @@ const j = ({
             )
           }
         )
-      } : o)
+      } : r)
     }
   ) : null;
 };
 j.displayName = "ImageViewer";
 const S = ({
-  src: r,
-  alt: m = "",
-  width: n,
-  height: i,
-  preview: a = !0,
-  previewSrc: w,
-  fallback: l,
-  placeholder: d,
-  className: f,
-  wrapperClassName: h,
+  src: t,
+  alt: u = "",
+  width: o,
+  height: a,
+  preview: d = !0,
+  previewSrc: f,
+  fallback: i,
+  placeholder: l,
+  className: h,
+  wrapperClassName: p,
   onPreviewClick: b,
   onError: U,
   ...P
@@ -190,66 +160,66 @@ const S = ({
     k(!1), x(!1);
   }, G = (D) => {
     k(!1), x(!0), U?.(D);
-  }, u = () => {
-    a && (I(!0), b?.());
+  }, m = () => {
+    d && (I(!0), b?.());
   }, V = () => {
     I(!1);
-  }, p = g && d, M = y && l, N = a && !g && !y;
+  }, w = g && l, M = y && i, N = d && !g && !y;
   return /* @__PURE__ */ v(F, { children: [
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ s(
       "div",
       {
         className: L(
           "ds:image-viewer-root ds:relative ds:inline-block",
-          h
+          p
         ),
         children: /* @__PURE__ */ v("div", { className: "ds:relative ds:inline-block", children: [
-          p && /* @__PURE__ */ t(
+          w && /* @__PURE__ */ s(
             "div",
             {
               className: "ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:bg-muted ds:animate-pulse",
-              style: { width: n, height: i },
-              children: d === !0 ? /* @__PURE__ */ t("div", { className: "ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin" }) : d
+              style: { width: o, height: a },
+              children: l === !0 ? /* @__PURE__ */ s("div", { className: "ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin" }) : l
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ s(
             "img",
             {
-              src: M ? l : r,
-              alt: m,
-              width: n,
-              height: i,
+              src: M ? i : t,
+              alt: u,
+              width: o,
+              height: a,
               className: L(
                 "ds:image-viewer-img ds:max-w-full ds:h-auto ds:align-middle",
                 g && "ds:opacity-0",
-                f
+                h
               ),
               onLoad: R,
               onError: G,
               ...P
             }
           ),
-          N && /* @__PURE__ */ t(
+          N && /* @__PURE__ */ s(
             "div",
             {
-              onClick: u,
+              onClick: m,
               className: L(
                 "ds:image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer",
                 "ds:bg-black/50 ds:backdrop-blur-sm"
               ),
               children: /* @__PURE__ */ v("div", { className: "ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2", children: [
-                /* @__PURE__ */ t(q, { className: "ds:w-5 ds:h-5" }),
-                /* @__PURE__ */ t("span", { children: "Preview" })
+                /* @__PURE__ */ s(q, { className: "ds:w-5 ds:h-5" }),
+                /* @__PURE__ */ s("span", { children: "Preview" })
               ] })
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ s(
       j,
       {
-        images: [{ src: w || r, alt: m }],
+        images: [{ src: f || t, alt: u }],
         visible: E,
         onClose: V,
         rotatable: !0,
@@ -261,31 +231,31 @@ const S = ({
 };
 S.displayName = "ImageViewer.Image";
 const W = ({
-  children: r,
-  images: m,
-  preview: n = !0
+  children: t,
+  images: u,
+  preview: o = !0
 }) => {
-  const [i, a] = c(!1), [w, l] = c(0), d = C((b) => {
-    l(b), a(!0);
-  }, []), f = C(() => {
-    a(!1);
-  }, []), h = B.useMemo(
+  const [a, d] = c(!1), [f, i] = c(0), l = C((b) => {
+    i(b), d(!0);
+  }, []), h = C(() => {
+    d(!1);
+  }, []), p = B.useMemo(
     () => ({
-      handlePreview: d,
-      preview: n
+      handlePreview: l,
+      preview: o
     }),
-    [d, n]
+    [l, o]
   );
   return /* @__PURE__ */ v(F, { children: [
-    /* @__PURE__ */ t(z.Provider, { value: h, children: r }),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ s(z.Provider, { value: p, children: t }),
+    /* @__PURE__ */ s(
       j,
       {
-        images: m,
-        visible: i,
-        onClose: f,
-        activeIndex: w,
-        onIndexChange: l,
+        images: u,
+        visible: a,
+        onClose: h,
+        activeIndex: f,
+        onIndexChange: i,
         rotatable: !0,
         scalable: !0,
         downloadable: !0
@@ -294,14 +264,13 @@ const W = ({
   ] });
 };
 W.displayName = "ImageViewer.Group";
-const z = B.createContext(null);
-Object.assign(j, {
+const z = B.createContext(null), Q = Object.assign(j, {
   Image: S,
   Group: W
 });
 export {
   j as ImageViewer,
   W as ImageViewerGroup,
-  S as ImageViewerImage
+  S as ImageViewerImage,
+  Q as default
 };
-//# sourceMappingURL=ImageViewer.js.map

package/dist/esm/components/ImageViewer/index.js

@@ -0,0 +1,7 @@
+import { ImageViewer as a, ImageViewerGroup as m, ImageViewerImage as g, default as I } from "./ImageViewer.js";
+export {
+  a as ImageViewer,
+  m as ImageViewerGroup,
+  g as ImageViewerImage,
+  I as default
+};

package/dist/esm/components/Input/Input.js

@@ -272,4 +272,3 @@ ne.displayName = "Input";
 export {
   ne as default
 };
-//# sourceMappingURL=Input.js.map

package/dist/esm/components/Input/index.js

@@ -0,0 +1,5 @@
+import { default as e, default as f } from "./Input.js";
+export {
+  e as Input,
+  f as default
+};

package/dist/esm/components/InputOTP/InputOTP.js

@@ -2,99 +2,69 @@ import { jsxs as N, jsx as t } from "react/jsx-runtime";
 import O, { useId as P } from "react";
 import { InputOTP as R, InputOTPGroup as E, InputOTPSlot as G } from "../../packages/ui/src/components/input-otp.js";
 import { Label as L } from "../../packages/ui/src/components/label.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 "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import { cn as m } from "../../packages/ui/src/lib/utils.js";
-import "lucide-react";
-import "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-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 "../../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/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 { cn as o } from "../../packages/ui/src/lib/utils.js";
 import { REGEXP_ONLY_DIGITS as T, REGEXP_ONLY_CHARS as v, REGEXP_ONLY_DIGITS_AND_CHARS as A } from "input-otp";
-const ct = O.forwardRef(
+const C = O.forwardRef(
   ({
-    label: l,
-    inputType: r = "digits",
-    regexPattern: n,
-    length: p,
-    size: c = "normal",
-    state: o = "default",
-    helperText: s,
-    gapSize: i = 4,
-    variant: d = "outlined",
+    label: m,
+    inputType: s = "digits",
+    regexPattern: c,
+    length: e,
+    size: p = "normal",
+    state: r = "default",
+    helperText: a,
+    gapSize: d = 4,
+    variant: l = "outlined",
     className: u,
     rootClassName: f,
     childClassName: x,
     ..._
   }, I) => {
-    const e = P(), h = r === "digits" ? T : r === "chars" ? v : r === "digits-and-chars" ? A : void 0, g = {
+    const n = P(), h = s === "digits" ? T : s === "chars" ? v : s === "digits-and-chars" ? A : void 0, g = {
       default: "ds:text-muted-foreground",
       success: "ds:text-success",
       warning: "ds:text-warning",
       error: "ds:text-error"
     };
-    return /* @__PURE__ */ N("div", { className: m("ds:flex ds:flex-col ds:gap-1.5 ds:relative", f), children: [
-      /* @__PURE__ */ t(L, { htmlFor: e, children: l }),
+    return /* @__PURE__ */ N("div", { className: o("ds:flex ds:flex-col ds:gap-1.5 ds:relative", f), children: [
+      /* @__PURE__ */ t(L, { htmlFor: n, children: m }),
       /* @__PURE__ */ t(
         R,
         {
-          id: e,
-          maxLength: p ?? 4,
-          pattern: n ?? h,
+          id: n,
+          maxLength: e ?? 4,
+          pattern: c ?? h,
           ref: I,
           ..._,
           children: /* @__PURE__ */ t(
             E,
             {
-              className: m(
+              className: o(
                 {
-                  "ds:gap-2 ds:*:data-[slot=input-otp-slot]:rounded-md ds:*:data-[slot=input-otp-slot]:border": d === "outlined" && i > 0
+                  "ds:gap-2 ds:*:data-[slot=input-otp-slot]:rounded-md ds:*:data-[slot=input-otp-slot]:border": l === "outlined" && d > 0
                 },
                 u
               ),
-              style: i > 0 ? { gap: `${i}px` } : void 0,
-              children: Array.from({ length: p ?? 4 }).map((S, a) => /* @__PURE__ */ t(
+              style: d > 0 ? { gap: `${d}px` } : void 0,
+              children: Array.from({ length: e ?? 4 }).map((S, i) => /* @__PURE__ */ t(
                 G,
                 {
-                  index: a,
-                  size: c,
-                  state: o ?? void 0,
-                  variant: d,
+                  index: i,
+                  size: p,
+                  state: r ?? void 0,
+                  variant: l,
                   className: x
                 },
-                a
+                i
               ))
             }
           )
         }
       ),
-      s && /* @__PURE__ */ t("p", { className: m("ds:text-xs", o ? g?.[o] : ""), children: s })
+      a && /* @__PURE__ */ t("p", { className: o("ds:text-xs", r ? g?.[r] : ""), children: a })
     ] });
   }
 );
 export {
-  ct as default
+  C as default
 };
-//# sourceMappingURL=InputOTP.js.map

package/dist/esm/components/InputOTP/index.js

@@ -0,0 +1,5 @@
+import { default as e, default as f } from "./InputOTP.js";
+export {
+  e as InputOTP,
+  f as default
+};