@chromvoid/headless-ui 0.1.0

package/dist/menu-button/index.d.ts

@@ -0,0 +1,71 @@
+import { type Atom } from '@reatom/core';
+import { type MenuItem } from '../menu/index.js';
+export interface CreateMenuButtonOptions {
+    items: readonly MenuItem[];
+    idBase?: string;
+    ariaLabel?: string;
+    initialOpen?: boolean;
+    initialActiveId?: string | null;
+    closeOnSelect?: boolean;
+}
+export interface MenuButtonState {
+    isOpen: Atom<boolean>;
+    activeId: Atom<string | null>;
+    restoreTargetId: Atom<string | null>;
+}
+export interface MenuButtonKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface MenuButtonActions {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    select(id: string): void;
+    handleOutsidePointer(): void;
+    handleKeyDown(event: MenuButtonKeyboardEventLike): void;
+}
+export interface MenuButtonTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-haspopup': 'menu';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-label'?: string;
+    onClick: () => void;
+    onKeyDown: (event: MenuButtonKeyboardEventLike) => void;
+}
+export interface MenuButtonMenuProps {
+    id: string;
+    role: 'menu';
+    tabindex: '-1';
+    'aria-label'?: string;
+    hidden: boolean;
+    onKeyDown: (event: MenuButtonKeyboardEventLike) => void;
+}
+export interface MenuButtonItemProps {
+    id: string;
+    role: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+    tabindex: '-1';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    'aria-checked'?: 'true' | 'false';
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: 'true' | 'false';
+    onClick: () => void;
+}
+export interface MenuButtonContracts {
+    getTriggerProps(): MenuButtonTriggerProps;
+    getMenuProps(): MenuButtonMenuProps;
+    getItemProps(id: string): MenuButtonItemProps;
+}
+export interface MenuButtonModel {
+    readonly state: MenuButtonState;
+    readonly actions: MenuButtonActions;
+    readonly contracts: MenuButtonContracts;
+}
+export declare function createMenuButton(options: CreateMenuButtonOptions): MenuButtonModel;

package/dist/menu-button/index.js

@@ -0,0 +1,121 @@
+import { action, atom } from '@reatom/core';
+import { createMenu } from '../menu/index.js';
+const withModifierDefaults = (event) => ({
+    key: event.key,
+    shiftKey: event.shiftKey ?? false,
+    ctrlKey: event.ctrlKey ?? false,
+    metaKey: event.metaKey ?? false,
+    altKey: event.altKey ?? false,
+});
+export function createMenuButton(options) {
+    const idBase = options.idBase ?? 'menu-button';
+    const menu = createMenu({
+        idBase,
+        items: options.items,
+        ariaLabel: options.ariaLabel,
+        initialOpen: options.initialOpen,
+        initialActiveId: options.initialActiveId,
+        closeOnSelect: options.closeOnSelect,
+    });
+    const restoreTargetIdAtom = atom(null, `${idBase}.restoreTargetId`);
+    const closeInternal = (reason) => {
+        menu.actions.close();
+        if (reason === 'escape' || reason === 'select') {
+            restoreTargetIdAtom.set(`${idBase}-trigger`);
+            return;
+        }
+        restoreTargetIdAtom.set(null);
+    };
+    const open = action(() => {
+        menu.actions.open('programmatic');
+        restoreTargetIdAtom.set(null);
+    }, `${idBase}.open`);
+    const close = action(() => {
+        closeInternal('programmatic');
+    }, `${idBase}.close`);
+    const toggle = action(() => {
+        if (menu.state.isOpen()) {
+            closeInternal('programmatic');
+            return;
+        }
+        menu.actions.toggle('pointer');
+        restoreTargetIdAtom.set(null);
+    }, `${idBase}.toggle`);
+    const select = action((id) => {
+        const wasOpen = menu.state.isOpen();
+        menu.actions.select(id);
+        if (wasOpen && !menu.state.isOpen()) {
+            restoreTargetIdAtom.set(`${idBase}-trigger`);
+        }
+    }, `${idBase}.select`);
+    const handleOutsidePointer = action(() => {
+        if (!menu.state.isOpen())
+            return;
+        closeInternal('outside-pointer');
+    }, `${idBase}.handleOutsidePointer`);
+    const handleKeyDown = action((event) => {
+        if (!menu.state.isOpen()) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                menu.actions.open('keyboard');
+                menu.actions.moveFirst();
+                restoreTargetIdAtom.set(null);
+                return;
+            }
+            menu.actions.handleTriggerKeyDown({ key: event.key });
+            return;
+        }
+        if (event.key === 'Escape') {
+            closeInternal('escape');
+            return;
+        }
+        if (event.key === 'Tab') {
+            closeInternal('tab');
+            return;
+        }
+        menu.actions.handleMenuKeyDown(withModifierDefaults(event));
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        open,
+        close,
+        toggle,
+        select,
+        handleOutsidePointer,
+        handleKeyDown,
+    };
+    const contracts = {
+        getTriggerProps() {
+            const trigger = menu.contracts.getTriggerProps();
+            return {
+                ...trigger,
+                role: 'button',
+                onClick: toggle,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getMenuProps() {
+            const menuProps = menu.contracts.getMenuProps();
+            return {
+                ...menuProps,
+                hidden: !menu.state.isOpen(),
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getItemProps(id) {
+            const item = menu.contracts.getItemProps(id);
+            return {
+                ...item,
+                onClick: () => select(id),
+            };
+        },
+    };
+    const state = {
+        isOpen: menu.state.isOpen,
+        activeId: menu.state.activeId,
+        restoreTargetId: restoreTargetIdAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/meter/index.d.ts

@@ -0,0 +1,45 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type MeterStatus = 'low' | 'high' | 'optimum' | 'normal';
+export interface CreateMeterOptions {
+    idBase?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    low?: number;
+    high?: number;
+    optimum?: number;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    formatValueText?: (value: number) => string;
+}
+export interface MeterState {
+    value: Atom<number>;
+    min: Atom<number>;
+    max: Atom<number>;
+    percentage: Computed<number>;
+    status: Computed<MeterStatus>;
+}
+export interface MeterActions {
+    setValue(value: number): void;
+}
+export interface MeterProps {
+    id: string;
+    role: 'meter';
+    'aria-valuenow': string;
+    'aria-valuemin': string;
+    'aria-valuemax': string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface MeterContracts {
+    getMeterProps(): MeterProps;
+}
+export interface MeterModel {
+    readonly state: MeterState;
+    readonly actions: MeterActions;
+    readonly contracts: MeterContracts;
+}
+export declare function createMeter(options?: CreateMeterOptions): MeterModel;

package/dist/meter/index.js

@@ -0,0 +1,106 @@
+import { action, atom, computed } from '@reatom/core';
+const clamp = (value, min, max) => {
+    if (value < min)
+        return min;
+    if (value > max)
+        return max;
+    return value;
+};
+const normalizeThresholds = (min, max, low, high, optimum) => {
+    let normalizedLow = null;
+    let normalizedHigh = null;
+    let normalizedOptimum = null;
+    if (low != null && Number.isFinite(low)) {
+        normalizedLow = clamp(low, min, max);
+    }
+    if (high != null && Number.isFinite(high)) {
+        normalizedHigh = clamp(high, min, max);
+    }
+    if (normalizedLow != null && normalizedHigh != null && normalizedLow > normalizedHigh) {
+        const low = normalizedLow;
+        normalizedLow = normalizedHigh;
+        normalizedHigh = low;
+    }
+    if (optimum != null && Number.isFinite(optimum)) {
+        normalizedOptimum = clamp(optimum, min, max);
+    }
+    return { low: normalizedLow, high: normalizedHigh, optimum: normalizedOptimum };
+};
+const getMeterStatus = (value, low, high, optimum) => {
+    if (low == null && high == null)
+        return 'normal';
+    const isInLowRegion = low != null && value < low;
+    const isInHighRegion = high != null && value > high;
+    if (optimum != null) {
+        const optimumInLow = low != null && optimum < low;
+        const optimumInHigh = high != null && optimum > high;
+        const optimumInNormal = !optimumInLow && !optimumInHigh;
+        if (optimumInLow && isInLowRegion)
+            return 'optimum';
+        if (optimumInHigh && isInHighRegion)
+            return 'optimum';
+        if (optimumInNormal && !isInLowRegion && !isInHighRegion)
+            return 'optimum';
+    }
+    if (isInLowRegion)
+        return 'low';
+    if (isInHighRegion)
+        return 'high';
+    return 'normal';
+};
+export function createMeter(options = {}) {
+    const idBase = options.idBase ?? 'meter';
+    const rawMin = options.min ?? 0;
+    const rawMax = options.max ?? 100;
+    const minVal = Math.min(rawMin, rawMax);
+    const maxVal = Math.max(rawMin, rawMax);
+    const minAtom = atom(minVal, `${idBase}.min`);
+    const maxAtom = atom(maxVal, `${idBase}.max`);
+    const valueAtom = atom(clamp(options.value ?? minVal, minVal, maxVal), `${idBase}.value`);
+    const thresholds = normalizeThresholds(minVal, maxVal, options.low, options.high, options.optimum);
+    const percentageAtom = computed(() => {
+        const min = minAtom();
+        const max = maxAtom();
+        const span = max - min;
+        if (span <= 0)
+            return 0;
+        const clamped = clamp(valueAtom(), min, max);
+        return Number((((clamped - min) / span) * 100).toFixed(4));
+    }, `${idBase}.percentage`);
+    const statusAtom = computed(() => {
+        return getMeterStatus(valueAtom(), thresholds.low, thresholds.high, thresholds.optimum);
+    }, `${idBase}.status`);
+    const actions = {
+        setValue: action((value) => {
+            valueAtom.set(clamp(value, minAtom(), maxAtom()));
+        }, `${idBase}.setValue`),
+    };
+    const contracts = {
+        getMeterProps() {
+            const value = valueAtom();
+            return {
+                id: `${idBase}-root`,
+                role: 'meter',
+                'aria-valuenow': String(value),
+                'aria-valuemin': String(minAtom()),
+                'aria-valuemax': String(maxAtom()),
+                'aria-valuetext': options.formatValueText?.(value),
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-describedby': options.ariaDescribedBy,
+            };
+        },
+    };
+    const state = {
+        value: valueAtom,
+        min: minAtom,
+        max: maxAtom,
+        percentage: percentageAtom,
+        status: statusAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/number/index.d.ts

@@ -0,0 +1,113 @@
+import { type Atom } from '@reatom/core';
+export type NumberKeyboardEventLike = Pick<KeyboardEvent, 'key'> & {
+    preventDefault?: () => void;
+};
+export interface CreateNumberOptions {
+    idBase?: string;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    stepper?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    formatValueText?: (value: number) => string;
+    onValueChange?: (value: number) => void;
+    onClear?: () => void;
+}
+export interface NumberState {
+    value: Atom<number>;
+    min: Atom<number | undefined>;
+    max: Atom<number | undefined>;
+    step: Atom<number>;
+    largeStep: Atom<number>;
+    isDisabled: Atom<boolean>;
+    isReadOnly: Atom<boolean>;
+    hasMin(): boolean;
+    hasMax(): boolean;
+    focused: Atom<boolean>;
+    filled(): boolean;
+    clearable: Atom<boolean>;
+    showClearButton(): boolean;
+    stepper: Atom<boolean>;
+    draftText: Atom<string | null>;
+    placeholder: Atom<string>;
+    required: Atom<boolean>;
+    defaultValue: Atom<number>;
+}
+export interface NumberActions {
+    setValue(value: number): void;
+    increment(): void;
+    decrement(): void;
+    incrementLarge(): void;
+    decrementLarge(): void;
+    setFirst(): void;
+    setLast(): void;
+    handleKeyDown(event: NumberKeyboardEventLike): void;
+    setDisabled(v: boolean): void;
+    setReadOnly(v: boolean): void;
+    setRequired(v: boolean): void;
+    setClearable(v: boolean): void;
+    setStepper(v: boolean): void;
+    setFocused(v: boolean): void;
+    setPlaceholder(v: string): void;
+    setDraftText(v: string | null): void;
+    commitDraft(): void;
+    clear(): void;
+    handleInput(text: string): void;
+}
+export interface NumberInputProps {
+    id: string;
+    role: 'spinbutton';
+    tabindex: '0' | '-1';
+    inputmode: 'decimal';
+    'aria-valuenow': string;
+    'aria-valuemin'?: string;
+    'aria-valuemax'?: string;
+    'aria-valuetext'?: string;
+    'aria-disabled'?: 'true';
+    'aria-readonly'?: 'true';
+    'aria-required'?: 'true';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    placeholder?: string;
+    autocomplete: 'off';
+}
+export interface NumberButtonProps {
+    id: string;
+    tabindex: '-1';
+    'aria-label': string;
+    'aria-disabled'?: 'true';
+    hidden?: true;
+    'aria-hidden'?: 'true';
+    onClick: () => void;
+}
+export interface NumberClearButtonProps {
+    role: 'button';
+    'aria-label': string;
+    tabindex: '-1';
+    hidden?: true;
+    'aria-hidden'?: 'true';
+    onClick: () => void;
+}
+export interface NumberContracts {
+    getInputProps(): NumberInputProps;
+    getIncrementButtonProps(): NumberButtonProps;
+    getDecrementButtonProps(): NumberButtonProps;
+    getClearButtonProps(): NumberClearButtonProps;
+}
+export interface NumberModel {
+    readonly state: NumberState;
+    readonly actions: NumberActions;
+    readonly contracts: NumberContracts;
+}
+export declare function createNumber(options?: CreateNumberOptions): NumberModel;