{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tag-field-controlled-example",
  "title": "Tag Field Controlled",
  "description": "tag-field-controlled-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/field",
    "https://intentui.com/r/input",
    "https://intentui.com/r/tag-field"
  ],
  "files": [
    {
      "path": "src/components/examples/forms/tag-field/tag-field-controlled-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport type { Selection } from 'react-aria-components/GridList'\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Label } from '@/components/ui/field'\nimport { Input } from '@/components/ui/input'\nimport { TagField } from '@/components/ui/tag-field'\n\nexport default function TagFieldControlledDemo() {\n  const [codes, setCodes] = useState<Selection>(new Set(['WELCOME10', 'FREESHIP']))\n  const [text, setText] = useState('')\n\n  const handleText = (v: string) => {\n    const cleaned = v\n      .replace(/[^A-Z0-9]/gi, '')\n      .toUpperCase()\n      .slice(0, 10)\n    setText(cleaned)\n  }\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Controlled input</CardTitle>\n        <CardDescription>\n          The input value is managed externally, allowing you to validate, sanitize, or sync it with\n          other parts of your app, such as forms, counters, or APIs.\n        </CardDescription>\n        <CardAction className=\"text-muted-fg text-sm tabular-nums\">{text.length}/10</CardAction>\n      </CardHeader>\n      <CardContent>\n        <TagField\n          value={codes}\n          onChange={setCodes}\n          inputValue={text}\n          onInputValueChange={handleText}\n        >\n          <Label>Coupon codes</Label>\n          <Input placeholder=\"Add codes, press Enter\" />\n        </TagField>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/tag-field-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}