ionbase-ui 0.13.1 → 0.17.0

package/dist/meta/TableCell.json

@@ -0,0 +1,105 @@
+{
+  "name": "TableCell",
+  "source": "src/components/Table.tsx",
+  "propsType": "TableCellProps",
+  "description": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never\nused apart in the design (`Table Cell` always wraps exactly one `Cell\nText`), so splitting them into two exported components would only add API\nsurface for a composition nothing ever varies independently.\n\n`header` decides `<th>` vs `<td>` directly rather than a `type` prop that\ncould disagree with where the cell actually sits — a `<th>` rendered inside\n`<tbody>` is still a header cell to the browser and to CSS either way.",
+  "import": "import { TableCell } 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": {
+    "header": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`\nfill included."
+    },
+    "scope": {
+      "type": "TableCellScope | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "`<th>` scope. Inferred when omitted: `col` in `<thead>`, `row` in\n`<tbody>`. Pass explicitly when the inference is wrong (e.g. a column\nheader rendered outside `<thead>`).",
+      "values": [
+        "row",
+        "rowgroup",
+        "col",
+        "colgroup"
+      ]
+    },
+    "align": {
+      "type": "TableCellAlign | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "center",
+        "leading",
+        "trailing"
+      ]
+    },
+    "variant": {
+      "type": "\"link\" | \"default\" | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Type=Link` — recolours the content to `text/link` /\n`icon/primary` rather than the body defaults.",
+      "values": [
+        "link",
+        "default"
+      ]
+    },
+    "showDivider": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's per-cell `Show Divider` — a column rule, not a row rule."
+    },
+    "icon": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Leading Icon` / `Trailing Icon` slots on `Cell Text`."
+    },
+    "trailingIcon": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 8,
+    "aria": 0,
+    "dom": 284,
+    "other": 0
+  }
+}

package/dist/meta/TableHead.json

@@ -0,0 +1,43 @@
+{
+  "name": "TableHead",
+  "source": "src/components/Table.tsx",
+  "propsType": null,
+  "import": "import { TableHead } 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
+  }
+}

package/dist/meta/TableRow.json

@@ -0,0 +1,56 @@
+{
+  "name": "TableRow",
+  "source": "src/components/Table.tsx",
+  "propsType": "TableRowProps",
+  "description": "A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape\nhatch, matching the rest of the system) rather than React Aria's\n`useHover`: a row is not itself an interactive element — nothing about it\ntakes focus or fires a click — so there is no keyboard-vs-pointer\ndistinction to track. A clickable row is a link or button inside a cell,\nthe same accessible pattern Menu and Table Cell's own link variant use;\nnesting an interactive role on `<tr>` itself is not valid HTML.",
+  "import": "import { TableRow } 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": {
+    "isSelected": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "selection": {
+      "type": "TableRowSelection | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Renders a leading `Checkbox` cell — Figma's `Show Selection`. Takes the\ncheckbox's own props directly rather than a boolean, since a selectable\nrow needs `checked`/`onChange` wiring, not just a decorative box.\n\nInside `<thead>` the cell is a `<th scope=\"col\">` (select-all). Inside\n`<tbody>` it is a `<td>`."
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 278,
+    "other": 0
+  }
+}

package/dist/meta/Tabs.json

@@ -0,0 +1,186 @@
+{
+  "name": "Tabs",
+  "source": "src/components/Tabs.tsx",
+  "propsType": "TabsProps",
+  "import": "import { Tabs } from 'ionbase-ui';",
+  "stylesheet": "src/styles/tabs.css",
+  "tokens": [
+    "--border-default",
+    "--border-primary",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-size-sm",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-tabs-icon-size",
+    "--ion-tabs-item-font-size",
+    "--ion-tabs-item-gap",
+    "--ion-tabs-item-line-height",
+    "--ion-tabs-item-padding-x",
+    "--ion-tabs-item-padding-y",
+    "--ion-tabs-item-size",
+    "--radius-full",
+    "--radius-md",
+    "--ring-focus",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-20",
+    "--spacing-32",
+    "--spacing-4",
+    "--spacing-40",
+    "--spacing-48",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-hover",
+    "--surface-muted",
+    "--surface-page",
+    "--text-default",
+    "--text-disabled",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-lg",
+    "--type-body-lg-line-height",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "type": {
+      "type": "TabsType | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Visual style. Matches the Figma `Type` variant.",
+      "values": [
+        "pill",
+        "underline"
+      ],
+      "default": "pill"
+    },
+    "size": {
+      "type": "TabsSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches the Figma `Size` variant.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "orientation": {
+      "type": "\"horizontal\" | \"vertical\" | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Drives both the arrow-key axis and the track layout.\n\n`vertical` is keyboard- and ARIA-complete — up/down move between tabs, and\nthe track stacks — but its *decoration* is not: the underline rule and the\npill track's padding are still written for the horizontal axis only. Those\nare Figma's to specify, not this file's to invent. See tabs.css.",
+      "values": [
+        "horizontal",
+        "vertical"
+      ],
+      "tags": {
+        "default": "'horizontal'"
+      },
+      "default": "horizontal"
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "keyboardActivation": {
+      "type": "\"manual\" | \"automatic\" | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Whether tabs are activated automatically on focus or manually.",
+      "values": [
+        "manual",
+        "automatic"
+      ],
+      "tags": {
+        "default": "'automatic'"
+      }
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "other",
+      "description": "Whether the TabList is disabled.\nShows that a selection exists, but is not available in that circumstance."
+    },
+    "selectedKey": {
+      "type": "Key | undefined",
+      "required": false,
+      "origin": "other",
+      "description": "The currently selected key in the collection (controlled)."
+    },
+    "defaultSelectedKey": {
+      "type": "Key | undefined",
+      "required": false,
+      "origin": "other",
+      "description": "The initial selected keys in the collection (uncontrolled)."
+    },
+    "onSelectionChange": {
+      "type": "((key: Key) => void) | undefined",
+      "required": false,
+      "origin": "other",
+      "description": "Handler that is called when the selection changes."
+    },
+    "children": {
+      "type": "CollectionChildren<T>",
+      "required": true,
+      "origin": "aria",
+      "description": "The contents of the collection."
+    },
+    "items": {
+      "type": "Iterable<T> | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Item objects in the collection."
+    },
+    "disabledKeys": {
+      "type": "Iterable<Key> | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The item keys that are disabled. These items cannot be selected, focused, or otherwise\ninteracted with."
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+    },
+    "aria-label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "aria-describedby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+    }
+  },
+  "propCounts": {
+    "own": 4,
+    "aria": 9,
+    "dom": 0,
+    "other": 4
+  }
+}

package/dist/meta/Toast.json

@@ -0,0 +1,105 @@
+{
+  "name": "Toast",
+  "source": "src/components/Toast.tsx",
+  "propsType": "ToastProps",
+  "description": "Toast — Figma `Toast` (820:1655).\n\nNeutral chrome on `surface/raised`; the intent is carried by the icon alone.\nA tinted panel floating over unknown content competes with whatever is\nbehind it, and makes Toast and Alert indistinguishable at a glance.\n\nAUTO-DISMISS PAUSES ON HOVER AND FOCUS. A toast that keeps counting down\nwhile being read or while its action has keyboard focus takes the action\naway mid-reach — WCAG 2.2.1 asks for exactly this. The timer restarts rather\nthan resumes, which is the forgiving direction.",
+  "import": "import { Toast } from 'ionbase-ui';",
+  "stylesheet": "src/styles/toast.css",
+  "tokens": [
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--icon-error",
+    "--icon-information",
+    "--icon-primary",
+    "--icon-secondary",
+    "--icon-size-md",
+    "--icon-success",
+    "--icon-warning",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-shadow-shadow-lg",
+    "--ion-toast-icon",
+    "--radius-md",
+    "--radius-sm",
+    "--ring-focus",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-32",
+    "--spacing-4",
+    "--surface-hover",
+    "--surface-raised",
+    "--text-default",
+    "--text-link",
+    "--text-link-hover",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "onDismiss": {
+      "type": "(id: string) => void",
+      "required": true,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string",
+      "required": true,
+      "origin": "own"
+    },
+    "intent": {
+      "type": "ToastIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "neutral",
+        "primary",
+        "success",
+        "warning",
+        "error",
+        "information"
+      ],
+      "default": "information"
+    },
+    "title": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "message": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "action": {
+      "type": "{ label: string; onPress: () => void; } | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "One action. A second choice belongs in a dialog, which will still be there."
+    },
+    "duration": {
+      "type": "number | null | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Milliseconds before auto-dismiss. `null` keeps it until dismissed.",
+      "default": 5000
+    },
+    "dismissLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "default": "Dismiss"
+    }
+  },
+  "propCounts": {
+    "own": 8,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/ToastProvider.json

@@ -0,0 +1,75 @@
+{
+  "name": "ToastProvider",
+  "source": "src/components/Toast.tsx",
+  "propsType": "ToastProviderProps",
+  "description": "Renders the queue and supplies `useToast`.\n\nThe live region is the CONTAINER, declared once and always present. A region\nthat appears at the same moment as its content is not reliably announced —\nassistive tech has to be watching the node before the text lands in it.",
+  "import": "import { ToastProvider } from 'ionbase-ui';",
+  "stylesheet": "src/styles/toast.css",
+  "tokens": [
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--icon-error",
+    "--icon-information",
+    "--icon-primary",
+    "--icon-secondary",
+    "--icon-size-md",
+    "--icon-success",
+    "--icon-warning",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-shadow-shadow-lg",
+    "--ion-toast-icon",
+    "--radius-md",
+    "--radius-sm",
+    "--ring-focus",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-32",
+    "--spacing-4",
+    "--surface-hover",
+    "--surface-raised",
+    "--text-default",
+    "--text-link",
+    "--text-link-hover",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    },
+    "placement": {
+      "type": "ToastPlacement | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Where the stack sits. Not a Figma variant — position is the queue's concern.",
+      "values": [
+        "top-left",
+        "top-right",
+        "bottom-left",
+        "bottom-right"
+      ]
+    },
+    "limit": {
+      "type": "number | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Oldest are dropped past this. Prevents an unbounded stack covering the page."
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/Toggle.json

@@ -0,0 +1,102 @@
+{
+  "name": "Toggle",
+  "source": "src/components/Toggle.tsx",
+  "propsType": "ToggleProps",
+  "description": "Toggle is a checkbox with `role=\"switch\"`.\n\nNot a button with aria-pressed: a switch is a form value, and the checkbox\ngives form association and `:checked` for free. `role=\"switch\"` changes only\nhow it is announced — \"on/off\" rather than \"checked/unchecked\" — which is\nwhat Figma's On/Off states describe.\n\nThe visual difference from Checkbox is entirely in CSS; this component and\nCheckbox are near-identical by design rather than by accident, and are kept\napart because Figma models them as separate components with separate size\nramps.",
+  "import": "import { Toggle } from 'ionbase-ui';",
+  "stylesheet": "src/styles/toggle.css",
+  "tokens": [
+    "--border-disabled",
+    "--border-focus",
+    "--border-strong",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--ion-duration-base",
+    "--ion-ease-in-out",
+    "--ion-ease-out",
+    "--ion-shadow-raised-flush-lg",
+    "--ion-shadow-raised-flush-sm",
+    "--ion-shadow-raised-flush-xs",
+    "--ion-shadow-shadow-xs",
+    "--ion-toggle-font-size",
+    "--ion-toggle-gap",
+    "--ion-toggle-inset",
+    "--ion-toggle-line-height",
+    "--ion-toggle-on",
+    "--ion-toggle-raised",
+    "--ion-toggle-thumb",
+    "--ion-toggle-track-h",
+    "--ion-toggle-track-w",
+    "--radius-full",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-disabled",
+    "--surface-error",
+    "--surface-inverse",
+    "--surface-muted",
+    "--surface-primary",
+    "--text-disabled",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "size": {
+      "type": "ToggleSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "intent": {
+      "type": "ToggleIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches the Figma `Color` variant: Brand, Neutral, Danger.",
+      "values": [
+        "neutral",
+        "brand",
+        "danger"
+      ],
+      "default": "brand"
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether the toggle 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": 5,
+    "aria": 0,
+    "dom": 304,
+    "other": 0
+  }
+}