ionbase-ui 0.51.0 → 0.69.0

package/dist/components/Sidebar.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useId, useState } from 'react';
+const Chevron = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m9 6 6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/** Does any SidebarItem below these children carry `isCurrent`? */
+function containsCurrent(children) {
+    return React.Children.toArray(children).some((child) => {
+        if (!React.isValidElement(child))
+            return false;
+        return (child.props.isCurrent === true || containsCurrent(child.props.children));
+    });
+}
+function useDisclosure(controlled, initial, onChange) {
+    const [internal, setInternal] = useState(initial);
+    const isOpen = controlled ?? internal;
+    const toggle = () => {
+        const next = !isOpen;
+        if (controlled === undefined)
+            setInternal(next);
+        onChange?.(next);
+    };
+    return [isOpen, toggle];
+}
+/**
+ * Sidebar — an application's navigation, as a column.
+ *
+ * DISCLOSURE NAVIGATION, NOT `role="tree"`
+ *
+ * A file-tree look invites the tree role, and the tree role is wrong here.
+ * A treeview takes the arrow keys, allows one tab stop for the whole widget,
+ * and does not permit interactive content inside an item — so the `…` and `+`
+ * buttons on a row, which are half the point of a workspace sidebar, could not
+ * exist in it. This is the WAI-ARIA disclosure navigation pattern instead:
+ * nested lists of links, each expandable level behind a real button with
+ * `aria-expanded`, and everything reachable with Tab.
+ *
+ * AN ITEM THAT IS A LINK AND HAS CHILDREN GETS TWO CONTROLS
+ *
+ * A button cannot sit inside a link. So a row that navigates AND expands
+ * renders the link and a separate chevron button beside it; a row with no
+ * `href` is one button that expands. The actions slot is a sibling of both,
+ * never nested inside either.
+ *
+ * THE CURRENT PAGE IS NEVER FOLDED AWAY
+ *
+ * An item whose subtree contains the current page starts open. A sidebar that
+ * loads with the user's location collapsed inside a closed group tells a
+ * sighted user nothing and a screen-reader user less.
+ *
+ * Expansion is per item, controlled or not. Remembering it across visits is the
+ * caller's job — this component cannot know where that state should live.
+ */
+export const Sidebar = forwardRef(({ label, header, footer, children, className, ...rest }, ref) => (_jsxs("nav", { ...rest, ref: ref, "aria-label": label, className: ['ion-sidebar', className || ''].filter(Boolean).join(' '), children: [header && _jsx("div", { className: "ion-sidebar__header", children: header }), _jsx("div", { className: "ion-sidebar__body", children: children }), footer && _jsx("div", { className: "ion-sidebar__footer", children: footer })] })));
+Sidebar.displayName = 'Sidebar';
+export const SidebarSection = forwardRef(({ title, isCollapsible = false, defaultExpanded = true, isExpanded: isExpandedProp, onExpandedChange, actions, children, className, ...rest }, ref) => {
+    const titleId = useId();
+    const listId = useId();
+    const collapsible = isCollapsible && !!title;
+    const [isOpen, toggle] = useDisclosure(collapsible ? isExpandedProp : true, collapsible ? defaultExpanded : true, onExpandedChange);
+    return (_jsxs("div", { ...rest, ref: ref, className: ['ion-sidebar__section', className || '']
+            .filter(Boolean)
+            .join(' '), children: [title && (_jsxs("div", { className: "ion-sidebar__section-header", children: [collapsible ? (_jsxs("button", { type: "button", id: titleId, className: [
+                            'ion-sidebar__section-title',
+                            isOpen ? 'ion-sidebar__section-title--expanded' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), "aria-expanded": isOpen, "aria-controls": listId, onClick: toggle, children: [title, _jsx("span", { className: "ion-sidebar__chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) })] })) : (_jsx("span", { id: titleId, className: "ion-sidebar__section-title", children: title })), actions && (_jsx("span", { className: "ion-sidebar__section-actions", children: actions }))] })), _jsx("ul", { id: listId, className: "ion-sidebar__list", "aria-labelledby": title ? titleId : undefined, hidden: !isOpen, children: children })] }));
+});
+SidebarSection.displayName = 'SidebarSection';
+export const SidebarItem = forwardRef(({ label, icon, href, onPress, isCurrent = false, isDisabled = false, badge, actions, defaultExpanded, isExpanded: isExpandedProp, onExpandedChange, children, className, ...rest }, ref) => {
+    const listId = useId();
+    const hasChildren = React.Children.toArray(children).some((c) => React.isValidElement(c));
+    const [isOpen, toggle] = useDisclosure(isExpandedProp, defaultExpanded ?? containsCurrent(children), onExpandedChange);
+    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "ion-sidebar__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ion-sidebar__label", children: label }), badge !== undefined && badge !== null && (_jsx("span", { className: "ion-sidebar__badge", children: badge }))] }));
+    const chevron = (_jsx("span", { className: [
+            'ion-sidebar__chevron',
+            isOpen ? 'ion-sidebar__chevron--expanded' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-hidden": "true", children: _jsx(Chevron, {}) }));
+    let main;
+    if (href !== undefined && !isDisabled) {
+        main = (_jsx("a", { href: href, className: "ion-sidebar__link", "aria-current": isCurrent ? 'page' : undefined, children: content }));
+    }
+    else if (hasChildren && href === undefined) {
+        // No destination: the whole row is the disclosure.
+        main = (_jsxs("button", { type: "button", className: "ion-sidebar__link", "aria-expanded": isOpen, "aria-controls": listId, disabled: isDisabled, onClick: toggle, children: [content, chevron] }));
+    }
+    else if (onPress && !isDisabled) {
+        main = (_jsx("button", { type: "button", className: "ion-sidebar__link", onClick: onPress, children: content }));
+    }
+    else {
+        main = (_jsx("span", { className: "ion-sidebar__link", "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isDisabled || undefined, children: content }));
+    }
+    return (_jsxs("li", { ...rest, ref: ref, className: ['ion-sidebar__item', className || '']
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("div", { className: [
+                    'ion-sidebar__row',
+                    isCurrent ? 'ion-sidebar__row--current' : '',
+                    isDisabled ? 'ion-sidebar__row--disabled' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: [main, actions && _jsx("span", { className: "ion-sidebar__actions", children: actions }), hasChildren && href !== undefined && (_jsx("button", { type: "button", className: "ion-sidebar__toggle", "aria-label": label, "aria-expanded": isOpen, "aria-controls": listId, disabled: isDisabled, onClick: toggle, children: chevron }))] }), hasChildren && (_jsx("ul", { id: listId, className: "ion-sidebar__list ion-sidebar__list--nested", hidden: !isOpen, children: children }))] }));
+});
+SidebarItem.displayName = 'SidebarItem';
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar.js.map

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

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    variant?: SkeletonVariant;
+    /** Any CSS length. Defaults to filling the width available. */
+    width?: string;
+    /** Any CSS length. `text` derives its height from the line box instead. */
+    height?: string;
+    /** `text` only: how many lines to draw. The last is drawn short. */
+    lines?: number;
+}
+/**
+ * Skeleton — the shape of content that has not arrived.
+ *
+ * IT IS HIDDEN FROM ASSISTIVE TECHNOLOGY, ALWAYS, AND THAT IS THE WHOLE POINT
+ *
+ * A skeleton is a picture of content, and a screen reader cannot use a picture
+ * of content. Announcing it produces a stream of empty boxes between the user
+ * and the thing they asked for. So every skeleton is `aria-hidden`, with no way
+ * to opt out — a prop for that would only ever be used by mistake.
+ *
+ * WHICH MEANS THE CALLER OWES THE ANNOUNCEMENT, AND THIS COMPONENT CANNOT DO IT
+ *
+ * Hiding the placeholder is only half an answer: something still has to tell a
+ * screen-reader user that the region is loading. That belongs on the region
+ * being replaced — `aria-busy="true"` while it loads — because only the caller
+ * knows where that region starts and ends. `Spinner` is the other half when the
+ * wait deserves an announcement of its own.
+ *
+ *   <section aria-busy={isLoading}>
+ *     {isLoading ? <Skeleton lines={3} /> : <Rows data={data} />}
+ *   </section>
+ *
+ * This is the one component in the system whose correct use REQUIRES something
+ * of the caller that the type system cannot check, which is why it is stated
+ * here, in the contract, and in the story.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,sFAiDpB,CAAC"}

package/dist/components/Skeleton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Skeleton — the shape of content that has not arrived.
+ *
+ * IT IS HIDDEN FROM ASSISTIVE TECHNOLOGY, ALWAYS, AND THAT IS THE WHOLE POINT
+ *
+ * A skeleton is a picture of content, and a screen reader cannot use a picture
+ * of content. Announcing it produces a stream of empty boxes between the user
+ * and the thing they asked for. So every skeleton is `aria-hidden`, with no way
+ * to opt out — a prop for that would only ever be used by mistake.
+ *
+ * WHICH MEANS THE CALLER OWES THE ANNOUNCEMENT, AND THIS COMPONENT CANNOT DO IT
+ *
+ * Hiding the placeholder is only half an answer: something still has to tell a
+ * screen-reader user that the region is loading. That belongs on the region
+ * being replaced — `aria-busy="true"` while it loads — because only the caller
+ * knows where that region starts and ends. `Spinner` is the other half when the
+ * wait deserves an announcement of its own.
+ *
+ *   <section aria-busy={isLoading}>
+ *     {isLoading ? <Skeleton lines={3} /> : <Rows data={data} />}
+ *   </section>
+ *
+ * This is the one component in the system whose correct use REQUIRES something
+ * of the caller that the type system cannot check, which is why it is stated
+ * here, in the contract, and in the story.
+ */
+export const Skeleton = forwardRef(({ variant = 'text', width, height, lines = 1, className, ...rest }, ref) => {
+    const classNames = [
+        'ion-skeleton',
+        `ion-skeleton--${variant}`,
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Lengths travel as custom properties rather than inline width/height, so a
+    // caller never writes a raw value into a style attribute the lint rules
+    // read. See ProgressBar for the same trade.
+    const style = {
+        ...(width ? { '--ion-skeleton-width': width } : {}),
+        ...(height ? { '--ion-skeleton-height': height } : {}),
+    };
+    if (variant === 'text' && lines > 1) {
+        return (_jsx("div", { ...rest, ref: ref, "aria-hidden": "true", className: "ion-skeleton-group", style: style, children: Array.from({ length: lines }, (_, i) => (_jsx("div", { className: `${classNames}${i === lines - 1 ? ' ion-skeleton--last' : ''}` }, i))) }));
+    }
+    return (_jsx("div", { ...rest, ref: ref, "aria-hidden": "true", className: classNames, style: style }));
+});
+Skeleton.displayName = 'Skeleton';
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiB1C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,iBAAiB,OAAO,EAAE;QAC1B,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,4EAA4E;IAC5E,wEAAwE;IACxE,4CAA4C;IAC5C,MAAM,KAAK,GAAG;QACZ,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,sBAAsB,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAChC,CAAC;IAEzB,IAAI,OAAO,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,iBACI,MAAM,EAClB,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,KAAK,YAEX,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,cAEE,SAAS,EAAE,GAAG,UAAU,GACtB,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5C,EAAE,IAHG,CAAC,CAIN,CACH,CAAC,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,iBACI,MAAM,EAClB,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Matches the icon size ramp: sm, md, lg. */
+    size?: SpinnerSize;
+    /** What is loading. Announced politely; visible only with `isLabelVisible`. */
+    label?: string;
+    /** Render the label as text beside the ring as well as announcing it. */
+    isLabelVisible?: boolean;
+    /**
+     * The spinner conveys nothing on its own — something else already says the
+     * region is busy. Renders inert: no role, no live region, hidden from AT.
+     */
+    isDecorative?: boolean;
+}
+/**
+ * Spinner — an indeterminate wait, announced once.
+ *
+ * WHY THIS IS NOT A DIV WITH A CSS ANIMATION
+ *
+ * The obvious implementation is inaccessible in a specific and common way: a
+ * spinning graphic with no text is silence to a screen reader, so the user is
+ * told nothing happened. Generated code in this repo's own eval corpus reached
+ * for a bare `role="status"` in 48 files, which is the right instinct and only
+ * half the job — the role creates a live region, but an empty one announces
+ * nothing at all.
+ *
+ * So the default carries a label. It is visually hidden, it lives inside the
+ * live region, and it is what makes "Loading" reach the user who cannot see the
+ * ring.
+ *
+ * `isDecorative` exists because the opposite mistake is just as easy. A spinner
+ * inside a button whose label already changed to "Saving…" would announce
+ * twice, and two live regions racing is worse than one. Decorative renders no
+ * role at all rather than `aria-hidden` on a live region, which browsers treat
+ * inconsistently.
+ *
+ * MOTION
+ *
+ * `prefers-reduced-motion` slows the rotation rather than stopping it. A
+ * stationary spinner is not a calmer spinner — it is a broken one, and it
+ * removes the only signal a sighted user has that the wait is still live.
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EACrC,UAAU,CACX;IACC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,OAAO,sFA0CnB,CAAC"}

package/dist/components/Spinner.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Spinner — an indeterminate wait, announced once.
+ *
+ * WHY THIS IS NOT A DIV WITH A CSS ANIMATION
+ *
+ * The obvious implementation is inaccessible in a specific and common way: a
+ * spinning graphic with no text is silence to a screen reader, so the user is
+ * told nothing happened. Generated code in this repo's own eval corpus reached
+ * for a bare `role="status"` in 48 files, which is the right instinct and only
+ * half the job — the role creates a live region, but an empty one announces
+ * nothing at all.
+ *
+ * So the default carries a label. It is visually hidden, it lives inside the
+ * live region, and it is what makes "Loading" reach the user who cannot see the
+ * ring.
+ *
+ * `isDecorative` exists because the opposite mistake is just as easy. A spinner
+ * inside a button whose label already changed to "Saving…" would announce
+ * twice, and two live regions racing is worse than one. Decorative renders no
+ * role at all rather than `aria-hidden` on a live region, which browsers treat
+ * inconsistently.
+ *
+ * MOTION
+ *
+ * `prefers-reduced-motion` slows the rotation rather than stopping it. A
+ * stationary spinner is not a calmer spinner — it is a broken one, and it
+ * removes the only signal a sighted user has that the wait is still live.
+ */
+export const Spinner = forwardRef(({ size = 'md', label = 'Loading', isLabelVisible = false, isDecorative = false, className, ...rest }, ref) => {
+    const classNames = [
+        'ion-spinner',
+        size !== 'md' ? `ion-spinner--${size}` : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("span", { ...rest, ref: ref, className: classNames, ...(isDecorative
+            ? { 'aria-hidden': true }
+            : { role: 'status', 'aria-live': 'polite' }), children: [_jsx("span", { className: "ion-spinner__ring", "aria-hidden": "true" }), !isDecorative && (_jsx("span", { className: isLabelVisible ? 'ion-spinner__label' : 'ion-visually-hidden', children: label }))] }));
+});
+Spinner.displayName = 'Spinner';
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAqB1C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,CACE,EACE,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,cAAc,GAAG,KAAK,EACtB,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG;QACjB,aAAa;QACb,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,mBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,KACjB,CAAC,YAAY;YACf,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE;YACzB,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,aAE9C,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,GAAG,EACxD,CAAC,YAAY,IAAI,CAChB,eACE,SAAS,EACP,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,YAG9D,KAAK,GACD,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/Stepper.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperStepStatus = 'incomplete' | 'complete' | 'error';
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * Names the list. Defaults to "Progress"; give it the task's name when a page
+     * carries more than one — "Checkout progress".
+     */
+    label?: string;
+    /**
+     * `horizontal` for a page-width header above the form, `vertical` for a side
+     * rail. Below 40rem a horizontal stepper hides every label but the current
+     * one, so it does not need a second variant for mobile.
+     */
+    orientation?: StepperOrientation;
+    /** `StepperStep` elements, first step first. */
+    children?: React.ReactNode;
+}
+export interface StepperStepProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    /** The step's name, in the user's language. */
+    children?: React.ReactNode;
+    /** A short second line — what the step asks for, or a summary of the answer. */
+    description?: React.ReactNode;
+    /**
+     * Whether the step's answers have been accepted. Orthogonal to `isCurrent`:
+     * a user who goes Back to step 1 is on a step that is both current and
+     * complete.
+     */
+    status?: StepperStepStatus;
+    /** The step the user is on. Marked `aria-current="step"`. */
+    isCurrent?: boolean;
+    /**
+     * Makes a visited step a link back to it. Ignored on the current step and on
+     * `incomplete` steps — see the component's comment for why.
+     */
+    href?: string;
+    /** As `href`, for a wizard that changes step without a route. */
+    onPress?: () => void;
+}
+/**
+ * Stepper — where the user is in a task that has an order.
+ *
+ * WHY NOT TABS
+ *
+ * The `tablist` role announces peers that can be visited in any order, which is
+ * the opposite of a wizard. This is an ordered list: the steps are a sequence,
+ * and `ol` says so. Nothing here is a tab, and arrow keys do nothing.
+ *
+ * POSITION AND STATUS ARE TEXT, NOT ONLY DRAWING
+ *
+ * Every step renders "Step 2 of 5" and its status as visually hidden text. The
+ * number in the circle is for the eye; a screen reader cannot be relied on to
+ * announce list position, and a coloured ring carries nothing in forced-colours
+ * mode. The complete and error glyphs also differ in SHAPE — a check and an
+ * exclamation — so the states survive greyscale, which WCAG 1.4.1 requires.
+ *
+ * ONLY VISITED STEPS ARE LINKS
+ *
+ * `href` / `onPress` are honoured on `complete` and `error` steps that are not
+ * current. An `incomplete` step renders as text even when given one, because
+ * jumping forward past unanswered steps is exactly what a wizard exists to
+ * prevent — and a link that is there but should not be followed is worse than
+ * no link. The current step is text for the same reason Breadcrumb's is: a link
+ * to where you already are is a dead control.
+ *
+ * IT DOES NOT ANNOUNCE STEP CHANGES
+ *
+ * The Wizard pattern moves focus to the new step's heading, which announces it.
+ * A live region here as well would say the same thing twice, on every step.
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+export declare const StepperStep: React.ForwardRefExoticComponent<StepperStepProps & React.RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AASpE,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EACrC,SAAS,CACV;IACC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gFAAgF;IAChF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,OAAO,uFA0CnB,CAAC;AAIF,eAAO,MAAM,WAAW,wFAoFvB,CAAC"}

package/dist/components/Stepper.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, forwardRef, useContext } from 'react';
+const StepContext = createContext(null);
+const STATUS_TEXT = {
+    incomplete: 'Not started',
+    complete: 'Completed',
+    error: 'Has errors',
+};
+const Check = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 12.5 4 4 8-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const Exclamation = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M12 6.5v7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17.5", r: "1.5", fill: "currentColor" })] }));
+/**
+ * Stepper — where the user is in a task that has an order.
+ *
+ * WHY NOT TABS
+ *
+ * The `tablist` role announces peers that can be visited in any order, which is
+ * the opposite of a wizard. This is an ordered list: the steps are a sequence,
+ * and `ol` says so. Nothing here is a tab, and arrow keys do nothing.
+ *
+ * POSITION AND STATUS ARE TEXT, NOT ONLY DRAWING
+ *
+ * Every step renders "Step 2 of 5" and its status as visually hidden text. The
+ * number in the circle is for the eye; a screen reader cannot be relied on to
+ * announce list position, and a coloured ring carries nothing in forced-colours
+ * mode. The complete and error glyphs also differ in SHAPE — a check and an
+ * exclamation — so the states survive greyscale, which WCAG 1.4.1 requires.
+ *
+ * ONLY VISITED STEPS ARE LINKS
+ *
+ * `href` / `onPress` are honoured on `complete` and `error` steps that are not
+ * current. An `incomplete` step renders as text even when given one, because
+ * jumping forward past unanswered steps is exactly what a wizard exists to
+ * prevent — and a link that is there but should not be followed is worse than
+ * no link. The current step is text for the same reason Breadcrumb's is: a link
+ * to where you already are is a dead control.
+ *
+ * IT DOES NOT ANNOUNCE STEP CHANGES
+ *
+ * The Wizard pattern moves focus to the new step's heading, which announces it.
+ * A live region here as well would say the same thing twice, on every step.
+ */
+export const Stepper = forwardRef(({ label = 'Progress', orientation = 'horizontal', children, className, ...rest }, ref) => {
+    /*
+     * Position comes from the children rather than from props on each step.
+     * Asking the caller to pass `index` and `total` five times is five chances
+     * for "Step 3 of 4" to appear twice.
+     */
+    const steps = React.Children.toArray(children).filter(React.isValidElement);
+    return (_jsx("ol", { ...rest, ref: ref, "aria-label": label, "data-orientation": orientation, className: [
+            'ion-stepper',
+            `ion-stepper--${orientation}`,
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: steps.map((step, index) => (_jsx(StepContext.Provider, { value: { index, total: steps.length }, children: step }, step.key ?? index))) }));
+});
+Stepper.displayName = 'Stepper';
+export const StepperStep = forwardRef(({ children, description, status = 'incomplete', isCurrent = false, href, onPress, className, ...rest }, ref) => {
+    const position = useContext(StepContext);
+    if (!position) {
+        throw new Error('StepperStep must be rendered inside a Stepper');
+    }
+    const number = position.index + 1;
+    const isInteractive = !isCurrent && status !== 'incomplete' && (!!href || !!onPress);
+    const statusText = isCurrent
+        ? status === 'error'
+            ? 'Current step, has errors'
+            : 'Current step'
+        : STATUS_TEXT[status];
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ion-stepper__indicator", "aria-hidden": "true", children: status === 'complete' ? (_jsx(Check, {})) : status === 'error' ? (_jsx(Exclamation, {})) : (number) }), _jsxs("span", { className: "ion-stepper__text", children: [_jsx("span", { className: "ion-visually-hidden", children: `Step ${number} of ${position.total}: ` }), _jsx("span", { className: "ion-stepper__label", children: children }), description && (_jsx("span", { className: "ion-stepper__description", children: description })), _jsx("span", { className: "ion-visually-hidden", children: `, ${statusText}` })] })] }));
+    return (_jsx("li", { ...rest, ref: ref, "aria-current": isCurrent ? 'step' : undefined, className: [
+            'ion-stepper__step',
+            status !== 'incomplete' ? `ion-stepper__step--${status}` : '',
+            isCurrent ? 'ion-stepper__step--current' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: isInteractive && href ? (_jsx("a", { href: href, className: "ion-stepper__trigger", children: content })) : isInteractive ? (_jsx("button", { type: "button", className: "ion-stepper__trigger", onClick: onPress, children: content })) : (_jsx("span", { className: "ion-stepper__trigger", children: content })) }));
+});
+StepperStep.displayName = 'StepperStep';
+//# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUrE,MAAM,WAAW,GAAG,aAAa,CAAsB,IAAI,CAAC,CAAC;AA2C7D,MAAM,WAAW,GAAsC;IACrD,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,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,iBAAiB,EACnB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,eAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,aACvE,eACE,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,EACF,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,GAAG,IACpD,CACP,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,CACE,EACE,KAAK,GAAG,UAAU,EAClB,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF;;;;OAIG;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5E,OAAO,CACL,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,gBACI,KAAK,sBACC,WAAW,EAC7B,SAAS,EAAE;YACT,aAAa;YACb,gBAAgB,WAAW,EAAE;YAC7B,SAAS,IAAI,EAAE;SAChB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,YAEX,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,WAAW,CAAC,QAAQ,IAEnB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,YAEpC,IAAI,IAHA,IAAI,CAAC,GAAG,IAAI,KAAK,CAID,CACxB,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,QAAQ,EACR,WAAW,EACX,MAAM,GAAG,YAAY,EACrB,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACnE,CAAC;IACD,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GACjB,CAAC,SAAS,IAAI,MAAM,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAEjE,MAAM,UAAU,GAAG,SAAS;QAC1B,CAAC,CAAC,MAAM,KAAK,OAAO;YAClB,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,cAAc;QAClB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAExB,MAAM,OAAO,GAAG,CACd,8BACE,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,YACxD,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CACvB,KAAC,KAAK,KAAG,CACV,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,WAAW,KAAG,CAChB,CAAC,CAAC,CAAC,CACF,MAAM,CACP,GACI,EACP,gBAAM,SAAS,EAAC,mBAAmB,aACjC,eAAM,SAAS,EAAC,qBAAqB,YAClC,QAAQ,MAAM,OAAO,QAAQ,CAAC,KAAK,IAAI,GACnC,EACP,eAAM,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAQ,EACrD,WAAW,IAAI,CACd,eAAM,SAAS,EAAC,0BAA0B,YAAE,WAAW,GAAQ,CAChE,EACD,eAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,UAAU,EAAE,GAAQ,IAC3D,IACN,CACJ,CAAC;IAEF,OAAO,CACL,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,kBACM,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE;YACT,mBAAmB;YACnB,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,sBAAsB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;YAC7D,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;YAC7C,SAAS,IAAI,EAAE;SAChB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,YAEX,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CACvB,YAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,YAC5C,OAAO,GACN,CACL,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAClB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,OAAO,YAEf,OAAO,GACD,CACV,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,CACxD,GACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/components/Toggle.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { type SelectionProps } from './resolve-selection.js';
 export type ToggleSize = 'sm' | 'md' | 'lg';
 export type ToggleIntent = 'brand' | 'neutral' | 'danger';
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, SelectionProps {
     /** Matches the Figma `Size` variant: Small, Medium, Large. */
     size?: ToggleSize;
     /** Matches the Figma `Color` variant: Brand, Neutral, Danger. */

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,CAChB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,sFA4ClB,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE/E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,WACf,SACE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,EAClE,cAAc;IAChB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,sFAwDlB,CAAC"}

package/dist/components/Toggle.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { resolveDisabled } from './resolve-disabled.js';
+import { resolveSelection } from './resolve-selection.js';
 /**
  * Toggle is a checkbox with `role="switch"`.
  *
@@ -16,8 +17,9 @@ import { resolveDisabled } from './resolve-disabled.js';
  * ramps.
  */
 export const Toggle = forwardRef((props, forwardedRef) => {
-    const { size = 'md', intent = 'brand', className, children, isDisabled, disabled, ...rest } = props;
+    const { size = 'md', intent = 'brand', className, children, isDisabled, disabled, isSelected, checked, onChange, onSelectionChange, ...rest } = props;
     const resolvedDisabled = resolveDisabled(isDisabled, disabled);
+    const selection = resolveSelection(isSelected, checked, onChange, onSelectionChange);
     const domRef = useRef(null);
     useImperativeHandle(forwardedRef, () => domRef.current);
     const classNames = [
@@ -29,7 +31,7 @@ export const Toggle = forwardRef((props, forwardedRef) => {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", role: "switch", disabled: resolvedDisabled, className: "ion-toggle__input" }), _jsx("span", { className: "ion-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "ion-toggle__thumb" }) }), children && _jsx("span", { className: "ion-toggle__label", children: children })] }));
+    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", checked: selection.checked, onChange: selection.onChange, role: "switch", disabled: resolvedDisabled, className: "ion-toggle__input" }), _jsx("span", { className: "ion-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "ion-toggle__thumb" }) }), children && _jsx("span", { className: "ion-toggle__label", children: children })] }));
 });
 Toggle.displayName = 'Toggle';
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAsBxD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACjD,gBAAgB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QAC9C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,mBAAmB,GAC7B,EACF,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACpD,eAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,IAC5D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAuB,MAAM,wBAAwB,CAAC;AAsB/E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,gBAAgB,CAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,iBAAiB,CAClB,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACjD,gBAAgB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QAC9C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,mBAAmB,GAC7B,EACF,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACpD,eAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,IAC5D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/ToolCall.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { AgentActivityStatus } from './agent-status.js';
+export interface ToolCallProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * What the call did, in the user's language — "Searched the invoice archive".
+     * Required: the tool's function name is not a description of the work.
+     */
+    title: string;
+    /** The tool's technical name, shown in monospace beside the title. */
+    name?: string;
+    /** The same vocabulary as AgentActivityStep, so the two never disagree. */
+    status?: AgentActivityStatus;
+    /**
+     * What the agent passed in. Objects and arrays render as formatted JSON,
+     * strings as they are. Redact secrets before passing it — this renders
+     * exactly what it is given.
+     */
+    input?: unknown;
+    /** What came back. Rendered as `input` is. */
+    output?: unknown;
+    /**
+     * Why a `failed` call failed. Shown under the header whether or not the
+     * details are expanded — a failure that takes a click to read is not read.
+     */
+    errorMessage?: React.ReactNode;
+    /** How long the call took, in milliseconds. */
+    durationMs?: number;
+    /** Uncontrolled: whether the details start open. */
+    defaultExpanded?: boolean;
+    /** Controlled: whether the details are open. Pass `onExpandedChange` with it. */
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+}
+/**
+ * ToolCall — the evidence behind one step of an agent run.
+ *
+ * AgentActivityStep says what the agent did in the user's language. ToolCall
+ * is where the person checking that account goes next: which tool, with what
+ * arguments, and what came back. The title is still plain language and still
+ * required, so the technical detail supplements the account rather than
+ * replacing it.
+ *
+ * COLLAPSED BY DEFAULT, EXCEPT THE FAILURE
+ *
+ * A run makes dozens of calls, and a thread of expanded JSON is unreadable.
+ * But `errorMessage` renders outside the disclosure: evidence that takes a
+ * click to reach is evidence nobody reads, and a failure is the one thing in
+ * the call a reader must not miss.
+ *
+ * THE DETAILS ARE UNMOUNTED WHEN CLOSED — unlike Accordion, deliberately.
+ * Accordion keeps collapsed panels for the form state inside them; a tool call
+ * holds no user state, and its payloads can be megabytes of JSON multiplied by
+ * every call in the thread.
+ *
+ * A CALL WITH NOTHING TO SHOW IS NOT A BUTTON. With no input and no output the
+ * header renders as text: a disclosure that discloses nothing announces as
+ * expandable and does nothing.
+ *
+ * THE PAYLOADS ARE FOCUSABLE. Each is a scroll container capped in height, and
+ * a scroll container a keyboard user cannot focus is one they cannot scroll.
+ *
+ * It does not announce status changes. AgentActivity owns the run's live
+ * region; a second one here would talk over it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ToolCall.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../../src/components/ToolCall.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,CACR;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,QAAQ,sFAwHpB,CAAC"}