@usevyre/ai-context 1.0.1 → 1.1.0

package/dist/index.js

@@ -1,7 +1,7 @@
-// @usevyre/ai-context v1.0.0
+// @usevyre/ai-context v1.1.0
 // Auto-generated — do not edit directly. Edit src/schema/components.json instead.
 
-export const version = "1.0.0";
+export const version = "1.1.0";
 
 export const fullContext = `# useVyre Design System — AI Context
 # Version: 0.2.0
@@ -886,6 +886,188 @@ import { Text, Heading, Lead, Code, Blockquote } from "@usevyre/react"
 
 ---
 
+### ButtonGroup
+
+Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.
+
+\`\`\`tsx
+import { ButtonGroup, Button } from "@usevyre/react"
+
+// Props:
+// orientation    = "horizontal" | "vertical" (default: horizontal)
+// attached       = boolean (default: false)
+// size           = "sm" | "md" | "lg" | "icon"
+
+// Examples:
+<ButtonGroup attached>
+  <Button variant="secondary">Day</Button>
+  <Button variant="secondary">Week</Button>
+  <Button variant="secondary">Month</Button>
+</ButtonGroup>
+<ButtonGroup orientation="vertical" attached>
+  <Button variant="secondary">Top</Button>
+  <Button variant="secondary">Bottom</Button>
+</ButtonGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`ButtonGroup variant="..."\` → Set variant on each <Button> inside the group
+- ❌ \`ButtonGroup without Button children\` → Place <Button> elements as direct children
+
+---
+
+### TagsInput
+
+Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.
+
+\`\`\`tsx
+import { TagsInput } from "@usevyre/react"
+
+// Props:
+// value          = string[]
+// onChange       = (tags: string[]) => void
+// placeholder    = string
+// disabled       = boolean (default: false)
+// max            = number
+// size           = "sm" | "md" | "lg" (default: md)
+
+// Examples:
+const [tags, setTags] = useState<string[]>([]);
+<TagsInput value={tags} onChange={setTags} placeholder="Add a tag…" />
+<TagsInput value={tags} onChange={setTags} max={5} />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagsInput value={string}\` → Pass an array: value={['react','vue']}
+- ❌ \`TagsInput without onChange\` → Provide value and onChange (React) or v-model (Vue)
+
+---
+
+### Combobox
+
+Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).
+
+\`\`\`tsx
+import { Combobox } from "@usevyre/react"
+
+// Props:
+// options        = { value: string; label: string; disabled?: boolean }[]
+// value          = string | null
+// onChange       = (value: string | null) => void
+// placeholder    = string (default: "Search…")
+// disabled       = boolean (default: false)
+// size           = "sm" | "md" | "lg" (default: md)
+// emptyText      = string (default: "No results")
+
+// Examples:
+const [lang, setLang] = useState<string | null>(null);
+<Combobox
+  options={[{ value: "ts", label: "TypeScript" }, { value: "go", label: "Go" }]}
+  value={lang}
+  onChange={setLang}
+  placeholder="Search language…"
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Combobox value=""\` → Use value={null} for no selection
+- ❌ \`Combobox options={string[]}\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`Using Combobox for command palette\` → Use Command for command palettes
+
+---
+
+### DataGrid
+
+Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.
+
+\`\`\`tsx
+import { DataGrid } from "@usevyre/react"
+
+// Props:
+// columns        = { key: string; label: string; sortable?: boolean; width?: string }[]
+// rows           = Record<string, unknown>[]
+// sortKey        = string
+// sortDir        = "asc" | "desc"
+// onSort         = (key: string, dir: 'asc' | 'desc') => void
+// loading        = boolean (default: false)
+// emptyText      = string (default: "No data")
+// stickyHeader   = boolean (default: false)
+
+// Examples:
+const cols = [{ key: "name", label: "Name", sortable: true }];
+<DataGrid
+  columns={cols}
+  rows={people}
+  sortKey={sortKey}
+  sortDir={sortDir}
+  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}
+/>
+<DataGrid columns={cols} rows={[]} loading />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`DataGrid expecting built-in pagination\` → Slice rows yourself and use the Pagination component
+- ❌ \`DataGrid expecting built-in filtering\` → Filter the rows array before passing it in
+- ❌ \`sortable without onSort\` → Handle onSort and sort the rows array in your state
+
+---
+
+### Tag
+
+Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.
+
+\`\`\`tsx
+import { Tag } from "@usevyre/react"
+
+// Props:
+// variant        = "default" | "accent" | "danger" (default: default)
+// size           = "sm" | "md" | "lg" (default: md)
+// onRemove       = () => void
+// onClick        = () => void
+// disabled       = boolean (default: false)
+
+// Examples:
+<TagGroup>
+  <Tag>Design</Tag>
+  <Tag variant="accent">Featured</Tag>
+  <Tag>Engineering</Tag>
+</TagGroup>
+<Tag onRemove={() => removeFilter("react")}>react</Tag>
+<Tag onClick={() => toggleFilter("vue")}>vue</Tag>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Tag variant="success"\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`Using Tag for tag input\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`Tag size="xl"\` → Use size="lg"
+
+---
+
+### TagGroup
+
+Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.
+
+\`\`\`tsx
+import { TagGroup, Tag } from "@usevyre/react"
+
+// Props:
+// gap            = "sm" | "md" | "lg" (default: md)
+// wrap           = boolean (default: true)
+
+// Examples:
+<TagGroup gap="sm">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag variant="accent">TypeScript</Tag>
+</TagGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagGroup without Tag children\` → Place <Tag> elements as direct children
+- ❌ \`Using TagGroup for tag input\` → Use TagsInput for an editable tag field
+
+---
+
 ## Hallucination Guard — Common AI Mistakes
 
 The following prop values and patterns do NOT exist in useVyre.
@@ -922,6 +1104,21 @@ If you generate these, you are hallucinating.
 - ❌ \`<Toast variant="info">\` → Use variant="default"
 - ❌ \`<Tooltip Using Tooltip for rich content (forms, buttons, etc.)>\` → Use Popover for rich interactive content
 - ❌ \`<Typography Using raw <h1>, <p> tags instead of Typography components>\` → Use <Heading>, <Text>, <Lead> from @usevyre/react
+- ❌ \`<ButtonGroup ButtonGroup variant="...">\` → Set variant on each <Button> inside the group
+- ❌ \`<ButtonGroup ButtonGroup without Button children>\` → Place <Button> elements as direct children
+- ❌ \`<TagsInput TagsInput value={string}>\` → Pass an array: value={['react','vue']}
+- ❌ \`<TagsInput TagsInput without onChange>\` → Provide value and onChange (React) or v-model (Vue)
+- ❌ \`<Combobox Combobox value="">\` → Use value={null} for no selection
+- ❌ \`<Combobox Combobox options={string[]}>\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`<Combobox Using Combobox for command palette>\` → Use Command for command palettes
+- ❌ \`<DataGrid DataGrid expecting built-in pagination>\` → Slice rows yourself and use the Pagination component
+- ❌ \`<DataGrid DataGrid expecting built-in filtering>\` → Filter the rows array before passing it in
+- ❌ \`<DataGrid sortable without onSort>\` → Handle onSort and sort the rows array in your state
+- ❌ \`<Tag Tag variant="success">\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`<Tag Using Tag for tag input>\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`<Tag Tag size="xl">\` → Use size="lg"
+- ❌ \`<TagGroup TagGroup without Tag children>\` → Place <Tag> elements as direct children
+- ❌ \`<TagGroup Using TagGroup for tag input>\` → Use TagsInput for an editable tag field
 
 ---
 
@@ -976,7 +1173,7 @@ alwaysApply: true
 ---
 
 # useVyre Design System — Cursor Rules
-# Version: 1.0.0
+# Version: 1.1.0
 
 You are working in a project using the useVyre design system (@usevyre/react).
 Follow these rules strictly when generating any UI code.
@@ -1255,13 +1452,84 @@ Import: \`import { Text, Heading, Lead, Code, Blockquote } from "@usevyre/react"
 Never do:
 - ❌ Using raw <h1>, <p> tags instead of Typography components → ✅ Use <Heading>, <Text>, <Lead> from @usevyre/react
 
+## ButtonGroup
+Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.
+Import: \`import { ButtonGroup, Button } from "@usevyre/react"\`
+
+Valid props:
+- orientation: "horizontal" | "vertical" [default: horizontal]
+- size: "sm" | "md" | "lg" | "icon"
+
+Never do:
+- ❌ ButtonGroup variant="..." → ✅ Set variant on each <Button> inside the group
+- ❌ ButtonGroup without Button children → ✅ Place <Button> elements as direct children
+
+## TagsInput
+Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.
+Import: \`import { TagsInput } from "@usevyre/react"\`
+
+Valid props:
+- size: "sm" | "md" | "lg" [default: md]
+
+Never do:
+- ❌ TagsInput value={string} → ✅ Pass an array: value={['react','vue']}
+- ❌ TagsInput without onChange → ✅ Provide value and onChange (React) or v-model (Vue)
+
+## Combobox
+Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).
+Import: \`import { Combobox } from "@usevyre/react"\`
+
+Valid props:
+- size: "sm" | "md" | "lg" [default: md]
+
+Never do:
+- ❌ Combobox value="" → ✅ Use value={null} for no selection
+- ❌ Combobox options={string[]} → ✅ Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ Using Combobox for command palette → ✅ Use Command for command palettes
+
+## DataGrid
+Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.
+Import: \`import { DataGrid } from "@usevyre/react"\`
+
+Valid props:
+- sortDir: "asc" | "desc"
+
+Never do:
+- ❌ DataGrid expecting built-in pagination → ✅ Slice rows yourself and use the Pagination component
+- ❌ DataGrid expecting built-in filtering → ✅ Filter the rows array before passing it in
+- ❌ sortable without onSort → ✅ Handle onSort and sort the rows array in your state
+
+## Tag
+Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.
+Import: \`import { Tag } from "@usevyre/react"\`
+
+Valid props:
+- variant: "default" | "accent" | "danger" [default: default]
+- size: "sm" | "md" | "lg" [default: md]
+
+Never do:
+- ❌ Tag variant="success" → ✅ Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ Using Tag for tag input → ✅ Use TagsInput for adding/removing tags via keyboard
+- ❌ Tag size="xl" → ✅ Use size="lg"
+
+## TagGroup
+Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.
+Import: \`import { TagGroup, Tag } from "@usevyre/react"\`
+
+Valid props:
+- gap: "sm" | "md" | "lg" [default: md]
+
+Never do:
+- ❌ TagGroup without Tag children → ✅ Place <Tag> elements as direct children
+- ❌ Using TagGroup for tag input → ✅ Use TagsInput for an editable tag field
+
 ## Token Rules
 
 Use --vyre-color-semantic-* for all colors. Never use primitive tokens.
 Use --vyre-spacing-* for all spacing. Never use raw px in component code.
 Use --vyre-border-radius-* for border radius.`;
 export const claudeContext = `# useVyre Design System Context
-# Version: 1.0.0
+# Version: 1.1.0
 
 You are working in a codebase that uses the useVyre design system.
 Follow the rules below strictly when writing any UI code.
@@ -2149,6 +2417,188 @@ import { Text, Heading, Lead, Code, Blockquote } from "@usevyre/react"
 
 ---
 
+### ButtonGroup
+
+Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.
+
+\`\`\`tsx
+import { ButtonGroup, Button } from "@usevyre/react"
+
+// Props:
+// orientation    = "horizontal" | "vertical" (default: horizontal)
+// attached       = boolean (default: false)
+// size           = "sm" | "md" | "lg" | "icon"
+
+// Examples:
+<ButtonGroup attached>
+  <Button variant="secondary">Day</Button>
+  <Button variant="secondary">Week</Button>
+  <Button variant="secondary">Month</Button>
+</ButtonGroup>
+<ButtonGroup orientation="vertical" attached>
+  <Button variant="secondary">Top</Button>
+  <Button variant="secondary">Bottom</Button>
+</ButtonGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`ButtonGroup variant="..."\` → Set variant on each <Button> inside the group
+- ❌ \`ButtonGroup without Button children\` → Place <Button> elements as direct children
+
+---
+
+### TagsInput
+
+Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.
+
+\`\`\`tsx
+import { TagsInput } from "@usevyre/react"
+
+// Props:
+// value          = string[]
+// onChange       = (tags: string[]) => void
+// placeholder    = string
+// disabled       = boolean (default: false)
+// max            = number
+// size           = "sm" | "md" | "lg" (default: md)
+
+// Examples:
+const [tags, setTags] = useState<string[]>([]);
+<TagsInput value={tags} onChange={setTags} placeholder="Add a tag…" />
+<TagsInput value={tags} onChange={setTags} max={5} />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagsInput value={string}\` → Pass an array: value={['react','vue']}
+- ❌ \`TagsInput without onChange\` → Provide value and onChange (React) or v-model (Vue)
+
+---
+
+### Combobox
+
+Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).
+
+\`\`\`tsx
+import { Combobox } from "@usevyre/react"
+
+// Props:
+// options        = { value: string; label: string; disabled?: boolean }[]
+// value          = string | null
+// onChange       = (value: string | null) => void
+// placeholder    = string (default: "Search…")
+// disabled       = boolean (default: false)
+// size           = "sm" | "md" | "lg" (default: md)
+// emptyText      = string (default: "No results")
+
+// Examples:
+const [lang, setLang] = useState<string | null>(null);
+<Combobox
+  options={[{ value: "ts", label: "TypeScript" }, { value: "go", label: "Go" }]}
+  value={lang}
+  onChange={setLang}
+  placeholder="Search language…"
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Combobox value=""\` → Use value={null} for no selection
+- ❌ \`Combobox options={string[]}\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`Using Combobox for command palette\` → Use Command for command palettes
+
+---
+
+### DataGrid
+
+Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.
+
+\`\`\`tsx
+import { DataGrid } from "@usevyre/react"
+
+// Props:
+// columns        = { key: string; label: string; sortable?: boolean; width?: string }[]
+// rows           = Record<string, unknown>[]
+// sortKey        = string
+// sortDir        = "asc" | "desc"
+// onSort         = (key: string, dir: 'asc' | 'desc') => void
+// loading        = boolean (default: false)
+// emptyText      = string (default: "No data")
+// stickyHeader   = boolean (default: false)
+
+// Examples:
+const cols = [{ key: "name", label: "Name", sortable: true }];
+<DataGrid
+  columns={cols}
+  rows={people}
+  sortKey={sortKey}
+  sortDir={sortDir}
+  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}
+/>
+<DataGrid columns={cols} rows={[]} loading />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`DataGrid expecting built-in pagination\` → Slice rows yourself and use the Pagination component
+- ❌ \`DataGrid expecting built-in filtering\` → Filter the rows array before passing it in
+- ❌ \`sortable without onSort\` → Handle onSort and sort the rows array in your state
+
+---
+
+### Tag
+
+Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.
+
+\`\`\`tsx
+import { Tag } from "@usevyre/react"
+
+// Props:
+// variant        = "default" | "accent" | "danger" (default: default)
+// size           = "sm" | "md" | "lg" (default: md)
+// onRemove       = () => void
+// onClick        = () => void
+// disabled       = boolean (default: false)
+
+// Examples:
+<TagGroup>
+  <Tag>Design</Tag>
+  <Tag variant="accent">Featured</Tag>
+  <Tag>Engineering</Tag>
+</TagGroup>
+<Tag onRemove={() => removeFilter("react")}>react</Tag>
+<Tag onClick={() => toggleFilter("vue")}>vue</Tag>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Tag variant="success"\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`Using Tag for tag input\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`Tag size="xl"\` → Use size="lg"
+
+---
+
+### TagGroup
+
+Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.
+
+\`\`\`tsx
+import { TagGroup, Tag } from "@usevyre/react"
+
+// Props:
+// gap            = "sm" | "md" | "lg" (default: md)
+// wrap           = boolean (default: true)
+
+// Examples:
+<TagGroup gap="sm">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag variant="accent">TypeScript</Tag>
+</TagGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagGroup without Tag children\` → Place <Tag> elements as direct children
+- ❌ \`Using TagGroup for tag input\` → Use TagsInput for an editable tag field
+
+---
+
 ## Hallucination Guard — Common AI Mistakes
 
 The following prop values and patterns do NOT exist in useVyre.
@@ -2185,6 +2635,21 @@ If you generate these, you are hallucinating.
 - ❌ \`<Toast variant="info">\` → Use variant="default"
 - ❌ \`<Tooltip Using Tooltip for rich content (forms, buttons, etc.)>\` → Use Popover for rich interactive content
 - ❌ \`<Typography Using raw <h1>, <p> tags instead of Typography components>\` → Use <Heading>, <Text>, <Lead> from @usevyre/react
+- ❌ \`<ButtonGroup ButtonGroup variant="...">\` → Set variant on each <Button> inside the group
+- ❌ \`<ButtonGroup ButtonGroup without Button children>\` → Place <Button> elements as direct children
+- ❌ \`<TagsInput TagsInput value={string}>\` → Pass an array: value={['react','vue']}
+- ❌ \`<TagsInput TagsInput without onChange>\` → Provide value and onChange (React) or v-model (Vue)
+- ❌ \`<Combobox Combobox value="">\` → Use value={null} for no selection
+- ❌ \`<Combobox Combobox options={string[]}>\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`<Combobox Using Combobox for command palette>\` → Use Command for command palettes
+- ❌ \`<DataGrid DataGrid expecting built-in pagination>\` → Slice rows yourself and use the Pagination component
+- ❌ \`<DataGrid DataGrid expecting built-in filtering>\` → Filter the rows array before passing it in
+- ❌ \`<DataGrid sortable without onSort>\` → Handle onSort and sort the rows array in your state
+- ❌ \`<Tag Tag variant="success">\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`<Tag Using Tag for tag input>\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`<Tag Tag size="xl">\` → Use size="lg"
+- ❌ \`<TagGroup TagGroup without Tag children>\` → Place <Tag> elements as direct children
+- ❌ \`<TagGroup Using TagGroup for tag input>\` → Use TagsInput for an editable tag field
 
 ---
 
@@ -2234,7 +2699,7 @@ If you generate these, you are hallucinating.
 \`\`\`
 `;
 export const windsurfRules = `# useVyre Rules for Windsurf
-# Version: 1.0.0
+# Version: 1.1.0
 
 # useVyre Design System — AI Context
 # Version: 0.2.0
@@ -3119,46 +3584,243 @@ import { Text, Heading, Lead, Code, Blockquote } from "@usevyre/react"
 
 ---
 
-## Hallucination Guard — Common AI Mistakes
+### ButtonGroup
 
-The following prop values and patterns do NOT exist in useVyre.
-If you generate these, you are hallucinating.
+Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.
 
-- ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
-- ❌ \`<Alert variant="error">\` → Use variant="danger"
-- ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
-- ❌ \`<Avatar size="xs">\` → Use size="sm"
-- ❌ \`<Avatar size="2xl">\` → Use size="xl"
-- ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
-- ❌ \`<Badge variant="error">\` → Use variant="danger"
-- ❌ \`<Badge variant="info">\` → Use variant="teal" for info-like styling
-- ❌ \`<Breadcrumb Using plain <a> tags inside Breadcrumb>\` → Use BreadcrumbItem > BreadcrumbLink for each crumb
-- ❌ \`<Button variant="blue">\` → Use variant="accent" for brand amber, or variant="teal" for teal
-- ❌ \`<Button size="xl">\` → Use size="lg"
-- ❌ \`<Button color="...">\` → Use variant prop instead
-- ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
-- ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
-- ❌ \`<Calendar Using Calendar for time selection>\` → Combine with a separate time Input if time selection is needed
-- ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
-- ❌ \`<Checkbox size="lg">\` → Use size="md"
-- ❌ \`<Command Using Input type="search" for search UI>\` → Use Command + CommandInput + CommandList + CommandItem
-- ❌ \`<DropdownMenu DropdownItem variant="primary">\` → Use variant="danger" for destructive items only
-- ❌ \`<Field Applying state prop directly to Input>\` → Wrap Input in <Field state="error"> to apply validation styling
-- ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
-- ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
-- ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
-- ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
-- ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
-- ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
-- ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
-- ❌ \`<Toast variant="error">\` → Use variant="danger"
-- ❌ \`<Toast variant="info">\` → Use variant="default"
-- ❌ \`<Tooltip Using Tooltip for rich content (forms, buttons, etc.)>\` → Use Popover for rich interactive content
-- ❌ \`<Typography Using raw <h1>, <p> tags instead of Typography components>\` → Use <Heading>, <Text>, <Lead> from @usevyre/react
+\`\`\`tsx
+import { ButtonGroup, Button } from "@usevyre/react"
+
+// Props:
+// orientation    = "horizontal" | "vertical" (default: horizontal)
+// attached       = boolean (default: false)
+// size           = "sm" | "md" | "lg" | "icon"
+
+// Examples:
+<ButtonGroup attached>
+  <Button variant="secondary">Day</Button>
+  <Button variant="secondary">Week</Button>
+  <Button variant="secondary">Month</Button>
+</ButtonGroup>
+<ButtonGroup orientation="vertical" attached>
+  <Button variant="secondary">Top</Button>
+  <Button variant="secondary">Bottom</Button>
+</ButtonGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`ButtonGroup variant="..."\` → Set variant on each <Button> inside the group
+- ❌ \`ButtonGroup without Button children\` → Place <Button> elements as direct children
 
 ---
 
-## Styling Rules for AI Agents
+### TagsInput
+
+Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.
+
+\`\`\`tsx
+import { TagsInput } from "@usevyre/react"
+
+// Props:
+// value          = string[]
+// onChange       = (tags: string[]) => void
+// placeholder    = string
+// disabled       = boolean (default: false)
+// max            = number
+// size           = "sm" | "md" | "lg" (default: md)
+
+// Examples:
+const [tags, setTags] = useState<string[]>([]);
+<TagsInput value={tags} onChange={setTags} placeholder="Add a tag…" />
+<TagsInput value={tags} onChange={setTags} max={5} />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagsInput value={string}\` → Pass an array: value={['react','vue']}
+- ❌ \`TagsInput without onChange\` → Provide value and onChange (React) or v-model (Vue)
+
+---
+
+### Combobox
+
+Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).
+
+\`\`\`tsx
+import { Combobox } from "@usevyre/react"
+
+// Props:
+// options        = { value: string; label: string; disabled?: boolean }[]
+// value          = string | null
+// onChange       = (value: string | null) => void
+// placeholder    = string (default: "Search…")
+// disabled       = boolean (default: false)
+// size           = "sm" | "md" | "lg" (default: md)
+// emptyText      = string (default: "No results")
+
+// Examples:
+const [lang, setLang] = useState<string | null>(null);
+<Combobox
+  options={[{ value: "ts", label: "TypeScript" }, { value: "go", label: "Go" }]}
+  value={lang}
+  onChange={setLang}
+  placeholder="Search language…"
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Combobox value=""\` → Use value={null} for no selection
+- ❌ \`Combobox options={string[]}\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`Using Combobox for command palette\` → Use Command for command palettes
+
+---
+
+### DataGrid
+
+Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.
+
+\`\`\`tsx
+import { DataGrid } from "@usevyre/react"
+
+// Props:
+// columns        = { key: string; label: string; sortable?: boolean; width?: string }[]
+// rows           = Record<string, unknown>[]
+// sortKey        = string
+// sortDir        = "asc" | "desc"
+// onSort         = (key: string, dir: 'asc' | 'desc') => void
+// loading        = boolean (default: false)
+// emptyText      = string (default: "No data")
+// stickyHeader   = boolean (default: false)
+
+// Examples:
+const cols = [{ key: "name", label: "Name", sortable: true }];
+<DataGrid
+  columns={cols}
+  rows={people}
+  sortKey={sortKey}
+  sortDir={sortDir}
+  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}
+/>
+<DataGrid columns={cols} rows={[]} loading />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`DataGrid expecting built-in pagination\` → Slice rows yourself and use the Pagination component
+- ❌ \`DataGrid expecting built-in filtering\` → Filter the rows array before passing it in
+- ❌ \`sortable without onSort\` → Handle onSort and sort the rows array in your state
+
+---
+
+### Tag
+
+Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.
+
+\`\`\`tsx
+import { Tag } from "@usevyre/react"
+
+// Props:
+// variant        = "default" | "accent" | "danger" (default: default)
+// size           = "sm" | "md" | "lg" (default: md)
+// onRemove       = () => void
+// onClick        = () => void
+// disabled       = boolean (default: false)
+
+// Examples:
+<TagGroup>
+  <Tag>Design</Tag>
+  <Tag variant="accent">Featured</Tag>
+  <Tag>Engineering</Tag>
+</TagGroup>
+<Tag onRemove={() => removeFilter("react")}>react</Tag>
+<Tag onClick={() => toggleFilter("vue")}>vue</Tag>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Tag variant="success"\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`Using Tag for tag input\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`Tag size="xl"\` → Use size="lg"
+
+---
+
+### TagGroup
+
+Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.
+
+\`\`\`tsx
+import { TagGroup, Tag } from "@usevyre/react"
+
+// Props:
+// gap            = "sm" | "md" | "lg" (default: md)
+// wrap           = boolean (default: true)
+
+// Examples:
+<TagGroup gap="sm">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag variant="accent">TypeScript</Tag>
+</TagGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagGroup without Tag children\` → Place <Tag> elements as direct children
+- ❌ \`Using TagGroup for tag input\` → Use TagsInput for an editable tag field
+
+---
+
+## Hallucination Guard — Common AI Mistakes
+
+The following prop values and patterns do NOT exist in useVyre.
+If you generate these, you are hallucinating.
+
+- ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
+- ❌ \`<Alert variant="error">\` → Use variant="danger"
+- ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ \`<Avatar size="xs">\` → Use size="sm"
+- ❌ \`<Avatar size="2xl">\` → Use size="xl"
+- ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
+- ❌ \`<Badge variant="error">\` → Use variant="danger"
+- ❌ \`<Badge variant="info">\` → Use variant="teal" for info-like styling
+- ❌ \`<Breadcrumb Using plain <a> tags inside Breadcrumb>\` → Use BreadcrumbItem > BreadcrumbLink for each crumb
+- ❌ \`<Button variant="blue">\` → Use variant="accent" for brand amber, or variant="teal" for teal
+- ❌ \`<Button size="xl">\` → Use size="lg"
+- ❌ \`<Button color="...">\` → Use variant prop instead
+- ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
+- ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
+- ❌ \`<Calendar Using Calendar for time selection>\` → Combine with a separate time Input if time selection is needed
+- ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`<Checkbox size="lg">\` → Use size="md"
+- ❌ \`<Command Using Input type="search" for search UI>\` → Use Command + CommandInput + CommandList + CommandItem
+- ❌ \`<DropdownMenu DropdownItem variant="primary">\` → Use variant="danger" for destructive items only
+- ❌ \`<Field Applying state prop directly to Input>\` → Wrap Input in <Field state="error"> to apply validation styling
+- ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
+- ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
+- ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
+- ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
+- ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
+- ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
+- ❌ \`<Toast variant="error">\` → Use variant="danger"
+- ❌ \`<Toast variant="info">\` → Use variant="default"
+- ❌ \`<Tooltip Using Tooltip for rich content (forms, buttons, etc.)>\` → Use Popover for rich interactive content
+- ❌ \`<Typography Using raw <h1>, <p> tags instead of Typography components>\` → Use <Heading>, <Text>, <Lead> from @usevyre/react
+- ❌ \`<ButtonGroup ButtonGroup variant="...">\` → Set variant on each <Button> inside the group
+- ❌ \`<ButtonGroup ButtonGroup without Button children>\` → Place <Button> elements as direct children
+- ❌ \`<TagsInput TagsInput value={string}>\` → Pass an array: value={['react','vue']}
+- ❌ \`<TagsInput TagsInput without onChange>\` → Provide value and onChange (React) or v-model (Vue)
+- ❌ \`<Combobox Combobox value="">\` → Use value={null} for no selection
+- ❌ \`<Combobox Combobox options={string[]}>\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`<Combobox Using Combobox for command palette>\` → Use Command for command palettes
+- ❌ \`<DataGrid DataGrid expecting built-in pagination>\` → Slice rows yourself and use the Pagination component
+- ❌ \`<DataGrid DataGrid expecting built-in filtering>\` → Filter the rows array before passing it in
+- ❌ \`<DataGrid sortable without onSort>\` → Handle onSort and sort the rows array in your state
+- ❌ \`<Tag Tag variant="success">\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`<Tag Using Tag for tag input>\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`<Tag Tag size="xl">\` → Use size="lg"
+- ❌ \`<TagGroup TagGroup without Tag children>\` → Place <Tag> elements as direct children
+- ❌ \`<TagGroup Using TagGroup for tag input>\` → Use TagsInput for an editable tag field
+
+---
+
+## Styling Rules for AI Agents
 
 1. ALWAYS use semantic tokens (\`--vyre-color-semantic-*\`), never primitive tokens
 2. NEVER hardcode colors — every color decision has a semantic token
@@ -3204,7 +3866,7 @@ If you generate these, you are hallucinating.
 \`\`\`
 `;
 export const copilotInstructions = `# useVyre Copilot Instructions
-# Version: 1.0.0
+# Version: 1.1.0
 
 When generating UI code in this project, follow the useVyre design system rules below.
 
@@ -4091,6 +4753,188 @@ import { Text, Heading, Lead, Code, Blockquote } from "@usevyre/react"
 
 ---
 
+### ButtonGroup
+
+Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.
+
+\`\`\`tsx
+import { ButtonGroup, Button } from "@usevyre/react"
+
+// Props:
+// orientation    = "horizontal" | "vertical" (default: horizontal)
+// attached       = boolean (default: false)
+// size           = "sm" | "md" | "lg" | "icon"
+
+// Examples:
+<ButtonGroup attached>
+  <Button variant="secondary">Day</Button>
+  <Button variant="secondary">Week</Button>
+  <Button variant="secondary">Month</Button>
+</ButtonGroup>
+<ButtonGroup orientation="vertical" attached>
+  <Button variant="secondary">Top</Button>
+  <Button variant="secondary">Bottom</Button>
+</ButtonGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`ButtonGroup variant="..."\` → Set variant on each <Button> inside the group
+- ❌ \`ButtonGroup without Button children\` → Place <Button> elements as direct children
+
+---
+
+### TagsInput
+
+Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.
+
+\`\`\`tsx
+import { TagsInput } from "@usevyre/react"
+
+// Props:
+// value          = string[]
+// onChange       = (tags: string[]) => void
+// placeholder    = string
+// disabled       = boolean (default: false)
+// max            = number
+// size           = "sm" | "md" | "lg" (default: md)
+
+// Examples:
+const [tags, setTags] = useState<string[]>([]);
+<TagsInput value={tags} onChange={setTags} placeholder="Add a tag…" />
+<TagsInput value={tags} onChange={setTags} max={5} />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagsInput value={string}\` → Pass an array: value={['react','vue']}
+- ❌ \`TagsInput without onChange\` → Provide value and onChange (React) or v-model (Vue)
+
+---
+
+### Combobox
+
+Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).
+
+\`\`\`tsx
+import { Combobox } from "@usevyre/react"
+
+// Props:
+// options        = { value: string; label: string; disabled?: boolean }[]
+// value          = string | null
+// onChange       = (value: string | null) => void
+// placeholder    = string (default: "Search…")
+// disabled       = boolean (default: false)
+// size           = "sm" | "md" | "lg" (default: md)
+// emptyText      = string (default: "No results")
+
+// Examples:
+const [lang, setLang] = useState<string | null>(null);
+<Combobox
+  options={[{ value: "ts", label: "TypeScript" }, { value: "go", label: "Go" }]}
+  value={lang}
+  onChange={setLang}
+  placeholder="Search language…"
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Combobox value=""\` → Use value={null} for no selection
+- ❌ \`Combobox options={string[]}\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`Using Combobox for command palette\` → Use Command for command palettes
+
+---
+
+### DataGrid
+
+Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.
+
+\`\`\`tsx
+import { DataGrid } from "@usevyre/react"
+
+// Props:
+// columns        = { key: string; label: string; sortable?: boolean; width?: string }[]
+// rows           = Record<string, unknown>[]
+// sortKey        = string
+// sortDir        = "asc" | "desc"
+// onSort         = (key: string, dir: 'asc' | 'desc') => void
+// loading        = boolean (default: false)
+// emptyText      = string (default: "No data")
+// stickyHeader   = boolean (default: false)
+
+// Examples:
+const cols = [{ key: "name", label: "Name", sortable: true }];
+<DataGrid
+  columns={cols}
+  rows={people}
+  sortKey={sortKey}
+  sortDir={sortDir}
+  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}
+/>
+<DataGrid columns={cols} rows={[]} loading />
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`DataGrid expecting built-in pagination\` → Slice rows yourself and use the Pagination component
+- ❌ \`DataGrid expecting built-in filtering\` → Filter the rows array before passing it in
+- ❌ \`sortable without onSort\` → Handle onSort and sort the rows array in your state
+
+---
+
+### Tag
+
+Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.
+
+\`\`\`tsx
+import { Tag } from "@usevyre/react"
+
+// Props:
+// variant        = "default" | "accent" | "danger" (default: default)
+// size           = "sm" | "md" | "lg" (default: md)
+// onRemove       = () => void
+// onClick        = () => void
+// disabled       = boolean (default: false)
+
+// Examples:
+<TagGroup>
+  <Tag>Design</Tag>
+  <Tag variant="accent">Featured</Tag>
+  <Tag>Engineering</Tag>
+</TagGroup>
+<Tag onRemove={() => removeFilter("react")}>react</Tag>
+<Tag onClick={() => toggleFilter("vue")}>vue</Tag>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`Tag variant="success"\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`Using Tag for tag input\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`Tag size="xl"\` → Use size="lg"
+
+---
+
+### TagGroup
+
+Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.
+
+\`\`\`tsx
+import { TagGroup, Tag } from "@usevyre/react"
+
+// Props:
+// gap            = "sm" | "md" | "lg" (default: md)
+// wrap           = boolean (default: true)
+
+// Examples:
+<TagGroup gap="sm">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag variant="accent">TypeScript</Tag>
+</TagGroup>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`TagGroup without Tag children\` → Place <Tag> elements as direct children
+- ❌ \`Using TagGroup for tag input\` → Use TagsInput for an editable tag field
+
+---
+
 ## Hallucination Guard — Common AI Mistakes
 
 The following prop values and patterns do NOT exist in useVyre.
@@ -4127,6 +4971,21 @@ If you generate these, you are hallucinating.
 - ❌ \`<Toast variant="info">\` → Use variant="default"
 - ❌ \`<Tooltip Using Tooltip for rich content (forms, buttons, etc.)>\` → Use Popover for rich interactive content
 - ❌ \`<Typography Using raw <h1>, <p> tags instead of Typography components>\` → Use <Heading>, <Text>, <Lead> from @usevyre/react
+- ❌ \`<ButtonGroup ButtonGroup variant="...">\` → Set variant on each <Button> inside the group
+- ❌ \`<ButtonGroup ButtonGroup without Button children>\` → Place <Button> elements as direct children
+- ❌ \`<TagsInput TagsInput value={string}>\` → Pass an array: value={['react','vue']}
+- ❌ \`<TagsInput TagsInput without onChange>\` → Provide value and onChange (React) or v-model (Vue)
+- ❌ \`<Combobox Combobox value="">\` → Use value={null} for no selection
+- ❌ \`<Combobox Combobox options={string[]}>\` → Use [{ value: 'ts', label: 'TypeScript' }]
+- ❌ \`<Combobox Using Combobox for command palette>\` → Use Command for command palettes
+- ❌ \`<DataGrid DataGrid expecting built-in pagination>\` → Slice rows yourself and use the Pagination component
+- ❌ \`<DataGrid DataGrid expecting built-in filtering>\` → Filter the rows array before passing it in
+- ❌ \`<DataGrid sortable without onSort>\` → Handle onSort and sort the rows array in your state
+- ❌ \`<Tag Tag variant="success">\` → Use Badge for success/warning/teal status colors; Tag is for categories/filters
+- ❌ \`<Tag Using Tag for tag input>\` → Use TagsInput for adding/removing tags via keyboard
+- ❌ \`<Tag Tag size="xl">\` → Use size="lg"
+- ❌ \`<TagGroup TagGroup without Tag children>\` → Place <Tag> elements as direct children
+- ❌ \`<TagGroup Using TagGroup for tag input>\` → Use TagsInput for an editable tag field
 
 ---
 
@@ -4178,15 +5037,20 @@ If you generate these, you are hallucinating.
 
 export const schema = {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "version": "1.0.0",
-  "generatedAt": "2026-05-13",
+  "version": "1.1.0",
+  "generatedAt": "2026-05-15",
   "package": "@usevyre/react",
-  "packageVersion": "1.0.0",
+  "packageVersion": "1.1.0",
   "validFor": [
-    "@usevyre/react@1.0.0+",
-    "@usevyre/vue@1.0.0+"
+    "@usevyre/react@1.1.0+",
+    "@usevyre/vue@1.1.0+"
   ],
   "changelog": {
+    "1.1.0": {
+      "date": "2026-05-15",
+      "breaking": false,
+      "summary": "Added 6 components: ButtonGroup, TagsInput, Combobox, DataGrid, Tag, TagGroup"
+    },
     "1.0.0": {
       "date": "2026-05-13",
       "breaking": true,
@@ -5456,12 +6320,370 @@ export const schema = {
           "code": "<Heading size=\"2xl\" as=\"h1\">Dashboard</Heading>\n<Lead>Welcome back. Here's what's happening today.</Lead>\n<Text size=\"sm\" style={{ color: 'var(--vyre-color-semantic-text-muted)' }}>Last updated 5 minutes ago.</Text>"
         }
       ]
+    },
+    "ButtonGroup": {
+      "description": "Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.",
+      "import": "import { ButtonGroup, Button } from \"@usevyre/react\"",
+      "props": {
+        "orientation": {
+          "type": "enum",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal",
+          "description": "Layout direction of grouped buttons"
+        },
+        "attached": {
+          "type": "boolean",
+          "default": false,
+          "description": "Remove gap so buttons share collapsed borders (segmented control look)"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "icon"
+          ],
+          "description": "Size forwarded to all child buttons"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "ButtonGroup variant=\"...\"",
+          "reason": "ButtonGroup has no variant prop — variant goes on each child Button",
+          "fix": "Set variant on each <Button> inside the group"
+        },
+        {
+          "pattern": "ButtonGroup without Button children",
+          "reason": "ButtonGroup is a layout wrapper for Button elements",
+          "fix": "Place <Button> elements as direct children"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Segmented control",
+          "code": "<ButtonGroup attached>\n  <Button variant=\"secondary\">Day</Button>\n  <Button variant=\"secondary\">Week</Button>\n  <Button variant=\"secondary\">Month</Button>\n</ButtonGroup>"
+        },
+        {
+          "description": "Vertical group",
+          "code": "<ButtonGroup orientation=\"vertical\" attached>\n  <Button variant=\"secondary\">Top</Button>\n  <Button variant=\"secondary\">Bottom</Button>\n</ButtonGroup>"
+        }
+      ]
+    },
+    "TagsInput": {
+      "description": "Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.",
+      "import": "import { TagsInput } from \"@usevyre/react\"",
+      "props": {
+        "value": {
+          "type": "string[]",
+          "description": "Controlled list of tags (required)"
+        },
+        "onChange": {
+          "type": "(tags: string[]) => void",
+          "description": "Called with the new tag array on every change. React only — Vue uses v-model"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Input placeholder, hidden when max is reached"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disables all interaction"
+        },
+        "max": {
+          "type": "number",
+          "description": "Maximum number of tags; input is disabled when reached"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Size scale"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "TagsInput value={string}",
+          "reason": "value must be a string array, not a string",
+          "fix": "Pass an array: value={['react','vue']}"
+        },
+        {
+          "pattern": "TagsInput without onChange",
+          "reason": "TagsInput is controlled — it needs onChange to update",
+          "fix": "Provide value and onChange (React) or v-model (Vue)"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Basic tags input",
+          "code": "const [tags, setTags] = useState<string[]>([]);\n<TagsInput value={tags} onChange={setTags} placeholder=\"Add a tag…\" />"
+        },
+        {
+          "description": "Limited to 5 tags",
+          "code": "<TagsInput value={tags} onChange={setTags} max={5} />"
+        }
+      ]
+    },
+    "Combobox": {
+      "description": "Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).",
+      "import": "import { Combobox } from \"@usevyre/react\"",
+      "props": {
+        "options": {
+          "type": "{ value: string; label: string; disabled?: boolean }[]",
+          "description": "Selectable options (required)"
+        },
+        "value": {
+          "type": "string | null",
+          "description": "Controlled selected value; null clears selection (required)"
+        },
+        "onChange": {
+          "type": "(value: string | null) => void",
+          "description": "Called when selection changes. React only — Vue uses v-model"
+        },
+        "placeholder": {
+          "type": "string",
+          "default": "\"Search…\"",
+          "description": "Input placeholder when nothing is selected"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disables the combobox"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Height scale"
+        },
+        "emptyText": {
+          "type": "string",
+          "default": "\"No results\"",
+          "description": "Text shown when search matches no options"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Combobox value=\"\"",
+          "reason": "Empty selection must be null, not empty string",
+          "fix": "Use value={null} for no selection"
+        },
+        {
+          "pattern": "Combobox options={string[]}",
+          "reason": "options must be objects with value and label",
+          "fix": "Use [{ value: 'ts', label: 'TypeScript' }]"
+        },
+        {
+          "pattern": "Using Combobox for command palette",
+          "reason": "Combobox is single-value select, not an action palette",
+          "fix": "Use Command for command palettes"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Searchable language picker",
+          "code": "const [lang, setLang] = useState<string | null>(null);\n<Combobox\n  options={[{ value: \"ts\", label: \"TypeScript\" }, { value: \"go\", label: \"Go\" }]}\n  value={lang}\n  onChange={setLang}\n  placeholder=\"Search language…\"\n/>"
+        }
+      ]
+    },
+    "DataGrid": {
+      "description": "Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.",
+      "import": "import { DataGrid } from \"@usevyre/react\"",
+      "props": {
+        "columns": {
+          "type": "{ key: string; label: string; sortable?: boolean; width?: string }[]",
+          "description": "Column definitions (required)"
+        },
+        "rows": {
+          "type": "Record<string, unknown>[]",
+          "description": "Row data; each object keyed by column key (required)"
+        },
+        "sortKey": {
+          "type": "string",
+          "description": "Controlled active sort column key"
+        },
+        "sortDir": {
+          "type": "enum",
+          "values": [
+            "asc",
+            "desc"
+          ],
+          "description": "Controlled sort direction"
+        },
+        "onSort": {
+          "type": "(key: string, dir: 'asc' | 'desc') => void",
+          "description": "Called when a sortable header is clicked. React only — Vue emits sort + v-model:sortKey/sortDir"
+        },
+        "loading": {
+          "type": "boolean",
+          "default": false,
+          "description": "Show skeleton placeholder rows"
+        },
+        "emptyText": {
+          "type": "string",
+          "default": "\"No data\"",
+          "description": "Message shown when rows is empty"
+        },
+        "stickyHeader": {
+          "type": "boolean",
+          "default": false,
+          "description": "Keep the header visible while scrolling"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "DataGrid expecting built-in pagination",
+          "reason": "DataGrid does not paginate — it only sorts",
+          "fix": "Slice rows yourself and use the Pagination component"
+        },
+        {
+          "pattern": "DataGrid expecting built-in filtering",
+          "reason": "DataGrid does not filter rows",
+          "fix": "Filter the rows array before passing it in"
+        },
+        {
+          "pattern": "sortable without onSort",
+          "reason": "Sorting is controlled — the grid does not sort data itself",
+          "fix": "Handle onSort and sort the rows array in your state"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Sortable grid",
+          "code": "const cols = [{ key: \"name\", label: \"Name\", sortable: true }];\n<DataGrid\n  columns={cols}\n  rows={people}\n  sortKey={sortKey}\n  sortDir={sortDir}\n  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}\n/>"
+        },
+        {
+          "description": "Loading state",
+          "code": "<DataGrid columns={cols} rows={[]} loading />"
+        }
+      ]
+    },
+    "Tag": {
+      "description": "Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.",
+      "import": "import { Tag } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "accent",
+            "danger"
+          ],
+          "default": "default",
+          "description": "Visual style. default=neutral, accent=brand, danger=destructive/error"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Size scale"
+        },
+        "onRemove": {
+          "type": "() => void",
+          "description": "React only. When provided, renders a × remove button. Vue: use `removable` prop + @remove event"
+        },
+        "onClick": {
+          "type": "() => void",
+          "description": "React only. When provided, makes the whole tag interactive (keyboard accessible). Vue: use `clickable` prop + @click event"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disables interaction (only relevant with onClick/onRemove)"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Tag variant=\"success\"",
+          "reason": "Tag only has default, accent, danger variants (unlike Badge which has more)",
+          "fix": "Use Badge for success/warning/teal status colors; Tag is for categories/filters"
+        },
+        {
+          "pattern": "Using Tag for tag input",
+          "reason": "Tag is display-only, it does not accept typed input",
+          "fix": "Use TagsInput for adding/removing tags via keyboard"
+        },
+        {
+          "pattern": "Tag size=\"xl\"",
+          "reason": "Maximum size is 'lg'",
+          "fix": "Use size=\"lg\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Category tags in a group",
+          "code": "<TagGroup>\n  <Tag>Design</Tag>\n  <Tag variant=\"accent\">Featured</Tag>\n  <Tag>Engineering</Tag>\n</TagGroup>"
+        },
+        {
+          "description": "Removable filter chip (React)",
+          "code": "<Tag onRemove={() => removeFilter(\"react\")}>react</Tag>"
+        },
+        {
+          "description": "Clickable toggle tag (React)",
+          "code": "<Tag onClick={() => toggleFilter(\"vue\")}>vue</Tag>"
+        }
+      ]
+    },
+    "TagGroup": {
+      "description": "Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.",
+      "import": "import { TagGroup, Tag } from \"@usevyre/react\"",
+      "props": {
+        "gap": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Spacing between tags"
+        },
+        "wrap": {
+          "type": "boolean",
+          "default": true,
+          "description": "Wrap tags onto multiple lines when they overflow; set false for single-line scroll"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "TagGroup without Tag children",
+          "reason": "TagGroup is a layout wrapper for Tag elements",
+          "fix": "Place <Tag> elements as direct children"
+        },
+        {
+          "pattern": "Using TagGroup for tag input",
+          "reason": "TagGroup is display-only",
+          "fix": "Use TagsInput for an editable tag field"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Tag group with mixed variants",
+          "code": "<TagGroup gap=\"sm\">\n  <Tag>React</Tag>\n  <Tag>Vue</Tag>\n  <Tag variant=\"accent\">TypeScript</Tag>\n</TagGroup>"
+        }
+      ]
     }
   }
 };
 
 export const antiPatterns = {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "rules": [
     {
       "component": "Accordion",
@@ -5679,19 +6901,129 @@ export const antiPatterns = {
       "reason": "Typography components apply the correct token-based styles",
       "fix": "Use <Heading>, <Text>, <Lead> from @usevyre/react",
       "severity": "error"
+    },
+    {
+      "component": "ButtonGroup",
+      "pattern": "ButtonGroup variant=\"...\"",
+      "reason": "ButtonGroup has no variant prop — variant goes on each child Button",
+      "fix": "Set variant on each <Button> inside the group",
+      "severity": "error"
+    },
+    {
+      "component": "ButtonGroup",
+      "pattern": "ButtonGroup without Button children",
+      "reason": "ButtonGroup is a layout wrapper for Button elements",
+      "fix": "Place <Button> elements as direct children",
+      "severity": "error"
+    },
+    {
+      "component": "TagsInput",
+      "pattern": "TagsInput value={string}",
+      "reason": "value must be a string array, not a string",
+      "fix": "Pass an array: value={['react','vue']}",
+      "severity": "error"
+    },
+    {
+      "component": "TagsInput",
+      "pattern": "TagsInput without onChange",
+      "reason": "TagsInput is controlled — it needs onChange to update",
+      "fix": "Provide value and onChange (React) or v-model (Vue)",
+      "severity": "error"
+    },
+    {
+      "component": "Combobox",
+      "pattern": "Combobox value=\"\"",
+      "reason": "Empty selection must be null, not empty string",
+      "fix": "Use value={null} for no selection",
+      "severity": "error"
+    },
+    {
+      "component": "Combobox",
+      "pattern": "Combobox options={string[]}",
+      "reason": "options must be objects with value and label",
+      "fix": "Use [{ value: 'ts', label: 'TypeScript' }]",
+      "severity": "error"
+    },
+    {
+      "component": "Combobox",
+      "pattern": "Using Combobox for command palette",
+      "reason": "Combobox is single-value select, not an action palette",
+      "fix": "Use Command for command palettes",
+      "severity": "error"
+    },
+    {
+      "component": "DataGrid",
+      "pattern": "DataGrid expecting built-in pagination",
+      "reason": "DataGrid does not paginate — it only sorts",
+      "fix": "Slice rows yourself and use the Pagination component",
+      "severity": "error"
+    },
+    {
+      "component": "DataGrid",
+      "pattern": "DataGrid expecting built-in filtering",
+      "reason": "DataGrid does not filter rows",
+      "fix": "Filter the rows array before passing it in",
+      "severity": "error"
+    },
+    {
+      "component": "DataGrid",
+      "pattern": "sortable without onSort",
+      "reason": "Sorting is controlled — the grid does not sort data itself",
+      "fix": "Handle onSort and sort the rows array in your state",
+      "severity": "error"
+    },
+    {
+      "component": "Tag",
+      "pattern": "Tag variant=\"success\"",
+      "reason": "Tag only has default, accent, danger variants (unlike Badge which has more)",
+      "fix": "Use Badge for success/warning/teal status colors; Tag is for categories/filters",
+      "severity": "error"
+    },
+    {
+      "component": "Tag",
+      "pattern": "Using Tag for tag input",
+      "reason": "Tag is display-only, it does not accept typed input",
+      "fix": "Use TagsInput for adding/removing tags via keyboard",
+      "severity": "error"
+    },
+    {
+      "component": "Tag",
+      "pattern": "Tag size=\"xl\"",
+      "reason": "Maximum size is 'lg'",
+      "fix": "Use size=\"lg\"",
+      "severity": "error"
+    },
+    {
+      "component": "TagGroup",
+      "pattern": "TagGroup without Tag children",
+      "reason": "TagGroup is a layout wrapper for Tag elements",
+      "fix": "Place <Tag> elements as direct children",
+      "severity": "error"
+    },
+    {
+      "component": "TagGroup",
+      "pattern": "Using TagGroup for tag input",
+      "reason": "TagGroup is display-only",
+      "fix": "Use TagsInput for an editable tag field",
+      "severity": "error"
     }
   ]
 };
 
 export const versionInfo = {
-  "version": "1.0.0",
-  "packageVersion": "1.0.0",
-  "generatedAt": "2026-05-13T08:35:50.053Z",
+  "version": "1.1.0",
+  "packageVersion": "1.1.0",
+  "generatedAt": "2026-05-15T15:01:34.101Z",
   "validFor": [
-    "@usevyre/react@1.0.0+",
-    "@usevyre/vue@1.0.0+"
+    "@usevyre/react@1.1.0+",
+    "@usevyre/vue@1.1.0+"
   ],
   "changelog": {
+    "1.1.0": {
+      "date": "2026-05-15",
+      "breaking": false,
+      "summary": "Added 6 components: ButtonGroup, TagsInput, Combobox, DataGrid, Tag, TagGroup"
+    },
     "1.0.0": {
       "date": "2026-05-13",
       "breaking": true,
@@ -5710,211 +7042,253 @@ export const versionInfo = {
   },
   "components": {
     "Accordion": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Alert": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Avatar": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Badge": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Breadcrumb": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Button": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Calendar": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Card": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Checkbox": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Command": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "DropdownMenu": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Field": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Input": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Label": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Modal": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Pagination": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Popover": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Progress": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Select": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Separator": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Sheet": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Sidebar": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Skeleton": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Slider": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Switch": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Table": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Tabs": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Toast": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Tooltip": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Typography": {
-      "version": "1.0.0",
-      "lastUpdated": "2026-05-13",
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "ButtonGroup": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "TagsInput": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "Combobox": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "DataGrid": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "Tag": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "TagGroup": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-15",
       "breaking": false,
       "stable": true,
       "changelog": null
@@ -5952,5 +7326,11 @@ export const cheatSheets = {
   "Tabs": "# Tabs — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Tabbed navigation for switching between content panels.**\n\n```ts\nimport { Tabs, TabList, Tab, TabPanels, TabPanel } from \"@usevyre/react\"\n```\n\n## Examples\n\n**Basic tabs**\n```tsx\n<Tabs defaultIndex={0}>\n  <TabList>\n    <Tab>Overview</Tab>\n    <Tab>Settings</Tab>\n  </TabList>\n  <TabPanels>\n    <TabPanel>Overview content</TabPanel>\n    <TabPanel>Settings content</TabPanel>\n  </TabPanels>\n</Tabs>\n```\n",
   "Toast": "# Toast — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Transient notification. Use the useToast hook to trigger toasts imperatively. React: wrap app in <ToastProvider>. Vue: place <ToastViewport /> once in app root.**\n\n```ts\nimport { useToast, ToastProvider } from \"@usevyre/react\" // Vue: import { useToast, ToastViewport } from \"@usevyre/vue\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"success\"` \\| `\"warning\"` \\| `\"danger\"` | `default` |\n\n## Common AI Mistakes\n\n- ❌ `Rendering <Toast> directly in JSX`\n  → Use: const { toast } = useToast(); then toast({ title, variant })\n- ❌ `variant=\"error\"`\n  → Use variant=\"danger\"\n- ❌ `variant=\"info\"`\n  → Use variant=\"default\"\n\n## Examples\n\n**Trigger a success toast**\n```tsx\nconst { toast } = useToast();\n\n<Button onClick={() => toast({ title: 'Saved!', variant: 'success', duration: 3000 })}>\n  Save\n</Button>\n```\n\n**Setup: wrap app with ToastProvider**\n```tsx\n<ToastProvider>\n  <App />\n</ToastProvider>\n```\n",
   "Tooltip": "# Tooltip — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Short label that appears on hover/focus. For rich content use Popover instead.**\n\n```ts\nimport { Tooltip } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `placement` | `\"top\"` \\| `\"bottom\"` \\| `\"left\"` \\| `\"right\"` | `top` |\n\n## Common AI Mistakes\n\n- ❌ `Using Tooltip for rich content (forms, buttons, etc.)`\n  → Use Popover for rich interactive content\n\n## Examples\n\n**Tooltip on an icon button**\n```tsx\n<Tooltip content=\"Close dialog\" placement=\"bottom\">\n  <Button variant=\"ghost\" size=\"icon\" aria-label=\"Close\">\n    <X size={16} />\n  </Button>\n</Tooltip>\n```\n",
-  "Typography": "# Typography — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Text rendering components with semantic scale. Includes Text, Heading, Lead, Code, Blockquote.**\n\n```ts\nimport { Text, Heading, Lead, Code, Blockquote } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Using raw <h1>, <p> tags instead of Typography components`\n  → Use <Heading>, <Text>, <Lead> from @usevyre/react\n\n## Examples\n\n**Page heading and body text**\n```tsx\n<Heading size=\"2xl\" as=\"h1\">Dashboard</Heading>\n<Lead>Welcome back. Here's what's happening today.</Lead>\n<Text size=\"sm\" style={{ color: 'var(--vyre-color-semantic-text-muted)' }}>Last updated 5 minutes ago.</Text>\n```\n"
+  "Typography": "# Typography — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Text rendering components with semantic scale. Includes Text, Heading, Lead, Code, Blockquote.**\n\n```ts\nimport { Text, Heading, Lead, Code, Blockquote } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Using raw <h1>, <p> tags instead of Typography components`\n  → Use <Heading>, <Text>, <Lead> from @usevyre/react\n\n## Examples\n\n**Page heading and body text**\n```tsx\n<Heading size=\"2xl\" as=\"h1\">Dashboard</Heading>\n<Lead>Welcome back. Here's what's happening today.</Lead>\n<Text size=\"sm\" style={{ color: 'var(--vyre-color-semantic-text-muted)' }}>Last updated 5 minutes ago.</Text>\n```\n",
+  "ButtonGroup": "# ButtonGroup — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Groups multiple Button components into one visual unit (toolbar, segmented control). Pure layout — no internal state.**\n\n```ts\nimport { ButtonGroup, Button } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `orientation` | `\"horizontal\"` \\| `\"vertical\"` | `horizontal` |\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"icon\"` | — |\n| `attached` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `ButtonGroup variant=\"...\"`\n  → Set variant on each <Button> inside the group\n- ❌ `ButtonGroup without Button children`\n  → Place <Button> elements as direct children\n\n## Examples\n\n**Segmented control**\n```tsx\n<ButtonGroup attached>\n  <Button variant=\"secondary\">Day</Button>\n  <Button variant=\"secondary\">Week</Button>\n  <Button variant=\"secondary\">Month</Button>\n</ButtonGroup>\n```\n\n**Vertical group**\n```tsx\n<ButtonGroup orientation=\"vertical\" attached>\n  <Button variant=\"secondary\">Top</Button>\n  <Button variant=\"secondary\">Bottom</Button>\n</ButtonGroup>\n```\n",
+  "TagsInput": "# TagsInput — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Multi-tag input. Type and press Enter or comma to add a tag, click x to remove, Backspace on empty input removes the last tag. Controlled.**\n\n```ts\nimport { TagsInput } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `TagsInput value={string}`\n  → Pass an array: value={['react','vue']}\n- ❌ `TagsInput without onChange`\n  → Provide value and onChange (React) or v-model (Vue)\n\n## Examples\n\n**Basic tags input**\n```tsx\nconst [tags, setTags] = useState<string[]>([]);\n<TagsInput value={tags} onChange={setTags} placeholder=\"Add a tag…\" />\n```\n\n**Limited to 5 tags**\n```tsx\n<TagsInput value={tags} onChange={setTags} max={5} />\n```\n",
+  "Combobox": "# Combobox — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Searchable single-select dropdown with typeahead filtering and keyboard navigation. Use when the list is long enough to need search. Differs from Select (no search) and Command (palette).**\n\n```ts\nimport { Combobox } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Combobox value=\"\"`\n  → Use value={null} for no selection\n- ❌ `Combobox options={string[]}`\n  → Use [{ value: 'ts', label: 'TypeScript' }]\n- ❌ `Using Combobox for command palette`\n  → Use Command for command palettes\n\n## Examples\n\n**Searchable language picker**\n```tsx\nconst [lang, setLang] = useState<string | null>(null);\n<Combobox\n  options={[{ value: \"ts\", label: \"TypeScript\" }, { value: \"go\", label: \"Go\" }]}\n  value={lang}\n  onChange={setLang}\n  placeholder=\"Search language…\"\n/>\n```\n",
+  "DataGrid": "# DataGrid — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Table with built-in column sorting, loading skeletons, and empty state. Filtering and pagination are out of scope — compose with the Pagination component.**\n\n```ts\nimport { DataGrid } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `sortDir` | `\"asc\"` \\| `\"desc\"` | — |\n| `loading` | `true` \\| `false` | `false` |\n| `stickyHeader` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `DataGrid expecting built-in pagination`\n  → Slice rows yourself and use the Pagination component\n- ❌ `DataGrid expecting built-in filtering`\n  → Filter the rows array before passing it in\n- ❌ `sortable without onSort`\n  → Handle onSort and sort the rows array in your state\n\n## Examples\n\n**Sortable grid**\n```tsx\nconst cols = [{ key: \"name\", label: \"Name\", sortable: true }];\n<DataGrid\n  columns={cols}\n  rows={people}\n  sortKey={sortKey}\n  sortDir={sortDir}\n  onSort={(k, d) => { setSortKey(k); setSortDir(d); }}\n/>\n```\n\n**Loading state**\n```tsx\n<DataGrid columns={cols} rows={[]} loading />\n```\n",
+  "Tag": "# Tag — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Standalone display tag/chip for categories, labels, or filter chips. NOT an input — for tag input use TagsInput. Group multiple with TagGroup.**\n\n```ts\nimport { Tag } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"accent\"` \\| `\"danger\"` | `default` |\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Tag variant=\"success\"`\n  → Use Badge for success/warning/teal status colors; Tag is for categories/filters\n- ❌ `Using Tag for tag input`\n  → Use TagsInput for adding/removing tags via keyboard\n- ❌ `Tag size=\"xl\"`\n  → Use size=\"lg\"\n\n## Examples\n\n**Category tags in a group**\n```tsx\n<TagGroup>\n  <Tag>Design</Tag>\n  <Tag variant=\"accent\">Featured</Tag>\n  <Tag>Engineering</Tag>\n</TagGroup>\n```\n\n**Removable filter chip (React)**\n```tsx\n<Tag onRemove={() => removeFilter(\"react\")}>react</Tag>\n```\n\n**Clickable toggle tag (React)**\n```tsx\n<Tag onClick={() => toggleFilter(\"vue\")}>vue</Tag>\n```\n",
+  "TagGroup": "# TagGroup — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Read-only container that lays out multiple Tag elements with automatic wrapping and consistent spacing. For tag input use TagsInput.**\n\n```ts\nimport { TagGroup, Tag } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `gap` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `wrap` | `true` \\| `false` | `true` |\n\n## Common AI Mistakes\n\n- ❌ `TagGroup without Tag children`\n  → Place <Tag> elements as direct children\n- ❌ `Using TagGroup for tag input`\n  → Use TagsInput for an editable tag field\n\n## Examples\n\n**Tag group with mixed variants**\n```tsx\n<TagGroup gap=\"sm\">\n  <Tag>React</Tag>\n  <Tag>Vue</Tag>\n  <Tag variant=\"accent\">TypeScript</Tag>\n</TagGroup>\n```\n"
 };