@chromvoid/headless-ui 0.1.0

package/dist/number/index.js

@@ -0,0 +1,252 @@
+import { action, atom } from '@reatom/core';
+import { createSpinbutton } from '../spinbutton/index.js';
+export function createNumber(options = {}) {
+    const idBase = options.idBase ?? 'number';
+    const spinbutton = createSpinbutton({
+        idBase,
+        value: options.value,
+        min: options.min,
+        max: options.max,
+        step: options.step,
+        largeStep: options.largeStep,
+        isDisabled: options.disabled,
+        isReadOnly: options.readonly,
+        ariaLabel: options.ariaLabel,
+        ariaLabelledBy: options.ariaLabelledBy,
+        ariaDescribedBy: options.ariaDescribedBy,
+        formatValueText: options.formatValueText,
+        onValueChange: options.onValueChange,
+    });
+    const focusedAtom = atom(false, `${idBase}.focused`);
+    const clearableAtom = atom(options.clearable ?? false, `${idBase}.clearable`);
+    const stepperAtom = atom(options.stepper ?? false, `${idBase}.stepper`);
+    const draftTextAtom = atom(null, `${idBase}.draftText`);
+    const placeholderAtom = atom(options.placeholder ?? '', `${idBase}.placeholder`);
+    const requiredAtom = atom(options.required ?? false, `${idBase}.required`);
+    const rawDefault = options.defaultValue ?? options.min ?? 0;
+    const defaultValueAtom = atom(rawDefault, `${idBase}.defaultValue`);
+    const filled = () => spinbutton.state.value() !== defaultValueAtom();
+    const showClearButton = () => clearableAtom() && filled() && !spinbutton.state.isDisabled() && !spinbutton.state.isReadOnly();
+    const forceSetValue = (value) => {
+        const wasDisabled = spinbutton.state.isDisabled();
+        const wasReadOnly = spinbutton.state.isReadOnly();
+        if (wasDisabled)
+            spinbutton.actions.setDisabled(false);
+        if (wasReadOnly)
+            spinbutton.actions.setReadOnly(false);
+        spinbutton.actions.setValue(value);
+        if (wasDisabled)
+            spinbutton.actions.setDisabled(true);
+        if (wasReadOnly)
+            spinbutton.actions.setReadOnly(true);
+    };
+    const setValue = action((value) => {
+        forceSetValue(value);
+        draftTextAtom.set(null);
+    }, `${idBase}.setValue`);
+    const increment = action(() => {
+        spinbutton.actions.increment();
+        draftTextAtom.set(null);
+    }, `${idBase}.increment`);
+    const decrement = action(() => {
+        spinbutton.actions.decrement();
+        draftTextAtom.set(null);
+    }, `${idBase}.decrement`);
+    const incrementLarge = action(() => {
+        spinbutton.actions.incrementLarge();
+        draftTextAtom.set(null);
+    }, `${idBase}.incrementLarge`);
+    const decrementLarge = action(() => {
+        spinbutton.actions.decrementLarge();
+        draftTextAtom.set(null);
+    }, `${idBase}.decrementLarge`);
+    const setFirst = action(() => {
+        spinbutton.actions.setFirst();
+        draftTextAtom.set(null);
+    }, `${idBase}.setFirst`);
+    const setLast = action(() => {
+        spinbutton.actions.setLast();
+        draftTextAtom.set(null);
+    }, `${idBase}.setLast`);
+    const setDisabled = action((v) => {
+        spinbutton.actions.setDisabled(v);
+    }, `${idBase}.setDisabled`);
+    const setReadOnly = action((v) => {
+        spinbutton.actions.setReadOnly(v);
+    }, `${idBase}.setReadOnly`);
+    const setRequired = action((v) => {
+        requiredAtom.set(v);
+    }, `${idBase}.setRequired`);
+    const setClearable = action((v) => {
+        clearableAtom.set(v);
+    }, `${idBase}.setClearable`);
+    const setStepper = action((v) => {
+        stepperAtom.set(v);
+    }, `${idBase}.setStepper`);
+    const setPlaceholder = action((v) => {
+        placeholderAtom.set(v);
+    }, `${idBase}.setPlaceholder`);
+    const setDraftText = action((v) => {
+        draftTextAtom.set(v);
+    }, `${idBase}.setDraftText`);
+    const clear = action(() => {
+        if (spinbutton.state.isDisabled() || spinbutton.state.isReadOnly())
+            return;
+        forceSetValue(defaultValueAtom());
+        draftTextAtom.set(null);
+        options.onClear?.();
+    }, `${idBase}.clear`);
+    const commitDraft = action(() => {
+        const draft = draftTextAtom();
+        if (draft === null)
+            return;
+        if (draft.trim() === '') {
+            clear();
+            return;
+        }
+        const parsed = parseFloat(draft);
+        if (Number.isFinite(parsed)) {
+            forceSetValue(parsed);
+        }
+        draftTextAtom.set(null);
+    }, `${idBase}.commitDraft`);
+    const handleInput = action((text) => {
+        if (spinbutton.state.isDisabled() || spinbutton.state.isReadOnly())
+            return;
+        draftTextAtom.set(text);
+    }, `${idBase}.handleInput`);
+    const setFocused = action((v) => {
+        focusedAtom.set(v);
+        if (!v) {
+            commitDraft();
+        }
+    }, `${idBase}.setFocused`);
+    const handleKeyDown = action((event) => {
+        if (event.key === 'Escape') {
+            if (clearableAtom() && filled() && !spinbutton.state.isDisabled() && !spinbutton.state.isReadOnly()) {
+                clear();
+                event.preventDefault?.();
+            }
+            return;
+        }
+        if (event.key === 'Enter') {
+            commitDraft();
+            event.preventDefault?.();
+            return;
+        }
+        spinbutton.actions.handleKeyDown(event);
+        draftTextAtom.set(null);
+    }, `${idBase}.handleKeyDown`);
+    const contracts = {
+        getInputProps() {
+            const value = spinbutton.state.value();
+            const isDisabled = spinbutton.state.isDisabled();
+            const isReadOnly = spinbutton.state.isReadOnly();
+            const isRequired = requiredAtom();
+            const currentPlaceholder = placeholderAtom();
+            const min = spinbutton.state.min();
+            const max = spinbutton.state.max();
+            return {
+                id: `${idBase}-input`,
+                role: 'spinbutton',
+                tabindex: isDisabled ? '-1' : '0',
+                inputmode: 'decimal',
+                'aria-valuenow': String(value),
+                'aria-valuemin': min != null ? String(min) : undefined,
+                'aria-valuemax': max != null ? String(max) : undefined,
+                'aria-valuetext': options.formatValueText?.(value),
+                'aria-disabled': isDisabled ? 'true' : undefined,
+                'aria-readonly': isReadOnly ? 'true' : undefined,
+                'aria-required': isRequired ? 'true' : undefined,
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+                placeholder: currentPlaceholder || undefined,
+                autocomplete: 'off',
+            };
+        },
+        getIncrementButtonProps() {
+            const sbProps = spinbutton.contracts.getIncrementButtonProps();
+            const isHidden = !stepperAtom();
+            return {
+                id: sbProps.id,
+                tabindex: sbProps.tabindex,
+                'aria-label': sbProps['aria-label'],
+                'aria-disabled': sbProps['aria-disabled'],
+                hidden: isHidden ? true : undefined,
+                'aria-hidden': isHidden ? 'true' : undefined,
+                onClick: increment,
+            };
+        },
+        getDecrementButtonProps() {
+            const sbProps = spinbutton.contracts.getDecrementButtonProps();
+            const isHidden = !stepperAtom();
+            return {
+                id: sbProps.id,
+                tabindex: sbProps.tabindex,
+                'aria-label': sbProps['aria-label'],
+                'aria-disabled': sbProps['aria-disabled'],
+                hidden: isHidden ? true : undefined,
+                'aria-hidden': isHidden ? 'true' : undefined,
+                onClick: decrement,
+            };
+        },
+        getClearButtonProps() {
+            const isVisible = showClearButton();
+            return {
+                role: 'button',
+                'aria-label': 'Clear value',
+                tabindex: '-1',
+                hidden: isVisible ? undefined : true,
+                'aria-hidden': isVisible ? undefined : 'true',
+                onClick: clear,
+            };
+        },
+    };
+    const state = {
+        value: spinbutton.state.value,
+        min: spinbutton.state.min,
+        max: spinbutton.state.max,
+        step: spinbutton.state.step,
+        largeStep: spinbutton.state.largeStep,
+        isDisabled: spinbutton.state.isDisabled,
+        isReadOnly: spinbutton.state.isReadOnly,
+        hasMin: () => spinbutton.state.hasMin(),
+        hasMax: () => spinbutton.state.hasMax(),
+        focused: focusedAtom,
+        filled,
+        clearable: clearableAtom,
+        showClearButton,
+        stepper: stepperAtom,
+        draftText: draftTextAtom,
+        placeholder: placeholderAtom,
+        required: requiredAtom,
+        defaultValue: defaultValueAtom,
+    };
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        incrementLarge,
+        decrementLarge,
+        setFirst,
+        setLast,
+        handleKeyDown,
+        setDisabled,
+        setReadOnly,
+        setRequired,
+        setClearable,
+        setStepper,
+        setFocused,
+        setPlaceholder,
+        setDraftText,
+        commitDraft,
+        clear,
+        handleInput,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,70 @@
+import { type Atom, type Computed } from '@reatom/core';
+import { type OverlayDismissIntent, type OverlayOpenSource } from '../interactions/overlay-focus.js';
+export type PopoverOpenSource = OverlayOpenSource;
+export type PopoverDismissIntent = OverlayDismissIntent;
+export interface CreatePopoverOptions {
+    idBase?: string;
+    initialOpen?: boolean;
+    initialTriggerId?: string | null;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    closeOnEscape?: boolean;
+    closeOnOutsidePointer?: boolean;
+    closeOnOutsideFocus?: boolean;
+    useNativePopover?: boolean;
+}
+export interface PopoverState {
+    isOpen: Atom<boolean>;
+    triggerId: Atom<string | null>;
+    openedBy: Atom<PopoverOpenSource | null>;
+    restoreTargetId: Atom<string | null>;
+    lastDismissIntent: Atom<PopoverDismissIntent | null>;
+    isInteractive: Computed<boolean>;
+    useNativePopover: Atom<boolean>;
+}
+export interface PopoverActions {
+    setTriggerId(id: string | null): void;
+    open(source?: PopoverOpenSource): void;
+    close(intent?: PopoverDismissIntent): void;
+    toggle(source?: PopoverOpenSource): void;
+    handleTriggerKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleContentKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleOutsidePointer(): void;
+    handleOutsideFocus(): void;
+    handleNativeToggle(newState: 'open' | 'closed'): void;
+}
+export interface PopoverTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-haspopup': 'dialog';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    popovertarget?: string;
+    popovertargetaction?: 'toggle';
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface PopoverContentProps {
+    id: string;
+    role: 'dialog';
+    tabindex: '-1';
+    hidden?: boolean;
+    popover?: 'manual';
+    'aria-modal': 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+    onPointerDownOutside: () => void;
+    onFocusOutside: () => void;
+}
+export interface PopoverContracts {
+    getTriggerProps(): PopoverTriggerProps;
+    getContentProps(): PopoverContentProps;
+}
+export interface PopoverModel {
+    readonly state: PopoverState;
+    readonly actions: PopoverActions;
+    readonly contracts: PopoverContracts;
+}
+export declare function createPopover(options?: CreatePopoverOptions): PopoverModel;

package/dist/popover/index.js

@@ -0,0 +1,126 @@
+import { action, atom, computed } from '@reatom/core';
+import { createOverlayFocus, } from '../interactions/overlay-focus.js';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createPopover(options = {}) {
+    const idBase = options.idBase ?? 'popover';
+    const overlay = createOverlayFocus({
+        idBase: `${idBase}.overlay`,
+        initialOpen: options.initialOpen,
+        initialTriggerId: options.initialTriggerId ?? `${idBase}-trigger`,
+        trapFocus: false,
+        restoreFocus: true,
+    });
+    const useNativePopoverAtom = atom(options.useNativePopover ?? false, `${idBase}.useNativePopover`);
+    const isInteractiveAtom = computed(() => overlay.state.isOpen(), `${idBase}.isInteractive`);
+    const open = action((source = 'programmatic') => {
+        overlay.actions.open(source, overlay.state.triggerId() ?? `${idBase}-trigger`);
+    }, `${idBase}.open`);
+    const close = action((intent = 'programmatic') => {
+        overlay.actions.close(intent);
+    }, `${idBase}.close`);
+    const toggle = action((source = 'programmatic') => {
+        if (overlay.state.isOpen()) {
+            close();
+            return;
+        }
+        open(source);
+    }, `${idBase}.toggle`);
+    const setTriggerId = action((id) => {
+        overlay.actions.setTrigger(id);
+    }, `${idBase}.setTriggerId`);
+    const handleTriggerKeyDown = action((event) => {
+        if (event.key === 'Enter' || isSpaceKey(event.key) || event.key === 'ArrowDown') {
+            toggle('keyboard');
+        }
+    }, `${idBase}.handleTriggerKeyDown`);
+    const handleContentKeyDown = action((event) => {
+        if (options.closeOnEscape === false)
+            return;
+        overlay.actions.handleKeyDown(event);
+    }, `${idBase}.handleContentKeyDown`);
+    const handleOutsidePointer = action(() => {
+        if (options.closeOnOutsidePointer === false)
+            return;
+        overlay.actions.handleOutsidePointer();
+    }, `${idBase}.handleOutsidePointer`);
+    const handleOutsideFocus = action(() => {
+        if (options.closeOnOutsideFocus === false)
+            return;
+        overlay.actions.handleOutsideFocus();
+    }, `${idBase}.handleOutsideFocus`);
+    const handleNativeToggle = action((newState) => {
+        const isCurrentlyOpen = overlay.state.isOpen();
+        if (newState === 'closed' && isCurrentlyOpen) {
+            close();
+        }
+        else if (newState === 'open' && !isCurrentlyOpen) {
+            open('programmatic');
+        }
+    }, `${idBase}.handleNativeToggle`);
+    const actions = {
+        setTriggerId,
+        open,
+        close,
+        toggle,
+        handleTriggerKeyDown,
+        handleContentKeyDown,
+        handleOutsidePointer,
+        handleOutsideFocus,
+        handleNativeToggle,
+    };
+    const contracts = {
+        getTriggerProps() {
+            const isNative = useNativePopoverAtom();
+            const props = {
+                id: overlay.state.triggerId() ?? `${idBase}-trigger`,
+                role: 'button',
+                tabindex: '0',
+                'aria-haspopup': 'dialog',
+                'aria-expanded': overlay.state.isOpen() ? 'true' : 'false',
+                'aria-controls': `${idBase}-content`,
+                onClick: () => toggle('pointer'),
+                onKeyDown: handleTriggerKeyDown,
+            };
+            if (isNative) {
+                props.popovertarget = `${idBase}-content`;
+                props.popovertargetaction = 'toggle';
+            }
+            return props;
+        },
+        getContentProps() {
+            const isNative = useNativePopoverAtom();
+            const props = {
+                id: `${idBase}-content`,
+                role: 'dialog',
+                tabindex: '-1',
+                'aria-modal': 'false',
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                onKeyDown: handleContentKeyDown,
+                onPointerDownOutside: handleOutsidePointer,
+                onFocusOutside: handleOutsideFocus,
+            };
+            if (isNative) {
+                props.popover = 'manual';
+            }
+            else {
+                props.hidden = !overlay.state.isOpen();
+            }
+            return props;
+        },
+    };
+    const state = {
+        isOpen: overlay.state.isOpen,
+        triggerId: overlay.state.triggerId,
+        openedBy: overlay.state.openedBy,
+        restoreTargetId: overlay.state.restoreTargetId,
+        lastDismissIntent: overlay.state.lastDismissIntent,
+        isInteractive: isInteractiveAtom,
+        useNativePopover: useNativePopoverAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/progress/index.d.ts

@@ -0,0 +1,49 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface CreateProgressOptions {
+    idBase?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    isIndeterminate?: boolean;
+    valueText?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    formatValueText?: (value: number) => string;
+    onValueChange?: (value: number) => void;
+}
+export interface ProgressState {
+    value: Atom<number>;
+    min: Atom<number>;
+    max: Atom<number>;
+    percentage: Computed<number>;
+    isIndeterminate: Atom<boolean>;
+    isComplete: Computed<boolean>;
+}
+export interface ProgressActions {
+    setValue(value: number): void;
+    increment(): void;
+    decrement(): void;
+    setIndeterminate(value: boolean): void;
+}
+export interface ProgressProps {
+    id: string;
+    role: 'progressbar';
+    'aria-valuenow'?: string;
+    'aria-valuemin'?: string;
+    'aria-valuemax'?: string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface ProgressContracts {
+    getProgressProps(): ProgressProps;
+}
+export interface ProgressModel {
+    readonly state: ProgressState;
+    readonly actions: ProgressActions;
+    readonly contracts: ProgressContracts;
+}
+export declare function createProgress(options?: CreateProgressOptions): ProgressModel;

package/dist/progress/index.js

@@ -0,0 +1,79 @@
+import { action, atom, computed } from '@reatom/core';
+import { createValueRange } from '../core/value-range.js';
+export function createProgress(options = {}) {
+    const idBase = options.idBase ?? 'progress';
+    const isIndeterminateAtom = atom(options.isIndeterminate ?? false, `${idBase}.isIndeterminate`);
+    const range = createValueRange({
+        idBase: `${idBase}.range`,
+        min: options.min ?? 0,
+        max: options.max ?? 100,
+        step: options.step,
+        initialValue: options.value,
+    });
+    const commitValue = (update) => {
+        const previous = range.state.value();
+        update();
+        const next = range.state.value();
+        if (previous !== next) {
+            options.onValueChange?.(next);
+        }
+    };
+    const setValue = action((value) => {
+        commitValue(() => {
+            range.actions.setValue(value);
+        });
+    }, `${idBase}.setValue`);
+    const increment = action(() => {
+        commitValue(() => {
+            range.actions.increment();
+        });
+    }, `${idBase}.increment`);
+    const decrement = action(() => {
+        commitValue(() => {
+            range.actions.decrement();
+        });
+    }, `${idBase}.decrement`);
+    const setIndeterminate = action((value) => {
+        isIndeterminateAtom.set(value);
+    }, `${idBase}.setIndeterminate`);
+    const isCompleteAtom = computed(() => !isIndeterminateAtom() && range.state.value() >= range.state.max(), `${idBase}.isComplete`);
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        setIndeterminate,
+    };
+    const contracts = {
+        getProgressProps() {
+            const value = range.state.value();
+            const indeterminate = isIndeterminateAtom();
+            const percentageText = `${Math.round(range.state.percentage())}%`;
+            return {
+                id: `${idBase}-root`,
+                role: 'progressbar',
+                'aria-valuenow': indeterminate ? undefined : String(value),
+                'aria-valuemin': indeterminate ? undefined : String(range.state.min()),
+                'aria-valuemax': indeterminate ? undefined : String(range.state.max()),
+                'aria-valuetext': indeterminate
+                    ? undefined
+                    : (options.valueText ?? options.formatValueText?.(value) ?? percentageText),
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+            };
+        },
+    };
+    const state = {
+        value: range.state.value,
+        min: range.state.min,
+        max: range.state.max,
+        percentage: range.state.percentage,
+        isIndeterminate: isIndeterminateAtom,
+        isComplete: isCompleteAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/radio-group/index.d.ts

@@ -0,0 +1,61 @@
+import { type Atom } from '@reatom/core';
+import { type CompositeNavigationOrientation } from '../interactions/composite-navigation.js';
+export interface RadioGroupItem {
+    id: string;
+    disabled?: boolean;
+    describedBy?: string;
+}
+export interface CreateRadioGroupOptions {
+    items: readonly RadioGroupItem[];
+    idBase?: string;
+    orientation?: CompositeNavigationOrientation;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    initialValue?: string | null;
+    initialActiveId?: string | null;
+}
+export interface RadioGroupState {
+    value: Atom<string | null>;
+    activeId: Atom<string | null>;
+    isDisabled: Atom<boolean>;
+    orientation: CompositeNavigationOrientation;
+}
+export interface RadioGroupActions {
+    setDisabled(value: boolean): void;
+    select(id: string): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+}
+export interface RadioGroupRootProps {
+    role: 'radiogroup';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-disabled'?: 'true';
+    'aria-orientation': CompositeNavigationOrientation;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface RadioProps {
+    id: string;
+    role: 'radio';
+    tabindex: '0' | '-1';
+    'aria-checked': 'true' | 'false';
+    'aria-disabled'?: 'true';
+    'aria-describedby'?: string;
+    'data-active': 'true' | 'false';
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface RadioGroupContracts {
+    getRootProps(): RadioGroupRootProps;
+    getRadioProps(id: string): RadioProps;
+}
+export interface RadioGroupModel {
+    readonly state: RadioGroupState;
+    readonly actions: RadioGroupActions;
+    readonly contracts: RadioGroupContracts;
+}
+export declare function createRadioGroup(options: CreateRadioGroupOptions): RadioGroupModel;