@chromvoid/headless-ui 0.1.0

package/dist/spinbutton/index.d.ts

@@ -0,0 +1,75 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type SpinbuttonKeyboardEventLike = Pick<KeyboardEvent, 'key'> & {
+    preventDefault?: () => void;
+};
+export interface CreateSpinbuttonOptions {
+    idBase?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    formatValueText?: (value: number) => string;
+    onValueChange?: (value: number) => void;
+}
+export interface SpinbuttonState {
+    value: Atom<number>;
+    min: Atom<number | undefined>;
+    max: Atom<number | undefined>;
+    step: Atom<number>;
+    largeStep: Atom<number>;
+    isDisabled: Atom<boolean>;
+    isReadOnly: Atom<boolean>;
+    hasMin: Computed<boolean>;
+    hasMax: Computed<boolean>;
+}
+export interface SpinbuttonActions {
+    setValue(value: number): void;
+    increment(): void;
+    decrement(): void;
+    incrementLarge(): void;
+    decrementLarge(): void;
+    setFirst(): void;
+    setLast(): void;
+    setDisabled(value: boolean): void;
+    setReadOnly(value: boolean): void;
+    handleKeyDown(event: SpinbuttonKeyboardEventLike): void;
+}
+export interface SpinbuttonProps {
+    id: string;
+    role: 'spinbutton';
+    tabindex: '0' | '-1';
+    'aria-valuenow': string;
+    'aria-valuemin'?: string;
+    'aria-valuemax'?: string;
+    'aria-valuetext'?: string;
+    'aria-disabled'?: 'true';
+    'aria-readonly'?: 'true';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onKeyDown: (event: SpinbuttonKeyboardEventLike) => void;
+}
+export interface SpinbuttonButtonProps {
+    id: string;
+    tabindex: '-1';
+    'aria-label': string;
+    'aria-disabled'?: 'true';
+    onClick: () => void;
+}
+export interface SpinbuttonContracts {
+    getSpinbuttonProps(): SpinbuttonProps;
+    getIncrementButtonProps(): SpinbuttonButtonProps;
+    getDecrementButtonProps(): SpinbuttonButtonProps;
+}
+export interface SpinbuttonModel {
+    readonly state: SpinbuttonState;
+    readonly actions: SpinbuttonActions;
+    readonly contracts: SpinbuttonContracts;
+}
+export declare function createSpinbutton(options?: CreateSpinbuttonOptions): SpinbuttonModel;

package/dist/spinbutton/index.js

@@ -0,0 +1,214 @@
+import { action, atom, computed } from '@reatom/core';
+const EPSILON = 1e-9;
+const toNumericString = (value) => (value == null ? undefined : String(value));
+const sanitizePositive = (value, fallback) => {
+    if (value == null || !Number.isFinite(value) || value <= 0) {
+        return fallback;
+    }
+    return value;
+};
+const decimalPlaces = (value) => {
+    const text = value.toString().toLowerCase();
+    const scientific = text.match(/e-(\d+)$/);
+    if (scientific?.[1]) {
+        return Number.parseInt(scientific[1], 10);
+    }
+    const decimalIndex = text.indexOf('.');
+    if (decimalIndex < 0)
+        return 0;
+    return text.length - decimalIndex - 1;
+};
+const normalizePrecision = (value, precision) => Number(value.toFixed(Math.min(Math.max(precision, 0), 12)));
+const normalizeBounds = (min, max) => {
+    if (min != null && max != null && min > max) {
+        return { min: max, max: min };
+    }
+    return { min, max };
+};
+const clampOptional = (value, min, max) => {
+    if (min != null && value < min)
+        return min;
+    if (max != null && value > max)
+        return max;
+    return value;
+};
+const snapToStep = (value, step, anchor) => {
+    const offset = (value - anchor) / step;
+    const snapped = anchor + Math.round(offset) * step;
+    const precision = Math.max(decimalPlaces(anchor), decimalPlaces(step));
+    return normalizePrecision(snapped, precision + 2);
+};
+const isAtOrPastMax = (value, max) => max != null && value >= max - EPSILON;
+const isAtOrPastMin = (value, min) => min != null && value <= min + EPSILON;
+export function createSpinbutton(options = {}) {
+    const idBase = options.idBase ?? 'spinbutton';
+    const initialStep = sanitizePositive(options.step, 1);
+    const initialLargeStep = sanitizePositive(options.largeStep, initialStep * 10);
+    const normalizedBounds = normalizeBounds(options.min, options.max);
+    const minAtom = atom(normalizedBounds.min, `${idBase}.min`);
+    const maxAtom = atom(normalizedBounds.max, `${idBase}.max`);
+    const stepAtom = atom(initialStep, `${idBase}.step`);
+    const largeStepAtom = atom(initialLargeStep, `${idBase}.largeStep`);
+    const normalizeValue = (value) => {
+        const snapped = snapToStep(value, stepAtom(), minAtom() ?? 0);
+        return clampOptional(snapped, minAtom(), maxAtom());
+    };
+    const initialValueSeed = Number.isFinite(options.value) ? options.value : (minAtom() ?? 0);
+    const initialValue = normalizeValue(initialValueSeed);
+    const valueAtom = atom(initialValue, `${idBase}.value`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const isReadOnlyAtom = atom(options.isReadOnly ?? false, `${idBase}.isReadOnly`);
+    const hasMinComputed = computed(() => minAtom() != null, `${idBase}.hasMinComputed`);
+    const hasMaxComputed = computed(() => maxAtom() != null, `${idBase}.hasMaxComputed`);
+    const canMutate = () => !isDisabledAtom() && !isReadOnlyAtom();
+    const commitValue = (next) => {
+        if (!Number.isFinite(next))
+            return;
+        const previous = valueAtom();
+        const normalizedValue = normalizeValue(next);
+        valueAtom.set(normalizedValue);
+        if (previous !== normalizedValue) {
+            options.onValueChange?.(normalizedValue);
+        }
+    };
+    const setValue = action((value) => {
+        if (!canMutate())
+            return;
+        commitValue(value);
+    }, `${idBase}.setValue`);
+    const increment = action(() => {
+        if (!canMutate())
+            return;
+        commitValue(valueAtom() + stepAtom());
+    }, `${idBase}.increment`);
+    const decrement = action(() => {
+        if (!canMutate())
+            return;
+        commitValue(valueAtom() - stepAtom());
+    }, `${idBase}.decrement`);
+    const incrementLarge = action(() => {
+        if (!canMutate())
+            return;
+        commitValue(valueAtom() + largeStepAtom());
+    }, `${idBase}.incrementLarge`);
+    const decrementLarge = action(() => {
+        if (!canMutate())
+            return;
+        commitValue(valueAtom() - largeStepAtom());
+    }, `${idBase}.decrementLarge`);
+    const setFirst = action(() => {
+        if (!canMutate() || minAtom() == null)
+            return;
+        commitValue(minAtom());
+    }, `${idBase}.setFirst`);
+    const setLast = action(() => {
+        if (!canMutate() || maxAtom() == null)
+            return;
+        commitValue(maxAtom());
+    }, `${idBase}.setLast`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const setReadOnly = action((value) => {
+        isReadOnlyAtom.set(value);
+    }, `${idBase}.setReadOnly`);
+    const handleKeyDown = action((event) => {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault?.();
+                increment();
+                return;
+            case 'ArrowDown':
+                event.preventDefault?.();
+                decrement();
+                return;
+            case 'PageUp':
+                event.preventDefault?.();
+                incrementLarge();
+                return;
+            case 'PageDown':
+                event.preventDefault?.();
+                decrementLarge();
+                return;
+            case 'Home':
+                event.preventDefault?.();
+                setFirst();
+                return;
+            case 'End':
+                event.preventDefault?.();
+                setLast();
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        incrementLarge,
+        decrementLarge,
+        setFirst,
+        setLast,
+        setDisabled,
+        setReadOnly,
+        handleKeyDown,
+    };
+    const isControlDisabled = () => isDisabledAtom() || isReadOnlyAtom();
+    const isIncrementDisabled = () => isControlDisabled() || isAtOrPastMax(valueAtom(), maxAtom());
+    const isDecrementDisabled = () => isControlDisabled() || isAtOrPastMin(valueAtom(), minAtom());
+    const contracts = {
+        getSpinbuttonProps() {
+            const value = valueAtom();
+            return {
+                id: `${idBase}-root`,
+                role: 'spinbutton',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-valuenow': String(value),
+                'aria-valuemin': toNumericString(minAtom()),
+                'aria-valuemax': toNumericString(maxAtom()),
+                'aria-valuetext': options.formatValueText?.(value),
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                'aria-readonly': isReadOnlyAtom() ? 'true' : undefined,
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getIncrementButtonProps() {
+            return {
+                id: `${idBase}-increment`,
+                tabindex: '-1',
+                'aria-label': 'Increment value',
+                'aria-disabled': isIncrementDisabled() ? 'true' : undefined,
+                onClick: increment,
+            };
+        },
+        getDecrementButtonProps() {
+            return {
+                id: `${idBase}-decrement`,
+                tabindex: '-1',
+                'aria-label': 'Decrement value',
+                'aria-disabled': isDecrementDisabled() ? 'true' : undefined,
+                onClick: decrement,
+            };
+        },
+    };
+    const state = {
+        value: valueAtom,
+        min: minAtom,
+        max: maxAtom,
+        step: stepAtom,
+        largeStep: largeStepAtom,
+        isDisabled: isDisabledAtom,
+        isReadOnly: isReadOnlyAtom,
+        hasMin: hasMinComputed,
+        hasMax: hasMaxComputed,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/spinner/index.d.ts

@@ -0,0 +1 @@
+export { createSpinner, type CreateSpinnerOptions, type SpinnerProps, type SpinnerState, type SpinnerActions, type SpinnerContracts, type SpinnerModel, } from './spinner.js';

package/dist/spinner/index.js

@@ -0,0 +1 @@
+export { createSpinner, } from './spinner.js';

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,23 @@
+import { type Atom } from '@reatom/core';
+export interface CreateSpinnerOptions {
+    label?: string;
+}
+export interface SpinnerProps {
+    role: 'progressbar';
+    'aria-label': string;
+}
+export interface SpinnerState {
+    label: Atom<string>;
+}
+export interface SpinnerActions {
+    setLabel(value: string): void;
+}
+export interface SpinnerContracts {
+    getSpinnerProps(): SpinnerProps;
+}
+export interface SpinnerModel {
+    readonly state: SpinnerState;
+    readonly actions: SpinnerActions;
+    readonly contracts: SpinnerContracts;
+}
+export declare function createSpinner(options?: CreateSpinnerOptions): SpinnerModel;

package/dist/spinner/spinner.js

@@ -0,0 +1,25 @@
+import { action, atom } from '@reatom/core';
+export function createSpinner(options = {}) {
+    const labelAtom = atom(options.label ?? 'Loading', 'spinner.label');
+    const actions = {
+        setLabel: action((value) => {
+            labelAtom.set(value);
+        }, 'spinner.setLabel'),
+    };
+    const contracts = {
+        getSpinnerProps() {
+            return {
+                role: 'progressbar',
+                'aria-label': labelAtom(),
+            };
+        },
+    };
+    const state = {
+        label: labelAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/switch/index.d.ts

@@ -0,0 +1,40 @@
+import { type Atom } from '@reatom/core';
+export interface CreateSwitchOptions {
+    idBase?: string;
+    isOn?: boolean;
+    isDisabled?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    onCheckedChange?: (value: boolean) => void;
+}
+export interface SwitchState {
+    isOn: Atom<boolean>;
+    isDisabled: Atom<boolean>;
+}
+export interface SwitchActions {
+    setOn(value: boolean): void;
+    setDisabled(value: boolean): void;
+    toggle(): void;
+    handleClick(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key' | 'preventDefault'>): void;
+}
+export interface SwitchProps {
+    id: string;
+    role: 'switch';
+    tabindex: '0' | '-1';
+    'aria-checked': 'true' | 'false';
+    'aria-disabled': 'true' | 'false';
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key' | 'preventDefault'>) => void;
+}
+export interface SwitchContracts {
+    getSwitchProps(): SwitchProps;
+}
+export interface SwitchModel {
+    readonly state: SwitchState;
+    readonly actions: SwitchActions;
+    readonly contracts: SwitchContracts;
+}
+export declare function createSwitch(options?: CreateSwitchOptions): SwitchModel;

package/dist/switch/index.js

@@ -0,0 +1,61 @@
+import { action, atom } from '@reatom/core';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createSwitch(options = {}) {
+    const idBase = options.idBase ?? 'switch';
+    const isOnAtom = atom(options.isOn ?? false, `${idBase}.isOn`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const setOn = action((value) => {
+        isOnAtom.set(value);
+        options.onCheckedChange?.(value);
+    }, `${idBase}.setOn`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const toggle = action(() => {
+        if (isDisabledAtom())
+            return;
+        setOn(!isOnAtom());
+    }, `${idBase}.toggle`);
+    const handleClick = action(() => {
+        toggle();
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (isDisabledAtom())
+            return;
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            event.preventDefault();
+            toggle();
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setOn,
+        setDisabled,
+        toggle,
+        handleClick,
+        handleKeyDown,
+    };
+    const contracts = {
+        getSwitchProps() {
+            return {
+                id: `${idBase}-root`,
+                role: 'switch',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-checked': isOnAtom() ? 'true' : 'false',
+                'aria-disabled': isDisabledAtom() ? 'true' : 'false',
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+            };
+        },
+    };
+    const state = {
+        isOn: isOnAtom,
+        isDisabled: isDisabledAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/table/index.d.ts

@@ -0,0 +1,117 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type TableSortDirection = 'ascending' | 'descending' | 'none';
+export interface TableColumn {
+    id: string;
+    index?: number;
+}
+export interface TableRow {
+    id: string;
+    index?: number;
+}
+export interface TableKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface CreateTableOptions {
+    columns: readonly TableColumn[];
+    rows: readonly TableRow[];
+    totalColumnCount?: number;
+    totalRowCount?: number;
+    initialSortColumnId?: string | null;
+    initialSortDirection?: TableSortDirection;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    idBase?: string;
+    selectable?: 'single' | 'multi' | false;
+    initialSelectedRowIds?: readonly string[];
+    interactive?: boolean;
+    initialFocusedRowIndex?: number | null;
+    initialFocusedColumnIndex?: number | null;
+    pageSize?: number;
+}
+export interface TableState {
+    rowCount: Computed<number>;
+    columnCount: Computed<number>;
+    sortColumnId: Atom<string | null>;
+    sortDirection: Atom<TableSortDirection>;
+    selectedRowIds: Atom<Set<string>>;
+    focusedRowIndex: Atom<number | null>;
+    focusedColumnIndex: Atom<number | null>;
+    selectable: 'single' | 'multi' | false;
+    interactive: boolean;
+}
+export interface TableActions {
+    sortBy(columnId: string, direction: TableSortDirection): void;
+    clearSort(): void;
+    selectRow(rowId: string): void;
+    deselectRow(rowId: string): void;
+    toggleRowSelection(rowId: string): void;
+    selectAllRows(): void;
+    clearSelection(): void;
+    moveFocus(direction: 'up' | 'down' | 'left' | 'right'): void;
+    moveFocusToStart(): void;
+    moveFocusToEnd(): void;
+    moveFocusToRowStart(): void;
+    moveFocusToRowEnd(): void;
+    setFocusedCell(rowIndex: number, columnIndex: number): void;
+    pageUp(): void;
+    pageDown(): void;
+    handleKeyDown(event: TableKeyboardEventLike): void;
+}
+export interface TableProps {
+    id: string;
+    role: 'table' | 'grid';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-rowcount': number;
+    'aria-colcount': number;
+    'aria-multiselectable'?: 'true';
+    tabindex?: '0';
+}
+export interface TableRowProps {
+    id: string;
+    role: 'row';
+    'aria-rowindex': number;
+    'aria-selected'?: 'true' | 'false';
+}
+export interface TableCellProps {
+    id: string;
+    role: 'cell' | 'gridcell';
+    'aria-colindex': number;
+    'aria-colspan'?: number;
+    'aria-rowspan'?: number;
+    tabindex?: '0' | '-1';
+    'data-active'?: 'true' | 'false';
+}
+export interface TableColumnHeaderProps {
+    id: string;
+    role: 'columnheader';
+    'aria-colindex': number;
+    'aria-sort'?: TableSortDirection;
+    tabindex?: '0' | '-1';
+}
+export interface TableRowHeaderProps {
+    id: string;
+    role: 'rowheader';
+    'aria-rowindex': number;
+    'aria-colindex': number;
+}
+export interface TableContracts {
+    getTableProps(): TableProps;
+    getRowProps(rowId: string): TableRowProps;
+    getCellProps(rowId: string, columnId: string, span?: {
+        colspan?: number;
+        rowspan?: number;
+    }): TableCellProps;
+    getColumnHeaderProps(columnId: string): TableColumnHeaderProps;
+    getRowHeaderProps(rowId: string, columnId: string): TableRowHeaderProps;
+}
+export interface TableModel {
+    readonly state: TableState;
+    readonly actions: TableActions;
+    readonly contracts: TableContracts;
+}
+export declare function createTable(options: CreateTableOptions): TableModel;