@chassis-ui/react 0.1.3 → 0.3.0

package/dist/chunks/index-BTTeKpiE.d.ts

@@ -0,0 +1,364 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import React, { ReactElement, ReactNode, Ref } from "react";
+import { ColumnSize, ColumnStaticSize } from "react-stately";
+import { Key as Key$2, Selection as Selection$1, SortDescriptor as SortDescriptor$1, TableBodyRenderProps } from "react-aria-components";
+//#region src/components/datagrid/DataGridBody.d.ts
+interface DataGridBodyOwnProps {
+  /**
+   * A string of all className you want applied to the body row group.
+   */
+  className?: string;
+  /**
+   * Values that should invalidate the row cache when using the `items`/render-function form of
+   * `children` — e.g. a value from outside `items` that the render function reads. Without this,
+   * changing that outside value won't re-render already-cached rows, since dynamic rows are only
+   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Content shown in place of rows when `items` is empty.
+   */
+  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode;
+}
+/**
+ * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather
+ * than alongside the static form because the loader row is generated by appending to `items` and
+ * rendering through that same function — there's no growing dataset to load more of, and nothing
+ * to render the loader with, in a hand-written list of `DataGridRow` elements.
+ */
+interface DataGridBodyDynamicProps<T> {
+  /**
+   * A render function called once per item in `items`, returning that row's `DataGridRow`.
+   */
+  children: (item: T) => ReactElement;
+  /**
+   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while
+   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one
+   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.
+   */
+  isLoading?: boolean;
+  /**
+   * A list of row data objects, rendered via the function form of `children`.
+   */
+  items: Iterable<T>;
+  /**
+   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes
+   * effect alongside `onLoadMore`.
+   */
+  loadingContent?: ReactNode;
+  /**
+   * Called when the grid scrolls near its last row, so more data can be fetched and appended to
+   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it
+   * resolves.
+   */
+  onLoadMore?: () => void;
+}
+/** The static form: `DataGridRow` elements written out directly. */
+interface DataGridBodyStaticProps {
+  /**
+   * `DataGridRow` elements.
+   */
+  children: ReactElement | ReactElement[];
+  isLoading?: never;
+  items?: never;
+  loadingContent?: never;
+  onLoadMore?: never;
+}
+/**
+ * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to
+ * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used
+ * to type-check and then throw at render ("children is not a function") the moment the loader row
+ * came up.
+ */
+type DataGridBodyProps<T> = DataGridBodyOwnProps & (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps);
+/**
+ * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this
+ * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.
+ *
+ * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.
+ */
+declare const DataGridBody: <T extends object>({ children, className, dependencies, isLoading, items, loadingContent, onLoadMore, renderEmptyState }: DataGridBodyProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridHeader.d.ts
+interface DataGridHeaderProps<T> {
+  /**
+   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column
+   * generation.
+   */
+  children: ReactNode | ((column: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the header row group.
+   */
+  className?: string;
+  /**
+   * A list of column data objects, rendered via the function form of `children`.
+   */
+  columns?: Iterable<T>;
+  /**
+   * Values that should invalidate the column cache when using the `columns`/render-function form
+   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+}
+/**
+ * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,
+ * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.
+ *
+ * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`
+ * uses it to tell header cells from body cells, since react-aria-components renders both as plain
+ * `[role="rowgroup"]` divs with no structural difference to select on otherwise.
+ */
+declare const DataGridHeader: <T extends object>({ children, className, columns, dependencies }: DataGridHeaderProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGrid.d.ts
+interface DataGridOwnProps<T extends object> {
+  /**
+   * An accessible label for the grid, used when there's no visible heading.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible heading element for the grid.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Set the vertical alignment of cell content. Mirrors `Table`'s prop of the same name for API
+   * parity — same as `Table`, this awaits chassis-css adding the matching `.align-*` styles.
+   */
+  align?: 'bottom' | 'middle' | 'top';
+  /**
+   * Add borders on all sides of the grid and cells.
+   */
+  bordered?: boolean;
+  /**
+   * Remove borders on all sides of the grid and cells.
+   */
+  borderless?: boolean;
+  /**
+   * A `DataGridHeader` and a `DataGridBody`, each built from `DataGridColumn`/`DataGridRow`/
+   * `DataGridCell`.
+   */
+  children: [ReactElement<DataGridHeaderProps<T>>, ReactElement<DataGridBodyProps<T>>];
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component.
+   */
+  color?: ContextColor;
+  /**
+   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.
+   */
+  disabledKeys?: Iterable<Key$2>;
+  /**
+   * Content shown below the grid, e.g. a totals row or a "load more" control. Rendered as plain
+   * markup outside the grid's own scrollable/virtualized region — not part of the
+   * keyboard-navigable grid, and never scrolls out of view along with the body rows. Mirrors
+   * `Table`'s `footer` prop for API parity.
+   */
+  footer?: ReactNode;
+  /**
+   * Enable a hover state on grid rows.
+   */
+  hover?: boolean;
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection$1) => void;
+  /**
+   * Handler that is called when a column is sorted.
+   */
+  onSortChange?: (descriptor: SortDescriptor$1) => void;
+  /**
+   * The currently selected row keys (controlled).
+   */
+  selectedKeys?: Selection$1;
+  /**
+   * The type of selection that is allowed.
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /**
+   * Make the grid more compact by cutting all cell padding.
+   */
+  sm?: boolean;
+  /**
+   * The current sort column and direction.
+   */
+  sortDescriptor?: SortDescriptor$1;
+}
+type DataGridRowHeightProps = {
+  /**
+   * Row height in pixels, or `"auto"` to measure each row from its own rendered content
+   * instead of a single fixed height shared by every row (pair it with a required
+   * `estimatedRowHeight`, and see the docs site's "Variable row height" section for the
+   * tradeoffs). A fixed number renders every row, including the header, at that exact
+   * height; content taller than it visually overflows rather than growing the row.
+   */
+  rowHeight: number;
+  estimatedRowHeight?: never;
+} | {
+  rowHeight: 'auto';
+  /**
+   * Seeds the virtualizer's scroll-position math for rows that haven't been measured yet.
+   * Required when `rowHeight="auto"` — pick a value close to the typical row's real height
+   * to minimize scroll-jump on first measurement. A row's real height can still turn out far
+   * from this estimate once it renders, which can cause a visible scroll-jump for rows the
+   * viewport hasn't reached yet.
+   */
+  estimatedRowHeight: number;
+};
+type DataGridProps<T extends object> = DataGridOwnProps<T> & DataGridRowHeightProps;
+declare const DataGrid: <T extends object>(props: DataGridProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+//#region src/components/datagrid/DataGridCell.d.ts
+interface DataGridCellProps {
+  /**
+   * The contents of the cell.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the cell.
+   */
+  className?: string;
+  /**
+   * Indicates how many columns the cell spans.
+   */
+  colSpan?: number;
+  /**
+   * The unique id of the cell.
+   */
+  id?: Key$2;
+  /**
+   * A string representation of the cell's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a
+ * thin wrapper over react-aria-components' own `Cell`.
+ */
+declare const DataGridCell: ({ children, className, colSpan, id, textValue }: DataGridCellProps) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridColumn.d.ts
+interface DataGridColumnProps {
+  /**
+   * Whether the column allows sorting. Adds a sort indicator and makes the header
+   * clickable/keyboard-activatable.
+   */
+  allowsSorting?: boolean;
+  /**
+   * Rendered contents of the column header.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the column header.
+   */
+  className?: string;
+  /**
+   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or
+   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional
+   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given
+   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native
+   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —
+   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.
+   */
+  defaultWidth?: ColumnSize | null;
+  /**
+   * The unique id of the column, referenced by `sortDescriptor.column`.
+   */
+  id?: Key$2;
+  /**
+   * Whether this column is a row header, announced by assistive technology during row
+   * navigation.
+   */
+  isRowHeader?: boolean;
+  /**
+   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.
+   */
+  maxWidth?: ColumnStaticSize | null;
+  /**
+   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.
+   */
+  minWidth?: ColumnStaticSize | null;
+  /**
+   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to
+   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on
+   * the same side, in declaration order.
+   */
+  pin?: 'start' | 'end';
+  /**
+   * A string representation of the column header, used for accessibility announcements. Defaults
+   * to `children` when it's a plain string — set this explicitly when the header contains
+   * anything else (an icon, a `Tooltip`, etc.).
+   */
+  textValue?: string;
+}
+/**
+ * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
+ * wrapper over react-aria-components' own `Column`.
+ *
+ * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own
+ * `TableColumnHeader`, but reads the active direction from react-aria-components' own
+ * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state
+ * directly, since this wrapper has no state of its own to read.
+ */
+declare const DataGridColumn: ({ allowsSorting, children, className, defaultWidth, id, isRowHeader, maxWidth, minWidth, pin, textValue }: DataGridColumnProps) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridRow.d.ts
+interface DataGridRowProps<T> {
+  /**
+   * `DataGridCell` elements, or a render function called once per column with that column's
+   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.
+   */
+  children: ReactNode | ((column: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the row.
+   */
+  className?: string;
+  /**
+   * A list of column data objects, rendered via the function form of `children`.
+   */
+  columns?: Iterable<T>;
+  /**
+   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.
+   */
+  id?: Key$2;
+  /**
+   * A string representation of the row's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
+ * wrapper over react-aria-components' own `Row`.
+ */
+declare const DataGridRow: <T extends object>({ children, className, columns, id, textValue }: DataGridRowProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridSelectionCell.d.ts
+interface DataGridSelectionCellProps {
+  /**
+   * A string of all className you want applied to the checkbox, replacing the default
+   * `check-input`.
+   */
+  className?: string;
+}
+/**
+ * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.
+ *
+ * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom
+ * indicator the caller must supply. This renders a plain native `<input className="check-input">`
+ * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for
+ * free with no new CSS of its own.
+ */
+declare const DataGridSelectionCell: ({ className }: DataGridSelectionCellProps) => React.JSX.Element;
+/**
+ * "Select all" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See
+ * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.
+ */
+declare const DataGridSelectAllCell: ({ className }: DataGridSelectionCellProps) => React.JSX.Element;
+//#endregion
+export { DataGridRowProps as a, DataGridCell as c, DataGridProps as d, DataGridHeader as f, DataGridBodyProps as h, DataGridRow as i, DataGridCellProps as l, DataGridBody as m, DataGridSelectionCell as n, DataGridColumn as o, DataGridHeaderProps as p, DataGridSelectionCellProps as r, DataGridColumnProps as s, DataGridSelectAllCell as t, DataGrid as u };
+//# sourceMappingURL=index-BTTeKpiE.d.ts.map

package/dist/chunks/index-BVGGIaPX.d.ts

@@ -0,0 +1,111 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/select/Select.d.ts
+interface SelectOptionDef {
+  /**
+   * Marks the option as disabled — it can't be clicked or reached via the keyboard.
+   */
+  disabled?: boolean;
+  /**
+   * Label text rendered inside the option. Falls back to the browser's default (the `value`,
+   * stringified) when omitted.
+   */
+  label?: string;
+  /**
+   * Marks the option as selected by default (uncontrolled) — resolved into the select's own
+   * `defaultValue`, and ignored when the select's `value`/`defaultValue` is set directly. Set on
+   * more than one option only when `multiple` is also set on `Select` — otherwise, matching
+   * native `<select>` behavior, only the last option with `selected` set wins.
+   */
+  selected?: boolean;
+  /**
+   * The option's value attribute.
+   */
+  value?: string | number;
+}
+interface SelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /**
+   * Content rendered at the select's trailing edge, e.g. a `InputAdorn` icon, text, or button.
+   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
+   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
+   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
+   * native element itself no longer fills the wrapper's full width.
+   */
+  adornEnd?: ReactNode;
+  /**
+   * Content rendered at the select's leading edge, e.g. a `InputAdorn` icon, text, or button.
+   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
+   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
+   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
+   * native element itself no longer fills the wrapper's full width.
+   */
+  adornStart?: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * A description for the field, rendered below the select.
+   */
+  help?: ReactNode;
+  /**
+   * Specifies the number of visible options in a drop-down list.
+   */
+  htmlSize?: number;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the select when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this select.
+   */
+  label?: ReactNode;
+  /**
+   * Allows more than one option to be selected at once. Pass `value` as a string array (or set
+   * `selected` on more than one `options` entry) to control the selection.
+   */
+  multiple?: boolean;
+  /**
+   * Method called immediately after the `value` prop changes.
+   */
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  /**
+   * Options list of the select component. Available keys: `label`, `value`, `disabled`,
+   * `selected`.
+   * Examples:
+   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+   * - `options={['js', 'html']}`
+   */
+  options?: SelectOptionDef[] | string[];
+  /**
+   * Renders a disabled placeholder option as the first item (e.g. `"Select a country…"`).
+   * The option has an empty value so it is not selectable once another option is chosen.
+   */
+  placeholder?: string;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the select when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: string | string[] | number;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { SelectOptionDef as n, SelectProps as r, Select as t };
+//# sourceMappingURL=index-BVGGIaPX.d.ts.map

package/dist/chunks/index-B_UzbGOa.d.ts

@@ -0,0 +1,195 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { DialogHTMLAttributes, ElementType, ReactElement } from "react";
+//#region src/components/modal/Modal.d.ts
+interface ModalProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onCancel' | 'onClose'> {
+  /**
+   * Show a backdrop while the modal is open. `'static'` blocks closing on backdrop click
+   * (the modal bounces instead). `false` is intentionally not equivalent to `modal={false}` —
+   * unlike `Drawer`, whose vanilla chassis-css counterpart derives modality from `backdrop`,
+   * chassis-css's vanilla `Dialog` only ever reads `backdrop` to distinguish `'static'` from
+   * everything else; `modal` alone decides `showModal()`/`show()`. This mirrors that faithfully
+   * rather than reintroducing an inconsistency with the vendored behavior.
+   */
+  backdrop?: boolean | 'static';
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Whether the modal is open when it first renders. Such a modal is uncontrolled: it closes
+   * itself on a close request. Use `visible` to open and close it from outside.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Set modal to cover the entire user viewport. A breakpoint value goes fullscreen only
+   * below that breakpoint.
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Disable the open/close transition entirely.
+   */
+  instant?: boolean;
+  /**
+   * Closes the modal when the escape key is pressed.
+   */
+  keyboard?: boolean;
+  /**
+   * Open with `showModal()` (top-layer, native backdrop). Set `false` to open with `show()`
+   * instead — no backdrop, and the page behind the modal stays interactive.
+   */
+  modal?: boolean;
+  /**
+   * Renders the modal open from its first paint, server HTML included, as a non-modal dialog: a
+   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to
+   * open it as a modal dialog.
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the modal requests to be closed (escape, backdrop click, or close button).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).
+   */
+  onClosePrevented?: () => void;
+  /**
+   * Callback fired after the exit transition completes and the modal is fully hidden.
+   */
+  onHidden?: () => void;
+  /**
+   * Callback fired when the modal starts to open.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired after the entry transition completes and the modal is fully visible.
+   */
+  onShown?: () => void;
+  /**
+   * Callback fired with `false` when the modal requests to be closed, at the same moments as
+   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Create a scrollable modal — the header and footer stay fixed while the body scrolls.
+   */
+  scrollable?: boolean;
+  /**
+   * Size the component sm, lg, or extra lg.
+   */
+  size?: 'sm' | 'lg' | 'xl';
+  /**
+   * Whether the modal is open. The modal is then controlled: a close request only fires
+   * `onClose` and `onVisibleChange`, and the modal closes when this becomes `false`.
+   */
+  visible?: boolean;
+}
+interface ModalContextProps {
+  /**
+   * Requests the modal be closed — fires `onClose`. Wire this to any element's `onClick`; see
+   * `useModal`.
+   */
+  close: () => void;
+  /**
+   * Id generated by `Modal` and applied automatically by `ModalTitle` to itself, so the
+   * dialog's `aria-labelledby` resolves to it without any manual wiring.
+   */
+  titleId?: string;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>>;
+//#endregion
+//#region src/components/modal/ModalBody.d.ts
+type ModalBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalBodyOwnProps<C>>;
+type ModalBodyComponent = (<C extends ElementType = 'div'>(props: ModalBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalBody: ModalBodyComponent;
+//#endregion
+//#region src/components/modal/ModalFooter.d.ts
+type ModalFooterOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Stack the footer actions as full-width columns instead of a right-aligned row.
+   */
+  stacked?: boolean;
+};
+type ModalFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalFooterOwnProps<C>>;
+type ModalFooterComponent = (<C extends ElementType = 'div'>(props: ModalFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalFooter: ModalFooterComponent;
+//#endregion
+//#region src/components/modal/ModalHeader.d.ts
+type ModalHeaderOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Add a close button component to the header.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalHeaderOwnProps<C>>;
+type ModalHeaderComponent = (<C extends ElementType = 'div'>(props: ModalHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalHeader: ModalHeaderComponent;
+//#endregion
+//#region src/components/modal/ModalTitle.d.ts
+type ModalTitleOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<C, ModalTitleOwnProps<C>>;
+type ModalTitleComponent = (<C extends ElementType = 'h2'>(props: ModalTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalTitle: ModalTitleComponent;
+//#endregion
+//#region src/hooks/useModal.d.ts
+type UseModalResult = ModalContextProps;
+declare const useModal: () => UseModalResult;
+//#endregion
+export { ModalHeader as a, ModalFooterProps as c, Modal as d, ModalProps as f, ModalTitleProps as i, ModalBody as l, useModal as n, ModalHeaderProps as o, ModalTitle as r, ModalFooter as s, UseModalResult as t, ModalBodyProps as u };
+//# sourceMappingURL=index-B_UzbGOa.d.ts.map