{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "duck-spinner",
  "title": "Duck Spinner",
  "description": "The duck/ui logo paddling on water, with the wake as expanding rings. Ships the mark into your public folder so the loading path is same-origin. Pass src to spin any image URL instead. Also exports DuckGlyph, the mark used by loading states.",
  "registryDependencies": [
    "@duck/theme"
  ],
  "files": [
    {
      "path": "registry/duck/ui/duck-spinner.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The official duck/ui mark. The registry ships the SVG into your `public/`,\n * so it is a same-origin request: the loading path still works offline and\n * under an `img-src 'self'` policy, which is exactly when a spinner matters.\n * (SVG rather than the site's PNG because the CLI inlines registry files as\n * text — a raster asset would arrive corrupt.) Point `src` at your own image\n * to brand the spinner, or edit this constant once to swap it everywhere —\n * DuckSpinner, QuackButton's loading state and QuackToast's quack variant all\n * read it.\n */\nconst DUCK_MARK_SRC = \"/duck.svg\";\n\ntype DuckGlyphProps = Omit<React.ComponentProps<\"img\">, \"alt\"> & {\n  /** Any image URL: remote, /public path or data URI. */\n  src?: string;\n  /** Leave empty for decoration; the spinner already announces itself. */\n  alt?: string;\n};\n\n/**\n * DuckGlyph — the mark as an image. Reused by the spinner and by loading\n * states, so one `src` covers every place the duck shows up.\n */\nfunction DuckGlyph({\n  className,\n  src = DUCK_MARK_SRC,\n  alt = \"\",\n  ...props\n}: DuckGlyphProps) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      aria-hidden={alt ? undefined : true}\n      draggable={false}\n      decoding=\"async\"\n      className={cn(\n        \"size-full shrink-0 select-none object-contain\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst spinnerSizes = {\n  sm: \"size-5\",\n  default: \"size-8\",\n  lg: \"size-12\",\n} as const;\n\nconst spinnerMotion = {\n  paddle: \"[animation:duck-paddle_0.9s_ease-in-out_infinite]\",\n  spin: \"animate-spin\",\n} as const;\n\n/**\n * DuckSpinner — a duck paddling on water. The rings are the wake.\n */\nfunction DuckSpinner({\n  className,\n  size = \"default\",\n  motion = \"paddle\",\n  src,\n  label = \"Loading\",\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  size?: keyof typeof spinnerSizes;\n  /** paddle rocks the mark, spin rotates it a full turn. */\n  motion?: keyof typeof spinnerMotion;\n  /** Custom mark image. Defaults to the duck/ui logo in your public folder. */\n  src?: string;\n  label?: string;\n}) {\n  return (\n    <span\n      data-slot=\"duck-spinner\"\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"relative inline-grid place-items-center\",\n        spinnerSizes[size],\n        className\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className=\"absolute size-full rounded-full border-2 border-primary/50 [animation:duck-ripple_1.6s_ease-out_infinite]\"\n      />\n      <span\n        aria-hidden\n        className=\"absolute size-full rounded-full border-2 border-primary/40 [animation:duck-ripple_1.6s_ease-out_0.8s_infinite]\"\n      />\n      <DuckGlyph src={src} className={cn(\"relative\", spinnerMotion[motion])} />\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  );\n}\n\nexport { DuckSpinner, DuckGlyph, DUCK_MARK_SRC };\n",
      "type": "registry:ui"
    },
    {
      "path": "public/duck.svg",
      "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" role=\"img\" aria-label=\"duck/ui\">\n  <!--\n    The duck/ui mark as a standalone asset, so the registry can ship it into a\n    consumer's public/ and the loading path stays same-origin. Same geometry as\n    DuckMark (registry/duck/ui/duck-mark.tsx); currentColor is baked to duck\n    lime here because an <img> inherits nothing from the page.\n  -->\n  <path d=\"M10 36 L1 30 L9 46 Z\" fill=\"#cbda42\" />\n  <ellipse cx=\"28\" cy=\"41\" rx=\"21\" ry=\"12.5\" fill=\"#cbda42\" />\n  <circle cx=\"43\" cy=\"21\" r=\"11\" fill=\"#cbda42\" />\n  <path d=\"M52 17.5 L63.5 21.8 L52 26 Z\" fill=\"#f8910e\" />\n  <path d=\"M17 41 q9 7.5 20 1\" stroke=\"#15151a\" stroke-opacity=\"0.32\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\" />\n  <circle cx=\"45.5\" cy=\"18\" r=\"2.3\" fill=\"#15151a\" />\n</svg>\n",
      "type": "registry:file",
      "target": "~/public/duck.svg"
    }
  ],
  "type": "registry:ui"
}