{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shader-lens-blur-demo",
  "type": "registry:component",
  "registryDependencies": [
    "shader-lens-blur",
    "color-picker"
  ],
  "files": [
    {
      "path": "registry/default/example/shader-lens-blur-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useId } from \"react\"\nimport { useAtom } from \"jotai\"\nimport { Circle, CircleOff, Sliders, Square, Triangle } from \"lucide-react\"\nimport { motion } from \"motion/react\"\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Switch } from \"@/components/ui/switch\"\n\nimport ColorPicker from \"../ui/color-picker\"\nimport ShaderLensBlur, { configAtom } from \"../ui/shader-lens-blur\"\n\nfunction ShaderLensBlurDemo() {\n  return (\n    <div className=\"grid grid-cols-1 gap-8\">\n      <ShaderLensBlur />\n      <ShaderBlurConfig />\n    </div>\n  )\n}\n\nfunction ShaderBlurConfig() {\n  const [config, setConfig] = useAtom(configAtom)\n  const id = useId()\n  const variationId = `${id}-variation`\n  const enableHoverId = `${id}-enable-hover`\n  const invertMouseId = `${id}-invert-mouse`\n  const widthId = `${id}-width`\n  const heightId = `${id}-height`\n\n  const handleVariationChange = useCallback(\n    (value: string) => {\n      setConfig((prev) => ({ ...prev, variation: parseInt(value) }))\n    },\n    [setConfig]\n  )\n\n  const handleColorChange = useCallback(\n    (key: \"color1\" | \"color2\" | \"color3\" | \"color4\", value: string) => {\n      setConfig((prev) => ({ ...prev, [key]: value }))\n    },\n    [setConfig]\n  )\n\n  const handleDimensionChange = useCallback(\n    (key: \"width\" | \"height\", value: number) => {\n      setConfig((prev) => ({ ...prev, [key]: value }))\n    },\n    [setConfig]\n  )\n\n  const variationIcons = [\n    { icon: Square, label: \"Square\" },\n    { icon: Circle, label: \"Solid Circle\" },\n    { icon: CircleOff, label: \"Hollow Circle\" },\n    { icon: Triangle, label: \"Triangle\" },\n  ]\n\n  return (\n    <Card className=\"border-border bg-card text-card-foreground\">\n      <CardHeader className=\"border-border border-b\">\n        <CardTitle className=\"flex items-center text-lg font-semibold\">\n          <Sliders className=\"mr-2 h-5 w-5\" />\n          Shader Configuration\n        </CardTitle>\n      </CardHeader>\n      <CardContent className=\"space-y-6 p-6\">\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n          <div className=\"space-y-6\">\n            <div className=\"space-y-4\">\n              <Label\n                htmlFor={variationId}\n                className=\"text-muted-foreground text-sm font-medium\"\n              >\n                Variation\n              </Label>\n              <Select\n                value={config.variation.toString()}\n                onValueChange={handleVariationChange}\n              >\n                <SelectTrigger\n                  id={variationId}\n                  className=\"border-border bg-background w-full\"\n                >\n                  <SelectValue placeholder=\"Select variation\" />\n                </SelectTrigger>\n                <SelectContent className=\"border-border bg-popover text-popover-foreground\">\n                  {variationIcons.map((variation, index) => (\n                    <SelectItem\n                      key={variation.label}\n                      value={index.toString()}\n                      className=\"cursor-pointer\"\n                    >\n                      <div className=\"flex items-center space-x-2\">\n                        <variation.icon className=\"h-5 w-5\" />\n                        <span>- {variation.label}</span>\n                      </div>\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <Separator />\n\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-medium\">Colors</h3>\n              <div className=\"grid grid-cols-2 gap-4\">\n                {([\"color1\", \"color2\", \"color3\", \"color4\"] as const).map(\n                  (color) => (\n                    <div key={color} className=\"space-y-2\">\n                      <Label\n                        htmlFor={color}\n                        className=\"text-muted-foreground block text-sm font-medium\"\n                      >\n                        {color}\n                      </Label>\n                      <Popover>\n                        <PopoverTrigger asChild>\n                          <motion.button\n                            whileHover={{ scale: 1.05 }}\n                            whileTap={{ scale: 0.95 }}\n                            className=\"border-border focus-visible:ring-ring focus-visible:ring-offset-background h-10 w-full rounded-md border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n                            style={{ backgroundColor: config[color] }}\n                          />\n                        </PopoverTrigger>\n                        <PopoverContent className=\"border-border w-64 p-3\">\n                          <ColorPicker\n                            color={config[color]}\n                            onChange={(value) =>\n                              handleColorChange(color, value)\n                            }\n                          />\n                        </PopoverContent>\n                      </Popover>\n                    </div>\n                  )\n                )}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"space-y-6\">\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-medium\">Options</h3>\n              <div className=\"flex flex-col space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <Label\n                    htmlFor={enableHoverId}\n                    className=\"text-muted-foreground text-sm font-medium\"\n                  >\n                    Enable Hover\n                  </Label>\n                  <Switch\n                    id={enableHoverId}\n                    checked={config.enableHover}\n                    onCheckedChange={(checked) =>\n                      setConfig((prev) => ({ ...prev, enableHover: checked }))\n                    }\n                  />\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <Label\n                    htmlFor={invertMouseId}\n                    className=\"text-muted-foreground text-sm font-medium\"\n                  >\n                    Invert Mouse\n                  </Label>\n                  <Switch\n                    id={invertMouseId}\n                    checked={config.invertMouse}\n                    onCheckedChange={(checked) =>\n                      setConfig((prev) => ({ ...prev, invertMouse: checked }))\n                    }\n                  />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-medium\">Dimensions</h3>\n              <div className=\"space-y-6\">\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <Label\n                      htmlFor={widthId}\n                      className=\"text-muted-foreground text-sm font-medium\"\n                    >\n                      Width\n                    </Label>\n                    <span className=\"text-muted-foreground text-sm\">\n                      {config.width}px\n                    </span>\n                  </div>\n                  <Slider\n                    id={widthId}\n                    min={100}\n                    max={1000}\n                    step={10}\n                    value={[parseInt(config.width.toString())]}\n                    onValueChange={([value]) =>\n                      handleDimensionChange(\"width\", value)\n                    }\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <Label\n                      htmlFor={heightId}\n                      className=\"text-muted-foreground text-sm font-medium\"\n                    >\n                      Height\n                    </Label>\n                    <span className=\"text-muted-foreground text-sm\">\n                      {config.height}px\n                    </span>\n                  </div>\n                  <Slider\n                    id={heightId}\n                    min={100}\n                    max={1000}\n                    step={10}\n                    value={[parseInt(config.height.toString())]}\n                    onValueChange={([value]) =>\n                      handleDimensionChange(\"height\", value)\n                    }\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\nexport default ShaderLensBlurDemo\n",
      "type": "registry:component"
    }
  ]
}