@rookcom/monarch-react 0.2.0 → 0.3.0

package/dist/components/forms/inline-edit-text/inline-edit-text.d.ts

@@ -0,0 +1,63 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface InlineEditTextProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children' | 'onError'> {
+    /** What the text is, for example "Title". The input's accessible name, and part of the view button's. */
+    label: string;
+    /** The saved value (controlled). */
+    value?: string;
+    /** The initial saved value (uncontrolled). */
+    defaultValue?: string;
+    /**
+     * Persists a new value. Return a promise to show the pending state; reject
+     * it (throw) to keep the editor open with the error and the user's draft.
+     * Not called when the value is unchanged.
+     */
+    onSave: (next: string) => void | Promise<void>;
+    /** Called when the user cancels with Escape or the Cancel button. */
+    onCancel?: () => void;
+    /**
+     * Called when `onSave` rejects, with the error and the draft that failed.
+     * Use it for product-specific handling such as an edit conflict (HTTP 409):
+     * keep the editor open and pass your own resolution UI through `error`.
+     */
+    onSaveError?: (error: unknown, draft: string) => void;
+    /** Turns a rejected save into a message. Default: the Error's message, or "Couldn't save. Try again." */
+    getErrorMessage?: (error: unknown) => ReactNode;
+    /** Validates the draft before saving. Return a message to block the save, or nothing to allow it. */
+    validate?: (draft: string) => ReactNode | null | undefined;
+    /** An error supplied by the product (for example a conflict notice), shown while editing. */
+    error?: ReactNode;
+    /** Edit mode (controlled). */
+    editing?: boolean;
+    /** Initial edit mode (uncontrolled). */
+    defaultEditing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    /** Shown in view mode when the value is empty, and as the input placeholder. */
+    placeholder?: string;
+    /** A textarea instead of an input: Enter adds a line, Ctrl/⌘+Enter saves. */
+    multiline?: boolean;
+    /** Rows for `multiline`. Default 3. */
+    rows?: number;
+    maxLength?: number;
+    /** Trim whitespace before comparing and saving. Default true. */
+    trim?: boolean;
+    /** Save when focus leaves the editor. Default true. */
+    saveOnBlur?: boolean;
+    /** Show Save and Cancel buttons under the editor. Default: true for `multiline`. */
+    showActions?: boolean;
+    /** Not editable: the value is shown as plain text. */
+    disabled?: boolean;
+    /** Visually hidden hint read after the view button's name. Default "Edit". */
+    editHint?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+    /** Accessible name of the pending spinner. Default "Saving". */
+    savingLabel?: string;
+}
+/**
+ * Text that turns into an input in place: click it or press Enter to edit,
+ * Enter (or leaving the field) saves, Escape cancels. Saving can be async,
+ * with a pending state, and a failed save keeps the editor open with the
+ * error. The product owns persistence and conflict handling.
+ */
+export declare const InlineEditText: import("react").ForwardRefExoticComponent<InlineEditTextProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=inline-edit-text.d.ts.map

package/dist/components/forms/inline-edit-text/inline-edit-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit-text.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/inline-edit-text/inline-edit-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,cAAc,CAAC,cAAc,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CACrD;IACC,yGAAyG;IACzG,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,yGAAyG;IACzG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,SAAS,CAAC;IAChD,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,6FAA6F;IAC7F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gHA8Q1B,CAAC"}

package/dist/components/forms/inline-edit-text/inline-edit-text.js

@@ -0,0 +1,175 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cx } from '../../../internal/cx.js';
+import { PencilGlyph } from '../../../internal/icons.js';
+import { Button } from '../../actions/button/index.js';
+import { Spinner } from '../../feedback/spinner/index.js';
+// useLayoutEffect warns during server rendering; focus work only runs in the browser.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+function defaultMessage(error) {
+    if (error instanceof Error && error.message)
+        return error.message;
+    return 'Couldn’t save. Try again.';
+}
+/**
+ * Text that turns into an input in place: click it or press Enter to edit,
+ * Enter (or leaving the field) saves, Escape cancels. Saving can be async,
+ * with a pending state, and a failed save keeps the editor open with the
+ * error. The product owns persistence and conflict handling.
+ */
+export const InlineEditText = forwardRef(function InlineEditText({ label, value: valueProp, defaultValue = '', onSave, onCancel, onSaveError, getErrorMessage = defaultMessage, validate, error: externalError, editing: editingProp, defaultEditing = false, onEditingChange, placeholder, multiline = false, rows = 3, maxLength, trim = true, saveOnBlur = true, showActions = multiline, disabled = false, editHint = 'Edit', saveLabel = 'Save', cancelLabel = 'Cancel', savingLabel = 'Saving', className, ...rest }, ref) {
+    const auto = useId();
+    const errorId = `mn-inline-edit-${auto}-error`;
+    const hintId = `mn-inline-edit-${auto}-hint`;
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const value = valueProp ?? innerValue;
+    const [innerEditing, setInnerEditing] = useState(defaultEditing && !disabled);
+    const editing = (editingProp ?? innerEditing) && !disabled;
+    const [draft, setDraft] = useState(value);
+    const [saving, setSaving] = useState(false);
+    const [localError, setLocalError] = useState(null);
+    const viewRef = useRef(null);
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    // Focus returns to the view button after Enter / Escape / the buttons, not
+    // after a blur save (the user has already moved elsewhere).
+    const restoreFocus = useRef(false);
+    const failedDraft = useRef(null);
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const setEditing = useCallback((next) => {
+        if (editingProp === undefined)
+            setInnerEditing(next);
+        onEditingChange?.(next);
+    }, [editingProp, onEditingChange]);
+    // Entering edit mode starts the draft from the saved value and focuses
+    // it; leaving after Enter / Escape / the buttons returns focus to the text.
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const wasEditing = useRef(editing);
+    useIsomorphicLayoutEffect(() => {
+        if (editing && !wasEditing.current) {
+            setDraft(valueRef.current);
+            setLocalError(null);
+            failedDraft.current = null;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+        if (!editing && wasEditing.current && restoreFocus.current) {
+            viewRef.current?.focus();
+        }
+        if (!editing)
+            restoreFocus.current = false;
+        wasEditing.current = editing;
+    }, [editing]);
+    // Mounted already editing (defaultEditing / editing): focus the input once.
+    useEffect(() => {
+        if (wasEditing.current)
+            inputRef.current?.focus();
+    }, []);
+    const exit = (restore) => {
+        restoreFocus.current = restore;
+        setLocalError(null);
+        failedDraft.current = null;
+        setEditing(false);
+    };
+    const commit = async (restore) => {
+        if (saving)
+            return;
+        const next = trim ? draft.trim() : draft;
+        if (next === value) {
+            exit(restore);
+            return;
+        }
+        const invalid = validate?.(next);
+        if (invalid !== null && invalid !== undefined && invalid !== false && invalid !== '') {
+            setLocalError(invalid);
+            failedDraft.current = draft;
+            return;
+        }
+        setSaving(true);
+        setLocalError(null);
+        try {
+            await onSave(next);
+            if (!mounted.current)
+                return;
+            if (valueProp === undefined)
+                setInnerValue(next);
+            setSaving(false);
+            exit(restore);
+        }
+        catch (err) {
+            if (!mounted.current)
+                return;
+            setSaving(false);
+            failedDraft.current = draft;
+            setLocalError(getErrorMessage(err));
+            onSaveError?.(err, next);
+            // Keep the user in the editor with their draft.
+            if (restore)
+                inputRef.current?.focus();
+        }
+    };
+    const cancel = () => {
+        if (saving)
+            return;
+        setDraft(value);
+        exit(true);
+        onCancel?.();
+    };
+    const onKeyDown = (event) => {
+        if (event.nativeEvent.isComposing)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            cancel();
+        }
+        else if (event.key === 'Enter' && (!multiline || event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            void commit(true);
+        }
+    };
+    const onBlur = (event) => {
+        if (!saveOnBlur || saving)
+            return;
+        // Moving to the Save / Cancel buttons is not leaving the editor.
+        if (event.relatedTarget && rootRef.current?.contains(event.relatedTarget))
+            return;
+        // Do not retry a draft that has just failed; the error stays visible.
+        if (failedDraft.current !== null && failedDraft.current === draft)
+            return;
+        void commit(false);
+    };
+    const shownError = localError ?? (editing ? externalError : null);
+    const hasError = shownError !== null && shownError !== undefined && shownError !== false && shownError !== '';
+    const empty = value === '';
+    const setRoot = (el) => {
+        rootRef.current = el;
+        if (typeof ref === 'function')
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    };
+    const shared = {
+        'aria-label': label,
+        'aria-invalid': hasError || undefined,
+        'aria-describedby': hasError ? errorId : undefined,
+        'aria-busy': saving || undefined,
+        readOnly: saving,
+        value: draft,
+        placeholder,
+        maxLength,
+        onKeyDown,
+        onBlur,
+        className: 'mn-inline-edit-text__input',
+    };
+    return (_jsxs("div", { ref: setRoot, ...rest, className: cx('mn-inline-edit-text', className), "data-state": editing ? 'editing' : 'viewing', "data-multiline": multiline || undefined, "data-empty": empty || undefined, "data-saving": saving || undefined, "data-invalid": hasError || undefined, "data-disabled": disabled || undefined, children: [editing ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mn-inline-edit-text__editor", children: [multiline ? (_jsx("textarea", { ref: inputRef, ...shared, rows: rows, onChange: (e) => setDraft(e.target.value) })) : (_jsx("input", { ref: inputRef, ...shared, type: "text", onChange: (e) => setDraft(e.target.value) })), saving && !showActions ? (_jsx(Spinner, { size: "sm", label: savingLabel, className: "mn-inline-edit-text__spinner" })) : null] }), hasError ? (_jsx("p", { id: errorId, role: "alert", className: "mn-inline-edit-text__error", children: shownError })) : null, showActions ? (_jsxs("div", { className: "mn-inline-edit-text__actions", children: [_jsx(Button, { size: "sm", variant: "primary", loading: saving, onMouseDown: (e) => e.preventDefault(), onClick: () => void commit(true), children: saving ? savingLabel : saveLabel }), _jsx(Button, { size: "sm", variant: "ghost", disabled: saving, onMouseDown: (e) => e.preventDefault(), onClick: cancel, children: cancelLabel })] })) : null] })) : disabled ? (_jsx("span", { className: "mn-inline-edit-text__view", children: _jsx("span", { className: "mn-inline-edit-text__value", children: empty ? placeholder : value }) })) : (_jsxs("button", { ref: viewRef, type: "button", className: "mn-inline-edit-text__view", "aria-describedby": hintId, onClick: () => setEditing(true), children: [_jsxs("span", { className: "mn-visually-hidden", children: [label, ": "] }), _jsx("span", { className: "mn-inline-edit-text__value", children: empty ? (placeholder ?? '\u00a0') : value }), _jsx(PencilGlyph, { className: "mn-inline-edit-text__icon" })] })), !editing && !disabled ? (_jsx("span", { id: hintId, className: "mn-visually-hidden", children: editHint })) : null] }));
+});
+//# sourceMappingURL=inline-edit-text.js.map

package/dist/components/forms/inline-edit-text/inline-edit-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit-text.js","sourceRoot":"","sources":["../../../../src/components/forms/inline-edit-text/inline-edit-text.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,eAAe,EACf,MAAM,EACN,QAAQ,GAKT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,sFAAsF;AACtF,MAAM,yBAAyB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;AA4D9F,SAAS,cAAc,CAAC,KAAc;IACpC,IAAI,KAAK,YAAY,KAAK,IAAI,KAAK,CAAC,OAAO;QAAE,OAAO,KAAK,CAAC,OAAO,CAAC;IAClE,OAAO,2BAA2B,CAAC;AACrC,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CACrB,EACE,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,GAAG,EAAE,EACjB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,eAAe,GAAG,cAAc,EAChC,QAAQ,EACR,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,WAAW,EACpB,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,CAAC,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,MAAM,EAClB,WAAW,GAAG,QAAQ,EACtB,WAAW,GAAG,QAAQ,EACtB,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC;IACrB,MAAM,OAAO,GAAG,kBAAkB,IAAI,QAAQ,CAAC;IAC/C,MAAM,MAAM,GAAG,kBAAkB,IAAI,OAAO,CAAC;IAC7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,SAAS,IAAI,UAAU,CAAC;IACtC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9E,MAAM,OAAO,GAAG,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAY,IAAI,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,2EAA2E;IAC3E,4DAA4D;IAC5D,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,WAAW,KAAK,SAAS;YAAE,eAAe,CAAC,IAAI,CAAC,CAAC;QACrD,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,WAAW,EAAE,eAAe,CAAC,CAC/B,CAAC;IAEF,uEAAuE;IACvE,4EAA4E;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACnC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3B,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAC3D,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,OAAO;YAAE,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3C,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,CAAC,OAAgB,EAAE,EAAE;QAChC,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/B,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,KAAK,EAAE,OAAgB,EAAE,EAAE;QACxC,IAAI,MAAM;YAAE,OAAO;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACzC,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,CAAC;YACd,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;YACrF,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC;YACH,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,OAAO;gBAAE,OAAO;YAC7B,IAAI,SAAS,KAAK,SAAS;gBAAE,aAAa,CAAC,IAAI,CAAC,CAAC;YACjD,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,CAAC;QAChB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,OAAO,CAAC,OAAO;gBAAE,OAAO;YAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,aAAa,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;YACpC,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACzB,gDAAgD;YAChD,IAAI,OAAO;gBAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,MAAM;YAAE,OAAO;QACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,IAAI,CAAC,IAAI,CAAC,CAAC;QACX,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAA4D,EAAE,EAAE;QACjF,IAAI,KAAK,CAAC,WAAW,CAAC,WAAW;YAAE,OAAO;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,EAAE,CAAC;QACX,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;YACnF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAyD,EAAE,EAAE;QAC3E,IAAI,CAAC,UAAU,IAAI,MAAM;YAAE,OAAO;QAClC,iEAAiE;QACjE,IAAI,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC;YAAE,OAAO;QAC1F,sEAAsE;QACtE,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,KAAK,KAAK;YAAE,OAAO;QAC1E,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,QAAQ,GACZ,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,KAAK,IAAI,UAAU,KAAK,EAAE,CAAC;IAC/F,MAAM,KAAK,GAAG,KAAK,KAAK,EAAE,CAAC;IAE3B,MAAM,OAAO,GAAG,CAAC,EAAyB,EAAE,EAAE;QAC5C,OAAO,CAAC,OAAO,GAAG,EAAE,CAAC;QACrB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,EAAE,CAAC,CAAC;aAClC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,YAAY,EAAE,KAAK;QACnB,cAAc,EAAE,QAAQ,IAAI,SAAS;QACrC,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAClD,WAAW,EAAE,MAAM,IAAI,SAAS;QAChC,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,KAAK;QACZ,WAAW;QACX,SAAS;QACT,SAAS;QACT,MAAM;QACN,SAAS,EAAE,4BAA4B;KACxC,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,OAAO,KACR,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,gBACnC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,oBAC3B,SAAS,IAAI,SAAS,gBAC1B,KAAK,IAAI,SAAS,iBACjB,MAAM,IAAI,SAAS,kBAClB,QAAQ,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,aAEnC,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,eAAK,SAAS,EAAC,6BAA6B,aACzC,SAAS,CAAC,CAAC,CAAC,CACX,mBACE,GAAG,EAAE,QAAQ,KACT,MAAM,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC,CACH,CAAC,CAAC,CAAC,CACF,gBACE,GAAG,EAAE,QAAQ,KACT,MAAM,EACV,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC,CACH,EACA,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACxB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAC,8BAA8B,GAAG,CACnF,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,YAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,4BAA4B,YAChE,UAAU,GACT,CACL,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,eAAK,SAAS,EAAC,8BAA8B,aAC3C,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,YAE/B,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAC1B,EACT,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACtC,OAAO,EAAE,MAAM,YAEd,WAAW,GACL,IACL,CACP,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,eAAM,SAAS,EAAC,2BAA2B,YACzC,eAAM,SAAS,EAAC,4BAA4B,YAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAQ,GAC5E,CACR,CAAC,CAAC,CAAC,CACF,kBACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2BAA2B,sBACnB,MAAM,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,aAE/B,gBAAM,SAAS,EAAC,oBAAoB,aAAE,KAAK,UAAU,EACrD,eAAM,SAAS,EAAC,4BAA4B,YACzC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GACrC,EACP,KAAC,WAAW,IAAC,SAAS,EAAC,2BAA2B,GAAG,IAC9C,CACV,EACA,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACvB,eAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,oBAAoB,YAC7C,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/components/forms/otp-pin-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './otp-pin-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/otp-pin-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/otp-pin-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/forms/otp-pin-input/index.js

@@ -0,0 +1,2 @@
+export * from './otp-pin-input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/forms/otp-pin-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/otp-pin-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/forms/otp-pin-input/otp-pin-input.d.ts

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes } from 'react';
+export interface OTPPinInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'maxLength' | 'minLength' | 'pattern'> {
+    /** Number of characters. Default 6. */
+    length?: number;
+    /** The code (controlled). */
+    value?: string;
+    /** Initial code when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the cleaned code on every change. */
+    onValueChange?: (value: string) => void;
+    /** Called once each time the code reaches `length` characters (typed, pasted or autofilled). */
+    onComplete?: (value: string) => void;
+    /** `numeric` (default) accepts digits and opens the number keypad; `alphanumeric` accepts A–Z and 0–9, upper-cased. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Show dots instead of the characters, for a PIN typed on a shared screen. */
+    mask?: boolean;
+    /** Draw a gap after every N slots, e.g. 3 for "123 456". Visual only. */
+    groupSize?: number;
+    size?: 'md' | 'lg';
+    /** Marks the code invalid (e.g. after a failed verification). Inside a Field, the Field's `invalid` is used. */
+    invalid?: boolean;
+    /** Class for the outer wrapper (the real input is `.mn-otp-pin-input__input`). */
+    className?: string;
+}
+/**
+ * A one-time code or PIN entry shown as separate boxes. It is one real
+ * `<input>` underneath, so autofill from SMS or email (`autocomplete="one-time-code"`),
+ * paste, the numeric keypad and screen readers all treat it as a single field.
+ * Give it a label with Field or `aria-label`.
+ */
+export declare const OTPPinInput: import("react").ForwardRefExoticComponent<OTPPinInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=otp-pin-input.d.ts.map

package/dist/components/forms/otp-pin-input/otp-pin-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-pin-input.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/otp-pin-input/otp-pin-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,mBAAmB,EAGzB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAChG;IACC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gGAAgG;IAChG,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uHAAuH;IACvH,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAClC,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,gHAAgH;IAChH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,+GA4HtB,CAAC"}

package/dist/components/forms/otp-pin-input/otp-pin-input.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, } from 'react';
+import { cx } from '../../../internal/cx.js';
+import { useFieldControl } from '../form-field/index.js';
+function clean(raw, mode, length) {
+    const kept = mode === 'numeric' ? raw.replace(/\D/g, '') : raw.toUpperCase().replace(/[^A-Z0-9]/g, '');
+    return kept.slice(0, length);
+}
+function caretToEnd(e) {
+    const input = e.currentTarget;
+    const end = input.value.length;
+    if (input.selectionStart !== end || input.selectionEnd !== end)
+        input.setSelectionRange(end, end);
+}
+/**
+ * A one-time code or PIN entry shown as separate boxes. It is one real
+ * `<input>` underneath, so autofill from SMS or email (`autocomplete="one-time-code"`),
+ * paste, the numeric keypad and screen readers all treat it as a single field.
+ * Give it a label with Field or `aria-label`.
+ */
+export const OTPPinInput = forwardRef(function OTPPinInput({ length = 6, value: valueProp, defaultValue = '', onValueChange, onComplete, mode = 'numeric', mask = false, groupSize, size = 'md', invalid, className, onPaste, onFocus, onBlur, onSelect, onClick, ...rest }, ref) {
+    const [internal, setInternal] = useState(() => clean(defaultValue, mode, length));
+    const value = clean(valueProp !== undefined ? valueProp : internal, mode, length);
+    const [focused, setFocused] = useState(false);
+    const setValue = (next) => {
+        if (next === value)
+            return;
+        if (valueProp === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+        if (next.length === length)
+            onComplete?.(next);
+    };
+    const handlePaste = (e) => {
+        onPaste?.(e);
+        if (e.defaultPrevented)
+            return;
+        e.preventDefault();
+        const pasted = clean(e.clipboardData.getData('text'), mode, length);
+        if (!pasted)
+            return;
+        // A full code replaces what is there; a fragment is appended.
+        setValue(pasted.length === length ? pasted : clean(value + pasted, mode, length));
+    };
+    const fieldProps = useFieldControl(rest, { invalid });
+    const active = focused ? Math.min(value.length, length - 1) : -1;
+    const slots = [];
+    for (let i = 0; i < length; i++) {
+        if (groupSize && i > 0 && i % groupSize === 0)
+            slots.push(_jsx("span", { className: "mn-otp-pin-input__separator" }, `sep-${i}`));
+        const char = value[i];
+        slots.push(_jsx("span", { className: "mn-otp-pin-input__slot", "data-filled": char !== undefined || undefined, "data-active": i === active || undefined, children: char === undefined ? (i === active && value.length < length ? (_jsx("span", { className: "mn-otp-pin-input__caret" })) : null) : mask ? (_jsx("span", { className: "mn-otp-pin-input__dot" })) : (char) }, i));
+    }
+    return (_jsxs("div", { className: cx('mn-otp-pin-input', className), style: {
+            '--_n': length,
+            '--_seps': groupSize ? Math.floor((length - 1) / groupSize) : 0,
+        }, "data-size": size, "data-focused": focused || undefined, "data-complete": value.length === length || undefined, "data-invalid": fieldProps['aria-invalid'] ? true : undefined, "data-disabled": fieldProps.disabled || undefined, children: [_jsx("div", { className: "mn-otp-pin-input__slots", "aria-hidden": true, children: slots }), _jsx("input", { ref: ref, autoComplete: "one-time-code", autoCapitalize: mode === 'alphanumeric' ? 'characters' : 'off', autoCorrect: "off", spellCheck: false, ...fieldProps, type: mask ? 'password' : 'text', inputMode: mode === 'numeric' ? 'numeric' : 'text', pattern: mode === 'numeric' ? '[0-9]*' : '[A-Za-z0-9]*', className: "mn-otp-pin-input__input", "data-mask": mask || undefined, value: value, onChange: (e) => setValue(clean(e.target.value, mode, length)), onPaste: handlePaste, onFocus: (e) => {
+                    onFocus?.(e);
+                    setFocused(true);
+                    caretToEnd(e);
+                }, onBlur: (e) => {
+                    onBlur?.(e);
+                    setFocused(false);
+                }, onSelect: (e) => {
+                    onSelect?.(e);
+                    caretToEnd(e);
+                }, onClick: (e) => {
+                    onClick?.(e);
+                    caretToEnd(e);
+                } })] }));
+});
+//# sourceMappingURL=otp-pin-input.js.map

package/dist/components/forms/otp-pin-input/otp-pin-input.js.map

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

package/dist/components/forms/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segmented-control.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/components/forms/segmented-control/index.js

@@ -0,0 +1,2 @@
+export * from './segmented-control.js';
+//# sourceMappingURL=index.js.map

package/dist/components/forms/segmented-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/components/forms/segmented-control/segmented-control.d.ts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export interface SegmentedOption<T extends string = string> {
+    value: T;
+    /** Visible text, and the accessible name. Required even when `hideLabel` is set. */
+    label: string;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** Show only the icon; `label` becomes the accessible name and the tooltip. */
+    hideLabel?: boolean;
+    /** A count after the label ("Open 12"). Included in the accessible name. */
+    count?: number | string;
+    /** Short extra text after the label, for example "Save 20%". */
+    suffix?: ReactNode;
+    disabled?: boolean;
+}
+type ControlledValue<V> = {
+    value: V;
+    defaultValue?: never;
+} | {
+    value?: never;
+    defaultValue?: V;
+} | {
+    value?: undefined;
+    defaultValue?: V;
+};
+interface SharedProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'dir'> {
+    options: readonly SegmentedOption<T>[];
+    size?: SegmentedControlSize;
+    /** Stretch to the container and share the width equally. */
+    block?: boolean;
+    /** Disable every option. */
+    disabled?: boolean;
+    /** Text direction. Left and Right arrows follow it. Default: inherited from the page. */
+    dir?: 'ltr' | 'rtl';
+}
+/** The group must have an accessible name: a visible heading's id, or a label. */
+type AccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: string;
+};
+export type SegmentedControlProps<T extends string = string> = SharedProps<T> & AccessibleName & ControlledValue<T> & {
+    onValueChange?: (value: T) => void;
+    /** Submits the selected value with a form under this name. */
+    name?: string;
+    /** Requires a selection (sets aria-required). */
+    required?: boolean;
+};
+export type ToggleGroupProps<T extends string = string> = SharedProps<T> & AccessibleName & ControlledValue<readonly T[]> & {
+    onValueChange?: (value: T[]) => void;
+};
+export declare const SegmentedControl: <T extends string = string>(props: SegmentedControlProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+export declare const ToggleGroup: <T extends string = string>(props: ToggleGroupProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+export {};
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/forms/segmented-control/segmented-control.d.ts.map

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

package/dist/components/forms/segmented-control/segmented-control.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, } from 'react';
+import { cx } from '../../../internal/cx.js';
+/** The keys that move focus, mapped to a step. `null` = not a navigation key. */
+function stepFor(key, dir) {
+    const forward = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    const back = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    if (key === forward || key === 'ArrowDown')
+        return 1;
+    if (key === back || key === 'ArrowUp')
+        return -1;
+    if (key === 'Home')
+        return 'first';
+    if (key === 'End')
+        return 'last';
+    return null;
+}
+/** Index of the next enabled option, wrapping around; -1 when none is enabled. */
+function nextEnabled(options, from, step, allDisabled) {
+    if (allDisabled)
+        return -1;
+    const n = options.length;
+    if (step === 'first')
+        return options.findIndex((o) => !o.disabled);
+    if (step === 'last') {
+        for (let i = n - 1; i >= 0; i--)
+            if (!options[i]?.disabled)
+                return i;
+        return -1;
+    }
+    for (let k = 1; k <= n; k++) {
+        const i = (((from + step * k) % n) + n) % n;
+        if (!options[i]?.disabled)
+            return i;
+    }
+    return -1;
+}
+function directionOf(el, dir) {
+    if (dir)
+        return dir;
+    return typeof getComputedStyle === 'function' && getComputedStyle(el).direction === 'rtl'
+        ? 'rtl'
+        : 'ltr';
+}
+function focusOption(root, index) {
+    root?.querySelectorAll('[data-index]')[index]?.focus();
+}
+function OptionContent({ option }) {
+    return (_jsxs(_Fragment, { children: [option.icon ? (_jsx("span", { className: "mn-segmented-control__icon", "aria-hidden": true, children: option.icon })) : null, _jsx("span", { className: option.hideLabel ? 'mn-visually-hidden' : 'mn-segmented-control__label', children: option.label }), option.count !== undefined ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "mn-segmented-control__count", children: option.count })] })) : null, option.suffix ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "mn-segmented-control__suffix", children: option.suffix })] })) : null] }));
+}
+function useControllable(value, defaultValue, onChange) {
+    const [inner, setInner] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const current = controlled ? value : inner;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChange?.(next);
+    }, [controlled, onChange]);
+    return [current, set];
+}
+/**
+ * A single choice from 2–5 short options, shown as one connected control:
+ * view switches (list/board), periods (monthly/yearly), filters. It is a
+ * radio group (WAI-ARIA APG): one Tab stop, arrow keys move and select,
+ * Home/End jump. For several independent on/off choices use ToggleGroup;
+ * when each option shows its own panel use Tabs.
+ */
+function SegmentedControlInner({ options, value: valueProp, defaultValue, onValueChange, size = 'md', block = false, disabled = false, dir, name, required, className, ...rest }, ref) {
+    const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+    const selectedIndex = options.findIndex((o) => o.value === value);
+    // The one Tab stop: the selected option, or the first enabled one.
+    const tabStop = selectedIndex >= 0 && !options[selectedIndex]?.disabled
+        ? selectedIndex
+        : nextEnabled(options, 0, 'first', disabled);
+    const handleKeyDown = (event, from) => {
+        const step = stepFor(event.key, directionOf(event.currentTarget, dir));
+        if (step === null)
+            return;
+        const to = nextEnabled(options, from, step, disabled);
+        const option = options[to];
+        if (!option)
+            return;
+        event.preventDefault();
+        focusOption(event.currentTarget.parentElement, to);
+        // Radio pattern: selection follows focus.
+        if (option.value !== value)
+            setValue(option.value);
+    };
+    return (_jsxs("div", { ref: ref, role: "radiogroup", ...rest, dir: dir, "aria-disabled": disabled || undefined, "aria-required": required || undefined, className: cx('mn-segmented-control', className), "data-size": size, "data-block": block || undefined, "data-disabled": disabled || undefined, children: [options.map((option, index) => {
+                const checked = index === selectedIndex;
+                const off = disabled || option.disabled;
+                return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStop ? 0 : -1, disabled: off || undefined, title: option.hideLabel ? option.label : undefined, "data-index": index, "data-state": checked ? 'on' : 'off', "data-icon-only": option.hideLabel || undefined, className: "mn-segmented-control__item", onKeyDown: (event) => handleKeyDown(event, index), onClick: () => {
+                        if (!checked)
+                            setValue(option.value);
+                    }, children: _jsx(OptionContent, { option: option }) }, option.value));
+            }), name !== undefined ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
+}
+export const SegmentedControl = forwardRef(SegmentedControlInner);
+/**
+ * Several independent on/off choices shown as one connected control, for
+ * example a set of filters. Each option is a toggle button (`aria-pressed`)
+ * inside a labelled group. One Tab stop; arrow keys move focus, Space or
+ * Enter toggles.
+ */
+function ToggleGroupInner({ options, value: valueProp, defaultValue, onValueChange, size = 'md', block = false, disabled = false, dir, className, ...rest }, ref) {
+    const [value, setValue] = useControllable(valueProp, defaultValue ?? [], onValueChange);
+    // Roving focus remembers the last focused option, independent of what is pressed.
+    const [active, setActive] = useState(() => Math.max(0, nextEnabled(options, 0, 'first', disabled)));
+    const tabStop = options[active] && !options[active]?.disabled
+        ? active
+        : nextEnabled(options, 0, 'first', disabled);
+    const handleKeyDown = (event, from) => {
+        const step = stepFor(event.key, directionOf(event.currentTarget, dir));
+        if (step === null)
+            return;
+        const to = nextEnabled(options, from, step, disabled);
+        if (to < 0)
+            return;
+        event.preventDefault();
+        setActive(to);
+        focusOption(event.currentTarget.parentElement, to);
+    };
+    return (_jsx("div", { ref: ref, role: "group", ...rest, dir: dir, "aria-disabled": disabled || undefined, className: cx('mn-segmented-control', className), "data-size": size, "data-block": block || undefined, "data-disabled": disabled || undefined, "data-multiple": "", children: options.map((option, index) => {
+            const pressed = value.includes(option.value);
+            const off = disabled || option.disabled;
+            return (_jsx("button", { type: "button", "aria-pressed": pressed, tabIndex: index === tabStop ? 0 : -1, disabled: off || undefined, title: option.hideLabel ? option.label : undefined, "data-index": index, "data-state": pressed ? 'on' : 'off', "data-icon-only": option.hideLabel || undefined, className: "mn-segmented-control__item", onFocus: () => setActive(index), onKeyDown: (event) => handleKeyDown(event, index), onClick: () => {
+                    const next = pressed
+                        ? value.filter((v) => v !== option.value)
+                        : options
+                            .filter((o) => o.value === option.value || value.includes(o.value))
+                            .map((o) => o.value);
+                    setValue(next);
+                }, children: _jsx(OptionContent, { option: option }) }, option.value));
+        }) }));
+}
+export const ToggleGroup = forwardRef(ToggleGroupInner);
+//# sourceMappingURL=segmented-control.js.map