ionbase-ui 0.81.1 → 0.86.0

package/dist/components/Menu.js

@@ -1,35 +1,252 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { cloneElement, createContext, forwardRef, useContext, useMemo, useRef, } from 'react';
+import { DismissButton, Overlay, mergeProps, useMenu, useMenuItem, useMenuSection, useMenuTrigger, usePopover, useSeparator, useSubmenuTrigger, } from 'react-aria';
+import { useMenuTriggerState, useSubmenuTriggerState, useTreeState, } from 'react-stately';
+import { CollectionBuilder, Item, Section, getChildNodes, } from '@react-stately/collections';
 import { resolveDisabled } from './resolve-disabled.js';
 /**
- * Menu is the list surface, not a popover.
- *
- * Figma models the list alone — there is no trigger, anchor or open state in
- * the design — so this renders the surface and nothing else. Positioning it
- * against a button is the caller's job until Figma has a component that says
- * how. Building a popover here would be inventing design, and it would be the
- * hard half to unpick later.
- *
- * `role="menu"` is deliberately NOT set. A real ARIA menu owes the user
- * roving-tabindex arrow navigation, typeahead and focus containment; claiming
- * the role without them is worse for a screen-reader user than an honest list,
- * because it promises interactions that are not there. When the popover exists,
- * the role comes with it.
- */
-export const Menu = forwardRef(({ className, children, ...rest }, ref) => (_jsx("ul", { ...rest, ref: ref, className: ['ion-menu', className].filter(Boolean).join(' '), children: children })));
-Menu.displayName = 'Menu';
+ * One row of a Menu. A collection element, like TabItem: it renders nothing
+ * itself — Menu reads its props and draws the row — so it only means anything
+ * as a direct child of Menu or MenuSection. Give it a `key`; that key is what
+ * `onAction` and `selectedKeys` speak in.
+ */
+export function MenuItem(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_props) {
+    return null;
+}
+/*
+ * The collection builder asks the element's TYPE how to turn it into a node.
+ * Borrowing Item's answer is what makes MenuItem a collection element while
+ * keeping its own prop type: the builder copies every prop onto `node.props`,
+ * which is where Menu reads `icon` and `isDisabled` back from.
+ */
+MenuItem.getCollectionNode = Item.getCollectionNode;
+MenuItem.displayName = 'MenuItem';
+/**
+ * A named group of MenuItems. `title` is Figma's `Menu Section Title`; without
+ * one, pass `aria-label` and the group is set off by a rule instead.
+ */
+export { Section as MenuSection };
 /** Figma's trailing check. Always occupies its slot so rows never reflow as the
  *  selection moves; only its visibility changes. */
 const Check = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-export const MenuItem = forwardRef(({ isSelected, icon, className, children, isDisabled, disabled, ...rest }, ref) => {
-    const resolvedDisabled = resolveDisabled(isDisabled, disabled);
-    return (_jsx("li", { children: _jsxs("button", { ...rest, ref: ref, type: "button", disabled: resolvedDisabled, "aria-pressed": isSelected, className: [
-                'ion-menu__item',
-                isSelected ? 'ion-menu__item--selected' : '',
-                className || '',
-            ]
-                .filter(Boolean)
-                .join(' '), children: [icon && (_jsx("span", { className: "ion-menu__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ion-menu__label", children: children }), _jsx("span", { className: "ion-menu__check", "aria-hidden": "true", children: _jsx(Check, {}) })] }) }));
+/** Figma draws no submenu row; this is Button's chevron, turned to point
+ *  where the submenu opens. Mirrored in right-to-left layouts by the CSS. */
+const Chevron = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m9 18 6-6-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/**
+ * What MenuTrigger hands the Menu it opens: the ARIA wiring from
+ * `useMenuTrigger` (the label, autofocus and close-on-action), and the root
+ * state every submenu's state is derived from.
+ */
+const MenuTriggerContext = createContext(null);
+/**
+ * What a menu hands the submenus beneath it. `onAction` is the ROOT menu's:
+ * an action chosen three levels down is still one of the actions the caller
+ * listed, and it reaches the one handler the caller wrote.
+ */
+const MenuTreeContext = createContext(null);
+/**
+ * Reads the two deprecated item props before the menu's state exists.
+ *
+ * `isDisabled` needs nothing here: react-stately's SelectionManager reads an
+ * item's own `isDisabled` off `node.props`, and the arrow keys skip it. The
+ * `disabled` alias it has never heard of, so that one has to reach
+ * `useTreeState` as a key — a row that only LOOKED disabled would still take
+ * focus and fire `onAction`. `isSelected` has to become `selectedKeys` for the
+ * same reason. Building the collection once more is the price of the aliases,
+ * and a menu is small enough that the price is nothing. Delete this with them.
+ */
+function readItemFlags(props) {
+    const flags = {
+        disabled: [],
+        selected: [],
+        hasLegacySelected: false,
+    };
+    const visit = (nodes) => {
+        for (const node of nodes) {
+            if (node.type === 'section') {
+                visit(node.childNodes);
+                continue;
+            }
+            const p = node.props;
+            if (!p)
+                continue;
+            if (p.isDisabled === undefined &&
+                resolveDisabled(p.isDisabled, p.disabled))
+                flags.disabled.push(node.key);
+            if (p.isSelected !== undefined) {
+                flags.hasLegacySelected = true;
+                if (p.isSelected)
+                    flags.selected.push(node.key);
+            }
+        }
+    };
+    visit(new CollectionBuilder().build(props));
+    return flags;
+}
+function MenuRow(props) {
+    const tree = useContext(MenuTreeContext);
+    return props.item.hasChildNodes && tree ? (_jsx(SubmenuRow, { ...props, tree: tree })) : (_jsx(ActionRow, { ...props }));
+}
+function ActionRow({ item, state }) {
+    const ref = useRef(null);
+    const { menuItemProps, labelProps, isFocused, isFocusVisible, isSelected, isDisabled, } = useMenuItem({ key: item.key }, state, ref);
+    const icon = item.props?.icon;
+    return (_jsxs("li", { ...menuItemProps, ref: ref, className: [
+            'ion-menu__item',
+            isSelected ? 'ion-menu__item--selected' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), "data-focused": isFocused || undefined, "data-focus-visible": isFocusVisible || undefined, "data-disabled": isDisabled || undefined, children: [icon && (_jsx("span", { className: "ion-menu__icon", "aria-hidden": "true", children: icon })), _jsx("span", { ...labelProps, className: "ion-menu__label", children: item.rendered }), state.selectionManager.selectionMode !== 'none' && (_jsx("span", { className: "ion-menu__check", "aria-hidden": "true", children: _jsx(Check, {}) }))] }));
+}
+/**
+ * A row that opens a submenu. Right arrow, Enter or Space opens it with focus
+ * on its first row; hovering opens it after a short delay; left arrow or
+ * Escape closes it and puts focus back on this row.
+ *
+ * The submenu is NOT modal: the parent menu stays on screen and hoverable, so
+ * the pointer can move between the two. react-aria makes that choice, and it
+ * is the right one — a submenu that trapped focus would make moving back up a
+ * level a keyboard-only act.
+ */
+function SubmenuRow({ item, state, menuRef, tree, }) {
+    const ref = useRef(null);
+    const submenuRef = useRef(null);
+    const submenuState = useSubmenuTriggerState({ triggerKey: item.key }, tree.rootState);
+    const { submenuTriggerProps, submenuProps, popoverProps } = useSubmenuTrigger({ parentMenuRef: menuRef, submenuRef, type: 'menu' }, submenuState, ref);
+    // `isOpen` describes the trigger, it is not a menu-item option.
+    const { isOpen, ...triggerOptions } = submenuTriggerProps;
+    const { menuItemProps, labelProps, isFocused, isFocusVisible, isDisabled } = useMenuItem({ ...triggerOptions, key: item.key }, state, ref);
+    const icon = item.props?.icon;
+    return (_jsxs("li", { ...menuItemProps, ref: ref, className: "ion-menu__item ion-menu__item--submenu", "data-focused": isFocused || undefined, "data-focus-visible": isFocusVisible || undefined, "data-disabled": isDisabled || undefined, "data-open": isOpen || undefined, children: [icon && (_jsx("span", { className: "ion-menu__icon", "aria-hidden": "true", children: icon })), _jsx("span", { ...labelProps, className: "ion-menu__label", children: item.rendered }), _jsx("span", { className: "ion-menu__chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) }), submenuState.isOpen && (_jsx(MenuPopover, { state: submenuState, triggerRef: ref, popoverRef: submenuRef, placement: "end top", isNonModal: popoverProps.isNonModal, shouldCloseOnInteractOutside: popoverProps.shouldCloseOnInteractOutside, disableFocusManagement: popoverProps.disableFocusManagement, children: _jsx(MenuList, { ...submenuProps, onAction: tree.onAction, children: item.props.children }) }))] }));
+}
+/**
+ * The floating surface a menu opens on. Mounted only while open, for the
+ * reason AGENTS.md gives about overlay hooks: `usePopover` has to be called in
+ * the component that mounts with the overlay.
+ *
+ * Figma's Menu already IS the surface — border, radius, Shadow/lg — so this
+ * wrapper paints nothing. It positions, and it carries the underlay that makes
+ * an outside click close the root menu. A submenu has no underlay: it is
+ * non-modal, and an underlay would swallow the pointer on its way back to the
+ * parent.
+ */
+function MenuPopover({ state, triggerRef, popoverRef, placement, isNonModal, shouldCloseOnInteractOutside, disableFocusManagement, children, }) {
+    const { popoverProps, underlayProps } = usePopover({
+        triggerRef,
+        popoverRef,
+        placement,
+        offset: isNonModal ? 0 : 4,
+        // Line the submenu's first row up with the row that opened it: the
+        // menu's own padding plus its border.
+        crossOffset: isNonModal ? -7 : 0,
+        isNonModal,
+        shouldCloseOnInteractOutside,
+    }, state);
+    return (_jsxs(Overlay, { disableFocusManagement: disableFocusManagement, children: [!isNonModal && (_jsx("div", { ...underlayProps, className: "ion-menu-popover__underlay" })), _jsxs("div", { ...popoverProps, ref: popoverRef, className: "ion-menu-popover", children: [!isNonModal && _jsx(DismissButton, { onDismiss: state.close }), children, !isNonModal && _jsx(DismissButton, { onDismiss: state.close })] })] }));
+}
+function MenuSectionGroup({ section, state, isFirst, menuRef, }) {
+    const { itemProps, headingProps, groupProps } = useMenuSection({
+        heading: section.rendered,
+        'aria-label': section['aria-label'],
+    });
+    const { separatorProps } = useSeparator({ elementType: 'li' });
+    return (_jsxs(_Fragment, { children: [!isFirst && !section.rendered && (_jsx("li", { ...separatorProps, className: "ion-menu__separator" })), _jsxs("li", { ...itemProps, className: "ion-menu__section", children: [section.rendered && (_jsx("span", { ...headingProps, className: "ion-menu__section-title", children: section.rendered })), _jsx("ul", { ...groupProps, className: "ion-menu__group", children: [...getChildNodes(section, state.collection)].map((node) => (_jsx(MenuRow, { item: node, state: state, menuRef: menuRef }, node.key))) })] })] }));
+}
+/**
+ * The list itself, shared by the root menu and every submenu. It knows nothing
+ * about triggers: whatever opened it has already put its wiring into `props`.
+ */
+const MenuList = forwardRef(function MenuList(props, forwardedRef) {
+    const { className, style } = props;
+    const flags = useMemo(() => readItemFlags(props), 
+    // Only the collection's inputs matter here; the rest of `props` changes on
+    // every render and would rebuild the collection for nothing.
+    [props.children, props.items]);
+    const disabledKeys = useMemo(() => new Set([...(props.disabledKeys ?? []), ...flags.disabled]), [props.disabledKeys, flags.disabled]);
+    const usesLegacySelection = flags.hasLegacySelected &&
+        props.selectedKeys === undefined &&
+        props.defaultSelectedKeys === undefined;
+    const stateProps = {
+        ...props,
+        disabledKeys,
+        ...(usesLegacySelection && {
+            selectedKeys: new Set(flags.selected),
+            selectionMode: props.selectionMode ??
+                (flags.selected.length > 1 ? 'multiple' : 'single'),
+        }),
+    };
+    const state = useTreeState(stateProps);
+    const ref = useRef(null);
+    const { menuProps } = useMenu(stateProps, state, ref);
+    const setRef = (el) => {
+        ref.current = el;
+        if (typeof forwardedRef === 'function')
+            forwardedRef(el);
+        else if (forwardedRef)
+            forwardedRef.current = el;
+    };
+    const nodes = [...state.collection];
+    return (_jsx("ul", { ...menuProps, ref: setRef, style: style, className: ['ion-menu', className].filter(Boolean).join(' '), children: nodes.map((node, i) => node.type === 'section' ? (_jsx(MenuSectionGroup, { section: node, state: state, isFirst: i === 0, menuRef: ref }, node.key)) : (_jsx(MenuRow, { item: node, state: state, menuRef: ref }, node.key))) }));
 });
-MenuItem.displayName = 'MenuItem';
+/**
+ * Menu — Figma `Menu` (82:306), `Menu Item` and `Menu Section Title`.
+ *
+ * A real ARIA menu: `role="menu"`, one tab stop, arrow keys, Home and End,
+ * typeahead, and disabled rows listed but skipped. Figma's `Type` is
+ * `selectionMode` — Single draws one check, Multi draws several — and with
+ * a selection mode the rows become `menuitemradio` / `menuitemcheckbox` and
+ * announce their checked state.
+ *
+ * On its own it is the surface only, rendered in flow. Inside a MenuTrigger it
+ * floats, opens and closes, is named by its trigger, and can open submenus.
+ */
+export const Menu = forwardRef(function Menu(props, forwardedRef) {
+    const trigger = useContext(MenuTriggerContext);
+    if (!trigger)
+        return _jsx(MenuList, { ...props, ref: forwardedRef });
+    /*
+     * The trigger names the menu through aria-labelledby. An aria-label the
+     * caller passed is kept and wins, because a trigger reading "⋯" or "Options"
+     * is often a worse name than the one the caller wrote.
+     */
+    const { 'aria-labelledby': labelledBy, ...wiring } = trigger.menuProps;
+    const named = props['aria-label'] || props['aria-labelledby'];
+    const merged = mergeProps(wiring, named ? {} : { 'aria-labelledby': labelledBy }, props);
+    return (_jsx(MenuTreeContext.Provider, { value: {
+            rootState: trigger.rootState,
+            onAction: props.onAction,
+        }, children: _jsx(MenuList, { ...merged, ref: forwardedRef }) }));
+});
+/**
+ * MenuTrigger — a Button that opens a Menu.
+ *
+ * The "⋯" overflow menu is this with an icon-only Button; there is no separate
+ * component for it, because the only difference is the Button's content and
+ * its required aria-label.
+ *
+ * `useMenuTrigger` does what a Popover wrapped round a Menu could not: the
+ * trigger announces `aria-haspopup="menu"` and `aria-expanded`, the menu is
+ * named by the trigger, ArrowDown and ArrowUp open it with focus on the first
+ * or last row, and choosing an action closes it and returns focus to the
+ * trigger.
+ */
+export function MenuTrigger({ children, placement = 'bottom start', isDisabled, ...stateProps }) {
+    const [trigger, menu] = React.Children.toArray(children);
+    const rootState = useMenuTriggerState(stateProps);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, rootState, triggerRef);
+    return (_jsxs(_Fragment, { children: [cloneElement(trigger, mergeProps(trigger.props, {
+                ...menuTriggerProps,
+                isDisabled,
+                ref: triggerRef,
+            })), rootState.isOpen && (_jsx(MenuPopover, { state: rootState, triggerRef: triggerRef, popoverRef: popoverRef, placement: placement, children: _jsx(MenuTriggerContext.Provider, { value: {
+                        rootState,
+                        menuProps: menuProps,
+                    }, children: menu }) }))] }));
+}
+MenuTrigger.displayName = 'MenuTrigger';
 //# sourceMappingURL=Menu.js.map

package/dist/components/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAE3D,QAAQ,GACN,CACN,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAmB1B;oDACoD;AACpD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACxE,GAAG,EACH,EAAE;IACF,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL,uBACE,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,gBAAgB,kBACZ,UAAU,EACxB,SAAS,EAAE;gBACT,gBAAgB;gBAChB,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;gBAC5C,SAAS,IAAI,EAAE;aAChB;iBACE,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,aAEX,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,CACR,EACD,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EACnD,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAClD,KAAC,KAAK,KAAG,GACJ,IACA,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+/**
+ * Which heading the title renders as. `1` is the default because a page
+ * header is the page's title. `2` is for a header inside a pane that is not
+ * the page — the detail half of a list-detail layout, under the list's `h1`.
+ */
+export type PageHeaderHeadingLevel = 1 | 2;
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The page's title. Rendered as the `h1`. */
+    title: React.ReactNode;
+    /**
+     * The title's id. Pass it when something else points at the heading —
+     * `<main aria-labelledby>` is the usual one. Generated when omitted.
+     */
+    titleId?: string;
+    /** Heading element for the title. Defaults to `1`. */
+    headingLevel?: PageHeaderHeadingLevel;
+    /** One or two sentences under the title: what this page is for. */
+    description?: React.ReactNode;
+    /** A Breadcrumb, above the title. */
+    breadcrumb?: React.ReactNode;
+    /**
+     * Beside the title: a Badge or two for the record's state — "Paused",
+     * "Draft". State, not actions.
+     */
+    status?: React.ReactNode;
+    /**
+     * At the end of the title row: the page's actions, most important last.
+     * One primary Button at most; several more go in a MenuTrigger.
+     */
+    actions?: React.ReactNode;
+    /**
+     * A row beneath, that belongs to the header rather than the page's
+     * content: the page's Tabs, or the filters its table answers to.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * PageHeader — the top of a page: where you are, what it is, and what you can
+ * do to it.
+ *
+ * Promoted from the demo app, where five screens hand-wrote it in three
+ * different shapes (`.demo-page__header`, `.demo-run-header`, and a bare
+ * `<div>`), each with its own gap and its own idea of where the actions
+ * aligned. Every enterprise system ships one — Carbon's PageHeader,
+ * Lightning's page headers — because every page has one.
+ *
+ * NOT A LANDMARK
+ *
+ * It renders a `<div>`, not a `<header>`. A `<header>` that is a child of
+ * `<body>` is the page's banner, and the app shell's Header already is that.
+ * The page's landmark is `<main>`, named by this title: pass `titleId` and
+ * point `<main aria-labelledby>` at it.
+ *
+ * No `'use client'`: `useId` resolves on the server, and nothing here is
+ * interactive. Interactive parts arrive through the slots.
+ */
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/components/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,CACR;IACC,8CAA8C;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU,wFAmDtB,CAAC"}

package/dist/components/PageHeader.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+/**
+ * PageHeader — the top of a page: where you are, what it is, and what you can
+ * do to it.
+ *
+ * Promoted from the demo app, where five screens hand-wrote it in three
+ * different shapes (`.demo-page__header`, `.demo-run-header`, and a bare
+ * `<div>`), each with its own gap and its own idea of where the actions
+ * aligned. Every enterprise system ships one — Carbon's PageHeader,
+ * Lightning's page headers — because every page has one.
+ *
+ * NOT A LANDMARK
+ *
+ * It renders a `<div>`, not a `<header>`. A `<header>` that is a child of
+ * `<body>` is the page's banner, and the app shell's Header already is that.
+ * The page's landmark is `<main>`, named by this title: pass `titleId` and
+ * point `<main aria-labelledby>` at it.
+ *
+ * No `'use client'`: `useId` resolves on the server, and nothing here is
+ * interactive. Interactive parts arrive through the slots.
+ */
+export const PageHeader = forwardRef(({ title, titleId, headingLevel = 1, description, breadcrumb, status, actions, className, children, ...rest }, ref) => {
+    const generatedId = useId();
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("div", { ...rest, ref: ref, className: ['ion-page-header', className].filter(Boolean).join(' '), children: [breadcrumb && (_jsx("div", { className: "ion-page-header__breadcrumb", children: breadcrumb })), _jsxs("div", { className: "ion-page-header__main", children: [_jsxs("div", { className: "ion-page-header__heading", children: [_jsxs("div", { className: "ion-page-header__title-row", children: [_jsx(Heading, { id: titleId ?? generatedId, className: "ion-page-header__title", children: title }), status && (_jsx("div", { className: "ion-page-header__status", children: status }))] }), description && (_jsx("p", { className: "ion-page-header__description", children: description }))] }), actions && _jsx("div", { className: "ion-page-header__actions", children: actions })] }), children && _jsx("div", { className: "ion-page-header__below", children: children })] }));
+});
+PageHeader.displayName = 'PageHeader';
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AA2CjD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAE5C,OAAO,CACL,kBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAElE,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,6BAA6B,YAAE,UAAU,GAAO,CAChE,EACD,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,IAAI,WAAW,EAC1B,SAAS,EAAC,wBAAwB,YAEjC,KAAK,GACE,EACT,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,yBAAyB,YAAE,MAAM,GAAO,CACxD,IACG,EACL,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAK,CAC9D,IACG,EACL,OAAO,IAAI,cAAK,SAAS,EAAC,0BAA0B,YAAE,OAAO,GAAO,IACjE,EACL,QAAQ,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,IACjE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/Radio.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type FieldsetOrientation } from './Fieldset.js';
 export type RadioSize = 'sm' | 'md' | 'lg';
 export type RadioIntent = 'brand' | 'neutral' | 'danger';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value'> {
@@ -20,7 +21,17 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    /** The question the options answer. Renders as the `<legend>`. */
     label?: React.ReactNode;
+    /** Help text beneath the options. Replaced by `errorMessage` while invalid. */
+    description?: React.ReactNode;
+    /** Shown in the description's place while `isInvalid` is set. */
+    errorMessage?: React.ReactNode;
+    /** Shows `errorMessage` in the description's place. */
+    isInvalid?: boolean;
+    /** One option must be chosen before the form submits. */
+    isRequired?: boolean;
+    orientation?: FieldsetOrientation;
     size?: RadioSize;
     intent?: RadioIntent;
     /** Whether every radio in the group is disabled. */
@@ -36,6 +47,9 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
  * `role="radiogroup"`. Both are announced correctly, but a fieldset also groups
  * the inputs for form submission and native validation, which the ARIA version
  * does not.
+ *
+ * The fieldset itself is Fieldset's shell, shared with CheckboxGroup, so the
+ * two choice groups take the same label, help, error and orientation props.
  */
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAoBzD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,qFAuEjB,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,CACX;IACC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,6FA4CtB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAsBzD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,qFAiFjB,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,CACX;IACC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iEAAiE;IACjE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,6FAoDtB,CAAC"}

package/dist/components/Radio.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useContext, createContext, useId, } from 'react';
+import { FieldsetShell, useFieldsetHelper, } from './Fieldset.js';
 import { resolveDisabled } from './resolve-disabled.js';
 /**
  * A radio is meaningless alone — it needs siblings sharing a `name` and one
@@ -11,7 +12,7 @@ import { resolveDisabled } from './resolve-disabled.js';
 const RadioGroupContext = createContext(null);
 export const Radio = forwardRef((props, forwardedRef) => {
     const group = useContext(RadioGroupContext);
-    const { value, size = group?.size ?? 'md', intent = group?.intent ?? 'brand', className, children, isDisabled, disabled, name = group?.name, ...rest } = props;
+    const { value, size = group?.size ?? 'md', intent = group?.intent ?? 'brand', className, children, isDisabled, disabled, name = group?.name, 'aria-describedby': describedBy, ...rest } = props;
     const resolvedDisabled = resolveDisabled(isDisabled, disabled) ?? group?.isDisabled;
     const domRef = useRef(null);
     useImperativeHandle(forwardedRef, () => domRef.current);
@@ -40,7 +41,11 @@ export const Radio = forwardRef((props, forwardedRef) => {
         group?.onChange?.(value);
         rest.onChange?.(e);
     };
-    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "radio", name: name, value: value, disabled: resolvedDisabled, className: "ion-radio__input", onChange: handleChange, ...(controlled
+    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "radio", name: name, value: value, disabled: resolvedDisabled, 
+                // Native `required` on a radio already means "one of this name" —
+                // unlike a checkbox, it needs no toggling to say "at least one".
+                required: group?.isRequired || rest.required, "aria-describedby": [describedBy, group?.helperId].filter(Boolean).join(' ') ||
+                    undefined, className: "ion-radio__input", onChange: handleChange, ...(controlled
                     ? { checked: group.value === value }
                     : { defaultChecked: group?.defaultValue === value }) }), _jsx("span", { className: "ion-radio__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-radio__dot" }) }), children && _jsx("span", { className: "ion-radio__label", children: children })] }));
 });
@@ -50,11 +55,15 @@ Radio.displayName = 'Radio';
  * `role="radiogroup"`. Both are announced correctly, but a fieldset also groups
  * the inputs for form submission and native validation, which the ARIA version
  * does not.
+ *
+ * The fieldset itself is Fieldset's shell, shared with CheckboxGroup, so the
+ * two choice groups take the same label, help, error and orientation props.
  */
 export const RadioGroup = forwardRef((props, ref) => {
-    const { name, value, defaultValue, onChange, label, size, intent, isDisabled, disabled, className, children, ...rest } = props;
+    const { name, value, defaultValue, onChange, size, intent, isDisabled, disabled, isRequired, description, errorMessage, className, ...rest } = props;
     const resolvedDisabled = resolveDisabled(isDisabled, disabled);
     const generated = useId();
+    const { helper, helperId } = useFieldsetHelper(description, errorMessage, rest.isInvalid);
     return (_jsx(RadioGroupContext.Provider, { value: {
             name: name ?? generated,
             value,
@@ -63,7 +72,9 @@ export const RadioGroup = forwardRef((props, ref) => {
             size,
             intent,
             isDisabled: resolvedDisabled,
-        }, children: _jsxs("fieldset", { ...rest, ref: ref, disabled: resolvedDisabled, className: ['ion-radio-group', className].filter(Boolean).join(' '), children: [label && _jsx("legend", { className: "ion-radio-group__label", children: label }), children] }) }));
+            isRequired,
+            helperId,
+        }, children: _jsx(FieldsetShell, { ...rest, ref: ref, disabled: resolvedDisabled, isChoiceGroup: true, helper: helper, helperId: helperId, className: ['ion-radio-group', className].filter(Boolean).join(' ') }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 //# sourceMappingURL=Radio.js.map

package/dist/components/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"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"}

package/dist/components/SearchField.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { AriaSearchFieldProps } from 'react-aria';
+export type SearchFieldSize = 'sm' | 'md' | 'lg';
+type SearchFieldDOMProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof AriaSearchFieldProps | 'size' | 'type' | 'disabled' | 'autoCapitalize'>;
+export interface SearchFieldProps extends AriaSearchFieldProps, SearchFieldDOMProps {
+    /** Input's sizes: Small, Medium, Large. */
+    size?: SearchFieldSize;
+    /** Class names for the control box (`.ion-input`). */
+    className?: string;
+    /** Class names for the `.ion-field` wrapper when a label or helper is shown. */
+    wrapperClassName?: string;
+}
+/**
+ * SearchField — a text field for a search query.
+ *
+ * NOT `<Input type="search">`. That gets the right input type and nothing
+ * else. `useSearchField` adds what a search box owes its user:
+ *
+ *   `role="searchbox"`, so a screen reader announces a search field, not a
+ *   text field. Enter calls `onSubmit` with the query. Escape clears it — a
+ *   second Escape then reaches whatever the field sits in, so a search inside
+ *   a dialog clears first and closes second. A clear button appears once there
+ *   is something to clear, named in the user's language by React Aria.
+ *
+ * The clear button is out of the tab order on purpose, as React Aria sets it:
+ * Escape is the keyboard's way to clear, and an extra tab stop in every search
+ * box costs every keyboard user a keystroke. Pressing it puts focus back in the
+ * field.
+ *
+ * The box IS Input's — the component renders `.ion-input` and its size and
+ * state classes, so a search field beside an Input in a toolbar matches it
+ * exactly and cannot drift. Same arrangement as NumberInput.
+ */
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=SearchField.d.ts.map

package/dist/components/SearchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/components/SearchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAmB,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIxE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,gBAAgB,CAC7E,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAAE,mBAAmB;IACjD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AA0CD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,2FAqGvB,CAAC"}