ionbase-ui 0.51.0 → 0.69.0

package/dist/components/PromptInput.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+export type PromptInputSubmitKey = 'enter' | 'mod-enter';
+export interface PromptInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'rows' | 'disabled' | 'children'> {
+    /**
+     * The accessible name of the text field. Required, and not a placeholder:
+     * placeholder text disappears the moment the user types, and is not reliably
+     * announced as a name.
+     */
+    label: string;
+    /** Controlled text. Pass `onChange` with it. */
+    value?: string;
+    /** Uncontrolled starting text. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /**
+     * Fires with the text as typed. Uncontrolled, the field clears straight away;
+     * if the returned promise rejects, the text is put back — a prompt lost to a
+     * network error is the one thing a composer must never do.
+     */
+    onSubmit?: (value: string) => void | Promise<unknown>;
+    /**
+     * Which key sends. `enter` sends on Enter with Shift+Enter for a new line —
+     * a chat. `mod-enter` sends on Cmd/Ctrl+Enter and leaves Enter for new lines —
+     * a composer where messages are long and a stray Enter is expensive.
+     */
+    submitKey?: PromptInputSubmitKey;
+    /**
+     * A run is in progress. The send control becomes an `AgentStop` in the same
+     * place, and submitting is refused. The field stays editable, so the user can
+     * draft the next message while the agent works.
+     */
+    isRunning?: boolean;
+    /** Called by the stop control while `isRunning`. */
+    onStop?: () => void;
+    /** Passed to the stop control once the stop has been requested. */
+    isStopping?: boolean;
+    isDisabled?: boolean;
+    /** Rows the field starts at. */
+    minRows?: number;
+    /** Rows the field grows to before it scrolls. */
+    maxRows?: number;
+    /**
+     * Controls at the start of the toolbar — attach, a model picker, a tool
+     * toggle. Icon-only controls here need their own `aria-label`.
+     */
+    actions?: React.ReactNode;
+    /** Rendered above the text — attached files, a quoted message. */
+    attachments?: React.ReactNode;
+    /** Accessible name of the send control. */
+    sendLabel?: string;
+    /** Class names for the outer box. */
+    className?: string;
+}
+/**
+ * PromptInput — where a person writes to an agent.
+ *
+ * WHY IT IS NOT A TEXTAREA AND A BUTTON
+ *
+ * Every composer is assembled that way, and every one re-implements the same
+ * four bugs:
+ *
+ *   Enter during IME composition sends half a word. Japanese, Chinese and
+ *   Korean input confirm a candidate with Enter; a handler that does not check
+ *   `isComposing` sends the message mid-character. That excludes whole
+ *   languages from the product, silently, and nobody on an English keyboard
+ *   ever sees it.
+ *
+ *   The prompt is lost when sending fails. Clearing on submit is right —
+ *   waiting for the server makes the composer feel broken — but clearing and
+ *   never restoring destroys what may have been a long message. Uncontrolled,
+ *   a rejected `onSubmit` promise puts the text back.
+ *
+ *   The stop control lives somewhere else. While a run is going, the send
+ *   button's place is exactly where the user's pointer and attention already
+ *   are, so that is where `AgentStop` goes — the same control, the same
+ *   guarantees, not a second stop button with different ones.
+ *
+ *   The keyboard contract is invisible. "Enter sends, Shift+Enter for a new
+ *   line" is announced through `aria-describedby`, because a screen-reader
+ *   user who presses Enter expecting a newline has just sent a message.
+ *
+ * WHAT IT DOES NOT DO
+ *
+ * It does not upload, pick models or render messages. `attachments` and
+ * `actions` are slots, because what a product attaches and which tools it
+ * offers are the product's decisions.
+ */
+export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=PromptInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../src/components/PromptInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,WAAW,CAAC;AAEzD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAC/C,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,CACb;IACC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,8FAkKvB,CAAC"}

package/dist/components/PromptInput.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { Button } from './Button.js';
+import { AgentStop } from './AgentStop.js';
+const SendGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12 19V5m0 0-6 6m6-6 6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/* useLayoutEffect warns during server rendering; the resize only matters in a browser. */
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/**
+ * PromptInput — where a person writes to an agent.
+ *
+ * WHY IT IS NOT A TEXTAREA AND A BUTTON
+ *
+ * Every composer is assembled that way, and every one re-implements the same
+ * four bugs:
+ *
+ *   Enter during IME composition sends half a word. Japanese, Chinese and
+ *   Korean input confirm a candidate with Enter; a handler that does not check
+ *   `isComposing` sends the message mid-character. That excludes whole
+ *   languages from the product, silently, and nobody on an English keyboard
+ *   ever sees it.
+ *
+ *   The prompt is lost when sending fails. Clearing on submit is right —
+ *   waiting for the server makes the composer feel broken — but clearing and
+ *   never restoring destroys what may have been a long message. Uncontrolled,
+ *   a rejected `onSubmit` promise puts the text back.
+ *
+ *   The stop control lives somewhere else. While a run is going, the send
+ *   button's place is exactly where the user's pointer and attention already
+ *   are, so that is where `AgentStop` goes — the same control, the same
+ *   guarantees, not a second stop button with different ones.
+ *
+ *   The keyboard contract is invisible. "Enter sends, Shift+Enter for a new
+ *   line" is announced through `aria-describedby`, because a screen-reader
+ *   user who presses Enter expecting a newline has just sent a message.
+ *
+ * WHAT IT DOES NOT DO
+ *
+ * It does not upload, pick models or render messages. `attachments` and
+ * `actions` are slots, because what a product attaches and which tools it
+ * offers are the product's decisions.
+ */
+export const PromptInput = forwardRef(({ label, value: valueProp, defaultValue = '', onChange, onSubmit, submitKey = 'enter', isRunning = false, onStop, isStopping = false, isDisabled = false, minRows = 1, maxRows = 8, actions, attachments, sendLabel = 'Send', placeholder, className, onKeyDown, ...rest }, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const [internal, setInternal] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : internal;
+    const setValue = (next) => {
+        if (!isControlled)
+            setInternal(next);
+        onChange?.(next);
+    };
+    const hintId = useId();
+    const canSubmit = !isDisabled && !isRunning && value.trim().length > 0 && !!onSubmit;
+    /*
+     * Grow with the text up to `maxRows`, then scroll. Measured from the
+     * rendered line-height rather than a token, so it stays right inside a
+     * caller's own type scale.
+     */
+    useIsomorphicLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const style = window.getComputedStyle(el);
+        const line = parseFloat(style.lineHeight) || 24;
+        const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+        el.style.height = 'auto';
+        const min = line * minRows + padding;
+        const max = line * maxRows + padding;
+        const next = Math.min(Math.max(el.scrollHeight, min), max);
+        el.style.height = `${next}px`;
+        el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden';
+    }, [value, minRows, maxRows]);
+    const submit = () => {
+        if (!canSubmit || !onSubmit)
+            return;
+        const sent = value;
+        const result = onSubmit(sent);
+        if (isControlled)
+            return;
+        setInternal('');
+        if (result && typeof result.then === 'function') {
+            result.then(undefined, () => {
+                // Put it back only if the user has not started typing something new.
+                setInternal((current) => (current === '' ? sent : current));
+            });
+        }
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== 'Enter')
+            return;
+        // An IME confirming a candidate also presses Enter. 229 covers Safari,
+        // which reports the keydown before setting isComposing.
+        if (event.nativeEvent.isComposing || event.keyCode === 229)
+            return;
+        const wantsSubmit = submitKey === 'enter'
+            ? !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey
+            : event.metaKey || event.ctrlKey;
+        if (!wantsSubmit)
+            return;
+        event.preventDefault();
+        submit();
+    };
+    const hint = submitKey === 'enter'
+        ? 'Press Enter to send, Shift and Enter for a new line.'
+        : 'Press Command or Control and Enter to send.';
+    return (_jsxs("div", { className: [
+            'ion-prompt-input',
+            isDisabled ? 'ion-prompt-input--disabled' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), 
+        /*
+         * The whole box looks like the field, so a click on its padding should
+         * behave like a click on the field. Controls inside keep their own
+         * clicks.
+         */
+        onMouseDown: (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                ref.current?.focus();
+            }
+        }, children: [attachments && (_jsx("div", { className: "ion-prompt-input__attachments", children: attachments })), _jsx("textarea", { ...rest, ref: ref, rows: minRows, value: value, placeholder: placeholder, "aria-label": label, "aria-describedby": [rest['aria-describedby'], hintId].filter(Boolean).join(' ') ||
+                    undefined, disabled: isDisabled, className: "ion-prompt-input__field", onChange: (event) => setValue(event.target.value), onKeyDown: handleKeyDown }), _jsxs("div", { className: "ion-prompt-input__toolbar", children: [_jsx("div", { className: "ion-prompt-input__actions", children: actions }), isRunning && onStop ? (_jsx(AgentStop, { size: "sm", onStop: onStop, isStopping: isStopping, className: "ion-prompt-input__stop" })) : (_jsx(Button, { variant: "primary-brand", size: "sm", "aria-label": sendLabel, startIcon: _jsx(SendGlyph, {}), isDisabled: !canSubmit, onPress: submit, className: "ion-prompt-input__send" }))] }), _jsx("span", { id: hintId, className: "ion-visually-hidden", children: hint })] }));
+});
+PromptInput.displayName = 'PromptInput';
+//# sourceMappingURL=PromptInput.js.map

package/dist/components/PromptInput.js.map

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

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export interface SegmentedControlProps {
+    /**
+     * The accessible name of the group. Required: "List, Board, Calendar" means
+     * nothing until something says they are views.
+     */
+    label: string;
+    /** Show `label` above the control, as a form field does. Hidden by default. */
+    showLabel?: boolean;
+    /** Controlled selected value. Pass `onChange` with it. */
+    value?: string;
+    /**
+     * Uncontrolled starting value. One option should always be selected — a
+     * segmented control with nothing chosen reads as broken, not as "no choice".
+     */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: SegmentedControlSize;
+    /** Stretch to the container, with equal-width segments. */
+    isFullWidth?: boolean;
+    isDisabled?: boolean;
+    /** Submitted with a form under this name. */
+    name?: string;
+    /** `SegmentedControlItem` elements. Two to five of them. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface SegmentedControlItemProps {
+    /** The value this segment selects. */
+    value: string;
+    /** Icon before the label. `aria-hidden` is applied for you. */
+    icon?: React.ReactNode;
+    /**
+     * Required when the segment has no visible text — an icon-only segment is
+     * otherwise announced as an unnamed radio button.
+     */
+    'aria-label'?: string;
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * SegmentedControl — pick one of a few options, and see all of them.
+ *
+ * NOT TABS, ALTHOUGH IT LOOKS LIKE THE PILL TYPE, and the difference is the
+ * contract. Tabs switch between panels: `tablist`, `tab`, `tabpanel`, and each
+ * tab controls a region. This sets a VALUE — a view mode, a time range, a
+ * unit — and controls no panel. It is a `radiogroup`, so it has one tab stop,
+ * arrow keys move and select, and it submits with a form like any radio.
+ *
+ * Built from real radio inputs, visually hidden, not from buttons with
+ * `aria-pressed`. A row of toggle buttons is a tab stop per option and no
+ * mutual exclusion that assistive tech can announce; radios give "2 of 3,
+ * selected" for free.
+ *
+ * The look is Tabs' pill track, token for token, so the two cannot drift
+ * apart visually — which is exactly why the intent file spends its words on
+ * when to use which.
+ */
+export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAU7E,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAItD,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB,8FAoE3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,oGAkD/B,CAAC"}

package/dist/components/SegmentedControl.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useRef } from 'react';
+import { useFocusRing, useRadio, useRadioGroup, VisuallyHidden, } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+const SegmentedContext = createContext(null);
+/**
+ * SegmentedControl — pick one of a few options, and see all of them.
+ *
+ * NOT TABS, ALTHOUGH IT LOOKS LIKE THE PILL TYPE, and the difference is the
+ * contract. Tabs switch between panels: `tablist`, `tab`, `tabpanel`, and each
+ * tab controls a region. This sets a VALUE — a view mode, a time range, a
+ * unit — and controls no panel. It is a `radiogroup`, so it has one tab stop,
+ * arrow keys move and select, and it submits with a form like any radio.
+ *
+ * Built from real radio inputs, visually hidden, not from buttons with
+ * `aria-pressed`. A row of toggle buttons is a tab stop per option and no
+ * mutual exclusion that assistive tech can announce; radios give "2 of 3,
+ * selected" for free.
+ *
+ * The look is Tabs' pill track, token for token, so the two cannot drift
+ * apart visually — which is exactly why the intent file spends its words on
+ * when to use which.
+ */
+export const SegmentedControl = forwardRef((props, ref) => {
+    const { label, showLabel = false, size = 'md', isFullWidth = false, isDisabled = false, children, className, } = props;
+    const state = useRadioGroupState({ ...props, isDisabled });
+    /*
+     * A hidden label is an `aria-label`, not a visually hidden element inside
+     * the group: a label node inside the radiogroup is read again as part of
+     * its content.
+     */
+    const { radioGroupProps, labelProps } = useRadioGroup({
+        ...props,
+        isDisabled,
+        orientation: 'horizontal',
+        label: showLabel ? label : undefined,
+        'aria-label': showLabel ? undefined : label,
+    }, state);
+    const track = (_jsx("div", { ...radioGroupProps, ref: ref, className: [
+            'ion-segmented-control',
+            size !== 'md' ? `ion-segmented-control--${size}` : '',
+            isFullWidth ? 'ion-segmented-control--full-width' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: _jsx(SegmentedContext.Provider, { value: state, children: children }) }));
+    if (!showLabel)
+        return track;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            'ion-segmented-control-field',
+            isFullWidth ? 'ion-segmented-control-field--full-width' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx("span", { ...labelProps, className: "ion-field__label", children: label }), track] }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+export const SegmentedControlItem = forwardRef((props, ref) => {
+    const { value, icon, isDisabled = false, children, className } = props;
+    const state = useContext(SegmentedContext);
+    if (!state) {
+        throw new Error('SegmentedControlItem must be rendered inside a SegmentedControl');
+    }
+    const inputRef = useRef(null);
+    const { inputProps, isSelected, isDisabled: disabled, } = useRadio({ value, isDisabled, children, 'aria-label': props['aria-label'] }, state, inputRef);
+    const { focusProps, isFocusVisible } = useFocusRing();
+    return (_jsxs("label", { ref: ref, className: [
+            'ion-segmented-control__item',
+            isSelected ? 'ion-segmented-control__item--selected' : '',
+            disabled ? 'ion-segmented-control__item--disabled' : '',
+            isFocusVisible ? 'ion-segmented-control__item--focus-visible' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx(VisuallyHidden, { children: _jsx("input", { ...inputProps, ...focusProps, ref: inputRef }) }), icon && (_jsx("span", { className: "ion-segmented-control__icon", "aria-hidden": "true", children: icon })), children && (_jsx("span", { className: "ion-segmented-control__label", children: children }))] }));
+});
+SegmentedControlItem.displayName = 'SegmentedControlItem';
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl.js.map

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

package/dist/components/Select.d.ts

@@ -8,8 +8,15 @@ export interface SelectOption {
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'disabled'> {
     /** Matches the Figma `Size` variant: Small, Medium, Large. */
     size?: SelectSize;
-    /** The options to render. Omit and pass `children` for grouped options. */
-    options?: SelectOption[];
+    /**
+     * The options to render. Omit and pass `children` for grouped options.
+     *
+     * `readonly` because an options list is almost always a module-level constant,
+     * and `as const` on one produces a readonly array that a mutable parameter
+     * rejects. The component only ever maps over it, so demanding a mutable array
+     * bought nothing and cost callers a spread or a cast.
+     */
+    options?: readonly SelectOption[];
     /**
      * Text shown when nothing is selected. Renders as a disabled option so the
      * field can start empty without that being a valid choice.

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,GAAG,UAAU,CACpB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAuBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,uFAiIlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,GAAG,UAAU,CACpB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAuBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,uFAiIlB,CAAC"}

package/dist/components/Select.js.map

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

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,109 @@
+import React from 'react';
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Names the navigation landmark. Required: a page with a sidebar usually has
+     * a second `<nav>` too, and "navigation, navigation" tells nobody which is
+     * which.
+     */
+    label: string;
+    /**
+     * Pinned above the scrolling body — a workspace switcher, a search trigger,
+     * icon buttons. Any component.
+     */
+    header?: React.ReactNode;
+    /**
+     * Pinned below the scrolling body — an Invite button, help, a trial notice.
+     * Any component.
+     */
+    footer?: React.ReactNode;
+    /**
+     * `SidebarSection`s, and anything that sits between them — a `Divider`, a
+     * promotional card. Items themselves always go inside a section.
+     */
+    children?: React.ReactNode;
+}
+export interface SidebarSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The group's name — "Spaces", "Favorites". Omit for the top group. */
+    title?: string;
+    /** Lets the title fold the section away. Needs a `title`. */
+    isCollapsible?: boolean;
+    /** Uncontrolled: whether a collapsible section starts open. */
+    defaultExpanded?: boolean;
+    /** Controlled: whether a collapsible section is open. */
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /**
+     * Controls beside the title — a `+` Button to create a space. Icon-only
+     * buttons need their own `aria-label`.
+     */
+    actions?: React.ReactNode;
+    /** `SidebarItem`s only — the section renders a list. */
+    children?: React.ReactNode;
+}
+export interface SidebarItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    /**
+     * The item's text. A string, because it also names the expand button of an
+     * item that has children.
+     */
+    label: string;
+    /** Leading icon. Decorative — `label` names the item. */
+    icon?: React.ReactNode;
+    /** Where it goes. Omit for an item that only groups its children. */
+    href?: string;
+    /** For an item that acts rather than navigates. Ignored with `href`. */
+    onPress?: () => void;
+    /** The page the user is on. Marked `aria-current="page"`. */
+    isCurrent?: boolean;
+    isDisabled?: boolean;
+    /** Trailing text — a count, a shortcut, a status. */
+    badge?: React.ReactNode;
+    /**
+     * Controls for this row — `…` and `+`. Revealed on hover and whenever focus
+     * is inside the row; always shown on touch screens. Icon-only buttons need
+     * their own `aria-label`.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Uncontrolled: whether the children start open. Defaults to open when the
+     * current page is somewhere inside.
+     */
+    defaultExpanded?: boolean;
+    /** Controlled: whether the children are open. */
+    isExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Nested `SidebarItem`s. Their presence is what makes the item expandable. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+export declare const SidebarSection: React.ForwardRefExoticComponent<SidebarSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,CACR;IACC,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,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;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,kFAanB,CAAC;AAIF,eAAO,MAAM,cAAc,4FA0E1B,CAAC;AAIF,eAAO,MAAM,WAAW,wFAoJvB,CAAC"}