@ostack.tech/ui 0.1.0

package/dist/types/components/DataTable/DataTableRowsPerPage.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/** Properties of the data table rows per page component. */
+export interface DataTableRowsPerPageProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Options used to set the data table's `limit` (the maximum number of rows
+     * shown per page).
+     *
+     * @default [10, 15, 25, 50]
+     */
+    limitOptions?: number[];
+    /**
+     * Function used to render the number of rows per page.
+     *
+     * @param rows Node representing the number of rows (a select).
+     */
+    label?: React.ReactNode;
+}
+/** Component displaying a select used to change the number of rows per page. */
+export declare const DataTableRowsPerPage: React.ForwardRefExoticComponent<DataTableRowsPerPageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/DataTableSelectionTrigger.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Button } from "../Button";
+/** Properties of the data table selection trigger component. */
+export interface DataTableSelectionTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, "onClick"> {
+    /**
+     * Whether the button should be displayed when no rows are selected.
+     *
+     * @default false
+     */
+    showWhenNoneSelected?: boolean;
+    /**
+     * Action to run when triggering the action.
+     *
+     * @param selectedRows Rows currently selected.
+     * @param event Original click event.
+     */
+    onClick: (selectedRows: React.Key[], event: React.MouseEvent) => void;
+    children: React.ReactNode;
+}
+/** Trigger used to run an action over selected rows. */
+export declare const DataTableSelectionTrigger: React.ForwardRefExoticComponent<DataTableSelectionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/DataTable/PagedDataTablePagination.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type DataTablePaginationProps } from "./DataTablePagination.tsx";
+/** Properties of the scrolled data table pagination. */
+export interface PagedDataTablePaginationProps extends React.ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel"> {
+}
+/** Pagination component of the scrolled data table. */
+export declare const PagedDataTablePagination: React.ForwardRefExoticComponent<PagedDataTablePaginationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/PagedDataTableRows.d.ts

@@ -0,0 +1,2 @@
+/** Body of the data table in "paged" display mode. */
+export declare function PagedDataTableRows<T = unknown>(): import("react/jsx-runtime").JSX.Element[];

package/dist/types/components/DataTable/ScrolledDataTablePagination.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type DataTablePaginationProps } from "./DataTablePagination.tsx";
+/** Properties of the scrolled data table pagination. */
+export interface ScrolledDataTablePaginationProps extends React.ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange"> {
+}
+/** Pagination component of the scrolled data table. */
+export declare const ScrolledDataTablePagination: React.ForwardRefExoticComponent<ScrolledDataTablePaginationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/ScrolledDataTableRows.d.ts

@@ -0,0 +1,7 @@
+import { type DataTableBodyProps } from "./DataTableBody.tsx";
+/** Properties of the scrolled data table body component. */
+interface ScrolledDataTableRowsProps extends Pick<DataTableBodyProps, "containerRef"> {
+}
+/** Body of the data table in "scrolled" display mode. */
+export declare function ScrolledDataTableRows<T = unknown>({ containerRef, }: ScrolledDataTableRowsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DataTable/getRowKey.d.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+import { type DataTableProps } from "./DataTable.tsx";
+/** Returns the key of a row. */
+export declare function getRowKey<T = unknown>(row: T, rowKey: DataTableProps<T>["rowKey"]): React.Key;

package/dist/types/components/DataTable/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./DataTable.tsx";
+export * from "./DataTableApi.ts";
+export * from "./DataTableCell.tsx";
+export * from "./DataTableColumn.tsx";
+export * from "./DataTableContent.tsx";
+export { useDataTableColumnLabel, useDataTableColumnLabelId, } from "./DataTableContext.ts";
+export * from "./DataTableFilter.tsx";
+export * from "./DataTablePagination.tsx";
+export * from "./DataTableRow.tsx";
+export * from "./DataTableRowsPerPage.tsx";
+export * from "./DataTableSelectionTrigger.tsx";
+export { DATA_TABLE_SELECTION_COLUMN_WIDTH } from "./useDataTableSelectionColumn.tsx";

package/dist/types/components/DataTable/spliceWindow.d.ts

@@ -0,0 +1,24 @@
+/** Result of applying the table splice to the visible window. */
+export interface SpliceWindowResult<T = unknown> {
+    /** New total number of rows. */
+    totalCount: number;
+    /**
+     * New visible window. If the window didn't change, then this window will be
+     * the same object as the one provided, otherwise it will be a new object.
+     */
+    window: (T | undefined)[];
+}
+/**
+ * Applies the splice performed on the table to the window containing the
+ * visible rows.
+ *
+ * @param totalCount Total number of rows.
+ * @param offset Window offset.
+ * @param limit Window limit.
+ * @param window Window of visible rows.
+ * @param startIndex Start index of the splice.
+ * @param deleted Number of deleted items by the splice.
+ * @param added Rows added via splice.
+ * @returns The new table count as well as the new visible window.
+ */
+export declare function spliceWindow<T = unknown>(totalCount: number, offset: number, limit: number, window: (T | undefined)[], startIndex: number, deleted?: number, added?: number | T[]): SpliceWindowResult<T>;

package/dist/types/components/DataTable/transformRows.d.ts

@@ -0,0 +1,10 @@
+import { type SortDirection } from "../../utils/sorting.ts";
+import { type DataTableColumns } from "./DataTableColumn.tsx";
+/** Filters the provided rows. */
+export declare function filterRows<T>(leafColumns: DataTableColumns<T>, rows: T[], filter: string): T[];
+export declare function filterRows<T>(leafColumns: DataTableColumns<T>, rows: undefined, filter: string): undefined;
+export declare function filterRows<T>(leafColumns: DataTableColumns<T>, rows: T[] | undefined, filter: string): T[] | undefined;
+/** Sorts the provided rows. */
+export declare function sortRows<T>(leafColumns: DataTableColumns<T>, rows: T[], sortBy: string | null, sortDirection: SortDirection | null): T[];
+export declare function sortRows<T>(leafColumns: DataTableColumns<T>, rows: undefined, sortBy: string | null, sortDirection: SortDirection | null): undefined;
+export declare function sortRows<T>(leafColumns: DataTableColumns<T>, rows: T[] | undefined, sortBy: string | null, sortDirection: SortDirection | null): T[] | undefined;

package/dist/types/components/DataTable/useDataTableSelectionColumn.d.ts

@@ -0,0 +1,4 @@
+import { type DataTableColumn } from "./DataTableColumn.tsx";
+export declare const DATA_TABLE_SELECTION_COLUMN_WIDTH = 42;
+export declare function useDataTableSelectionColumn<T = unknown, TValue = any>(): DataTableColumn<T, TValue> | undefined;
+export declare function useDataTableSelectionColumnId(): string;

package/dist/types/components/DateInput/DateInput.d.ts

@@ -0,0 +1,87 @@
+import { type Locale } from "date-fns";
+import * as React from "react";
+import { DatePicker } from "../DatePicker";
+import { type Input } from "../Input";
+import { PopoverContent } from "../Popover";
+/** Properties of the date input component. */
+export interface DateInputProps extends Omit<React.ComponentPropsWithoutRef<typeof Input>, "defaultValue" | "value" | "onValueChange"> {
+    /** Date input's default value. */
+    defaultValue?: string | Date | null;
+    /** Date input's controlled value. */
+    value?: string | Date | null;
+    /**
+     * Function called whenever the value of the date input changes.
+     *
+     * @param valueRepresentations Different representations of the date value.
+     */
+    onValueChange?: (valueRepresentations: DateValueRepresentations) => void;
+    /** Minimum date allowed. */
+    minDate?: string | Date | null;
+    /** Maximum date allowed. */
+    maxDate?: string | Date | null;
+    /** Minimum month allowed. */
+    minMonth?: string | Date | null;
+    /** Maximum month allowed. */
+    maxMonth?: string | Date | null;
+    /** Minimum year allowed. */
+    minYear?: number;
+    /** Maximum year allowed. */
+    maxYear?: number;
+    /** `date-fns` locale to format dates and to be used by the date picker. */
+    locale?: Locale;
+    /**
+     * Short format of the date, as supported by
+     * [`date-fns`](https://date-fns.org/docs/format), used for the written input
+     * text.
+     */
+    shortFormat?: string;
+    /**
+     * Full format of the date, as supported by
+     * [`date-fns`](https://date-fns.org/docs/format), used to announce the date
+     * to assistive technologies.
+     */
+    fullFormat?: string;
+    /** Description of the short format provided to assistive technologies. */
+    formatDescription?: string;
+    /**
+     * Function that should return the label to provide to the button that opens
+     * the input's calendar.
+     *
+     * @param selectedDate Currently selected date.
+     * @param editable Whether the calendar is editable.
+     */
+    calendarButtonLabel?: (selectedDate: string | null, editable: boolean) => string;
+    /** Function called whenever the popover's open state changes. */
+    onPopoverOpenChange?: (open: boolean) => void;
+    /** Properties to pass to the date picker component. */
+    datePickerProps?: Omit<React.ComponentPropsWithRef<typeof DatePicker>, "value" | "defaultValue" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear" | "locale">;
+    /** Properties to pass to the popover content component. */
+    popoverContentProps?: React.ComponentPropsWithRef<typeof PopoverContent>;
+}
+/** Representations of the date value. */
+export interface DateValueRepresentations {
+    /** Date value as a formatted string. */
+    formattedValue: string;
+    /** Date value as a date. */
+    dateValue: Date | null;
+}
+/**
+ * The date input component is used to allow a user to enter a date with the aid
+ * of a popover calendar. It is built on top of the `Input`, `Popover`, and
+ * `DatePicker` components (and, by extension, the browser's [`<input>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)).
+ *
+ * For accessibility purposes, date inputs are usually included within a `Field`
+ * together with a `Label` and optionally `HelperText` and/or `Feedback`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { DateInput } from "@ostack.tech/ui";
+ *
+ * function DateOfBirth() {
+ *   return <DateInput placeholder="Enter your date of birth…" />;
+ * }
+ * ```
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/DateInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateInput.tsx";

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Calendar } from "../Calendar";
+/** Properties of the date picker component. */
+export interface DatePickerProps extends React.ComponentPropsWithoutRef<typeof Calendar> {
+    /** Default date value. */
+    defaultValue?: Date | null;
+    /** Controlled selected date value. */
+    value?: Date | null;
+    /** Action called whenever the date picker's value changes. */
+    onChange?: (value: Date | null) => void;
+}
+/**
+ * Date picker component built on top of [React
+ * DayPicker](https://react-day-picker.js.org) and
+ * [Calendar](/docs/ostack-ui-forms-calendar--docs) component, providing an
+ * intuitive and easy-to-use interface for selecting a date. It acts as a
+ * higher-level abstraction that manages date selection while offering both
+ * controlled and uncontrolled usage scenarios.
+ *
+ * The DatePicker allows users to easily select a date by responding to click
+ * events on the calendar days. When a date is clicked, the component updates
+ * the selected date and triggers a callback, making it simple to integrate into
+ * forms or other applications that need to track a chosen date.
+ *
+ * For detailed customization options, refer to the Calendar component story.
+ */
+export declare function DatePicker({ defaultValue, value: controlledValue, defaultMonth, onChange, onDayClick, ...otherProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./DatePicker.tsx";

package/dist/types/components/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,197 @@
+import { type Locale } from "date-fns";
+import * as React from "react";
+import { type ControlStatus, type ControlVariant } from "../../utils/control.ts";
+import { type Responsive } from "../../utils/useResponsiveValues.ts";
+import { CloseButton } from "../CloseButton";
+import { ControlCode } from "../ControlCode";
+import { type DateRange, DateRangePicker } from "../DateRangePicker";
+import { type ShowClearButton } from "../Input";
+import { PopoverAnchor, PopoverContent } from "../Popover";
+import { Spinner } from "../Spinner";
+/** Date-range using strings as dates. */
+export interface StringRange {
+    start: string;
+    end: string;
+}
+/** Properties of the date-range input component. */
+export interface DateRangeInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue"> {
+    /**
+     * Date-range input's style variant. Defaults to the default variant unless
+     * when rendering inside a table cell (in which it defaults to `"cell"`).
+     */
+    variant?: ControlVariant;
+    /** Sets the status of the date-range input. */
+    status?: ControlStatus;
+    /** Date-range input code. */
+    code?: React.ReactNode;
+    /** Default date-range value. */
+    defaultValue?: DateRange | StringRange;
+    /** Date-range value. */
+    value?: DateRange | StringRange;
+    /**
+     * Function called whenever the value of the date-range input changes.
+     *
+     * @param valueRepresentations Different representations of the date-range
+     *   value.
+     */
+    onValueChange?: (valueRepresentations: DateRangeValueRepresentations) => void;
+    /** Sets the control as required. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Sets the control as read-only. */
+    readOnly?: boolean;
+    /** Minimum date allowed. */
+    minDate?: string | Date | null;
+    /** Maximum date allowed. */
+    maxDate?: string | Date | null;
+    /** Minimum month allowed. */
+    minMonth?: string | Date | null;
+    /** Maximum month allowed. */
+    maxMonth?: string | Date | null;
+    /** Minimum year allowed. */
+    minYear?: number;
+    /** Maximum year allowed. */
+    maxYear?: number;
+    /**
+     * Adds a spinner to the start/end inputs to indicate activity. Note that it
+     * doesn't automatically disable the input.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Adds a spinner to the start input to indicate activity. Note that it
+     * doesn't automatically disable the input.
+     *
+     * @default loading
+     */
+    startLoading?: boolean;
+    /**
+     * Adds a spinner to the end input to indicate activity. Note that it doesn't
+     * automatically disable the input.
+     *
+     * @default loading
+     */
+    endLoading?: boolean;
+    /** Sets the inputs' text align. */
+    align?: Responsive<React.CSSProperties["textAlign"]>;
+    /** Date-range input's start adornment. */
+    startAdornment?: React.ReactNode;
+    /** Date-range input's end adornment. */
+    endAdornment?: React.ReactNode;
+    /**
+     * Whether to show buttons to clear the start/end inputs when they have
+     * content.
+     *
+     * @default true
+     */
+    showClearButtons?: ShowClearButton;
+    /** Label of the clear buttons announced to assistive technologies. */
+    clearButtonsLabel?: string;
+    /** `date-fns` locale to format dates and to be used by the date-range picker. */
+    locale?: Locale;
+    /**
+     * Short format of the dates, as supported by
+     * [`date-fns`](https://date-fns.org/docs/format), used for the written input
+     * text.
+     */
+    shortFormat?: string;
+    /**
+     * Full format of the dates, as supported by
+     * [`date-fns`](https://date-fns.org/docs/format), used to announce the dates
+     * to assistive technologies.
+     */
+    fullFormat?: string;
+    /** Description of the short format provided to assistive technologies. */
+    formatDescription?: string;
+    /**
+     * Label announced to assistive technologies for the start input (so that the
+     * user knows that they are interacting with the start input).
+     */
+    startInputLabel?: string;
+    /**
+     * Label announced to assistive technologies for the end input (so that the
+     * user knows that they are interacting with the end input).
+     */
+    endInputLabel?: string;
+    /**
+     * Function that should return the label to provide to the button that opens
+     * the input's calendar.
+     *
+     * @param selectedDateRange Currently selected date-range.
+     * @param editable Whether the calendar is editable.
+     */
+    calendarButtonLabel?: (selectedDateRange: string | null, editable: boolean) => string;
+    /** Placeholder for both start and end inputs. */
+    placeholder?: string;
+    /** Placeholder for the start input (defaults to `placeholder`). */
+    startPlaceholder?: string;
+    /** Placeholder for the end input (defaults to `placeholder`). */
+    endPlaceholder?: string;
+    /** Function called whenever the popover's open state changes. */
+    onPopoverOpenChange?: (open: boolean, focusedInput: "start" | "end") => void;
+    /**
+     * Function called when the focus moves out of the control as a whole.
+     *
+     * This is useful when there is a need to know when the user stops interacting
+     * with the control.
+     */
+    onBlurToOutside?: (event: React.FocusEvent) => void;
+    /** Properties to pass to the code component. */
+    codeProps?: React.ComponentPropsWithRef<typeof ControlCode>;
+    /** Properties to pass to the popover anchor component. */
+    popoverAnchorProps?: React.ComponentPropsWithRef<typeof PopoverAnchor>;
+    /** Properties to pass to the start container element. */
+    startContainerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the end container element. */
+    endContainerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the input component representing the start date. */
+    startInputProps?: React.ComponentPropsWithRef<"input">;
+    /** Properties to pass to the input component representing the end date. */
+    endInputProps?: React.ComponentPropsWithRef<"input">;
+    /** Properties to pass to the button component that clears the start date. */
+    startClearButtonProps?: React.ComponentPropsWithRef<typeof CloseButton>;
+    /** Properties to pass to the button component that clears the end date. */
+    endClearButtonProps?: React.ComponentPropsWithRef<typeof CloseButton>;
+    /** Properties to pass to the spinner component. */
+    spinnerProps?: Omit<React.ComponentPropsWithRef<typeof Spinner>, "size">;
+    /** Properties to pass to the date-range picker component. */
+    dateRangePickerProps?: Omit<React.ComponentPropsWithRef<typeof DateRangePicker>, "value" | "defaultValue" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear" | "locale">;
+    /** Properties to pass to the popover content component. */
+    popoverContentProps?: React.ComponentPropsWithRef<typeof PopoverContent>;
+}
+/** Representations of the date-range value. */
+export interface DateRangeValueRepresentations {
+    /** Date-range value as formatted strings. */
+    formattedValue: StringRange;
+    /** Date-range value as dates. */
+    dateValue: DateRange;
+}
+/**
+ * The date-range input component displays two inputs used to allow a user to
+ * specify a date interval with the aid of popover calendars. It is built on top
+ * of the `Input`, `Popover`, and `DateRangePicker` components (and, by
+ * extension, the browser's [`<input>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)).
+ *
+ * For accessibility purposes, date-range inputs are usually included within a
+ * `Field` together with a `Label` and optionally `HelperText` and/or
+ * `Feedback`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { DateRangeInput } from "@ostack.tech/ui";
+ *
+ * function HolidayDates() {
+ *   return (
+ *     <DateRangeInput
+ *       startPlaceholder="Holiday start…"
+ *       endPlaceholder="Holiday end…"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/DateRangeInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateRangeInput.tsx";

package/dist/types/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Calendar } from "../Calendar";
+/** A range of dates from a start date to an end date. */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** Mode specifying which end of the range the user is controlling. */
+export type DateRangePickerSelectionMode = "start" | "end" | "both";
+/** Properties of the date-range picker component. */
+export interface DateRangePickerProps extends React.ComponentPropsWithoutRef<typeof Calendar> {
+    /** Default date-range value. */
+    defaultValue?: DateRange;
+    /** Controlled selected date-range value. */
+    value?: DateRange;
+    /** Action called whenever the date-range picker's value changes. */
+    onChange?: (value: DateRange) => void;
+    /**
+     * Specifies which end of the range the user is currently attempting to
+     * change.
+     *
+     * @default "both"
+     */
+    selectionMode?: DateRangePickerSelectionMode;
+}
+/**
+ * Date-range picker component built on top of [React
+ * DayPicker](https://react-day-picker.js.org) and
+ * [Calendar](/docs/ostack-ui-forms-calendar--docs). Unlike the `Calendar`,
+ * `DateRangePicker` provides its own default event handlers for date selection.
+ * It supports controlled and uncontrolled states, logical constraints to ensure
+ * valid ranges, and flexible selection modes for the start, end, or both dates.
+ * Interactive hover feedback helps users visualize their selections in
+ * real-time.
+ *
+ * This component doesn’t have dedicated stories as its functionality is covered
+ * by [DatePicker](/docs/ostack-ui-forms-date-picker--docs) and `Calendar`
+ * stories, avoiding redundancy. Ideal for booking systems, dashboards, and
+ * forms, it simplifies workflows requiring precise date range inputs.
+ */
+export declare function DateRangePicker({ defaultValue, value: controlledValue, onChange, selectionMode, defaultMonth, modifiers, onDayClick, onDayFocus, onDayMouseEnter, numberOfMonths, ...otherProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DateRangePicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateRangePicker.tsx";

package/dist/types/components/Dialog/Dialog.d.ts

@@ -0,0 +1,68 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+/**
+ * The dialog component displays a “window” overlaid on either the main screen
+ * or another dialog window, rendering the content underneath inert.
+ *
+ * Built on top of the [Radix Dialog
+ * primitive](https://www.radix-ui.com/primitives/docs/components/dialog), and
+ * the `Card` component.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `DialogTrigger`: The button which, when pressed, opens the dialog.
+ * - `DialogContent`: Content to display when the dialog is open.
+ * - `DialogHeader`: Header section of the dialog.
+ * - `DialogTitle`: An accessible title to be announced when the dialog is opened.
+ * - `DialogBody`: Body section of the dialog.
+ * - `DialogDescription`: An optional accessible description to be announced when
+ *   the dialog is opened.
+ *
+ *   To hide the description, wrap it within `<VisuallyHidden asChild>`. To remove
+ *   the description entirely, pass `aria-describedby={undefined}` to the
+ *   `DialogContent` and omit this component.
+ * - `DialogFooter`: Footer section of the dialog.
+ * - `DialogClose`: A button which closes the dialog.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Button,
+ *   Dialog,
+ *   DialogBody,
+ *   DialogClose,
+ *   DialogContent,
+ *   DialogDescription,
+ *   DialogFooter,
+ *   DialogHeader,
+ *   DialogTitle,
+ *   DialogTrigger,
+ * } from "@ostack.tech/ui";
+ *
+ * function UserSettings() {
+ *   return (
+ *     <Dialog>
+ *       <DialogTrigger>
+ *         <Button>User settings…</Button>
+ *       </DialogTrigger>
+ *
+ *       <DialogContent>
+ *         <DialogHeader>
+ *           <DialogTitle>User Settings</DialogTitle>
+ *         </DialogHeader>
+ *         <DialogBody>
+ *           <DialogDescription>Edit your user settings:</DialogDescription>
+ *           …
+ *         </DialogBody>
+ *         <DialogFooter>
+ *           <DialogClose>
+ *             <Button>Close</Button>
+ *           </DialogClose>
+ *         </DialogFooter>
+ *       </DialogContent>
+ *     </Dialog>
+ *   );
+ * }
+ * ```
+ */
+export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;

package/dist/types/components/Dialog/DialogBody.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { CardBody } from "../Card";
+/** Properties of the dialog body component. */
+export interface DialogBodyProps extends React.ComponentPropsWithoutRef<typeof CardBody> {
+}
+/** Body section of the dialog. */
+export declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Dialog/DialogClose.d.ts

@@ -0,0 +1,7 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the dialog close component. */
+export interface DialogCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>, "asChild"> {
+}
+/** Button which closes the dialog. */
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,45 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+import { type CardColor, type CardVariant } from "../Card";
+import { Overlay } from "../Overlay";
+/** Dialog content variants. */
+export type DialogContentVariant = CardVariant;
+/** Possible dialog content colors. */
+export type DialogContentColor = CardColor;
+/** Possible dialog content sizes. */
+export type DialogContentSize = "sm" | "md" | "lg" | "xl";
+/** Properties of the dialog content component. */
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Dialog content variant.
+     *
+     * @default solid
+     */
+    variant?: DialogContentVariant;
+    /**
+     * Whether sections should be merged together, as opposed to them being
+     * clearly delimited. By default, each section is clearly delimited via a
+     * border or solid background colour.
+     *
+     * @default false
+     */
+    mergeSections?: boolean;
+    /**
+     * Dialog content color.
+     *
+     * @default neutral
+     */
+    color?: DialogContentColor;
+    /**
+     * Size of the dialog content.
+     *
+     * @default md
+     */
+    size?: DialogContentSize;
+    /** Properties to pass to the portal component. */
+    portalProps?: Omit<React.ComponentPropsWithRef<typeof DialogPrimitive.Portal>, "forceMount">;
+    /** Properties to pass to the `Overlay` component. */
+    overlayProps?: React.ComponentPropsWithRef<typeof Overlay>;
+}
+/** Content to be rendered in the open dialog. */
+export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Dialog/DialogDescription.d.ts

@@ -0,0 +1,13 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the dialog description component. */
+export interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+}
+/**
+ * Optional accessible description to be announced when the dialog is opened.
+ *
+ * To hide the description, wrap it within `<VisuallyHidden asChild>`. To remove
+ * the description entirely, pass `aria-describedby={undefined}` to the
+ * `DialogContent` and omit this component.
+ */
+export declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;