{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "color-field-controlled-example",
  "title": "Color Field Controlled",
  "description": "color-field-controlled-example",
  "dependencies": [
    "@react-stately/color"
  ],
  "registryDependencies": [
    "https://intentui.com/r/color-field",
    "https://intentui.com/r/field",
    "https://intentui.com/r/input"
  ],
  "files": [
    {
      "path": "src/components/examples/colors/color-field/color-field-controlled-example.tsx",
      "content": "'use client'\n\nimport { type Color, parseColor } from '@react-stately/color'\nimport { useState } from 'react'\nimport { ControlledValues } from '@/components/examples/colors/controlled-values'\nimport { ColorField } from '@/components/ui/color-field'\nimport { Label } from '@/components/ui/field'\nimport { Input } from '@/components/ui/input'\n\nexport default function ColorFieldControlledDemo() {\n  const [color, setColor] = useState(parseColor('#155DFC'))\n  return (\n    <div className=\"flex flex-col gap-2 lg:flex-row lg:gap-4\">\n      <ColorField\n        name=\"color\"\n        className=\"min-w-56\"\n        value={color}\n        onChange={(newColor: Color | null) => newColor && setColor(newColor)}\n      >\n        <Label>Pick a color</Label>\n        <Input placeholder=\"#155DFC\" />\n      </ColorField>\n      <ControlledValues color={color} />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/color-field-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}