@karakuri-ui/react 0.3.2 → 0.3.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/spinner.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/** Ring SVG sizes per size variant (diameter in px) */\nconst RING_SIZES = {\n  sm: 16,\n  default: 24,\n  lg: 32,\n} as const\n\n/** Ring stroke widths per size */\nconst RING_STROKE = {\n  sm: 2,\n  default: 2.5,\n  lg: 3,\n} as const\n\n/** Dot sizes (diameter in px) */\nconst DOT_SIZES = {\n  sm: 4,\n  default: 6,\n  lg: 8,\n} as const\n\n/** Dot container gap per size */\nconst DOT_GAP = {\n  sm: 3,\n  default: 4,\n  lg: 5,\n} as const\n\n/** Bar widths per size */\nconst BAR_WIDTHS = {\n  sm: 2,\n  default: 3,\n  lg: 4,\n} as const\n\n/** Bar heights per size */\nconst BAR_HEIGHTS = {\n  sm: 12,\n  default: 16,\n  lg: 24,\n} as const\n\n/** Bar gap per size */\nconst BAR_GAP = {\n  sm: 2,\n  default: 3,\n  lg: 4,\n} as const\n\n/** Orbit sizes (diameter in px) */\nconst ORBIT_SIZES = {\n  sm: 22,\n  default: 32,\n  lg: 44,\n} as const\n\n/** Orbit ring stroke widths per size */\nconst ORBIT_STROKE = {\n  sm: 2.5,\n  default: 3,\n  lg: 3.5,\n} as const\n\n\n/** Number of dots in dots variant */\nconst DOT_COUNT = 3\n\n/** Number of bars in bars variant */\nconst BAR_COUNT = 4\n\n/** SVG viewBox for ring spinner */\nconst RING_VIEWBOX = 24\n\n/** SVG center for ring spinner */\nconst RING_CENTER = 12\n\n// ============================================================================\n// Color mapping\n// ============================================================================\n\nconst strokeColorMap = {\n  default: 'stroke-foreground',\n  primary: 'stroke-primary',\n  current: 'stroke-current',\n} as const\n\nconst bgColorMap = {\n  default: 'bg-foreground',\n  primary: 'bg-primary',\n  current: 'bg-current',\n} as const\n\n// ============================================================================\n// Speed mapping\n// ============================================================================\n\n/** Speed durations in ms for ring/dots/bars */\nconst SPEED_MS = { slow: 1500, default: 1000, fast: 750 } as const\n/** Speed durations in ms for orbit (slower) */\nconst ORBIT_SPEED_MS = { slow: 2000, default: 1500, fast: 1000 } as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst spinnerVariants = cva(\n  'inline-flex items-center justify-center shrink-0',\n  {\n    variants: {\n      size: {\n        sm: '',\n        default: '',\n        lg: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type OrbitStyle = 'ring' | 'dots' | 'cube' | 'flip' | 'morph'\n\nexport interface SpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {\n  /** Visual variant */\n  variant?: 'ring' | 'dots' | 'bars' | 'orbit'\n  /** Orbit sub-style (only when variant=\"orbit\") */\n  orbitStyle?: OrbitStyle\n  /** Spinner color */\n  color?: 'default' | 'primary' | 'current'\n  /** Animation speed */\n  speed?: 'slow' | 'default' | 'fast'\n  /** Accessibility label */\n  label?: string\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({\n    className,\n    variant = 'ring',\n    orbitStyle = 'ring',\n    size,\n    color = 'default',\n    speed = 'default',\n    label,\n    ...props\n  }, ref) => {\n    const resolvedSize = size || 'default'\n\n    const orbitMap = {\n      ring: OrbitSpinner,\n      dots: OrbitDotsSpinner,\n      cube: OrbitCubeSpinner,\n      flip: OrbitFlipSpinner,\n      morph: OrbitMorphSpinner,\n    } as const\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label={label || 'Loading'}\n        className={cn(spinnerVariants({ size }), className)}\n        {...props}\n      >\n        {variant === 'ring' && (\n          <RingSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'dots' && (\n          <DotsSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'bars' && (\n          <BarsSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'orbit' && (() => {\n          const OrbitComponent = orbitMap[orbitStyle]\n          return <OrbitComponent size={resolvedSize} color={color} speed={speed} />\n        })()}\n      </div>\n    )\n  }\n)\nSpinner.displayName = 'Spinner'\n\n// ============================================================================\n// Ring Spinner (SVG circle with animate-spin)\n// ============================================================================\n\nfunction RingSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = RING_SIZES[size]\n  const stroke = RING_STROKE[size]\n  const r = (RING_VIEWBOX - stroke) / 2\n  const circumference = 2 * Math.PI * r\n\n  return (\n    <svg\n      viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n      width={diameter}\n      height={diameter}\n      fill=\"none\"\n      className=\"animate-spin\"\n      style={{ animationDuration: `${SPEED_MS[speed]}ms` }}\n    >\n      {/* Track */}\n      <circle\n        cx={RING_CENTER}\n        cy={RING_CENTER}\n        r={r}\n        className=\"stroke-border\"\n        strokeWidth={stroke}\n      />\n      {/* Indicator */}\n      <circle\n        cx={RING_CENTER}\n        cy={RING_CENTER}\n        r={r}\n        className={strokeColorMap[color]}\n        strokeWidth={stroke}\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference * 0.75}\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\n// ============================================================================\n// Dots Spinner (3 pulsing dots)\n// ============================================================================\n\nfunction DotsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const dotSize = DOT_SIZES[size]\n  const gap = DOT_GAP[size]\n\n  return (\n    <div className=\"inline-flex items-center\" style={{ gap }}>\n      {Array.from({ length: DOT_COUNT }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            'rounded-full animate-spinner-dot',\n            bgColorMap[color],\n          )}\n          style={{\n            width: dotSize,\n            height: dotSize,\n            animationDuration: `${SPEED_MS[speed]}ms`,\n            animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ============================================================================\n// Bars Spinner (4 pulsing bars)\n// ============================================================================\n\nfunction BarsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const barWidth = BAR_WIDTHS[size]\n  const barHeight = BAR_HEIGHTS[size]\n  const gap = BAR_GAP[size]\n\n  return (\n    <div className=\"inline-flex items-center\" style={{ gap, height: barHeight }}>\n      {Array.from({ length: BAR_COUNT }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            'rounded-full animate-spinner-bar origin-center',\n            bgColorMap[color],\n          )}\n          style={{\n            width: barWidth,\n            height: barHeight,\n            animationDuration: `${SPEED_MS[speed]}ms`,\n            animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Spinner (3D rotating ring)\n// ============================================================================\n\nconst orbitTextColorMap = {\n  default: 'text-foreground',\n  primary: 'text-primary',\n  current: '',\n} as const\n\nfunction OrbitSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = ORBIT_SIZES[size]\n  const stroke = ORBIT_STROKE[size]\n  const r = (RING_VIEWBOX - stroke * 2) / 2\n  const circumference = 2 * Math.PI * r\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: diameter,\n        height: diameter,\n        perspective: diameter * 3,\n        position: 'relative',\n      }}\n    >\n      {/* Ring 1 — solid, Y-axis rotation */}\n      <svg\n        viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n        width={diameter}\n        height={diameter}\n        fill=\"none\"\n        className=\"absolute inset-0 animate-spinner-orbit\"\n        style={{ animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }}\n      >\n        <circle\n          cx={RING_CENTER}\n          cy={RING_CENTER}\n          r={r}\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n        />\n      </svg>\n      {/* Ring 2 — solid, perpendicular, reverse direction */}\n      <svg\n        viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n        width={diameter}\n        height={diameter}\n        fill=\"none\"\n        className=\"absolute inset-0 animate-spinner-orbit\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          transform: 'rotateZ(90deg)',\n          animationDirection: 'reverse',\n          animationDelay: '-0.4s',\n          opacity: 0.35,\n        }}\n      >\n        <circle\n          cx={RING_CENTER}\n          cy={RING_CENTER}\n          r={r}\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n        />\n      </svg>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Dots — 3 dots orbiting in 3D path\n// ============================================================================\n\n/** Orbit dot size per spinner size */\nconst ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 } as const\n\nfunction OrbitDotsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = ORBIT_SIZES[size]\n  const dotSize = ORBIT_DOT_SIZE[size]\n  const orbitRadius = (diameter - dotSize) / 2\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: diameter,\n        height: diameter,\n        perspective: diameter * 3,\n        position: 'relative',\n      }}\n    >\n      <div\n        className=\"animate-spinner-orbit\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          width: '100%',\n          height: '100%',\n          position: 'relative',\n          transformStyle: 'preserve-3d',\n        }}\n      >\n        {[0, 120, 240].map((angle) => (\n          <div\n            key={angle}\n            className=\"absolute rounded-full\"\n            style={{\n              width: dotSize,\n              height: dotSize,\n              backgroundColor: 'currentColor',\n              left: '50%',\n              top: '50%',\n              transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Cube — wireframe cube rotating in 3D\n// ============================================================================\n\n/** Cube face sizes per spinner size */\nconst CUBE_SIZES = { sm: 12, default: 18, lg: 26 } as const\n\nfunction OrbitCubeSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const cubeSize = CUBE_SIZES[size]\n  const half = cubeSize / 2\n  const radius = Math.round(cubeSize * 0.15)\n\n  const overlap = 1\n  const faceBase: React.CSSProperties = {\n    position: 'absolute',\n    width: cubeSize + overlap * 2,\n    height: cubeSize + overlap * 2,\n    backgroundColor: 'currentColor',\n    borderRadius: radius,\n    top: -overlap,\n    left: -overlap,\n  }\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: cubeSize,\n        height: cubeSize,\n        perspective: cubeSize * 6,\n      }}\n    >\n      {/* Diagonal tilt — shows top + corner for depth */}\n      <div\n        style={{\n          width: cubeSize,\n          height: cubeSize,\n          transform: 'rotateX(-25deg) rotateZ(15deg)',\n          transformStyle: 'preserve-3d',\n        }}\n      >\n        {/* Y-axis rotation */}\n        <div\n          className=\"animate-spinner-orbit\"\n          style={{\n            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n            width: cubeSize,\n            height: cubeSize,\n            position: 'relative',\n            transformStyle: 'preserve-3d',\n          }}\n        >\n          <div style={{ ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 }} />\n          <div style={{ ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 }} />\n          <div style={{ ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n          <div style={{ ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n          <div style={{ ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 }} />\n          <div style={{ ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 }} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Flip — rounded square tumbling in 3D\n// ============================================================================\n\n/** Flip square sizes per spinner size */\nconst FLIP_SIZES = { sm: 14, default: 20, lg: 28 } as const\n\nfunction OrbitFlipSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const sqSize = FLIP_SIZES[size]\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: sqSize,\n        height: sqSize,\n        perspective: sqSize * 4,\n      }}\n    >\n      <div style={{ transform: 'rotateX(25deg)', transformStyle: 'preserve-3d', width: '100%', height: '100%' }}>\n        <div\n          className=\"animate-spinner-orbit\"\n          style={{\n            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n            width: '100%',\n            height: '100%',\n            borderRadius: '25%',\n            backgroundColor: 'currentColor',\n            opacity: 0.85,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Morph — organic shape morphing + 3D rotation\n// ============================================================================\n\n/** Morph sizes per spinner size */\nconst MORPH_SIZES = { sm: 16, default: 24, lg: 34 } as const\n\nfunction OrbitMorphSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const morphSize = MORPH_SIZES[size]\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: morphSize,\n        height: morphSize,\n        perspective: morphSize * 3,\n      }}\n    >\n      <div\n        className=\"animate-spinner-morph\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          width: '100%',\n          height: '100%',\n          backgroundColor: 'currentColor',\n          opacity: 0.85,\n        }}\n      />\n    </div>\n  )\n}\n\nexport { Spinner, spinnerVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AAOnB,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,UAAU;AAAA,EACd,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,UAAU;AAAA,EACd,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAIA,MAAM,YAAY;AAGlB,MAAM,YAAY;AAGlB,MAAM,eAAe;AAGrB,MAAM,cAAc;AAMpB,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,aAAa;AAAA,EACjB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAOA,MAAM,WAAW,EAAE,MAAM,MAAM,SAAS,KAAM,MAAM,IAAI;AAExD,MAAM,iBAAiB,EAAE,MAAM,KAAM,SAAS,MAAM,MAAM,IAAK;AAM/D,MAAM,sBAAkB;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA2BA,MAAM,UAAU,MAAM;AAAA,EACpB,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,eAAe,QAAQ;AAE7B,UAAM,WAAW;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,SAAS;AAAA,QACrB,eAAW,iBAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,MAEH,YAAY,UACX,oCAAC,eAAY,MAAM,cAAc,OAAc,OAAc;AAAA,MAE9D,YAAY,UACX,oCAAC,eAAY,MAAM,cAAc,OAAc,OAAc;AAAA,MAE9D,YAAY,UACX,oCAAC,eAAY,MAAM,cAAc,OAAc,OAAc;AAAA,MAE9D,YAAY,YAAY,MAAM;AAC7B,cAAM,iBAAiB,SAAS,UAAU;AAC1C,eAAO,oCAAC,kBAAe,MAAM,cAAc,OAAc,OAAc;AAAA,MACzE,GAAG;AAAA,IACL;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,SAAS,YAAY,EAAE,MAAM,OAAO,MAAM,GAIvC;AACD,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,KAAK,eAAe,UAAU;AACpC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,YAAY,IAAI,YAAY;AAAA,MAC5C,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,mBAAmB,GAAG,SAAS,KAAK,CAAC,KAAK;AAAA;AAAA,IAGnD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,WAAU;AAAA,QACV,aAAa;AAAA;AAAA,IACf;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ;AAAA,QACA,WAAW,eAAe,KAAK;AAAA,QAC/B,aAAa;AAAA,QACb,iBAAiB;AAAA,QACjB,kBAAkB,gBAAgB;AAAA,QAClC,eAAc;AAAA;AAAA,IAChB;AAAA,EACF;AAEJ;AAMA,SAAS,YAAY,EAAE,MAAM,OAAO,MAAM,GAIvC;AACD,QAAM,UAAU,UAAU,IAAI;AAC9B,QAAM,MAAM,QAAQ,IAAI;AAExB,SACE,oCAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,IAAI,KACpD,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,CAAC,GAAG,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAW;AAAA,QACT;AAAA,QACA,WAAW,KAAK;AAAA,MAClB;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,mBAAmB,GAAG,SAAS,KAAK,CAAC;AAAA,QACrC,gBAAgB,GAAG,KAAK,SAAS,KAAK,IAAI,YAAY,IAAI;AAAA,MAC5D;AAAA;AAAA,EACF,CACD,CACH;AAEJ;AAMA,SAAS,YAAY,EAAE,MAAM,OAAO,MAAM,GAIvC;AACD,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,YAAY,YAAY,IAAI;AAClC,QAAM,MAAM,QAAQ,IAAI;AAExB,SACE,oCAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,KAAK,QAAQ,UAAU,KACvE,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,CAAC,GAAG,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAW;AAAA,QACT;AAAA,QACA,WAAW,KAAK;AAAA,MAClB;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,mBAAmB,GAAG,SAAS,KAAK,CAAC;AAAA,QACrC,gBAAgB,GAAG,KAAK,SAAS,KAAK,IAAI,YAAY,IAAI;AAAA,MAC5D;AAAA;AAAA,EACF,CACD,CACH;AAEJ;AAMA,MAAM,oBAAoB;AAAA,EACxB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,aAAa,EAAE,MAAM,OAAO,MAAM,GAIxC;AACD,QAAM,WAAW,YAAY,IAAI;AACjC,QAAM,SAAS,aAAa,IAAI;AAChC,QAAM,KAAK,eAAe,SAAS,KAAK;AACxC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,iBAAG,kBAAkB,KAAK,CAAC;AAAA,MACtC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa,WAAW;AAAA,QACxB,UAAU;AAAA,MACZ;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,YAAY,IAAI,YAAY;AAAA,QAC5C,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,mBAAmB,GAAG,eAAe,KAAK,CAAC,KAAK;AAAA;AAAA,MAEzD;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ;AAAA,UACA,QAAO;AAAA,UACP,aAAa;AAAA;AAAA,MACf;AAAA,IACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,YAAY,IAAI,YAAY;AAAA,QAC5C,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,UACL,mBAAmB,GAAG,eAAe,KAAK,CAAC;AAAA,UAC3C,WAAW;AAAA,UACX,oBAAoB;AAAA,UACpB,gBAAgB;AAAA,UAChB,SAAS;AAAA,QACX;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ;AAAA,UACA,QAAO;AAAA,UACP,aAAa;AAAA;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEJ;AAOA,MAAM,iBAAiB,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,EAAE;AAElD,SAAS,iBAAiB,EAAE,MAAM,OAAO,MAAM,GAI5C;AACD,QAAM,WAAW,YAAY,IAAI;AACjC,QAAM,UAAU,eAAe,IAAI;AACnC,QAAM,eAAe,WAAW,WAAW;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,iBAAG,kBAAkB,KAAK,CAAC;AAAA,MACtC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa,WAAW;AAAA,QACxB,UAAU;AAAA,MACZ;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,mBAAmB,GAAG,eAAe,KAAK,CAAC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,gBAAgB;AAAA,QAClB;AAAA;AAAA,MAEC,CAAC,GAAG,KAAK,GAAG,EAAE,IAAI,CAAC,UAClB;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,MAAM;AAAA,YACN,KAAK;AAAA,YACL,WAAW,gCAAgC,KAAK,mBAAmB,WAAW;AAAA,UAChF;AAAA;AAAA,MACF,CACD;AAAA,IACH;AAAA,EACF;AAEJ;AAOA,MAAM,aAAa,EAAE,IAAI,IAAI,SAAS,IAAI,IAAI,GAAG;AAEjD,SAAS,iBAAiB,EAAE,MAAM,OAAO,MAAM,GAI5C;AACD,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,OAAO,WAAW;AACxB,QAAM,SAAS,KAAK,MAAM,WAAW,IAAI;AAEzC,QAAM,UAAU;AAChB,QAAM,WAAgC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO,WAAW,UAAU;AAAA,IAC5B,QAAQ,WAAW,UAAU;AAAA,IAC7B,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,KAAK,CAAC;AAAA,IACN,MAAM,CAAC;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,iBAAG,kBAAkB,KAAK,CAAC;AAAA,MACtC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa,WAAW;AAAA,MAC1B;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,gBAAgB;AAAA,QAClB;AAAA;AAAA,MAGA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,mBAAmB,GAAG,eAAe,KAAK,CAAC;AAAA,YAC3C,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,gBAAgB;AAAA,UAClB;AAAA;AAAA,QAEA,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,cAAc,IAAI,OAAO,SAAS,KAAK,GAAG;AAAA,QAChF,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,cAAc,CAAC,IAAI,OAAO,SAAS,IAAI,GAAG;AAAA,QAChF,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,8BAA8B,IAAI,OAAO,SAAS,IAAI,GAAG;AAAA,QAC/F,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,6BAA6B,IAAI,OAAO,SAAS,IAAI,GAAG;AAAA,QAC9F,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,6BAA6B,IAAI,OAAO,SAAS,KAAK,GAAG;AAAA,QAC/F,oCAAC,SAAI,OAAO,EAAE,GAAG,UAAU,WAAW,8BAA8B,IAAI,OAAO,SAAS,KAAK,GAAG;AAAA,MAClG;AAAA,IACF;AAAA,EACF;AAEJ;AAOA,MAAM,aAAa,EAAE,IAAI,IAAI,SAAS,IAAI,IAAI,GAAG;AAEjD,SAAS,iBAAiB,EAAE,MAAM,OAAO,MAAM,GAI5C;AACD,QAAM,SAAS,WAAW,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,iBAAG,kBAAkB,KAAK,CAAC;AAAA,MACtC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa,SAAS;AAAA,MACxB;AAAA;AAAA,IAEA,oCAAC,SAAI,OAAO,EAAE,WAAW,kBAAkB,gBAAgB,eAAe,OAAO,QAAQ,QAAQ,OAAO,KACtG;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,mBAAmB,GAAG,eAAe,KAAK,CAAC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX;AAAA;AAAA,IACF,CACF;AAAA,EACF;AAEJ;AAOA,MAAM,cAAc,EAAE,IAAI,IAAI,SAAS,IAAI,IAAI,GAAG;AAElD,SAAS,kBAAkB,EAAE,MAAM,OAAO,MAAM,GAI7C;AACD,QAAM,YAAY,YAAY,IAAI;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,iBAAG,kBAAkB,KAAK,CAAC;AAAA,MACtC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa,YAAY;AAAA,MAC3B;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,mBAAmB,GAAG,eAAe,KAAK,CAAC;AAAA,UAC3C,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX;AAAA;AAAA,IACF;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/spinner.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/** Ring SVG sizes per size variant (diameter in px) */\nconst RING_SIZES = {\n  sm: 16,\n  default: 24,\n  lg: 32,\n} as const\n\n/** Ring stroke widths per size */\nconst RING_STROKE = {\n  sm: 2,\n  default: 2.5,\n  lg: 3,\n} as const\n\n/** Dot sizes (diameter in px) */\nconst DOT_SIZES = {\n  sm: 4,\n  default: 6,\n  lg: 8,\n} as const\n\n/** Dot container gap per size */\nconst DOT_GAP = {\n  sm: 3,\n  default: 4,\n  lg: 5,\n} as const\n\n/** Bar widths per size */\nconst BAR_WIDTHS = {\n  sm: 2,\n  default: 3,\n  lg: 4,\n} as const\n\n/** Bar heights per size */\nconst BAR_HEIGHTS = {\n  sm: 12,\n  default: 16,\n  lg: 24,\n} as const\n\n/** Bar gap per size */\nconst BAR_GAP = {\n  sm: 2,\n  default: 3,\n  lg: 4,\n} as const\n\n/** Orbit sizes (diameter in px) */\nconst ORBIT_SIZES = {\n  sm: 22,\n  default: 32,\n  lg: 44,\n} as const\n\n/** Orbit ring stroke widths per size */\nconst ORBIT_STROKE = {\n  sm: 2.5,\n  default: 3,\n  lg: 3.5,\n} as const\n\n\n/** Number of dots in dots variant */\nconst DOT_COUNT = 3\n\n/** Number of bars in bars variant */\nconst BAR_COUNT = 4\n\n/** SVG viewBox for ring spinner */\nconst RING_VIEWBOX = 24\n\n/** SVG center for ring spinner */\nconst RING_CENTER = 12\n\n// ============================================================================\n// Color mapping\n// ============================================================================\n\nconst strokeColorMap = {\n  default: 'stroke-foreground',\n  primary: 'stroke-primary',\n  current: 'stroke-current',\n} as const\n\nconst bgColorMap = {\n  default: 'bg-foreground',\n  primary: 'bg-primary',\n  current: 'bg-current',\n} as const\n\n// ============================================================================\n// Speed mapping\n// ============================================================================\n\n/** Speed durations in ms for ring/dots/bars */\nconst SPEED_MS = { slow: 1500, default: 1000, fast: 750 } as const\n/** Speed durations in ms for orbit (slower) */\nconst ORBIT_SPEED_MS = { slow: 2000, default: 1500, fast: 1000 } as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst spinnerVariants = cva(\n  'inline-flex items-center justify-center shrink-0',\n  {\n    variants: {\n      size: {\n        sm: '',\n        default: '',\n        lg: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type OrbitStyle = 'ring' | 'dots' | 'cube' | 'flip' | 'morph'\n\nexport interface SpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {\n  /** Visual variant */\n  variant?: 'ring' | 'dots' | 'bars' | 'orbit'\n  /** Orbit sub-style (only when variant=\"orbit\") */\n  orbitStyle?: OrbitStyle\n  /** Spinner color */\n  color?: 'default' | 'primary' | 'current'\n  /** Animation speed */\n  speed?: 'slow' | 'default' | 'fast'\n  /** Accessibility label */\n  label?: string\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({\n    className,\n    variant = 'ring',\n    orbitStyle = 'ring',\n    size,\n    color = 'default',\n    speed = 'default',\n    label,\n    ...props\n  }, ref) => {\n    const resolvedSize = size || 'default'\n\n    const orbitMap = {\n      ring: OrbitSpinner,\n      dots: OrbitDotsSpinner,\n      cube: OrbitCubeSpinner,\n      flip: OrbitFlipSpinner,\n      morph: OrbitMorphSpinner,\n    } as const\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label={label || 'Loading'}\n        className={cn(spinnerVariants({ size }), className)}\n        {...props}\n      >\n        {variant === 'ring' && (\n          <RingSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'dots' && (\n          <DotsSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'bars' && (\n          <BarsSpinner size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'orbit' && (() => {\n          const OrbitComponent = orbitMap[orbitStyle]\n          return <OrbitComponent size={resolvedSize} color={color} speed={speed} />\n        })()}\n      </div>\n    )\n  }\n)\nSpinner.displayName = 'Spinner'\n\n// ============================================================================\n// Ring Spinner (SVG circle with animate-spin)\n// ============================================================================\n\nfunction RingSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = RING_SIZES[size]\n  const stroke = RING_STROKE[size]\n  const r = (RING_VIEWBOX - stroke) / 2\n  const circumference = 2 * Math.PI * r\n\n  return (\n    <svg\n      viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n      width={diameter}\n      height={diameter}\n      fill=\"none\"\n      className=\"animate-spin\"\n      style={{ animationDuration: `${SPEED_MS[speed]}ms` }}\n    >\n      {/* Track */}\n      <circle\n        cx={RING_CENTER}\n        cy={RING_CENTER}\n        r={r}\n        className=\"stroke-border\"\n        strokeWidth={stroke}\n      />\n      {/* Indicator */}\n      <circle\n        cx={RING_CENTER}\n        cy={RING_CENTER}\n        r={r}\n        className={strokeColorMap[color]}\n        strokeWidth={stroke}\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference * 0.75}\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\n// ============================================================================\n// Dots Spinner (3 pulsing dots)\n// ============================================================================\n\nfunction DotsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const dotSize = DOT_SIZES[size]\n  const gap = DOT_GAP[size]\n\n  return (\n    <div className=\"inline-flex items-center\" style={{ gap }}>\n      {Array.from({ length: DOT_COUNT }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            'rounded-full animate-spinner-dot',\n            bgColorMap[color],\n          )}\n          style={{\n            width: dotSize,\n            height: dotSize,\n            animationDuration: `${SPEED_MS[speed]}ms`,\n            animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ============================================================================\n// Bars Spinner (4 pulsing bars)\n// ============================================================================\n\nfunction BarsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const barWidth = BAR_WIDTHS[size]\n  const barHeight = BAR_HEIGHTS[size]\n  const gap = BAR_GAP[size]\n\n  return (\n    <div className=\"inline-flex items-center\" style={{ gap, height: barHeight }}>\n      {Array.from({ length: BAR_COUNT }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            'rounded-full animate-spinner-bar origin-center',\n            bgColorMap[color],\n          )}\n          style={{\n            width: barWidth,\n            height: barHeight,\n            animationDuration: `${SPEED_MS[speed]}ms`,\n            animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Spinner (3D rotating ring)\n// ============================================================================\n\nconst orbitTextColorMap = {\n  default: 'text-foreground',\n  primary: 'text-primary',\n  current: '',\n} as const\n\nfunction OrbitSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = ORBIT_SIZES[size]\n  const stroke = ORBIT_STROKE[size]\n  const r = (RING_VIEWBOX - stroke * 2) / 2\n  const circumference = 2 * Math.PI * r\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: diameter,\n        height: diameter,\n        perspective: diameter * 3,\n        position: 'relative',\n      }}\n    >\n      {/* Ring 1 — solid, Y-axis rotation */}\n      <svg\n        viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n        width={diameter}\n        height={diameter}\n        fill=\"none\"\n        className=\"absolute inset-0 animate-spinner-orbit\"\n        style={{ animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }}\n      >\n        <circle\n          cx={RING_CENTER}\n          cy={RING_CENTER}\n          r={r}\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n        />\n      </svg>\n      {/* Ring 2 — solid, perpendicular, reverse direction */}\n      <svg\n        viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n        width={diameter}\n        height={diameter}\n        fill=\"none\"\n        className=\"absolute inset-0 animate-spinner-orbit\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          transform: 'rotateZ(90deg)',\n          animationDirection: 'reverse',\n          animationDelay: '-0.4s',\n          opacity: 0.35,\n        }}\n      >\n        <circle\n          cx={RING_CENTER}\n          cy={RING_CENTER}\n          r={r}\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n        />\n      </svg>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Dots — 3 dots orbiting in 3D path\n// ============================================================================\n\n/** Orbit dot size per spinner size */\nconst ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 } as const\n\nfunction OrbitDotsSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const diameter = ORBIT_SIZES[size]\n  const dotSize = ORBIT_DOT_SIZE[size]\n  const orbitRadius = (diameter - dotSize) / 2\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: diameter,\n        height: diameter,\n        perspective: diameter * 3,\n        position: 'relative',\n      }}\n    >\n      <div\n        className=\"animate-spinner-orbit\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          width: '100%',\n          height: '100%',\n          position: 'relative',\n          transformStyle: 'preserve-3d',\n        }}\n      >\n        {[0, 120, 240].map((angle) => (\n          <div\n            key={angle}\n            className=\"absolute rounded-full\"\n            style={{\n              width: dotSize,\n              height: dotSize,\n              backgroundColor: 'currentColor',\n              left: '50%',\n              top: '50%',\n              transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Cube — wireframe cube rotating in 3D\n// ============================================================================\n\n/** Cube face sizes per spinner size */\nconst CUBE_SIZES = { sm: 12, default: 18, lg: 26 } as const\n\nfunction OrbitCubeSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const cubeSize = CUBE_SIZES[size]\n  const half = cubeSize / 2\n  const radius = Math.round(cubeSize * 0.15)\n\n  const overlap = 1\n  const faceBase: React.CSSProperties = {\n    position: 'absolute',\n    width: cubeSize + overlap * 2,\n    height: cubeSize + overlap * 2,\n    backgroundColor: 'currentColor',\n    borderRadius: radius,\n    top: -overlap,\n    left: -overlap,\n  }\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: cubeSize,\n        height: cubeSize,\n        perspective: cubeSize * 6,\n      }}\n    >\n      {/* Diagonal tilt — shows top + corner for depth */}\n      <div\n        style={{\n          width: cubeSize,\n          height: cubeSize,\n          transform: 'rotateX(-25deg) rotateZ(15deg)',\n          transformStyle: 'preserve-3d',\n        }}\n      >\n        {/* Y-axis rotation */}\n        <div\n          className=\"animate-spinner-orbit\"\n          style={{\n            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n            width: cubeSize,\n            height: cubeSize,\n            position: 'relative',\n            transformStyle: 'preserve-3d',\n          }}\n        >\n          <div style={{ ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 }} />\n          <div style={{ ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 }} />\n          <div style={{ ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n          <div style={{ ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n          <div style={{ ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 }} />\n          <div style={{ ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 }} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Flip — rounded square tumbling in 3D\n// ============================================================================\n\n/** Flip square sizes per spinner size */\nconst FLIP_SIZES = { sm: 14, default: 20, lg: 28 } as const\n\nfunction OrbitFlipSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const sqSize = FLIP_SIZES[size]\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: sqSize,\n        height: sqSize,\n        perspective: sqSize * 4,\n      }}\n    >\n      <div style={{ transform: 'rotateX(25deg)', transformStyle: 'preserve-3d', width: '100%', height: '100%' }}>\n        <div\n          className=\"animate-spinner-orbit\"\n          style={{\n            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n            width: '100%',\n            height: '100%',\n            borderRadius: '25%',\n            backgroundColor: 'currentColor',\n            opacity: 0.85,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ============================================================================\n// Orbit Morph — organic shape morphing + 3D rotation\n// ============================================================================\n\n/** Morph sizes per spinner size */\nconst MORPH_SIZES = { sm: 16, default: 24, lg: 34 } as const\n\nfunction OrbitMorphSpinner({ size, color, speed }: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'current'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const morphSize = MORPH_SIZES[size]\n\n  return (\n    <div\n      className={cn(orbitTextColorMap[color])}\n      style={{\n        width: morphSize,\n        height: morphSize,\n        perspective: morphSize * 3,\n      }}\n    >\n      <div\n        className=\"animate-spinner-morph\"\n        style={{\n          animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n          width: '100%',\n          height: '100%',\n          backgroundColor: 'currentColor',\n          opacity: 0.85,\n        }}\n      />\n    </div>\n  )\n}\n\nexport { Spinner, spinnerVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/spinner.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -97,22 +98,24 @@ const Spinner = React.forwardRef(
       flip: OrbitFlipSpinner,
       morph: OrbitMorphSpinner
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         role: "status",
         "aria-label": label || "Loading",
         className: 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__ */ jsx(RingSpinner, { size: resolvedSize, color, speed }),
+          variant === "dots" && /* @__PURE__ */ jsx(DotsSpinner, { size: resolvedSize, color, speed }),
+          variant === "bars" && /* @__PURE__ */ jsx(BarsSpinner, { size: resolvedSize, color, speed }),
+          variant === "orbit" && (() => {
+            const OrbitComponent = orbitMap[orbitStyle];
+            return /* @__PURE__ */ jsx(OrbitComponent, { size: resolvedSize, color, speed });
+          })()
+        ]
+      }
     );
   }
 );
@@ -122,7 +125,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__ */ jsxs(
     "svg",
     {
       viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
@@ -130,40 +133,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__ */ jsx(
+          "circle",
+          {
+            cx: RING_CENTER,
+            cy: RING_CENTER,
+            r,
+            className: "stroke-border",
+            strokeWidth: stroke
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "inline-flex items-center", style: { gap }, children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      key: i,
       className: cn(
         "rounded-full animate-spinner-dot",
         bgColorMap[color]
@@ -174,17 +178,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__ */ jsx("div", { className: "inline-flex items-center", style: { gap, height: barHeight }, children: Array.from({ length: BAR_COUNT }, (_, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      key: i,
       className: cn(
         "rounded-full animate-spinner-bar origin-center",
         bgColorMap[color]
@@ -195,8 +199,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",
@@ -208,7 +213,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__ */ jsxs(
     "div",
     {
       className: cn(orbitTextColorMap[color]),
@@ -217,56 +222,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__ */ 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__ */ jsx(
+              "circle",
+              {
+                cx: RING_CENTER,
+                cy: RING_CENTER,
+                r,
+                stroke: "currentColor",
+                strokeWidth: stroke
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
+              "circle",
+              {
+                cx: RING_CENTER,
+                cy: RING_CENTER,
+                r,
+                stroke: "currentColor",
+                strokeWidth: stroke
+              }
+            )
+          }
+        )
+      ]
+    }
   );
 }
 const ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 };
@@ -274,7 +281,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__ */ jsx(
     "div",
     {
       className: cn(orbitTextColorMap[color]),
@@ -283,36 +290,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__ */ 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__ */ 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 };
@@ -330,7 +337,7 @@ function OrbitCubeSpinner({ size, color, speed }) {
     top: -overlap,
     left: -overlap
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(orbitTextColorMap[color]),
@@ -338,44 +345,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__ */ 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__ */ jsxs(
+            "div",
+            {
+              className: "animate-spinner-orbit",
+              style: {
+                animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+                width: cubeSize,
+                height: cubeSize,
+                position: "relative",
+                transformStyle: "preserve-3d"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 } }),
+                /* @__PURE__ */ jsx("div", { style: { ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 } }),
+                /* @__PURE__ */ jsx("div", { style: { ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 } }),
+                /* @__PURE__ */ jsx("div", { style: { ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 } }),
+                /* @__PURE__ */ jsx("div", { style: { ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 } }),
+                /* @__PURE__ */ 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__ */ jsx(
     "div",
     {
       className: cn(orbitTextColorMap[color]),
@@ -383,28 +392,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__ */ jsx("div", { style: { transform: "rotateX(25deg)", transformStyle: "preserve-3d", width: "100%", height: "100%" }, children: /* @__PURE__ */ 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__ */ jsx(
     "div",
     {
       className: cn(orbitTextColorMap[color]),
@@ -412,21 +421,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__ */ jsx(
+        "div",
+        {
+          className: "animate-spinner-morph",
+          style: {
+            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "currentColor",
+            opacity: 0.85
+          }
         }
-      }
-    )
+      )
+    }
   );
 }
 export {