@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Marquee/Marquee.js

@@ -9,7 +9,7 @@ import { cn as O } 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 * as u from "react";
+import * as d from "react";
 import "lucide-react";
 import "react-day-picker";
 import "../../packages/ui/src/components/popover.js";
@@ -38,62 +38,62 @@ const G = "Marquee", J = "MarqueeContent";
 function L() {
   const a = /* @__PURE__ */ new Set();
   let t = null;
-  const n = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), f = typeof ResizeObserver < "u";
-  let c = !1;
+  const i = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), f = typeof ResizeObserver < "u";
+  let u = !1;
   const b = /* @__PURE__ */ new WeakMap();
   function e() {
-    c || (c = !0, queueMicrotask(() => {
-      c = !1;
-      for (const r of a)
-        r();
+    u || (u = !0, queueMicrotask(() => {
+      u = !1;
+      for (const s of a)
+        s();
     }));
   }
   function q() {
-    t && (t.disconnect(), t = null), n.clear(), o.clear();
+    t && (t.disconnect(), t = null), i.clear(), r.clear();
   }
-  function g(r) {
-    return a.add(r), () => {
-      a.delete(r), a.size === 0 && q();
+  function g(s) {
+    return a.add(s), () => {
+      a.delete(s), a.size === 0 && q();
     };
   }
-  function h(r, i, d) {
-    if (!r || !i) return null;
-    const s = n.get(r), l = n.get(i);
-    if (!s || !l) return null;
-    const m = d === "vertical" ? s.height : s.width, R = d === "vertical" ? l.height : l.width;
-    let v = b.get(r);
-    v || (v = /* @__PURE__ */ new WeakMap(), b.set(r, v));
-    let p = v.get(i);
+  function h(s, o, l) {
+    if (!s || !o) return null;
+    const n = i.get(s), c = i.get(o);
+    if (!n || !c) return null;
+    const m = l === "vertical" ? n.height : n.width, R = l === "vertical" ? c.height : c.width;
+    let v = b.get(s);
+    v || (v = /* @__PURE__ */ new WeakMap(), b.set(s, v));
+    let p = v.get(o);
     p || (p = {
       horizontal: { rootSize: -1, contentSize: -1 },
       vertical: { rootSize: -1, contentSize: -1 }
-    }, v.set(i, p));
-    const w = p[d];
+    }, v.set(o, p));
+    const w = p[l];
     if (w.rootSize === m && w.contentSize === R)
       return w;
     const x = { rootSize: m, contentSize: R };
-    return p[d] = x, x;
+    return p[l] = x, x;
   }
-  function C(r, i) {
-    if (!f || !r || !i) return;
+  function C(s, o) {
+    if (!f || !s || !o) return;
     t || (t = new ResizeObserver((R) => {
       let v = !1;
       for (const p of R) {
-        const w = p.target, { width: x, height: N } = p.contentRect, y = n.get(w);
-        (!y || y.width !== x || y.height !== N) && (n.set(w, { width: x, height: N }), v = !0);
+        const w = p.target, { width: x, height: N } = p.contentRect, y = i.get(w);
+        (!y || y.width !== x || y.height !== N) && (i.set(w, { width: x, height: N }), v = !0);
       }
       v && e();
-    })), o.set(r, (o.get(r) ?? 0) + 1), o.set(i, (o.get(i) ?? 0) + 1), t.observe(r), t.observe(i);
-    const d = r.getBoundingClientRect(), s = i.getBoundingClientRect(), l = { width: d.width, height: d.height }, m = {
-      width: s.width,
-      height: s.height
+    })), r.set(s, (r.get(s) ?? 0) + 1), r.set(o, (r.get(o) ?? 0) + 1), t.observe(s), t.observe(o);
+    const l = s.getBoundingClientRect(), n = o.getBoundingClientRect(), c = { width: l.width, height: l.height }, m = {
+      width: n.width,
+      height: n.height
     };
-    n.set(r, l), n.set(i, m), l.width > 0 && l.height > 0 && m.width > 0 && m.height > 0 && e();
+    i.set(s, c), i.set(o, m), c.width > 0 && c.height > 0 && m.width > 0 && m.height > 0 && e();
   }
-  function M(r, i) {
-    if (!t || !r || !i) return;
-    const d = (o.get(r) ?? 1) - 1, s = (o.get(i) ?? 1) - 1;
-    d <= 0 ? (t.unobserve(r), n.delete(r), o.delete(r)) : o.set(r, d), s <= 0 ? (t.unobserve(i), n.delete(i), o.delete(i)) : o.set(i, s);
+  function M(s, o) {
+    if (!t || !s || !o) return;
+    const l = (r.get(s) ?? 1) - 1, n = (r.get(o) ?? 1) - 1;
+    l <= 0 ? (t.unobserve(s), i.delete(s), r.delete(s)) : r.set(s, l), n <= 0 ? (t.unobserve(o), i.delete(o), r.delete(o)) : r.set(o, n);
   }
   return {
     subscribe: g,
@@ -103,28 +103,28 @@ function L() {
   };
 }
 const P = L();
-function A(a, t, n) {
-  const o = u.useCallback(
-    (c) => P.subscribe(c),
+function A(a, t, i) {
+  const r = d.useCallback(
+    (u) => P.subscribe(u),
     []
-  ), f = u.useCallback(
+  ), f = d.useCallback(
     () => P.getSnapshot(
       a.current,
       t.current,
-      n
+      i
     ),
-    [a, t, n]
+    [a, t, i]
   );
-  return u.useSyncExternalStore(o, f, f);
+  return d.useSyncExternalStore(r, f, f);
 }
-const Q = u.createContext(void 0);
+const Q = d.createContext(void 0);
 function U(a) {
-  const t = u.useContext(Q);
+  const t = d.useContext(Q);
   return a ?? t ?? "ltr";
 }
-const K = u.createContext(null);
+const K = d.createContext(null);
 function X(a) {
-  const t = u.useContext(K);
+  const t = d.useContext(K);
   if (!t)
     throw new Error(`\`${a}\` must be used within \`${G}\``);
   return t;
@@ -132,10 +132,10 @@ function X(a) {
 function Ve(a) {
   const {
     side: t = "left",
-    dir: n,
-    speed: o = 50,
+    dir: i,
+    speed: r = 50,
     delay: f = 0,
-    loopCount: c = 0,
+    loopCount: u = 0,
     gap: b = "1rem",
     asChild: e,
     autoFill: q = !1,
@@ -143,16 +143,16 @@ function Ve(a) {
     pauseOnKeyboard: h = !1,
     reverse: C = !1,
     className: M,
-    style: r,
-    ref: i,
-    ...d
-  } = a, s = t === "top" || t === "bottom" ? "vertical" : "horizontal", l = U(n), m = u.useRef(null), R = u.useRef(null), v = _(i, m), [p, w] = u.useState(!1), x = u.useCallback(
+    style: s,
+    ref: o,
+    ...l
+  } = a, n = t === "top" || t === "bottom" ? "vertical" : "horizontal", c = U(i), m = d.useRef(null), R = d.useRef(null), v = _(o, m), [p, w] = d.useState(!1), x = d.useCallback(
     (S) => {
       h && S.key === " " && (S.preventDefault(), w((D) => !D));
     },
     [h]
-  ), N = A(m, R, s), y = u.useMemo(() => {
-    const S = Math.max(1e-3, o);
+  ), N = A(m, R, n), y = d.useMemo(() => {
+    const S = Math.max(1e-3, r);
     if (!N)
       return (q ? 1e3 : 2e3) / S;
     const { rootSize: D, contentSize: k } = N;
@@ -161,22 +161,22 @@ function Ve(a) {
       return k * H / S;
     } else
       return k < D ? D / S : k / S;
-  }, [N, o, q]), T = u.useMemo(
+  }, [N, r, q]), T = d.useMemo(
     () => ({
       "--marquee-duration": `${y}s`,
       "--marquee-gap": b,
       "--marquee-delay": `${f}s`,
-      "--marquee-loop-count": c === 0 || c === 1 / 0 ? "infinite" : c.toString(),
-      ...r
+      "--marquee-loop-count": u === 0 || u === 1 / 0 ? "infinite" : u.toString(),
+      ...s
     }),
-    [y, b, f, c, r]
-  ), j = u.useMemo(
+    [y, b, f, u, s]
+  ), j = d.useMemo(
     () => ({
       side: t,
-      orientation: s,
-      dir: l,
-      speed: o,
-      loopCount: c,
+      orientation: n,
+      dir: c,
+      speed: r,
+      loopCount: u,
       contentRef: R,
       rootRef: m,
       autoFill: q,
@@ -187,10 +187,10 @@ function Ve(a) {
     }),
     [
       t,
-      s,
-      l,
-      o,
+      n,
       c,
+      r,
+      u,
       q,
       p,
       g,
@@ -198,24 +198,24 @@ function Ve(a) {
       C
     ]
   ), B = e ? V : "div";
-  return /* @__PURE__ */ z(K.Provider, { value: j, children: /* @__PURE__ */ z("div", { "data-slot": "marquee-wrapper", className: "grid", children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ z(K.Provider, { value: j, children: /* @__PURE__ */ z("div", { "data-slot": "marquee-wrapper", className: "ds:grid", children: /* @__PURE__ */ z(
     B,
     {
       role: "marquee",
       "aria-live": "off",
-      "data-orientation": s,
+      "data-orientation": n,
       "data-slot": "marquee",
-      dir: l,
+      dir: c,
       tabIndex: h ? 0 : void 0,
-      ...d,
+      ...l,
       ref: v,
       className: O(
-        "relative flex overflow-hidden motion-reduce:animate-none",
-        s === "vertical" && "h-full flex-col",
-        s === "horizontal" && "w-full",
-        p && "[&_*]:[animation-play-state:paused]",
-        g && "group",
-        h && "rounded-md focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "ds:relative ds:flex ds:overflow-hidden ds:motion-reduce:animate-none",
+        n === "vertical" && "ds:h-full ds:flex-col",
+        n === "horizontal" && "ds:w-full",
+        p && "ds:[&_*]:[animation-play-state:paused]",
+        g && "ds:group",
+        h && "ds:rounded-md ds:focus-visible:border-ring ds:focus-visible:outline-none ds:focus-visible:ring-[3px] ds:focus-visible:ring-ring/50",
         M
       ),
       style: T,
@@ -224,25 +224,25 @@ function Ve(a) {
   ) }) });
 }
 const F = $(
-  "flex min-w-full shrink-0 gap-(--marquee-gap)",
+  "ds:flex ds:min-w-full ds:shrink-0 ds:gap-(--marquee-gap)",
   {
     variants: {
       side: {
-        left: "animate-marquee-left",
-        right: "animate-marquee-right",
-        top: "min-h-full min-w-auto animate-marquee-up flex-col",
-        bottom: "min-h-full min-w-auto animate-marquee-down flex-col"
+        left: "ds:animate-marquee-left",
+        right: "ds:animate-marquee-right",
+        top: "ds:min-h-full ds:min-w-auto ds:animate-marquee-up ds:flex-col",
+        bottom: "ds:min-h-full ds:min-w-auto ds:animate-marquee-down ds:flex-col"
       },
       dir: {
         ltr: "",
         rtl: ""
       },
       pauseOnHover: {
-        true: "group-hover:[animation-play-state:paused]",
+        true: "ds:group-hover:[animation-play-state:paused]",
         false: ""
       },
       reverse: {
-        true: "[animation-direction:reverse]",
+        true: "ds:[animation-direction:reverse]",
         false: ""
       }
     },
@@ -250,12 +250,12 @@ const F = $(
       {
         side: "left",
         dir: "rtl",
-        className: "animate-marquee-left-rtl"
+        className: "ds:animate-marquee-left-rtl"
       },
       {
         side: "right",
         dir: "rtl",
-        className: "animate-marquee-right-rtl"
+        className: "ds:animate-marquee-right-rtl"
       }
     ],
     defaultVariants: {
@@ -269,17 +269,17 @@ const F = $(
 function He(a) {
   const {
     className: t,
-    asChild: n,
-    ref: o,
+    asChild: i,
+    ref: r,
     children: f,
-    style: c,
+    style: u,
     ...b
-  } = a, e = X(J), q = _(o, e.contentRef), g = e.orientation === "vertical", h = e.dir === "rtl", C = A(
+  } = a, e = X(J), q = _(r, e.contentRef), g = e.orientation === "vertical", h = e.dir === "rtl", C = A(
     e.rootRef,
     e.contentRef,
     e.orientation
   );
-  u.useEffect(() => {
+  d.useEffect(() => {
     if (e.rootRef.current && e.contentRef.current)
       return P.observe(
         e.rootRef.current,
@@ -291,31 +291,31 @@ function He(a) {
         );
       };
   }, [e.rootRef, e.contentRef]);
-  const M = u.useMemo(() => {
+  const M = d.useMemo(() => {
     if (!e.autoFill || !C) return 1;
-    const { rootSize: s, contentSize: l } = C;
-    return l === 0 ? 1 : l < s ? Math.ceil(s / l) : 1;
-  }, [e.autoFill, C]), r = u.useCallback(
-    (s) => Array.from({ length: Math.max(0, s) }).map((l, m) => /* @__PURE__ */ z(u.Fragment, { children: f }, m)),
+    const { rootSize: n, contentSize: c } = C;
+    return c === 0 ? 1 : c < n ? Math.ceil(n / c) : 1;
+  }, [e.autoFill, C]), s = d.useCallback(
+    (n) => Array.from({ length: Math.max(0, n) }).map((c, m) => /* @__PURE__ */ z(d.Fragment, { children: f }, m)),
     [f]
-  ), i = u.useMemo(
+  ), o = d.useMemo(
     () => ({
-      ...c,
+      ...u,
       animationDuration: "var(--marquee-duration)",
       animationDelay: "var(--marquee-delay)",
       animationIterationCount: "var(--marquee-loop-count)",
       animationDirection: e.reverse ? "reverse" : "normal"
     }),
-    [c, e.reverse]
-  ), d = n ? V : "div";
+    [u, e.reverse]
+  ), l = i ? V : "div";
   return /* @__PURE__ */ I(W, { children: [
     /* @__PURE__ */ I(
-      d,
+      l,
       {
         "data-orientation": e.orientation,
         "data-slot": "marquee-content",
         ...b,
-        style: i,
+        style: o,
         className: O(
           F({
             side: e.side,
@@ -324,8 +324,8 @@ function He(a) {
             reverse: e.reverse,
             className: t
           }),
-          g && "flex-col",
-          g ? "mb-(--marquee-gap)" : h ? "ml-(--marquee-gap)" : "mr-(--marquee-gap)"
+          g && "ds:flex-col",
+          g ? "ds:mb-(--marquee-gap)" : h ? "ds:ml-(--marquee-gap)" : "ds:mr-(--marquee-gap)"
         ),
         children: [
           /* @__PURE__ */ z(
@@ -333,23 +333,23 @@ function He(a) {
             {
               ref: q,
               className: O(
-                "flex shrink-0 gap-(--marquee-gap)",
-                g && "flex-col"
+                "ds:flex ds:shrink-0 ds:gap-(--marquee-gap)",
+                g && "ds:flex-col"
               ),
               children: f
             }
           ),
-          r(M - 1)
+          s(M - 1)
         ]
       }
     ),
     /* @__PURE__ */ z(
-      d,
+      l,
       {
         role: "presentation",
         "aria-hidden": "true",
         ...b,
-        style: i,
+        style: o,
         className: O(
           F({
             side: e.side,
@@ -358,31 +358,31 @@ function He(a) {
             reverse: e.reverse,
             className: t
           }),
-          g && "flex-col"
+          g && "ds:flex-col"
         ),
-        children: r(M)
+        children: s(M)
       }
     )
   ] });
 }
 function Ie(a) {
-  const { className: t, asChild: n, ...o } = a;
+  const { className: t, asChild: i, ...r } = a;
   return /* @__PURE__ */ z(
-    n ? V : "div",
+    i ? V : "div",
     {
       "data-slot": "marquee-item",
-      ...o,
-      className: O("shrink-0", t)
+      ...r,
+      className: O("ds:shrink-0", t)
     }
   );
 }
-const Y = $("pointer-events-none absolute z-10", {
+const Y = $("ds:pointer-events-none ds:absolute ds:z-10", {
   variants: {
     side: {
-      left: "top-0 left-0 h-full bg-gradient-to-r from-background to-transparent",
-      right: "top-0 right-0 h-full bg-gradient-to-l from-background to-transparent",
-      top: "top-0 left-0 w-full bg-gradient-to-b from-background to-transparent",
-      bottom: "bottom-0 left-0 w-full bg-gradient-to-t from-background to-transparent"
+      left: "ds:top-0 ds:left-0 ds:h-full ds:bg-gradient-to-r ds:from-background ds:to-transparent",
+      right: "ds:top-0 ds:right-0 ds:h-full ds:bg-gradient-to-l ds:from-background ds:to-transparent",
+      top: "ds:top-0 ds:left-0 ds:w-full ds:bg-gradient-to-b ds:from-background ds:to-transparent",
+      bottom: "ds:bottom-0 ds:left-0 ds:w-full ds:bg-gradient-to-t ds:from-background ds:to-transparent"
     },
     size: {
       default: "",
@@ -394,32 +394,32 @@ const Y = $("pointer-events-none absolute z-10", {
     {
       side: ["left", "right"],
       size: "default",
-      className: "w-1/4"
+      className: "ds:w-1/4"
     },
     {
       side: ["left", "right"],
       size: "sm",
-      className: "w-1/6"
+      className: "ds:w-1/6"
     },
     {
       side: ["left", "right"],
       size: "lg",
-      className: "w-1/3"
+      className: "ds:w-1/3"
     },
     {
       side: ["top", "bottom"],
       size: "default",
-      className: "h-1/4"
+      className: "ds:h-1/4"
     },
     {
       side: ["top", "bottom"],
       size: "sm",
-      className: "h-1/6"
+      className: "ds:h-1/6"
     },
     {
       side: ["top", "bottom"],
       size: "lg",
-      className: "h-1/3"
+      className: "ds:h-1/3"
     }
   ],
   defaultVariants: {
@@ -427,14 +427,14 @@ const Y = $("pointer-events-none absolute z-10", {
   }
 });
 function Fe(a) {
-  const { side: t, size: n, className: o, asChild: f, ...c } = a;
+  const { side: t, size: i, className: r, asChild: f, ...u } = a;
   return /* @__PURE__ */ z(
     f ? V : "div",
     {
-      "data-size": n,
+      "data-size": i,
       "data-slot": "marquee-edge",
-      ...c,
-      className: O(Y({ side: t, size: n, className: o }))
+      ...u,
+      className: O(Y({ side: t, size: i, className: r }))
     }
   );
 }