{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-eye-dropper-demo",
  "title": "UseEyeDropperDemo",
  "description": "use-eye-dropper's hook in action.",
  "registryDependencies": [
    "card",
    "button",
    "https://guarahooks.com/r/use-eye-dropper.json"
  ],
  "files": [
    {
      "path": "registry/example/use-eye-dropper-demo.tsx",
      "content": "'use client';\n\nimport React from 'react';\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\n\nimport { useColorPicker } from '@/hooks/guarahooks/use-eye-dropper';\n\nexport function ColorPickerExample() {\n  const { color, error, isSupported, pickColor } = useColorPicker();\n\n  return (\n    <Card className=\"max-w-sm mx-auto shadow-lg border-muted\">\n      <CardHeader>\n        <CardTitle className=\"text-center text-2xl font-bold tracking-tight\">\n          Color Picker\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col items-center gap-4\">\n          <div className=\"w-full text-center\">\n            <p className=\"text-sm text-muted-foreground mb-2\">\n              Click the button below to pick a color from anywhere on your\n              screen.\n            </p>\n          </div>\n          <div\n            className=\"rounded-lg mb-2 h-20 w-20 flex items-center justify-center text-white font-semibold border-4 transition-all duration-300\"\n            style={{\n              background: color || '#888',\n              borderColor: color ? color : '#888',\n              boxShadow: color ? `0 0 0 4px ${color}33` : undefined,\n            }}\n          >\n            {color ? (\n              <span className=\"text-xs font-medium drop-shadow\">{color}</span>\n            ) : (\n              <span className=\"text-xs opacity-70\">No color selected</span>\n            )}\n          </div>\n\n          {isSupported() ? (\n            <Button\n              onClick={pickColor}\n              className=\"w-full flex items-center gap-2\"\n              variant=\"default\"\n              size=\"lg\"\n            >\n              Pick color\n            </Button>\n          ) : (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertTitle>Not Supported</AlertTitle>\n              <AlertDescription>\n                EyeDropper API not supported in this browser.\n              </AlertDescription>\n            </Alert>\n          )}\n\n          {error && (\n            <Alert variant=\"destructive\" className=\"w-full\">\n              <AlertTitle>Error</AlertTitle>\n              <AlertDescription>{error.message}</AlertDescription>\n            </Alert>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-eye-dropper-demo.tsx"
    }
  ],
  "type": "registry:example"
}