@karakuri-ui/react 0.3.3 → 0.3.5

package/dist/components/ui/slider.mjs.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/spinner.js

@@ -33,6 +33,7 @@ __export(spinner_exports, {
   spinnerVariants: () => spinnerVariants
 });
 module.exports = __toCommonJS(spinner_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");
@@ -131,22 +132,24 @@ const Spinner = React.forwardRef(
       flip: OrbitFlipSpinner,
       morph: OrbitMorphSpinner
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         ref,
         role: "status",
         "aria-label": label || "Loading",
         className: (0, import_utils.cn)(spinnerVariants({ size }), className),
-        ...props
-      },
-      variant === "ring" && /* @__PURE__ */ React.createElement(RingSpinner, { size: resolvedSize, color, speed }),
-      variant === "dots" && /* @__PURE__ */ React.createElement(DotsSpinner, { size: resolvedSize, color, speed }),
-      variant === "bars" && /* @__PURE__ */ React.createElement(BarsSpinner, { size: resolvedSize, color, speed }),
-      variant === "orbit" && (() => {
-        const OrbitComponent = orbitMap[orbitStyle];
-        return /* @__PURE__ */ React.createElement(OrbitComponent, { size: resolvedSize, color, speed });
-      })()
+        ...props,
+        children: [
+          variant === "ring" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RingSpinner, { size: resolvedSize, color, speed }),
+          variant === "dots" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DotsSpinner, { size: resolvedSize, color, speed }),
+          variant === "bars" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarsSpinner, { size: resolvedSize, color, speed }),
+          variant === "orbit" && (() => {
+            const OrbitComponent = orbitMap[orbitStyle];
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OrbitComponent, { size: resolvedSize, color, speed });
+          })()
+        ]
+      }
     );
   }
 );
@@ -156,7 +159,7 @@ function RingSpinner({ size, color, speed }) {
   const stroke = RING_STROKE[size];
   const r = (RING_VIEWBOX - stroke) / 2;
   const circumference = 2 * Math.PI * r;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
@@ -164,40 +167,41 @@ function RingSpinner({ size, color, speed }) {
       height: diameter,
       fill: "none",
       className: "animate-spin",
-      style: { animationDuration: `${SPEED_MS[speed]}ms` }
-    },
-    /* @__PURE__ */ React.createElement(
-      "circle",
-      {
-        cx: RING_CENTER,
-        cy: RING_CENTER,
-        r,
-        className: "stroke-border",
-        strokeWidth: stroke
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "circle",
-      {
-        cx: RING_CENTER,
-        cy: RING_CENTER,
-        r,
-        className: strokeColorMap[color],
-        strokeWidth: stroke,
-        strokeDasharray: circumference,
-        strokeDashoffset: circumference * 0.75,
-        strokeLinecap: "round"
-      }
-    )
+      style: { animationDuration: `${SPEED_MS[speed]}ms` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: RING_CENTER,
+            cy: RING_CENTER,
+            r,
+            className: "stroke-border",
+            strokeWidth: stroke
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: RING_CENTER,
+            cy: RING_CENTER,
+            r,
+            className: strokeColorMap[color],
+            strokeWidth: stroke,
+            strokeDasharray: circumference,
+            strokeDashoffset: circumference * 0.75,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
   );
 }
 function DotsSpinner({ size, color, speed }) {
   const dotSize = DOT_SIZES[size];
   const gap = DOT_GAP[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center", style: { gap } }, Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inline-flex items-center", style: { gap }, children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      key: i,
       className: (0, import_utils.cn)(
         "rounded-full animate-spinner-dot",
         bgColorMap[color]
@@ -208,17 +212,17 @@ function DotsSpinner({ size, color, speed }) {
         animationDuration: `${SPEED_MS[speed]}ms`,
         animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`
       }
-    }
-  )));
+    },
+    i
+  )) });
 }
 function BarsSpinner({ size, color, speed }) {
   const barWidth = BAR_WIDTHS[size];
   const barHeight = BAR_HEIGHTS[size];
   const gap = BAR_GAP[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center", style: { gap, height: barHeight } }, Array.from({ length: BAR_COUNT }, (_, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inline-flex items-center", style: { gap, height: barHeight }, children: Array.from({ length: BAR_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      key: i,
       className: (0, import_utils.cn)(
         "rounded-full animate-spinner-bar origin-center",
         bgColorMap[color]
@@ -229,8 +233,9 @@ function BarsSpinner({ size, color, speed }) {
         animationDuration: `${SPEED_MS[speed]}ms`,
         animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`
       }
-    }
-  )));
+    },
+    i
+  )) });
 }
 const orbitTextColorMap = {
   default: "text-foreground",
@@ -242,7 +247,7 @@ function OrbitSpinner({ size, color, speed }) {
   const stroke = ORBIT_STROKE[size];
   const r = (RING_VIEWBOX - stroke * 2) / 2;
   const circumference = 2 * Math.PI * r;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: (0, import_utils.cn)(orbitTextColorMap[color]),
@@ -251,56 +256,58 @@ function OrbitSpinner({ size, color, speed }) {
         height: diameter,
         perspective: diameter * 3,
         position: "relative"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
-        width: diameter,
-        height: diameter,
-        fill: "none",
-        className: "absolute inset-0 animate-spinner-orbit",
-        style: { animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }
       },
-      /* @__PURE__ */ React.createElement(
-        "circle",
-        {
-          cx: RING_CENTER,
-          cy: RING_CENTER,
-          r,
-          stroke: "currentColor",
-          strokeWidth: stroke
-        }
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
-        width: diameter,
-        height: diameter,
-        fill: "none",
-        className: "absolute inset-0 animate-spinner-orbit",
-        style: {
-          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
-          transform: "rotateZ(90deg)",
-          animationDirection: "reverse",
-          animationDelay: "-0.4s",
-          opacity: 0.35
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        "circle",
-        {
-          cx: RING_CENTER,
-          cy: RING_CENTER,
-          r,
-          stroke: "currentColor",
-          strokeWidth: stroke
-        }
-      )
-    )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
+            width: diameter,
+            height: diameter,
+            fill: "none",
+            className: "absolute inset-0 animate-spinner-orbit",
+            style: { animationDuration: `${ORBIT_SPEED_MS[speed]}ms` },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                cx: RING_CENTER,
+                cy: RING_CENTER,
+                r,
+                stroke: "currentColor",
+                strokeWidth: stroke
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
+            width: diameter,
+            height: diameter,
+            fill: "none",
+            className: "absolute inset-0 animate-spinner-orbit",
+            style: {
+              animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+              transform: "rotateZ(90deg)",
+              animationDirection: "reverse",
+              animationDelay: "-0.4s",
+              opacity: 0.35
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                cx: RING_CENTER,
+                cy: RING_CENTER,
+                r,
+                stroke: "currentColor",
+                strokeWidth: stroke
+              }
+            )
+          }
+        )
+      ]
+    }
   );
 }
 const ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 };
@@ -308,7 +315,7 @@ function OrbitDotsSpinner({ size, color, speed }) {
   const diameter = ORBIT_SIZES[size];
   const dotSize = ORBIT_DOT_SIZE[size];
   const orbitRadius = (diameter - dotSize) / 2;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_utils.cn)(orbitTextColorMap[color]),
@@ -317,36 +324,36 @@ function OrbitDotsSpinner({ size, color, speed }) {
         height: diameter,
         perspective: diameter * 3,
         position: "relative"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "animate-spinner-orbit",
-        style: {
-          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
-          width: "100%",
-          height: "100%",
-          position: "relative",
-          transformStyle: "preserve-3d"
-        }
       },
-      [0, 120, 240].map((angle) => /* @__PURE__ */ React.createElement(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          key: angle,
-          className: "absolute rounded-full",
+          className: "animate-spinner-orbit",
           style: {
-            width: dotSize,
-            height: dotSize,
-            backgroundColor: "currentColor",
-            left: "50%",
-            top: "50%",
-            transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`
-          }
+            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            transformStyle: "preserve-3d"
+          },
+          children: [0, 120, 240].map((angle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: {
+                width: dotSize,
+                height: dotSize,
+                backgroundColor: "currentColor",
+                left: "50%",
+                top: "50%",
+                transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`
+              }
+            },
+            angle
+          ))
         }
-      ))
-    )
+      )
+    }
   );
 }
 const CUBE_SIZES = { sm: 12, default: 18, lg: 26 };
@@ -364,7 +371,7 @@ function OrbitCubeSpinner({ size, color, speed }) {
     top: -overlap,
     left: -overlap
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_utils.cn)(orbitTextColorMap[color]),
@@ -372,44 +379,46 @@ function OrbitCubeSpinner({ size, color, speed }) {
         width: cubeSize,
         height: cubeSize,
         perspective: cubeSize * 6
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          width: cubeSize,
-          height: cubeSize,
-          transform: "rotateX(-25deg) rotateZ(15deg)",
-          transformStyle: "preserve-3d"
-        }
       },
-      /* @__PURE__ */ React.createElement(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: "animate-spinner-orbit",
           style: {
-            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
             width: cubeSize,
             height: cubeSize,
-            position: "relative",
+            transform: "rotateX(-25deg) rotateZ(15deg)",
             transformStyle: "preserve-3d"
-          }
-        },
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 } }),
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 } }),
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 } }),
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 } }),
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 } }),
-        /* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 } })
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: "animate-spinner-orbit",
+              style: {
+                animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+                width: cubeSize,
+                height: cubeSize,
+                position: "relative",
+                transformStyle: "preserve-3d"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 } })
+              ]
+            }
+          )
+        }
       )
-    )
+    }
   );
 }
 const FLIP_SIZES = { sm: 14, default: 20, lg: 28 };
 function OrbitFlipSpinner({ size, color, speed }) {
   const sqSize = FLIP_SIZES[size];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_utils.cn)(orbitTextColorMap[color]),
@@ -417,28 +426,28 @@ function OrbitFlipSpinner({ size, color, speed }) {
         width: sqSize,
         height: sqSize,
         perspective: sqSize * 4
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { style: { transform: "rotateX(25deg)", transformStyle: "preserve-3d", width: "100%", height: "100%" } }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "animate-spinner-orbit",
-        style: {
-          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
-          width: "100%",
-          height: "100%",
-          borderRadius: "25%",
-          backgroundColor: "currentColor",
-          opacity: 0.85
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { transform: "rotateX(25deg)", transformStyle: "preserve-3d", width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "animate-spinner-orbit",
+          style: {
+            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+            width: "100%",
+            height: "100%",
+            borderRadius: "25%",
+            backgroundColor: "currentColor",
+            opacity: 0.85
+          }
         }
-      }
-    ))
+      ) })
+    }
   );
 }
 const MORPH_SIZES = { sm: 16, default: 24, lg: 34 };
 function OrbitMorphSpinner({ size, color, speed }) {
   const morphSize = MORPH_SIZES[size];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_utils.cn)(orbitTextColorMap[color]),
@@ -446,21 +455,21 @@ function OrbitMorphSpinner({ size, color, speed }) {
         width: morphSize,
         height: morphSize,
         perspective: morphSize * 3
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "animate-spinner-morph",
-        style: {
-          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
-          width: "100%",
-          height: "100%",
-          backgroundColor: "currentColor",
-          opacity: 0.85
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "animate-spinner-morph",
+          style: {
+            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "currentColor",
+            opacity: 0.85
+          }
         }
-      }
-    )
+      )
+    }
   );
 }
 // Annotate the CommonJS export names for ESM import in node: