@chromvoid/headless-ui 0.1.0

package/dist/card/index.js

@@ -0,0 +1,103 @@
+import { action, atom } from '@reatom/core';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createCard(options = {}) {
+    const idBase = options.idBase ?? 'card';
+    const isExpandableAtom = atom(options.isExpandable ?? false, `${idBase}.isExpandable`);
+    const isExpandedAtom = atom(options.isExpanded ?? false, `${idBase}.isExpanded`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const notifyExpandedChange = (next) => {
+        if (isExpandedAtom() === next)
+            return;
+        isExpandedAtom.set(next);
+        options.onExpandedChange?.(next);
+    };
+    const toggle = action(() => {
+        if (!isExpandableAtom() || isDisabledAtom())
+            return;
+        notifyExpandedChange(!isExpandedAtom());
+    }, `${idBase}.toggle`);
+    const expand = action(() => {
+        if (!isExpandableAtom() || isDisabledAtom())
+            return;
+        notifyExpandedChange(true);
+    }, `${idBase}.expand`);
+    const collapse = action(() => {
+        if (!isExpandableAtom() || isDisabledAtom())
+            return;
+        notifyExpandedChange(false);
+    }, `${idBase}.collapse`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const handleClick = action(() => {
+        toggle();
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (!isExpandableAtom() || isDisabledAtom())
+            return;
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            event.preventDefault?.();
+            toggle();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault?.();
+            expand();
+            return;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            event.preventDefault?.();
+            collapse();
+            return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const triggerId = `${idBase}-trigger`;
+    const contentId = `${idBase}-content`;
+    const actions = {
+        toggle,
+        expand,
+        collapse,
+        setDisabled,
+        handleClick,
+        handleKeyDown,
+    };
+    const contracts = {
+        getCardProps() {
+            return {};
+        },
+        getTriggerProps() {
+            if (!isExpandableAtom())
+                return {};
+            return {
+                id: triggerId,
+                role: 'button',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-expanded': isExpandedAtom() ? 'true' : 'false',
+                'aria-controls': contentId,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getContentProps() {
+            if (!isExpandableAtom())
+                return {};
+            return {
+                id: contentId,
+                role: 'region',
+                'aria-labelledby': triggerId,
+                hidden: !isExpandedAtom(),
+            };
+        },
+    };
+    const state = {
+        isExpandable: isExpandableAtom,
+        isExpanded: isExpandedAtom,
+        isDisabled: isDisabledAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/carousel/index.d.ts

@@ -0,0 +1,98 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface CarouselSlide {
+    id: string;
+    label?: string;
+    disabled?: boolean;
+}
+export interface CarouselKeyboardEventLike {
+    key: string;
+}
+export interface CreateCarouselOptions {
+    slides: readonly CarouselSlide[];
+    idBase?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    autoplay?: boolean;
+    autoplayIntervalMs?: number;
+    visibleSlides?: number;
+    initialActiveSlideIndex?: number;
+    initialPaused?: boolean;
+}
+export interface CarouselState {
+    activeSlideIndex: Atom<number>;
+    isPaused: Computed<boolean>;
+    slideCount: Computed<number>;
+    visibleSlideIndices: Computed<number[]>;
+}
+export interface CarouselActions {
+    moveNext(): void;
+    movePrev(): void;
+    moveTo(index: number): void;
+    play(): void;
+    pause(): void;
+    togglePlay(): void;
+    handleKeyDown(event: CarouselKeyboardEventLike): void;
+    handleFocusIn(): void;
+    handleFocusOut(): void;
+    handlePointerEnter(): void;
+    handlePointerLeave(): void;
+}
+export interface CarouselRootProps {
+    id: string;
+    role: 'region';
+    'aria-roledescription': 'carousel';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-live': 'off' | 'polite';
+    onFocusIn: () => void;
+    onFocusOut: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+}
+export interface CarouselSlideGroupProps {
+    id: string;
+    role: 'group';
+    'aria-label'?: string;
+}
+export interface CarouselSlideProps {
+    id: string;
+    role: 'group';
+    'aria-roledescription': 'slide';
+    'aria-label': string;
+    'aria-hidden': 'true' | 'false';
+    'data-active': 'true' | 'false';
+}
+export interface CarouselControlButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-controls': string;
+    'aria-label': string;
+    onClick: () => void;
+}
+export type CarouselPlayPauseButtonProps = CarouselControlButtonProps;
+export interface CarouselIndicatorProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-controls': string;
+    'aria-label': string;
+    'aria-current'?: 'true';
+    'data-active': 'true' | 'false';
+    onClick: () => void;
+}
+export interface CarouselContracts {
+    getRootProps(): CarouselRootProps;
+    getSlideGroupProps(): CarouselSlideGroupProps;
+    getSlideProps(index: number): CarouselSlideProps;
+    getNextButtonProps(): CarouselControlButtonProps;
+    getPrevButtonProps(): CarouselControlButtonProps;
+    getPlayPauseButtonProps(): CarouselPlayPauseButtonProps;
+    getIndicatorProps(index: number): CarouselIndicatorProps;
+}
+export interface CarouselModel {
+    readonly state: CarouselState;
+    readonly actions: CarouselActions;
+    readonly contracts: CarouselContracts;
+}
+export declare function createCarousel(options: CreateCarouselOptions): CarouselModel;

package/dist/carousel/index.js

@@ -0,0 +1,243 @@
+import { action, atom, computed } from '@reatom/core';
+const clampIndex = (value, count) => {
+    if (count <= 0)
+        return 0;
+    return Math.min(Math.max(value, 0), count - 1);
+};
+export function createCarousel(options) {
+    const idBase = options.idBase ?? 'carousel';
+    const autoplayEnabled = options.autoplay ?? false;
+    const autoplayIntervalMs = Math.max(options.autoplayIntervalMs ?? 5000, 1);
+    const visibleSlides = Math.max(options.visibleSlides ?? 1, 1);
+    const slides = [...options.slides];
+    const slideCountAtom = computed(() => slides.length, `${idBase}.slideCount`);
+    const initialActiveSlideIndex = clampIndex(options.initialActiveSlideIndex ?? 0, slides.length);
+    const activeSlideIndexAtom = atom(initialActiveSlideIndex, `${idBase}.activeSlideIndex`);
+    const isPointerInsideAtom = atom(false, `${idBase}.isPointerInside`);
+    const isFocusWithinAtom = atom(false, `${idBase}.isFocusWithin`);
+    const userPausedAtom = atom(options.initialPaused ?? false, `${idBase}.userPaused`);
+    const liveModeAtom = atom(autoplayEnabled ? 'off' : 'polite', `${idBase}.liveMode`);
+    const isPausedAtom = computed(() => autoplayEnabled && (userPausedAtom() || isPointerInsideAtom() || isFocusWithinAtom()), `${idBase}.isPaused`);
+    const visibleSlideIndicesAtom = computed(() => {
+        const count = slideCountAtom();
+        if (count === 0)
+            return [];
+        const start = clampIndex(activeSlideIndexAtom(), count);
+        const length = Math.min(visibleSlides, count);
+        return Array.from({ length }, (_, offset) => (start + offset) % count);
+    }, `${idBase}.visibleSlideIndices`);
+    let rotationTimer = null;
+    const clearRotationTimer = () => {
+        if (rotationTimer == null)
+            return;
+        clearTimeout(rotationTimer);
+        rotationTimer = null;
+    };
+    const isAutoplayRunning = () => autoplayEnabled && !isPausedAtom() && slideCountAtom() > 1;
+    const setActiveByIndex = (index, source) => {
+        const count = slideCountAtom();
+        if (count <= 0) {
+            activeSlideIndexAtom.set(0);
+            return;
+        }
+        const target = ((index % count) + count) % count;
+        activeSlideIndexAtom.set(target);
+        if (!autoplayEnabled) {
+            liveModeAtom.set('polite');
+            return;
+        }
+        if (source === 'manual') {
+            liveModeAtom.set('polite');
+        }
+        if (source === 'auto') {
+            liveModeAtom.set('off');
+        }
+    };
+    const syncAutoplay = () => {
+        clearRotationTimer();
+        if (!isAutoplayRunning()) {
+            return;
+        }
+        rotationTimer = setTimeout(() => {
+            rotationTimer = null;
+            setActiveByIndex(activeSlideIndexAtom() + 1, 'auto');
+            syncAutoplay();
+        }, autoplayIntervalMs);
+    };
+    const moveNext = action(() => {
+        setActiveByIndex(activeSlideIndexAtom() + 1, 'manual');
+        syncAutoplay();
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        setActiveByIndex(activeSlideIndexAtom() - 1, 'manual');
+        syncAutoplay();
+    }, `${idBase}.movePrev`);
+    const moveTo = action((index) => {
+        setActiveByIndex(index, 'manual');
+        syncAutoplay();
+    }, `${idBase}.moveTo`);
+    const play = action(() => {
+        userPausedAtom.set(false);
+        syncAutoplay();
+    }, `${idBase}.play`);
+    const pause = action(() => {
+        userPausedAtom.set(true);
+        clearRotationTimer();
+    }, `${idBase}.pause`);
+    const togglePlay = action(() => {
+        if (userPausedAtom()) {
+            play();
+        }
+        else {
+            pause();
+        }
+    }, `${idBase}.togglePlay`);
+    const handleFocusIn = action(() => {
+        isFocusWithinAtom.set(true);
+        clearRotationTimer();
+    }, `${idBase}.handleFocusIn`);
+    const handleFocusOut = action(() => {
+        isFocusWithinAtom.set(false);
+        syncAutoplay();
+    }, `${idBase}.handleFocusOut`);
+    const handlePointerEnter = action(() => {
+        isPointerInsideAtom.set(true);
+        clearRotationTimer();
+    }, `${idBase}.handlePointerEnter`);
+    const handlePointerLeave = action(() => {
+        isPointerInsideAtom.set(false);
+        syncAutoplay();
+    }, `${idBase}.handlePointerLeave`);
+    const handleKeyDown = action((event) => {
+        switch (event.key) {
+            case 'ArrowRight':
+                moveNext();
+                return;
+            case 'ArrowLeft':
+                movePrev();
+                return;
+            case 'Home':
+                moveTo(0);
+                return;
+            case 'End':
+                moveTo(slideCountAtom() - 1);
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const rootId = `${idBase}-root`;
+    const slideGroupId = `${idBase}-slides`;
+    const slideId = (index) => `${idBase}-slide-${index}`;
+    const actions = {
+        moveNext,
+        movePrev,
+        moveTo,
+        play,
+        pause,
+        togglePlay,
+        handleKeyDown,
+        handleFocusIn,
+        handleFocusOut,
+        handlePointerEnter,
+        handlePointerLeave,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                id: rootId,
+                role: 'region',
+                'aria-roledescription': 'carousel',
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-live': liveModeAtom(),
+                onFocusIn: handleFocusIn,
+                onFocusOut: handleFocusOut,
+                onPointerEnter: handlePointerEnter,
+                onPointerLeave: handlePointerLeave,
+            };
+        },
+        getSlideGroupProps() {
+            return {
+                id: slideGroupId,
+                role: 'group',
+                'aria-label': 'Slides',
+            };
+        },
+        getSlideProps(index) {
+            const count = slideCountAtom();
+            if (index < 0 || index >= count) {
+                throw new Error(`Unknown carousel slide index: ${index}`);
+            }
+            const visible = visibleSlideIndicesAtom().includes(index);
+            return {
+                id: slideId(index),
+                role: 'group',
+                'aria-roledescription': 'slide',
+                'aria-label': slides[index]?.label ?? `${index + 1} of ${count}`,
+                'aria-hidden': visible ? 'false' : 'true',
+                'data-active': index === activeSlideIndexAtom() ? 'true' : 'false',
+            };
+        },
+        getNextButtonProps() {
+            return {
+                id: `${idBase}-next`,
+                role: 'button',
+                tabindex: '0',
+                'aria-controls': slideGroupId,
+                'aria-label': 'Next slide',
+                onClick: moveNext,
+            };
+        },
+        getPrevButtonProps() {
+            return {
+                id: `${idBase}-prev`,
+                role: 'button',
+                tabindex: '0',
+                'aria-controls': slideGroupId,
+                'aria-label': 'Previous slide',
+                onClick: movePrev,
+            };
+        },
+        getPlayPauseButtonProps() {
+            const paused = userPausedAtom();
+            return {
+                id: `${idBase}-play-pause`,
+                role: 'button',
+                tabindex: '0',
+                'aria-controls': slideGroupId,
+                'aria-label': paused ? 'Start slide rotation' : 'Stop slide rotation',
+                onClick: togglePlay,
+            };
+        },
+        getIndicatorProps(index) {
+            const count = slideCountAtom();
+            if (index < 0 || index >= count) {
+                throw new Error(`Unknown carousel indicator index: ${index}`);
+            }
+            const isActive = activeSlideIndexAtom() === index;
+            return {
+                id: `${idBase}-indicator-${index}`,
+                role: 'button',
+                tabindex: '0',
+                'aria-controls': slideId(index),
+                'aria-label': `Go to slide ${index + 1}`,
+                'aria-current': isActive ? 'true' : undefined,
+                'data-active': isActive ? 'true' : 'false',
+                onClick: () => moveTo(index),
+            };
+        },
+    };
+    const state = {
+        activeSlideIndex: activeSlideIndexAtom,
+        isPaused: isPausedAtom,
+        slideCount: slideCountAtom,
+        visibleSlideIndices: visibleSlideIndicesAtom,
+    };
+    syncAutoplay();
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,50 @@
+import { type Atom } from '@reatom/core';
+export type CheckboxValue = boolean | 'mixed';
+export interface CreateCheckboxOptions {
+    idBase?: string;
+    checked?: CheckboxValue;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    allowMixed?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    onCheckedChange?: (value: CheckboxValue) => void;
+}
+export interface CheckboxState {
+    checked: Atom<CheckboxValue>;
+    isDisabled: Atom<boolean>;
+    isReadOnly: Atom<boolean>;
+}
+export interface CheckboxActions {
+    setChecked(value: CheckboxValue): void;
+    setDisabled(value: boolean): void;
+    setReadOnly(value: boolean): void;
+    toggle(): void;
+    handleClick(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }): void;
+}
+export interface CheckboxProps {
+    id: string;
+    role: 'checkbox';
+    tabindex: '0' | '-1';
+    'aria-checked': 'true' | 'false' | 'mixed';
+    'aria-disabled'?: 'true';
+    'aria-readonly'?: 'true';
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }) => void;
+}
+export interface CheckboxContracts {
+    getCheckboxProps(): CheckboxProps;
+}
+export interface CheckboxModel {
+    readonly state: CheckboxState;
+    readonly actions: CheckboxActions;
+    readonly contracts: CheckboxContracts;
+}
+export declare function createCheckbox(options?: CreateCheckboxOptions): CheckboxModel;

package/dist/checkbox/index.js

@@ -0,0 +1,87 @@
+import { action, atom } from '@reatom/core';
+const normalizeCheckboxValue = (value, allowMixed) => {
+    if (value === 'mixed' && !allowMixed) {
+        return false;
+    }
+    return value;
+};
+const nextCheckboxValue = (value) => {
+    if (value === 'mixed')
+        return true;
+    return !value;
+};
+const toAriaChecked = (value) => {
+    if (value === 'mixed')
+        return 'mixed';
+    return value ? 'true' : 'false';
+};
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createCheckbox(options = {}) {
+    const idBase = options.idBase ?? 'checkbox';
+    const allowMixed = options.allowMixed ?? options.checked === 'mixed';
+    const checkedAtom = atom(normalizeCheckboxValue(options.checked ?? false, allowMixed), `${idBase}.checked`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const isReadOnlyAtom = atom(options.isReadOnly ?? false, `${idBase}.isReadOnly`);
+    const canMutate = () => !isDisabledAtom() && !isReadOnlyAtom();
+    const setChecked = action((value) => {
+        const normalized = normalizeCheckboxValue(value, allowMixed);
+        checkedAtom.set(normalized);
+        options.onCheckedChange?.(normalized);
+    }, `${idBase}.setChecked`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const setReadOnly = action((value) => {
+        isReadOnlyAtom.set(value);
+    }, `${idBase}.setReadOnly`);
+    const toggle = action(() => {
+        if (!canMutate())
+            return;
+        setChecked(nextCheckboxValue(checkedAtom()));
+    }, `${idBase}.toggle`);
+    const handleClick = action(() => {
+        toggle();
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (isSpaceKey(event.key)) {
+            if (!canMutate())
+                return;
+            event.preventDefault?.();
+            toggle();
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setChecked,
+        setDisabled,
+        setReadOnly,
+        toggle,
+        handleClick,
+        handleKeyDown,
+    };
+    const contracts = {
+        getCheckboxProps() {
+            return {
+                id: `${idBase}-root`,
+                role: 'checkbox',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-checked': toAriaChecked(checkedAtom()),
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                'aria-readonly': isReadOnlyAtom() ? 'true' : undefined,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+            };
+        },
+    };
+    const state = {
+        checked: checkedAtom,
+        isDisabled: isDisabledAtom,
+        isReadOnly: isReadOnlyAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/combobox/index.d.ts

@@ -0,0 +1,114 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface ComboboxOption {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxOptionGroup {
+    id: string;
+    label: string;
+    options: ComboboxOption[];
+}
+export interface ComboboxVisibleGroup {
+    id: string;
+    label: string;
+    options: readonly ComboboxOption[];
+}
+export type ComboboxMatchMode = 'includes' | 'startsWith';
+export type ComboboxType = 'editable' | 'select-only';
+export interface CreateComboboxOptions {
+    options: readonly (ComboboxOption | ComboboxOptionGroup)[];
+    type?: ComboboxType;
+    multiple?: boolean;
+    clearable?: boolean;
+    closeOnSelect?: boolean;
+    matchMode?: ComboboxMatchMode;
+    filter?: (option: ComboboxOption, inputValue: string) => boolean;
+    typeahead?: boolean | {
+        enabled?: boolean;
+        timeoutMs?: number;
+    };
+    idBase?: string;
+    ariaLabel?: string;
+    initialInputValue?: string;
+    initialSelectedId?: string | null;
+    initialSelectedIds?: string[];
+    initialOpen?: boolean;
+}
+export interface ComboboxState {
+    inputValue: Atom<string>;
+    isOpen: Atom<boolean>;
+    activeId: Atom<string | null>;
+    selectedId: Atom<string | null>;
+    selectedIds: Atom<string[]>;
+    hasSelection: Computed<boolean>;
+    type: Computed<ComboboxType>;
+    multiple: Computed<boolean>;
+}
+export interface ComboboxInputProps {
+    id: string;
+    role: 'combobox';
+    tabindex: '0';
+    'aria-haspopup': 'listbox';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-autocomplete'?: 'list';
+    'aria-activedescendant'?: string;
+    'aria-label'?: string;
+}
+export interface ComboboxListboxProps {
+    id: string;
+    role: 'listbox';
+    tabindex: '-1';
+    'aria-label'?: string;
+    'aria-multiselectable'?: 'true';
+}
+export interface ComboboxOptionProps {
+    id: string;
+    role: 'option';
+    tabindex: '-1';
+    'aria-selected': 'true' | 'false';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+}
+export interface ComboboxGroupProps {
+    id: string;
+    role: 'group';
+    'aria-labelledby': string;
+}
+export interface ComboboxGroupLabelProps {
+    id: string;
+    role: 'presentation';
+}
+export interface ComboboxActions {
+    open(): void;
+    close(): void;
+    setInputValue(value: string): void;
+    setActive(id: string | null): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    commitActive(): void;
+    select(id: string): void;
+    toggleOption(id: string): void;
+    removeSelected(id: string): void;
+    clearSelection(): void;
+    clear(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key' | 'shiftKey' | 'ctrlKey' | 'metaKey' | 'altKey'>): void;
+}
+export interface ComboboxContracts {
+    getVisibleOptions(): readonly (ComboboxOption | ComboboxVisibleGroup)[];
+    getFlatVisibleOptions(): readonly ComboboxOption[];
+    getInputProps(): ComboboxInputProps;
+    getListboxProps(): ComboboxListboxProps;
+    getOptionProps(id: string): ComboboxOptionProps;
+    getGroupProps(groupId: string): ComboboxGroupProps;
+    getGroupLabelProps(groupId: string): ComboboxGroupLabelProps;
+}
+export interface ComboboxModel {
+    readonly state: ComboboxState;
+    readonly actions: ComboboxActions;
+    readonly contracts: ComboboxContracts;
+}
+export declare function createCombobox(options: CreateComboboxOptions): ComboboxModel;