@chromvoid/headless-ui 0.1.0

package/dist/alert-dialog/index.js

@@ -0,0 +1,94 @@
+import { action } from '@reatom/core';
+import { createDialog } from '../dialog/index.js';
+export function createAlertDialog(options = {}) {
+    const idBase = options.idBase ?? 'alert-dialog';
+    const cancelButtonId = `${idBase}-cancel`;
+    const dialog = createDialog({
+        idBase,
+        initialOpen: options.initialOpen,
+        isModal: true,
+        closeOnEscape: options.closeOnEscape,
+        closeOnOutsidePointer: options.closeOnOutsidePointer,
+        closeOnOutsideFocus: options.closeOnOutsideFocus,
+        initialFocusId: options.initialFocusId ?? cancelButtonId,
+        ariaLabelledBy: options.ariaLabelledBy,
+        ariaDescribedBy: options.ariaDescribedBy,
+    });
+    if (options.triggerId != null) {
+        dialog.actions.setTriggerId(options.triggerId);
+    }
+    const open = action(() => {
+        dialog.actions.open('programmatic');
+    }, `${idBase}.open`);
+    const close = action(() => {
+        dialog.actions.close('programmatic');
+    }, `${idBase}.close`);
+    const handleKeyDown = action((event) => {
+        dialog.actions.handleKeyDown(event);
+    }, `${idBase}.handleKeyDown`);
+    const handleCancel = action(() => {
+        options.onCancel?.();
+        close();
+    }, `${idBase}.cancel`);
+    const handleAction = action(() => {
+        options.onAction?.();
+        if (options.closeOnAction !== false) {
+            close();
+        }
+    }, `${idBase}.action`);
+    const actions = {
+        open,
+        close,
+        handleKeyDown,
+    };
+    const contracts = {
+        getDialogProps() {
+            const content = dialog.contracts.getContentProps();
+            const labelledBy = content['aria-labelledby'] ?? `${idBase}-title`;
+            const describedBy = content['aria-describedby'] ?? `${idBase}-description`;
+            return {
+                ...content,
+                role: 'alertdialog',
+                'aria-modal': 'true',
+                'aria-labelledby': labelledBy,
+                'aria-describedby': describedBy,
+            };
+        },
+        getOverlayProps() {
+            return dialog.contracts.getOverlayProps();
+        },
+        getTitleProps() {
+            return dialog.contracts.getTitleProps();
+        },
+        getDescriptionProps() {
+            return dialog.contracts.getDescriptionProps();
+        },
+        getCancelButtonProps() {
+            return {
+                id: cancelButtonId,
+                role: 'button',
+                tabindex: '0',
+                onClick: handleCancel,
+            };
+        },
+        getActionButtonProps() {
+            return {
+                id: `${idBase}-action`,
+                role: 'button',
+                tabindex: '0',
+                onClick: handleAction,
+            };
+        },
+    };
+    const state = {
+        isOpen: dialog.state.isOpen,
+        restoreTargetId: dialog.state.restoreTargetId,
+        isFocusTrapped: dialog.state.isFocusTrapped,
+        initialFocusTargetId: dialog.state.initialFocusTargetId,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/badge/index.d.ts

@@ -0,0 +1,48 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type BadgeVariant = 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
+export type BadgeSize = 'small' | 'medium' | 'large';
+export interface CreateBadgeOptions {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    pulse?: boolean;
+    pill?: boolean;
+    isDynamic?: boolean;
+    isDecorative?: boolean;
+    ariaLabel?: string;
+}
+export interface BadgeState {
+    variant: Atom<BadgeVariant>;
+    size: Atom<BadgeSize>;
+    dot: Atom<boolean>;
+    pulse: Atom<boolean>;
+    pill: Atom<boolean>;
+    isDynamic: Atom<boolean>;
+    isDecorative: Atom<boolean>;
+    isEmpty: Computed<boolean>;
+}
+export interface BadgeActions {
+    setVariant(value: BadgeVariant): void;
+    setSize(value: BadgeSize): void;
+    setDot(value: boolean): void;
+    setPulse(value: boolean): void;
+    setPill(value: boolean): void;
+    setDynamic(value: boolean): void;
+    setDecorative(value: boolean): void;
+}
+export type BadgeProps = {
+    role?: 'status' | 'presentation';
+    'aria-live'?: 'polite';
+    'aria-atomic'?: 'true';
+    'aria-hidden'?: 'true';
+    'aria-label'?: string;
+};
+export interface BadgeContracts {
+    getBadgeProps(): BadgeProps;
+}
+export interface BadgeModel {
+    readonly state: BadgeState;
+    readonly actions: BadgeActions;
+    readonly contracts: BadgeContracts;
+}
+export declare function createBadge(options?: CreateBadgeOptions): BadgeModel;

package/dist/badge/index.js

@@ -0,0 +1,89 @@
+import { action, atom, computed } from '@reatom/core';
+const VALID_VARIANTS = new Set([
+    'primary',
+    'success',
+    'neutral',
+    'warning',
+    'danger',
+]);
+const VALID_SIZES = new Set(['small', 'medium', 'large']);
+export function createBadge(options = {}) {
+    const initialVariant = VALID_VARIANTS.has(options.variant) ? options.variant : 'neutral';
+    const initialSize = VALID_SIZES.has(options.size) ? options.size : 'medium';
+    const variantAtom = atom(initialVariant, 'badge.variant');
+    const sizeAtom = atom(initialSize, 'badge.size');
+    const dotAtom = atom(options.dot ?? false, 'badge.dot');
+    const pulseAtom = atom(options.pulse ?? false, 'badge.pulse');
+    const pillAtom = atom(options.pill ?? false, 'badge.pill');
+    const isDynamicAtom = atom(options.isDynamic ?? false, 'badge.isDynamic');
+    const isDecorativeAtom = atom(options.isDecorative ?? false, 'badge.isDecorative');
+    const isEmptyAtom = computed(() => dotAtom(), 'badge.isEmpty');
+    const actions = {
+        setVariant: action((value) => {
+            if (VALID_VARIANTS.has(value)) {
+                variantAtom.set(value);
+            }
+        }, 'badge.setVariant'),
+        setSize: action((value) => {
+            if (VALID_SIZES.has(value)) {
+                sizeAtom.set(value);
+            }
+        }, 'badge.setSize'),
+        setDot: action((value) => {
+            dotAtom.set(value);
+        }, 'badge.setDot'),
+        setPulse: action((value) => {
+            pulseAtom.set(value);
+        }, 'badge.setPulse'),
+        setPill: action((value) => {
+            pillAtom.set(value);
+        }, 'badge.setPill'),
+        setDynamic: action((value) => {
+            isDynamicAtom.set(value);
+        }, 'badge.setDynamic'),
+        setDecorative: action((value) => {
+            isDecorativeAtom.set(value);
+        }, 'badge.setDecorative'),
+    };
+    const contracts = {
+        getBadgeProps() {
+            if (isDecorativeAtom()) {
+                return {
+                    role: 'presentation',
+                    'aria-hidden': 'true',
+                };
+            }
+            if (isDynamicAtom()) {
+                const props = {
+                    role: 'status',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true',
+                };
+                if (options.ariaLabel != null) {
+                    props['aria-label'] = options.ariaLabel;
+                }
+                return props;
+            }
+            const props = {};
+            if (options.ariaLabel != null) {
+                props['aria-label'] = options.ariaLabel;
+            }
+            return props;
+        },
+    };
+    const state = {
+        variant: variantAtom,
+        size: sizeAtom,
+        dot: dotAtom,
+        pulse: pulseAtom,
+        pill: pillAtom,
+        isDynamic: isDynamicAtom,
+        isDecorative: isDecorativeAtom,
+        isEmpty: isEmptyAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,55 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface BreadcrumbItem {
+    id: string;
+    label: string;
+    href: string;
+    isCurrent?: boolean;
+}
+export interface BreadcrumbItemState extends BreadcrumbItem {
+    isCurrent: boolean;
+}
+export interface CreateBreadcrumbOptions {
+    items: readonly BreadcrumbItem[];
+    idBase?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+}
+export interface BreadcrumbState {
+    items: Atom<BreadcrumbItemState[]>;
+    currentId: Computed<string | null>;
+}
+export interface BreadcrumbRootProps {
+    role: 'navigation';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export interface BreadcrumbListProps {
+    role?: undefined;
+}
+export interface BreadcrumbItemProps {
+    id: string;
+    role?: undefined;
+    'data-current': 'true' | 'false';
+}
+export interface BreadcrumbLinkProps {
+    id: string;
+    role: 'link';
+    href: string;
+    'aria-current'?: 'page';
+}
+export interface BreadcrumbSeparatorProps {
+    'aria-hidden': 'true';
+}
+export interface BreadcrumbContracts {
+    getRootProps(): BreadcrumbRootProps;
+    getListProps(): BreadcrumbListProps;
+    getItemProps(id: string): BreadcrumbItemProps;
+    getLinkProps(id: string): BreadcrumbLinkProps;
+    getSeparatorProps(id: string): BreadcrumbSeparatorProps;
+}
+export interface BreadcrumbModel {
+    readonly state: BreadcrumbState;
+    readonly contracts: BreadcrumbContracts;
+}
+export declare const normalizeBreadcrumbItems: (items: readonly BreadcrumbItem[]) => BreadcrumbItemState[];
+export declare function createBreadcrumb(options: CreateBreadcrumbOptions): BreadcrumbModel;

package/dist/breadcrumb/index.js

@@ -0,0 +1,77 @@
+import { atom, computed } from '@reatom/core';
+export const normalizeBreadcrumbItems = (items) => {
+    if (items.length === 0)
+        return [];
+    let currentIndex = -1;
+    items.forEach((item, index) => {
+        if (item.isCurrent) {
+            currentIndex = index;
+        }
+    });
+    if (currentIndex < 0) {
+        currentIndex = items.length - 1;
+    }
+    return items.map((item, index) => ({
+        ...item,
+        isCurrent: index === currentIndex,
+    }));
+};
+export function createBreadcrumb(options) {
+    const idBase = options.idBase ?? 'breadcrumb';
+    const itemsAtom = atom(normalizeBreadcrumbItems(options.items), `${idBase}.items`);
+    const currentIdAtom = computed(() => itemsAtom().find((item) => item.isCurrent)?.id ?? null, `${idBase}.currentId`);
+    const itemDomId = (id) => `${idBase}-item-${id}`;
+    const linkDomId = (id) => `${idBase}-link-${id}`;
+    const contracts = {
+        getRootProps() {
+            return {
+                role: 'navigation',
+                'aria-label': options.ariaLabel ?? (options.ariaLabelledBy == null ? 'Breadcrumb' : undefined),
+                'aria-labelledby': options.ariaLabelledBy,
+            };
+        },
+        getListProps() {
+            return {};
+        },
+        getItemProps(id) {
+            const item = itemsAtom().find((candidate) => candidate.id === id);
+            if (!item) {
+                throw new Error(`Unknown breadcrumb item id: ${id}`);
+            }
+            return {
+                id: itemDomId(id),
+                role: undefined,
+                'data-current': item.isCurrent ? 'true' : 'false',
+            };
+        },
+        getLinkProps(id) {
+            const item = itemsAtom().find((candidate) => candidate.id === id);
+            if (!item) {
+                throw new Error(`Unknown breadcrumb item id for link: ${id}`);
+            }
+            return {
+                id: linkDomId(id),
+                role: 'link',
+                href: item.href,
+                'aria-current': item.isCurrent ? 'page' : undefined,
+            };
+        },
+        getSeparatorProps(id) {
+            const item = itemsAtom().find((candidate) => candidate.id === id);
+            if (!item) {
+                throw new Error(`Unknown breadcrumb item id for separator: ${id}`);
+            }
+            return {
+                'aria-hidden': 'true',
+            };
+        },
+    };
+    const state = {
+        items: itemsAtom,
+        currentId: currentIdAtom,
+    };
+    return {
+        state,
+        contracts,
+    };
+}

package/dist/button/index.d.ts

@@ -0,0 +1,46 @@
+import { type Atom } from '@reatom/core';
+export interface CreateButtonOptions {
+    idBase?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isPressed?: boolean;
+    onPress?: () => void;
+}
+export interface ButtonState {
+    isDisabled: Atom<boolean>;
+    isLoading: Atom<boolean>;
+    isPressed: Atom<boolean>;
+}
+export interface ButtonActions {
+    setDisabled(next: boolean): void;
+    setLoading(next: boolean): void;
+    setPressed(next: boolean): void;
+    press(): void;
+    handleClick(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }): void;
+    handleKeyUp(event: Pick<KeyboardEvent, 'key'>): void;
+}
+export interface ButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0' | '-1';
+    'aria-disabled'?: 'true';
+    'aria-busy'?: 'true';
+    'aria-pressed'?: 'true' | 'false';
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }) => void;
+    onKeyUp: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface ButtonContracts {
+    getButtonProps(): ButtonProps;
+}
+export interface ButtonModel {
+    readonly state: ButtonState;
+    readonly actions: ButtonActions;
+    readonly contracts: ButtonContracts;
+}
+export declare function createButton(options?: CreateButtonOptions): ButtonModel;

package/dist/button/index.js

@@ -0,0 +1,86 @@
+import { action, atom } from '@reatom/core';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createButton(options = {}) {
+    const idBase = options.idBase ?? 'button';
+    const isToggleButton = options.isPressed != null;
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const isLoadingAtom = atom(options.isLoading ?? false, `${idBase}.isLoading`);
+    const isPressedAtom = atom(options.isPressed ?? false, `${idBase}.isPressed`);
+    const setDisabled = action((next) => {
+        isDisabledAtom.set(next);
+    }, `${idBase}.setDisabled`);
+    const setLoading = action((next) => {
+        isLoadingAtom.set(next);
+    }, `${idBase}.setLoading`);
+    const setPressed = action((next) => {
+        isPressedAtom.set(next);
+    }, `${idBase}.setPressed`);
+    const isInteractionBlocked = () => isDisabledAtom() || isLoadingAtom();
+    const press = action(() => {
+        if (isInteractionBlocked())
+            return;
+        if (isToggleButton) {
+            isPressedAtom.set(!isPressedAtom());
+        }
+        options.onPress?.();
+    }, `${idBase}.press`);
+    const handleClick = action(() => {
+        press();
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (isInteractionBlocked())
+            return;
+        if (event.key === 'Enter') {
+            press();
+            return;
+        }
+        if (isSpaceKey(event.key)) {
+            event.preventDefault?.();
+        }
+    }, `${idBase}.handleKeyDown`);
+    const handleKeyUp = action((event) => {
+        if (isInteractionBlocked())
+            return;
+        if (isSpaceKey(event.key)) {
+            press();
+        }
+    }, `${idBase}.handleKeyUp`);
+    const actions = {
+        setDisabled,
+        setLoading,
+        setPressed,
+        press,
+        handleClick,
+        handleKeyDown,
+        handleKeyUp,
+    };
+    const contracts = {
+        getButtonProps() {
+            const isDisabled = isDisabledAtom();
+            const isLoading = isLoadingAtom();
+            const isUnavailable = isDisabled || isLoading;
+            const isPressed = isPressedAtom();
+            return {
+                id: `${idBase}-root`,
+                role: 'button',
+                tabindex: isUnavailable ? '-1' : '0',
+                'aria-disabled': isUnavailable ? 'true' : undefined,
+                'aria-busy': isLoading ? 'true' : undefined,
+                'aria-pressed': isToggleButton ? (isPressed ? 'true' : 'false') : undefined,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+                onKeyUp: handleKeyUp,
+            };
+        },
+    };
+    const state = {
+        isDisabled: isDisabledAtom,
+        isLoading: isLoadingAtom,
+        isPressed: isPressedAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/callout/index.d.ts

@@ -0,0 +1,41 @@
+import { type Atom } from '@reatom/core';
+export type CalloutVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface CreateCalloutOptions {
+    idBase?: string;
+    variant?: CalloutVariant;
+    closable?: boolean;
+    open?: boolean;
+}
+export interface CalloutState {
+    variant: Atom<CalloutVariant>;
+    closable: Atom<boolean>;
+    open: Atom<boolean>;
+}
+export interface CalloutActions {
+    setVariant(value: CalloutVariant): void;
+    setClosable(value: boolean): void;
+    close(): void;
+    show(): void;
+}
+export interface CalloutProps {
+    id: string;
+    role: 'note';
+    'data-variant': CalloutVariant;
+}
+export interface CalloutCloseButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': 'Dismiss';
+    onClick: () => void;
+}
+export interface CalloutContracts {
+    getCalloutProps(): CalloutProps;
+    getCloseButtonProps(): CalloutCloseButtonProps;
+}
+export interface CalloutModel {
+    readonly state: CalloutState;
+    readonly actions: CalloutActions;
+    readonly contracts: CalloutContracts;
+}
+export declare function createCallout(options?: CreateCalloutOptions): CalloutModel;

package/dist/callout/index.js

@@ -0,0 +1,63 @@
+import { action, atom } from '@reatom/core';
+const VALID_VARIANTS = new Set([
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'neutral',
+]);
+export function createCallout(options = {}) {
+    const idBase = options.idBase ?? 'callout';
+    const initialVariant = VALID_VARIANTS.has(options.variant) ? options.variant : 'info';
+    const variantAtom = atom(initialVariant, `${idBase}.variant`);
+    const closableAtom = atom(options.closable ?? false, `${idBase}.closable`);
+    const openAtom = atom(options.open ?? true, `${idBase}.open`);
+    const close = action(() => {
+        if (closableAtom()) {
+            openAtom.set(false);
+        }
+    }, `${idBase}.close`);
+    const show = action(() => {
+        openAtom.set(true);
+    }, `${idBase}.show`);
+    const actions = {
+        setVariant: action((value) => {
+            if (VALID_VARIANTS.has(value)) {
+                variantAtom.set(value);
+            }
+        }, `${idBase}.setVariant`),
+        setClosable: action((value) => {
+            closableAtom.set(value);
+        }, `${idBase}.setClosable`),
+        close,
+        show,
+    };
+    const contracts = {
+        getCalloutProps() {
+            return {
+                id: `${idBase}-root`,
+                role: 'note',
+                'data-variant': variantAtom(),
+            };
+        },
+        getCloseButtonProps() {
+            return {
+                id: `${idBase}-close-btn`,
+                role: 'button',
+                tabindex: '0',
+                'aria-label': 'Dismiss',
+                onClick: () => close(),
+            };
+        },
+    };
+    const state = {
+        variant: variantAtom,
+        closable: closableAtom,
+        open: openAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/card/index.d.ts

@@ -0,0 +1,54 @@
+import { type Atom } from '@reatom/core';
+export interface CreateCardOptions {
+    idBase?: string;
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+    isDisabled?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
+}
+export interface CardState {
+    isExpandable: Atom<boolean>;
+    isExpanded: Atom<boolean>;
+    isDisabled: Atom<boolean>;
+}
+export interface CardActions {
+    toggle(): void;
+    expand(): void;
+    collapse(): void;
+    setDisabled(value: boolean): void;
+    handleClick(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }): void;
+}
+export interface CardProps {
+}
+export interface CardTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0' | '-1';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-disabled'?: 'true';
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }) => void;
+}
+export interface CardContentProps {
+    id: string;
+    role: 'region';
+    'aria-labelledby': string;
+    hidden: boolean;
+}
+export interface CardContracts {
+    getCardProps(): CardProps;
+    getTriggerProps(): CardTriggerProps | Record<string, never>;
+    getContentProps(): CardContentProps | Record<string, never>;
+}
+export interface CardModel {
+    readonly state: CardState;
+    readonly actions: CardActions;
+    readonly contracts: CardContracts;
+}
+export declare function createCard(options?: CreateCardOptions): CardModel;