{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-side-by-side-slide",
  "title": "Side By Side Slide Demo",
  "description": "Image comparison slider showing before/after with configurable divider and handle.",
  "registryDependencies": [
    "@unlumen-ui/side-by-side-slide"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/side-by-side-slide/index.tsx",
      "content": "\"use client\";\n\nimport { SideBySideSlide } from \"@/components/unlumen-ui/side-by-side-slide\";\n\ninterface SideBySideSlideDemoProps {\n  orientation: \"horizontal\" | \"vertical\";\n  initialPosition: number;\n  dividerColor: string;\n  dividerWidth: number;\n  showHandle: boolean;\n  handleSize: number;\n  handleColor: string;\n  cursor: \"none\" | \"col-resize\" | \"row-resize\" | \"pointer\";\n  stiffness: number;\n  damping: number;\n}\n\nexport default function SideBySideSlideDemo({\n  orientation = \"horizontal\",\n  initialPosition = 50,\n  dividerColor = \"white\",\n  dividerWidth = 2,\n  showHandle = true,\n  handleSize = 16,\n  handleColor = \"white\",\n  cursor = \"none\",\n  stiffness = 300,\n  damping = 30,\n}: SideBySideSlideDemoProps) {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      <div className=\"w-full max-w-2xl overflow-hidden rounded-xl\">\n        <SideBySideSlide\n          beforeImage=\"https://urjypba3n2iozf8u.public.blob.vercel-storage.com/villa.png\"\n          afterImage=\"https://urjypba3n2iozf8u.public.blob.vercel-storage.com/villa-sketch.png\"\n          beforeAlt=\"Modern house exterior\"\n          afterAlt=\"Modern house interior\"\n          orientation={orientation}\n          initialPosition={initialPosition}\n          dividerColor={dividerColor}\n          dividerWidth={dividerWidth}\n          showHandle={showHandle}\n          handleSize={handleSize}\n          handleColor={handleColor}\n          cursor={cursor}\n          springOptions={{ stiffness, damping }}\n          className=\"aspect-video\"\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "SideBySideSlideDemo": {
        "orientation": {
          "value": "horizontal",
          "options": {
            "Horizontal": "horizontal",
            "Vertical": "vertical"
          }
        },
        "initialPosition": {
          "value": 50,
          "min": 0,
          "max": 100,
          "step": 5
        },
        "dividerColor": {
          "value": "white",
          "options": {
            "White": "white",
            "Black": "black",
            "Blue": "#3b82f6",
            "Red": "#ef4444",
            "Green": "#22c55e",
            "Purple": "#a855f7",
            "Yellow": "#eab308"
          }
        },
        "dividerWidth": {
          "value": 2,
          "min": 1,
          "max": 10,
          "step": 1
        },
        "showHandle": {
          "value": true
        },
        "handleSize": {
          "value": 40,
          "min": 24,
          "max": 72,
          "step": 4
        },
        "handleColor": {
          "value": "white",
          "options": {
            "White": "white",
            "Black": "black",
            "Blue": "#3b82f6",
            "Red": "#ef4444",
            "Green": "#22c55e",
            "Purple": "#a855f7",
            "Yellow": "#eab308"
          }
        },
        "cursor": {
          "value": "none",
          "options": {
            "Hidden": "none",
            "Resize": "col-resize",
            "Pointer": "pointer"
          }
        },
        "stiffness": {
          "value": 300,
          "min": 50,
          "max": 600,
          "step": 25
        },
        "damping": {
          "value": 30,
          "min": 5,
          "max": 80,
          "step": 5
        }
      }
    }
  },
  "type": "registry:example"
}