@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Tabs/Tabs.js

@@ -1,99 +1,99 @@
-import { jsxs as x, jsx as i, Fragment as Ne } from "react/jsx-runtime";
+import { jsxs as x, jsx as l, Fragment as Ne } from "react/jsx-runtime";
 import u from "react";
 import { Tabs as ze, TabsContent as Re, TabsList as Le, TabsTrigger as Ee } from "../../packages/ui/src/components/tabs.js";
 import { motion as Z } from "motion/react";
-import { cn as c } from "../../packages/ui/src/lib/utils.js";
+import { cn as a } from "../../packages/ui/src/lib/utils.js";
 import { ScrollArea as K, ScrollBar as ee } from "../ScrollArea/ScrollArea.js";
-import { Popover as te } from "../Popover/index.js";
-import { MoreHorizontal as re } from "lucide-react";
-import { variantClasses as Oe, getColorClasses as We, getListBorderClasses as He, alignmentClasses as oe, positionClasses as se, sizeClasses as Ae, getUnderlinedTriggerClasses as Ve, getEnclosedTriggerClasses as Be, getEnclosedFillTriggerClasses as Ie } from "./classes.js";
-const Me = u.forwardRef((ne, le) => {
+import { Popover as se } from "../Popover/index.js";
+import { MoreHorizontal as te } from "lucide-react";
+import { variantClasses as Oe, getColorClasses as We, getListBorderClasses as He, alignmentClasses as re, positionClasses as oe, sizeClasses as Ae, getUnderlinedTriggerClasses as Ve, getEnclosedTriggerClasses as Be, getEnclosedFillTriggerClasses as Ie } from "./classes.js";
+const Me = u.forwardRef((de, ne) => {
   const {
-    items: d,
+    items: c,
     defaultActiveKey: D,
     activeKey: W,
-    onChange: ie,
+    onChange: le,
     tabPosition: p = "top",
-    size: ae = "md",
+    size: ie = "md",
     alignment: P = "start",
     fullWidth: _ = !1,
-    overflowMode: l = "scroll",
+    overflowMode: n = "scroll",
     variant: e = "solid",
-    color: s = "muted",
-    className: ce,
-    tabListClassName: de,
+    color: o = "muted",
+    className: ae,
+    tabListClassName: ce,
     tabContentClassName: fe,
     tabTriggerClassName: ue
-  } = ne, z = u.useRef([]), E = u.useRef(null), R = u.useRef(null), L = u.useRef(null), [v, Y] = u.useState({
+  } = de, z = u.useRef([]), E = u.useRef(null), R = u.useRef(null), L = u.useRef(null), [v, Y] = u.useState({
     left: 0,
     width: 0,
     top: 0,
     height: 0
-  }), [he, ge] = u.useState(W || D || d[0]?.key), [y, G] = u.useState(!1), [U, be] = u.useState(d.length), [H, A] = u.useState(!1), [pe, $] = u.useState(!1), [me, J] = u.useState(!1), C = W !== void 0 ? W : he, r = p === "left" || p === "right";
+  }), [he, ge] = u.useState(W || D || c[0]?.key), [y, G] = u.useState(!1), [U, be] = u.useState(c.length), [H, A] = u.useState(!1), [pe, $] = u.useState(!1), [me, J] = u.useState(!1), C = W !== void 0 ? W : he, t = p === "left" || p === "right";
   u.useLayoutEffect(() => {
-    if (!l || l === "dropdown") return;
-    const t = () => {
-      const n = R.current, g = E.current;
-      if (!n || !g) return;
-      const m = r ? n.clientHeight : n.clientWidth, S = (r ? g.scrollHeight : g.scrollWidth) > m;
+    if (!n || n === "dropdown") return;
+    const s = () => {
+      const d = R.current, g = E.current;
+      if (!d || !g) return;
+      const m = t ? d.clientHeight : d.clientWidth, S = (t ? g.scrollHeight : g.scrollWidth) > m;
       G(S);
     };
-    t();
-    const o = new ResizeObserver(t);
-    return R.current && o.observe(R.current), E.current && o.observe(E.current), () => {
-      o.disconnect();
+    s();
+    const r = new ResizeObserver(s);
+    return R.current && r.observe(R.current), E.current && r.observe(E.current), () => {
+      r.disconnect();
     };
-  }, [d, l, r]), u.useLayoutEffect(() => {
-    if (l !== "dropdown") return;
-    const t = () => {
-      const n = R.current;
-      if (!n) return;
-      const g = r ? n.clientHeight : n.clientWidth;
+  }, [c, n, t]), u.useLayoutEffect(() => {
+    if (n !== "dropdown") return;
+    const s = () => {
+      const d = R.current;
+      if (!d) return;
+      const g = t ? d.clientHeight : d.clientWidth;
       let m = 0;
       const k = 48, S = 6, f = e === "enclosed-fill" || e === "bordered" || e === "pills" || e === "pill-stroke" || e === "text" || e === "outline" ? 4 : 0;
-      let a = 0;
+      let i = 0;
       for (let h = 0; h < z.current.length; h++) {
         const T = z.current[h];
         if (!T) break;
-        const N = r ? T.offsetHeight : T.offsetWidth, w = h > 0 ? f : 0, O = h < z.current.length - 1;
+        const N = t ? T.offsetHeight : T.offsetWidth, w = h > 0 ? f : 0, O = h < z.current.length - 1;
         if (m + N + w + (O ? k : 0) + S <= g)
-          m += N + w, a++;
+          m += N + w, i++;
         else
           break;
       }
-      const b = a < d.length;
-      G(b), be(Math.max(1, a));
+      const b = i < c.length;
+      G(b), be(Math.max(1, i));
     };
-    t();
-    const o = new ResizeObserver(t);
-    return R.current && o.observe(R.current), z.current.forEach((n) => {
-      n && o.observe(n);
+    s();
+    const r = new ResizeObserver(s);
+    return R.current && r.observe(R.current), z.current.forEach((d) => {
+      d && r.observe(d);
     }), () => {
-      o.disconnect();
+      r.disconnect();
     };
-  }, [d, l, r, e]), u.useLayoutEffect(() => {
-    const t = d.findIndex((g) => g.key === C), o = z.current[t], n = E.current;
-    if (o && n) {
-      const g = n.getBoundingClientRect(), m = o.getBoundingClientRect(), k = m.left - g.left, S = m.top - g.top;
+  }, [c, n, t, e]), u.useLayoutEffect(() => {
+    const s = c.findIndex((g) => g.key === C), r = z.current[s], d = E.current;
+    if (r && d) {
+      const g = d.getBoundingClientRect(), m = r.getBoundingClientRect(), k = m.left - g.left, S = m.top - g.top;
       if (Y({
         left: k,
         width: m.width,
         top: S,
         height: m.height
-      }), l === "fade" && L.current) {
+      }), n === "fade" && L.current) {
         const f = L.current.querySelector(
           "[data-radix-scroll-area-viewport]"
         );
         if (f) {
-          const a = f.getBoundingClientRect(), b = o.getBoundingClientRect(), h = 96;
-          if (r) {
-            const T = f.scrollTop, N = f.scrollHeight, w = a.height, O = b.top - a.top + T, B = b.height;
-            if (t === 0)
+          const i = f.getBoundingClientRect(), b = r.getBoundingClientRect(), h = 96;
+          if (t) {
+            const T = f.scrollTop, N = f.scrollHeight, w = i.height, O = b.top - i.top + T, B = b.height;
+            if (s === 0)
               f.scrollTo({
                 top: 0,
                 behavior: "smooth"
               });
-            else if (t === d.length - 1)
+            else if (s === c.length - 1)
               f.scrollTo({
                 top: N - w,
                 behavior: "smooth"
@@ -109,13 +109,13 @@ const Me = u.forwardRef((ne, le) => {
               });
             }
           } else {
-            const T = f.scrollLeft, N = f.scrollWidth, w = a.width, O = b.left - a.left + T, B = b.width;
-            if (t === 0)
+            const T = f.scrollLeft, N = f.scrollWidth, w = i.width, O = b.left - i.left + T, B = b.width;
+            if (s === 0)
               f.scrollTo({
                 left: 0,
                 behavior: "smooth"
               });
-            else if (t === d.length - 1)
+            else if (s === c.length - 1)
               f.scrollTo({
                 left: N - w,
                 behavior: "smooth"
@@ -134,27 +134,27 @@ const Me = u.forwardRef((ne, le) => {
         }
       }
     }
-  }, [C, d, r, l]), u.useEffect(() => {
-    if (l !== "fade" || !L.current) return;
-    const t = L.current.querySelector(
+  }, [C, c, t, n]), u.useEffect(() => {
+    if (n !== "fade" || !L.current) return;
+    const s = L.current.querySelector(
       "[data-radix-scroll-area-viewport]"
     );
-    if (!t) return;
-    let o = null;
-    const n = () => {
-      o !== null && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
-        if (r) {
-          const a = t.scrollTop, b = t.scrollHeight, h = t.clientHeight;
-          $(a > 5), J(a < b - h - 5);
+    if (!s) return;
+    let r = null;
+    const d = () => {
+      r !== null && cancelAnimationFrame(r), r = requestAnimationFrame(() => {
+        if (t) {
+          const i = s.scrollTop, b = s.scrollHeight, h = s.clientHeight;
+          $(i > 5), J(i < b - h - 5);
         } else {
-          const a = t.scrollLeft, b = t.scrollWidth, h = t.clientWidth;
-          $(a > 5), J(a < b - h - 5);
+          const i = s.scrollLeft, b = s.scrollWidth, h = s.clientWidth;
+          $(i > 5), J(i < b - h - 5);
         }
-        const k = d.findIndex(
-          (a) => a.key === C
+        const k = c.findIndex(
+          (i) => i.key === C
         ), S = z.current[k], f = E.current;
         if (S && f) {
-          const a = f.getBoundingClientRect(), b = S.getBoundingClientRect(), h = b.left - a.left, T = b.top - a.top;
+          const i = f.getBoundingClientRect(), b = S.getBoundingClientRect(), h = b.left - i.left, T = b.top - i.top;
           Y({
             left: h,
             width: b.width,
@@ -162,114 +162,114 @@ const Me = u.forwardRef((ne, le) => {
             height: b.height
           });
         }
-        o = null;
+        r = null;
       });
     };
-    n(), t.addEventListener("scroll", n, {
+    d(), s.addEventListener("scroll", d, {
       passive: !0
     });
-    const g = new ResizeObserver(n);
-    return g.observe(t), () => {
-      o !== null && cancelAnimationFrame(o), t.removeEventListener("scroll", n), g.disconnect();
+    const g = new ResizeObserver(d);
+    return g.observe(s), () => {
+      r !== null && cancelAnimationFrame(r), s.removeEventListener("scroll", d), g.disconnect();
     };
-  }, [l, r, y, d, C]), u.useEffect(() => {
-    if (l !== "scroll" && l !== "fade" || r) return;
-    const t = L.current?.querySelector(
+  }, [n, t, y, c, C]), u.useEffect(() => {
+    if (n !== "scroll" && n !== "fade" || t) return;
+    const s = L.current?.querySelector(
       "[data-radix-scroll-area-viewport]"
     );
-    if (!t) return;
-    const o = (n) => {
-      n.deltaY !== 0 && (n.preventDefault(), t.scrollLeft += n.deltaY * 2);
+    if (!s) return;
+    const r = (d) => {
+      d.deltaY !== 0 && (d.preventDefault(), s.scrollLeft += d.deltaY * 2);
     };
-    return t.addEventListener("wheel", o, { passive: !1 }), () => {
-      t.removeEventListener("wheel", o);
+    return s.addEventListener("wheel", r, { passive: !1 }), () => {
+      s.removeEventListener("wheel", r);
     };
-  }, [l, r]);
-  const I = (t) => {
-    W === void 0 && ge(t), ie?.(t);
-  }, ve = r ? "vertical" : "horizontal", Q = Oe[e], we = Q.list[r ? "vertical" : "horizontal"];
-  let V = Q.trigger[r ? "vertical" : "horizontal"];
+  }, [n, t]);
+  const I = (s) => {
+    W === void 0 && ge(s), le?.(s);
+  }, ve = t ? "vertical" : "horizontal", Q = Oe[e], we = Q.list[t ? "vertical" : "horizontal"];
+  let V = Q.trigger[t ? "vertical" : "horizontal"];
   e === "underlined" ? V = Ve(p) : e === "enclosed" ? V = Be(p) : e === "enclosed-fill" && (V = Ie(p));
-  const xe = We(e, s), ye = He(e, s, p), Te = l === "dropdown" && y ? d.slice(0, U) : d, M = l === "dropdown" && y ? d.slice(U) : l === "fade" && y ? d : [], Ce = l === "dropdown" && y && M.length > 0, X = l === "dropdown" && y && M.some((t) => t.key === C), ke = (t, o = 0) => /* @__PURE__ */ i(Ne, { children: t.map((n, g) => {
-    const m = o + g;
+  const xe = We(e, o), ye = He(e, o, p), Te = n === "dropdown" && y ? c.slice(0, U) : c, M = n === "dropdown" && y ? c.slice(U) : n === "fade" && y ? c : [], Ce = n === "dropdown" && y && M.length > 0, X = n === "dropdown" && y && M.some((s) => s.key === C), ke = (s, r = 0) => /* @__PURE__ */ l(Ne, { children: s.map((d, g) => {
+    const m = r + g;
     return /* @__PURE__ */ x(
       Ee,
       {
         ref: (k) => {
           z.current[m] = k;
         },
-        value: n.key,
-        disabled: n.disabled,
-        className: c(
+        value: d.key,
+        disabled: d.disabled,
+        className: a(
           V,
           // Apply styles based on variant
           {
             // For sliding indicator variants, remove default background
-            "relative z-10 bg-transparent data-[state=active]:bg-transparent": e === "solid" || e === "bordered" || e === "pills",
+            "ds:relative ds:z-10 ds:bg-transparent ds:data-[state=active]:bg-transparent": e === "solid" || e === "bordered" || e === "pills",
             // Apply text color for active state with sliding indicator
-            "data-[state=active]:text-primary-foreground": (e === "bordered" || e === "pills") && s === "primary",
-            "data-[state=active]:text-secondary-foreground": (e === "bordered" || e === "pills") && s === "secondary",
-            "data-[state=active]:text-muted-foreground": (e === "bordered" || e === "pills") && s === "muted",
-            "data-[state=active]:text-accent-foreground": (e === "bordered" || e === "pills") && s === "accent",
-            "data-[state=active]:text-destructive-foreground": (e === "bordered" || e === "pills") && s === "destructive",
-            "data-[state=active]:text-white": (e === "bordered" || e === "pills") && (s === "success" || s === "warning"),
-            "flex-1": _ && !r,
-            "w-full justify-start": r
+            "ds:data-[state=active]:text-primary-foreground": (e === "bordered" || e === "pills") && o === "primary",
+            "ds:data-[state=active]:text-secondary-foreground": (e === "bordered" || e === "pills") && o === "secondary",
+            "ds:data-[state=active]:text-muted-foreground": (e === "bordered" || e === "pills") && o === "muted",
+            "ds:data-[state=active]:text-accent-foreground": (e === "bordered" || e === "pills") && o === "accent",
+            "ds:data-[state=active]:text-destructive-foreground": (e === "bordered" || e === "pills") && o === "destructive",
+            "ds:data-[state=active]:text-white": (e === "bordered" || e === "pills") && (o === "success" || o === "warning"),
+            "ds:flex-1": _ && !t,
+            "ds:w-full ds:justify-start": t
           },
           // For other variants, apply normal color classes
           !(e === "solid" || e === "bordered" || e === "pills") && xe,
-          n.className,
+          d.className,
           ue
         ),
         children: [
-          n.icon && /* @__PURE__ */ i("span", { className: "mr-2 inline-flex items-center", children: n.icon }),
-          n.label
+          d.icon && /* @__PURE__ */ l("span", { className: "ds:mr-2 ds:inline-flex ds:items-center", children: d.icon }),
+          d.label
         ]
       },
-      n.key
+      d.key
     );
   }) }), Se = () => {
-    const t = /* @__PURE__ */ x(
+    const s = /* @__PURE__ */ x(
       Le,
       {
         ref: E,
-        className: c(
-          se[p].list,
-          Ae[ae][r ? "vertical" : "horizontal"],
+        className: a(
+          oe[p].list,
+          Ae[ie][t ? "vertical" : "horizontal"],
           we,
           ye,
-          de,
-          "relative",
+          ce,
+          "ds:relative",
           {
-            "overflow-hidden": l === "fade" && y,
-            "max-w-full": l === "fade",
+            "ds:overflow-hidden": n === "fade" && y,
+            "ds:max-w-full": n === "fade",
             // Limit width for fade mode
             // For overflow modes, allow natural width expansion
-            "w-auto": l === "dropdown" || l === "fade"
+            "ds:w-auto": n === "dropdown" || n === "fade"
           }
         ),
         children: [
           ke(Te),
-          e === "underlined" && v.width > 0 && !X && /* @__PURE__ */ i(
+          e === "underlined" && v.width > 0 && !X && /* @__PURE__ */ l(
             Z.div,
             {
-              className: c("absolute rounded-full z-10", {
+              className: a("ds:absolute ds:rounded-full ds:z-10", {
                 // Horizontal positions (top/bottom)
-                "h-0.5 bottom-0": p === "top",
-                "h-0.5 top-0": p === "bottom",
+                "ds:h-0.5 ds:bottom-0": p === "top",
+                "ds:h-0.5 ds:top-0": p === "bottom",
                 // Vertical positions (left/right)
-                "w-0.5 right-0": p === "left",
-                "w-0.5 left-0": p === "right",
+                "ds:w-0.5 ds:right-0": p === "left",
+                "ds:w-0.5 ds:left-0": p === "right",
                 // Colors
-                "bg-primary": s === "primary",
-                "bg-secondary": s === "secondary",
-                "bg-muted-foreground": s === "muted",
-                "bg-accent": s === "accent",
-                "bg-destructive": s === "destructive",
-                "bg-success": s === "success",
-                "bg-warning": s === "warning"
+                "ds:bg-primary": o === "primary",
+                "ds:bg-secondary": o === "secondary",
+                "ds:bg-muted-foreground": o === "muted",
+                "ds:bg-accent": o === "accent",
+                "ds:bg-destructive": o === "destructive",
+                "ds:bg-success": o === "success",
+                "ds:bg-warning": o === "warning"
               }),
-              animate: r ? {
+              animate: t ? {
                 top: v.top,
                 height: v.height
               } : {
@@ -283,25 +283,25 @@ const Me = u.forwardRef((ne, le) => {
               }
             }
           ),
-          (e === "solid" || e === "bordered" || e === "pills" || e === "pill-stroke") && v.width > 0 && !X && /* @__PURE__ */ i(
+          (e === "solid" || e === "bordered" || e === "pills" || e === "pill-stroke") && v.width > 0 && !X && /* @__PURE__ */ l(
             Z.div,
             {
-              className: c("absolute rounded-md pointer-events-none z-0", {
-                "bg-background shadow-sm": e === "solid",
-                "bg-primary": (e === "bordered" || e === "pills") && s === "primary",
-                "bg-secondary": (e === "bordered" || e === "pills") && s === "secondary",
-                "bg-muted": (e === "bordered" || e === "pills") && s === "muted",
-                "bg-accent": (e === "bordered" || e === "pills") && s === "accent",
-                "bg-destructive": (e === "bordered" || e === "pills") && s === "destructive",
-                "bg-success": (e === "bordered" || e === "pills") && s === "success",
-                "bg-warning": (e === "bordered" || e === "pills") && s === "warning",
-                "border rounded-full border-primary": e === "pill-stroke" && s === "primary",
-                "border rounded-full border-secondary": e === "pill-stroke" && s === "secondary",
-                "rounded-full border-muted": e === "pill-stroke" && s === "muted",
-                "border rounded-full border-accent": e === "pill-stroke" && s === "accent",
-                "border rounded-full border-destructive": e === "pill-stroke" && s === "destructive",
-                "border rounded-full border-success": e === "pill-stroke" && s === "success",
-                "border rounded-full border-warning": e === "pill-stroke" && s === "warning"
+              className: a("ds:absolute ds:rounded-md ds:pointer-events-none ds:z-0", {
+                "ds:bg-background ds:shadow-sm": e === "solid",
+                "ds:bg-primary": (e === "bordered" || e === "pills") && o === "primary",
+                "ds:bg-secondary": (e === "bordered" || e === "pills") && o === "secondary",
+                "ds:bg-muted": (e === "bordered" || e === "pills") && o === "muted",
+                "ds:bg-accent": (e === "bordered" || e === "pills") && o === "accent",
+                "ds:bg-destructive": (e === "bordered" || e === "pills") && o === "destructive",
+                "ds:bg-success": (e === "bordered" || e === "pills") && o === "success",
+                "ds:bg-warning": (e === "bordered" || e === "pills") && o === "warning",
+                "ds:border ds:rounded-full ds:border-primary": e === "pill-stroke" && o === "primary",
+                "ds:border ds:rounded-full ds:border-secondary": e === "pill-stroke" && o === "secondary",
+                "ds:rounded-full ds:border-muted": e === "pill-stroke" && o === "muted",
+                "ds:border ds:rounded-full ds:border-accent": e === "pill-stroke" && o === "accent",
+                "ds:border ds:rounded-full ds:border-destructive": e === "pill-stroke" && o === "destructive",
+                "ds:border ds:rounded-full ds:border-success": e === "pill-stroke" && o === "success",
+                "ds:border ds:rounded-full ds:border-warning": e === "pill-stroke" && o === "warning"
               }),
               animate: {
                 left: v.left,
@@ -319,228 +319,228 @@ const Me = u.forwardRef((ne, le) => {
         ]
       }
     );
-    return l === "scroll" ? /* @__PURE__ */ x(
+    return n === "scroll" ? /* @__PURE__ */ x(
       K,
       {
         ref: L,
-        className: c({
-          "w-full": !r,
-          "pb-2": !r && y,
-          "max-h-[300px] *:data-radix-scroll-area-viewport:h-full *:data-radix-scroll-area-viewport:max-h-[inherit]": r
+        className: a({
+          "ds:w-full": !t,
+          "ds:pb-2": !t && y,
+          "ds:max-h-[300px] ds:*:data-radix-scroll-area-viewport:h-full ds:*:data-radix-scroll-area-viewport:max-h-[inherit]": t
         }),
         children: [
-          t,
-          /* @__PURE__ */ i(ee, { orientation: r ? "vertical" : "horizontal" })
+          s,
+          /* @__PURE__ */ l(ee, { orientation: t ? "vertical" : "horizontal" })
         ]
       }
-    ) : l === "dropdown" && Ce ? /* @__PURE__ */ x(
+    ) : n === "dropdown" && Ce ? /* @__PURE__ */ x(
       "div",
       {
-        className: c("relative flex items-start gap-1", {
-          "flex-col": r
+        className: a("ds:relative ds:flex ds:items-start ds:gap-1", {
+          "ds:flex-col": t
         }),
         children: [
-          t,
-          /* @__PURE__ */ i(
-            te,
+          s,
+          /* @__PURE__ */ l(
+            se,
             {
               open: H,
               onOpenChange: A,
-              trigger: /* @__PURE__ */ i(
+              trigger: /* @__PURE__ */ l(
                 "button",
                 {
-                  className: c(
-                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                    "disabled:pointer-events-none disabled:opacity-50",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "h-9 px-3 shrink-0",
+                  className: a(
+                    "ds:inline-flex ds:items-center ds:justify-center ds:rounded-md ds:text-sm ds:font-medium ds:ring-offset-background ds:transition-colors",
+                    "ds:focus-visible:outline-none ds:focus-visible:ring-2 ds:focus-visible:ring-ring ds:focus-visible:ring-offset-2",
+                    "ds:disabled:pointer-events-none ds:disabled:opacity-50",
+                    "ds:hover:bg-accent ds:hover:text-accent-foreground",
+                    "ds:h-9 ds:px-3 ds:shrink-0",
                     {
-                      "bg-accent text-accent-foreground": H
+                      "ds:bg-accent ds:text-accent-foreground": H
                     }
                   ),
                   "aria-label": "More tabs",
-                  children: /* @__PURE__ */ i(re, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ l(te, { className: "ds:h-4 ds:w-4" })
                 }
               ),
-              content: /* @__PURE__ */ i("div", { className: c("flex flex-col gap-1 p-1"), children: M.map((o) => /* @__PURE__ */ x(
+              content: /* @__PURE__ */ l("div", { className: a("ds:flex ds:flex-col ds:gap-1 ds:p-1"), children: M.map((r) => /* @__PURE__ */ x(
                 "button",
                 {
                   onClick: () => {
-                    I(o.key), A(!1);
+                    I(r.key), A(!1);
                   },
-                  disabled: o.disabled,
-                  className: c(
-                    "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "disabled:pointer-events-none disabled:opacity-50",
-                    "text-left",
+                  disabled: r.disabled,
+                  className: a(
+                    "ds:flex ds:items-center ds:gap-2 ds:rounded-sm ds:px-2 ds:py-1.5 ds:text-sm",
+                    "ds:hover:bg-accent ds:hover:text-accent-foreground",
+                    "ds:disabled:pointer-events-none ds:disabled:opacity-50",
+                    "ds:text-left",
                     {
-                      "bg-accent text-accent-foreground": o.key === C
+                      "ds:bg-accent ds:text-accent-foreground": r.key === C
                     }
                   ),
                   children: [
-                    o.icon && /* @__PURE__ */ i("span", { className: "inline-flex items-center", children: o.icon }),
-                    o.label
+                    r.icon && /* @__PURE__ */ l("span", { className: "ds:inline-flex ds:items-center", children: r.icon }),
+                    r.label
                   ]
                 },
-                o.key
+                r.key
               )) }),
-              side: r ? "right" : "bottom",
+              side: t ? "right" : "bottom",
               align: "end",
-              className: "w-auto min-w-32 max-w-sm max-h-96 overflow-auto p-0"
+              className: "ds:w-auto ds:min-w-32 ds:max-w-sm ds:max-h-96 ds:overflow-auto ds:p-0"
             }
           )
         ]
       }
-    ) : l === "fade" && y ? /* @__PURE__ */ x(
+    ) : n === "fade" && y ? /* @__PURE__ */ x(
       "div",
       {
-        className: c("relative flex items-start gap-1", {
-          "flex-col": r,
-          "flex-1 w-full": !0
+        className: a("ds:relative ds:flex ds:items-start ds:gap-1", {
+          "ds:flex-col": t,
+          "ds:flex-1 ds:w-full": !0
           // Take full width for fade mode
         }),
         children: [
           /* @__PURE__ */ x(
             "div",
             {
-              className: c("relative flex-1 overflow-hidden", {
-                "w-full": !r,
-                "h-full": r
+              className: a("ds:relative ds:flex-1 ds:overflow-hidden", {
+                "ds:w-full": !t,
+                "ds:h-full": t
               }),
               children: [
                 /* @__PURE__ */ x(
                   K,
                   {
                     ref: L,
-                    className: c({
-                      "w-full": !r,
-                      "h-full": r
+                    className: a({
+                      "ds:w-full": !t,
+                      "ds:h-full": t
                     }),
                     children: [
-                      t,
-                      /* @__PURE__ */ i(ee, { orientation: r ? "vertical" : "horizontal" })
+                      s,
+                      /* @__PURE__ */ l(ee, { orientation: t ? "vertical" : "horizontal" })
                     ]
                   }
                 ),
-                pe && /* @__PURE__ */ i(
+                pe && /* @__PURE__ */ l(
                   "div",
                   {
-                    className: c("absolute pointer-events-none z-20", {
-                      "top-0 left-0 bottom-0 w-24 bg-linear-to-r from-background to-transparent": !r,
-                      "left-0 right-0 top-0 h-24 bg-linear-to-b from-background to-transparent": r
+                    className: a("ds:absolute ds:pointer-events-none ds:z-20", {
+                      "ds:top-0 ds:left-0 ds:bottom-0 ds:w-24 ds:bg-linear-to-r ds:from-background ds:to-transparent": !t,
+                      "ds:left-0 ds:right-0 ds:top-0 ds:h-24 ds:bg-linear-to-b ds:from-background ds:to-transparent": t
                     })
                   }
                 ),
-                me && /* @__PURE__ */ i(
+                me && /* @__PURE__ */ l(
                   "div",
                   {
-                    className: c("absolute pointer-events-none z-20", {
-                      "top-0 right-0 bottom-0 w-24 bg-linear-to-l from-background to-transparent": !r,
-                      "left-0 right-0 bottom-0 h-24 bg-linear-to-t from-background to-transparent": r
+                    className: a("ds:absolute ds:pointer-events-none ds:z-20", {
+                      "ds:top-0 ds:right-0 ds:bottom-0 ds:w-24 ds:bg-linear-to-l ds:from-background ds:to-transparent": !t,
+                      "ds:left-0 ds:right-0 ds:bottom-0 ds:h-24 ds:bg-linear-to-t ds:from-background ds:to-transparent": t
                     })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ i(
-            te,
+          /* @__PURE__ */ l(
+            se,
             {
               open: H,
               onOpenChange: A,
-              trigger: /* @__PURE__ */ i(
+              trigger: /* @__PURE__ */ l(
                 "button",
                 {
-                  className: c(
-                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                    "disabled:pointer-events-none disabled:opacity-50",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "h-9 px-3 shrink-0",
+                  className: a(
+                    "ds:inline-flex ds:items-center ds:justify-center ds:rounded-md ds:text-sm ds:font-medium ds:ring-offset-background ds:transition-colors",
+                    "ds:focus-visible:outline-none ds:focus-visible:ring-2 ds:focus-visible:ring-ring ds:focus-visible:ring-offset-2",
+                    "ds:disabled:pointer-events-none ds:disabled:opacity-50",
+                    "ds:hover:bg-accent ds:hover:text-accent-foreground",
+                    "ds:h-9 ds:px-3 ds:shrink-0",
                     {
-                      "bg-accent text-accent-foreground": H
+                      "ds:bg-accent ds:text-accent-foreground": H
                     }
                   ),
                   "aria-label": "More tabs",
-                  children: /* @__PURE__ */ i(re, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ l(te, { className: "ds:h-4 ds:w-4" })
                 }
               ),
               content: (
                 // <div className={cn("flex flex-col gap-1 min-w-[150px]")}>
-                /* @__PURE__ */ i(
+                /* @__PURE__ */ l(
                   K,
                   {
-                    className: "min-w-[150px] max-h-[256px] [&_[data-radix-scroll-area-viewport]]:max-h-[256px]",
+                    className: "ds:min-w-[150px] ds:max-h-[256px] ds:[&_[data-radix-scroll-area-viewport]]:max-h-[256px]",
                     snapType: "y",
-                    children: d.map((o) => /* @__PURE__ */ x(
+                    children: c.map((r) => /* @__PURE__ */ x(
                       "button",
                       {
                         onClick: () => {
-                          I(o.key), A(!1);
+                          I(r.key), A(!1);
                         },
-                        disabled: o.disabled,
-                        className: c(
-                          "snap-start",
-                          "w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
-                          "hover:bg-accent hover:text-accent-foreground",
-                          "disabled:pointer-events-none disabled:opacity-50",
-                          "text-left",
+                        disabled: r.disabled,
+                        className: a(
+                          "ds:snap-start",
+                          "ds:w-full ds:flex ds:items-center ds:gap-2 ds:rounded-sm ds:px-2 ds:py-1.5 ds:text-sm",
+                          "ds:hover:bg-accent ds:hover:text-accent-foreground",
+                          "ds:disabled:pointer-events-none ds:disabled:opacity-50",
+                          "ds:text-left",
                           {
-                            "bg-accent text-accent-foreground": o.key === C
+                            "ds:bg-accent ds:text-accent-foreground": r.key === C
                           }
                         ),
                         children: [
-                          o.icon && /* @__PURE__ */ i("span", { className: "inline-flex items-center", children: o.icon }),
-                          o.label
+                          r.icon && /* @__PURE__ */ l("span", { className: "ds:inline-flex ds:items-center", children: r.icon }),
+                          r.label
                         ]
                       },
-                      o.key
+                      r.key
                     ))
                   }
                 )
               ),
-              side: r ? "right" : "bottom",
+              side: t ? "right" : "bottom",
               align: "end",
-              className: "p-2"
+              className: "ds:p-2"
             }
           )
         ]
       }
-    ) : t;
+    ) : s;
   };
   return /* @__PURE__ */ x(
     ze,
     {
-      ref: le,
+      ref: ne,
       defaultValue: D,
       value: C,
       onValueChange: I,
       orientation: ve,
-      className: c("gap-2", se[p].root, ce),
+      className: a("ds:gap-2", oe[p].root, ae),
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
             ref: R,
-            className: c("flex", {
-              [oe[P].horizontal]: !r,
-              [oe[P].vertical]: r,
-              "w-full": (_ || l === "dropdown" || l === "fade") && !r,
-              "overflow-hidden": l === "dropdown" || l === "fade"
+            className: a("ds:flex", {
+              [re[P].horizontal]: !t,
+              [re[P].vertical]: t,
+              "ds:w-full": (_ || n === "dropdown" || n === "fade") && !t,
+              "ds:overflow-hidden": n === "dropdown" || n === "fade"
             }),
             children: Se()
           }
         ),
-        d.map((t) => /* @__PURE__ */ i(
+        c.map((s) => /* @__PURE__ */ l(
           Re,
           {
-            value: t.key,
-            className: c(fe),
-            children: t.children
+            value: s.key,
+            className: a(fe),
+            children: s.children
           },
-          t.key
+          s.key
         ))
       ]
     }