ionbase-ui 0.16.0 → 0.18.0

package/dist/meta/Radio.json

@@ -0,0 +1,104 @@
+{
+  "name": "Radio",
+  "source": "src/components/Radio.tsx",
+  "propsType": "RadioProps",
+  "import": "import { Radio } from 'ionbase-ui';",
+  "stylesheet": "src/styles/radio.css",
+  "tokens": [
+    "--border-disabled",
+    "--border-error-strong",
+    "--border-focus",
+    "--border-inverse",
+    "--border-primary-strong",
+    "--border-stronger",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-disabled",
+    "--icon-on-color",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-radio-border",
+    "--ion-radio-dot",
+    "--ion-radio-fill",
+    "--ion-radio-font-size",
+    "--ion-radio-gap",
+    "--ion-radio-line-height",
+    "--ion-radio-raised",
+    "--ion-radio-size",
+    "--ion-shadow-raised-flush-lg",
+    "--ion-shadow-raised-flush-sm",
+    "--ion-shadow-raised-flush-xs",
+    "--radius-full",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-disabled",
+    "--surface-error",
+    "--surface-inverse",
+    "--surface-primary",
+    "--text-disabled",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "value": {
+      "type": "string",
+      "required": true,
+      "origin": "own"
+    },
+    "size": {
+      "type": "RadioSize | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "intent": {
+      "type": "RadioIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "neutral",
+        "brand",
+        "danger"
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether this radio is disabled. Falls back to the group's `isDisabled`."
+    },
+    "disabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "tags": {
+        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+      }
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 6,
+    "aria": 0,
+    "dom": 303,
+    "other": 0
+  }
+}

package/dist/meta/RadioGroup.json

@@ -0,0 +1,126 @@
+{
+  "name": "RadioGroup",
+  "source": "src/components/Radio.tsx",
+  "propsType": "RadioGroupProps",
+  "description": "Renders a `<fieldset>` with a `<legend>` rather than a div with\n`role=\"radiogroup\"`. Both are announced correctly, but a fieldset also groups\nthe inputs for form submission and native validation, which the ARIA version\ndoes not.",
+  "import": "import { RadioGroup } from 'ionbase-ui';",
+  "stylesheet": "src/styles/radio.css",
+  "tokens": [
+    "--border-disabled",
+    "--border-error-strong",
+    "--border-focus",
+    "--border-inverse",
+    "--border-primary-strong",
+    "--border-stronger",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-disabled",
+    "--icon-on-color",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-radio-border",
+    "--ion-radio-dot",
+    "--ion-radio-fill",
+    "--ion-radio-font-size",
+    "--ion-radio-gap",
+    "--ion-radio-line-height",
+    "--ion-radio-raised",
+    "--ion-radio-size",
+    "--ion-shadow-raised-flush-lg",
+    "--ion-shadow-raised-flush-sm",
+    "--ion-shadow-raised-flush-xs",
+    "--radius-full",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-disabled",
+    "--surface-error",
+    "--surface-inverse",
+    "--surface-primary",
+    "--text-disabled",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Shared input name. Generated when omitted."
+    },
+    "value": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "defaultValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "onChange": {
+      "type": "((value: string) => void) | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "size": {
+      "type": "RadioSize | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "intent": {
+      "type": "RadioIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "neutral",
+        "brand",
+        "danger"
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether every radio in the group is disabled."
+    },
+    "disabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "tags": {
+        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+      }
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 10,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/ScrollProgress.json

@@ -0,0 +1,63 @@
+{
+  "name": "ScrollProgress",
+  "source": "src/components/ScrollProgress.tsx",
+  "propsType": "ScrollProgressProps",
+  "description": "The compact rail is the disclosure trigger. It is a real `<button>`, so a\nkeyboard user reaches it by Tab and opens it the same way as any button —\nEnter or Space — no `:focus-within` trick required; a mouse user can also\njust hover it. Built as a WAI-ARIA Disclosure (`aria-expanded` +\n`aria-controls`) rather than a menu: see the CSS header for why\n`role=\"menu\"` is deliberately not used here.\n\nCloses on outside pointerdown and on Escape — the minimum a disclosure\nneeds to not trap the page once opened, not a full popover/focus-trap\nimplementation.",
+  "import": "import { ScrollProgress } from 'ionbase-ui';",
+  "stylesheet": "src/styles/scroll-progress.css",
+  "tokens": [
+    "--border-default",
+    "--border-focus",
+    "--border-strong",
+    "--border-stronger",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-regular",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-md",
+    "--radius-sm",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-32",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-muted",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "progress": {
+      "type": "number",
+      "required": true,
+      "origin": "own",
+      "description": "0-100. The caller computes this from whatever it is tracking — a\nwindow scroll fraction, a custom scroll container, a reading-time\nestimate. This component has no opinion on the source."
+    },
+    "sections": {
+      "type": "ScrollProgressSection[]",
+      "required": true,
+      "origin": "own"
+    },
+    "activeId": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The section the rail's heavier tick and the panel's selected row point\nto. Also the caller's to compute — see `progress`."
+    },
+    "onSelect": {
+      "type": "((id: string) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Fired when a row is chosen. The component does not scroll anywhere\nitself; matching Menu, it reports the choice and lets the caller decide\nwhat \"select this section\" means for their page."
+    }
+  },
+  "propCounts": {
+    "own": 4,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/Select.json

@@ -0,0 +1,195 @@
+{
+  "name": "Select",
+  "source": "src/components/Select.tsx",
+  "propsType": "SelectProps",
+  "description": "Select wraps a native `<select>` rather than rebuilding one.\n\nReact Aria's `useSelect` builds a listbox in a popover, which is the right\nanswer when the menu needs custom rows — but Figma models only the trigger\nhere, and the dropdown list is a separate component on the Menu page. Until\nthat is built, the native control is the honest match: it brings keyboard\nhandling, type-ahead and the platform picker on mobile for free, and it is\naccessible without any of it being reimplemented.\n\nFigma's six states map the same way Input's do — Hover and Focus from\ninteraction, Filled from whether a value is set, the rest from props.",
+  "import": "import { Select } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A dropdown over a native <select>, with the same label and error wiring as Input.",
+  "useWhen": [
+    "the user picks exactly one value from a known, modest list",
+    "the native platform picker is acceptable — and on mobile it usually is the best option"
+  ],
+  "useInstead": [
+    {
+      "when": "the list is long enough to need search or type-ahead beyond the native behaviour",
+      "use": "a combobox — not yet in this system"
+    },
+    {
+      "when": "the rows need icons, avatars or two lines of text",
+      "use": "Menu",
+      "why": "Select wraps a native <select>, whose options can only be text"
+    },
+    {
+      "when": "there are two or three mutually exclusive choices worth showing at once",
+      "use": "RadioGroup"
+    },
+    {
+      "when": "the user may pick more than one",
+      "use": "Checkbox"
+    }
+  ],
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms, table filters"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "prominent single-field forms"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "keyboard handling, type-ahead and the mobile platform picker come from the native <select> rather than being reimplemented",
+      "label, helper and error wiring match Input"
+    ],
+    "requires": [
+      "`label`, or `aria-label` when no visible label is rendered"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "passing rich React nodes as option content",
+      "why": "this renders a native <select>; options are text only"
+    },
+    {
+      "dont": "using a Select with two options for an on/off setting",
+      "do": "Toggle",
+      "why": "a two-item dropdown costs two interactions to do what one control does in one"
+    }
+  ],
+  "deprecated": [
+    {
+      "prop": "disabled",
+      "replacement": "isDisabled"
+    }
+  ],
+  "stylesheet": "src/styles/select.css",
+  "tokens": [
+    "--border-default",
+    "--border-disabled",
+    "--border-error-strong",
+    "--border-focus",
+    "--border-strong",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-regular",
+    "--icon-disabled",
+    "--icon-size-md",
+    "--icon-size-sm",
+    "--icon-tertiary",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-select-border-width",
+    "--ion-select-font-size",
+    "--ion-select-gap",
+    "--ion-select-height",
+    "--ion-select-icon-size",
+    "--ion-select-line-height",
+    "--ion-select-padding-x",
+    "--ion-select-radius",
+    "--radius-md",
+    "--radius-sm",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-32",
+    "--spacing-40",
+    "--spacing-48",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-disabled",
+    "--text-disabled",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "size": {
+      "type": "SelectSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "options": {
+      "type": "SelectOption[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The options to render. Omit and pass `children` for grouped options."
+    },
+    "placeholder": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Text shown when nothing is selected. Renders as a disabled option so the\nfield can start empty without that being a valid choice."
+    },
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Field label. Renders the Figma `Form Field` wrapper around the control."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Helper text below the field."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Replaces the helper text when `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "disabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "tags": {
+        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+      }
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Class names for the control box (`.ion-select`). Always lands here —\nnever on the form-field wrapper. Use `wrapperClassName` for that."
+    },
+    "wrapperClassName": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Class names for the `.ion-field` wrapper when a label or helper is shown."
+    }
+  },
+  "propCounts": {
+    "own": 11,
+    "aria": 0,
+    "dom": 283,
+    "other": 0
+  }
+}

package/dist/meta/TabItem.json

@@ -0,0 +1,15 @@
+{
+  "name": "TabItem",
+  "source": "../../node_modules/.pnpm/react-stately@3.48.0_react@19.2.8/node_modules/react-stately/dist/types/src/collections/Item.d.ts",
+  "propsType": null,
+  "import": "import { TabItem } from 'ionbase-ui';",
+  "stylesheet": null,
+  "tokens": [],
+  "props": {},
+  "propCounts": {
+    "own": 0,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/Table.json

@@ -0,0 +1,135 @@
+{
+  "name": "Table",
+  "source": "src/components/Table.tsx",
+  "propsType": "TableProps",
+  "description": "`Table` owns the scroll container and the density class; everything else\nis composed from `TableHead` / `TableBody` / `TableRow` / `TableCell`,\nmatching how Figma actually layers `Table Row` > `Table Cell` > `Cell Text`\nrather than one component with a wall of props.\n\nDensity has no React state to thread: it only ever changes vertical cell\npadding, which `.ion-table--compact td` and friends apply through the CSS\ncascade from this one class. A context provider for a value nothing in JS\never reads would be infrastructure with no consumer.\n\nThe scroll container is a keyboard-reachable region (WCAG 2.1.1): overflow\nalone is not enough. `aria-label` / `aria-labelledby` on `Table` name that\nregion — the container accepts no props of its own, so the table's name is\nthe only place the label can live. Prefer a `<caption>` via\n`aria-labelledby` when the name should also be visible.",
+  "import": "import { Table } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A data table. Table owns the scroll container and density; rows and cells are composed.",
+  "useWhen": [
+    "showing records with more than one attribute worth comparing across rows"
+  ],
+  "useInstead": [
+    {
+      "when": "each item is a self-contained summary rather than a row of fields",
+      "use": "FullCard"
+    },
+    {
+      "when": "it is a layout grid rather than data",
+      "use": "CSS grid",
+      "why": "a <table> announces row and column semantics that a layout does not have"
+    }
+  ],
+  "composition": {
+    "order": [
+      "Table",
+      "TableHead",
+      "TableRow",
+      "TableCell"
+    ],
+    "note": "Table > TableHead/TableBody > TableRow > TableCell, matching how Figma layers Table Row > Table Cell > Cell Text. TableHead and TableBody take no props of their own; they place the rows and give TableCell its head-or-body context.",
+    "example": "<Table aria-label=\"Users\"><TableHead><TableRow><TableCell scope=\"col\">Name</TableCell></TableRow></TableHead><TableBody><TableRow><TableCell>Ada</TableCell></TableRow></TableBody></Table>"
+  },
+  "variants": {
+    "density": {
+      "compact": {
+        "use": "dense operational tables where row count matters more than comfort"
+      },
+      "default": {
+        "use": "the default"
+      },
+      "relaxed": {
+        "use": "short tables where each row deserves attention"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "the scroll container is keyboard reachable, which overflow alone does not provide (WCAG 2.1.1)"
+    ],
+    "requires": [
+      "`aria-label` or `aria-labelledby` on Table — it names the scroll region, and the container takes no props of its own, so this is the only place the name can live",
+      "`scope=\"col\"` on header cells",
+      "an accessible name on every row-selection Checkbox — those have no visible label by design"
+    ],
+    "notes": [
+      "Prefer a visible <caption> referenced by aria-labelledby when the table's name should also be seen."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "<Table> with no aria-label",
+      "why": "the scroll region is announced with no name, and a keyboard user reaching it is told nothing about what they have entered"
+    },
+    {
+      "dont": "header cells without scope",
+      "why": "screen readers cannot associate data cells with their column"
+    },
+    {
+      "dont": "wrapping Table in your own overflow container",
+      "why": "Table already owns the scroll container and makes it focusable; a second one is unreachable by keyboard"
+    },
+    {
+      "dont": "row-selection checkboxes with no aria-label",
+      "why": "every row announces an unnamed checkbox"
+    }
+  ],
+  "missingStates": {
+    "note": "Table has no empty, loading or error state of its own — those are the caller's, and they are the states most often forgotten. Pattern coverage is planned; see docs/agent-readiness-plan.md phase 4a."
+  },
+  "stylesheet": "src/styles/table.css",
+  "tokens": [
+    "--border-default",
+    "--border-focus",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--icon-interactive",
+    "--icon-secondary",
+    "--icon-size-sm",
+    "--icon-tertiary",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-md",
+    "--spacing-16",
+    "--spacing-20",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-hover",
+    "--surface-page",
+    "--surface-primary-subtle",
+    "--text-default",
+    "--text-link",
+    "--text-secondary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "density": {
+      "type": "TableDensity | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Figma's `Density` variant on `Table Cell` / `Table Row`.",
+      "values": [
+        "compact",
+        "default",
+        "relaxed"
+      ]
+    },
+    "isStriped": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Alternating row background, read from the row's position, not a prop\nrepeated on every `TableRow`."
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 287,
+    "other": 0
+  }
+}

package/dist/meta/TableBody.json

@@ -0,0 +1,43 @@
+{
+  "name": "TableBody",
+  "source": "src/components/Table.tsx",
+  "propsType": null,
+  "import": "import { TableBody } from 'ionbase-ui';",
+  "stylesheet": "src/styles/table.css",
+  "tokens": [
+    "--border-default",
+    "--border-focus",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--icon-interactive",
+    "--icon-secondary",
+    "--icon-size-sm",
+    "--icon-tertiary",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-md",
+    "--spacing-16",
+    "--spacing-20",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-hover",
+    "--surface-page",
+    "--surface-primary-subtle",
+    "--text-default",
+    "--text-link",
+    "--text-secondary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {},
+  "propCounts": {
+    "own": 0,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}