{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer",
  "title": "Shimmer",
  "description": "A light sweep across text for thinking and loading states.",
  "dependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "registry/notra/shimmer/components/shimmer.tsx",
      "content": "import { cn } from \"cn\";\nimport type { CSSProperties } from \"react\";\n\nimport type { ShimmerProps } from \"../types/shimmer\";\n\nconst SHIMMER_GRADIENT =\n  \"linear-gradient(90deg, transparent calc(50% - var(--shimmer-spread)), var(--shimmer-highlight, var(--color-foreground)) 50%, transparent calc(50% + var(--shimmer-spread))), linear-gradient(currentColor, currentColor)\";\n\nexport const Shimmer = ({\n  className,\n  duration = 1.7,\n  paused = false,\n  spread = 4,\n  style,\n  ...props\n}: ShimmerProps) => (\n  <span\n    className={cn(\n      \"animate-shimmer inline-block bg-size-[250%_100%,auto] bg-clip-text bg-no-repeat [-webkit-text-fill-color:transparent] motion-reduce:animate-none motion-reduce:bg-none! motion-reduce:[-webkit-text-fill-color:currentColor]\",\n      paused && \"animate-none bg-none! [-webkit-text-fill-color:currentColor]\",\n      className\n    )}\n    data-slot=\"shimmer\"\n    style={\n      {\n        \"--shimmer-duration\": `${duration}s`,\n        \"--shimmer-spread\": `${spread}ch`,\n        backgroundImage: SHIMMER_GRADIENT,\n        ...style,\n      } as CSSProperties\n    }\n    {...props}\n  />\n);\n",
      "type": "registry:component",
      "target": "components/shimmer/components/shimmer.tsx"
    },
    {
      "path": "registry/notra/shimmer/types/shimmer.ts",
      "content": "import type { ComponentProps } from \"react\";\n\nexport interface ShimmerProps extends ComponentProps<\"span\"> {\n  duration?: number;\n  /** Stops the sweep and shows plain text. */\n  paused?: boolean;\n  spread?: number;\n}\n",
      "type": "registry:lib",
      "target": "components/shimmer/types/shimmer.ts"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-shimmer": "shimmer var(--shimmer-duration, 1.7s) linear infinite"
    }
  },
  "css": {
    "@keyframes shimmer": {
      "from": {
        "background-position": "100% 0"
      },
      "to": {
        "background-position": "0% 0"
      }
    }
  },
  "type": "registry:component"
}