{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-velocity-highlight",
  "title": "Velocity Highlight Demo",
  "description": "Interactive highlight with velocity-based scaling effects.",
  "registryDependencies": [
    "@unlumen-ui/velocity-highlight"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/velocity-highlight/index.tsx",
      "content": "\"use client\";\n\nimport {\n  Highlight,\n  HighlightItem,\n} from \"@/components/unlumen-ui/primitives/velocity-highlight\";\n\nconst LINKS = Array.from({ length: 16 }, (_, index) => ({\n  id: `link-${index + 1}`,\n  label: `Link ${String(index + 1).padStart(2, \"0\")}`,\n}));\n\nexport const HighlightDemo = ({ hover = true }: { hover?: boolean }) => {\n  return (\n    <div className=\"flex min-h-[420px] w-full items-center justify-center p-8\">\n      <Highlight\n        mode=\"parent\"\n        hover={hover}\n        defaultValue={hover ? undefined : \"link-1\"}\n        containerClassName=\"grid w-full max-w-2xl grid-cols-4 gap-6 p-6\"\n        className=\"rounded-lg bg-accent\"\n      >\n        {LINKS.map((item) => (\n          <HighlightItem key={item.id} value={item.id} asChild>\n            <button\n              type=\"button\"\n              className=\"relative z-10 cursor-pointer rounded-lg px-4 py-3 text-center text-sm font-medium\"\n            >\n              {item.label}\n            </button>\n          </HighlightItem>\n        ))}\n      </Highlight>\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "VelocityHighlightDemo": {
        "hover": {
          "value": true,
          "type": "boolean"
        }
      }
    }
  },
  "type": "registry:example"
}