{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-highlight",
  "title": "Highlight Demo",
  "description": "Shared sliding highlight pill moving between nav items on hover.",
  "registryDependencies": ["@soralabs/highlight"],
  "files": [
    {
      "path": "registry/demo/primitives/effects/highlight/index.tsx",
      "content": "\"use client\";\n\nimport {\n  Highlight,\n  HighlightItem,\n} from \"@/components/sora-ui/effects/highlight\";\n\nconst ITEMS = [\"Design\", \"Engineering\", \"Product\", \"Marketing\", \"Growth\"];\nconst MOBILE_ITEMS = ITEMS.slice(0, 3);\n\nconst HIGHLIGHT_PROPS = {\n  className: \"rounded-full bg-foreground/8\",\n  containerClassName: \"flex items-center\",\n  mode: \"parent\" as const,\n  trigger: \"hover\" as const,\n};\n\nfunction ItemList({ items }: { items: string[] }) {\n  return (\n    <Highlight {...HIGHLIGHT_PROPS}>\n      {items.map((item) => (\n        <HighlightItem key={item} value={item}>\n          <button\n            className=\"relative z-10 cursor-pointer px-4 py-1.5 text-foreground/60 text-sm transition-colors hover:text-foreground\"\n            type=\"button\"\n          >\n            {item}\n          </button>\n        </HighlightItem>\n      ))}\n    </Highlight>\n  );\n}\n\nexport function HighlightDemo() {\n  return (\n    <div className=\"flex min-h-40 items-center justify-center\">\n      <div className=\"sm:hidden\">\n        <ItemList items={MOBILE_ITEMS} />\n      </div>\n      <div className=\"hidden sm:block\">\n        <ItemList items={ITEMS} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/sora-ui/demo/effects/highlight.tsx"
    }
  ],
  "type": "registry:ui"
}