{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "loader",
  "title": "loader",
  "description": "loader",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "src/components/ui/loader.tsx",
      "content": "'use client'\n\nimport { ProgressBar } from 'react-aria-components/ProgressBar'\nimport { twMerge } from 'tailwind-merge'\n\nconst Ring = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className={twMerge('size-4', className)}\n    {...props}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={16}\n    height={16}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    aria-hidden=\"true\"\n  >\n    <path\n      stroke=\"currentColor\"\n      strokeOpacity=\"0.25\"\n      strokeWidth=\"3.636\"\n      d=\"M11.909 21a9.09 9.09 0 1 0 0-18.182 9.09 9.09 0 0 0 0 18.182Z\"\n    />\n    <path\n      fill=\"currentColor\"\n      d=\"M4.636 11.91a7.273 7.273 0 0 1 7.273-7.274V1C5.885 1 1 5.885 1 11.91zm1.819 4.81a7.24 7.24 0 0 1-1.819-4.81H1c0 2.764 1.032 5.294 2.727 7.215z\"\n    />\n  </svg>\n)\n\nconst Spin = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (\n  <svg className={twMerge('size-4', className)} viewBox=\"0 0 2400 2400\" {...props}>\n    <g strokeWidth=\"200\" strokeLinecap=\"round\" fill=\"none\">\n      <line x1=\"1200\" y1=\"600\" x2=\"1200\" y2=\"100\" />\n      <line opacity=\"0.5\" x1=\"1200\" y1=\"2300\" x2=\"1200\" y2=\"1800\" />\n      <line opacity=\"0.917\" x1=\"900\" y1=\"680.4\" x2=\"650\" y2=\"247.4\" />\n      <line opacity=\"0.417\" x1=\"1750\" y1=\"2152.6\" x2=\"1500\" y2=\"1719.6\" />\n      <line opacity=\"0.833\" x1=\"680.4\" y1=\"900\" x2=\"247.4\" y2=\"650\" />\n      <line opacity=\"0.333\" x1=\"2152.6\" y1=\"1750\" x2=\"1719.6\" y2=\"1500\" />\n      <line opacity=\"0.75\" x1=\"600\" y1=\"1200\" x2=\"100\" y2=\"1200\" />\n      <line opacity=\"0.25\" x1=\"2300\" y1=\"1200\" x2=\"1800\" y2=\"1200\" />\n      <line opacity=\"0.667\" x1=\"680.4\" y1=\"1500\" x2=\"247.4\" y2=\"1750\" />\n      <line opacity=\"0.167\" x1=\"2152.6\" y1=\"650\" x2=\"1719.6\" y2=\"900\" />\n      <line opacity=\"0.583\" x1=\"900\" y1=\"1719.6\" x2=\"650\" y2=\"2152.6\" />\n      <line opacity=\"0.083\" x1=\"1750\" y1=\"247.4\" x2=\"1500\" y2=\"680.4\" />\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        keyTimes=\"0;0.08333;0.16667;0.25;0.33333;0.41667;0.5;0.58333;0.66667;0.75;0.83333;0.91667\"\n        values=\"0 1199 1199;30 1199 1199;60 1199 1199;90 1199 1199;120 1199 1199;150 1199 1199;180 1199 1199;210 1199 1199;240 1199 1199;270 1199 1199;300 1199 1199;330 1199 1199\"\n        dur=\"0.83333s\"\n        begin=\"0.08333s\"\n        repeatCount=\"indefinite\"\n        calcMode=\"discrete\"\n      />\n    </g>\n  </svg>\n)\n\nconst LOADERS = {\n  ring: Ring,\n  spin: Spin,\n}\n\nconst DEFAULT_SPINNER = 'spin'\n\nexport interface LoaderProps extends Omit<\n  React.ComponentPropsWithoutRef<'svg'>,\n  'display' | 'opacity' | 'intent'\n> {\n  variant?: keyof typeof LOADERS\n  percentage?: number\n  isIndeterminate?: boolean\n  formatOptions?: Intl.NumberFormatOptions\n  ref?: React.RefObject<SVGSVGElement>\n  'data-slot'?: string\n}\n\nexport function Loader({ isIndeterminate = true, ref, ...props }: LoaderProps) {\n  const { className, variant = DEFAULT_SPINNER, ...spinnerProps } = props\n  const LoaderPrimitive = LOADERS[variant in LOADERS ? variant : DEFAULT_SPINNER]\n\n  return (\n    <ProgressBar\n      data-slot={props['data-slot'] ?? 'loader'}\n      aria-label={props['aria-label'] ?? 'Pending...'}\n      formatOptions={props.formatOptions}\n      isIndeterminate={isIndeterminate}\n    >\n      <LoaderPrimitive\n        role=\"presentation\"\n        className={twMerge(\n          'size-4',\n          ['ring'].includes(variant) && 'animate-spin',\n          variant === 'spin' && 'stroke-current',\n          className\n        )}\n        ref={ref}\n        {...spinnerProps}\n      />\n    </ProgressBar>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}