{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "spinner",
  "title": "Spinner",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/spinner/spinner.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { spinnerVariants, type SpinnerVariants } from './spinner.variants'\n\nexport type SpinnerSize = NonNullable<SpinnerVariants['size']>\n\n/**\n * Angular port of UIPKGE Spinner (React `Spinner`, which renders the Lucide `Loader2` svg\n * itself). The host is `display: contents`; the inline Loader2 svg carries data-slot,\n * role=\"status\", aria-label=\"Loading\" and the size / tone / spin classes, so the DOM a\n * parent sees (e.g. Button's `[&_svg]` rules) is the same svg React renders.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-spinner, [ui-spinner]',\n  standalone: true,\n  host: { class: 'contents' },\n  template: `<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    data-uipkge=\"\"\n    data-slot=\"spinner\"\n    role=\"status\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.class]=\"svgClass\"\n  >\n    <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n  </svg>`,\n})\nexport class UiSpinnerComponent {\n  @Input() size: SpinnerSize = 'default'\n  @Input('class') className?: string\n  @Input('aria-label') ariaLabel = 'Loading'\n\n  get svgClass(): string {\n    return cn('lucide lucide-loader-circle', spinnerVariants({ size: this.size }), this.className)\n  }\n}\n\nexport { spinnerVariants, type SpinnerVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/spinner/spinner.component.ts"
    },
    {
      "path": "packages/registry-angular/components/spinner/spinner.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\n// motion-safe: honor prefers-reduced-motion (static glyph when reduced).\nexport const spinnerVariants = cva('motion-safe:animate-spin text-muted-foreground', {\n  variants: {\n    size: {\n      default: 'size-6',\n      sm: 'size-4',\n      lg: 'size-8',\n      icon: 'size-4',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport type SpinnerVariants = VariantProps<typeof spinnerVariants>\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/spinner/spinner.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/spinner/index.ts",
      "content": "export { UiSpinnerComponent, spinnerVariants, type SpinnerVariants, type SpinnerSize } from './spinner.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/spinner/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.",
  "categories": [
    "feedback"
  ]
}