ionbase-ui 0.59.0 → 0.69.0

package/dist/components/NumberInput.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useButton, useFocusRing, useHover, useLocale, useNumberField, } from 'react-aria';
+import { useNumberFieldState } from 'react-stately';
+import { ARIA_TEXT_FIELD_NON_DOM_PROPS, omitProps } from './dom-props.js';
+/* Props this component or the number-field hook consume, on top of a text field's. */
+const NUMBER_FIELD_NON_DOM_PROPS = [
+    ...ARIA_TEXT_FIELD_NON_DOM_PROPS,
+    'minValue',
+    'maxValue',
+    'step',
+    'formatOptions',
+    'commitBehavior',
+    'isWheelDisabled',
+    'incrementAriaLabel',
+    'decrementAriaLabel',
+];
+const Minus = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+const Plus = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12 6v12M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function StepButton({ children, ...props }) {
+    const ref = useRef(null);
+    const { buttonProps } = useButton(props, ref);
+    return (_jsx("button", { ...buttonProps, ref: ref, className: "ion-number-input__step", children: children }));
+}
+const toHook = (v) => (v === null ? NaN : v);
+/**
+ * NumberInput — a quantity, with formatting, bounds and steps.
+ *
+ * NOT `<input type="number">`, and the list of reasons is the component:
+ *
+ *   It scrolls. A focused `type="number"` changes value under the mouse wheel,
+ *   so a user scrolling the page past a price field edits the price. The wheel
+ *   is OFF here by default (`isWheelDisabled`), and a caller has to ask for it.
+ *
+ *   It cannot format. "1,234.50", "€12", "15%" are text to the browser's number
+ *   input, which rejects them. `formatOptions` takes `Intl.NumberFormatOptions`,
+ *   so currency, percent and units display and parse in the user's locale —
+ *   including "1.234,50" for a German user.
+ *
+ *   It is not a number to the browser's validation either. `type="text"` with
+ *   the right `inputMode` gets the numeric keyboard on a phone without
+ *   Firefox letting letters in and Chrome silently reporting an empty value.
+ *
+ * EMPTY IS `null`, NOT `NaN`. React Aria reports an empty field as `NaN`, and
+ * `NaN === NaN` is false — so every "is it empty" check a caller writes is
+ * wrong. This converts at the boundary, both ways.
+ *
+ * − AND + SIT SIDE BY SIDE, NOT STACKED. Stacked chevrons split the field's
+ * height in two, which puts a Small field's targets at 16px — under the 24px
+ * WCAG 2.5.8 asks. Side by side, every size clears it. They are out of the tab
+ * order, as React Aria sets them: the arrow keys do the same job from the field,
+ * and two extra tab stops per number on a form is a tax on every keyboard user.
+ *
+ * The box is Input's, class for class, so every state — hover, focus, invalid,
+ * read-only, disabled — is Input's and cannot drift from it.
+ */
+export const NumberInput = forwardRef((props, forwardedRef) => {
+    const { size = 'md', showStepper = true, isWheelDisabled = true, value, defaultValue, onChange, label, description, errorMessage, isDisabled, isReadOnly, className, wrapperClassName, ...rest } = props;
+    const { locale } = useLocale();
+    const hookProps = {
+        ...props,
+        isWheelDisabled,
+        value: value === undefined ? undefined : toHook(value),
+        defaultValue: defaultValue === undefined ? undefined : toHook(defaultValue),
+        onChange: onChange
+            ? (n) => onChange(Number.isNaN(n) ? null : n)
+            : undefined,
+    };
+    const state = useNumberFieldState({ ...hookProps, locale });
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, isInvalid, } = useNumberField(hookProps, state, ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing({ isTextInput: true });
+    const domProps = omitProps(rest, NUMBER_FIELD_NON_DOM_PROPS);
+    const box = (_jsxs("div", { ...mergeProps(groupProps, hoverProps), "data-hovered": isHovered || undefined, "data-focused": isFocusVisible || undefined, "data-invalid": isInvalid || undefined, "data-readonly": isReadOnly || undefined, "data-disabled": isDisabled || undefined, className: [
+            'ion-input',
+            'ion-number-input',
+            size !== 'md' ? `ion-input--${size}` : '',
+            showStepper ? 'ion-number-input--stepper' : '',
+            isInvalid ? 'ion-input--invalid' : '',
+            isReadOnly ? 'ion-input--readonly' : '',
+            isDisabled ? 'ion-input--disabled' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx("input", { ...domProps, ...mergeProps(inputProps, focusProps), ref: ref, className: "ion-input__field ion-number-input__field" }), showStepper && (_jsxs("span", { className: "ion-number-input__steps", children: [_jsx(StepButton, { ...decrementButtonProps, children: _jsx(Minus, {}) }), _jsx(StepButton, { ...incrementButtonProps, children: _jsx(Plus, {}) })] }))] }));
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const helperProps = isInvalid && errorMessage ? errorMessageProps : descriptionProps;
+    if (!label && !helper)
+        return box;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
+});
+NumberInput.displayName = 'NumberInput';
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput.js.map

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

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/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"}