{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-hover-expand",
  "title": "Hover Expand Demo",
  "description": "Five travel destinations that expand vertically on hover to reveal a full-width photograph.",
  "registryDependencies": [
    "@unlumen-ui/hover-expand"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/hover-expand/index.tsx",
      "content": "\"use client\";\n\nimport {\n  HoverExpand,\n  type HoverExpandProps,\n} from \"@/components/unlumen-ui/hover-expand\";\n\nconst ITEMS: HoverExpandProps[\"items\"] = [\n  {\n    label: \"Kyoto\",\n    sublabel: \"Japan\",\n    description: \"Ancient temples hidden among bamboo groves\",\n    image:\n      \"https://images.unsplash.com/vector-1749746338337-b3c0a35a5975?q=80&w=2242&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    imageAlt: \"Kyoto, Japan\",\n  },\n  {\n    label: \"Lisbon\",\n    sublabel: \"Portugal\",\n    description: \"Sunlit hills and crumbling azulejo facades\",\n    image:\n      \"https://images.unsplash.com/vector-1766815276251-fa4fa3d81ce9?q=80&w=2242&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    imageAlt: \"Lisbon, Portugal\",\n  },\n  {\n    label: \"Marrakech\",\n    sublabel: \"Morocco\",\n    description: \"A labyrinth of souks washed in saffron light\",\n    image:\n      \"https://images.unsplash.com/vector-1769292737537-e37dc3c08514?q=80&w=2282&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    imageAlt: \"Marrakech, Morocco\",\n  },\n  {\n    label: \"Reykjavik\",\n    sublabel: \"Iceland\",\n    description: \"Aurora skies above volcanic black sand shores\",\n    image:\n      \"https://images.unsplash.com/vector-1738163099330-5c9841c97c39?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    imageAlt: \"Reykjavik, Iceland\",\n  },\n  {\n    label: \"Oaxaca\",\n    sublabel: \"Mexico\",\n    description: \"Mezcal smoke and murals on colonial walls\",\n    image:\n      \"https://images.unsplash.com/vector-1743446716355-85d9578a73d9?q=80&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    imageAlt: \"Oaxaca, Mexico\",\n  },\n];\n\ntype HoverExpandDemoProps = Pick<\n  HoverExpandProps,\n  \"collapsedHeight\" | \"expandedHeight\"\n>;\n\nexport const HoverExpandDemo = ({\n  collapsedHeight = 68,\n  expandedHeight = 320,\n}: HoverExpandDemoProps) => {\n  return (\n    <div className=\"flex items-center justify-center min-h-[520px] w-full p-8\">\n      <div className=\"w-full max-w-2xl\">\n        <HoverExpand\n          items={ITEMS}\n          collapsedHeight={collapsedHeight}\n          expandedHeight={expandedHeight}\n        />\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "HoverExpandDemo": {
        "collapsedHeight": {
          "value": 68,
          "min": 48,
          "max": 120,
          "step": 4
        },
        "expandedHeight": {
          "value": 320,
          "min": 200,
          "max": 500,
          "step": 20
        }
      }
    }
  },
  "type": "registry:example"
}