@chromvoid/headless-ui 0.1.0

package/dist/textarea/index.js

@@ -0,0 +1,137 @@
+import { action, atom } from '@reatom/core';
+const toPositiveInteger = (value) => {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+        return undefined;
+    }
+    return Math.floor(value);
+};
+const toNonNegativeInteger = (value) => {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value) || value < 0) {
+        return undefined;
+    }
+    return Math.floor(value);
+};
+const normalizeResize = (value) => value === 'none' ? 'none' : 'vertical';
+export function createTextarea(options = {}) {
+    const idBase = options.idBase ?? 'textarea';
+    const valueAtom = atom(options.value ?? '', `${idBase}.value`);
+    const disabledAtom = atom(options.disabled ?? false, `${idBase}.disabled`);
+    const readonlyAtom = atom(options.readonly ?? false, `${idBase}.readonly`);
+    const requiredAtom = atom(options.required ?? false, `${idBase}.required`);
+    const placeholderAtom = atom(options.placeholder ?? '', `${idBase}.placeholder`);
+    const rowsAtom = atom(toPositiveInteger(options.rows) ?? 4, `${idBase}.rows`);
+    const colsAtom = atom(toPositiveInteger(options.cols) ?? 20, `${idBase}.cols`);
+    const minLengthAtom = atom(toNonNegativeInteger(options.minLength), `${idBase}.minLength`);
+    const maxLengthAtom = atom(toNonNegativeInteger(options.maxLength), `${idBase}.maxLength`);
+    const resizeAtom = atom(normalizeResize(options.resize), `${idBase}.resize`);
+    const focusedAtom = atom(false, `${idBase}.focused`);
+    const filled = () => valueAtom().length > 0;
+    const setValue = action((value) => {
+        valueAtom.set(value);
+    }, `${idBase}.setValue`);
+    const setDisabled = action((disabled) => {
+        disabledAtom.set(disabled);
+    }, `${idBase}.setDisabled`);
+    const setReadonly = action((readonly) => {
+        readonlyAtom.set(readonly);
+    }, `${idBase}.setReadonly`);
+    const setRequired = action((required) => {
+        requiredAtom.set(required);
+    }, `${idBase}.setRequired`);
+    const setPlaceholder = action((placeholder) => {
+        placeholderAtom.set(placeholder);
+    }, `${idBase}.setPlaceholder`);
+    const setRows = action((rows) => {
+        const normalized = toPositiveInteger(rows);
+        if (normalized === undefined) {
+            return;
+        }
+        rowsAtom.set(normalized);
+    }, `${idBase}.setRows`);
+    const setCols = action((cols) => {
+        const normalized = toPositiveInteger(cols);
+        if (normalized === undefined) {
+            return;
+        }
+        colsAtom.set(normalized);
+    }, `${idBase}.setCols`);
+    const setMinLength = action((minLength) => {
+        minLengthAtom.set(toNonNegativeInteger(minLength));
+    }, `${idBase}.setMinLength`);
+    const setMaxLength = action((maxLength) => {
+        maxLengthAtom.set(toNonNegativeInteger(maxLength));
+    }, `${idBase}.setMaxLength`);
+    const setResize = action((resize) => {
+        resizeAtom.set(normalizeResize(resize));
+    }, `${idBase}.setResize`);
+    const setFocused = action((focused) => {
+        focusedAtom.set(focused);
+    }, `${idBase}.setFocused`);
+    const handleInput = action((value) => {
+        if (disabledAtom() || readonlyAtom())
+            return;
+        valueAtom.set(value);
+        options.onInput?.(value);
+    }, `${idBase}.handleInput`);
+    const contracts = {
+        getTextareaProps() {
+            const isDisabled = disabledAtom();
+            const isReadonly = readonlyAtom();
+            const isRequired = requiredAtom();
+            const currentPlaceholder = placeholderAtom();
+            const minLength = minLengthAtom();
+            const maxLength = maxLengthAtom();
+            return {
+                id: `${idBase}-textarea`,
+                'aria-disabled': isDisabled ? 'true' : undefined,
+                'aria-readonly': isReadonly ? 'true' : undefined,
+                'aria-required': isRequired ? 'true' : undefined,
+                placeholder: currentPlaceholder || undefined,
+                disabled: isDisabled || undefined,
+                readonly: isReadonly || undefined,
+                required: isRequired || undefined,
+                tabindex: isDisabled ? '-1' : '0',
+                rows: rowsAtom(),
+                cols: colsAtom(),
+                minlength: minLength,
+                maxlength: maxLength,
+            };
+        },
+    };
+    const state = {
+        value: valueAtom,
+        disabled: disabledAtom,
+        readonly: readonlyAtom,
+        required: requiredAtom,
+        placeholder: placeholderAtom,
+        rows: rowsAtom,
+        cols: colsAtom,
+        minLength: minLengthAtom,
+        maxLength: maxLengthAtom,
+        resize: resizeAtom,
+        focused: focusedAtom,
+        filled,
+    };
+    const actions = {
+        setValue,
+        setDisabled,
+        setReadonly,
+        setRequired,
+        setPlaceholder,
+        setRows,
+        setCols,
+        setMinLength,
+        setMaxLength,
+        setResize,
+        setFocused,
+        handleInput,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/toast/index.d.ts

@@ -0,0 +1,67 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type ToastLevel = 'info' | 'success' | 'warning' | 'error' | 'loading';
+export interface ToastAction {
+    label: string;
+    onClick?: () => void;
+}
+export interface ToastItem {
+    id: string;
+    message: string;
+    title?: string;
+    level?: ToastLevel;
+    durationMs?: number;
+    closable?: boolean;
+    icon?: string;
+    progress?: boolean;
+    actions?: readonly ToastAction[];
+}
+export interface CreateToastOptions {
+    idBase?: string;
+    initialItems?: readonly ToastItem[];
+    maxVisible?: number;
+    defaultDurationMs?: number;
+    ariaLive?: 'polite' | 'assertive';
+}
+export interface ToastState {
+    items: Atom<ToastItem[]>;
+    visibleItems: Computed<ToastItem[]>;
+    isPaused: Atom<boolean>;
+}
+export interface ToastActions {
+    push(item: Omit<ToastItem, 'id'> & {
+        id?: string;
+    }): string;
+    dismiss(id: string): void;
+    clear(): void;
+    pause(): void;
+    resume(): void;
+}
+export interface ToastRegionProps {
+    id: string;
+    role: 'region';
+    'aria-live': 'polite' | 'assertive';
+    'aria-atomic': 'false';
+}
+export interface ToastItemProps {
+    id: string;
+    role: 'status' | 'alert';
+    'data-level': ToastLevel;
+}
+export interface ToastDismissButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': string;
+    onClick: () => void;
+}
+export interface ToastContracts {
+    getRegionProps(): ToastRegionProps;
+    getToastProps(id: string): ToastItemProps;
+    getDismissButtonProps(id: string): ToastDismissButtonProps;
+}
+export interface ToastModel {
+    readonly state: ToastState;
+    readonly actions: ToastActions;
+    readonly contracts: ToastContracts;
+}
+export declare function createToast(options?: CreateToastOptions): ToastModel;

package/dist/toast/index.js

@@ -0,0 +1,145 @@
+import { action, atom, computed } from '@reatom/core';
+export function createToast(options = {}) {
+    const idBase = options.idBase ?? 'toast';
+    const maxVisible = Math.max(options.maxVisible ?? 3, 1);
+    const defaultDurationMs = Math.max(options.defaultDurationMs ?? 5000, 0);
+    const ariaLive = options.ariaLive ?? 'polite';
+    const itemsAtom = atom([...(options.initialItems ?? [])], `${idBase}.items`);
+    const isPausedAtom = atom(false, `${idBase}.isPaused`);
+    const visibleItemsAtom = computed(() => itemsAtom().slice(0, maxVisible), `${idBase}.visibleItems`);
+    const timers = new Map();
+    const remainingMsById = new Map();
+    const startedAtById = new Map();
+    let nonce = 0;
+    const stopTimer = (id) => {
+        const timer = timers.get(id);
+        if (timer == null)
+            return;
+        clearTimeout(timer);
+        timers.delete(id);
+    };
+    const clearTracking = (id) => {
+        stopTimer(id);
+        remainingMsById.delete(id);
+        startedAtById.delete(id);
+    };
+    const dismiss = action((id) => {
+        clearTracking(id);
+        itemsAtom.set(itemsAtom().filter((item) => item.id !== id));
+    }, `${idBase}.dismiss`);
+    const scheduleAutoDismiss = (id, durationMs) => {
+        if (durationMs <= 0)
+            return;
+        if (isPausedAtom()) {
+            remainingMsById.set(id, durationMs);
+            startedAtById.delete(id);
+            return;
+        }
+        stopTimer(id);
+        remainingMsById.set(id, durationMs);
+        startedAtById.set(id, Date.now());
+        const timer = setTimeout(() => {
+            clearTracking(id);
+            dismiss(id);
+        }, durationMs);
+        timers.set(id, timer);
+    };
+    const push = action((item) => {
+        const id = item.id ?? `${idBase}-${++nonce}`;
+        const next = {
+            id,
+            message: item.message,
+            title: item.title,
+            level: item.level ?? 'info',
+            durationMs: item.durationMs ?? defaultDurationMs,
+            closable: item.closable ?? true,
+            icon: item.icon,
+            progress: item.progress,
+            actions: item.actions,
+        };
+        itemsAtom.set([next, ...itemsAtom()]);
+        scheduleAutoDismiss(id, next.durationMs ?? defaultDurationMs);
+        return id;
+    }, `${idBase}.push`);
+    const clear = action(() => {
+        for (const item of itemsAtom()) {
+            clearTracking(item.id);
+        }
+        itemsAtom.set([]);
+    }, `${idBase}.clear`);
+    const pause = action(() => {
+        if (isPausedAtom())
+            return;
+        isPausedAtom.set(true);
+        const now = Date.now();
+        for (const id of timers.keys()) {
+            const startedAt = startedAtById.get(id) ?? now;
+            const scheduledMs = remainingMsById.get(id) ?? 0;
+            const elapsedMs = Math.max(now - startedAt, 0);
+            const remainingMs = Math.max(scheduledMs - elapsedMs, 0);
+            remainingMsById.set(id, remainingMs);
+            startedAtById.delete(id);
+            stopTimer(id);
+        }
+    }, `${idBase}.pause`);
+    const resume = action(() => {
+        if (!isPausedAtom())
+            return;
+        isPausedAtom.set(false);
+        for (const item of itemsAtom()) {
+            const durationMs = remainingMsById.get(item.id) ?? item.durationMs ?? defaultDurationMs;
+            scheduleAutoDismiss(item.id, durationMs);
+        }
+    }, `${idBase}.resume`);
+    const actions = {
+        push,
+        dismiss,
+        clear,
+        pause,
+        resume,
+    };
+    const contracts = {
+        getRegionProps() {
+            return {
+                id: `${idBase}-region`,
+                role: 'region',
+                'aria-live': ariaLive,
+                'aria-atomic': 'false',
+            };
+        },
+        getToastProps(id) {
+            const toast = itemsAtom().find((item) => item.id === id);
+            if (!toast) {
+                throw new Error(`Unknown toast id: ${id}`);
+            }
+            const level = toast.level ?? 'info';
+            return {
+                id: `${idBase}-item-${id}`,
+                role: level === 'error' || level === 'warning' ? 'alert' : 'status',
+                'data-level': level,
+            };
+        },
+        getDismissButtonProps(id) {
+            return {
+                id: `${idBase}-dismiss-${id}`,
+                role: 'button',
+                tabindex: '0',
+                'aria-label': 'Dismiss notification',
+                onClick: () => dismiss(id),
+            };
+        },
+    };
+    const state = {
+        items: itemsAtom,
+        visibleItems: visibleItemsAtom,
+        isPaused: isPausedAtom,
+    };
+    for (const item of itemsAtom()) {
+        scheduleAutoDismiss(item.id, item.durationMs ?? defaultDurationMs);
+    }
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/toolbar/index.d.ts

@@ -0,0 +1,59 @@
+import { type Atom } from '@reatom/core';
+import { type CompositeNavigationOrientation } from '../interactions/composite-navigation.js';
+export interface ToolbarItem {
+    id: string;
+    disabled?: boolean;
+    separator?: boolean;
+}
+export interface CreateToolbarOptions {
+    items: readonly ToolbarItem[];
+    idBase?: string;
+    orientation?: CompositeNavigationOrientation;
+    wrap?: boolean;
+    ariaLabel?: string;
+    initialActiveId?: string | null;
+}
+export interface ToolbarState {
+    activeId: Atom<string | null>;
+    lastActiveId: Atom<string | null>;
+    orientation: CompositeNavigationOrientation;
+}
+export interface ToolbarActions {
+    setActive(id: string): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleToolbarFocus(): void;
+    handleToolbarBlur(): void;
+}
+export interface ToolbarRootProps {
+    id: string;
+    role: 'toolbar';
+    'aria-orientation': CompositeNavigationOrientation;
+    'aria-label'?: string;
+}
+export interface ToolbarItemProps {
+    id: string;
+    tabindex: '0' | '-1';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    onFocus: () => void;
+}
+export interface ToolbarSeparatorProps {
+    id: string;
+    role: 'separator';
+    'aria-orientation': 'vertical' | 'horizontal';
+}
+export interface ToolbarContracts {
+    getRootProps(): ToolbarRootProps;
+    getItemProps(id: string): ToolbarItemProps;
+    getSeparatorProps(id: string): ToolbarSeparatorProps;
+}
+export interface ToolbarModel {
+    readonly state: ToolbarState;
+    readonly actions: ToolbarActions;
+    readonly contracts: ToolbarContracts;
+}
+export declare function createToolbar(options: CreateToolbarOptions): ToolbarModel;

package/dist/toolbar/index.js

@@ -0,0 +1,139 @@
+import { action, atom } from '@reatom/core';
+import { createCompositeNavigation, } from '../interactions/composite-navigation.js';
+export function createToolbar(options) {
+    const idBase = options.idBase ?? 'toolbar';
+    const orientation = options.orientation ?? 'horizontal';
+    const allItems = options.items;
+    const navigableItems = allItems.filter((item) => !item.separator);
+    const resolveInitialActiveId = () => {
+        const enabledNavigable = navigableItems.filter((item) => !item.disabled);
+        if (options.initialActiveId != null &&
+            enabledNavigable.some((item) => item.id === options.initialActiveId)) {
+            return options.initialActiveId;
+        }
+        return enabledNavigable[0]?.id ?? null;
+    };
+    const navigation = createCompositeNavigation({
+        idBase: `${idBase}.nav`,
+        items: navigableItems,
+        orientation,
+        focusStrategy: 'roving-tabindex',
+        wrapMode: options.wrap === false ? 'clamp' : 'wrap',
+        initialActiveId: resolveInitialActiveId(),
+    });
+    const lastActiveIdAtom = atom(null, `${idBase}.lastActiveId`);
+    const setActive = action((id) => {
+        const item = allItems.find((i) => i.id === id);
+        if (!item || item.separator)
+            return;
+        navigation.actions.setActive(id);
+    }, `${idBase}.setActive`);
+    const moveNext = action(() => {
+        navigation.actions.moveNext();
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        navigation.actions.movePrev();
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        navigation.actions.moveFirst();
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        navigation.actions.moveLast();
+    }, `${idBase}.moveLast`);
+    const handleKeyDown = action((event) => {
+        switch (event.key) {
+            case 'Home':
+                moveFirst();
+                return;
+            case 'End':
+                moveLast();
+                return;
+            case 'ArrowRight':
+                if (orientation === 'horizontal') {
+                    moveNext();
+                }
+                return;
+            case 'ArrowLeft':
+                if (orientation === 'horizontal') {
+                    movePrev();
+                }
+                return;
+            case 'ArrowDown':
+                if (orientation === 'vertical') {
+                    moveNext();
+                }
+                return;
+            case 'ArrowUp':
+                if (orientation === 'vertical') {
+                    movePrev();
+                }
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const handleToolbarBlur = action(() => {
+        lastActiveIdAtom.set(navigation.state.activeId());
+    }, `${idBase}.handleToolbarBlur`);
+    const handleToolbarFocus = action(() => {
+        const lastId = lastActiveIdAtom();
+        if (lastId == null)
+            return;
+        const item = navigableItems.find((i) => i.id === lastId);
+        if (!item || item.disabled)
+            return;
+        navigation.actions.setActive(lastId);
+    }, `${idBase}.handleToolbarFocus`);
+    const actions = {
+        setActive,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        handleKeyDown,
+        handleToolbarFocus,
+        handleToolbarBlur,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                id: `${idBase}-root`,
+                role: 'toolbar',
+                'aria-orientation': orientation,
+                'aria-label': options.ariaLabel,
+            };
+        },
+        getItemProps(id) {
+            const item = navigation.contracts.getItemFocusProps(id);
+            return {
+                ...item,
+                onFocus: () => setActive(id),
+            };
+        },
+        getSeparatorProps(id) {
+            const item = allItems.find((i) => i.id === id);
+            if (!item) {
+                throw new Error(`Unknown toolbar item id: ${id}`);
+            }
+            if (!item.separator) {
+                throw new Error(`Item "${id}" is not a separator`);
+            }
+            const perpendicularOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+            return {
+                id: `${idBase}-separator-${id}`,
+                role: 'separator',
+                'aria-orientation': perpendicularOrientation,
+            };
+        },
+    };
+    const state = {
+        activeId: navigation.state.activeId,
+        lastActiveId: lastActiveIdAtom,
+        orientation,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,52 @@
+import { type Atom } from '@reatom/core';
+export interface CreateTooltipOptions {
+    idBase?: string;
+    initialOpen?: boolean;
+    isDisabled?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    trigger?: string;
+}
+export interface TooltipState {
+    isOpen: Atom<boolean>;
+    isDisabled: Atom<boolean>;
+}
+export interface TooltipActions {
+    open(): void;
+    close(): void;
+    show(): void;
+    hide(): void;
+    setDisabled(value: boolean): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handlePointerEnter(): void;
+    handlePointerLeave(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleClick(): void;
+}
+export interface TooltipTriggerProps {
+    id: string;
+    'aria-describedby'?: string;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onClick?: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface TooltipContentProps {
+    id: string;
+    role: 'tooltip';
+    tabindex: '-1';
+    hidden: boolean;
+}
+export interface TooltipContracts {
+    getTriggerProps(): TooltipTriggerProps;
+    getTooltipProps(): TooltipContentProps;
+}
+export interface TooltipModel {
+    readonly state: TooltipState;
+    readonly actions: TooltipActions;
+    readonly contracts: TooltipContracts;
+}
+export declare function createTooltip(options?: CreateTooltipOptions): TooltipModel;