@chromvoid/headless-ui 0.1.0

package/dist/sidebar/index.js

@@ -0,0 +1,186 @@
+import { atom, computed } from '@reatom/core';
+import { createDialog } from '../dialog/index.js';
+export function createSidebar(options = {}) {
+    const id = options.id ?? 'sidebar';
+    const defaultExpanded = options.defaultExpanded ?? true;
+    const closeOnEscape = options.closeOnEscape ?? true;
+    const closeOnOutsidePointer = options.closeOnOutsidePointer ?? true;
+    const ariaLabel = options.ariaLabel ?? 'Sidebar navigation';
+    const onExpandedChange = options.onExpandedChange;
+    const expandedAtom = atom(defaultExpanded, `${id}.expanded`);
+    const mobileAtom = atom(false, `${id}.mobile`);
+    const dialog = createDialog({
+        idBase: `${id}-dialog`,
+        initialOpen: false,
+        isModal: true,
+        closeOnEscape,
+        closeOnOutsidePointer,
+        closeOnOutsideFocus: true,
+        initialFocusId: options.initialFocusId,
+    });
+    dialog.actions.setTriggerId(`${id}-toggle`);
+    const isFocusTrappedAtom = computed(() => mobileAtom() && dialog.state.isOpen(), `${id}.isFocusTrapped`);
+    const shouldLockScrollAtom = computed(() => mobileAtom() && dialog.state.isOpen(), `${id}.shouldLockScroll`);
+    const setExpanded = (value) => {
+        const current = expandedAtom();
+        if (current === value)
+            return;
+        expandedAtom.set(value);
+        onExpandedChange?.(value);
+    };
+    const actions = {
+        toggle() {
+            if (mobileAtom()) {
+                dialog.actions.toggle();
+            }
+            else {
+                setExpanded(!expandedAtom());
+            }
+        },
+        expand() {
+            if (mobileAtom())
+                return;
+            setExpanded(true);
+        },
+        collapse() {
+            if (mobileAtom())
+                return;
+            setExpanded(false);
+        },
+        openOverlay() {
+            if (!mobileAtom())
+                return;
+            if (dialog.state.isOpen())
+                return;
+            dialog.actions.open();
+        },
+        closeOverlay(intent) {
+            if (!mobileAtom())
+                return;
+            if (!dialog.state.isOpen())
+                return;
+            dialog.actions.close(intent);
+        },
+        setMobile(value) {
+            if (mobileAtom() === value)
+                return;
+            mobileAtom.set(value);
+            if (value) {
+                if (dialog.state.isOpen()) {
+                    dialog.actions.close();
+                }
+            }
+            else {
+                if (dialog.state.isOpen()) {
+                    dialog.actions.close();
+                }
+                expandedAtom.set(defaultExpanded);
+            }
+        },
+        handleKeyDown(event) {
+            if (!mobileAtom())
+                return;
+            if (!dialog.state.isOpen())
+                return;
+            dialog.actions.handleKeyDown(event);
+        },
+        handleOutsidePointer() {
+            if (!mobileAtom())
+                return;
+            if (!dialog.state.isOpen())
+                return;
+            dialog.actions.handleOutsidePointer();
+        },
+        handleOutsideFocus() {
+            if (!mobileAtom())
+                return;
+            if (!dialog.state.isOpen())
+                return;
+            dialog.actions.handleOutsideFocus();
+        },
+    };
+    const contracts = {
+        getSidebarProps() {
+            const isMobile = mobileAtom();
+            const isOverlayOpen = dialog.state.isOpen();
+            if (isMobile && isOverlayOpen) {
+                return {
+                    id: `${id}-panel`,
+                    role: 'dialog',
+                    'aria-modal': 'true',
+                    'aria-label': ariaLabel,
+                    'data-collapsed': 'false',
+                    'data-mobile': 'true',
+                    'data-initial-focus': dialog.state.initialFocusTargetId() ?? undefined,
+                    onKeyDown: actions.handleKeyDown,
+                };
+            }
+            return {
+                id: `${id}-panel`,
+                role: 'navigation',
+                'aria-label': ariaLabel,
+                'data-collapsed': expandedAtom() ? 'false' : 'true',
+                'data-mobile': isMobile ? 'true' : 'false',
+            };
+        },
+        getToggleProps() {
+            const isMobile = mobileAtom();
+            const isExpanded = expandedAtom();
+            const isOverlayOpen = dialog.state.isOpen();
+            let ariaExpanded;
+            let toggleLabel;
+            if (isMobile) {
+                ariaExpanded = isOverlayOpen ? 'true' : 'false';
+                toggleLabel = isOverlayOpen ? 'Close sidebar' : 'Open sidebar';
+            }
+            else {
+                ariaExpanded = isExpanded ? 'true' : 'false';
+                toggleLabel = isExpanded ? 'Collapse sidebar' : 'Expand sidebar';
+            }
+            return {
+                id: `${id}-toggle`,
+                role: 'button',
+                tabindex: '0',
+                'aria-expanded': ariaExpanded,
+                'aria-controls': `${id}-panel`,
+                'aria-label': toggleLabel,
+                onClick: actions.toggle,
+            };
+        },
+        getOverlayProps() {
+            const isMobile = mobileAtom();
+            const isOverlayOpen = dialog.state.isOpen();
+            const isHidden = !isMobile || !isOverlayOpen;
+            return {
+                id: `${id}-overlay`,
+                hidden: isHidden,
+                'data-open': (!isHidden ? 'true' : 'false'),
+                onPointerDownOutside: actions.handleOutsidePointer,
+                onFocusOutside: actions.handleOutsideFocus,
+            };
+        },
+        getRailProps() {
+            const isVisible = !expandedAtom() && !mobileAtom();
+            return {
+                id: `${id}-rail`,
+                role: 'navigation',
+                'aria-label': ariaLabel,
+                'data-visible': isVisible ? 'true' : 'false',
+            };
+        },
+    };
+    const state = {
+        expanded: expandedAtom,
+        overlayOpen: dialog.state.isOpen,
+        mobile: mobileAtom,
+        isFocusTrapped: isFocusTrappedAtom,
+        shouldLockScroll: shouldLockScrollAtom,
+        restoreTargetId: dialog.state.restoreTargetId,
+        initialFocusTargetId: dialog.state.initialFocusTargetId,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/slider/index.d.ts

@@ -0,0 +1,61 @@
+import { type Atom } from '@reatom/core';
+import { type ValueRangeActions, type ValueRangeState } from '../core/value-range.js';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export interface CreateSliderOptions {
+    idBase?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    orientation?: SliderOrientation;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    formatValueText?: (value: number) => string;
+    onValueChange?: (value: number) => void;
+}
+export interface SliderState extends ValueRangeState {
+    isDisabled: Atom<boolean>;
+    orientation: SliderOrientation;
+}
+export interface SliderActions extends ValueRangeActions {
+    setDisabled(value: boolean): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+}
+export interface SliderRootProps {
+    id: string;
+    'data-orientation': SliderOrientation;
+    'aria-disabled'?: 'true';
+}
+export interface SliderTrackProps {
+    id: string;
+    'data-orientation': SliderOrientation;
+}
+export interface SliderThumbProps {
+    id: string;
+    role: 'slider';
+    tabindex: '0' | '-1';
+    'aria-valuenow': string;
+    'aria-valuemin': string;
+    'aria-valuemax': string;
+    'aria-valuetext'?: string;
+    'aria-orientation': SliderOrientation;
+    'aria-disabled'?: 'true';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface SliderContracts {
+    getRootProps(): SliderRootProps;
+    getTrackProps(): SliderTrackProps;
+    getThumbProps(): SliderThumbProps;
+}
+export interface SliderModel {
+    readonly state: SliderState;
+    readonly actions: SliderActions;
+    readonly contracts: SliderContracts;
+}
+export declare function createSlider(options?: CreateSliderOptions): SliderModel;

package/dist/slider/index.js

@@ -0,0 +1,150 @@
+import { action, atom } from '@reatom/core';
+import { createValueRange } from '../core/value-range.js';
+const updateValue = (isDisabled, valueAtom, update, onValueChange) => {
+    if (isDisabled())
+        return;
+    const previous = valueAtom();
+    update();
+    const next = valueAtom();
+    if (previous !== next) {
+        onValueChange?.(next);
+    }
+};
+export function createSlider(options = {}) {
+    const idBase = options.idBase ?? 'slider';
+    const orientation = options.orientation ?? 'horizontal';
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const range = createValueRange({
+        idBase: `${idBase}.range`,
+        min: options.min ?? 0,
+        max: options.max ?? 100,
+        step: options.step,
+        largeStep: options.largeStep,
+        initialValue: options.value,
+    });
+    const setValue = action((value) => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.setValue(value);
+        }, options.onValueChange);
+    }, `${idBase}.setValue`);
+    const increment = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.increment();
+        }, options.onValueChange);
+    }, `${idBase}.increment`);
+    const decrement = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.decrement();
+        }, options.onValueChange);
+    }, `${idBase}.decrement`);
+    const incrementLarge = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.incrementLarge();
+        }, options.onValueChange);
+    }, `${idBase}.incrementLarge`);
+    const decrementLarge = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.decrementLarge();
+        }, options.onValueChange);
+    }, `${idBase}.decrementLarge`);
+    const setFirst = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.setFirst();
+        }, options.onValueChange);
+    }, `${idBase}.setFirst`);
+    const setLast = action(() => {
+        updateValue(isDisabledAtom, range.state.value, () => {
+            range.actions.setLast();
+        }, options.onValueChange);
+    }, `${idBase}.setLast`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const handleKeyDown = action((event) => {
+        if (isDisabledAtom())
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                increment();
+                return;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                decrement();
+                return;
+            case 'PageUp':
+                incrementLarge();
+                return;
+            case 'PageDown':
+                decrementLarge();
+                return;
+            case 'Home':
+                setFirst();
+                return;
+            case 'End':
+                setLast();
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        incrementLarge,
+        decrementLarge,
+        setFirst,
+        setLast,
+        setDisabled,
+        handleKeyDown,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                id: `${idBase}-root`,
+                'data-orientation': orientation,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+            };
+        },
+        getTrackProps() {
+            return {
+                id: `${idBase}-track`,
+                'data-orientation': orientation,
+            };
+        },
+        getThumbProps() {
+            const value = range.state.value();
+            return {
+                id: `${idBase}-thumb`,
+                role: 'slider',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-valuenow': String(value),
+                'aria-valuemin': String(range.state.min()),
+                'aria-valuemax': String(range.state.max()),
+                'aria-valuetext': options.formatValueText?.(value),
+                'aria-orientation': orientation,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+                onKeyDown: handleKeyDown,
+            };
+        },
+    };
+    const state = {
+        value: range.state.value,
+        min: range.state.min,
+        max: range.state.max,
+        step: range.state.step,
+        largeStep: range.state.largeStep,
+        percentage: range.state.percentage,
+        isDisabled: isDisabledAtom,
+        orientation,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/slider-multi-thumb/index.d.ts

@@ -0,0 +1,70 @@
+import { type Atom } from '@reatom/core';
+export type SliderMultiThumbOrientation = 'horizontal' | 'vertical';
+export interface CreateSliderMultiThumbOptions {
+    idBase?: string;
+    values: readonly number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    orientation?: SliderMultiThumbOrientation;
+    isDisabled?: boolean;
+    initialActiveThumbIndex?: number | null;
+    getThumbAriaLabel?: (index: number) => string | undefined;
+    formatValueText?: (value: number, index: number) => string;
+    onValuesChange?: (values: readonly number[]) => void;
+}
+export interface SliderMultiThumbState {
+    values: Atom<number[]>;
+    min: Atom<number>;
+    max: Atom<number>;
+    step: Atom<number>;
+    largeStep: Atom<number>;
+    activeThumbIndex: Atom<number | null>;
+    isDisabled: Atom<boolean>;
+    orientation: SliderMultiThumbOrientation;
+}
+export interface SliderMultiThumbActions {
+    setValue(index: number, value: number): void;
+    increment(index: number): void;
+    decrement(index: number): void;
+    incrementLarge(index: number): void;
+    decrementLarge(index: number): void;
+    setActiveThumb(index: number): void;
+    handleKeyDown(index: number, event: Pick<KeyboardEvent, 'key'>): void;
+    setDisabled(value: boolean): void;
+}
+export interface SliderMultiThumbRootProps {
+    id: string;
+    'data-orientation': SliderMultiThumbOrientation;
+    'aria-disabled'?: 'true';
+}
+export interface SliderMultiThumbTrackProps {
+    id: string;
+    'data-orientation': SliderMultiThumbOrientation;
+}
+export interface SliderMultiThumbThumbProps {
+    id: string;
+    role: 'slider';
+    tabindex: '0' | '-1';
+    'aria-valuenow': string;
+    'aria-valuemin': string;
+    'aria-valuemax': string;
+    'aria-valuetext'?: string;
+    'aria-orientation': SliderMultiThumbOrientation;
+    'aria-disabled'?: 'true';
+    'aria-label'?: string;
+    'data-active': 'true' | 'false';
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface SliderMultiThumbContracts {
+    getRootProps(): SliderMultiThumbRootProps;
+    getTrackProps(): SliderMultiThumbTrackProps;
+    getThumbProps(index: number): SliderMultiThumbThumbProps;
+}
+export interface SliderMultiThumbModel {
+    readonly state: SliderMultiThumbState;
+    readonly actions: SliderMultiThumbActions;
+    readonly contracts: SliderMultiThumbContracts;
+}
+export declare function createSliderMultiThumb(options: CreateSliderMultiThumbOptions): SliderMultiThumbModel;

package/dist/slider-multi-thumb/index.js

@@ -0,0 +1,222 @@
+import { action, atom } from '@reatom/core';
+import { clampValue, decrementValue, decrementValueLarge, incrementValue, incrementValueLarge, normalizeValueRange, snapValueToStep, } from '../core/value-range.js';
+const normalizeInitialValues = (values, range) => {
+    const snapped = values.map((value) => snapValueToStep(value, range));
+    const ordered = [...snapped].sort((left, right) => left - right);
+    return ordered.map((value, index, list) => {
+        const min = index === 0 ? range.min : (list[index - 1] ?? range.min);
+        const max = index === list.length - 1 ? range.max : (list[index + 1] ?? range.max);
+        return clampValue(value, min, max);
+    });
+};
+const isThumbIndex = (index, values) => Number.isInteger(index) && index >= 0 && index < values.length;
+export function createSliderMultiThumb(options) {
+    const idBase = options.idBase ?? 'slider-multi-thumb';
+    const orientation = options.orientation ?? 'horizontal';
+    const range = normalizeValueRange({
+        min: options.min ?? 0,
+        max: options.max ?? 100,
+        step: options.step,
+        largeStep: options.largeStep,
+    });
+    const minAtom = atom(range.min, `${idBase}.min`);
+    const maxAtom = atom(range.max, `${idBase}.max`);
+    const stepAtom = atom(range.step, `${idBase}.step`);
+    const largeStepAtom = atom(range.largeStep, `${idBase}.largeStep`);
+    const getRange = () => ({
+        min: minAtom(),
+        max: maxAtom(),
+        step: stepAtom(),
+        largeStep: largeStepAtom(),
+    });
+    const valuesAtom = atom(normalizeInitialValues(options.values, getRange()), `${idBase}.values`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const activeThumbIndexAtom = atom(options.initialActiveThumbIndex ?? (valuesAtom().length > 0 ? 0 : null), `${idBase}.activeThumbIndex`);
+    const getThumbBounds = (index, values = valuesAtom()) => {
+        const min = index === 0 ? minAtom() : (values[index - 1] ?? minAtom());
+        const max = index === values.length - 1 ? maxAtom() : (values[index + 1] ?? maxAtom());
+        return { min, max };
+    };
+    const applyValueAtIndex = (index, next) => {
+        const values = [...valuesAtom()];
+        if (!isThumbIndex(index, values))
+            return;
+        const bounds = getThumbBounds(index, values);
+        const localRange = {
+            ...getRange(),
+            min: bounds.min,
+            max: bounds.max,
+        };
+        values[index] = snapValueToStep(clampValue(next, bounds.min, bounds.max), localRange);
+        valuesAtom.set(values);
+        options.onValuesChange?.(values);
+    };
+    const setValue = action((index, value) => {
+        if (isDisabledAtom())
+            return;
+        applyValueAtIndex(index, value);
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.setValue`);
+    const increment = action((index) => {
+        if (isDisabledAtom())
+            return;
+        const values = valuesAtom();
+        if (!isThumbIndex(index, values))
+            return;
+        const bounds = getThumbBounds(index, values);
+        const localRange = {
+            ...getRange(),
+            min: bounds.min,
+            max: bounds.max,
+        };
+        applyValueAtIndex(index, incrementValue(values[index] ?? bounds.min, localRange));
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.increment`);
+    const decrement = action((index) => {
+        if (isDisabledAtom())
+            return;
+        const values = valuesAtom();
+        if (!isThumbIndex(index, values))
+            return;
+        const bounds = getThumbBounds(index, values);
+        const localRange = {
+            ...getRange(),
+            min: bounds.min,
+            max: bounds.max,
+        };
+        applyValueAtIndex(index, decrementValue(values[index] ?? bounds.max, localRange));
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.decrement`);
+    const incrementLarge = action((index) => {
+        if (isDisabledAtom())
+            return;
+        const values = valuesAtom();
+        if (!isThumbIndex(index, values))
+            return;
+        const bounds = getThumbBounds(index, values);
+        const localRange = {
+            ...getRange(),
+            min: bounds.min,
+            max: bounds.max,
+        };
+        applyValueAtIndex(index, incrementValueLarge(values[index] ?? bounds.min, localRange));
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.incrementLarge`);
+    const decrementLarge = action((index) => {
+        if (isDisabledAtom())
+            return;
+        const values = valuesAtom();
+        if (!isThumbIndex(index, values))
+            return;
+        const bounds = getThumbBounds(index, values);
+        const localRange = {
+            ...getRange(),
+            min: bounds.min,
+            max: bounds.max,
+        };
+        applyValueAtIndex(index, decrementValueLarge(values[index] ?? bounds.max, localRange));
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.decrementLarge`);
+    const setActiveThumb = action((index) => {
+        if (!isThumbIndex(index, valuesAtom()))
+            return;
+        activeThumbIndexAtom.set(index);
+    }, `${idBase}.setActiveThumb`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const handleKeyDown = action((index, event) => {
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                increment(index);
+                return;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                decrement(index);
+                return;
+            case 'PageUp':
+                incrementLarge(index);
+                return;
+            case 'PageDown':
+                decrementLarge(index);
+                return;
+            case 'Home': {
+                const { min } = getThumbBounds(index);
+                setValue(index, min);
+                return;
+            }
+            case 'End': {
+                const { max } = getThumbBounds(index);
+                setValue(index, max);
+                return;
+            }
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        incrementLarge,
+        decrementLarge,
+        setActiveThumb,
+        handleKeyDown,
+        setDisabled,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                id: `${idBase}-root`,
+                'data-orientation': orientation,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+            };
+        },
+        getTrackProps() {
+            return {
+                id: `${idBase}-track`,
+                'data-orientation': orientation,
+            };
+        },
+        getThumbProps(index) {
+            const values = valuesAtom();
+            if (!isThumbIndex(index, values)) {
+                throw new Error(`Unknown slider thumb index: ${index}`);
+            }
+            const { min, max } = getThumbBounds(index, values);
+            const value = values[index] ?? min;
+            const activeIndex = activeThumbIndexAtom();
+            const isActive = activeIndex == null ? index === 0 : activeIndex === index;
+            return {
+                id: `${idBase}-thumb-${index}`,
+                role: 'slider',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-valuenow': String(value),
+                'aria-valuemin': String(min),
+                'aria-valuemax': String(max),
+                'aria-valuetext': options.formatValueText?.(value, index),
+                'aria-orientation': orientation,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                'aria-label': options.getThumbAriaLabel?.(index),
+                'data-active': isActive ? 'true' : 'false',
+                onKeyDown: (event) => handleKeyDown(index, event),
+            };
+        },
+    };
+    const state = {
+        values: valuesAtom,
+        min: minAtom,
+        max: maxAtom,
+        step: stepAtom,
+        largeStep: largeStepAtom,
+        activeThumbIndex: activeThumbIndexAtom,
+        isDisabled: isDisabledAtom,
+        orientation,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}