@chromvoid/headless-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ChromVoid Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+The goal of this package is to provide a standalone headless foundation for a future UI kit,
+built on Reatom v1000 and WAI-ARIA APG behavior contracts.
+
+The visual UI kit is intentionally out of scope for this package.
+
+## Import contract
+
+The package ships from `dist/` and supports both a convenience root barrel and lean leaf imports.
+
+Use the root barrel when convenience matters more than bundle shape:
+
+```ts
+import {createButton, createTabs} from '@chromvoid/headless-ui'
+```
+
+Use leaf subpaths in perf-sensitive code when you want an intentionally narrow dependency graph:
+
+```ts
+import {createButton} from '@chromvoid/headless-ui/button'
+import {CompositeNavigationOrientation} from '@chromvoid/headless-ui/interactions/composite-navigation'
+import {toggleSelection} from '@chromvoid/headless-ui/core/selection'
+```
+
+The root barrel remains supported, but subpaths are the stable lean-import contract for applications and higher-level packages such as `@chromvoid/uikit`.
+
+Architecture decisions and delivery artifacts:
+
+- `./specs/ADR-001-headless-architecture.md`
+- `./specs/IMPLEMENTATION-ROADMAP.md`
+- `./specs/ISSUE-BACKLOG.md`
+- `./specs/RELEASE-CANDIDATE.md`
+- `./specs/release/mvp-changelog.md`
+
+## Package-local workflow
+
+Run all package checks from the package root:
+
+```sh
+npm ci
+npm run lint
+npm run test
+npm run build
+npm pack --dry-run
+```
+
+## Implemented components
+
+- `listbox` (`src/listbox/`, `specs/components/listbox.md`)
+- `combobox` (`src/combobox/`, `specs/components/combobox.md`)
+- `menu` (`src/menu/`, `specs/components/menu.md`)
+- `tabs` (`src/tabs/`, `specs/components/tabs.md`)
+- `treeview` (`src/treeview/`, `specs/components/treeview.md`)
+- `alert` (`src/alert/`, `specs/components/alert.md`)
+- `breadcrumb` (`src/breadcrumb/`, `specs/components/breadcrumb.md`)
+- `landmarks` (`src/landmarks/`, `specs/components/landmarks.md`)
+- `meter` (`src/meter/`, `specs/components/meter.md`)
+- `link` (`src/link/`, `specs/components/link.md`)
+- `table` (`src/table/`, `specs/components/table.md`)
+- `button` (`src/button/`, `specs/components/button.md`)
+- `checkbox` (`src/checkbox/`, `specs/components/checkbox.md`)
+- `switch` (`src/switch/`, `specs/components/switch.md`)
+- `radio-group` (`src/radio-group/`, `specs/components/radio-group.md`)
+- `slider` (`src/slider/`, `specs/components/slider.md`)
+- `spinbutton` (`src/spinbutton/`, `specs/components/spinbutton.md`)
+- `slider-multi-thumb` (`src/slider-multi-thumb/`, `specs/components/slider-multi-thumb.md`)
+- `disclosure` (`src/disclosure/`, `specs/components/disclosure.md`)
+- `accordion` (`src/accordion/`, `specs/components/accordion.md`)
+- `dialog` (`src/dialog/`, `specs/components/dialog.md`)
+- `alert-dialog` (`src/alert-dialog/`, `specs/components/alert-dialog.md`)
+- `tooltip` (`src/tooltip/`, `specs/components/tooltip.md`)
+- `menu-button` (`src/menu-button/`, `specs/components/menu-button.md`)
+- `toolbar` (`src/toolbar/`, `specs/components/toolbar.md`)
+- `grid` (`src/grid/`, `specs/components/grid.md`)
+- `treegrid` (`src/treegrid/`, `specs/components/treegrid.md`)
+- `feed` (`src/feed/`, `specs/components/feed.md`)
+- `carousel` (`src/carousel/`, `specs/components/carousel.md`)
+- `window-splitter` (`src/window-splitter/`, `specs/components/window-splitter.md`)
+
+## MVP-next scaffolds (not finalized)
+
+- `popover` (`src/popover/`, `specs/components/popover.md`)
+- `select` (`src/select/`, `specs/components/select.md`)
+- `context-menu` (`src/context-menu/`, `specs/components/context-menu.md`)
+- `command-palette` (`src/command-palette/`, `specs/components/command-palette.md`)
+- `toast` (`src/toast/`, `specs/components/toast.md`)
+- `progress` (`src/progress/`, `specs/components/progress.md`)
+
+## Shared layers
+
+- `src/core/` - selection and value-range state primitives
+- `src/interactions/` - keyboard intents, typeahead, composite navigation, overlay focus
+- `src/a11y-contracts/` - typed aria/role contracts
+- `src/adapters/` - adapter contracts and integration coverage
+
+## Conventions
+
+- each component lives in a dedicated directory: `src/<component>/`
+- each component has a dedicated contract spec: `specs/components/<component>.md`
+- package must remain independent from monorepo-only imports (`@project/*`, `apps/*`)

package/dist/a11y-contracts/index.d.ts

@@ -0,0 +1,23 @@
+import type { HeadlessId } from '../core/index.js';
+export type FocusStrategy = 'roving-tabindex' | 'aria-activedescendant';
+export interface RootA11yProps {
+    role: string;
+    tabindex: '0' | '-1';
+    'aria-label'?: string;
+    'aria-orientation'?: 'vertical' | 'horizontal';
+    'aria-multiselectable'?: 'true' | 'false';
+    'aria-activedescendant'?: string;
+}
+export interface ItemA11yProps {
+    id: string;
+    role: string;
+    tabindex: '0' | '-1';
+    'aria-disabled'?: 'true';
+    'aria-selected'?: 'true' | 'false';
+    'data-active'?: 'true' | 'false';
+}
+export interface A11yContract {
+    strategy: FocusStrategy;
+    getRootProps(): RootA11yProps;
+    getItemProps(itemId: HeadlessId): ItemA11yProps;
+}

package/dist/a11y-contracts/index.js

@@ -0,0 +1 @@
+export {};

package/dist/accordion/index.d.ts

@@ -0,0 +1,78 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface AccordionSection {
+    id: string;
+    disabled?: boolean;
+}
+export interface CreateAccordionOptions {
+    sections: readonly AccordionSection[];
+    idBase?: string;
+    allowMultiple?: boolean;
+    allowZeroExpanded?: boolean;
+    initialExpandedIds?: readonly string[];
+    ariaLabel?: string;
+    headingLevel?: number;
+}
+export interface AccordionState {
+    expandedIds: Atom<Set<string>>;
+    focusedId: Atom<string | null>;
+    value: Computed<string | null>;
+    expandedValues: Computed<string[]>;
+    sections: Atom<readonly AccordionSection[]>;
+    allowMultiple: Atom<boolean>;
+    allowZeroExpanded: Atom<boolean>;
+    headingLevel: Atom<number>;
+    ariaLabel: Atom<string | undefined>;
+}
+export interface AccordionActions {
+    toggle(id: string): void;
+    expand(id: string): void;
+    collapse(id: string): void;
+    setFocused(id: string): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    setSections(sections: readonly AccordionSection[]): void;
+    setAllowMultiple(value: boolean): void;
+    setAllowZeroExpanded(value: boolean): void;
+    setHeadingLevel(level: number): void;
+    setAriaLabel(label: string | undefined): void;
+    setExpandedIds(ids: readonly string[]): void;
+}
+export interface AccordionRootProps {
+    id: string;
+    'aria-label'?: string;
+}
+export interface AccordionHeaderProps {
+    id: string;
+}
+export interface AccordionTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0' | '-1';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-disabled': 'true' | 'false';
+    onClick: () => void;
+    onFocus: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface AccordionPanelProps {
+    id: string;
+    role: 'region';
+    'aria-labelledby': string;
+    hidden: boolean;
+}
+export interface AccordionContracts {
+    getRootProps(): AccordionRootProps;
+    getHeaderProps(id: string): AccordionHeaderProps;
+    getTriggerProps(id: string): AccordionTriggerProps;
+    getPanelProps(id: string): AccordionPanelProps;
+}
+export interface AccordionModel {
+    readonly state: AccordionState;
+    readonly actions: AccordionActions;
+    readonly contracts: AccordionContracts;
+}
+export declare function createAccordion(options: CreateAccordionOptions): AccordionModel;

package/dist/accordion/index.js

@@ -0,0 +1,264 @@
+import { action, atom, computed } from '@reatom/core';
+import { createCompositeNavigation } from '../interactions/composite-navigation.js';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createAccordion(options) {
+    const idBase = options.idBase ?? 'accordion';
+    const allowMultipleAtom = atom(options.allowMultiple ?? false, `${idBase}.allowMultiple`);
+    const allowZeroExpandedAtom = atom(options.allowZeroExpanded ?? true, `${idBase}.allowZeroExpanded`);
+    const headingLevelAtom = atom(options.headingLevel ?? 3, `${idBase}.headingLevel`);
+    const ariaLabelAtom = atom(options.ariaLabel, `${idBase}.ariaLabel`);
+    const sectionsAtom = atom([...options.sections], `${idBase}.sections`);
+    const sectionIdsComputed = computed(() => new Set(sectionsAtom().map((s) => s.id)), `${idBase}.sectionIds`);
+    const sectionByIdComputed = computed(() => new Map(sectionsAtom().map((s) => [s.id, s])), `${idBase}.sectionById`);
+    const normalizeInitialExpandedIds = () => {
+        const sectionIdSet = new Set(options.sections.map((s) => s.id));
+        const unique = [...new Set(options.initialExpandedIds ?? [])].filter((id) => sectionIdSet.has(id));
+        const allowMultiple = options.allowMultiple ?? false;
+        const allowZeroExpanded = options.allowZeroExpanded ?? true;
+        if (!allowMultiple && unique.length > 1) {
+            const first = unique[0];
+            return first == null ? new Set() : new Set([first]);
+        }
+        if (!allowZeroExpanded && unique.length === 0) {
+            const first = options.sections[0]?.id;
+            return first == null ? new Set() : new Set([first]);
+        }
+        return new Set(unique);
+    };
+    const expandedIdsAtom = atom(normalizeInitialExpandedIds(), `${idBase}.expandedIds`);
+    const valueComputed = computed(() => {
+        const ids = expandedIdsAtom();
+        const first = ids.values().next();
+        return first.done ? null : first.value;
+    }, `${idBase}.value`);
+    const expandedValuesComputed = computed(() => [...expandedIdsAtom()], `${idBase}.expandedValues`);
+    const navigation = createCompositeNavigation({
+        idBase: `${idBase}.nav`,
+        orientation: 'vertical',
+        focusStrategy: 'roving-tabindex',
+        wrapMode: 'wrap',
+        items: options.sections,
+    });
+    const canExpand = (id) => sectionIdsComputed().has(id) && sectionByIdComputed().get(id)?.disabled !== true;
+    const isOnlyExpanded = (id, expandedIds) => expandedIds.size === 1 && expandedIds.has(id);
+    const updateExpanded = (updater) => {
+        const current = expandedIdsAtom();
+        const next = updater(current);
+        expandedIdsAtom.set(next);
+    };
+    const enforceExpandedInvariants = () => {
+        const allowMultiple = allowMultipleAtom();
+        const allowZeroExpanded = allowZeroExpandedAtom();
+        const sectionIds = sectionIdsComputed();
+        const current = expandedIdsAtom();
+        let next = new Set([...current].filter((id) => sectionIds.has(id)));
+        if (!allowMultiple && next.size > 1) {
+            const first = next.values().next().value;
+            next = first != null ? new Set([first]) : new Set();
+        }
+        if (!allowZeroExpanded && next.size === 0) {
+            const sections = sectionsAtom();
+            const firstEnabled = sections.find((s) => !s.disabled);
+            if (firstEnabled) {
+                next = new Set([firstEnabled.id]);
+            }
+        }
+        expandedIdsAtom.set(next);
+    };
+    const expand = action((id) => {
+        if (!canExpand(id))
+            return;
+        updateExpanded((current) => {
+            if (current.has(id))
+                return current;
+            if (!allowMultipleAtom()) {
+                return new Set([id]);
+            }
+            const next = new Set(current);
+            next.add(id);
+            return next;
+        });
+    }, `${idBase}.expand`);
+    const collapse = action((id) => {
+        if (!canExpand(id))
+            return;
+        updateExpanded((current) => {
+            if (!current.has(id))
+                return current;
+            if (!allowZeroExpandedAtom() && isOnlyExpanded(id, current)) {
+                return current;
+            }
+            const next = new Set(current);
+            next.delete(id);
+            return next;
+        });
+    }, `${idBase}.collapse`);
+    const toggle = action((id) => {
+        if (!canExpand(id))
+            return;
+        if (expandedIdsAtom().has(id)) {
+            collapse(id);
+        }
+        else {
+            expand(id);
+        }
+    }, `${idBase}.toggle`);
+    const setFocused = action((id) => {
+        navigation.actions.setActive(id);
+    }, `${idBase}.setFocused`);
+    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 'ArrowDown':
+                moveNext();
+                return;
+            case 'ArrowUp':
+                movePrev();
+                return;
+            case 'Home':
+                moveFirst();
+                return;
+            case 'End':
+                moveLast();
+                return;
+            default: {
+                if (event.key === 'Enter' || isSpaceKey(event.key)) {
+                    const focusedId = navigation.state.activeId();
+                    if (focusedId != null) {
+                        toggle(focusedId);
+                    }
+                }
+            }
+        }
+    }, `${idBase}.handleKeyDown`);
+    const setSections = action((sections) => {
+        sectionsAtom.set([...sections]);
+        navigation.actions.setItems(sections);
+        enforceExpandedInvariants();
+    }, `${idBase}.setSections`);
+    const setAllowMultiple = action((value) => {
+        allowMultipleAtom.set(value);
+        enforceExpandedInvariants();
+    }, `${idBase}.setAllowMultiple`);
+    const setAllowZeroExpanded = action((value) => {
+        allowZeroExpandedAtom.set(value);
+        enforceExpandedInvariants();
+    }, `${idBase}.setAllowZeroExpanded`);
+    const setHeadingLevel = action((level) => {
+        headingLevelAtom.set(Math.max(1, Math.min(6, level)));
+    }, `${idBase}.setHeadingLevel`);
+    const setAriaLabel = action((label) => {
+        ariaLabelAtom.set(label);
+    }, `${idBase}.setAriaLabel`);
+    const setExpandedIds = action((ids) => {
+        const sectionIds = sectionIdsComputed();
+        const allowMultiple = allowMultipleAtom();
+        const valid = ids.filter((id) => sectionIds.has(id));
+        if (!allowMultiple && valid.length > 1) {
+            expandedIdsAtom.set(new Set(valid.slice(0, 1)));
+        }
+        else {
+            expandedIdsAtom.set(new Set(valid));
+        }
+        if (!allowZeroExpandedAtom() && expandedIdsAtom().size === 0) {
+            const firstEnabled = sectionsAtom().find((s) => !s.disabled);
+            if (firstEnabled) {
+                expandedIdsAtom.set(new Set([firstEnabled.id]));
+            }
+        }
+    }, `${idBase}.setExpandedIds`);
+    const triggerId = (id) => `${idBase}-trigger-${id}`;
+    const panelId = (id) => `${idBase}-panel-${id}`;
+    const actions = {
+        toggle,
+        expand,
+        collapse,
+        setFocused,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        handleKeyDown,
+        setSections,
+        setAllowMultiple,
+        setAllowZeroExpanded,
+        setHeadingLevel,
+        setAriaLabel,
+        setExpandedIds,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                id: `${idBase}-root`,
+                'aria-label': ariaLabelAtom(),
+            };
+        },
+        getHeaderProps(id) {
+            if (!sectionIdsComputed().has(id)) {
+                throw new Error(`Unknown accordion header id: ${id}`);
+            }
+            return {
+                id: `${idBase}-header-${id}`,
+            };
+        },
+        getTriggerProps(id) {
+            const section = sectionByIdComputed().get(id);
+            if (!section) {
+                throw new Error(`Unknown accordion trigger id: ${id}`);
+            }
+            const expandedIds = expandedIdsAtom();
+            const expanded = expandedIds.has(id);
+            const forcedExpanded = !allowZeroExpandedAtom() && isOnlyExpanded(id, expandedIds);
+            const disabled = section.disabled === true || forcedExpanded;
+            return {
+                id: triggerId(id),
+                role: 'button',
+                tabindex: (navigation.state.activeId() === id && section.disabled !== true ? '0' : '-1'),
+                'aria-expanded': (expanded ? 'true' : 'false'),
+                'aria-controls': panelId(id),
+                'aria-disabled': (disabled ? 'true' : 'false'),
+                onClick: () => toggle(id),
+                onFocus: () => setFocused(id),
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getPanelProps(id) {
+            if (!sectionIdsComputed().has(id)) {
+                throw new Error(`Unknown accordion panel id: ${id}`);
+            }
+            return {
+                id: panelId(id),
+                role: 'region',
+                'aria-labelledby': triggerId(id),
+                hidden: !expandedIdsAtom().has(id),
+            };
+        },
+    };
+    const state = {
+        expandedIds: expandedIdsAtom,
+        focusedId: navigation.state.activeId,
+        value: valueComputed,
+        expandedValues: expandedValuesComputed,
+        sections: sectionsAtom,
+        allowMultiple: allowMultipleAtom,
+        allowZeroExpanded: allowZeroExpandedAtom,
+        headingLevel: headingLevelAtom,
+        ariaLabel: ariaLabelAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/adapters/index.d.ts

@@ -0,0 +1,9 @@
+export interface AdapterBindings<TRootProps, TItemProps> {
+    rootProps: TRootProps;
+    getItemProps(itemId: string): TItemProps;
+    onKeyDown(event: KeyboardEvent): void;
+    onClick(event: MouseEvent): void;
+}
+export interface HeadlessAdapter<TModel, TRootProps, TItemProps> {
+    bind(model: TModel): AdapterBindings<TRootProps, TItemProps>;
+}

package/dist/adapters/index.js

@@ -0,0 +1 @@
+export {};

package/dist/alert/index.d.ts

@@ -0,0 +1,33 @@
+import { type Atom } from '@reatom/core';
+export type AlertAriaLive = 'assertive' | 'polite';
+export interface CreateAlertOptions {
+    idBase?: string;
+    ariaLive?: AlertAriaLive;
+    ariaAtomic?: boolean;
+    durationMs?: number;
+    initialMessage?: string;
+    initialVisible?: boolean;
+}
+export interface AlertState {
+    isVisible: Atom<boolean>;
+    message: Atom<string>;
+}
+export interface AlertActions {
+    show(message: string): void;
+    hide(): void;
+}
+export interface AlertProps {
+    id: string;
+    role: 'alert';
+    'aria-live': AlertAriaLive;
+    'aria-atomic': 'true' | 'false';
+}
+export interface AlertContracts {
+    getAlertProps(): AlertProps;
+}
+export interface AlertModel {
+    readonly state: AlertState;
+    readonly actions: AlertActions;
+    readonly contracts: AlertContracts;
+}
+export declare function createAlert(options?: CreateAlertOptions): AlertModel;

package/dist/alert/index.js

@@ -0,0 +1,54 @@
+import { action, atom } from '@reatom/core';
+export function createAlert(options = {}) {
+    const idBase = options.idBase ?? 'alert';
+    const durationMs = options.durationMs;
+    const ariaLive = options.ariaLive ?? 'assertive';
+    const ariaAtomic = options.ariaAtomic ?? true;
+    const isVisibleAtom = atom(options.initialVisible ?? false, `${idBase}.isVisible`);
+    const messageAtom = atom(options.initialMessage ?? '', `${idBase}.message`);
+    const alertId = `${idBase}-region`;
+    let dismissTimer = null;
+    const clearDismissTimer = () => {
+        if (dismissTimer == null)
+            return;
+        clearTimeout(dismissTimer);
+        dismissTimer = null;
+    };
+    const hide = action(() => {
+        clearDismissTimer();
+        isVisibleAtom.set(false);
+    }, `${idBase}.hide`);
+    const show = action((message) => {
+        clearDismissTimer();
+        messageAtom.set(message);
+        isVisibleAtom.set(true);
+        if (durationMs != null && Number.isFinite(durationMs) && durationMs > 0) {
+            dismissTimer = setTimeout(() => {
+                hide();
+            }, durationMs);
+        }
+    }, `${idBase}.show`);
+    const actions = {
+        show,
+        hide,
+    };
+    const contracts = {
+        getAlertProps() {
+            return {
+                id: alertId,
+                role: 'alert',
+                'aria-live': ariaLive,
+                'aria-atomic': ariaAtomic ? 'true' : 'false',
+            };
+        },
+    };
+    const state = {
+        isVisible: isVisibleAtom,
+        message: messageAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,69 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface CreateAlertDialogOptions {
+    idBase?: string;
+    initialOpen?: boolean;
+    triggerId?: string;
+    initialFocusId?: string;
+    closeOnEscape?: boolean;
+    closeOnOutsidePointer?: boolean;
+    closeOnOutsideFocus?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    closeOnAction?: boolean;
+    onCancel?: () => void;
+    onAction?: () => void;
+}
+export interface AlertDialogState {
+    isOpen: Atom<boolean>;
+    restoreTargetId: Atom<string | null>;
+    isFocusTrapped: Computed<boolean>;
+    initialFocusTargetId: Atom<string | null>;
+}
+export interface AlertDialogActions {
+    open(): void;
+    close(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+}
+export interface AlertDialogOverlayProps {
+    id: string;
+    hidden: boolean;
+    'data-open': 'true' | 'false';
+    onPointerDownOutside: () => void;
+    onFocusOutside: () => void;
+}
+export interface AlertDialogContentProps {
+    id: string;
+    role: 'alertdialog';
+    tabindex: '-1';
+    'aria-modal': 'true';
+    'aria-labelledby': string;
+    'aria-describedby': string;
+    'data-initial-focus'?: string;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface AlertDialogTitleProps {
+    id: string;
+}
+export interface AlertDialogDescriptionProps {
+    id: string;
+}
+export interface AlertDialogButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    onClick: () => void;
+}
+export interface AlertDialogContracts {
+    getDialogProps(): AlertDialogContentProps;
+    getOverlayProps(): AlertDialogOverlayProps;
+    getTitleProps(): AlertDialogTitleProps;
+    getDescriptionProps(): AlertDialogDescriptionProps;
+    getCancelButtonProps(): AlertDialogButtonProps;
+    getActionButtonProps(): AlertDialogButtonProps;
+}
+export interface AlertDialogModel {
+    readonly state: AlertDialogState;
+    readonly actions: AlertDialogActions;
+    readonly contracts: AlertDialogContracts;
+}
+export declare function createAlertDialog(options?: CreateAlertDialogOptions): AlertDialogModel;