ionbase-ui 0.84.0 → 0.88.0

package/dist/figma-map.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.88.0",
   "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
   "figmaExported": "2026-09-25",
   "usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
@@ -539,6 +539,41 @@
         }
       }
     },
+    "1501:475": {
+      "figmaComponent": "Checkbox Group",
+      "figmaNodeId": "1501:475",
+      "figmaPage": "Checkbox",
+      "component": "CheckboxGroup",
+      "import": "import { CheckboxGroup } from 'ionbase-ui';",
+      "docs": "components/checkbox-group/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Vertical": "vertical",
+            "Horizontal": "horizontal"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Error": true
+          },
+          "note": "Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox."
+        },
+        "Label#1501:0": {
+          "prop": "label"
+        },
+        "Helper Text#1501:7": {
+          "prop": "description",
+          "note": "the help text; while State=Error the same slot holds errorMessage"
+        },
+        "Show Helper#1501:14": {
+          "prop": "description",
+          "note": "an absent prop is the switch, so false means omit description"
+        }
+      }
+    },
     "1167:247": {
       "figmaComponent": "Citation",
       "figmaNodeId": "1167:247",
@@ -1225,6 +1260,35 @@
         }
       }
     },
+    "1510:666": {
+      "figmaComponent": "Multi Select",
+      "figmaNodeId": "1510:666",
+      "figmaPage": "Multi Select",
+      "component": "MultiSelect",
+      "import": "import { MultiSelect } from 'ionbase-ui';",
+      "docs": "components/multi-select/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly, and both hide the tags’ × buttons. The field is Combobox’s, which is Input’s box — the same split both record."
+        },
+        "Show Tags#1510:0": {
+          "prop": "hideTags",
+          "note": "Inverted: Show Tags off is `hideTags`, for a filter bar whose active-filters row already shows the values. With tags shown, they are the chosen `value`, labelled from `options`, and appear whenever something is chosen."
+        }
+      }
+    },
     "53:13": {
       "figmaComponent": "Nav Item",
       "figmaNodeId": "53:13",
@@ -1512,6 +1576,35 @@
         }
       }
     },
+    "1498:242": {
+      "figmaComponent": "Search Field",
+      "figmaNodeId": "1498:242",
+      "figmaPage": "Search Field",
+      "component": "SearchField",
+      "import": "import { SearchField } from 'ionbase-ui';",
+      "docs": "components/search-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query."
+        },
+        "Value#80:0": {
+          "prop": "value",
+          "note": "The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder."
+        }
+      }
+    },
     "1390:435": {
       "figmaComponent": "Segmented Control",
       "figmaNodeId": "1390:435",
@@ -2252,6 +2345,24 @@
         }
       }
     },
+    "1517:583": {
+      "figmaComponent": "Toolbar",
+      "figmaNodeId": "1517:583",
+      "figmaPage": "Toolbar",
+      "component": "Toolbar",
+      "import": "import { Toolbar } from 'ionbase-ui';",
+      "docs": "components/toolbar/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Horizontal": "horizontal",
+            "Vertical": "vertical"
+          },
+          "note": "Horizontal moves with ← →, vertical with ↑ ↓. The children are the caller's: Buttons, a Divider between groups (vertical in a horizontal toolbar), and a MenuTrigger with an icon-only Button for the overflow. Name it with aria-label for what it acts on."
+        }
+      }
+    },
     "801:68": {
       "figmaComponent": "Tooltip",
       "figmaNodeId": "801:68",
@@ -2892,6 +3003,41 @@
         }
       }
     },
+    "Checkbox Group": {
+      "figmaComponent": "Checkbox Group",
+      "figmaNodeId": "1501:475",
+      "figmaPage": "Checkbox",
+      "component": "CheckboxGroup",
+      "import": "import { CheckboxGroup } from 'ionbase-ui';",
+      "docs": "components/checkbox-group/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Vertical": "vertical",
+            "Horizontal": "horizontal"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Error": true
+          },
+          "note": "Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox."
+        },
+        "Label#1501:0": {
+          "prop": "label"
+        },
+        "Helper Text#1501:7": {
+          "prop": "description",
+          "note": "the help text; while State=Error the same slot holds errorMessage"
+        },
+        "Show Helper#1501:14": {
+          "prop": "description",
+          "note": "an absent prop is the switch, so false means omit description"
+        }
+      }
+    },
     "Citation": {
       "figmaComponent": "Citation",
       "figmaNodeId": "1167:247",
@@ -3578,6 +3724,35 @@
         }
       }
     },
+    "Multi Select": {
+      "figmaComponent": "Multi Select",
+      "figmaNodeId": "1510:666",
+      "figmaPage": "Multi Select",
+      "component": "MultiSelect",
+      "import": "import { MultiSelect } from 'ionbase-ui';",
+      "docs": "components/multi-select/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly, and both hide the tags’ × buttons. The field is Combobox’s, which is Input’s box — the same split both record."
+        },
+        "Show Tags#1510:0": {
+          "prop": "hideTags",
+          "note": "Inverted: Show Tags off is `hideTags`, for a filter bar whose active-filters row already shows the values. With tags shown, they are the chosen `value`, labelled from `options`, and appear whenever something is chosen."
+        }
+      }
+    },
     "Nav Item": {
       "figmaComponent": "Nav Item",
       "figmaNodeId": "53:13",
@@ -3865,6 +4040,35 @@
         }
       }
     },
+    "Search Field": {
+      "figmaComponent": "Search Field",
+      "figmaNodeId": "1498:242",
+      "figmaPage": "Search Field",
+      "component": "SearchField",
+      "import": "import { SearchField } from 'ionbase-ui';",
+      "docs": "components/search-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query."
+        },
+        "Value#80:0": {
+          "prop": "value",
+          "note": "The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder."
+        }
+      }
+    },
     "Segmented Control": {
       "figmaComponent": "Segmented Control",
       "figmaNodeId": "1390:435",
@@ -4605,6 +4809,24 @@
         }
       }
     },
+    "Toolbar": {
+      "figmaComponent": "Toolbar",
+      "figmaNodeId": "1517:583",
+      "figmaPage": "Toolbar",
+      "component": "Toolbar",
+      "import": "import { Toolbar } from 'ionbase-ui';",
+      "docs": "components/toolbar/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Horizontal": "horizontal",
+            "Vertical": "vertical"
+          },
+          "note": "Horizontal moves with ← →, vertical with ↑ ↓. The children are the caller's: Buttons, a Divider between groups (vertical in a horizontal toolbar), and a MenuTrigger with an icon-only Button for the overflow. Name it with aria-label for what it acts on."
+        }
+      }
+    },
     "Tooltip": {
       "figmaComponent": "Tooltip",
       "figmaNodeId": "801:68",
@@ -4727,18 +4949,20 @@
     "Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
     "Side Menu Item": "A 32-tall side-navigation row on the Side Menu page, which predates Sidebar. It shared the name Menu Item with the real one (82:217) until 25 Sep 2026, and because the export keyed on the name it silently replaced it — the mapping, the gates and the Dev Mode block all pointed here. Sidebar Item is the side-navigation row code ships.",
     "Side Menu Section Title": "The section heading of the same pre-Sidebar side menu. Menu Section Title (1468:271) is the menu's own, drawn on the Menu page; Sidebar Section is the side navigation's.",
-    "Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract."
+    "Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract.",
+    "Multi Select Menu": "The list MultiSelect opens, with a check on each row. Not a separate export, for Combobox Menu's reason: the list and the field are one control, and a listbox with nothing to own it is not a thing a caller should be able to mount. Drawn separately because a frame cannot both hug a field and overlay a list."
   },
   "codeUnmapped": {
     "DateRangePicker": "Drawn, but not as a set of its own: its field is Date Picker Type=Range and its calendar is Calendar Mode=Range. A Figma set maps to exactly one code component, and splitting one field into two sets to satisfy that would draw the same box twice. Read Date Picker’s Type note for the handoff.",
     "Icon": "Figma has no Icon component; icons are vector assets dropped into slots. Icon is the React wrapper that gives any of them a size rung and an accessible label, so there is nothing on the Figma side to point at.",
     "LogoMark": "Logo-Ionbase maps to Logo. Figma spells the no-wordmark case as that component's Type axis rather than a separate component; LogoMark is how code spells the same thing.",
-    "RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason.",
+    "RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason. Its label, help, error and orientation are the shell drawn as Checkbox Group; the two groups share it in code as well.",
     "ScrollProgress": "Drawn in Figma as its three parts — Line, Progress, Progress Heading — all of which the component owns internally. There is no whole-component frame to map.",
     "Table": "Figma draws Table Row and Table Cell; the table itself is the caller assembling them. Density, the one property Table owns, is mapped on Table Cell.",
     "TableBody": "As TableHead.",
     "TableHead": "As Table — a code-side grouping element. Figma expresses a header row as a Table Row variant, not a separate component.",
     "ToastProvider": "Figma draws Toast, which is mapped. The provider is placement, queueing and the live region — runtime behaviour with nothing to draw.",
-    "MenuTrigger": "Composition, not a drawing: a Button followed by a Menu, both already drawn and mapped. What MenuTrigger adds — open state, positioning, aria-haspopup and aria-expanded, focus on open and return on close — is runtime behaviour a static frame cannot hold, the same reason RadioGroup is here."
+    "MenuTrigger": "Composition, not a drawing: a Button followed by a Menu, both already drawn and mapped. What MenuTrigger adds — open state, positioning, aria-haspopup and aria-expanded, focus on open and return on close — is runtime behaviour a static frame cannot hold, the same reason RadioGroup is here.",
+    "Fieldset": "Drawn as the shell of Checkbox Group: the legend, the helper and the Error recolour are Form Field's type, laid around a set of options. A Fieldset of Inputs is the caller composing Form Fields under that legend, so there is no separate frame to point at."
   }
 }

package/dist/meta/Checkbox.json

@@ -8,8 +8,7 @@
   "summary": "A native checkbox with the system's styling, supporting an indeterminate state.",
   "useWhen": [
     "a single on/off choice inside a form that is submitted",
-    "selecting rows in a Table",
-    "several independent options where more than one may be picked"
+    "selecting rows in a Table"
   ],
   "useInstead": [
     {
@@ -17,6 +16,11 @@
       "use": "Toggle",
       "why": "a switch reads as a setting taking effect now; a checkbox reads as a value being collected"
     },
+    {
+      "when": "several options answer one question",
+      "use": "CheckboxGroup",
+      "why": "it announces the question with each option, carries the group's error, and can require at least one"
+    },
     {
       "when": "the options are mutually exclusive",
       "use": "RadioGroup"
@@ -148,8 +152,7 @@
         "sm",
         "md",
         "lg"
-      ],
-      "default": "md"
+      ]
     },
     "intent": {
       "type": "CheckboxIntent | undefined",
@@ -160,8 +163,7 @@
         "neutral",
         "danger",
         "brand"
-      ],
-      "default": "brand"
+      ]
     },
     "isIndeterminate": {
       "type": "boolean | undefined",

package/dist/meta/CheckboxGroup.json

@@ -0,0 +1,268 @@
+{
+  "name": "CheckboxGroup",
+  "source": "src/components/Checkbox.tsx",
+  "propsType": "CheckboxGroupProps",
+  "description": "A set of checkboxes that answers one question — \"notify me when…\", \"which\nregions\". Owns the selected values, the group's label, help text and error,\nand \"select at least one\".\n\nA row of loose Checkboxes can do none of that accessibly: the question is\nnot announced with the options, an error has nothing to attach to, and\n\"at least one\" has no native expression at all. See the `required` note in\nCheckbox for how that last one is done.",
+  "import": "import { CheckboxGroup } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A set of checkboxes answering one question. Owns the selected values, the group's label, help and error, and \"select at least one\".",
+  "useWhen": [
+    "several options may be picked and they answer one question — \"notify me when\", \"regions\", \"columns to show\"",
+    "the group needs a rule of its own — at least one, or an error that belongs to the set rather than to an option"
+  ],
+  "useInstead": [
+    {
+      "when": "only one option may be picked",
+      "use": "RadioGroup"
+    },
+    {
+      "when": "the options are many, or space is tight",
+      "use": "MultiSelect",
+      "why": "past about seven options a list of boxes is longer than the form around it; MultiSelect filters them and shows the chosen ones as tags"
+    },
+    {
+      "when": "there is one on/off choice",
+      "use": "Checkbox",
+      "why": "a group of one announces a question and then its only answer"
+    },
+    {
+      "when": "each option takes effect immediately",
+      "use": "Toggle"
+    }
+  ],
+  "composition": {
+    "order": [
+      "CheckboxGroup",
+      "Checkbox"
+    ],
+    "note": "Give every Checkbox a `value`; the group's `onChange` receives the array of ticked values. Selection lives on the group — do not also set `isSelected` on the boxes.",
+    "example": "<CheckboxGroup label=\"Notify the team when\" isRequired value={notifyOn} onChange={setNotifyOn} isInvalid={!!error} errorMessage={error}><Checkbox value=\"failed\">A run fails</Checkbox><Checkbox value=\"approval\">A run needs approval</Checkbox></CheckboxGroup>"
+  },
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms and filter panels"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "touch targets and prominent choices"
+      }
+    },
+    "intent": {
+      "brand": {
+        "use": "the default"
+      },
+      "neutral": {
+        "use": "facts rather than approvals — the columns shown, the filters applied"
+      },
+      "danger": {
+        "use": "a set of destructive consents"
+      }
+    },
+    "orientation": {
+      "vertical": {
+        "use": "the default, and always when a label runs past a few words"
+      },
+      "horizontal": {
+        "use": "two to four one-word options — weekdays, regions. Wraps rather than overflows"
+      }
+    }
+  },
+  "slots": {
+    "label": {
+      "accepts": "text",
+      "note": "renders as the <legend> — the question the options answer"
+    },
+    "description": {
+      "accepts": "text",
+      "note": "help beneath the options; replaced by `errorMessage` while `isInvalid` is set"
+    },
+    "errorMessage": {
+      "accepts": "text",
+      "note": "shown only while `isInvalid` is set"
+    },
+    "children": {
+      "accepts": "Checkbox"
+    }
+  },
+  "a11y": {
+    "role": "group, from <fieldset> and <legend>",
+    "guarantees": [
+      "the legend is announced as the group's name when focus enters any box",
+      "the description or error is on every box's `aria-describedby` as well as the fieldset's, so it is read on the box that takes focus",
+      "`isInvalid` sets `aria-invalid` on every box",
+      "`isRequired` sets native `required` on every box while none is ticked and on none once one is: the browser blocks the submit in its own language, and each box announces \"required\" exactly while the rule is unmet",
+      "`isDisabled` cascades to every Checkbox that has not set its own"
+    ],
+    "requires": [
+      "`label`, or `aria-label` when the question is already visible elsewhere",
+      "a `value` on every Checkbox — the group tracks the selection by it"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "loose Checkboxes under a text label",
+      "why": "the question is not announced with the options, an error has nothing to attach to, and \"at least one\" cannot be expressed"
+    },
+    {
+      "dont": "`isSelected` or `checked` on a Checkbox inside a group",
+      "why": "the group owns the selection; the box's own value is ignored"
+    },
+    {
+      "dont": "`isRequired` on every Checkbox in the group",
+      "why": "that means every box must be ticked; `isRequired` on the group means at least one"
+    }
+  ],
+  "stylesheet": "src/styles/checkbox.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",
+    "--icon-disabled",
+    "--icon-on-color",
+    "--ion-checkbox-border",
+    "--ion-checkbox-fill",
+    "--ion-checkbox-font-size",
+    "--ion-checkbox-gap",
+    "--ion-checkbox-line-height",
+    "--ion-checkbox-mark",
+    "--ion-checkbox-radius",
+    "--ion-checkbox-raised",
+    "--ion-checkbox-size",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-shadow-raised-flush-lg",
+    "--ion-shadow-raised-flush-sm",
+    "--ion-shadow-raised-flush-xs",
+    "--radius-sm",
+    "--radius-xs",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-4",
+    "--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": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "The question the options answer. Renders as the `<legend>`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Help text beneath the options. Replaced by `errorMessage` while invalid."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Shown in the description's place while `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Marks every box invalid and shows `errorMessage`."
+    },
+    "isRequired": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "At least one option must be selected — enforced by native validation."
+    },
+    "value": {
+      "type": "readonly string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The selected values (controlled)."
+    },
+    "defaultValue": {
+      "type": "readonly string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The initially selected values (uncontrolled)."
+    },
+    "onChange": {
+      "type": "((value: string[]) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Receives the whole new selection, in the order the options were ticked."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Shared input name, so a form submits every ticked value under it."
+    },
+    "size": {
+      "type": "CheckboxSize | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "intent": {
+      "type": "CheckboxIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "neutral",
+        "danger",
+        "brand"
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether every checkbox in the group is disabled."
+    },
+    "orientation": {
+      "type": "FieldsetOrientation | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "vertical",
+        "horizontal"
+      ]
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Checkboxes, each with a `value`."
+    }
+  },
+  "propCounts": {
+    "own": 14,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/Combobox.json

@@ -17,6 +17,11 @@
       "use": "Select",
       "why": "the native control brings keyboard handling and the mobile platform picker for free; this rebuilds all of it"
     },
+    {
+      "when": "more than one value may be picked",
+      "use": "MultiSelect",
+      "why": "its input holds only the filter text, the list stays open between picks, and the chosen values show as tags"
+    },
     {
       "when": "there are two or three mutually exclusive choices worth showing at once",
       "use": "RadioGroup"
@@ -58,6 +63,9 @@
     "requires": [
       "`label`, or an `aria-label` when no visible label is rendered",
       "`emptyLabel` wording that says why nothing is listed, if the default is too terse"
+    ],
+    "notes": [
+      "While the list is open, React Aria hides everything outside the field and the list from assistive technology. That is the platform pattern for a combobox; a whole-page accessibility scan taken with the list open reports the hidden page, not this control."
     ]
   },
   "antiPatterns": [

package/dist/meta/Divider.json

@@ -55,8 +55,8 @@
       "origin": "own",
       "description": "Matches Figma's `Style` variant.",
       "values": [
-        "horizontal",
-        "vertical"
+        "vertical",
+        "horizontal"
       ]
     }
   },