@7onic-ui/react 0.3.8 → 0.3.10

package/dist/chunk-D3NTQNDW.mjs

@@ -0,0 +1,440 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/spinner.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var RING_SIZES = {
+  sm: 16,
+  default: 24,
+  lg: 32
+};
+var RING_STROKE = {
+  sm: 2,
+  default: 2.5,
+  lg: 3
+};
+var DOT_SIZES = {
+  sm: 4,
+  default: 6,
+  lg: 8
+};
+var DOT_GAP = {
+  sm: 3,
+  default: 4,
+  lg: 5
+};
+var BAR_WIDTHS = {
+  sm: 2,
+  default: 3,
+  lg: 4
+};
+var BAR_HEIGHTS = {
+  sm: 12,
+  default: 16,
+  lg: 24
+};
+var BAR_GAP = {
+  sm: 2,
+  default: 3,
+  lg: 4
+};
+var ORBIT_SIZES = {
+  sm: 22,
+  default: 32,
+  lg: 44
+};
+var ORBIT_STROKE = {
+  sm: 2.5,
+  default: 3,
+  lg: 3.5
+};
+var DOT_COUNT = 3;
+var BAR_COUNT = 4;
+var RING_VIEWBOX = 24;
+var RING_CENTER = 12;
+var strokeColorMap = {
+  default: "stroke-foreground",
+  primary: "stroke-primary",
+  current: "stroke-current"
+};
+var bgColorMap = {
+  default: "bg-foreground",
+  primary: "bg-primary",
+  current: "bg-current"
+};
+var SPEED_MS = { slow: 1500, default: 1e3, fast: 750 };
+var ORBIT_SPEED_MS = { slow: 2e3, default: 1500, fast: 1e3 };
+var spinnerVariants = cva(
+  "inline-flex items-center justify-center shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Spinner = React.forwardRef(
+  ({
+    className,
+    variant = "ring",
+    orbitStyle = "ring",
+    size,
+    color = "default",
+    speed = "default",
+    label,
+    ...props
+  }, ref) => {
+    const resolvedSize = size || "default";
+    const orbitMap = {
+      ring: OrbitSpinner,
+      dots: OrbitDotsSpinner,
+      cube: OrbitCubeSpinner,
+      flip: OrbitFlipSpinner,
+      morph: OrbitMorphSpinner
+    };
+    return /* @__PURE__ */ React.createElement(
+      "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 });
+      })()
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+function RingSpinner({ size, color, speed }) {
+  const diameter = RING_SIZES[size];
+  const stroke = RING_STROKE[size];
+  const r = (RING_VIEWBOX - stroke) / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
+      width: diameter,
+      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"
+      }
+    )
+  );
+}
+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(
+    "div",
+    {
+      key: i,
+      className: cn(
+        "rounded-full animate-spinner-dot",
+        bgColorMap[color]
+      ),
+      style: {
+        width: dotSize,
+        height: dotSize,
+        animationDuration: `${SPEED_MS[speed]}ms`,
+        animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`
+      }
+    }
+  )));
+}
+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(
+    "div",
+    {
+      key: i,
+      className: cn(
+        "rounded-full animate-spinner-bar origin-center",
+        bgColorMap[color]
+      ),
+      style: {
+        width: barWidth,
+        height: barHeight,
+        animationDuration: `${SPEED_MS[speed]}ms`,
+        animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`
+      }
+    }
+  )));
+}
+var orbitTextColorMap = {
+  default: "text-foreground",
+  primary: "text-primary",
+  current: ""
+};
+function OrbitSpinner({ size, color, speed }) {
+  const diameter = ORBIT_SIZES[size];
+  const stroke = ORBIT_STROKE[size];
+  const r = (RING_VIEWBOX - stroke * 2) / 2;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(orbitTextColorMap[color]),
+      style: {
+        width: diameter,
+        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
+        }
+      )
+    )
+  );
+}
+var ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 };
+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(
+    "div",
+    {
+      className: cn(orbitTextColorMap[color]),
+      style: {
+        width: diameter,
+        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(
+        "div",
+        {
+          key: angle,
+          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)`
+          }
+        }
+      ))
+    )
+  );
+}
+var CUBE_SIZES = { sm: 12, default: 18, lg: 26 };
+function OrbitCubeSpinner({ size, color, speed }) {
+  const cubeSize = CUBE_SIZES[size];
+  const half = cubeSize / 2;
+  const radius = Math.round(cubeSize * 0.15);
+  const overlap = 1;
+  const faceBase = {
+    position: "absolute",
+    width: cubeSize + overlap * 2,
+    height: cubeSize + overlap * 2,
+    backgroundColor: "currentColor",
+    borderRadius: radius,
+    top: -overlap,
+    left: -overlap
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(orbitTextColorMap[color]),
+      style: {
+        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(
+        "div",
+        {
+          className: "animate-spinner-orbit",
+          style: {
+            animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
+            width: cubeSize,
+            height: cubeSize,
+            position: "relative",
+            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 } })
+      )
+    )
+  );
+}
+var FLIP_SIZES = { sm: 14, default: 20, lg: 28 };
+function OrbitFlipSpinner({ size, color, speed }) {
+  const sqSize = FLIP_SIZES[size];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(orbitTextColorMap[color]),
+      style: {
+        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
+        }
+      }
+    ))
+  );
+}
+var MORPH_SIZES = { sm: 16, default: 24, lg: 34 };
+function OrbitMorphSpinner({ size, color, speed }) {
+  const morphSize = MORPH_SIZES[size];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(orbitTextColorMap[color]),
+      style: {
+        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
+        }
+      }
+    )
+  );
+}
+
+export {
+  spinnerVariants,
+  Spinner
+};
+//# sourceMappingURL=chunk-D3NTQNDW.mjs.map

package/dist/chunk-D3NTQNDW.mjs.map

@@ -0,0 +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\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/chunk-DDRYEJBJ.mjs

@@ -0,0 +1,164 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/progress.tsx
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
+var CIRCULAR_VIEWBOX = 100;
+var CIRCULAR_CENTER = 50;
+var CIRCULAR_SIZES = {
+  sm: 32,
+  default: 48,
+  lg: 64
+};
+var CIRCULAR_THICKNESS = {
+  sm: 4,
+  default: 5,
+  lg: 6
+};
+var CIRCULAR_FONT_SIZES = {
+  sm: "text-2xs",
+  default: "text-xs",
+  lg: "text-sm"
+};
+var linearTrackVariants = cva(
+  "relative w-full overflow-hidden bg-border rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        default: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var colorMap = {
+  default: "bg-foreground",
+  primary: "bg-primary"
+};
+var circularColorMap = {
+  default: "stroke-foreground",
+  primary: "stroke-primary"
+};
+var valueFontSizes = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base"
+};
+var Progress = React.forwardRef(({
+  className,
+  type = "linear",
+  value = 0,
+  max = 100,
+  size,
+  variant = "default",
+  color = "default",
+  indicatorClassName,
+  showValue = false,
+  formatLabel,
+  animated = false,
+  thickness,
+  label,
+  ...props
+}, ref) => {
+  const resolvedSize = size || "default";
+  const clampedValue = Math.min(Math.max(value, 0), max);
+  const percentage = clampedValue / max * 100;
+  const valueLabel = formatLabel ? formatLabel(clampedValue, max) : `${Math.round(percentage)}%`;
+  if (type === "circular") {
+    const diameter = CIRCULAR_SIZES[resolvedSize];
+    const strokeWidth = thickness ?? CIRCULAR_THICKNESS[resolvedSize];
+    const r = (CIRCULAR_VIEWBOX - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * r;
+    const offset = circumference * (1 - percentage / 100);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn("inline-flex items-center gap-2", className),
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "relative", style: { width: diameter, height: diameter } }, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          viewBox: `0 0 ${CIRCULAR_VIEWBOX} ${CIRCULAR_VIEWBOX}`,
+          className: "transform -rotate-90",
+          width: diameter,
+          height: diameter
+        },
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            cx: CIRCULAR_CENTER,
+            cy: CIRCULAR_CENTER,
+            r,
+            fill: "none",
+            className: "stroke-border",
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            cx: CIRCULAR_CENTER,
+            cy: CIRCULAR_CENTER,
+            r,
+            fill: "none",
+            className: cn(indicatorClassName || circularColorMap[color], "transition-[stroke-dashoffset] duration-normal ease-out"),
+            strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            strokeLinecap: "round"
+          }
+        )
+      ), showValue && resolvedSize !== "sm" && /* @__PURE__ */ React.createElement("div", { className: cn(
+        "absolute inset-0 flex items-center justify-center font-semibold font-mono tabular-nums text-foreground",
+        CIRCULAR_FONT_SIZES[resolvedSize]
+      ) }, valueLabel))
+    );
+  }
+  const stripedBg = variant === "striped" ? "bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]" : "";
+  return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-3", showValue && "w-full", className) }, /* @__PURE__ */ React.createElement(
+    ProgressPrimitive.Root,
+    {
+      ref,
+      className: cn(linearTrackVariants({ size })),
+      value: clampedValue,
+      max,
+      "aria-label": label,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      ProgressPrimitive.Indicator,
+      {
+        className: cn(
+          "h-full transition-[width] duration-normal ease-out rounded-full",
+          indicatorClassName || colorMap[color],
+          stripedBg,
+          animated && variant === "striped" && "animate-progress-stripe"
+        ),
+        style: { width: `${percentage}%` }
+      }
+    )
+  ), showValue && /* @__PURE__ */ React.createElement("span", { className: cn(
+    "shrink-0 font-semibold font-mono tabular-nums text-foreground",
+    valueFontSizes[resolvedSize]
+  ) }, valueLabel));
+});
+Progress.displayName = "Progress";
+
+export {
+  linearTrackVariants,
+  Progress
+};
+//# sourceMappingURL=chunk-DDRYEJBJ.mjs.map

package/dist/chunk-DDRYEJBJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/progress.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Circular SVG viewBox size */\nconst CIRCULAR_VIEWBOX = 100\n/** Circular center point */\nconst CIRCULAR_CENTER = 50\n\n/** Circular sizes (diameter in px) */\nconst CIRCULAR_SIZES = {\n  sm: 32,\n  default: 48,\n  lg: 64,\n} as const\n\n/** Circular stroke thickness per size */\nconst CIRCULAR_THICKNESS = {\n  sm: 4,\n  default: 5,\n  lg: 6,\n} as const\n\n/** Circular value font sizes */\nconst CIRCULAR_FONT_SIZES = {\n  sm: 'text-2xs',\n  default: 'text-xs',\n  lg: 'text-sm',\n} as const\n\n// ============================================================================\n// Linear Progress\n// ============================================================================\n\nconst linearTrackVariants = cva(\n  'relative w-full overflow-hidden bg-border rounded-full',\n  {\n    variants: {\n      size: {\n        sm: 'h-1',\n        default: 'h-2',\n        lg: 'h-3',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\nconst colorMap = {\n  default: 'bg-foreground',\n  primary: 'bg-primary',\n} as const\n\nconst circularColorMap = {\n  default: 'stroke-foreground',\n  primary: 'stroke-primary',\n} as const\n\nconst valueFontSizes = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'children'>,\n    VariantProps<typeof linearTrackVariants> {\n  /** Progress type */\n  type?: 'linear' | 'circular'\n  /** Current value (0 to max) */\n  value?: number\n  /** Maximum value */\n  max?: number\n  /** Visual variant (linear only) */\n  variant?: 'default' | 'striped'\n  /** Indicator color */\n  color?: 'default' | 'primary'\n  /** Custom indicator class (overrides color) */\n  indicatorClassName?: string\n  /** Show percentage value */\n  showValue?: boolean\n  /** Custom label formatter */\n  formatLabel?: (value: number, max: number) => string\n  /** Animate striped variant */\n  animated?: boolean\n  /** Circular stroke thickness override */\n  thickness?: number\n  /** Accessibility label */\n  label?: string\n}\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  ProgressProps\n>(({\n  className,\n  type = 'linear',\n  value = 0,\n  max = 100,\n  size,\n  variant = 'default',\n  color = 'default',\n  indicatorClassName,\n  showValue = false,\n  formatLabel,\n  animated = false,\n  thickness,\n  label,\n  ...props\n}, ref) => {\n  const resolvedSize = size || 'default'\n  const clampedValue = Math.min(Math.max(value, 0), max)\n  const percentage = (clampedValue / max) * 100\n\n  const valueLabel = formatLabel\n    ? formatLabel(clampedValue, max)\n    : `${Math.round(percentage)}%`\n\n  // ── Circular ──\n  if (type === 'circular') {\n    const diameter = CIRCULAR_SIZES[resolvedSize]\n    const strokeWidth = thickness ?? CIRCULAR_THICKNESS[resolvedSize]\n    const r = (CIRCULAR_VIEWBOX - strokeWidth) / 2\n    const circumference = 2 * Math.PI * r\n    const offset = circumference * (1 - percentage / 100)\n\n    return (\n      <div\n        className={cn('inline-flex items-center gap-2', className)}\n        role=\"progressbar\"\n        aria-valuenow={clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-label={label}\n      >\n        <div className=\"relative\" style={{ width: diameter, height: diameter }}>\n          <svg\n            viewBox={`0 0 ${CIRCULAR_VIEWBOX} ${CIRCULAR_VIEWBOX}`}\n            className=\"transform -rotate-90\"\n            width={diameter}\n            height={diameter}\n          >\n            {/* Track */}\n            <circle\n              cx={CIRCULAR_CENTER}\n              cy={CIRCULAR_CENTER}\n              r={r}\n              fill=\"none\"\n              className=\"stroke-border\"\n              strokeWidth={strokeWidth}\n            />\n            {/* Indicator */}\n            <circle\n              cx={CIRCULAR_CENTER}\n              cy={CIRCULAR_CENTER}\n              r={r}\n              fill=\"none\"\n              className={cn(indicatorClassName || circularColorMap[color], 'transition-[stroke-dashoffset] duration-normal ease-out')}\n              strokeWidth={strokeWidth}\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n            />\n          </svg>\n          {/* Center value */}\n          {showValue && resolvedSize !== 'sm' && (\n            <div className={cn(\n              'absolute inset-0 flex items-center justify-center font-semibold font-mono tabular-nums text-foreground',\n              CIRCULAR_FONT_SIZES[resolvedSize]\n            )}>\n              {valueLabel}\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  // ── Linear ──\n  const stripedBg = variant === 'striped'\n    ? 'bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]'\n    : ''\n\n  return (\n    <div className={cn('flex items-center gap-3', showValue && 'w-full', className)}>\n      <ProgressPrimitive.Root\n        ref={ref}\n        className={cn(linearTrackVariants({ size }))}\n        value={clampedValue}\n        max={max}\n        aria-label={label}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn(\n            'h-full transition-[width] duration-normal ease-out rounded-full',\n            indicatorClassName || colorMap[color],\n            stripedBg,\n            animated && variant === 'striped' && 'animate-progress-stripe',\n          )}\n          style={{ width: `${percentage}%` }}\n        />\n      </ProgressPrimitive.Root>\n      {showValue && (\n        <span className={cn(\n          'shrink-0 font-semibold font-mono tabular-nums text-foreground',\n          valueFontSizes[resolvedSize]\n        )}>\n          {valueLabel}\n        </span>\n      )}\n    </div>\n  )\n})\nProgress.displayName = 'Progress'\n\nexport { Progress, linearTrackVariants }\n"],"mappings":"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","names":[]}