@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Sidebar/Sidebar.js

@@ -0,0 +1,30 @@
+import "react";
+import { Sidebar as e, SidebarProvider as a, SidebarContent as r, SidebarFooter as i, SidebarGroup as S, SidebarGroupAction as n, SidebarGroupContent as b, SidebarGroupLabel as d, SidebarHeader as t, SidebarInput as o, SidebarInset as u, SidebarMenu as s, SidebarMenuAction as c, SidebarMenuBadge as M, SidebarMenuButton as $, SidebarMenuItem as p, SidebarMenuSkeleton as G, SidebarMenuSub as I, SidebarMenuSubButton as l, SidebarMenuSubItem as g, SidebarRail as m, SidebarSeparator as B, SidebarTrigger as A } from "@dsui/ui/components/sidebar";
+const v = e, F = a, H = r, L = i, P = S, R = n, T = b, f = d, x = t, h = o, j = u, q = s, w = c, y = M, z = $, D = p, E = G, J = I, K = l, N = g, O = m, Q = B, U = A;
+export {
+  v as Sidebar,
+  H as SidebarContent,
+  L as SidebarFooter,
+  P as SidebarGroup,
+  R as SidebarGroupAction,
+  T as SidebarGroupContent,
+  f as SidebarGroupLabel,
+  x as SidebarHeader,
+  h as SidebarInput,
+  j as SidebarInset,
+  q as SidebarMenu,
+  w as SidebarMenuAction,
+  y as SidebarMenuBadge,
+  z as SidebarMenuButton,
+  D as SidebarMenuItem,
+  E as SidebarMenuSkeleton,
+  J as SidebarMenuSub,
+  K as SidebarMenuSubButton,
+  N as SidebarMenuSubItem,
+  F as SidebarProvider,
+  O as SidebarRail,
+  Q as SidebarSeparator,
+  U as SidebarTrigger,
+  v as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\n\n// Re-export all Sidebar components from shadcn/ui\nimport {\n  Sidebar as SSidebar,\n  SidebarProvider as SSidebarProvider,\n  SidebarContent as SSidebarContent,\n  SidebarFooter as SSidebarFooter,\n  SidebarGroup as SSidebarGroup,\n  SidebarGroupAction as SSidebarGroupAction,\n  SidebarGroupContent as SSidebarGroupContent,\n  SidebarGroupLabel as SSidebarGroupLabel,\n  SidebarHeader as SSidebarHeader,\n  SidebarInput as SSidebarInput,\n  SidebarInset as SSidebarInset,\n  SidebarMenu as SSidebarMenu,\n  SidebarMenuAction as SSidebarMenuAction,\n  SidebarMenuBadge as SSidebarMenuBadge,\n  SidebarMenuButton as SSidebarMenuButton,\n  SidebarMenuItem as SSidebarMenuItem,\n  SidebarMenuSkeleton as SSidebarMenuSkeleton,\n  SidebarMenuSub as SSidebarMenuSub,\n  SidebarMenuSubButton as SSidebarMenuSubButton,\n  SidebarMenuSubItem as SSidebarMenuSubItem,\n  SidebarRail as SSidebarRail,\n  SidebarSeparator as SSidebarSeparator,\n  SidebarTrigger as SSidebarTrigger,\n} from \"@dsui/ui/components/sidebar\";\n\n// Export types derived from component props\nexport type SidebarProviderProps = React.ComponentProps<\n  typeof SSidebarProvider\n>;\nexport type SidebarProps = React.ComponentProps<typeof SSidebar>;\nexport type SidebarContentProps = React.ComponentProps<typeof SSidebarContent>;\nexport type SidebarFooterProps = React.ComponentProps<typeof SSidebarFooter>;\nexport type SidebarGroupProps = React.ComponentProps<typeof SSidebarGroup>;\nexport type SidebarGroupActionProps = React.ComponentProps<\n  typeof SSidebarGroupAction\n>;\nexport type SidebarGroupContentProps = React.ComponentProps<\n  typeof SSidebarGroupContent\n>;\nexport type SidebarGroupLabelProps = React.ComponentProps<\n  typeof SSidebarGroupLabel\n>;\nexport type SidebarHeaderProps = React.ComponentProps<typeof SSidebarHeader>;\nexport type SidebarInputProps = React.ComponentProps<typeof SSidebarInput>;\nexport type SidebarInsetProps = React.ComponentProps<typeof SSidebarInset>;\nexport type SidebarMenuProps = React.ComponentProps<typeof SSidebarMenu>;\nexport type SidebarMenuActionProps = React.ComponentProps<\n  typeof SSidebarMenuAction\n>;\nexport type SidebarMenuBadgeProps = React.ComponentProps<\n  typeof SSidebarMenuBadge\n>;\nexport type SidebarMenuButtonProps = React.ComponentProps<\n  typeof SSidebarMenuButton\n>;\nexport type SidebarMenuItemProps = React.ComponentProps<\n  typeof SSidebarMenuItem\n>;\nexport type SidebarMenuSkeletonProps = React.ComponentProps<\n  typeof SSidebarMenuSkeleton\n>;\nexport type SidebarMenuSubProps = React.ComponentProps<typeof SSidebarMenuSub>;\nexport type SidebarMenuSubButtonProps = React.ComponentProps<\n  typeof SSidebarMenuSubButton\n>;\nexport type SidebarMenuSubItemProps = React.ComponentProps<\n  typeof SSidebarMenuSubItem\n>;\nexport type SidebarRailProps = React.ComponentProps<typeof SSidebarRail>;\nexport type SidebarSeparatorProps = React.ComponentProps<\n  typeof SSidebarSeparator\n>;\nexport type SidebarTriggerProps = React.ComponentProps<typeof SSidebarTrigger>;\n\n// Re-export components (using const to prevent tree-shaking)\nexport const Sidebar = SSidebar;\nexport const SidebarProvider = SSidebarProvider;\nexport const SidebarContent = SSidebarContent;\nexport const SidebarFooter = SSidebarFooter;\nexport const SidebarGroup = SSidebarGroup;\nexport const SidebarGroupAction = SSidebarGroupAction;\nexport const SidebarGroupContent = SSidebarGroupContent;\nexport const SidebarGroupLabel = SSidebarGroupLabel;\nexport const SidebarHeader = SSidebarHeader;\nexport const SidebarInput = SSidebarInput;\nexport const SidebarInset = SSidebarInset;\nexport const SidebarMenu = SSidebarMenu;\nexport const SidebarMenuAction = SSidebarMenuAction;\nexport const SidebarMenuBadge = SSidebarMenuBadge;\nexport const SidebarMenuButton = SSidebarMenuButton;\nexport const SidebarMenuItem = SSidebarMenuItem;\nexport const SidebarMenuSkeleton = SSidebarMenuSkeleton;\nexport const SidebarMenuSub = SSidebarMenuSub;\nexport const SidebarMenuSubButton = SSidebarMenuSubButton;\nexport const SidebarMenuSubItem = SSidebarMenuSubItem;\nexport const SidebarRail = SSidebarRail;\nexport const SidebarSeparator = SSidebarSeparator;\nexport const SidebarTrigger = SSidebarTrigger;\n\n// Default export\nexport default Sidebar;\n"],"names":["Sidebar","SSidebar","SidebarProvider","SSidebarProvider","SidebarContent","SSidebarContent","SidebarFooter","SSidebarFooter","SidebarGroup","SSidebarGroup","SidebarGroupAction","SSidebarGroupAction","SidebarGroupContent","SSidebarGroupContent","SidebarGroupLabel","SSidebarGroupLabel","SidebarHeader","SSidebarHeader","SidebarInput","SSidebarInput","SidebarInset","SSidebarInset","SidebarMenu","SSidebarMenu","SidebarMenuAction","SSidebarMenuAction","SidebarMenuBadge","SSidebarMenuBadge","SidebarMenuButton","SSidebarMenuButton","SidebarMenuItem","SSidebarMenuItem","SidebarMenuSkeleton","SSidebarMenuSkeleton","SidebarMenuSub","SSidebarMenuSub","SidebarMenuSubButton","SSidebarMenuSubButton","SidebarMenuSubItem","SSidebarMenuSubItem","SidebarRail","SSidebarRail","SidebarSeparator","SSidebarSeparator","SidebarTrigger","SSidebarTrigger"],"mappings":";;AA+EO,MAAMA,IAAUC,GACVC,IAAkBC,GAClBC,IAAiBC,GACjBC,IAAgBC,GAChBC,IAAeC,GACfC,IAAqBC,GACrBC,IAAsBC,GACtBC,IAAoBC,GACpBC,IAAgBC,GAChBC,IAAeC,GACfC,IAAeC,GACfC,IAAcC,GACdC,IAAoBC,GACpBC,IAAmBC,GACnBC,IAAoBC,GACpBC,IAAkBC,GAClBC,IAAsBC,GACtBC,IAAiBC,GACjBC,IAAuBC,GACvBC,IAAqBC,GACrBC,IAAcC,GACdC,IAAmBC,GACnBC,IAAiBC;"}

package/dist/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "react";
+import { Skeleton as m } from "@dsui/ui/components/skeleton";
+import { cn as f } from "@dsui/ui/lib/utils";
+const l = a.forwardRef(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ r(m, { ref: t, className: f(e), ...o })
+);
+l.displayName = "Skeleton";
+export {
+  l as default
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Skeleton as SSkeleton } from \"@dsui/ui/components/skeleton\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport type SkeletonProps = React.ComponentProps<typeof SSkeleton>;\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => {\n    return <SSkeleton ref={ref} className={cn(className)} {...props} />;\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\nexport default Skeleton;\n"],"names":["Skeleton","React","className","props","ref","jsx","SSkeleton","cn"],"mappings":";;;;AAMA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACjB,gBAAAC,EAACC,KAAU,KAAAF,GAAU,WAAWG,EAAGL,CAAS,GAAI,GAAGC,GAAO;AAErE;AAEAH,EAAS,cAAc;"}

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

@@ -0,0 +1,420 @@
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import h, { useMemo as m } from "react";
+import * as p from "@radix-ui/react-slider";
+import { cn as e } from "@dsui/ui/lib/utils";
+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";
+const X = {
+  primary: {
+    range: "bg-primary",
+    thumb: "border-primary/50",
+    labelBg: "bg-primary",
+    labelText: "text-primary-foreground"
+  },
+  secondary: {
+    range: "bg-secondary",
+    thumb: "border-secondary/50",
+    labelBg: "bg-secondary",
+    labelText: "text-secondary-foreground"
+  },
+  success: {
+    range: "bg-success",
+    thumb: "border-success/50",
+    labelBg: "bg-success",
+    labelText: "text-success-foreground"
+  },
+  warning: {
+    range: "bg-warning",
+    thumb: "border-warning/50",
+    labelBg: "bg-warning",
+    labelText: "text-warning-foreground"
+  },
+  error: {
+    range: "bg-error",
+    thumb: "border-error/50",
+    labelBg: "bg-error",
+    labelText: "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"
+  },
+  muted: {
+    range: "bg-muted-foreground",
+    thumb: "border-muted-foreground/50",
+    labelBg: "bg-muted",
+    labelText: "text-muted-foreground"
+  },
+  accent: {
+    range: "bg-accent",
+    thumb: "border-accent/50",
+    labelBg: "bg-accent",
+    labelText: "text-accent-foreground"
+  }
+}, et = {
+  sm: {
+    track: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
+    thumb: "size-3"
+  },
+  md: {
+    track: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+    thumb: "size-4"
+  },
+  lg: {
+    track: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+    thumb: "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";
+  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) => ({
+  "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"
+  },
+  "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"
+  },
+  "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"
+  },
+  "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"
+  },
+  "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"
+  },
+  "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"
+  },
+  "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"
+  },
+  "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"
+  }
+})[`${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(
+  ({
+    className: l,
+    color: t = "primary",
+    size: a = "md",
+    showLabel: c = !1,
+    labelArrow: M = !1,
+    labelAnimation: y = "none",
+    labelFormatter: I = (s) => `${s}`,
+    labelPosition: b = "top",
+    labelColor: n,
+    labelTextColor: i,
+    labelArrowColor: R,
+    sliderColor: _,
+    thumbBorderColor: A,
+    defaultValue: u,
+    value: f,
+    min: z = 0,
+    max: $ = 100,
+    ...O
+  }, j) => {
+    const s = h.useMemo(
+      () => Array.isArray(f) ? f : Array.isArray(u) ? u : [z, $],
+      [f, u, z, $]
+    ), [F, G] = h.useState(!1);
+    h.useEffect(() => {
+      f !== void 0 && !Array.isArray(f) && console.error(
+        "[Slider] value prop must be an array of numbers, e.g., [50] or [25, 75]"
+      ), u !== void 0 && !Array.isArray(u) && console.error(
+        "[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);
+    h.useEffect(() => {
+      if (y === "spec" && s.length > 0) {
+        const r = s[0], g = r - P.current, w = 5, E = Math.max(
+          -w,
+          Math.min(w, g)
+        );
+        D.set(E), H.set(r);
+        const C = -E * 12, tt = -E * 20;
+        v.set(C), x.set(tt), setTimeout(() => {
+          v.set(0), x.set(0);
+        }, 100), P.current = r;
+      }
+    }, [
+      s,
+      y,
+      D,
+      H,
+      v,
+      x
+    ]);
+    const k = m(() => {
+      if (_ || A)
+        return {
+          range: _ || "bg-primary",
+          thumb: A || "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(() => {
+      if (R) return R;
+      const r = Y(d, 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]
+    ), K = m(
+      () => nt(d, b),
+      [b, d]
+    ), 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",
+            K,
+            n && n,
+            i && i,
+            !n && !i && q
+          ),
+          "data-orientation": d,
+          initial: c === "always" ? { opacity: 1, y: -5, scale: 1 } : { opacity: 0, y: 20, scale: 0 },
+          animate: F && c === "hover" || c === "always" ? {
+            opacity: 1,
+            y: -5,
+            scale: 1
+          } : {
+            opacity: 0,
+            y: 20,
+            scale: 0
+          },
+          transition: {
+            type: "tween",
+            duration: 0.2,
+            ease: "easeOut"
+          },
+          style: {
+            x: v,
+            rotate: x,
+            whiteSpace: "nowrap"
+          },
+          children: [
+            /* @__PURE__ */ o("div", { className: "relative z-1", children: /* @__PURE__ */ o(
+              W,
+              {
+                value: s[r],
+                format: { notation: "standard" },
+                isolate: !0
+              }
+            ) }),
+            M && /* @__PURE__ */ o(
+              "div",
+              {
+                className: e(
+                  "arrow absolute border-transparent",
+                  S.arrow,
+                  T
+                )
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ B(
+        at,
+        {
+          size: "lg",
+          color: n || i || t === "glass" ? "custom" : t === "muted" ? "muted" : t === "accent" ? "accent" : t,
+          variant: "solid",
+          className: e(
+            "transition-transform absolute px-3 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"
+          ),
+          children: [
+            y === "number-flow" ? /* @__PURE__ */ o(
+              W,
+              {
+                value: s[r],
+                format: { notation: "standard" },
+                isolate: !0
+              }
+            ) : /* @__PURE__ */ o("span", { children: I(s[r]) }),
+            M && /* @__PURE__ */ o(
+              "div",
+              {
+                className: e(
+                  "arrow absolute border-transparent",
+                  S.arrow,
+                  T
+                )
+              }
+            )
+          ]
+        }
+      ),
+      [
+        y,
+        K,
+        n,
+        i,
+        q,
+        d,
+        c,
+        v,
+        x,
+        I,
+        s,
+        t,
+        S,
+        J,
+        M,
+        T,
+        F
+      ]
+    );
+    return c ? /* @__PURE__ */ B(
+      p.Root,
+      {
+        ref: j,
+        "data-slot": "slider",
+        defaultValue: u,
+        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
+        ),
+        ...O,
+        children: [
+          /* @__PURE__ */ o(
+            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",
+                N.track
+              ),
+              children: /* @__PURE__ */ o(
+                p.Range,
+                {
+                  "data-slot": "slider-range",
+                  className: e(
+                    "absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                    k.range
+                  )
+                }
+              )
+            }
+          ),
+          Array.from({ length: s.length }, (r, g) => /* @__PURE__ */ o(
+            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",
+                k.thumb,
+                N.thumb
+              ),
+              onMouseEnter: () => G(!0),
+              onMouseLeave: () => G(!1),
+              children: L(g)
+            },
+            g
+          ))
+        ]
+      }
+    ) : /* @__PURE__ */ B(
+      p.Root,
+      {
+        ref: j,
+        "data-slot": "slider",
+        defaultValue: u,
+        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
+        ),
+        ...O,
+        children: [
+          /* @__PURE__ */ o(
+            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",
+                N.track
+              ),
+              children: /* @__PURE__ */ o(
+                p.Range,
+                {
+                  "data-slot": "slider-range",
+                  className: e(
+                    "absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                    k.range
+                  )
+                }
+              )
+            }
+          ),
+          Array.from({ length: s.length }, (r, g) => /* @__PURE__ */ o(
+            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",
+                k.thumb,
+                N.thumb
+              )
+            },
+            g
+          ))
+        ]
+      }
+    );
+  }
+);
+it.displayName = "Slider";
+export {
+  it as default
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport NumberFlow from \"@number-flow/react\";\nimport type { BasicColor } from \"@/types/variables\";\nimport Badge from \"../Badge/Badge\";\n\ntype LabelAnimation = \"number-flow\" | \"spec\" | \"none\";\ntype LabelDisplay = false | \"hover\" | \"always\";\ntype SliderColor = BasicColor | \"muted\" | \"accent\";\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\ntype LabelPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {\n  color?: SliderColor;\n  size?: SliderSize;\n  showLabel?: LabelDisplay;\n  labelArrow?: boolean;\n  labelAnimation?: LabelAnimation;\n  labelFormatter?: (value: number) => string;\n  labelPosition?: LabelPosition;\n  labelColor?: string; // Custom label background color (e.g., \"bg-yellow-500\")\n  labelTextColor?: string; // Custom label text color (e.g., \"text-yellow-950\")\n  labelArrowColor?: string; // Custom label arrow color (e.g., \"border-t-yellow-500\")\n  sliderColor?: string; // Custom slider track color (e.g., \"bg-pink-500\")\n  thumbBorderColor?: string; // Custom thumb border color (e.g., \"border-pink-500/50\")\n};\n\n// Color mapping configuration\nconst COLOR_CONFIG: Record<\n  SliderColor,\n  {\n    range: string;\n    thumb: string;\n    labelBg: string;\n    labelText: string;\n  }\n> = {\n  primary: {\n    range: \"bg-primary\",\n    thumb: \"border-primary/50\",\n    labelBg: \"bg-primary\",\n    labelText: \"text-primary-foreground\",\n  },\n  secondary: {\n    range: \"bg-secondary\",\n    thumb: \"border-secondary/50\",\n    labelBg: \"bg-secondary\",\n    labelText: \"text-secondary-foreground\",\n  },\n  success: {\n    range: \"bg-success\",\n    thumb: \"border-success/50\",\n    labelBg: \"bg-success\",\n    labelText: \"text-success-foreground\",\n  },\n  warning: {\n    range: \"bg-warning\",\n    thumb: \"border-warning/50\",\n    labelBg: \"bg-warning\",\n    labelText: \"text-warning-foreground\",\n  },\n  error: {\n    range: \"bg-error\",\n    thumb: \"border-error/50\",\n    labelBg: \"bg-error\",\n    labelText: \"text-error-foreground\",\n  },\n  glass: {\n    range: \"bg-white/30 backdrop-blur-sm\",\n    thumb: \"border-white/30 backdrop-blur-sm\",\n    labelBg: \"bg-white/15\",\n    labelText: \"text-foreground\",\n  },\n  muted: {\n    range: \"bg-muted-foreground\",\n    thumb: \"border-muted-foreground/50\",\n    labelBg: \"bg-muted\",\n    labelText: \"text-muted-foreground\",\n  },\n  accent: {\n    range: \"bg-accent\",\n    thumb: \"border-accent/50\",\n    labelBg: \"bg-accent\",\n    labelText: \"text-accent-foreground\",\n  },\n};\n\n// Size configuration\nconst SIZE_CONFIG: Record<\n  SliderSize,\n  {\n    track: string;\n    thumb: string;\n  }\n> = {\n  sm: {\n    track: \"data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1\",\n    thumb: \"size-3\",\n  },\n  md: {\n    track:\n      \"data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5\",\n    thumb: \"size-4\",\n  },\n  lg: {\n    track: \"data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2\",\n    thumb: \"size-5\",\n  },\n};\n\n// Helper to get arrow direction based on orientation and position\nconst getArrowDirection = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): \"top\" | \"bottom\" | \"left\" | \"right\" => {\n  if (orientation === \"horizontal\") {\n    if (position === \"bottom\") return \"bottom\";\n    if (position === \"left\") return \"left\";\n    if (position === \"right\") return \"right\";\n    return \"top\";\n  }\n  // vertical\n  if (position === \"right\") return \"right\";\n  if (position === \"top\") return \"top\";\n  if (position === \"bottom\") return \"bottom\";\n  return \"left\";\n};\n\n// Helper to get arrow color class\nconst getArrowColorClass = (\n  color: SliderColor,\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\"\n): string => {\n  // Generate full border class (e.g., \"border-t-primary\")\n  const prefix =\n    direction === \"top\"\n      ? \"t\"\n      : direction === \"bottom\"\n        ? \"b\"\n        : direction === \"left\"\n          ? \"l\"\n          : \"r\";\n  const colorMap: Record<SliderColor, string> = {\n    primary: `border-${prefix}-primary`,\n    secondary: `border-${prefix}-secondary`,\n    success: `border-${prefix}-success`,\n    warning: `border-${prefix}-warning`,\n    error: `border-${prefix}-error`,\n    glass: `border-${prefix}-white/15`,\n    muted: `border-${prefix}-muted`,\n    accent: `border-${prefix}-accent`,\n  };\n\n  return colorMap[color];\n};\n\n// Helper to get label position classes\nconst getLabelPositionClasses = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): { badge: string; arrow: string } => {\n  const positions: Record<string, { badge: string; arrow: string }> = {\n    \"horizontal-top\": {\n      badge: \"left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"horizontal-bottom\": {\n      badge: \"left-1/2 -translate-x-1/2 top-full translate-y-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"horizontal-left\": {\n      badge: \"top-1/2 -translate-y-1/2 right-full -translate-x-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"horizontal-right\": {\n      badge: \"top-1/2 -translate-y-1/2 left-full translate-x-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"vertical-left\": {\n      badge: \"top-1/2 -translate-y-1/2 right-full -translate-x-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"vertical-right\": {\n      badge: \"top-1/2 -translate-y-1/2 left-full translate-x-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"vertical-top\": {\n      badge: \"left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2\",\n      arrow:\n        \"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\",\n    },\n    \"vertical-bottom\": {\n      badge: \"left-1/2 -translate-x-1/2 top-full translate-y-1/2\",\n      arrow:\n        \"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\",\n    },\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\n// Helper to get spec label position classes\nconst getSpecLabelPositionClass = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): string => {\n  const positions: Record<string, string> = {\n    \"horizontal-top\":\n      \"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\",\n    \"horizontal-bottom\":\n      \"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\",\n    \"horizontal-left\":\n      \"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\",\n    \"horizontal-right\":\n      \"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\",\n    \"vertical-left\":\n      \"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\",\n    \"vertical-right\":\n      \"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\",\n    \"vertical-top\":\n      \"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\",\n    \"vertical-bottom\":\n      \"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\",\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\nconst Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      className,\n      color = \"primary\",\n      size = \"md\",\n      showLabel = false,\n      labelArrow = false,\n      labelAnimation = \"none\",\n      labelFormatter = (value) => `${value}`,\n      labelPosition = \"top\",\n      labelColor,\n      labelTextColor,\n      labelArrowColor,\n      sliderColor,\n      thumbBorderColor,\n      defaultValue,\n      value,\n      min = 0,\n      max = 100,\n      ...props\n    },\n    ref\n  ) => {\n    const _values = React.useMemo(\n      () =>\n        Array.isArray(value)\n          ? value\n          : Array.isArray(defaultValue)\n            ? defaultValue\n            : [min, max],\n      [value, defaultValue, min, max]\n    );\n\n    // State for hover detection\n    const [isHovered, setIsHovered] = React.useState(false);\n    React.useEffect(() => {\n      if (value !== undefined && !Array.isArray(value)) {\n        console.error(\n          \"[Slider] value prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n      if (defaultValue !== undefined && !Array.isArray(defaultValue)) {\n        console.error(\n          \"[Slider] defaultValue prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n    }, [value, defaultValue]);\n\n    const orientation = props.orientation || \"horizontal\";\n\n    // For spec animation - track thumb position and velocity\n    const thumbPosition = useMotionValue(0);\n    const thumbVelocity = useMotionValue(0);\n    const prevThumbPosition = React.useRef(0);\n\n    // Spring physics for label following effect - more dramatic\n    const springConfig = { stiffness: 150, damping: 15, mass: 1 };\n    const labelOffset = useSpring(0, springConfig);\n    const labelRotate = useSpring(0, springConfig);\n\n    // Track value changes to calculate velocity\n    React.useEffect(() => {\n      if (labelAnimation === \"spec\" && _values.length > 0) {\n        const currentPos = _values[0];\n        const velocity = currentPos - prevThumbPosition.current;\n\n        // Cap velocity to prevent large jumps (e.g., on click or initial load)\n        const maxVelocity = 5; // Maximum velocity threshold\n        const cappedVelocity = Math.max(\n          -maxVelocity,\n          Math.min(maxVelocity, velocity)\n        );\n\n        // Update velocity and position\n        thumbVelocity.set(cappedVelocity);\n        thumbPosition.set(currentPos);\n\n        // Calculate offset and rotation based on capped velocity\n        // Negative velocity (moving left) -> positive offset (label lags behind to the right)\n        const offsetAmount = -cappedVelocity * 12;\n        const rotateAmount = -cappedVelocity * 20;\n\n        labelOffset.set(offsetAmount);\n        labelRotate.set(rotateAmount);\n\n        // Reset to center when stopped\n        setTimeout(() => {\n          labelOffset.set(0);\n          labelRotate.set(0);\n        }, 100);\n\n        prevThumbPosition.current = currentPos;\n      }\n    }, [\n      _values,\n      labelAnimation,\n      thumbVelocity,\n      thumbPosition,\n      labelOffset,\n      labelRotate,\n    ]);\n\n    // Memoized computed values\n    const sliderColorClass = useMemo(() => {\n      if (sliderColor || thumbBorderColor) {\n        return {\n          range: sliderColor || \"bg-primary\",\n          thumb: thumbBorderColor || \"border-primary/50\",\n        };\n      }\n      const config = COLOR_CONFIG[color];\n      return {\n        range: config.range,\n        thumb: config.thumb,\n      };\n    }, [color, sliderColor, thumbBorderColor]);\n\n    const sliderSizeClass = useMemo(() => SIZE_CONFIG[size], [size]);\n\n    const labelColorClass = useMemo(() => {\n      if (labelColor || labelTextColor) {\n        return cn(labelColor, labelTextColor);\n      }\n\n      const config = COLOR_CONFIG[color];\n      const direction = getArrowDirection(orientation, labelPosition);\n      const arrowColor = getArrowColorClass(color, direction);\n\n      if (color === \"glass\") {\n        return `${config.labelBg} ${config.labelText} backdrop-blur-sm shadow-lg [&>div.arrow]:${arrowColor}`;\n      }\n\n      return `${config.labelBg} ${config.labelText} [&>div.arrow]:${arrowColor}`;\n    }, [color, labelPosition, orientation, labelColor, labelTextColor]);\n\n    const arrowColorClass = useMemo(() => {\n      if (labelArrowColor) return labelArrowColor;\n      const direction = getArrowDirection(orientation, labelPosition);\n      return getArrowColorClass(color, direction);\n    }, [color, labelPosition, orientation, labelArrowColor]);\n\n    const labelVisibilityClass = useMemo(() => {\n      if (showLabel === \"hover\") return \"scale-0 group-hover:scale-100\";\n      if (showLabel === \"always\") return \"scale-100\";\n      return \"hidden\";\n    }, [showLabel]);\n\n    const labelPositionClass = useMemo(\n      () => getLabelPositionClasses(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    const labelPositionClassSpec = useMemo(\n      () => getSpecLabelPositionClass(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    // Render label based on animation type\n    const renderLabel = React.useCallback(\n      (index: number) => {\n        if (labelAnimation === \"spec\") {\n          return (\n            <motion.div\n              className={cn(\n                \"pointer-events-none absolute z-50 flex flex-col items-center justify-center rounded-md px-3 py-1.5 text-xs shadow-xl\",\n                labelPositionClassSpec,\n                labelColor && labelColor,\n                labelTextColor && labelTextColor,\n                !labelColor && !labelTextColor && labelColorClass\n              )}\n              data-orientation={orientation}\n              initial={\n                showLabel === \"always\"\n                  ? { opacity: 1, y: -5, scale: 1 }\n                  : { opacity: 0, y: 20, scale: 0 }\n              }\n              animate={\n                (isHovered && showLabel === \"hover\") || showLabel === \"always\"\n                  ? {\n                      opacity: 1,\n                      y: -5,\n                      scale: 1,\n                    }\n                  : {\n                      opacity: 0,\n                      y: 20,\n                      scale: 0,\n                    }\n              }\n              transition={{\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              }}\n              style={{\n                x: labelOffset,\n                rotate: labelRotate,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              <div className=\"relative z-1\">\n                <NumberFlow\n                  value={_values[index]}\n                  format={{ notation: \"standard\" }}\n                  isolate\n                />\n              </div>\n              {labelArrow && (\n                <div\n                  className={cn(\n                    \"arrow absolute border-transparent\",\n                    labelPositionClass.arrow,\n                    arrowColorClass\n                  )}\n                />\n              )}\n            </motion.div>\n          );\n        }\n\n        // Standard or number-flow animation\n        return (\n          <Badge\n            size=\"lg\"\n            color={\n              labelColor || labelTextColor\n                ? \"custom\"\n                : color === \"glass\"\n                  ? \"custom\"\n                  : color === \"muted\"\n                    ? \"muted\"\n                    : color === \"accent\"\n                      ? \"accent\"\n                      : color\n            }\n            variant=\"solid\"\n            className={cn(\n              \"transition-transform absolute px-3 rounded-md\",\n              labelPositionClass.badge,\n              labelVisibilityClass,\n              labelColor && labelColor,\n              labelTextColor && labelTextColor,\n              !labelColor &&\n                !labelTextColor &&\n                color === \"glass\" &&\n                \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>div.arrow]:border-t-white/15\"\n            )}\n          >\n            {labelAnimation === \"number-flow\" ? (\n              <NumberFlow\n                value={_values[index]}\n                format={{ notation: \"standard\" }}\n                isolate\n              />\n            ) : (\n              <span>{labelFormatter(_values[index])}</span>\n            )}\n            {labelArrow && (\n              <div\n                className={cn(\n                  \"arrow absolute border-transparent\",\n                  labelPositionClass.arrow,\n                  arrowColorClass\n                )}\n              />\n            )}\n          </Badge>\n        );\n      },\n      [\n        labelAnimation,\n        labelPositionClassSpec,\n        labelColor,\n        labelTextColor,\n        labelColorClass,\n        orientation,\n        showLabel,\n        labelOffset,\n        labelRotate,\n        labelFormatter,\n        _values,\n        color,\n        labelPositionClass,\n        labelVisibilityClass,\n        labelArrow,\n        arrowColorClass,\n        isHovered,\n      ]\n    );\n\n    // Render without label - use custom slider with color\n    if (!showLabel) {\n      return (\n        <SliderPrimitive.Root\n          ref={ref}\n          data-slot=\"slider\"\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          className={cn(\n            \"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\",\n            className\n          )}\n          {...props}\n        >\n          <SliderPrimitive.Track\n            data-slot=\"slider-track\"\n            className={cn(\n              \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n              sliderSizeClass.track\n            )}\n          >\n            <SliderPrimitive.Range\n              data-slot=\"slider-range\"\n              className={cn(\n                \"absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n                sliderColorClass.range\n              )}\n            />\n          </SliderPrimitive.Track>\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              data-slot=\"slider-thumb\"\n              className={cn(\n                \"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\",\n                sliderColorClass.thumb,\n                sliderSizeClass.thumb\n              )}\n            />\n          ))}\n        </SliderPrimitive.Root>\n      );\n    }\n\n    // Render with label (standard, number-flow, or spec animation)\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        data-slot=\"slider\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        className={cn(\n          \"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\",\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n            sliderSizeClass.track\n          )}\n        >\n          <SliderPrimitive.Range\n            data-slot=\"slider-range\"\n            className={cn(\n              \"absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n              sliderColorClass.range\n            )}\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            data-slot=\"slider-thumb\"\n            className={cn(\n              \"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\",\n              sliderColorClass.thumb,\n              sliderSizeClass.thumb\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            {renderLabel(index)}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n    );\n  }\n);\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["COLOR_CONFIG","SIZE_CONFIG","getArrowDirection","orientation","position","getArrowColorClass","color","direction","prefix","getLabelPositionClasses","getSpecLabelPositionClass","Slider","React","className","size","showLabel","labelArrow","labelAnimation","labelFormatter","value","labelPosition","labelColor","labelTextColor","labelArrowColor","sliderColor","thumbBorderColor","defaultValue","min","max","props","ref","_values","isHovered","setIsHovered","thumbPosition","useMotionValue","thumbVelocity","prevThumbPosition","springConfig","labelOffset","useSpring","labelRotate","currentPos","velocity","maxVelocity","cappedVelocity","offsetAmount","rotateAmount","sliderColorClass","useMemo","config","sliderSizeClass","labelColorClass","cn","arrowColor","arrowColorClass","labelVisibilityClass","labelPositionClass","labelPositionClassSpec","renderLabel","index","jsxs","motion","jsx","NumberFlow","Badge","SliderPrimitive","_"],"mappings":"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"}