goobs-frontend/dist/components/Dialog/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
export interface DialogProps {
    open: boolean;
    onClose: () => void;
    children: React.ReactNode;
    /** Styling options: theme plus sizing/surface overrides forwarded as CSS custom properties. */
    styles?: {
        /** Theme variant: only 'sacred' selects the sacred palette; any other value (or unset) renders light. */
        theme?: string;
        /** Dialog max-width on desktop (default 600px); mobile/tablet clamp to 95vw/80vw. Ignored with fullWidth. */
        maxWidth?: string;
        /** Dialog width (default 100%). Ignored with fullWidth. */
        width?: string;
        /** Dialog height (default auto). */
        height?: string;
        /** Dialog min-height. */
        minHeight?: string;
        /** Dialog max-height on desktop (default 80vh); mobile clamps to 90vh. */
        maxHeight?: string;
        /** Content-area padding. */
        padding?: string;
        /** Dialog border radius. */
        borderRadius?: string;
        /** Dialog background color. */
        backgroundColor?: string;
        /** Full border shorthand; wins over borderColor. */
        border?: string;
        /** Border color; composes a `2px solid <borderColor>` border when `border` is not set. */
        borderColor?: string;
        /** Anchors the dialog to the top of the backdrop with this padding instead of vertical centering. */
        topOffset?: string;
        /** Stretches the dialog to 100% width/max-width. */
        fullWidth?: boolean;
        /** Backdrop background color. */
        backdropBackgroundColor?: string;
        /** Backdrop backdrop-filter (e.g. a blur). */
        backdropFilter?: string;
        /** Dialog box shadow. */
        boxShadow?: string;
    };
    customDialogStyles?: React.CSSProperties;
    /**
     * Legacy boolean — when true, renders `data-dialog-paper="true"` on the
     * dialog root. Preserved for back-compat with existing call sites; new
     * code should use `dataDialog` and `dataSubject` instead.
     */
    dataDialogPaper?: boolean;
    /**
     * Stable test selector emitted as `data-dialog="<value>"` on the dialog
     * root. Convention is a verb-noun like `"confirm-delete"`,
     * `"create-contract"`, `"manage-category"` so Playwright tests can
     * locate the dialog without depending on visible title text:
     *   `await expect(page.locator('[data-dialog="confirm-delete"]')).toBeVisible()`
     */
    dataDialog?: string;
    /**
     * Singular entity noun (e.g. `"contract"`, `"category"`, `"employee"`)
     * emitted as `data-subject="<value>"` on the dialog root. Pairs with
     * `dataDialog` so multiple confirm dialogs on the same page disambiguate
     * by entity:
     *   `[data-dialog="confirm-delete"][data-subject="category"]`
     */
    dataSubject?: string;
    /**
     * `aria-labelledby` for the dialog. Should be the id of the heading
     * inside `children` (typically a `<Typography text="..." id="...">`).
     * Required for proper screenreader announcement of the dialog purpose.
     */
    ariaLabelledBy?: string;
    /**
     * `aria-describedby` for the dialog. Optional — point at a paragraph
     * id inside `children` for screenreader description below the heading.
     */
    ariaDescribedBy?: string;
    /**
     * `aria-label` fallback when there is no visible heading id to point
     * `ariaLabelledBy` at (rare — prefer `ariaLabelledBy` so the heading
     * is the source of truth).
     */
    ariaLabel?: string;
}
/**
 * Modal dialog rendered over a backdrop with Escape-key and backdrop-click
 * dismissal, body scroll-lock, responsive sizing, and sacred/light theming.
 * Provides ARIA modal wiring and emits open/close diagnostics, plus stable
 * `data-dialog`/`data-subject` test selectors.
 */
declare const Dialog: React.FC<DialogProps>;
export default Dialog;
//# sourceMappingURL=index.d.ts.map