@karakuri-ui/react 0.3.2 → 0.3.4

package/dist/components/ui/skeleton.js

@@ -33,6 +33,7 @@ __export(skeleton_exports, {
   skeletonVariants: () => skeletonVariants
 });
 module.exports = __toCommonJS(skeleton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../../lib/utils");
@@ -72,7 +73,7 @@ const SkeletonBlock = React.forwardRef(
     style,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
@@ -90,18 +91,18 @@ const SkeletonBlock = React.forwardRef(
           ...radius != null ? { borderRadius: radius } : {},
           ...animation === "pulse" ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}
         },
-        ...props
-      },
-      animation === "wave" && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "absolute inset-0 animate-skeleton-wave",
-          style: {
-            animationDuration: `${WAVE_DURATION_MS}ms`,
-            background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+        ...props,
+        children: animation === "wave" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 animate-skeleton-wave",
+            style: {
+              animationDuration: `${WAVE_DURATION_MS}ms`,
+              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+            }
           }
-        }
-      )
+        )
+      }
     );
   }
 );
@@ -115,24 +116,24 @@ const Skeleton = React.forwardRef(
     ...rest
   }, ref) => {
     if (loading !== void 0) {
-      if (!loading) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+      if (!loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
     }
     if (count != null && count > 1 && variant === "text") {
-      return /* @__PURE__ */ React.createElement("div", { ref, className: "space-y-2.5", "aria-hidden": "true" }, Array.from({ length: count }, (_, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "space-y-2.5", "aria-hidden": "true", children: Array.from({ length: count }, (_, i) => {
         const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length];
         const isLast = i === count - 1;
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SkeletonBlock,
           {
-            key: i,
             variant: "text",
             style: { width: isLast ? "60%" : widthPattern },
             ...rest
-          }
+          },
+          i
         );
-      }));
+      }) });
     }
-    return /* @__PURE__ */ React.createElement(SkeletonBlock, { ref, variant, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonBlock, { ref, variant, ...rest });
   }
 );
 Skeleton.displayName = "Skeleton";

package/dist/components/ui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,uBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,eAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,cAAc,UACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,gBAAgB;AAAA,YACtC,YAAY,0BAA0B,aAAa;AAAA,UACrD;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,0DAAG,QAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oCAAC,SAAI,KAAU,WAAU,eAAc,eAAY,UAChD,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,QACN;AAAA,MAEJ,CAAC,CACH;AAAA,IAEJ;AAEA,WAAO,oCAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GU;AA7GV,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,uBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,eAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA,QAEH,wBAAc,UACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,mBAAmB,GAAG,gBAAgB;AAAA,cACtC,YAAY,0BAA0B,aAAa;AAAA,YACrD;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,2EAAG,UAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,4CAAC,SAAI,KAAU,WAAU,eAAc,eAAY,QAChD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,UAHC;AAAA,QAIP;AAAA,MAEJ,CAAC,GACH;AAAA,IAEJ;AAEA,WAAO,4CAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/components/ui/skeleton.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -38,7 +39,7 @@ const SkeletonBlock = React.forwardRef(
     style,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -56,18 +57,18 @@ const SkeletonBlock = React.forwardRef(
           ...radius != null ? { borderRadius: radius } : {},
           ...animation === "pulse" ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}
         },
-        ...props
-      },
-      animation === "wave" && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "absolute inset-0 animate-skeleton-wave",
-          style: {
-            animationDuration: `${WAVE_DURATION_MS}ms`,
-            background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+        ...props,
+        children: animation === "wave" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 animate-skeleton-wave",
+            style: {
+              animationDuration: `${WAVE_DURATION_MS}ms`,
+              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`
+            }
           }
-        }
-      )
+        )
+      }
     );
   }
 );
@@ -81,24 +82,24 @@ const Skeleton = React.forwardRef(
     ...rest
   }, ref) => {
     if (loading !== void 0) {
-      if (!loading) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+      if (!loading) return /* @__PURE__ */ jsx(Fragment, { children });
     }
     if (count != null && count > 1 && variant === "text") {
-      return /* @__PURE__ */ React.createElement("div", { ref, className: "space-y-2.5", "aria-hidden": "true" }, Array.from({ length: count }, (_, i) => {
+      return /* @__PURE__ */ jsx("div", { ref, className: "space-y-2.5", "aria-hidden": "true", children: Array.from({ length: count }, (_, i) => {
         const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length];
         const isLast = i === count - 1;
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           SkeletonBlock,
           {
-            key: i,
             variant: "text",
             style: { width: isLast ? "60%" : widthPattern },
             ...rest
-          }
+          },
+          i
         );
-      }));
+      }) });
     }
-    return /* @__PURE__ */ React.createElement(SkeletonBlock, { ref, variant, ...rest });
+    return /* @__PURE__ */ jsx(SkeletonBlock, { ref, variant, ...rest });
   }
 );
 Skeleton.displayName = "Skeleton";

package/dist/components/ui/skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,cAAc,UACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,gBAAgB;AAAA,YACtC,YAAY,0BAA0B,aAAa;AAAA,UACrD;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,0DAAG,QAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oCAAC,SAAI,KAAU,WAAU,eAAc,eAAY,UAChD,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,QACN;AAAA,MAEJ,CAAC,CACH;AAAA,IAEJ;AAEA,WAAO,oCAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Pulse animation duration in ms (slower = more premium) */\nconst PULSE_DURATION_MS = 2000\n/** Wave animation duration in ms */\nconst WAVE_DURATION_MS = 1800\n\n/**\n * Wave shimmer gradient — wide sweep with soft edges.\n * 5 gradient stops create a broader, smoother light band.\n */\nconst WAVE_GRADIENT = [\n  'transparent 0%',\n  'transparent 30%',\n  'var(--color-background-elevated) 50%',\n  'transparent 70%',\n  'transparent 100%',\n].join(', ')\n\n/**\n * Multi-line text width pattern.\n * Last line is always shorter for natural appearance.\n */\nconst MULTI_LINE_WIDTHS = ['100%', '92%', '100%', '85%', '75%'] as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst skeletonVariants = cva(\n  'bg-background-muted',\n  {\n    variants: {\n      variant: {\n        text: 'rounded-md h-4 w-full',\n        circular: 'rounded-full w-10 h-10',\n        rectangular: 'rounded-xl w-full h-24',\n      },\n    },\n    defaultVariants: {\n      variant: 'text',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  /** Animation style */\n  animation?: 'pulse' | 'wave' | false\n  /** Custom width */\n  width?: string | number\n  /** Custom height */\n  height?: string | number\n  /** Custom border radius */\n  radius?: string | number\n  /** Number of text lines (text variant only, generates stacked lines) */\n  count?: number\n  /** Conditional loading — true: show skeleton, false: render children */\n  loading?: boolean\n  /** Children to render when loading=false */\n  children?: React.ReactNode\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst SkeletonBlock = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, 'count' | 'loading' | 'children'>>(\n  ({\n    className,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    radius,\n    style,\n    ...props\n  }, ref) => {\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          skeletonVariants({ variant }),\n          animation === 'pulse' && 'animate-skeleton-pulse',\n          animation === 'wave' && 'relative overflow-hidden',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(width != null ? { width } : {}),\n          ...(height != null ? { height } : {}),\n          ...(radius != null ? { borderRadius: radius } : {}),\n          ...(animation === 'pulse' ? { animationDuration: `${PULSE_DURATION_MS}ms` } : {}),\n        }}\n        {...props}\n      >\n        {animation === 'wave' && (\n          <div\n            className=\"absolute inset-0 animate-skeleton-wave\"\n            style={{\n              animationDuration: `${WAVE_DURATION_MS}ms`,\n              background: `linear-gradient(90deg, ${WAVE_GRADIENT})`,\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\nSkeletonBlock.displayName = 'SkeletonBlock'\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({\n    count,\n    loading,\n    children,\n    variant = 'text',\n    ...rest\n  }, ref) => {\n    // loading mode — show skeleton or children\n    if (loading !== undefined) {\n      if (!loading) return <>{children}</>\n      // When loading, fall through to render skeleton\n    }\n\n    // count mode — render multiple text lines\n    if (count != null && count > 1 && variant === 'text') {\n      return (\n        <div ref={ref} className=\"space-y-2.5\" aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => {\n            const widthPattern = MULTI_LINE_WIDTHS[i % MULTI_LINE_WIDTHS.length]\n            const isLast = i === count - 1\n            return (\n              <SkeletonBlock\n                key={i}\n                variant=\"text\"\n                style={{ width: isLast ? '60%' : widthPattern }}\n                {...rest}\n              />\n            )\n          })}\n        </div>\n      )\n    }\n\n    return <SkeletonBlock ref={ref} variant={variant} {...rest} />\n  }\n)\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton, skeletonVariants }\n"],"mappings":";AA+GU,SAwBiB,UAxBjB;AA7GV,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAOnB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAMzB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,IAAI;AAMX,MAAM,oBAAoB,CAAC,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAM9D,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AA6BA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA,UAC5B,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;AAAA,UACjC,GAAI,UAAU,OAAO,EAAE,OAAO,IAAI,CAAC;AAAA,UACnC,GAAI,UAAU,OAAO,EAAE,cAAc,OAAO,IAAI,CAAC;AAAA,UACjD,GAAI,cAAc,UAAU,EAAE,mBAAmB,GAAG,iBAAiB,KAAK,IAAI,CAAC;AAAA,QACjF;AAAA,QACC,GAAG;AAAA,QAEH,wBAAc,UACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,mBAAmB,GAAG,gBAAgB;AAAA,cACtC,YAAY,0BAA0B,aAAa;AAAA,YACrD;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAE5B,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,QAAI,YAAY,QAAW;AACzB,UAAI,CAAC,QAAS,QAAO,gCAAG,UAAS;AAAA,IAEnC;AAGA,QAAI,SAAS,QAAQ,QAAQ,KAAK,YAAY,QAAQ;AACpD,aACE,oBAAC,SAAI,KAAU,WAAU,eAAc,eAAY,QAChD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,cAAM,eAAe,kBAAkB,IAAI,kBAAkB,MAAM;AACnE,cAAM,SAAS,MAAM,QAAQ;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,SAAS,QAAQ,aAAa;AAAA,YAC7C,GAAG;AAAA;AAAA,UAHC;AAAA,QAIP;AAAA,MAEJ,CAAC,GACH;AAAA,IAEJ;AAEA,WAAO,oBAAC,iBAAc,KAAU,SAAmB,GAAG,MAAM;AAAA,EAC9D;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/components/ui/slider.js

@@ -33,6 +33,7 @@ __export(slider_exports, {
   sliderVariants: () => sliderVariants
 });
 module.exports = __toCommonJS(slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -95,7 +96,7 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
     setInternalValue(newValue);
     onValueChange?.(newValue);
   }, [onValueChange]);
-  const sliderRoot = /* @__PURE__ */ React.createElement(
+  const sliderRoot = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     SliderPrimitive.Root,
     {
       ref,
@@ -109,67 +110,76 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
       defaultValue,
       onValueChange: hasTooltip ? handleValueChange : onValueChange,
       orientation,
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      SliderPrimitive.Track,
-      {
-        className: (0, import_utils.cn)(
-          "relative grow overflow-hidden rounded-full bg-border",
-          isVertical ? "h-full" : "w-full",
-          trackSizes[resolvedSize]
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        SliderPrimitive.Range,
-        {
-          className: (0, import_utils.cn)(
-            "absolute rounded-full",
-            sliderColorMap[color].range,
-            isVertical ? "w-full transition-[top,bottom] duration-fast ease-out" : "h-full transition-[left,right] duration-fast ease-out"
-          )
-        }
-      )
-    ),
-    Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ React.createElement(
-      SliderPrimitive.Thumb,
-      {
-        key: i,
-        className: (0, import_utils.cn)(
-          "group/thumb block rounded-full border-2 shadow-sm",
-          sliderColorMap[color].thumb,
-          isVertical ? "transition-[top,box-shadow,border-color] duration-fast ease-out" : "transition-[left,box-shadow,border-color] duration-fast ease-out",
-          sliderColorMap[color].thumbHover,
-          sliderColorMap[color].thumbActive,
-          "focus-visible:focus-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
-          thumbSizes[resolvedSize]
-        )
-      },
-      hasTooltip && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: (0, import_utils.cn)(
-            "absolute pointer-events-none",
-            "transition-all duration-fast ease-out",
-            isVertical ? "right-full top-1/2 -translate-y-1/2 mr-2 origin-right" : "bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom",
-            showTooltip === "always" ? "opacity-100 scale-100" : [
-              "opacity-0 scale-95",
-              "group-hover/thumb:opacity-100 group-hover/thumb:scale-100",
-              "group-active/thumb:opacity-100 group-active/thumb:scale-100",
-              "group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100"
-            ]
-          )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap" }, formatLabel ? formatLabel(displayValues[i]) : displayValues[i], isVertical ? /* @__PURE__ */ React.createElement("div", { className: "absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground" }) : /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground" }))
-      )
-    ))
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SliderPrimitive.Track,
+          {
+            className: (0, import_utils.cn)(
+              "relative grow overflow-hidden rounded-full bg-border",
+              isVertical ? "h-full" : "w-full",
+              trackSizes[resolvedSize]
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SliderPrimitive.Range,
+              {
+                className: (0, import_utils.cn)(
+                  "absolute rounded-full",
+                  sliderColorMap[color].range,
+                  isVertical ? "w-full transition-[top,bottom] duration-fast ease-out" : "h-full transition-[left,right] duration-fast ease-out"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SliderPrimitive.Thumb,
+          {
+            className: (0, import_utils.cn)(
+              "group/thumb block rounded-full border-2 shadow-sm",
+              sliderColorMap[color].thumb,
+              isVertical ? "transition-[top,box-shadow,border-color] duration-fast ease-out" : "transition-[left,box-shadow,border-color] duration-fast ease-out",
+              sliderColorMap[color].thumbHover,
+              sliderColorMap[color].thumbActive,
+              "focus-visible:focus-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              thumbSizes[resolvedSize]
+            ),
+            children: hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: (0, import_utils.cn)(
+                  "absolute pointer-events-none",
+                  "transition-all duration-fast ease-out",
+                  isVertical ? "right-full top-1/2 -translate-y-1/2 mr-2 origin-right" : "bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom",
+                  showTooltip === "always" ? "opacity-100 scale-100" : [
+                    "opacity-0 scale-95",
+                    "group-hover/thumb:opacity-100 group-hover/thumb:scale-100",
+                    "group-active/thumb:opacity-100 group-active/thumb:scale-100",
+                    "group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100"
+                  ]
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap", children: [
+                  formatLabel ? formatLabel(displayValues[i]) : displayValues[i],
+                  isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground" })
+                ] })
+              }
+            )
+          },
+          i
+        ))
+      ]
+    }
   );
   if (!hasWrapper) return sliderRoot;
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)(
     isVertical ? "inline-flex flex-col items-center gap-2 h-full" : "flex items-center gap-3",
     className
-  ) }, startContent && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, startContent), sliderRoot, endContent && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, endContent));
+  ), children: [
+    startContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50"), children: startContent }),
+    sliderRoot,
+    endContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50"), children: endContent })
+  ] });
 });
 Slider.displayName = "Slider";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Slider root variants\nconst sliderVariants = cva(\n  'relative flex touch-none select-none',\n  {\n    variants: {\n      size: {\n        sm: '',\n        default: '',\n        lg: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n  sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n  default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n  lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n  sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n  default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n  lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n  default: {\n    range: 'bg-foreground',\n    thumb: 'bg-background border-foreground',\n    thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n    thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n  },\n  primary: {\n    range: 'bg-primary',\n    thumb: 'bg-primary-foreground border-primary',\n    thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n    thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n  },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    VariantProps<typeof sliderVariants> {\n  /** Track and thumb color */\n  color?: SliderColor\n  /** Tooltip display mode: auto (hover/drag), always, never */\n  showTooltip?: 'auto' | 'always' | 'never'\n  /** Custom formatter for tooltip value */\n  formatLabel?: (value: number) => string\n  /** Content to display before the slider (icon, label, etc.) */\n  startContent?: React.ReactNode\n  /** Content to display after the slider */\n  endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const thumbCount = value?.length ?? defaultValue?.length ?? 1\n  const hasTooltip = showTooltip !== 'never'\n  const hasWrapper = !!(startContent || endContent)\n  const isVertical = orientation === 'vertical'\n\n  // Track value internally for tooltip display\n  const [internalValue, setInternalValue] = React.useState(\n    () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n  )\n  const displayValues = value ?? internalValue\n\n  const handleValueChange = React.useCallback((newValue: number[]) => {\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }, [onValueChange])\n\n  const sliderRoot = (\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn(\n        sliderVariants({ size }),\n        isVertical\n          ? 'h-full w-auto flex-col items-center'\n          : 'w-full items-center',\n        hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n        !hasWrapper && className\n      )}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={hasTooltip ? handleValueChange : onValueChange}\n      orientation={orientation}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative grow overflow-hidden rounded-full bg-border',\n          isVertical ? 'h-full' : 'w-full',\n          trackSizes[resolvedSize]\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute rounded-full', sliderColorMap[color].range,\n            isVertical\n              ? 'w-full transition-[top,bottom] duration-fast ease-out'\n              : 'h-full transition-[left,right] duration-fast ease-out'\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className={cn(\n            'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n            isVertical\n              ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n              : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n            sliderColorMap[color].thumbHover,\n            sliderColorMap[color].thumbActive,\n            'focus-visible:focus-ring',\n            'disabled:pointer-events-none disabled:opacity-50',\n            thumbSizes[resolvedSize]\n          )}\n        >\n          {hasTooltip && (\n            <div\n              className={cn(\n                'absolute pointer-events-none',\n                'transition-all duration-fast ease-out',\n                isVertical\n                  ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n                  : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n                showTooltip === 'always'\n                  ? 'opacity-100 scale-100'\n                  : [\n                      'opacity-0 scale-95',\n                      'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n                      'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n                      'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n                    ]\n              )}\n            >\n              <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n                {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n                {/* Arrow */}\n                {isVertical ? (\n                  <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n                ) : (\n                  <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n                )}\n              </div>\n            </div>\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n\n  if (!hasWrapper) return sliderRoot\n\n  return (\n    <div className={cn(\n      isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n      className\n    )}>\n      {startContent && (\n        <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n          {startContent}\n        </span>\n      )}\n      {sliderRoot}\n      {endContent && (\n        <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n          {endContent}\n        </span>\n      )}\n    </div>\n  )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Slider root variants\nconst sliderVariants = cva(\n  'relative flex touch-none select-none',\n  {\n    variants: {\n      size: {\n        sm: '',\n        default: '',\n        lg: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n  sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n  default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n  lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n  sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n  default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n  lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n  default: {\n    range: 'bg-foreground',\n    thumb: 'bg-background border-foreground',\n    thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n    thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n  },\n  primary: {\n    range: 'bg-primary',\n    thumb: 'bg-primary-foreground border-primary',\n    thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n    thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n  },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    VariantProps<typeof sliderVariants> {\n  /** Track and thumb color */\n  color?: SliderColor\n  /** Tooltip display mode: auto (hover/drag), always, never */\n  showTooltip?: 'auto' | 'always' | 'never'\n  /** Custom formatter for tooltip value */\n  formatLabel?: (value: number) => string\n  /** Content to display before the slider (icon, label, etc.) */\n  startContent?: React.ReactNode\n  /** Content to display after the slider */\n  endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const thumbCount = value?.length ?? defaultValue?.length ?? 1\n  const hasTooltip = showTooltip !== 'never'\n  const hasWrapper = !!(startContent || endContent)\n  const isVertical = orientation === 'vertical'\n\n  // Track value internally for tooltip display\n  const [internalValue, setInternalValue] = React.useState(\n    () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n  )\n  const displayValues = value ?? internalValue\n\n  const handleValueChange = React.useCallback((newValue: number[]) => {\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }, [onValueChange])\n\n  const sliderRoot = (\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn(\n        sliderVariants({ size }),\n        isVertical\n          ? 'h-full w-auto flex-col items-center'\n          : 'w-full items-center',\n        hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n        !hasWrapper && className\n      )}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={hasTooltip ? handleValueChange : onValueChange}\n      orientation={orientation}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative grow overflow-hidden rounded-full bg-border',\n          isVertical ? 'h-full' : 'w-full',\n          trackSizes[resolvedSize]\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute rounded-full', sliderColorMap[color].range,\n            isVertical\n              ? 'w-full transition-[top,bottom] duration-fast ease-out'\n              : 'h-full transition-[left,right] duration-fast ease-out'\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className={cn(\n            'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n            isVertical\n              ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n              : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n            sliderColorMap[color].thumbHover,\n            sliderColorMap[color].thumbActive,\n            'focus-visible:focus-ring',\n            'disabled:pointer-events-none disabled:opacity-50',\n            thumbSizes[resolvedSize]\n          )}\n        >\n          {hasTooltip && (\n            <div\n              className={cn(\n                'absolute pointer-events-none',\n                'transition-all duration-fast ease-out',\n                isVertical\n                  ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n                  : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n                showTooltip === 'always'\n                  ? 'opacity-100 scale-100'\n                  : [\n                      'opacity-0 scale-95',\n                      'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n                      'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n                      'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n                    ]\n              )}\n            >\n              <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n                {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n                {/* Arrow */}\n                {isVertical ? (\n                  <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n                ) : (\n                  <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n                )}\n              </div>\n            </div>\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n\n  if (!hasWrapper) return sliderRoot\n\n  return (\n    <div className={cn(\n      isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n      className\n    )}>\n      {startContent && (\n        <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n          {startContent}\n        </span>\n      )}\n      {sliderRoot}\n      {endContent && (\n        <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n          {endContent}\n        </span>\n      )}\n    </div>\n  )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/slider.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cva } from "class-variance-authority";
@@ -61,7 +62,7 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
     setInternalValue(newValue);
     onValueChange?.(newValue);
   }, [onValueChange]);
-  const sliderRoot = /* @__PURE__ */ React.createElement(
+  const sliderRoot = /* @__PURE__ */ jsxs(
     SliderPrimitive.Root,
     {
       ref,
@@ -75,67 +76,76 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
       defaultValue,
       onValueChange: hasTooltip ? handleValueChange : onValueChange,
       orientation,
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      SliderPrimitive.Track,
-      {
-        className: cn(
-          "relative grow overflow-hidden rounded-full bg-border",
-          isVertical ? "h-full" : "w-full",
-          trackSizes[resolvedSize]
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        SliderPrimitive.Range,
-        {
-          className: cn(
-            "absolute rounded-full",
-            sliderColorMap[color].range,
-            isVertical ? "w-full transition-[top,bottom] duration-fast ease-out" : "h-full transition-[left,right] duration-fast ease-out"
-          )
-        }
-      )
-    ),
-    Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ React.createElement(
-      SliderPrimitive.Thumb,
-      {
-        key: i,
-        className: cn(
-          "group/thumb block rounded-full border-2 shadow-sm",
-          sliderColorMap[color].thumb,
-          isVertical ? "transition-[top,box-shadow,border-color] duration-fast ease-out" : "transition-[left,box-shadow,border-color] duration-fast ease-out",
-          sliderColorMap[color].thumbHover,
-          sliderColorMap[color].thumbActive,
-          "focus-visible:focus-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
-          thumbSizes[resolvedSize]
-        )
-      },
-      hasTooltip && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: cn(
-            "absolute pointer-events-none",
-            "transition-all duration-fast ease-out",
-            isVertical ? "right-full top-1/2 -translate-y-1/2 mr-2 origin-right" : "bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom",
-            showTooltip === "always" ? "opacity-100 scale-100" : [
-              "opacity-0 scale-95",
-              "group-hover/thumb:opacity-100 group-hover/thumb:scale-100",
-              "group-active/thumb:opacity-100 group-active/thumb:scale-100",
-              "group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100"
-            ]
-          )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap" }, formatLabel ? formatLabel(displayValues[i]) : displayValues[i], isVertical ? /* @__PURE__ */ React.createElement("div", { className: "absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground" }) : /* @__PURE__ */ React.createElement("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground" }))
-      )
-    ))
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            className: cn(
+              "relative grow overflow-hidden rounded-full bg-border",
+              isVertical ? "h-full" : "w-full",
+              trackSizes[resolvedSize]
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                className: cn(
+                  "absolute rounded-full",
+                  sliderColorMap[color].range,
+                  isVertical ? "w-full transition-[top,bottom] duration-fast ease-out" : "h-full transition-[left,right] duration-fast ease-out"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            className: cn(
+              "group/thumb block rounded-full border-2 shadow-sm",
+              sliderColorMap[color].thumb,
+              isVertical ? "transition-[top,box-shadow,border-color] duration-fast ease-out" : "transition-[left,box-shadow,border-color] duration-fast ease-out",
+              sliderColorMap[color].thumbHover,
+              sliderColorMap[color].thumbActive,
+              "focus-visible:focus-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              thumbSizes[resolvedSize]
+            ),
+            children: hasTooltip && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute pointer-events-none",
+                  "transition-all duration-fast ease-out",
+                  isVertical ? "right-full top-1/2 -translate-y-1/2 mr-2 origin-right" : "bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom",
+                  showTooltip === "always" ? "opacity-100 scale-100" : [
+                    "opacity-0 scale-95",
+                    "group-hover/thumb:opacity-100 group-hover/thumb:scale-100",
+                    "group-active/thumb:opacity-100 group-active/thumb:scale-100",
+                    "group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100"
+                  ]
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap", children: [
+                  formatLabel ? formatLabel(displayValues[i]) : displayValues[i],
+                  isVertical ? /* @__PURE__ */ jsx("div", { className: "absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground" }) : /* @__PURE__ */ jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground" })
+                ] })
+              }
+            )
+          },
+          i
+        ))
+      ]
+    }
   );
   if (!hasWrapper) return sliderRoot;
-  return /* @__PURE__ */ React.createElement("div", { className: cn(
+  return /* @__PURE__ */ jsxs("div", { className: cn(
     isVertical ? "inline-flex flex-col items-center gap-2 h-full" : "flex items-center gap-3",
     className
-  ) }, startContent && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, startContent), sliderRoot, endContent && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50") }, endContent));
+  ), children: [
+    startContent && /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50"), children: startContent }),
+    sliderRoot,
+    endContent && /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-text-muted select-none", contentSizes[resolvedSize], props.disabled && "opacity-50"), children: endContent })
+  ] });
 });
 Slider.displayName = "Slider";
 export {