@amberstack/comp-lib 0.0.0-stage → 0.1.0

package/dist/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartLegendEntry } from './legendHelpers';
+export interface ChartLegendProps extends HTMLAttributes<HTMLDivElement> {
+    /** The series, in chart order. Past five, the rest fold into Other. */
+    items: ChartLegendEntry[];
+    /** Hidden series ids, when controlled. */
+    hiddenIds?: string[];
+    /** Hidden series ids at first, when uncontrolled. */
+    defaultHiddenIds?: string[];
+    /** Called with the new hidden ids. */
+    onHiddenChange?: (hiddenIds: string[]) => void;
+    /** Whether chips can hide and isolate series. Turn off to only name them. */
+    interactive?: boolean;
+    /** Name of the chip that gathers the series past five. */
+    otherLabel?: string;
+    /** Accessible name of the group. */
+    'aria-label'?: string;
+}
+/** Row of series chips. Click a chip to hide its series, or "Only" to isolate it. Colour follows the series, so hiding one never repaints the others. */
+export declare const ChartLegend: import("react").ForwardRefExoticComponent<ChartLegendProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChartLegend/ChartLegendItem.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from 'react';
+export interface ChartLegendItemProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Series name. */
+    label: string;
+    /** Position of the series, which sets the swatch colour. It stays the same while other series are hidden. */
+    colorIndex?: number;
+    /** Whether the series is hidden: the swatch becomes a hollow ring and the text recedes. */
+    seriesHidden?: boolean;
+    /** Whether this is the only series showing. */
+    isolated?: boolean;
+    /** Called when the chip is clicked. Without it, the chip only names the series. */
+    onToggle?: () => void;
+    /** Called when "Only" is clicked. Without it, there is no "Only" button. */
+    onOnly?: () => void;
+    /** Word on the isolate button. */
+    onlyLabel?: string;
+}
+/** Names a series. With `onToggle` it is a chip that shows or hides the series, and with `onOnly` it can isolate it. */
+export declare const ChartLegendItem: import("react").ForwardRefExoticComponent<ChartLegendItemProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/ChartLegend/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ChartLegend';
+export * from './ChartLegendItem';
+export * from './legendHelpers';
+export * from './useLegendState';

package/dist/components/ChartLegend/legendHelpers.d.ts

@@ -0,0 +1,20 @@
+/** A series as the legend sees it. */
+export interface ChartLegendEntry {
+    /** Stable identifier, matching the series. */
+    id: string;
+    /** Series name. */
+    label: string;
+}
+/** A chip in the legend. Other stands in for several series. */
+export interface LegendChip extends ChartLegendEntry {
+    /** The series this chip controls. */
+    memberIds: string[];
+    /** Position of the chip, which sets its colour. */
+    colorIndex: number;
+}
+/** Turns series into chips, folding the rest into Other when there are more than five. */
+export declare function legendChips(items: ChartLegendEntry[], otherLabel?: string): LegendChip[];
+/** Hidden ids after clicking a chip. Clicking the only series still showing brings all of them back, so a chart is never left blank. */
+export declare function toggleHidden(allIds: string[], hidden: string[], memberIds: string[]): string[];
+/** Hidden ids after clicking "Only". Clicking it again on the isolated series brings all of them back. */
+export declare function isolateHidden(allIds: string[], hidden: string[], memberIds: string[]): string[];

package/dist/components/ChartLegend/useLegendState.d.ts

@@ -0,0 +1,10 @@
+export interface UseLegendStateOptions {
+    /** Hidden series ids, when controlled. */
+    hiddenIds?: string[];
+    /** Hidden series ids at first, when uncontrolled. */
+    defaultHiddenIds?: string[];
+    /** Called with the new hidden ids. */
+    onHiddenChange?: (hiddenIds: string[]) => void;
+}
+/** Controlled or uncontrolled record of which series are hidden. */
+export declare function useLegendState({ hiddenIds, defaultHiddenIds, onHiddenChange }: UseLegendStateOptions): readonly [string[], (next: string[]) => void];

package/dist/components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One line of a chart tooltip. */
+export interface ChartTooltipRow {
+    /** Stable identifier. */
+    id: string;
+    /** Series name. */
+    name: string;
+    /** Formatted value. */
+    value: string;
+    /** Position of the series, which sets the swatch colour. Defaults to the row's position. */
+    colorIndex?: number;
+}
+export interface ChartTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What the values belong to, such as a date or category. */
+    title: ReactNode;
+    /** One row per visible series. */
+    rows: ChartTooltipRow[];
+}
+/** Exact values for one point across the visible series. The value is the strong element, and text stays in text tokens. */
+export declare const ChartTooltip: import("react").ForwardRefExoticComponent<ChartTooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChartTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** The visible label. Leave it out for a bare box, and give the box an `aria-label`. */
+    label?: ReactNode;
+    /** Longer text below the label. */
+    description?: ReactNode;
+    /** Shows the mixed state, for a parent whose children are only partly selected. */
+    indeterminate?: boolean;
+}
+/** Selects any number of options, applied on save. Built on a native checkbox. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/ChecklistItem/ChecklistItem.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ChecklistItemResult = 'pass' | 'fail' | 'warn' | 'pending';
+export interface ChecklistItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The outcome of the check. */
+    result?: ChecklistItemResult;
+    /** What is being checked. */
+    title: ReactNode;
+    /** More about the check. */
+    detail?: ReactNode;
+    /** The outcome in words. Defaults to Passed, Blocked, Review or Checking. */
+    resultLabel?: ReactNode;
+}
+/** One check in a list, with its outcome as an icon and text. */
+export declare const ChecklistItem: import("react").ForwardRefExoticComponent<ChecklistItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChecklistItem/index.d.ts

@@ -0,0 +1 @@
+export * from './ChecklistItem';

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export interface CommandPaletteCommand {
+    /** Unique id. */
+    id: string;
+    /** What the command does. Searched against the query. */
+    label: string;
+    /** Heading the command is listed under. Commands without one go in an unnamed group. */
+    group?: string;
+    /** Icon before the label. */
+    icon?: IconName;
+}
+export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Whether the palette is showing. Leave undefined to use `defaultOpen` and let the palette manage itself. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the palette closes, whether from Escape, a backdrop press or a command running. */
+    onClose?: () => void;
+    /** The commands to search. */
+    commands: readonly CommandPaletteCommand[];
+    /** Called with the command the user runs. */
+    onRun?: (command: CommandPaletteCommand) => void;
+    /** Placeholder and accessible name of the search input. */
+    searchLabel?: string;
+    /** Accessible name of the results list. */
+    resultsLabel?: string;
+    /** Shown when nothing matches. */
+    emptyMessage?: string;
+}
+/** A searchable list of commands in a Dialog. Arrow keys move the highlight, Enter runs it and Escape closes the palette. */
+export declare const CommandPalette: import("react").ForwardRefExoticComponent<CommandPaletteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CommandPalette/CommandPaletteItem.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export interface CommandPaletteItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** What the command does. */
+    label: string;
+    /** Icon before the label. */
+    icon?: IconName;
+    /** Whether this option has the keyboard highlight. */
+    active?: boolean;
+    /** Called when the option is pressed. */
+    onSelect?: () => void;
+}
+/** One option in a CommandPalette. Must sit inside an element with `role="listbox"` or `role="group"`. */
+export declare const CommandPaletteItem: import("react").ForwardRefExoticComponent<CommandPaletteItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CommandPalette';
+export * from './CommandPaletteItem';

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type DialogSize } from '../Dialog';
+export type ConfirmDialogTone = 'default' | 'danger';
+export interface ConfirmDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'role'> {
+    /** Whether the dialog is showing. Leave undefined to use `defaultOpen` and let the dialog manage itself. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** The question being asked. */
+    title: ReactNode;
+    /** What happens if the user confirms. */
+    description?: ReactNode;
+    /** Label of the confirm button. */
+    confirmLabel?: string;
+    /** Label of the cancel button. */
+    cancelLabel?: string;
+    /** `danger` is for destructive actions: the confirm button turns red and focus starts on cancel. */
+    tone?: ConfirmDialogTone;
+    /** Called when the user confirms. */
+    onConfirm?: () => void;
+    /** Called when the user cancels, including with Escape or a backdrop press. */
+    onCancel?: () => void;
+    /** Panel width. */
+    size?: DialogSize;
+}
+/** Asks the user to confirm or cancel an action. Built on Dialog with the `alertdialog` role. */
+export declare const ConfirmDialog: import("react").ForwardRefExoticComponent<ConfirmDialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ConfirmDialog/index.d.ts

@@ -0,0 +1 @@
+export * from './ConfirmDialog';

package/dist/components/ContentRow/ContentRow.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StatusTone } from '../Status';
+export interface ContentRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The name of the content. */
+    title: ReactNode;
+    /** A quieter line below the name, such as its path. */
+    subtitle?: ReactNode;
+    /** The kind of content. */
+    type?: ReactNode;
+    /** Short tags, such as languages. */
+    tags?: ReactNode;
+    /** Tone of the status dot. */
+    statusTone?: StatusTone;
+    /** The status text. */
+    statusLabel?: ReactNode;
+    /** When it last changed. */
+    updated?: ReactNode;
+}
+/** One item in a list of content. */
+export declare const ContentRow: import("react").ForwardRefExoticComponent<ContentRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ContentRow/index.d.ts

@@ -0,0 +1 @@
+export * from './ContentRow';

package/dist/components/CredentialRow/CredentialRow.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface CredentialRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** The name of the credential. */
+    name: ReactNode;
+    /** Where it is stored. Never put the secret itself here. */
+    reference?: ReactNode;
+    /** Icon at the left. */
+    icon?: IconName;
+    /** The state of the value, such as `Value hidden`. */
+    valueState?: ReactNode;
+    /** A short fact, such as when it was last rotated. */
+    meta?: ReactNode;
+    /** The control at the right, normally a ghost Button. */
+    action?: ReactNode;
+}
+/** One stored credential, showing where it is kept and never its value. */
+export declare const CredentialRow: import("react").ForwardRefExoticComponent<CredentialRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CredentialRow/index.d.ts

@@ -0,0 +1 @@
+export * from './CredentialRow';

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

@@ -0,0 +1,115 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type FilterOption } from '../Filters';
+import { type TableCellAlign, type TableDensity } from '../Table';
+export type DataTableSortDirection = 'ascending' | 'descending';
+export interface DataTableSort {
+    /** The `id` of the sorted column. */
+    columnId: string;
+    /** The direction. */
+    direction: DataTableSortDirection;
+}
+/** The chosen values of each filter, by filter `id`. */
+export type DataTableFilterValues = Record<string, string[]>;
+export interface DataTableColumn<T> {
+    /** Unique within the table. */
+    id: string;
+    /** The column heading. */
+    header: ReactNode;
+    /** Renders the content of a cell. */
+    cell: (row: T) => ReactNode;
+    /** Lets the person sort by this column. Requires `sortAccessor`. */
+    sortable?: boolean;
+    /** The value to sort by. Numbers sort numerically, and strings by natural order. It also feeds the default search. */
+    sortAccessor?: (row: T) => string | number;
+    /** Column width, in pixels or any CSS length. */
+    width?: number | string;
+    /** Horizontal alignment of the heading and cells. */
+    align?: TableCellAlign;
+    /** Keeps the heading for assistive technology only, for a column such as row actions. */
+    hideHeader?: boolean;
+}
+export interface DataTableFilter<T> {
+    /** Unique within the table. */
+    id: string;
+    /** The name of the filter, such as `Status`. */
+    label: string;
+    /** The value of a row for this filter. */
+    accessor: (row: T) => string;
+    /** The options to offer. Defaults to the values found in `rows`. Counts default to the matching rows. */
+    options?: FilterOption[];
+}
+export interface DataTableProps<T> extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** The columns, in order. */
+    columns: DataTableColumn<T>[];
+    /** All of the rows. Sorting, filtering, search and pagination happen here, on the client. */
+    rows: T[];
+    /** A stable, unique ID for a row. */
+    getRowId: (row: T) => string;
+    /** Text naming the row, used for the accessible name of its checkbox. Defaults to its ID. */
+    getRowLabel?: (row: T) => string;
+    /** The heading in the toolbar, which also names the table. */
+    title?: ReactNode;
+    /** What the rows are, in the plural, such as `projects`. Used in default messages. */
+    itemLabel?: string;
+    /** Row height. */
+    density?: TableDensity;
+    /** The sort, when controlled. Use `null` for no sort. */
+    sort?: DataTableSort | null;
+    /** The first sort, when uncontrolled. */
+    defaultSort?: DataTableSort | null;
+    /** Called when the sort changes. */
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** The filters on offer. */
+    filters?: DataTableFilter<T>[];
+    /** The chosen filter values, when controlled. */
+    filterValues?: DataTableFilterValues;
+    /** The first chosen filter values, when uncontrolled. */
+    defaultFilterValues?: DataTableFilterValues;
+    /** Called when the chosen filter values change. */
+    onFilterValuesChange?: (values: DataTableFilterValues) => void;
+    /** Shows the search box. */
+    searchable?: boolean;
+    /** The search text, when controlled. */
+    search?: string;
+    /** The first search text, when uncontrolled. */
+    defaultSearch?: string;
+    /** Called when the search text changes. */
+    onSearchChange?: (search: string) => void;
+    /** The text a row is searched by. Defaults to the sort values of its columns. */
+    getSearchText?: (row: T) => string;
+    /** Placeholder and accessible name of the search box. Defaults to one built from `itemLabel`. */
+    searchPlaceholder?: string;
+    /** The one-based page, when controlled. */
+    page?: number;
+    /** The first one-based page, when uncontrolled. */
+    defaultPage?: number;
+    /** Called when the page changes. */
+    onPageChange?: (page: number) => void;
+    /** How many rows a page holds. */
+    pageSize?: number;
+    /** Adds a checkbox to each row. The header checkbox selects every row on the current page. */
+    selectable?: boolean;
+    /** The IDs of the selected rows, when controlled. */
+    selectedRowIds?: string[];
+    /** The IDs of the first selected rows, when uncontrolled. */
+    defaultSelectedRowIds?: string[];
+    /** Called when the selection changes. */
+    onSelectedRowIdsChange?: (ids: string[]) => void;
+    /** Shows placeholder rows while the data loads. */
+    loading?: boolean;
+    /** Title of the empty state, shown when `rows` is empty. */
+    emptyTitle?: ReactNode;
+    /** Description of the empty state. */
+    emptyDescription?: ReactNode;
+    /** The next step in the empty state, normally a Button. */
+    emptyAction?: ReactNode;
+    /** Title shown when filters and search match nothing. */
+    noResultsTitle?: ReactNode;
+    /** Description shown when filters and search match nothing. */
+    noResultsDescription?: ReactNode;
+}
+/**
+ * A complete table: sort, search, column filters, row selection, pagination, and loading, empty and no-results states.
+ * Everything runs on the client. Sort, filters, search and page each work controlled or uncontrolled.
+ */
+export declare const DataTable: <T>(props: DataTableProps<T> & RefAttributes<HTMLElement>) => ReactElement;

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

@@ -0,0 +1 @@
+export * from './DataTable';

package/dist/components/DataTable/useControllable.d.ts

@@ -0,0 +1,2 @@
+/** State that a caller may own. When `controlled` is undefined the hook keeps the value itself. */
+export declare function useControllable<T>(controlled: T | undefined, initial: T, onChange?: (value: T) => void): [T, (value: T) => void];

package/dist/components/DateField/DateField.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from '../Input';
+export type DateFieldProps = Omit<InputProps, 'type' | 'leadingIcon' | 'trailingIcon'>;
+/** A native date input styled like Input. Values use the native `YYYY-MM-DD` format, and `min` and `max` apply. */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/DateField/index.d.ts

@@ -0,0 +1 @@
+export * from './DateField';

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

@@ -0,0 +1,42 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type WeekStart } from '../Calendar/dateUtils';
+export interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children'> {
+    /** The chosen day, when controlled. Use a Date at local midnight, or null for none. */
+    value?: Date | null;
+    /** The first chosen day, when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Called with the day, at local midnight, when one is chosen. Called with null when it is cleared. */
+    onChange?: (date: Date | null) => void;
+    /** Text shown when no day is chosen. */
+    placeholder?: string;
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag. It can be focused but not opened. */
+    locked?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** The earliest day that can be chosen. */
+    min?: Date;
+    /** The latest day that can be chosen. */
+    max?: Date;
+    /** Returns true for a day that can't be chosen. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** BCP 47 locale for names and numbers. Leave out to use the browser's locale. */
+    locale?: string;
+    /** The first column of the grid: 0 is Sunday and 1 is Monday. */
+    weekStartsOn?: WeekStart;
+    /** The day marked as today. Defaults to now. Pass it for repeatable tests. */
+    today?: Date;
+    /** Shows a clear button while a day is chosen. */
+    clearable?: boolean;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Accessible name of the popup. */
+    popupLabel?: string;
+    /** Accessible name of the previous month button. */
+    previousMonthLabel?: string;
+    /** Accessible name of the next month button. */
+    nextMonthLabel?: string;
+}
+/** A single date: a trigger shaped like Select, and a popup calendar that closes once a day is picked. */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,87 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type DateRange, type WeekStart } from '../Calendar/dateUtils';
+import { type DateRangePreset } from './DateRangePresets';
+/** The words of a DateRangePicker, for translating it. */
+export interface DateRangePickerLabels {
+    /** Helper text while waiting for the first date. */
+    selectStart: string;
+    /** Helper text while waiting for the second date. */
+    selectEnd: string;
+    /** Helper text when a full range waits for Apply. */
+    confirm: string;
+    /** Explains `minDays` and `maxDays`. */
+    limit: (minDays: number | undefined, maxDays: number | undefined) => string;
+    /** Explains why a range can't reach past a disabled date. */
+    noDisabledInRange: string;
+    /** Announced when the first date is chosen. */
+    announceStart: (date: string) => string;
+    /** Announced when the range is complete. */
+    announceRange: (start: string, end: string) => string;
+    /** Announced when a selection is dropped. */
+    announceCancel: string;
+    /** Announced when the range is cleared. */
+    announceClear: string;
+    /** The Apply button. */
+    apply: string;
+    /** The Cancel button. */
+    cancel: string;
+    /** Accessible name of the clear button. */
+    clear: string;
+    /** Accessible name of the popup. */
+    popup: string;
+    /** Accessible name of the preset list. */
+    presets: string;
+    /** Accessible name of the previous month button. */
+    previousMonth: string;
+    /** Accessible name of the next month button. */
+    nextMonth: string;
+}
+export interface DateRangePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children'> {
+    /** The chosen range, when controlled. Use Dates at local midnight. */
+    value?: DateRange;
+    /** The first chosen range, when uncontrolled. */
+    defaultValue?: DateRange;
+    /** Called with the range, in order and at local midnight, when it is complete. Both ends are null when it is cleared. */
+    onChange?: (range: DateRange) => void;
+    /** Text shown when no range is chosen. */
+    placeholder?: string;
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag. It can be focused but not opened. */
+    locked?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** The earliest day that can be chosen. */
+    min?: Date;
+    /** The latest day that can be chosen. */
+    max?: Date;
+    /** Returns true for a day that can't be chosen. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** The fewest days a range can include, counting both ends. Shorter choices are disabled once a start date is chosen. */
+    minDays?: number;
+    /** The most days a range can include, counting both ends. Longer choices are disabled once a start date is chosen. */
+    maxDays?: number;
+    /** Lets a range run across a disabled day. Neither end can be on one. */
+    allowDisabledInRange?: boolean;
+    /** Keeps the popup open after the second date, until Apply or Cancel. */
+    requireApply?: boolean;
+    /** Ranges to offer in a side list. */
+    presets?: DateRangePreset[];
+    /** How many months to show. Two sit side by side, and stack when there isn't room. */
+    months?: 1 | 2;
+    /** BCP 47 locale for names and numbers. Leave out to use the browser's locale. */
+    locale?: string;
+    /** The first column of the grid: 0 is Sunday and 1 is Monday. */
+    weekStartsOn?: WeekStart;
+    /** The day marked as today and used by `presets`. Defaults to now. Pass it for repeatable tests. */
+    today?: Date;
+    /** Shows a clear button while a range is chosen. */
+    clearable?: boolean;
+    /** Replaces any of the words, for translating. */
+    labels?: Partial<DateRangePickerLabels>;
+}
+/**
+ * Picks two dates: the first click sets the start, the second sets the end. Moving the pointer or keyboard focus previews
+ * the range, reversed dates are swapped, and Escape or an outside press drops the selection and keeps the previous value.
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import { type DateRange } from '../Calendar/dateUtils';
+export interface DateRangePreset {
+    /** The text shown for the preset. */
+    label: string;
+    /** Works out the range, relative to the day given as today. */
+    getRange: (today: Date) => DateRange;
+}
+export interface DateRangePresetsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** The presets, in order. */
+    presets: DateRangePreset[];
+    /** The day the presets are worked out from. */
+    today: Date;
+    /** The current range. The preset that matches it is marked. */
+    value?: DateRange;
+    /** Called with the preset and its range when one is chosen. */
+    onSelect?: (range: DateRange, preset: DateRangePreset) => void;
+    /** Returns true for a range that can't be used. Its preset is disabled. */
+    isRangeDisabled?: (range: DateRange) => boolean;
+    /** Accessible name of the list. */
+    'aria-label'?: string;
+}
+/** The side list of a DateRangePicker: ranges such as "Last 7 days", worked out from `today`. */
+export declare const DateRangePresets: import("react").ForwardRefExoticComponent<DateRangePresetsProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,10 @@
+import { type DateRange } from '../Calendar/dateUtils';
+import { type DateTriggerInternalProps } from '../Calendar/DateTriggerInternal';
+export interface DateRangeTriggerProps extends Omit<DateTriggerInternalProps, 'text'> {
+    /** The range to show, as `12 Mar 2026 – 18 Mar 2026`. */
+    value?: DateRange | null;
+    /** BCP 47 locale for the dates. Leave out to use the browser's locale. */
+    locale?: string;
+}
+/** The control that opens a DateRangePicker. It looks like Select and reads a surrounding Field. */
+export declare const DateRangeTrigger: import("react").ForwardRefExoticComponent<DateRangeTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,3 @@
+export * from './DateRangePicker';
+export * from './DateRangePresets';
+export * from './DateRangeTrigger';

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

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type RefObject } from 'react';
+export type DialogSize = 'sm' | 'md' | 'lg';
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the dialog is showing. Leave undefined to use `defaultOpen` and let the dialog manage itself. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the user closes the dialog. */
+    onClose?: () => void;
+    /** Whether Escape, a backdrop press and the header's close button can close the dialog. */
+    dismissible?: boolean;
+    /** Panel width: `sm` is 400 px, `md` is 560 px and `lg` is 720 px. */
+    size?: DialogSize;
+    /** Element to focus on open. Defaults to the first focusable element. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** `alertdialog` for a message that interrupts and needs a response. */
+    role?: 'dialog' | 'alertdialog';
+}
+/**
+ * A modal window. Compose it from DialogHeader, DialogBody and DialogFooter. Traps focus, restores it on close,
+ * locks body scroll and renders in a portal. A DialogHeader names and describes the dialog automatically.
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type DialogBodyProps = HTMLAttributes<HTMLDivElement>;
+/** The main content of a Dialog or Drawer. Scrolls when the content is taller than the space available. */
+export declare const DialogBody: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
+/** Right-aligned actions at the bottom of a Dialog or Drawer. Use at most one primary Button. */
+export declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface DialogHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The title, which also becomes the modal's accessible name. */
+    title: ReactNode;
+    /** Supporting text, which also becomes the modal's accessible description. */
+    description?: ReactNode;
+    /** Called by the close button. Defaults to closing the surrounding modal, when it is dismissible. */
+    onClose?: () => void;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+    /** Hides the close button even when the modal can be closed. */
+    hideClose?: boolean;
+}
+/** Title, optional description and close button at the top of a Dialog or Drawer. */
+export declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;