@usevyre/ai-context 1.0.0 → 1.1.0

package/dist/schema.json

@@ -1,14 +1,24 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "version": "0.2.0",
-  "generatedAt": "2026-05-08",
+  "version": "1.1.0",
+  "generatedAt": "2026-05-15",
   "package": "@usevyre/react",
-  "packageVersion": "0.1.1",
+  "packageVersion": "1.1.0",
   "validFor": [
-    "@usevyre/react@0.1.1+",
-    "@usevyre/vue@0.1.1+"
+    "@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,
+      "summary": "Stable v1.0 release — VyreCode renamed to Code in Vue, BreadcrumbLink + BreadcrumbSeparator added to React, Toast setup updated"
+    },
     "0.2.0": {
       "date": "2026-05-08",
       "breaking": false,
@@ -1273,6 +1283,364 @@
           "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>"
+        }
+      ]
     }
   }
 }

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usevyre.com/schemas/ai-tokens-v1.json",
   "version": "1.0.0",
-  "generatedAt": "2026-05-10T13:14:24.865Z",
+  "generatedAt": "2026-05-13T00:36:55.284Z",
   "description": "useVyre design tokens — machine-readable reference for AI agents. Use semantic color tokens; never use primitive tokens directly in components.",
   "naming": {
     "convention": "--vyre-[category]-[subcategory]-[variant]",

package/dist/tokens.md

@@ -1,5 +1,5 @@
 # useVyre Token Reference for AI Agents
-# Version: 1.0.0 | Generated: 2026-05-10
+# Version: 1.0.0 | Generated: 2026-05-13
 # Machine-readable version: @usevyre/tokens/ai (ai-tokens.json)
 
 ## Usage