@sth87/shadcn-design-system 0.1.0 → 0.1.2

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 = (d, t) => d === "horizontal" ? t === "bottom" ? "bottom" : t === "left" ? "left" : t === "right" ? "right" : "top" : t === "right" ? "right" : t === "top" ? "top" : t === "bottom" ? "bottom" : "left", V = (d, 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`
-  }[d];
-}, ot = (d, 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"
   }
-})[`${d}-${t}`], nt = (d, 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"
-})[`${d}-${t}`], st = 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: d,
+    className: i,
     color: t = "primary",
-    size: a = "md",
+    size: s = "md",
     showLabel: c = !1,
     labelArrow: M = !1,
     labelAnimation: y = "none",
-    labelFormatter: I = (i) => `${i}`,
+    labelFormatter: I = (n) => `${n}`,
     labelPosition: b = "top",
-    labelColor: n,
-    labelTextColor: s,
+    labelColor: d,
+    labelTextColor: o,
     labelArrowColor: R,
     sliderColor: _,
     thumbBorderColor: A,
@@ -142,7 +142,7 @@ const X = {
     max: $ = 100,
     ...O
   }, j) => {
-    const i = h.useMemo(
+    const n = h.useMemo(
       () => Array.isArray(f) ? f : Array.isArray(u) ? u : [z, $],
       [f, u, z, $]
     ), [F, G] = h.useState(!1);
@@ -155,8 +155,8 @@ const X = {
     }, [f, u]);
     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" && i.length > 0) {
-        const r = i[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;
       }
     }, [
-      i,
+      n,
       y,
       D,
       H,
@@ -177,39 +177,39 @@ 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 || s)
-        return e(n, s);
+    }, [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} backdrop-blur-sm shadow-lg [&>div.arrow]:${w}` : `${r.labelBg} ${r.labelText} [&>div.arrow]:${w}`;
-    }, [t, b, l, n, s]), T = m(() => {
+      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(l, b);
       return V(t, r);
-    }, [t, b, l, R]), J = m(() => c === "hover" ? "scale-0 group-hover:scale-100" : c === "always" ? "scale-100" : "hidden", [c]), S = m(
-      () => ot(l, b),
+    }, [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(l, b),
+      () => dt(l, b),
       [b, l]
     ), L = h.useCallback(
       (r) => y === "spec" ? /* @__PURE__ */ B(
         rt.div,
         {
-          className: e(
+          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,
-            s && s,
-            !n && !s && q
+            d && d,
+            o && o,
+            !d && !o && q
           ),
           "data-orientation": l,
           initial: c === "always" ? { opacity: 1, y: -5, scale: 1 } : { opacity: 0, y: 20, scale: 0 },
@@ -233,18 +233,18 @@ const X = {
             whiteSpace: "nowrap"
           },
           children: [
-            /* @__PURE__ */ o("div", { className: "ds:relative ds:z-1", children: /* @__PURE__ */ o(
+            /* @__PURE__ */ e("div", { className: "ds:relative ds:z-1", children: /* @__PURE__ */ e(
               W,
               {
-                value: i[r],
+                value: n[r],
                 format: { notation: "standard" },
                 isolate: !0
               }
             ) }),
-            M && /* @__PURE__ */ o(
+            M && /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: a(
                   "ds:arrow ds:absolute ds:border-transparent",
                   S.arrow,
                   T
@@ -254,32 +254,32 @@ const X = {
           ]
         }
       ) : /* @__PURE__ */ B(
-        at,
+        st,
         {
           size: "lg",
-          color: n || s || 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(
+          className: a(
             "ds:transition-transform ds:absolute ds:px-3 ds:rounded-md",
             S.badge,
             J,
-            n && n,
-            s && s,
-            !n && !s && t === "glass" && "ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>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: i[r],
+                value: n[r],
                 format: { notation: "standard" },
                 isolate: !0
               }
-            ) : /* @__PURE__ */ o("span", { children: I(i[r]) }),
-            M && /* @__PURE__ */ o(
+            ) : /* @__PURE__ */ e("span", { children: I(n[r]) }),
+            M && /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: a(
                   "ds:arrow ds:absolute ds:border-transparent",
                   S.arrow,
                   T
@@ -292,15 +292,15 @@ const X = {
       [
         y,
         K,
-        n,
-        s,
+        d,
+        o,
         q,
         l,
         c,
         v,
         x,
         I,
-        i,
+        n,
         t,
         S,
         J,
@@ -318,25 +318,25 @@ const X = {
         value: f,
         min: z,
         max: $,
-        className: e(
+        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",
-          d
+          i
         ),
         ...O,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ e(
             p.Track,
             {
               "data-slot": "slider-track",
-              className: e(
+              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(
+                  className: a(
                     "ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full",
                     k.range
                   )
@@ -344,11 +344,11 @@ const X = {
               )
             }
           ),
-          Array.from({ length: i.length }, (r, g) => /* @__PURE__ */ o(
+          Array.from({ length: n.length }, (r, g) => /* @__PURE__ */ e(
             p.Thumb,
             {
               "data-slot": "slider-thumb",
-              className: e(
+              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,25 +370,25 @@ const X = {
         value: f,
         min: z,
         max: $,
-        className: e(
+        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",
-          d
+          i
         ),
         ...O,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ e(
             p.Track,
             {
               "data-slot": "slider-track",
-              className: e(
+              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(
+                  className: a(
                     "ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full",
                     k.range
                   )
@@ -396,11 +396,11 @@ const X = {
               )
             }
           ),
-          Array.from({ length: i.length }, (r, g) => /* @__PURE__ */ o(
+          Array.from({ length: n.length }, (r, g) => /* @__PURE__ */ e(
             p.Thumb,
             {
               "data-slot": "slider-thumb",
-              className: e(
+              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 = {
     );
   }
 );
-st.displayName = "Slider";
+ot.displayName = "Slider";
 export {
-  st as default
+  ot as default
 };
 //# sourceMappingURL=Slider.js.map