{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-indicator",
  "title": "Loading Indicator",
  "description": "The M3 Expressive loading indicator, morphing through the kit's seven shapes.",
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/loading-indicator.tsx",
      "content": "import type { ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype LoadingIndicatorSize = \"inline\" | \"standalone\"\n\nconst loadingIndicatorSizeClasses: Record<\n  LoadingIndicatorSize,\n  { root: string; shape: string }\n> = {\n  inline: { root: \"size-6\", shape: \"size-[19px]\" },\n  standalone: { root: \"size-12\", shape: \"size-[38px]\" },\n}\n\ntype LoadingIndicatorProps = Omit<\n  ComponentProps<\"span\">,\n  \"children\" | \"role\"\n> & {\n  /** Paints the animated shape on a Primary Container surface. */\n  contained?: boolean\n  /** Selects the kit's text-adjacent or independent loading geometry. */\n  size?: LoadingIndicatorSize\n}\n\n/** A named, indeterminate Material Expressive waiting affordance. */\nfunction LoadingIndicator({\n  className,\n  \"aria-label\": ariaLabel = \"Loading\",\n  contained = false,\n  size = \"standalone\",\n  ...props\n}: LoadingIndicatorProps) {\n  const sizeClasses = loadingIndicatorSizeClasses[size]\n\n  return (\n    <span\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center justify-center\",\n        sizeClasses.root,\n        contained && \"rounded-m3-full bg-m3-primary-container\",\n        className,\n      )}\n      data-contained={contained ? \"\" : undefined}\n      data-slot=\"loading-indicator\"\n      data-size={size}\n      role=\"status\"\n      {...props}\n    >\n      <span\n        className={cn(\n          \"m3-loading-indicator-shape\",\n          contained ? \"bg-m3-on-primary-container\" : \"bg-primary\",\n          sizeClasses.shape,\n        )}\n        data-slot=\"loading-indicator-shape\"\n      />\n    </span>\n  )\n}\n\nexport { LoadingIndicator }\nexport type { LoadingIndicatorProps, LoadingIndicatorSize }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}