@sth87/shadcn-design-system 0.0.36 → 0.1.1

package/dist/esm/components/Slider/Slider.js

@@ -1,138 +1,138 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
 import h, { useMemo as m } from "react";
 import * as p from "@radix-ui/react-slider";
-import { cn as e } from "../../packages/ui/src/lib/utils.js";
+import { cn as a } from "../../packages/ui/src/lib/utils.js";
 import { useMotionValue as Q, useSpring as U, motion as rt } from "motion/react";
 import W from "@number-flow/react";
-import at from "../Badge/Badge.js";
+import st from "../Badge/Badge.js";
 const X = {
   primary: {
-    range: "bg-primary",
-    thumb: "border-primary/50",
-    labelBg: "bg-primary",
-    labelText: "text-primary-foreground"
+    range: "ds:bg-primary",
+    thumb: "ds:border-primary/50",
+    labelBg: "ds:bg-primary",
+    labelText: "ds:text-primary-foreground"
   },
   secondary: {
-    range: "bg-secondary",
-    thumb: "border-secondary/50",
-    labelBg: "bg-secondary",
-    labelText: "text-secondary-foreground"
+    range: "ds:bg-secondary",
+    thumb: "ds:border-secondary/50",
+    labelBg: "ds:bg-secondary",
+    labelText: "ds:text-secondary-foreground"
   },
   success: {
-    range: "bg-success",
-    thumb: "border-success/50",
-    labelBg: "bg-success",
-    labelText: "text-success-foreground"
+    range: "ds:bg-success",
+    thumb: "ds:border-success/50",
+    labelBg: "ds:bg-success",
+    labelText: "ds:text-success-foreground"
   },
   warning: {
-    range: "bg-warning",
-    thumb: "border-warning/50",
-    labelBg: "bg-warning",
-    labelText: "text-warning-foreground"
+    range: "ds:bg-warning",
+    thumb: "ds:border-warning/50",
+    labelBg: "ds:bg-warning",
+    labelText: "ds:text-warning-foreground"
   },
   error: {
-    range: "bg-error",
-    thumb: "border-error/50",
-    labelBg: "bg-error",
-    labelText: "text-error-foreground"
+    range: "ds:bg-error",
+    thumb: "ds:border-error/50",
+    labelBg: "ds:bg-error",
+    labelText: "ds:text-error-foreground"
   },
   glass: {
-    range: "bg-white/30 backdrop-blur-sm",
-    thumb: "border-white/30 backdrop-blur-sm",
-    labelBg: "bg-white/15",
-    labelText: "text-foreground"
+    range: "ds:bg-white/30 backdrop-blur-sm",
+    thumb: "ds:border-white/30 backdrop-blur-sm",
+    labelBg: "ds:bg-white/15",
+    labelText: "ds:text-foreground"
   },
   muted: {
-    range: "bg-muted-foreground",
-    thumb: "border-muted-foreground/50",
-    labelBg: "bg-muted",
-    labelText: "text-muted-foreground"
+    range: "ds:bg-muted-foreground",
+    thumb: "ds:border-muted-foreground/50",
+    labelBg: "ds:bg-muted",
+    labelText: "ds:text-muted-foreground"
   },
   accent: {
-    range: "bg-accent",
-    thumb: "border-accent/50",
-    labelBg: "bg-accent",
-    labelText: "text-accent-foreground"
+    range: "ds:bg-accent",
+    thumb: "ds:border-accent/50",
+    labelBg: "ds:bg-accent",
+    labelText: "ds:text-accent-foreground"
   }
-}, et = {
+}, at = {
   sm: {
-    track: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
-    thumb: "size-3"
+    track: "ds:data-[orientation=horizontal]:h-1 ds:data-[orientation=vertical]:w-1",
+    thumb: "ds:size-3"
   },
   md: {
-    track: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
-    thumb: "size-4"
+    track: "ds:data-[orientation=horizontal]:h-1.5 ds:data-[orientation=vertical]:w-1.5",
+    thumb: "ds:size-4"
   },
   lg: {
-    track: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
-    thumb: "size-5"
+    track: "ds:data-[orientation=horizontal]:h-2 ds:data-[orientation=vertical]:w-2",
+    thumb: "ds:size-5"
   }
-}, Y = (l, t) => l === "horizontal" ? t === "bottom" ? "bottom" : t === "left" ? "left" : t === "right" ? "right" : "top" : t === "right" ? "right" : t === "top" ? "top" : t === "bottom" ? "bottom" : "left", V = (l, t) => {
-  const a = t === "top" ? "t" : t === "bottom" ? "b" : t === "left" ? "l" : "r";
+}, Y = (i, t) => i === "horizontal" ? t === "bottom" ? "bottom" : t === "left" ? "left" : t === "right" ? "right" : "top" : t === "right" ? "right" : t === "top" ? "top" : t === "bottom" ? "bottom" : "left", V = (i, t) => {
+  const s = t === "top" ? "t" : t === "bottom" ? "b" : t === "left" ? "l" : "r";
   return {
-    primary: `border-${a}-primary`,
-    secondary: `border-${a}-secondary`,
-    success: `border-${a}-success`,
-    warning: `border-${a}-warning`,
-    error: `border-${a}-error`,
-    glass: `border-${a}-white/15`,
-    muted: `border-${a}-muted`,
-    accent: `border-${a}-accent`
-  }[l];
-}, ot = (l, t) => ({
+    primary: `ds:border-${s}-primary`,
+    secondary: `ds:border-${s}-secondary`,
+    success: `ds:border-${s}-success`,
+    warning: `ds:border-${s}-warning`,
+    error: `ds:border-${s}-error`,
+    glass: `ds:border-${s}-white/15`,
+    muted: `ds:border-${s}-muted`,
+    accent: `ds:border-${s}-accent`
+  }[i];
+}, et = (i, t) => ({
   "horizontal-top": {
-    badge: "left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2",
-    arrow: "top-full left-1/2 -translate-x-1/2 border-t-[6px] border-l-[6px] border-r-[6px] border-b-0 border-l-transparent border-r-transparent"
+    badge: "ds:left-1/2 ds:-translate-x-1/2 ds:bottom-full ds:-translate-y-1/2",
+    arrow: "ds:top-full left-1/2 ds:-translate-x-1/2 ds:border-t-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-b-0 ds:border-l-transparent ds:border-r-transparent"
   },
   "horizontal-bottom": {
-    badge: "left-1/2 -translate-x-1/2 top-full translate-y-1/2",
-    arrow: "bottom-full left-1/2 -translate-x-1/2 border-b-[6px] border-l-[6px] border-r-[6px] border-t-0 border-l-transparent border-r-transparent"
+    badge: "ds:left-1/2 ds:-translate-x-1/2 ds:top-full ds:translate-y-1/2",
+    arrow: "ds:bottom-full left-1/2 ds:-translate-x-1/2 ds:border-b-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-t-0 ds:border-l-transparent ds:border-r-transparent"
   },
   "horizontal-left": {
-    badge: "top-1/2 -translate-y-1/2 right-full -translate-x-1/2",
-    arrow: "left-full top-1/2 -translate-y-1/2 border-l-[6px] border-t-[6px] border-b-[6px] border-r-0 border-t-transparent border-b-transparent"
+    badge: "ds:top-1/2 ds:-translate-y-1/2 ds:right-full ds:-translate-x-1/2",
+    arrow: "ds:left-full ds:top-1/2 ds:-translate-y-1/2 ds:border-l-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-r-0 ds:border-t-transparent ds:border-b-transparent"
   },
   "horizontal-right": {
-    badge: "top-1/2 -translate-y-1/2 left-full translate-x-1/2",
-    arrow: "right-full top-1/2 -translate-y-1/2 border-r-[6px] border-t-[6px] border-b-[6px] border-l-0 border-t-transparent border-b-transparent"
+    badge: "ds:top-1/2 ds:-translate-y-1/2 ds:left-full ds:translate-x-1/2",
+    arrow: "ds:right-full ds:top-1/2 ds:-translate-y-1/2 ds:border-r-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-l-0 ds:border-t-transparent ds:border-b-transparent"
   },
   "vertical-left": {
-    badge: "top-1/2 -translate-y-1/2 right-full -translate-x-1/2",
-    arrow: "left-full top-1/2 -translate-y-1/2 border-l-[6px] border-t-[6px] border-b-[6px] border-r-0 border-t-transparent border-b-transparent"
+    badge: "ds:top-1/2 ds:-translate-y-1/2 ds:right-full ds:-translate-x-1/2",
+    arrow: "ds:left-full ds:top-1/2 ds:-translate-y-1/2 ds:border-l-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-r-0 ds:border-t-transparent ds:border-b-transparent"
   },
   "vertical-right": {
-    badge: "top-1/2 -translate-y-1/2 left-full translate-x-1/2",
-    arrow: "right-full top-1/2 -translate-y-1/2 border-r-[6px] border-t-[6px] border-b-[6px] border-l-0 border-t-transparent border-b-transparent"
+    badge: "ds:top-1/2 ds:-translate-y-1/2 ds:left-full ds:translate-x-1/2",
+    arrow: "ds:right-full ds:top-1/2 ds:-translate-y-1/2 ds:border-r-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-l-0 ds:border-t-transparent ds:border-b-transparent"
   },
   "vertical-top": {
-    badge: "left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2",
-    arrow: "top-full left-1/2 -translate-x-1/2 border-t-[6px] border-l-[6px] border-r-[6px] border-b-0 border-l-transparent border-r-transparent"
+    badge: "ds:left-1/2 ds:-translate-x-1/2 ds:bottom-full ds:-translate-y-1/2",
+    arrow: "ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:border-t-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-b-0 ds:border-l-transparent ds:border-r-transparent"
   },
   "vertical-bottom": {
-    badge: "left-1/2 -translate-x-1/2 top-full translate-y-1/2",
-    arrow: "bottom-full left-1/2 -translate-x-1/2 border-b-[6px] border-l-[6px] border-r-[6px] border-t-0 border-l-transparent border-r-transparent"
+    badge: "ds:left-1/2 ds:-translate-x-1/2 ds:top-full ds:translate-y-1/2",
+    arrow: "ds:bottom-full ds:left-1/2 ds:-translate-x-1/2 ds:border-b-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-t-0 ds:border-l-transparent ds:border-r-transparent"
   }
-})[`${l}-${t}`], nt = (l, t) => ({
-  "horizontal-top": "data-[orientation=horizontal]:bottom-full data-[orientation=horizontal]:left-1/2 data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2",
-  "horizontal-bottom": "data-[orientation=horizontal]:top-full data-[orientation=horizontal]:left-1/2 data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:translate-y-1/2",
-  "horizontal-left": "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:right-full data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=horizontal]:-translate-x-1/2",
-  "horizontal-right": "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-full data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=horizontal]:translate-x-1/2",
-  "vertical-left": "data-[orientation=vertical]:right-full data-[orientation=vertical]:top-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2",
-  "vertical-right": "data-[orientation=vertical]:left-full data-[orientation=vertical]:top-1/2 data-[orientation=vertical]:translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2",
-  "vertical-top": "data-[orientation=vertical]:bottom-full data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2",
-  "vertical-bottom": "data-[orientation=vertical]:top-full data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2"
-})[`${l}-${t}`], it = h.forwardRef(
+})[`${i}-${t}`], dt = (i, t) => ({
+  "horizontal-top": "ds:data-[orientation=horizontal]:bottom-full ds:data-[orientation=horizontal]:left-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2 ds:data-[orientation=horizontal]:-translate-y-1/2",
+  "horizontal-bottom": "ds:data-[orientation=horizontal]:top-full ds:data-[orientation=horizontal]:left-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2 ds:data-[orientation=horizontal]:translate-y-1/2",
+  "horizontal-left": "ds:data-[orientation=horizontal]:top-1/2 ds:data-[orientation=horizontal]:right-full ds:data-[orientation=horizontal]:-translate-y-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2",
+  "horizontal-right": "ds:data-[orientation=horizontal]:top-1/2 ds:data-[orientation=horizontal]:left-full ds:data-[orientation=horizontal]:-translate-y-1/2 ds:data-[orientation=horizontal]:translate-x-1/2",
+  "vertical-left": "ds:data-[orientation=vertical]:right-full ds:data-[orientation=vertical]:top-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2",
+  "vertical-right": "ds:data-[orientation=vertical]:left-full ds:data-[orientation=vertical]:top-1/2 ds:data-[orientation=vertical]:translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2",
+  "vertical-top": "ds:data-[orientation=vertical]:bottom-full ds:data-[orientation=vertical]:left-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2",
+  "vertical-bottom": "ds:data-[orientation=vertical]:top-full ds:data-[orientation=vertical]:left-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:translate-y-1/2"
+})[`${i}-${t}`], ot = h.forwardRef(
   ({
-    className: l,
+    className: i,
     color: t = "primary",
-    size: a = "md",
+    size: s = "md",
     showLabel: c = !1,
     labelArrow: M = !1,
     labelAnimation: y = "none",
-    labelFormatter: I = (s) => `${s}`,
+    labelFormatter: I = (n) => `${n}`,
     labelPosition: b = "top",
-    labelColor: n,
-    labelTextColor: i,
+    labelColor: d,
+    labelTextColor: o,
     labelArrowColor: R,
     sliderColor: _,
     thumbBorderColor: A,
@@ -142,7 +142,7 @@ const X = {
     max: $ = 100,
     ...O
   }, j) => {
-    const s = h.useMemo(
+    const n = h.useMemo(
       () => Array.isArray(f) ? f : Array.isArray(u) ? u : [z, $],
       [f, u, z, $]
     ), [F, G] = h.useState(!1);
@@ -153,10 +153,10 @@ const X = {
         "[Slider] defaultValue prop must be an array of numbers, e.g., [50] or [25, 75]"
       );
     }, [f, u]);
-    const d = O.orientation || "horizontal", H = Q(0), D = Q(0), P = h.useRef(0), Z = { stiffness: 150, damping: 15, mass: 1 }, v = U(0, Z), x = U(0, Z);
+    const l = O.orientation || "horizontal", H = Q(0), D = Q(0), P = h.useRef(0), Z = { stiffness: 150, damping: 15, mass: 1 }, v = U(0, Z), x = U(0, Z);
     h.useEffect(() => {
-      if (y === "spec" && s.length > 0) {
-        const r = s[0], g = r - P.current, w = 5, E = Math.max(
+      if (y === "spec" && n.length > 0) {
+        const r = n[0], g = r - P.current, w = 5, E = Math.max(
           -w,
           Math.min(w, g)
         );
@@ -167,7 +167,7 @@ const X = {
         }, 100), P.current = r;
       }
     }, [
-      s,
+      n,
       y,
       D,
       H,
@@ -177,41 +177,41 @@ const X = {
     const k = m(() => {
       if (_ || A)
         return {
-          range: _ || "bg-primary",
-          thumb: A || "border-primary/50"
+          range: _ || "ds:bg-primary",
+          thumb: A || "ds:border-primary/50"
         };
       const r = X[t];
       return {
         range: r.range,
         thumb: r.thumb
       };
-    }, [t, _, A]), N = m(() => et[a], [a]), q = m(() => {
-      if (n || i)
-        return e(n, i);
-      const r = X[t], g = Y(d, b), w = V(t, g);
-      return t === "glass" ? `${r.labelBg} ${r.labelText} backdrop-blur-sm shadow-lg [&>div.arrow]:${w}` : `${r.labelBg} ${r.labelText} [&>div.arrow]:${w}`;
-    }, [t, b, d, n, i]), T = m(() => {
+    }, [t, _, A]), N = m(() => at[s], [s]), q = m(() => {
+      if (d || o)
+        return a(d, o);
+      const r = X[t], g = Y(l, b), w = V(t, g);
+      return t === "glass" ? `${r.labelBg} ${r.labelText} ds:backdrop-blur-sm ds:shadow-lg ds:[&>div.arrow]:${w}` : `${r.labelBg} ${r.labelText} ds:[&>div.arrow]:${w}`;
+    }, [t, b, l, d, o]), T = m(() => {
       if (R) return R;
-      const r = Y(d, b);
+      const r = Y(l, b);
       return V(t, r);
-    }, [t, b, d, R]), J = m(() => c === "hover" ? "scale-0 group-hover:scale-100" : c === "always" ? "scale-100" : "hidden", [c]), S = m(
-      () => ot(d, b),
-      [b, d]
+    }, [t, b, l, R]), J = m(() => c === "hover" ? "ds:scale-0 ds:group-hover:scale-100" : c === "always" ? "ds:scale-100" : "ds:hidden", [c]), S = m(
+      () => et(l, b),
+      [b, l]
     ), K = m(
-      () => nt(d, b),
-      [b, d]
+      () => dt(l, b),
+      [b, l]
     ), L = h.useCallback(
       (r) => y === "spec" ? /* @__PURE__ */ B(
         rt.div,
         {
-          className: e(
-            "pointer-events-none absolute z-50 flex flex-col items-center justify-center rounded-md px-3 py-1.5 text-xs shadow-xl",
+          className: a(
+            "ds:pointer-events-none ds:absolute ds:z-50 ds:flex ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:shadow-xl",
             K,
-            n && n,
-            i && i,
-            !n && !i && q
+            d && d,
+            o && o,
+            !d && !o && q
           ),
-          "data-orientation": d,
+          "data-orientation": l,
           initial: c === "always" ? { opacity: 1, y: -5, scale: 1 } : { opacity: 0, y: 20, scale: 0 },
           animate: F && c === "hover" || c === "always" ? {
             opacity: 1,
@@ -233,19 +233,19 @@ const X = {
             whiteSpace: "nowrap"
           },
           children: [
-            /* @__PURE__ */ o("div", { className: "relative z-1", children: /* @__PURE__ */ o(
+            /* @__PURE__ */ e("div", { className: "ds:relative ds:z-1", children: /* @__PURE__ */ e(
               W,
               {
-                value: s[r],
+                value: n[r],
                 format: { notation: "standard" },
                 isolate: !0
               }
             ) }),
-            M && /* @__PURE__ */ o(
+            M && /* @__PURE__ */ e(
               "div",
               {
-                className: e(
-                  "arrow absolute border-transparent",
+                className: a(
+                  "ds:arrow ds:absolute ds:border-transparent",
                   S.arrow,
                   T
                 )
@@ -254,33 +254,33 @@ const X = {
           ]
         }
       ) : /* @__PURE__ */ B(
-        at,
+        st,
         {
           size: "lg",
-          color: n || i || t === "glass" ? "custom" : t === "muted" ? "muted" : t === "accent" ? "accent" : t,
+          color: d || o || t === "glass" ? "custom" : t === "muted" ? "muted" : t === "accent" ? "accent" : t,
           variant: "solid",
-          className: e(
-            "transition-transform absolute px-3 rounded-md",
+          className: a(
+            "ds:transition-transform ds:absolute ds:px-3 ds:rounded-md",
             S.badge,
             J,
-            n && n,
-            i && i,
-            !n && !i && t === "glass" && "bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>div.arrow]:border-t-white/15"
+            d && d,
+            o && o,
+            !d && !o && t === "glass" && "ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>div.arrow]:border-t-white/15"
           ),
           children: [
-            y === "number-flow" ? /* @__PURE__ */ o(
+            y === "number-flow" ? /* @__PURE__ */ e(
               W,
               {
-                value: s[r],
+                value: n[r],
                 format: { notation: "standard" },
                 isolate: !0
               }
-            ) : /* @__PURE__ */ o("span", { children: I(s[r]) }),
-            M && /* @__PURE__ */ o(
+            ) : /* @__PURE__ */ e("span", { children: I(n[r]) }),
+            M && /* @__PURE__ */ e(
               "div",
               {
-                className: e(
-                  "arrow absolute border-transparent",
+                className: a(
+                  "ds:arrow ds:absolute ds:border-transparent",
                   S.arrow,
                   T
                 )
@@ -292,15 +292,15 @@ const X = {
       [
         y,
         K,
-        n,
-        i,
-        q,
         d,
+        o,
+        q,
+        l,
         c,
         v,
         x,
         I,
-        s,
+        n,
         t,
         S,
         J,
@@ -318,38 +318,38 @@ const X = {
         value: f,
         min: z,
         max: $,
-        className: e(
-          "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-          l
+        className: a(
+          "ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col",
+          i
         ),
         ...O,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ e(
             p.Track,
             {
               "data-slot": "slider-track",
-              className: e(
-                "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+              className: a(
+                "ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full",
                 N.track
               ),
-              children: /* @__PURE__ */ o(
+              children: /* @__PURE__ */ e(
                 p.Range,
                 {
                   "data-slot": "slider-range",
-                  className: e(
-                    "absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                  className: a(
+                    "ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full",
                     k.range
                   )
                 }
               )
             }
           ),
-          Array.from({ length: s.length }, (r, g) => /* @__PURE__ */ o(
+          Array.from({ length: n.length }, (r, g) => /* @__PURE__ */ e(
             p.Thumb,
             {
               "data-slot": "slider-thumb",
-              className: e(
-                "group block shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 ring-ring/50",
+              className: a(
+                "ds:group ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50",
                 k.thumb,
                 N.thumb
               ),
@@ -370,38 +370,38 @@ const X = {
         value: f,
         min: z,
         max: $,
-        className: e(
-          "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-          l
+        className: a(
+          "ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col",
+          i
         ),
         ...O,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ e(
             p.Track,
             {
               "data-slot": "slider-track",
-              className: e(
-                "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+              className: a(
+                "ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full",
                 N.track
               ),
-              children: /* @__PURE__ */ o(
+              children: /* @__PURE__ */ e(
                 p.Range,
                 {
                   "data-slot": "slider-range",
-                  className: e(
-                    "absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                  className: a(
+                    "ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full",
                     k.range
                   )
                 }
               )
             }
           ),
-          Array.from({ length: s.length }, (r, g) => /* @__PURE__ */ o(
+          Array.from({ length: n.length }, (r, g) => /* @__PURE__ */ e(
             p.Thumb,
             {
               "data-slot": "slider-thumb",
-              className: e(
-                "block shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 ring-ring/50",
+              className: a(
+                "ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50",
                 k.thumb,
                 N.thumb
               )
@@ -413,8 +413,8 @@ const X = {
     );
   }
 );
-it.displayName = "Slider";
+ot.displayName = "Slider";
 export {
-  it as default
+  ot as default
 };
 //# sourceMappingURL=Slider.js.map