@chromvoid/headless-ui 0.1.0

package/dist/copy-button/index.js

@@ -0,0 +1,183 @@
+import { action, atom, computed } from '@reatom/core';
+const clampDuration = (v) => Math.max(0, v);
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+const STATUS_TO_ICON = {
+    idle: 'copy',
+    success: 'success',
+    error: 'error',
+};
+export function createCopyButton(options = {}) {
+    const clipboard = options.clipboard ?? navigator.clipboard;
+    const statusAtom = atom('idle', 'copyButton.status');
+    const isDisabledAtom = atom(options.isDisabled ?? false, 'copyButton.isDisabled');
+    const isCopyingAtom = atom(false, 'copyButton.isCopying');
+    const feedbackDurationAtom = atom(clampDuration(options.feedbackDuration ?? 1500), 'copyButton.feedbackDuration');
+    const valueBoxAtom = atom({ ref: options.value ?? '' }, 'copyButton.value');
+    const valueAccessor = () => valueBoxAtom().ref;
+    valueAccessor.set = (v) => valueBoxAtom.set({ ref: v });
+    const valueAtom = valueAccessor;
+    const isIdleAtom = computed(() => statusAtom() === 'idle', 'copyButton.isIdle');
+    const isSuccessAtom = computed(() => statusAtom() === 'success', 'copyButton.isSuccess');
+    const isErrorAtom = computed(() => statusAtom() === 'error', 'copyButton.isError');
+    const isUnavailableAtom = computed(() => isDisabledAtom() || isCopyingAtom(), 'copyButton.isUnavailable');
+    let revertTimer = null;
+    let copyVersion = 0;
+    const clearRevertTimer = () => {
+        if (revertTimer !== null) {
+            clearTimeout(revertTimer);
+            revertTimer = null;
+        }
+    };
+    const scheduleRevert = (version) => {
+        clearRevertTimer();
+        revertTimer = setTimeout(() => {
+            revertTimer = null;
+            if (copyVersion === version) {
+                statusAtom.set('idle');
+            }
+        }, feedbackDurationAtom());
+    };
+    const copy = async () => {
+        if (isUnavailableAtom())
+            return;
+        const version = ++copyVersion;
+        isCopyingAtom.set(true);
+        clearRevertTimer();
+        let resolvedValue;
+        try {
+            const currentValue = valueAtom();
+            if (typeof currentValue === 'function') {
+                resolvedValue = await currentValue();
+            }
+            else {
+                resolvedValue = currentValue;
+            }
+        }
+        catch (err) {
+            isCopyingAtom.set(false);
+            if (copyVersion !== version)
+                return;
+            statusAtom.set('error');
+            options.onError?.(err);
+            scheduleRevert(version);
+            return;
+        }
+        try {
+            await clipboard.writeText(resolvedValue);
+            isCopyingAtom.set(false);
+            if (copyVersion !== version)
+                return;
+            statusAtom.set('success');
+            options.onCopy?.(resolvedValue);
+        }
+        catch (err) {
+            isCopyingAtom.set(false);
+            if (copyVersion !== version)
+                return;
+            statusAtom.set('error');
+            options.onError?.(err);
+        }
+        scheduleRevert(version);
+    };
+    const setDisabled = action((v) => {
+        isDisabledAtom.set(v);
+    }, 'copyButton.setDisabled');
+    const setFeedbackDuration = action((v) => {
+        feedbackDurationAtom.set(clampDuration(v));
+    }, 'copyButton.setFeedbackDuration');
+    const setValue = action((v) => {
+        valueAtom.set(v);
+    }, 'copyButton.setValue');
+    const reset = action(() => {
+        ++copyVersion;
+        clearRevertTimer();
+        isCopyingAtom.set(false);
+        statusAtom.set('idle');
+    }, 'copyButton.reset');
+    const getButtonProps = () => {
+        const unavailable = isUnavailableAtom();
+        const status = statusAtom();
+        let ariaLabel;
+        if (options.ariaLabel != null) {
+            if (status === 'idle') {
+                ariaLabel = options.ariaLabel;
+            }
+            else if (status === 'success') {
+                ariaLabel = 'Copied';
+            }
+            else {
+                ariaLabel = 'Copy failed';
+            }
+        }
+        const props = {
+            role: 'button',
+            tabindex: unavailable ? '-1' : '0',
+            'aria-disabled': unavailable ? 'true' : 'false',
+            onClick: (_e) => {
+                copy();
+            },
+            onKeyDown: (e) => {
+                if (isUnavailableAtom()) {
+                    return;
+                }
+                if (e.key === 'Enter') {
+                    copy();
+                    return;
+                }
+                if (isSpaceKey(e.key)) {
+                    e.preventDefault();
+                }
+            },
+            onKeyUp: (e) => {
+                if (isUnavailableAtom())
+                    return;
+                if (isSpaceKey(e.key)) {
+                    copy();
+                }
+            },
+        };
+        if (ariaLabel !== undefined) {
+            props['aria-label'] = ariaLabel;
+        }
+        return props;
+    };
+    const getStatusProps = () => ({
+        role: 'status',
+        'aria-live': 'polite',
+        'aria-atomic': 'true',
+    });
+    const getIconContainerProps = (which) => {
+        const activeIcon = STATUS_TO_ICON[statusAtom()];
+        const props = {
+            'aria-hidden': 'true',
+        };
+        if (which !== activeIcon) {
+            props.hidden = true;
+        }
+        return props;
+    };
+    const state = {
+        status: statusAtom,
+        isDisabled: isDisabledAtom,
+        isCopying: isCopyingAtom,
+        feedbackDuration: feedbackDurationAtom,
+        value: valueAtom,
+        isIdle: isIdleAtom,
+        isSuccess: isSuccessAtom,
+        isError: isErrorAtom,
+        isUnavailable: isUnavailableAtom,
+    };
+    const actions = {
+        copy,
+        setDisabled,
+        setFeedbackDuration,
+        setValue,
+        reset,
+    };
+    const contracts = {
+        getButtonProps,
+        getStatusProps,
+        getIconContainerProps,
+    };
+    return { state, actions, contracts };
+}

package/dist/core/index.d.ts

@@ -0,0 +1,20 @@
+import type { Atom } from '@reatom/core';
+export type HeadlessId = string;
+export interface HeadlessState {
+    activeId: Atom<HeadlessId | null>;
+    selectedIds: Atom<HeadlessId[]>;
+    isOpen: Atom<boolean>;
+}
+export interface HeadlessApi {
+    open(): void;
+    close(): void;
+    setActive(id: HeadlessId | null): void;
+    toggleSelected(id: HeadlessId): void;
+    clearSelected(): void;
+}
+export interface HeadlessModel {
+    readonly state: HeadlessState;
+    readonly api: HeadlessApi;
+}
+export * from './selection.js';
+export * from './value-range.js';

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export * from './selection.js';
+export * from './value-range.js';

package/dist/core/selection.d.ts

@@ -0,0 +1,5 @@
+export type SelectionMode = 'single' | 'multiple';
+export declare const normalizeSelection: (ids: readonly string[], allowedIds: ReadonlySet<string>, mode: SelectionMode) => string[];
+export declare const toggleSelection: (selectedIds: readonly string[], id: string, mode: SelectionMode, allowedIds: ReadonlySet<string>) => string[];
+export declare const selectOnly: (id: string, allowedIds: ReadonlySet<string>) => string[];
+export declare const selectRangeByOrder: (orderedIds: readonly string[], fromId: string, toId: string) => string[];

package/dist/core/selection.js

@@ -0,0 +1,39 @@
+export const normalizeSelection = (ids, allowedIds, mode) => {
+    const filtered = ids.filter((id) => allowedIds.has(id));
+    if (mode === 'single') {
+        return filtered.slice(0, 1);
+    }
+    return [...new Set(filtered)];
+};
+export const toggleSelection = (selectedIds, id, mode, allowedIds) => {
+    if (!allowedIds.has(id)) {
+        return [...selectedIds];
+    }
+    if (mode === 'single') {
+        return [id];
+    }
+    const selected = new Set(selectedIds);
+    if (selected.has(id)) {
+        selected.delete(id);
+    }
+    else {
+        selected.add(id);
+    }
+    return [...selected];
+};
+export const selectOnly = (id, allowedIds) => {
+    if (!allowedIds.has(id)) {
+        return [];
+    }
+    return [id];
+};
+export const selectRangeByOrder = (orderedIds, fromId, toId) => {
+    const fromIndex = orderedIds.indexOf(fromId);
+    const toIndex = orderedIds.indexOf(toId);
+    if (fromIndex < 0 || toIndex < 0) {
+        return [];
+    }
+    const start = Math.min(fromIndex, toIndex);
+    const end = Math.max(fromIndex, toIndex);
+    return orderedIds.slice(start, end + 1);
+};

package/dist/core/value-range.d.ts

@@ -0,0 +1,49 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface ValueRangeInput {
+    min: number;
+    max: number;
+    step?: number;
+    largeStep?: number;
+}
+export interface ValueRangeConfig {
+    min: number;
+    max: number;
+    step: number;
+    largeStep: number;
+}
+export interface CreateValueRangeOptions extends ValueRangeInput {
+    idBase?: string;
+    initialValue?: number;
+}
+export interface ValueRangeState {
+    value: Atom<number>;
+    min: Atom<number>;
+    max: Atom<number>;
+    step: Atom<number>;
+    largeStep: Atom<number>;
+    percentage: Computed<number>;
+}
+export interface ValueRangeActions {
+    setValue(value: number): void;
+    increment(): void;
+    decrement(): void;
+    incrementLarge(): void;
+    decrementLarge(): void;
+    setFirst(): void;
+    setLast(): void;
+}
+export interface ValueRangeModel {
+    readonly state: ValueRangeState;
+    readonly actions: ValueRangeActions;
+}
+export declare const normalizeValueRange: ({ min, max, step, largeStep }: ValueRangeInput) => ValueRangeConfig;
+export declare const clampValue: (value: number, min: number, max: number) => number;
+export declare const snapValueToStep: (value: number, range: ValueRangeConfig) => number;
+export declare const constrainValueToRange: (value: number, range: ValueRangeConfig) => number;
+export declare const calculateValueRangePercentage: (value: number, min: number, max: number) => number;
+export declare const incrementValue: (value: number, range: ValueRangeConfig) => number;
+export declare const decrementValue: (value: number, range: ValueRangeConfig) => number;
+export declare const incrementValueLarge: (value: number, range: ValueRangeConfig) => number;
+export declare const decrementValueLarge: (value: number, range: ValueRangeConfig) => number;
+export declare const valuesEqualWithinStep: (left: number, right: number) => boolean;
+export declare function createValueRange(options: CreateValueRangeOptions): ValueRangeModel;

package/dist/core/value-range.js

@@ -0,0 +1,134 @@
+import { action, atom, computed } from '@reatom/core';
+const EPSILON = 1e-9;
+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 sanitizeStep = (value, fallback) => {
+    if (value == null || !Number.isFinite(value) || value <= 0) {
+        return fallback;
+    }
+    return value;
+};
+export const normalizeValueRange = ({ min, max, step, largeStep }) => {
+    const normalizedMin = Math.min(min, max);
+    const normalizedMax = Math.max(min, max);
+    const normalizedStep = sanitizeStep(step, 1);
+    const range = normalizedMax - normalizedMin;
+    const defaultLargeStep = Math.max(normalizedStep, range / 10);
+    return {
+        min: normalizedMin,
+        max: normalizedMax,
+        step: normalizedStep,
+        largeStep: sanitizeStep(largeStep, defaultLargeStep),
+    };
+};
+export const clampValue = (value, min, max) => {
+    const normalizedMin = Math.min(min, max);
+    const normalizedMax = Math.max(min, max);
+    if (value < normalizedMin)
+        return normalizedMin;
+    if (value > normalizedMax)
+        return normalizedMax;
+    return value;
+};
+export const snapValueToStep = (value, range) => {
+    const clamped = clampValue(value, range.min, range.max);
+    const offset = (clamped - range.min) / range.step;
+    const snapped = range.min + Math.round(offset) * range.step;
+    const precision = Math.max(decimalPlaces(range.min), decimalPlaces(range.step));
+    return clampValue(normalizePrecision(snapped, precision + 2), range.min, range.max);
+};
+export const constrainValueToRange = (value, range) => snapValueToStep(value, range);
+export const calculateValueRangePercentage = (value, min, max) => {
+    const normalizedMin = Math.min(min, max);
+    const normalizedMax = Math.max(min, max);
+    const span = normalizedMax - normalizedMin;
+    if (span <= EPSILON) {
+        return 0;
+    }
+    const clamped = clampValue(value, normalizedMin, normalizedMax);
+    return normalizePrecision(((clamped - normalizedMin) / span) * 100, 4);
+};
+export const incrementValue = (value, range) => {
+    const next = snapValueToStep(value, range) + range.step;
+    return snapValueToStep(next, range);
+};
+export const decrementValue = (value, range) => {
+    const next = snapValueToStep(value, range) - range.step;
+    return snapValueToStep(next, range);
+};
+export const incrementValueLarge = (value, range) => {
+    const next = snapValueToStep(value, range) + range.largeStep;
+    return snapValueToStep(next, range);
+};
+export const decrementValueLarge = (value, range) => {
+    const next = snapValueToStep(value, range) - range.largeStep;
+    return snapValueToStep(next, range);
+};
+export const valuesEqualWithinStep = (left, right) => Math.abs(left - right) <= EPSILON;
+export function createValueRange(options) {
+    const idBase = options.idBase ?? 'value-range';
+    const initialRange = normalizeValueRange(options);
+    const minAtom = atom(initialRange.min, `${idBase}.min`);
+    const maxAtom = atom(initialRange.max, `${idBase}.max`);
+    const stepAtom = atom(initialRange.step, `${idBase}.step`);
+    const largeStepAtom = atom(initialRange.largeStep, `${idBase}.largeStep`);
+    const getRange = () => ({
+        min: minAtom(),
+        max: maxAtom(),
+        step: stepAtom(),
+        largeStep: largeStepAtom(),
+    });
+    const valueAtom = atom(constrainValueToRange(options.initialValue ?? initialRange.min, getRange()), `${idBase}.value`);
+    const percentageAtom = computed(() => calculateValueRangePercentage(valueAtom(), minAtom(), maxAtom()), `${idBase}.percentage`);
+    const setValue = action((value) => {
+        valueAtom.set(constrainValueToRange(value, getRange()));
+    }, `${idBase}.setValue`);
+    const increment = action(() => {
+        valueAtom.set(incrementValue(valueAtom(), getRange()));
+    }, `${idBase}.increment`);
+    const decrement = action(() => {
+        valueAtom.set(decrementValue(valueAtom(), getRange()));
+    }, `${idBase}.decrement`);
+    const incrementLarge = action(() => {
+        valueAtom.set(incrementValueLarge(valueAtom(), getRange()));
+    }, `${idBase}.incrementLarge`);
+    const decrementLarge = action(() => {
+        valueAtom.set(decrementValueLarge(valueAtom(), getRange()));
+    }, `${idBase}.decrementLarge`);
+    const setFirst = action(() => {
+        valueAtom.set(minAtom());
+    }, `${idBase}.setFirst`);
+    const setLast = action(() => {
+        valueAtom.set(maxAtom());
+    }, `${idBase}.setLast`);
+    const actions = {
+        setValue,
+        increment,
+        decrement,
+        incrementLarge,
+        decrementLarge,
+        setFirst,
+        setLast,
+    };
+    return {
+        state: {
+            value: valueAtom,
+            min: minAtom,
+            max: maxAtom,
+            step: stepAtom,
+            largeStep: largeStepAtom,
+            percentage: percentageAtom,
+        },
+        actions,
+    };
+}

package/dist/date-picker/index.d.ts

@@ -0,0 +1,210 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type DatePickerTimeZone = 'local' | 'utc';
+export interface ParsedDateTime {
+    date: string;
+    time: string;
+    full: string;
+}
+export interface CalendarDay {
+    date: string;
+    month: 'prev' | 'current' | 'next';
+    inRange: boolean;
+    isToday: boolean;
+    disabled: boolean;
+}
+export interface CreateDatePickerOptions {
+    idBase?: string;
+    value?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    locale?: string;
+    timeZone?: DatePickerTimeZone;
+    min?: string | null;
+    max?: string | null;
+    minuteStep?: number;
+    hourCycle?: 12 | 24;
+    closeOnEscape?: boolean;
+    ariaLabel?: string;
+    parseDateTime?: (value: string, locale: string) => ParsedDateTime | null;
+    formatDateTime?: (value: ParsedDateTime, locale: string) => string;
+    onInput?: (value: string) => void;
+    onCommit?: (value: string | null) => void;
+    onClear?: () => void;
+}
+export type DatePickerKeyboardEventLike = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'ctrlKey' | 'metaKey' | 'altKey' | 'preventDefault'>;
+export interface DatePickerState {
+    inputValue: Atom<string>;
+    isOpen: Atom<boolean>;
+    focusedDate: Atom<string | null>;
+    committedDate: Atom<string | null>;
+    committedTime: Atom<string | null>;
+    draftDate: Atom<string | null>;
+    draftTime: Atom<string | null>;
+    displayedYear: Atom<number>;
+    displayedMonth: Atom<number>;
+    isInputFocused: Atom<boolean>;
+    isCalendarFocused: Atom<boolean>;
+    disabled: Atom<boolean>;
+    readonly: Atom<boolean>;
+    required: Atom<boolean>;
+    placeholder: Atom<string>;
+    locale: Atom<string>;
+    timeZone: Atom<DatePickerTimeZone>;
+    min: Atom<string | null>;
+    max: Atom<string | null>;
+    minuteStep: Atom<number>;
+    hourCycle: Atom<12 | 24>;
+    isDualCommit: Computed<boolean>;
+    hasCommittedSelection: Computed<boolean>;
+    hasDraftSelection: Computed<boolean>;
+    committedValue: Computed<string | null>;
+    draftValue: Computed<string | null>;
+    parsedValue: Computed<ParsedDateTime | null>;
+    canCommitInput: Computed<boolean>;
+    inputInvalid: Computed<boolean>;
+    visibleDays: Computed<CalendarDay[]>;
+    today: Computed<string>;
+    selectedCellId: Computed<string | null>;
+}
+export interface DatePickerActions {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    setInputValue(value: string): void;
+    commitInput(): void;
+    clear(): void;
+    setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
+    setRequired(value: boolean): void;
+    setPlaceholder(value: string): void;
+    setLocale(value: string): void;
+    setTimeZone(value: DatePickerTimeZone): void;
+    setMin(value: string | null): void;
+    setMax(value: string | null): void;
+    setMinuteStep(value: number): void;
+    setHourCycle(value: 12 | 24): void;
+    setDisplayedMonth(year: number, month: number): void;
+    moveMonth(offset: -1 | 1): void;
+    moveYear(offset: -1 | 1): void;
+    setFocusedDate(date: string | null): void;
+    moveFocusPreviousDay(): void;
+    moveFocusNextDay(): void;
+    moveFocusPreviousWeek(): void;
+    moveFocusNextWeek(): void;
+    selectDraftDate(date: string): void;
+    setDraftTime(time: string): void;
+    jumpToNow(): void;
+    commitDraft(): void;
+    cancelDraft(): void;
+    handleInputKeyDown(event: DatePickerKeyboardEventLike): void;
+    handleDialogKeyDown(event: DatePickerKeyboardEventLike): void;
+    handleCalendarKeyDown(event: DatePickerKeyboardEventLike): void;
+    handleTimeKeyDown(event: DatePickerKeyboardEventLike): void;
+    handleOutsidePointer(): void;
+}
+export interface DatePickerInputProps {
+    id: string;
+    role: 'combobox';
+    tabindex: '0';
+    autocomplete: 'off';
+    disabled: boolean;
+    readonly?: true;
+    required?: true;
+    value: string;
+    placeholder: string;
+    'aria-haspopup': 'dialog';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-activedescendant'?: string;
+    'aria-invalid'?: 'true';
+    'aria-label'?: string;
+    onInput: (value: string) => void;
+    onKeyDown: (event: DatePickerKeyboardEventLike) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+export interface DatePickerDialogProps {
+    id: string;
+    role: 'dialog';
+    tabindex: '-1';
+    hidden: boolean;
+    'aria-modal': 'true';
+    'aria-label': string;
+    onKeyDown: (event: DatePickerKeyboardEventLike) => void;
+    onPointerDownOutside: () => void;
+}
+export interface DatePickerCalendarGridProps {
+    id: string;
+    role: 'grid';
+    tabindex: '-1';
+    'aria-label': string;
+    onKeyDown: (event: DatePickerKeyboardEventLike) => void;
+}
+export interface DatePickerCalendarDayProps {
+    id: string;
+    role: 'gridcell';
+    tabindex: '0' | '-1';
+    'aria-selected': 'true' | 'false';
+    'aria-disabled'?: 'true';
+    'aria-current'?: 'date';
+    'data-date': string;
+    onClick: () => void;
+    onMouseEnter: () => void;
+}
+export interface DatePickerMonthNavButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': 'Previous month' | 'Next month';
+    onClick: () => void;
+}
+export interface DatePickerYearNavButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': 'Previous year' | 'Next year';
+    onClick: () => void;
+}
+export interface DatePickerTimeSegmentProps {
+    id: string;
+    type: 'text';
+    inputmode: 'numeric';
+    'aria-label': string;
+    value: string;
+    minlength: '2';
+    maxlength: '2';
+    disabled: boolean;
+    readonly: boolean;
+    onInput: (value: string) => void;
+    onKeyDown: (event: DatePickerKeyboardEventLike) => void;
+}
+export interface DatePickerButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': string;
+    disabled: boolean;
+    onClick: () => void;
+}
+export interface DatePickerContracts {
+    getInputProps(): DatePickerInputProps;
+    getDialogProps(): DatePickerDialogProps;
+    getCalendarGridProps(): DatePickerCalendarGridProps;
+    getCalendarDayProps(date: string): DatePickerCalendarDayProps;
+    getMonthNavButtonProps(direction: 'prev' | 'next'): DatePickerMonthNavButtonProps;
+    getYearNavButtonProps(direction: 'prev' | 'next'): DatePickerYearNavButtonProps;
+    getHourInputProps(): DatePickerTimeSegmentProps;
+    getMinuteInputProps(): DatePickerTimeSegmentProps;
+    getApplyButtonProps(): DatePickerButtonProps;
+    getCancelButtonProps(): DatePickerButtonProps;
+    getClearButtonProps(): DatePickerButtonProps;
+    getVisibleDays(): readonly CalendarDay[];
+}
+export interface DatePickerModel {
+    readonly state: DatePickerState;
+    readonly actions: DatePickerActions;
+    readonly contracts: DatePickerContracts;
+}
+export declare function createDatePicker(options?: CreateDatePickerOptions): DatePickerModel;