{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "description": "Loading indicator for buttons and pending sections; rotating, dots, bars, pulse and shape variants.",
  "registryDependencies": [
    "@ikas/theme",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ui/spinner.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SpinnerVariant =\n  | \"default\"\n  | \"ring\"\n  | \"spokes\"\n  | \"comet\"\n  | \"dual\"\n  | \"dots\"\n  | \"bounce\"\n  | \"grid\"\n  | \"bars\"\n  | \"wave\"\n  | \"ripple\"\n  | \"ping\"\n  | \"orbit\"\n  | \"infinity\"\n  | \"morph\"\n  | \"cradle\"\n\ntype SpinnerProps = React.ComponentProps<\"svg\"> & {\n  /**\n   * Indicator shape. Rotating: `default` (open arc), `ring`, `spokes`, `comet`, `dual`.\n   * Dots: `dots`, `bounce`, `grid`. Bars: `bars`, `wave`. Pulse: `ripple`, `ping`, `orbit`.\n   * Shapes: `infinity`, `morph`, `cradle`.\n   */\n  variant?: SpinnerVariant\n}\n\n/** Sets a part's index, which staggers its animation (see the spinner utilities in theme.css). */\nconst at = (i: number) => ({ \"--i\": i }) as React.CSSProperties\n\nconst INFINITY = \"M12 12c-2-2.67-4-4-6-4a4 4 0 0 0 0 8c2 0 4-1.33 6-4c2-2.67 4-4 6-4a4 4 0 0 1 0 8c-2 0-4-1.33-6-4z\"\n\n/** The root class and the parts each variant draws in a 24×24 box, all in currentColor. */\nconst variants: Record<SpinnerVariant, { className?: string; parts?: React.ReactNode }> = {\n  default: { className: \"animate-spinner-spin\", parts: <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" /> },\n  ring: {\n    className: \"animate-spinner-spin\",\n    parts: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" opacity=\"0.18\" />\n        <path d=\"M12 3a9 9 0 0 1 9 9\" />\n      </>\n    ),\n  },\n  spokes: {\n    parts: Array.from({ length: 8 }, (_, i) => (\n      <line key={i} x1=\"12\" y1=\"2.5\" x2=\"12\" y2=\"6.5\" transform={`rotate(${i * 45} 12 12)`} className=\"animate-spinner-fade\" style={at(i)} />\n    )),\n  },\n  comet: {\n    className:\n      \"animate-spinner-spin rounded-full bg-[conic-gradient(from_0deg,transparent_12%,currentColor)] [mask-image:radial-gradient(farthest-side,transparent_80%,currentColor_82%)]\",\n  },\n  dual: { className: \"animate-spinner-dual\", parts: <circle cx=\"12\" cy=\"12\" r=\"9\" pathLength=\"100\" strokeDasharray=\"25 25\" /> },\n  dots: {\n    parts: [4, 12, 20].map((cx, i) => (\n      <circle key={cx} cx={cx} cy=\"12\" r=\"2.6\" fill=\"currentColor\" stroke=\"none\" className=\"animate-spinner-pulse\" style={at(i)} />\n    )),\n  },\n  bounce: {\n    parts: [4, 12, 20].map((cx, i) => (\n      <circle key={cx} cx={cx} cy=\"13\" r=\"2.4\" fill=\"currentColor\" stroke=\"none\" className=\"animate-spinner-bounce\" style={at(i)} />\n    )),\n  },\n  grid: {\n    parts: Array.from({ length: 9 }, (_, i) => (\n      <rect\n        key={i}\n        x={2 + (i % 3) * 7.5}\n        y={2 + Math.floor(i / 3) * 7.5}\n        width=\"5\"\n        height=\"5\"\n        rx=\"1\"\n        fill=\"currentColor\"\n        stroke=\"none\"\n        className=\"animate-spinner-grid\"\n        style={at((i % 3) + Math.floor(i / 3))}\n      />\n    )),\n  },\n  bars: {\n    parts: [3, 10, 17].map((x, i) => (\n      <rect key={x} x={x} y=\"2\" width=\"4\" height=\"20\" rx=\"2\" fill=\"currentColor\" stroke=\"none\" className=\"animate-spinner-bars\" style={at(i)} />\n    )),\n  },\n  wave: {\n    parts: Array.from({ length: 6 }, (_, i) => (\n      <rect key={i} x={1.6 + i * 3.8} y=\"3\" width=\"2.2\" height=\"18\" rx=\"1.1\" fill=\"currentColor\" stroke=\"none\" className=\"animate-spinner-wave\" style={at(i)} />\n    )),\n  },\n  ripple: {\n    parts: [0, 1].map((i) => <circle key={i} cx=\"12\" cy=\"12\" r=\"10\" strokeWidth=\"1.8\" className=\"animate-spinner-ripple\" style={at(i)} />),\n  },\n  ping: {\n    parts: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\" stroke=\"none\" />\n        <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\" stroke=\"none\" className=\"animate-spinner-ping\" />\n      </>\n    ),\n  },\n  orbit: {\n    className: \"animate-spinner-spin\",\n    parts: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" strokeWidth=\"1.2\" opacity=\"0.18\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\" stroke=\"none\" opacity=\"0.35\" />\n        <circle cx=\"12\" cy=\"3\" r=\"2.6\" fill=\"currentColor\" stroke=\"none\" />\n      </>\n    ),\n  },\n  infinity: {\n    parts: (\n      <>\n        <path d={INFINITY} opacity=\"0.18\" />\n        <path d={INFINITY} pathLength=\"100\" strokeDasharray=\"26 74\" className=\"animate-spinner-trail\" />\n      </>\n    ),\n  },\n  morph: { className: \"animate-spinner-morph bg-current\" },\n  // The end balls swing a little past the box, like a real cradle.\n  cradle: {\n    className: \"overflow-visible\",\n    parts: [5.4, 9.8, 14.2, 18.6].map((cx, i, all) => (\n      <circle\n        key={cx}\n        cx={cx}\n        cy=\"18\"\n        r=\"2.2\"\n        fill=\"currentColor\"\n        stroke=\"none\"\n        className={cn(i === 0 && \"animate-spinner-swing-start\", i === all.length - 1 && \"animate-spinner-swing-end\")}\n        style={{ transformBox: \"view-box\", transformOrigin: `${cx}px 3px` }}\n      />\n    )),\n  },\n}\n\nfunction Spinner({ variant = \"default\", className, ...props }: SpinnerProps) {\n  const { className: variantClassName, parts } = variants[variant]\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      data-slot=\"spinner\"\n      data-variant={variant}\n      role=\"status\"\n      aria-label=\"Yükleniyor\"\n      className={cn(\"size-4\", variantClassName, className)}\n      {...props}\n    >\n      {parts}\n    </svg>\n  )\n}\n\nexport { Spinner, type SpinnerProps, type SpinnerVariant }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/primitives",
  "categories": [
    "primitives",
    "feedback"
  ],
  "type": "registry:ui"
}