ionbase-ui 0.18.1 → 0.20.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
@@ -31,7 +31,8 @@
       "hasIntent": true
     },
     "Avatar": {
-      "summary": "Avatar picks its content the way Figma's `Type` variant does, but by",
+      "summary": "A person or entity marker. Content is chosen by precedence — image, then initials, then icon — not by a type prop.",
+      "status": "stable",
       "variants": {
         "size": [
           "mini",
@@ -45,10 +46,11 @@
         ]
       },
       "detail": "dist/meta/Avatar.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "AvatarGroup": {
-      "summary": "AvatarGroup overlaps its children by a quarter of the avatar size, matching",
+      "summary": "Overlapping Avatars with a `+N` overflow, for showing several people in one row's width.",
+      "status": "stable",
       "variants": {
         "size": [
           "mini",
@@ -62,10 +64,11 @@
         ]
       },
       "detail": "dist/meta/AvatarGroup.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Badge": {
-      "summary": "Badge is presentational — no role, no interaction. React Aria has nothing to",
+      "summary": "A small, non-interactive label that classifies the thing next to it. Presentational — no role, no live region.",
+      "status": "stable",
       "variants": {
         "intent": [
           "neutral",
@@ -77,7 +80,7 @@
         ]
       },
       "detail": "dist/meta/Badge.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Button": {
       "summary": "Triggers an action in place. Never navigates.",
@@ -103,7 +106,8 @@
       "hasIntent": true
     },
     "Checkbox": {
-      "summary": "Checkbox wraps a native `<input type=\"checkbox\">` and hides it.",
+      "summary": "A native checkbox with the system's styling, supporting an indeterminate state.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -117,10 +121,11 @@
         ]
       },
       "detail": "dist/meta/Checkbox.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Divider": {
-      "summary": "A single `<hr>`, matching Figma's `Border` (70:22153).",
+      "summary": "A semantic thematic break, rendered as a real <hr>.",
+      "status": "stable",
       "variants": {
         "orientation": [
           "horizontal",
@@ -128,10 +133,11 @@
         ]
       },
       "detail": "dist/meta/Divider.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "FullCard": {
-      "summary": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).",
+      "summary": "A full-bleed row: a text column beside a framed media panel, mirrored by `alignment`.",
+      "status": "stable",
       "variants": {
         "alignment": [
           "right",
@@ -139,19 +145,21 @@
         ]
       },
       "detail": "dist/meta/FullCard.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Header": {
-      "summary": "Header renders Figma's four Device variants — Desktop, Tablet,",
+      "summary": "The page header bar. Renders Figma's Desktop, Tablet, Mobile-Closed and Mobile-Open from one DOM tree.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/Header.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Icon": {
-      "summary": "Wrapper that applies the design system's icon sizing and accessibility",
+      "summary": "Applies the system's icon sizing and accessibility defaults to any SVG component you hand it. The package ships no icon set.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/Icon.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Input": {
       "summary": "A single-line text field, together with its label, helper text and error message.",
@@ -175,7 +183,8 @@
       "hasIntent": true
     },
     "Link": {
-      "summary": "Link — Figma `Link` (774:1516).",
+      "summary": "Navigation to somewhere else. Renders an <a> when given `href`, a <button> otherwise.",
+      "status": "stable",
       "variants": {
         "variant": [
           "inline",
@@ -183,10 +192,11 @@
         ]
       },
       "detail": "dist/meta/Link.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Logo": {
-      "summary": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`",
+      "summary": "The full IonBase lockup — mark plus wordmark.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -198,10 +208,11 @@
         ]
       },
       "detail": "dist/meta/Logo.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "LogoMark": {
-      "summary": "The bare icon glyph, no wordmark — what `Header` actually uses.",
+      "summary": "The bare mark, no wordmark — what Header uses.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -209,19 +220,21 @@
         ]
       },
       "detail": "dist/meta/LogoMark.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Menu": {
-      "summary": "Menu is the list surface, not a popover.",
+      "summary": "The list surface only — no trigger, no anchor, no open state. Positioning it is the caller's job.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/Menu.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "MenuItem": {
-      "summary": null,
+      "summary": "One row in a Menu. A real <button> inside an <li>, with an optional leading icon and a trailing selected check.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/MenuItem.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Modal": {
       "summary": "A focus-trapping dialog. Renders nothing when closed and portals when open.",
@@ -242,13 +255,15 @@
       "hasIntent": true
     },
     "NavItem": {
-      "summary": "Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —",
+      "summary": "A primary navigation destination. Renders an <a> when given `href`, a <button> otherwise.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/NavItem.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "PhoneInput": {
-      "summary": "PhoneInput — Figma `Input/Phone` (80:372).",
+      "summary": "A dial-code block butted against an Input, sharing one outline. It does not pick countries.",
+      "status": "stable",
       "variants": {
         "autoCapitalize": [
           "none",
@@ -265,10 +280,11 @@
         ]
       },
       "detail": "dist/meta/PhoneInput.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Popover": {
-      "summary": "Popover — Figma `Popover` (825:1853).",
+      "summary": "An anchored panel that holds interactive content. Sits between Tooltip and Modal.",
+      "status": "stable",
       "variants": {
         "placement": [
           "right",
@@ -283,10 +299,11 @@
         ]
       },
       "detail": "dist/meta/Popover.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Radio": {
-      "summary": null,
+      "summary": "One option inside a RadioGroup. Meaningless on its own — the group owns the name and the selected value.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -300,10 +317,11 @@
         ]
       },
       "detail": "dist/meta/Radio.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "RadioGroup": {
-      "summary": "Renders a `<fieldset>` with a `<legend>` rather than a div with",
+      "summary": "A <fieldset>/<legend> group of mutually exclusive options. Owns the shared name and the selected value.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -317,13 +335,14 @@
         ]
       },
       "detail": "dist/meta/RadioGroup.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "ScrollProgress": {
-      "summary": "The compact rail is the disclosure trigger. It is a real `<button>`, so a",
+      "summary": "A compact progress rail that expands into a section list. A disclosure, not a menu — and it computes nothing itself.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/ScrollProgress.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Select": {
       "summary": "A dropdown over a native <select>, with the same label and error wiring as Input.",
@@ -339,10 +358,11 @@
       "hasIntent": true
     },
     "TabItem": {
-      "summary": null,
+      "summary": "One tab and its panel. Re-exported from react-stately's collection Item — `title` is the tab label, children are the panel.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/TabItem.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Table": {
       "summary": "A data table. Table owns the scroll container and density; rows and cells are composed.",
@@ -358,13 +378,15 @@
       "hasIntent": true
     },
     "TableBody": {
-      "summary": null,
+      "summary": "The <tbody> section. Takes no props — it places the data rows and gives their cells body context.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/TableBody.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "TableCell": {
-      "summary": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never",
+      "summary": "One cell, covering Figma's Table Cell and Cell Text together. `header` decides <th> versus <td>.",
+      "status": "stable",
       "variants": {
         "scope": [
           "row",
@@ -383,22 +405,25 @@
         ]
       },
       "detail": "dist/meta/TableCell.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "TableHead": {
-      "summary": null,
+      "summary": "The <thead> section. Takes no props — it places the header row and gives its cells their head-or-body context.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/TableHead.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "TableRow": {
-      "summary": "A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape",
+      "summary": "A plain <tr>. Hover is CSS-only; a row is not itself interactive.",
+      "status": "stable",
       "variants": {},
       "detail": "dist/meta/TableRow.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Tabs": {
-      "summary": null,
+      "summary": "A tab list and its panels, built on react-aria's tab collection. Children are TabItem.",
+      "status": "stable",
       "variants": {
         "type": [
           "pill",
@@ -415,10 +440,11 @@
         ]
       },
       "detail": "dist/meta/Tabs.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Toast": {
-      "summary": "Toast — Figma `Toast` (820:1655).",
+      "summary": "A transient notification on neutral chrome. Intent is carried by the icon, not by a tinted panel.",
+      "status": "stable",
       "variants": {
         "intent": [
           "neutral",
@@ -430,10 +456,11 @@
         ]
       },
       "detail": "dist/meta/Toast.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "ToastProvider": {
-      "summary": "Renders the queue and supplies `useToast`.",
+      "summary": "Renders the toast queue and supplies the `useToast` hook. Mount once, near the app root.",
+      "status": "stable",
       "variants": {
         "placement": [
           "top-left",
@@ -443,10 +470,11 @@
         ]
       },
       "detail": "dist/meta/ToastProvider.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Toggle": {
-      "summary": "Toggle is a checkbox with `role=\"switch\"`.",
+      "summary": "A switch — a checkbox with role=\"switch\", announced as on/off.",
+      "status": "stable",
       "variants": {
         "size": [
           "sm",
@@ -460,10 +488,11 @@
         ]
       },
       "detail": "dist/meta/Toggle.json",
-      "hasIntent": false
+      "hasIntent": true
     },
     "Tooltip": {
-      "summary": "Tooltip — Figma `Tooltip` (801:1568).",
+      "summary": "A text-only hint attached to a trigger. Opens on hover and on focus.",
+      "status": "stable",
       "variants": {
         "placement": [
           "right",
@@ -473,7 +502,7 @@
         ]
       },
       "detail": "dist/meta/Tooltip.json",
-      "hasIntent": false
+      "hasIntent": true
     }
   }
 }

package/llms.txt

@@ -0,0 +1,27 @@
+# ionbase-ui
+
+> IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
+
+Version 0.20.0. 35 components.
+
+## Read these, in this order
+
+1. `dist/meta/index.json` — every component with its summary and variant axes. Pick one from here.
+2. `dist/meta/<Name>.json` — the full contract for that one component: props with their origins and defaults, variant guidance, slots, accessibility guarantees and requirements, anti-patterns, tokens.
+
+Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`. Do NOT load `ionbase-ui/meta` (`components.json`) — it is all 35 contracts in one file, for tooling that wants a single fetch, and it will bury the component you need.
+
+## Components
+
+`Alert`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
+
+## Rules that ship with this package
+
+- `ionbase-ui/eslint-plugin` — five rules driven from the contracts: deprecated props, missing accessible names, raw style values, measured contrast failures, competing primary actions.
+- `ionbase-ui/stylelint-config` — bans raw colour and spacing values in favour of tokens.
+
+Turn both on. They encode the same judgement as the contracts, enforced.
+
+## Hosted
+
+https://raza-ahmed.github.io/ionbase-design-system/llms.txt — the same index with per-component markdown pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",
@@ -22,6 +22,7 @@
       "types": "./dist/tokens-js.d.ts",
       "default": "./dist/tokens-js.js"
     },
+    "./llms.txt": "./llms.txt",
     "./stylelint-config": "./stylelint-config.js",
     "./eslint-plugin": "./eslint-plugin/index.js"
   },
@@ -38,7 +39,8 @@
   "files": [
     "dist",
     "eslint-plugin",
-    "stylelint-config.js"
+    "stylelint-config.js",
+    "llms.txt"
   ],
   "sideEffects": [
     "**/*.css"
@@ -57,7 +59,7 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs",
+    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-llms.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . && stylelint \"src/styles/*.css\"",
     "format": "prettier --check .",
@@ -65,7 +67,8 @@
     "meta:build": "node scripts/build-meta.mjs",
     "meta:verify": "node scripts/build-meta.mjs && node scripts/verify-meta.mjs",
     "contrast": "node scripts/verify-contrast.mjs",
-    "contrast:list": "node scripts/verify-contrast.mjs --list"
+    "contrast:list": "node scripts/verify-contrast.mjs --list",
+    "llms": "node scripts/build-llms.mjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",