{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-clipped-circle",
  "title": "Clipped Circle Demo",
  "description": "Demo showing a clipped circle spotlight effect on a button, a card, and an image.",
  "registryDependencies": [
    "@unlumen-ui/clipped-circle"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/clipped-circle/index.tsx",
      "content": "\"use client\";\n\nimport { ClippedCircle } from \"@/components/unlumen-ui/primitives/clipped-circle\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface ClippedCircleDemoProps {\n  circleSize: number;\n}\n\nexport default function ClippedCircleDemo({\n  circleSize = 400,\n}: ClippedCircleDemoProps) {\n  const actions = [\n    { label: \"Docs\", variant: \"default\" },\n    { label: \"Install\", variant: \"outline\" },\n    { label: \"Components\", variant: \"ghost\" },\n  ] as const;\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-xl flex-col gap-5 p-6\">\n      <div className=\"grid grid-cols-3 gap-3\">\n        {actions.map(({ label, variant }) => (\n          <Button\n            key={label}\n            variant={variant}\n            size=\"sm\"\n            className=\"relative overflow-hidden\"\n          >\n            {label}\n            <ClippedCircle circleSize={260} circleClassName=\"bg-white\" />\n          </Button>\n        ))}\n      </div>\n\n      <div className=\"relative min-h-75 overflow-hidden rounded-2xl border border-border/70 bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.16),transparent_38%),linear-gradient(135deg,hsl(var(--muted)),hsl(var(--background)))] p-8 shadow-sm\">\n        <div className=\"flex h-full min-h-59 items-center justify-center rounded-xl border border-border/60 bg-white p-10 shadow-inner\">\n          <img\n            src=\"/docs/unlumen-ui.svg\"\n            alt=\"Unlumen UI\"\n            className=\"h-auto w-full max-w-52 object-contain\"\n          />\n        </div>\n        <ClippedCircle circleSize={circleSize} circleClassName=\"bg-white\" />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "ClippedCircleDemo": {
        "circleSize": {
          "value": 400,
          "min": 100,
          "max": 800,
          "step": 50
        }
      }
    }
  },
  "type": "registry:example"
}