@ostack.tech/ui 0.10.5 → 0.11.0

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

@@ -13,13 +13,13 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Alert variant.
      *
-     * @default subtle
+     * @default "subtle"
      */
     variant?: AlertVariant;
     /**
      * Sets the alert's severity.
      *
-     * @default info
+     * @default "info"
      */
     severity?: AlertSeverity;
     /**
@@ -34,7 +34,7 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
      *   current speech to announce this immediately (recommended for critical
      *   errors that appear and should stop the user's flow).
      *
-     * @default off
+     * @default "off"
      */
     announce?: AlertAnnounce;
     /** Alert action. */

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

@@ -5,8 +5,7 @@ import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
  *
  * Built on top of the [Radix Alert Dialog
  * primitive](https://www.radix-ui.com/primitives/docs/components/alert-dialog),
- * and the [`Card`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-card--docs).
+ * and the [`Card` component](?path=/docs/ostack-ui-data-display-card--docs).
  *
  * It composes the following subcomponents:
  *
@@ -78,5 +77,10 @@ import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
  *   );
  * }
  * ```
+ *
+ * > **Note:** In many scenarios you might prefer to use the [`useAlertDialog`
+ * > hook](?path=/docs/ostack-ui-overlay-alert-dialog--docs#usealertdialog-hook)
+ * > instead, which provides an imperative API for triggering “alert”, “confirm”,
+ * > or “prompt” dialogs.
  */
 export declare const AlertDialog: import('react').FC<AlertDialogPrimitive.AlertDialogProps>;

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

@@ -29,19 +29,19 @@ export interface ButtonOwnProps {
     /**
      * Button's variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: ButtonVariant;
     /**
      * Button's colour.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: ButtonColor;
     /**
      * Size of the button.
      *
-     * @default md
+     * @default "md"
      */
     size?: ButtonSize;
     /**
@@ -62,7 +62,7 @@ export interface ButtonOwnProps {
      * Whether to display the icon at the start or end of the button. This
      * property also affects the placement of the spinner.
      *
-     * @default start
+     * @default "start"
      */
     iconPlacement?: ButtonIconPlacement;
     /**
@@ -130,9 +130,9 @@ export interface ButtonOwnProps {
      * the end of the button's tooltip for visual users and announced to screen
      * readers via `aria-keyshortcuts`.
      *
-     * **Note:** This property does **not** automatically register a keyboard
-     * shortcut to run the button's action. This should be done manually via
-     * _e.g._ the `useKeyboardShortcut` hook.
+     * > **Note:** This property does **not** automatically register a keyboard
+     * > shortcut to run the button's action. This should be done manually via
+     * > _e.g._ the `useKeyboardShortcut` hook.
      */
     keybinds?: KeyboardShortcutKeybinds;
     /** Properties to pass to the icon component. */

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

@@ -2,8 +2,38 @@ import { ComponentPropsWithRef } from 'react';
 import { DayPickerProps } from 'react-day-picker';
 import { IconButton } from '../IconButton';
 import { Select } from '../Select';
+/** Mode for selecting calendar dates. */
+export type CalendarSelectionMode = "none" | "single" | "multiple" | "range" | "range-start" | "range-end";
+/** Accepted range of dates from a start date to an end date. */
+export interface AcceptedDateRange {
+    /** Start of the date-range. */
+    start?: string | Date | null;
+    /** End of the date-range. */
+    end?: string | Date | null;
+}
+/** A range of dates from a start date to an end date. */
+export interface DateRange {
+    /** Start of the date-range. */
+    start: Date | null;
+    /** End of the date-range. */
+    end: Date | null;
+}
 /** Properties of the calendar component. */
-export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected" | "onSelect" | "classNames" | "modifiersClassNames" | "styles" | "modifiersStyles" | "fromDate" | "toDate" | "fromMonth" | "toMonth" | "fromYear" | "toYear" | "startMonth" | "endMonth" | "reverseMonths" | "captionLayout" | "navLayout" | "components" | "locale" | "labels" | "formatters" | "dir" | "dateLib"> {
+export type CalendarProps = CalendarNoneSelectionProps | CalendarSingleSelectionProps | CalendarMultipleSelectionProps | CalendarRangeSelectionProps;
+/** Base properties of the calendar component. */
+export interface CalendarPropsBase<TValue extends Date | Date[] | DateRange | null = Date | Date[] | DateRange | null> extends Pick<DayPickerProps, "required" | "className" | "style" | "id" | "defaultMonth" | "month" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "fixedWeeks" | "hideWeekdays" | "showOutsideDays" | "showWeekNumber" | "broadcastCalendar" | "ISOWeek" | "timeZone" | "noonSafe" | "footer" | "autoFocus" | "disabled" | "hidden" | "today" | "modifiers" | "aria-label" | "aria-labelledby" | "numerals" | "weekStartsOn" | "firstWeekContainsDate" | "useAdditionalWeekYearTokens" | "useAdditionalDayOfYearTokens" | "onMonthChange" | "onNextClick" | "onPrevClick" | "onDayClick" | "onDayFocus" | "onDayBlur" | "onDayKeyDown" | "onDayMouseEnter" | "onDayMouseLeave"> {
+    /**
+     * Mode for selecting calendar dates.
+     *
+     * @default none
+     */
+    selectionMode?: CalendarSelectionMode;
+    /** Value selected by default. */
+    defaultValue?: string | Date | (string | Date)[] | AcceptedDateRange | null;
+    /** Controlled selected value. */
+    value?: string | Date | (string | Date)[] | AcceptedDateRange | null;
+    /** Function called when the selected value changes. */
+    onValueChange?: (value: TValue) => void;
     /** Minimum date allowed. */
     minDate?: string | Date | null;
     /** Maximum date allowed. */
@@ -37,8 +67,34 @@ export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected"
     /** Properties to pass to the year select component. */
     yearSelectProps?: Omit<ComponentPropsWithRef<typeof Select>, "multiple" | "defaultValue" | "value">;
 }
+/** Properties of the calendar component in none selection mode. */
+export interface CalendarNoneSelectionProps extends CalendarPropsBase<never> {
+    selectionMode?: "none";
+}
+/** Properties of the calendar component in single selection mode. */
+export interface CalendarSingleSelectionProps extends CalendarPropsBase<Date | null> {
+    selectionMode: "single";
+}
+/** Properties of the calendar component in multiple selection mode. */
+export interface CalendarMultipleSelectionProps extends CalendarPropsBase<Date[]> {
+    selectionMode: "multiple";
+}
+/** Properties of the calendar component in range selection mode. */
+export interface CalendarRangeSelectionProps extends CalendarPropsBase<DateRange> {
+    selectionMode: "range" | "range-start" | "range-end";
+}
 /**
- * Calendar component built on top of [React
- * DayPicker](https://react-day-picker.js.org).
+ * Interactive calendar built on top of the [React
+ * DayPicker](https://react-day-picker.js.org/) library.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Calendar } from "@ostack.tech/ui";
+ *
+ * function CurrentMonth() {
+ *   return <Calendar />;
+ * }
+ * ```
  */
-export declare function Calendar({ required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, monthSelectLabel, yearSelectLabel, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, numberOfMonths, showOutsideDays, fixedWeeks, disableNavigation, disabled, modifiers, headerProps, headerLabelProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ selectionMode, defaultValue, value: controlledValue, onValueChange, required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, monthSelectLabel, yearSelectLabel, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, onDayFocus, onDayMouseEnter, numberOfMonths, fixedWeeks, showOutsideDays, disableNavigation, disabled, modifiers, headerProps, headerLabelProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,7 +15,7 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Card variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: CardVariant;
     /**
@@ -29,7 +29,7 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Card color.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: CardColor;
 }

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

@@ -13,7 +13,7 @@ export interface CodeProps extends ComponentPropsWithoutRef<"code"> {
     /**
      * Code colour.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: CodeColor;
 }

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

@@ -1,15 +1,15 @@
 import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
-/** Direction in which to collapse/expand content. */
-export type CollapsibleDirection = "horizontal" | "vertical";
+/** Orientation in which to collapse/expand content. */
+export type CollapsibleOrientation = "horizontal" | "vertical";
 /** Properties of the collapsible component. */
 export interface CollapsibleProps extends ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> {
     /**
-     * Direction in which to collapse/expand content.
+     * Orientation in which to collapse/expand content.
      *
      * @default vertical
      */
-    direction?: CollapsibleDirection;
+    orientation?: CollapsibleOrientation;
 }
 /**
  * The collapsible component is an interactive component that expands/collapses
@@ -17,9 +17,27 @@ export interface CollapsibleProps extends ComponentPropsWithoutRef<typeof Collap
  *
  * It composes the following subcomponents:
  *
- * - `CollapsibleTrigger`: A trigger, such as an icon, that visually indicates and
- *   controls the expanded/collapsed states.
- * - `CollapsibleContent`: The content that are shown or hidden based on trigger's
- *   state.
+ * - `CollapsibleTrigger`: Trigger that toggles the collapsible content between
+ *   expanded/collapsed.
+ * - `CollapsibleContent`: Component containing the collapsible content.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Collapsible,
+ *   CollapsibleContent,
+ *   CollapsibleTrigger,
+ * } from "@ostack.tech/ui";
+ *
+ * function ShowMore() {
+ *   return (
+ *     <Collapsible>
+ *       <CollapsibleTrigger />
+ *       <CollapsibleContent>…</CollapsibleContent>
+ *     </Collapsible>
+ *   );
+ * }
+ * ```
  */
 export declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Collapsible/CollapsibleContext.d.ts

@@ -1,8 +1,8 @@
-import { CollapsibleDirection } from './Collapsible.tsx';
+import { CollapsibleOrientation } from './Collapsible.tsx';
 /** Value of the collapsible context. */
 export interface CollapsibleContextValue {
     open: boolean;
-    direction: CollapsibleDirection;
+    orientation: CollapsibleOrientation;
 }
 /** Collapsible context. */
 export declare const CollapsibleContext: import('react').Context<CollapsibleContextValue | null>;

package/dist/types/components/Collapsible/CollapsibleTrigger.d.ts

@@ -1,10 +1,26 @@
-import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { IconProp } from '../Icon/Icon.tsx';
+import { IconButton } from '../IconButton';
 /** Properties of the collapsible trigger component. */
-export interface CollapsibleTriggerProps extends Omit<ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>, "asChild" | "children"> {
-    defaultTriggerCollapseLabel?: string;
-    defaultTriggerExpandLabel?: string;
-    children?: ReactNode | ((open: boolean) => ReactNode);
+export type CollapsibleTriggerProps = CollapsibleTriggerChildlessProps | CollapsibleTriggerChildrenProps;
+/**
+ * Properties of the collapsible trigger component when rendered without
+ * children.
+ */
+export interface CollapsibleTriggerChildlessProps extends Omit<Partial<ComponentPropsWithoutRef<typeof IconButton>>, "asChild" | "children"> {
+    /** Icon used for the trigger icon button when the collapsible is collapsed. */
+    expandIcon?: IconProp | ReactElement;
+    /** Icon used for the trigger icon button when the collapsible is expanded. */
+    collapseIcon?: IconProp | ReactElement;
+    /** Label used for the trigger icon button when the collapsible is collapsed. */
+    expandLabel?: ReactNode;
+    /** Label used for the trigger icon button when the collapsible is expanded. */
+    collapseLabel?: ReactNode;
+    children?: never;
+}
+/** Properties of the collapsible trigger component when rendered with children. */
+export interface CollapsibleTriggerChildrenProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+    children: ReactNode | ((open: boolean) => ReactNode);
 }
 /** Trigger that toggles the expansion of the collapsible content. */
 export declare const CollapsibleTrigger: import('react').ForwardRefExoticComponent<CollapsibleTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -65,7 +65,7 @@ export interface CommandMenuProps extends ComponentPropsWithoutRef<typeof Comman
  *
  * Built on top of the [cmdk Command primitive](https://github.com/dip/cmdk/)
  * and the [`MenuList`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-menu-list--docs).
+ * component](?path=/docs/ostack-ui-data-display-menu-list--docs).
  *
  * It composes the following subcomponents:
  *

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

@@ -1,8 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Breakpoint } from '../../utils/breakpoints.ts';
 import { Responsive } from '../../utils/useResponsiveValues.ts';
-/** Value specifying up to which breakpoint the container should be fluid. */
-export type ContainerFluidUntil = Omit<Breakpoint, "xs">;
+/** Breakpoints accepted by the container. */
+export type ContainerSize = Exclude<Breakpoint, "xs">;
 /** Properties of the container component. */
 export interface ContainerProps extends ComponentPropsWithoutRef<"div"> {
     /**
@@ -17,10 +17,17 @@ export interface ContainerProps extends ComponentPropsWithoutRef<"div"> {
      *
      * @default "sm"
      */
-    fluid?: ContainerFluidUntil | true;
+    fluid?: ContainerSize | true;
     /**
-     * Size of the left and right margins of the container. When a number `n` is
-     * provided, each unit corresponds to `spacing(n)`.
+     * Control how wide the container is allowed to grow.
+     *
+     * By default, no maximum width is set. Unless `fluid` is set to `true`, the
+     * container is effectively capped by the largest breakpoint (`"xxl"`).
+     */
+    maxWidth?: ContainerSize | number | (string & {});
+    /**
+     * Size of the left and right margins of the container. When a number is
+     * provided, each unit corresponds to `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the gutter size based on the
      * current breakpoint.
@@ -29,8 +36,8 @@ export interface ContainerProps extends ComponentPropsWithoutRef<"div"> {
      */
     gutter?: Responsive<number | string>;
     /**
-     * Size of the left margin of the container. When a number `n` is provided,
-     * each unit corresponds to `spacing(n)`.
+     * Size of the left margin of the container. When a number is provided, each
+     * unit corresponds to `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the gutter size based on the
      * current breakpoint.
@@ -39,8 +46,8 @@ export interface ContainerProps extends ComponentPropsWithoutRef<"div"> {
      */
     leftGutter?: Responsive<number | string>;
     /**
-     * Size of the right margin of the container. When a number `n` is provided,
-     * each unit corresponds to `spacing(n)`.
+     * Size of the right margin of the container.When a number is provided, each
+     * unit corresponds to `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the gutter size based on the
      * current breakpoint.
@@ -59,7 +66,11 @@ export interface ContainerProps extends ComponentPropsWithoutRef<"div"> {
  * import { Container } from "@ostack.tech/ui";
  *
  * function App() {
- *   return <Container>…</Container>;
+ *   return (
+ *     <Container>
+ *       <Item>…</Item>
+ *     </Container>
+ *   );
  * }
  * ```
  */

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

@@ -46,7 +46,7 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      * Display mode of the data table. Rows are displayed either in pages or
      * within an infinite scroll component.
      *
-     * @default paged
+     * @default "paged"
      */
     displayMode?: DataTableDisplayMode;
     /** Data table columns. */
@@ -87,14 +87,14 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      *
      * @default 0
      */
-    defaultOffset?: number;
+    defaultOffset?: number | string;
     /**
      * Controlled offset from which to display rows. When in paged mode, the
      * actually used offset will always be a multiple of `limit`.
      *
      * Use together with `onOffsetChange` to control the offset.
      */
-    offset?: number;
+    offset?: number | string;
     /**
      * Function called whenever the offset changes.
      *
@@ -106,13 +106,13 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      *
      * @default 10
      */
-    defaultLimit?: number;
+    defaultLimit?: number | string;
     /**
      * Controlled value used to limit the number of rows shown on screen.
      *
      * Use together with `onLimitChange` to control the limit.
      */
-    limit?: number;
+    limit?: number | string;
     /**
      * Function called whenever the limit changes.
      *
@@ -147,13 +147,13 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      */
     sortBy?: string | null;
     /** Default sort direction. */
-    defaultSortDirection?: SortDirection;
+    defaultSortDirection?: SortDirection | (string & {});
     /**
      * Controlled sort direction.
      *
      * Use together with `onSort` to change the sort direction.
      */
-    sortDirection?: SortDirection;
+    sortDirection?: SortDirection | (string & {});
     /**
      * Function called whenever the sorting of data changes.
      *
@@ -242,30 +242,64 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
     apiRef?: Ref<DataTableApi<T> | undefined>;
 }
 /**
- * The `DataTable` component is the root component used for displaying a data
- * table. It supports features such as different display modes (paged or
- * scrolled), pagination, dynamic data loading, custom rows and cells, sorting,
- * and filtering, allowing flexible data table functionality via configuration.
+ * The data table component allows displaying, browsing, sorting, and filtering
+ * large amounts of structured data. Built on top of the [`Table`
+ * component](?path=/docs/ostack-ui-data-display-table--docs).
  *
  * It composes the following subcomponents:
  *
- * - `DataTableContent`: Represents the core content area of the `DataTable`,
- *   containing the table itself, including its head and body. It is responsible
- *   for rendering the main parts of the `DataTable`.
- * - `DataTableFilter`: Implements filtering functionality, allowing users to
- *   filter displayed data based on specific conditions.
- * - `DataTablePagination`: Component responsible for handling the pagination
- *   functionality of the `DataTable`. Allows control over which page of the
- *   table to display (when in "paged" mode), or insight into the rows being
- *   currently rendered (in "scrolled" mode).
- * - `DataTableRowsPerPage`: Component which allows the user to control the
- *   `limit` property of the `DataTable`, i.e. how many rows to display per page
- *   in "paged" mode or how many rows to display at once in "scrolled" mode.
- * - `DataTableRow`: Represents an individual row of the `DataTable`. This
- *   component is only relevant when providing a custom data table row via
- *   `renderRow`.
- * - `DataTableCell`: Represents an individual cell of the `DataTable`. This
- *   component is only relevant when providing a custom data table cell via
- *   `renderCell`.
+ * - `DataTableContent`: Main content of the data table, containing the table
+ *   itself.
+ * - `DataTablePagination`: Pagination component of the data table, allowing the
+ *   selection of the current page in `paged` mode and showing the current
+ *   progress in `scrolled` mode.
+ * - `DataTableFilter`: Optional input used for filtering the rows of the data
+ *   table.
+ * - `DataTableRowsPerPage`: Optional component allowing the selection of the
+ *   number of rows to display per page.
+ * - `DataTableSelectionTrigger`: Optional trigger for acting on selected rows.
+ * - `DataTableRow`: Individual row of the data table. Shouldn't be used in most
+ *   scenarios (use in `renderRow` when appropriate).
+ * - `DataTableCell`: Individual cell of the data table. Shouldn't be used in most
+ *   scenarios (use in `renderCell` when appropriate).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   DataTable,
+ *   DataTablePagination,
+ *   DataTableRowsPerPage,
+ * } from "@ostack.tech/ui";
+ *
+ * function InventoryTable() {
+ *   return (
+ *     <DataTable
+ *       columns={{
+ *         sku: { label: "SKU", header: true },
+ *         product: { label: "Product" },
+ *         category: { label: "Category" },
+ *         stock: { label: "Stock" },
+ *         condition: { label: "Condition" },
+ *       }}
+ *       rowKey="sku"
+ *       rows={[
+ *         {
+ *           sku: "KB-992",
+ *           product: "Mechanical Keyboard",
+ *           category: "Peripherals",
+ *           stock: 42,
+ *           condition: "New",
+ *         },
+ *         // …
+ *       ]}
+ *     >
+ *       <DataTableContent caption="Inventory" />
+ *       <DataTableRowsPerPage />
+ *       <DataTablePagination />
+ *     </DataTable>
+ *   );
+ * }
+ * ```
  */
 export declare const DataTable: import('react').ForwardRefExoticComponent<DataTableProps<any> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -49,7 +49,9 @@ export interface DataTableState<T = any> {
     offset: () => number;
     currentPage: () => number;
     pageOffset: () => number;
-    limit: number;
+    limitOptions?: number[];
+    _limit: number;
+    limit: () => number;
     pageLimit: () => number | undefined;
     filter: string;
     sortBy: string | null;

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
-import { DatePicker } from '../DatePicker';
+import { Calendar } from '../Calendar';
 import { Input } from '../Input';
 import { PopoverContent } from '../Popover';
 /** Properties of the date input component. */
@@ -46,8 +46,8 @@ export interface DateInputProps extends Omit<ComponentPropsWithoutRef<typeof Inp
     calendarButtonLabel?: ReactNode;
     /** Function called whenever the popover's open state changes. */
     onPopoverOpenChange?: (open: boolean) => void;
-    /** Properties to pass to the date picker component. */
-    datePickerProps?: Omit<ComponentPropsWithRef<typeof DatePicker>, "value" | "defaultValue" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear" | "locale">;
+    /** Properties to pass to the calendar component. */
+    calendarProps?: Omit<ComponentPropsWithRef<typeof Calendar>, "selectionMode" | "defaultValue" | "value" | "onValueChange" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear">;
     /** Properties to pass to the popover content component. */
     popoverContentProps?: ComponentPropsWithRef<typeof PopoverContent>;
 }
@@ -60,8 +60,11 @@ export interface DateValueRepresentations {
 }
 /**
  * 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>`
+ * of a popover calendar. It is built on top of the
+ * [`Input`](?path=/docs/ostack-ui-forms-input--docs),
+ * [`Popover`](?path=/docs/ostack-ui-overlay-popover--docs), and
+ * [`Calendar`](?path=/docs/ostack-ui-data-display-calendar--docs) 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`

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

@@ -1,9 +1,9 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, FocusEvent, ReactNode } from 'react';
 import { ControlStatus, ControlVariant } from '../../utils/control.ts';
 import { Responsive } from '../../utils/useResponsiveValues.ts';
+import { Calendar, DateRange } from '../Calendar';
 import { CloseButton } from '../CloseButton';
 import { ControlCode } from '../ControlCode';
-import { DateRange, DateRangePicker } from '../DateRangePicker';
 import { ShowClearButton } from '../Input';
 import { PopoverAnchor, PopoverContent } from '../Popover';
 import { Spinner } from '../Spinner';
@@ -190,7 +190,7 @@ export interface DateRangeInputProps extends Omit<ComponentPropsWithoutRef<"div"
     /** Properties to pass to the spinner component. */
     spinnerProps?: Omit<ComponentPropsWithRef<typeof Spinner>, "size">;
     /** Properties to pass to the date-range picker component. */
-    dateRangePickerProps?: Omit<ComponentPropsWithRef<typeof DateRangePicker>, "value" | "defaultValue" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear" | "locale">;
+    calendarProps?: Omit<ComponentPropsWithRef<typeof Calendar>, "selectionMode" | "defaultValue" | "value" | "onValueChange" | "minDate" | "maxDate" | "minMonth" | "maxMonth" | "minYear" | "maxYear">;
     /** Properties to pass to the popover content component. */
     popoverContentProps?: ComponentPropsWithRef<typeof PopoverContent>;
 }
@@ -204,9 +204,10 @@ export interface DateRangeValueRepresentations {
 /**
  * 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)).
+ * of the [`Popover`](?path=/docs/ostack-ui-overlay-popover--docs) and
+ * [`Calendar`](?path=/docs/ostack-ui-data-display-calendar--docs) components,
+ * as well as 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

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

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { GridContainerProps } from '../Grid';
+/** Properties of the description list component. */
+export interface DescriptionListProps extends Pick<GridContainerProps, "asChild" | "columns" | "gap" | "rowGap" | "columnGap">, ComponentPropsWithoutRef<"dl"> {
+}
+/**
+ * A list of descriptions pairing terms with their associated details. Built on
+ * top of the browser's
+ * [`<dl>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl),
+ * [`<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt),
+ * and
+ * [`<dd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd)
+ * elements, as well as the [`Grid`
+ * component](?path=/docs/ostack-ui-layout-grid--docs) for layout.
+ *
+ * It composes the following subcomponent:
+ *
+ * - `DescriptionListItem`: A single term and details pair.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { DescriptionList, DescriptionListItem } from "@ostack.tech/ui";
+ *
+ * function UserInformation() {
+ *   return (
+ *     <DescriptionList>
+ *       <DescriptionListItem term="Username">aacevedo</DescriptionListItem>
+ *       <DescriptionListItem term="Name">Ava Acevedo</DescriptionListItem>
+ *       <DescriptionListItem term="Date of birth">
+ *         1995-06-21
+ *       </DescriptionListItem>
+ *     </DescriptionList>
+ *   );
+ * }
+ * ```
+ */
+export declare const DescriptionList: import('react').ForwardRefExoticComponent<DescriptionListProps & import('react').RefAttributes<HTMLDListElement>>;