@ostack.tech/ui 0.9.2 → 0.10.0

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

@@ -5,7 +5,8 @@ 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.
+ * and the [`Card`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-card--docs).
  *
  * It composes the following subcomponents:
  *

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

@@ -146,7 +146,8 @@ export interface ButtonOwnProps {
 }
 /**
  * The button component is used to trigger actions or events, such as opening a
- * dialog or submitting a form.
+ * dialog or submitting a form. It is built on top of the browser's [`<button>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button).
  *
  * Example usage:
  *

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

@@ -0,0 +1 @@
+export declare const CalendarMonthGrid: import('react').NamedExoticComponent<import('react').TableHTMLAttributes<HTMLTableElement>>;

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

@@ -63,8 +63,9 @@ export interface CommandMenuProps extends ComponentPropsWithoutRef<typeof Comman
  * The command menu renders a menu of selectable items which can be filtered and
  * sorted via a search query.
  *
- * Built on top of the [cmdk Command primitive](https://cmdk.paco.me) and the
- * `MenuList` component.
+ * 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).
  *
  * It composes the following subcomponents:
  *

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

@@ -187,6 +187,10 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      * identifiers provided will have their selection checkboxes disabled).
      */
     disabledSelections?: Key[];
+    /** Visually hidden label of the “select all rows” checkbox. */
+    selectAllRowsLabel?: ReactNode;
+    /** Visually hidden label of a “select row” checkbox. */
+    selectRowLabel?: ReactNode;
     /**
      * Function used to render each row. This function should typically return a
      * `DataTableRow` with the provided properties. This function is useful to

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

@@ -16,6 +16,8 @@ export interface DataTableContextValue<T = any> {
     dynamicRowHeight: boolean;
     estimatedRowHeight: number | ((index: number) => number);
     overscan: number;
+    selectAllRowsLabel?: ReactNode;
+    selectRowLabel?: ReactNode;
     generatedId: string;
     showAllRowsWhilePrinting?: boolean;
     apiRef?: Ref<DataTableApi<T> | undefined>;
@@ -105,9 +107,11 @@ export interface UseCreateDataTableContextOptions<T> extends Omit<DataTableConte
     selectedRows?: Key[];
     onSelectedRowsChange?: (selectedRows: Key[]) => void;
     disabledSelections?: Key[];
+    selectAllRowsLabel?: ReactNode;
+    selectRowLabel?: ReactNode;
 }
 /** Hook which creates the data table context value. */
-export declare function useCreateDataTableContext<T>({ displayMode, columns, rows, getRows, rowKey, loadingCount, required, loading, renderRow, renderCell, dynamicRowHeight, estimatedRowHeight, overscan, showAllRowsWhilePrinting, apiRef, leafColumns, headCount, defaultOffset, offset, onOffsetChange, defaultLimit, limit, onLimitChange, defaultFilter, filter, onFilterChange, defaultSortBy, sortBy, defaultSortDirection, sortDirection, onSort, showSelectionColumn, defaultSelectedRows, selectedRows, onSelectedRowsChange, disabledSelections, }: UseCreateDataTableContextOptions<T>): {
+export declare function useCreateDataTableContext<T>({ displayMode, columns, rows, getRows, rowKey, loadingCount, required, loading, renderRow, renderCell, dynamicRowHeight, estimatedRowHeight, overscan, showAllRowsWhilePrinting, apiRef, leafColumns, headCount, defaultOffset, offset, onOffsetChange, defaultLimit, limit, onLimitChange, defaultFilter, filter, onFilterChange, defaultSortBy, sortBy, defaultSortDirection, sortDirection, onSort, showSelectionColumn, defaultSelectedRows, selectedRows, onSelectedRowsChange, disabledSelections, selectAllRowsLabel, selectRowLabel, }: UseCreateDataTableContextOptions<T>): {
     displayMode: DataTableDisplayMode;
     rowKey: string | number | symbol | ((row: any) => Key);
     required: boolean | undefined;
@@ -117,6 +121,8 @@ export declare function useCreateDataTableContext<T>({ displayMode, columns, row
     dynamicRowHeight: boolean;
     estimatedRowHeight: number | ((index: number) => number);
     overscan: number;
+    selectAllRowsLabel: ReactNode;
+    selectRowLabel: ReactNode;
     generatedId: string;
     showAllRowsWhilePrinting: boolean | undefined;
     apiRef: Ref<DataTableApi<any> | undefined> | undefined;

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

@@ -10,6 +10,8 @@ export interface DataTablePaginationProps extends ComponentPropsWithoutRef<"div"
      * @param total Total number of rows.
      */
     rowsRange?: (range: ReactNode, total: number) => ReactNode;
+    /** Label of the rows range select (only relevant in paged mode). */
+    rowsRangeSelectLabel?: (total: number) => string;
     /** Label of the previous page button (only relevant in paged mode). */
     previousPageButtonLabel?: string;
     /** Label of the next page button (only relevant in paged mode). */

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

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

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

@@ -5,7 +5,8 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
  *
  * Built on top of the [Radix Dialog
  * primitive](https://www.radix-ui.com/primitives/docs/components/dialog), and
- * the `Card` component.
+ * the [`Card`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-card--docs).
  *
  * It composes the following subcomponents:
  *

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

@@ -8,7 +8,8 @@ export interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof
  *
  * Built on top of the [Radix Dropdown Menu
  * primitive](https://www.radix-ui.com/primitives/docs/components/dropdown-menu)
- * and the `MenuList` component.
+ * and the [`MenuList`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-menu-list--docs).
  *
  * It composes the following subcomponents:
  *

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

@@ -9,12 +9,41 @@ export interface FieldProps extends ComponentPropsWithoutRef<"div"> {
     asChild?: boolean;
 }
 /**
- * The `Field` component groups form controls such as `Input`, `Select`,
- * `RadioButton`, `Checkbox`, and similar components that are used for user
- * input, with an associated `Label`, `HelperText`, and feedback such as errors
- * or validation messages.
+ * The `Field` component acts as a container that associates a form control with
+ * a label, helper text, and validation feedback.
  *
- * It provides automatic linking of the `Label` to the control, and marks the
- * control as "required" when requested by the control.
+ * Use a `Label` to identify the control, a `HelperText` to provide additional
+ * guidance or descriptions, and `Feedback` to display error, warning, or
+ * success messages.
+ *
+ * It supports the following form controls:
+ *
+ * - `Checkbox`
+ * - `CheckboxGroup`
+ * - `DataTable`
+ * - `DateInput`
+ * - `DateRangeInput`
+ * - `NumericInput`
+ * - `Input`
+ * - `RadioGroup`
+ * - `Select`
+ * - `Table`
+ * - `TextArea`
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Field, HelperText, Label, Input } from "@ostack.tech/ui";
+ *
+ * function UsernameField() {
+ *   return (
+ *     <Field>
+ *       <Label>Username</Label>
+ *       <Input />
+ *       <HelperText>May only contain alphanumeric characters.</HelperText>
+ *     </Field>
+ *   );
+ * }
+ * ```
  */
 export declare const Field: import('react').ForwardRefExoticComponent<FieldProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Field/FieldProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+/** Properties of the field provider component. */
+export interface FieldProviderProps {
+    children?: ReactNode;
+}
+/**
+ * Component providing the context necessary for auto-registration of labels,
+ * controls, helper text, and feedback.
+ *
+ * This is automatically done by the `Field` component, so they shouldn't be
+ * used together.
+ */
+export declare function FieldProvider({ children }: FieldProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,3 @@
 export * from './Field.tsx';
 export { type FieldActions, useFieldControlFocused, useFieldControlId, useFieldControlRequired, useFieldControlTagName, useFieldDescriptionIds, useFieldErrorMessageIds, useFieldLabel, useFieldLabelId, useOnFieldLabelChange, useSetFieldControl, useSetFieldControlFocused, useSetFieldFeedback, useSetFieldHelperText, useSetFieldLabel, } from './FieldContext.ts';
+export * from './FieldProvider.tsx';

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

@@ -26,7 +26,9 @@ export interface HeadingOwnProps {
     level?: HeadingLevel;
 }
 /**
- * Component used to render semantic HTML heading elements.
+ * Component used to render semantic HTML headings. It is built on top of the
+ * browser's [`<h1>`–`<h6>` heading
+ * elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements).
  *
  * Example usage:
  *

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

@@ -1,6 +1,6 @@
-import { FlipProp, IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
 export type { IconProp } from '@fortawesome/fontawesome-svg-core';
 /** Possible sizes of an icon. */
@@ -8,7 +8,7 @@ export type IconSize = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 /** Possible colours of an icon. */
 export type IconColor = AccentColor;
 /** Properties of the icon component. */
-export interface IconProps extends Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, "icon" | "size" | "flip"> {
+export interface IconProps extends Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, "icon" | "size"> {
     /** Icon to display. */
     icon: IconProp;
     /**
@@ -27,15 +27,14 @@ export interface IconProps extends Omit<ComponentPropsWithoutRef<typeof FontAwes
      * When provided, a visually hidden label is added so that assistive
      * technologies correctly announce it.
      */
-    label?: string;
-    flip?: boolean | FlipProp;
+    label?: ReactNode;
 }
 /**
  * Icon component extending the FontAwesome's `FontAwesomeIcon` component.
  *
  * Properties supported by FontAwesome are also supported by this component. For
  * more information on all supported properties, see [FontAwesome's React
- * documentation](https://docs.fontawesome.com/v5/web/use-with/react).
+ * documentation](https://docs.fontawesome.com/web/use-with/react/).
  *
  * For a list of existing icons, consult:
  * https://fontawesome.com/search?ic=free.

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

@@ -149,6 +149,13 @@ export interface IconButtonOwnProps {
  * A `label` property is required for screen-readers to give meaning to the
  * button. This label is also, by default, displayed as a tooltip.
  *
+ * Built on top of the browser's [`<button>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button),
+ * [`Icon`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-icon--docs),
+ * and [`Tooltip`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-overlay-tooltip--docs).
+ *
  * Example usage:
  *
  * ```tsx

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

@@ -123,8 +123,8 @@ export interface InputPropsBase {
  * ```tsx
  * import { Input } from "@ostack.tech/ui";
  *
- * function Search() {
- *   return <Input placeholder="Search…" />;
+ * function UsernameInput() {
+ *   return <Input placeholder="Enter username…" />;
  * }
  * ```
  */

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

@@ -9,7 +9,22 @@ export interface KeyboardProps extends ComponentPropsWithoutRef<"kbd"> {
     asChild?: boolean;
 }
 /**
- * Component used to show which key or combination of keys performs a given
- * action.
+ * Component which represents a span of inline text denoting textual user input
+ * from a keyboard, voice input, or any other text entry device. It is built on
+ * top of the browser's [`<kbd>` (keyboard input)
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function BookmarkInstructions() {
+ *   return (
+ *     <>
+ *       Press <Keyboard>Ctrl</Keyboard> + <Keyboard>D</Keyboard> to
+ *       bookmark this page.
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export declare const Keyboard: import('react').ForwardRefExoticComponent<KeyboardProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -5,9 +5,9 @@ import { Input } from '../Input';
 export interface NumericInputProps extends NumericTransformerOptions, Omit<ComponentPropsWithoutRef<typeof Input>, "defaultValue" | "value" | "onValueChange" | "type" | "min" | "max"> {
     type?: "text" | "tel" | "password";
     /** Numeric input's default value. */
-    defaultValue?: string | number | null;
+    defaultValue?: string | number | bigint | null;
     /** Numeric input's controlled value. */
-    value?: string | number | null;
+    value?: string | number | bigint | null;
     /**
      * Function called whenever the value of the numeric input changes.
      *
@@ -34,28 +34,28 @@ export interface NumericInputProps extends NumericTransformerOptions, Omit<Compo
      * `"999 999,99 €"`, i.e. `valueIsUnformattedString` has no effect on this
      * property.
      */
-    min?: string | number | null;
+    min?: string | number | bigint | null;
     /**
      * Maximum number allowed. If a string is provided, it should **not** be the
      * formatted representation, e.g. `"999999.99" should be provided instead of
      * `"999 999,99 €"`, i.e. `valueIsUnformattedString` has no effect on this
      * property.
      */
-    max?: string | number | null;
+    max?: string | number | bigint | null;
     /**
      * Value that the number should be greater than. If a string is provided, it
      * should **not** be the formatted representation, e.g. `"999999.99" should be
      * provided instead of `"999 999,99 €"`, i.e. `valueIsUnformattedString` has
      * no effect on this property.
      */
-    exclusiveMin?: string | number | null;
+    exclusiveMin?: string | number | bigint | null;
     /**
      * Value that the number should be less than. If a string is provided, it
      * should **not** be the formatted representation, e.g. `"999999.99" should be
      * provided instead of `"999 999,99 €"`, i.e. `valueIsUnformattedString` has
      * no effect on this property.
      */
-    exclusiveMax?: string | number | null;
+    exclusiveMax?: string | number | bigint | null;
     /**
      * Whether the numeric value should be allowed.
      *
@@ -73,14 +73,27 @@ export interface NumericValueRepresentations {
     numberValue: number | null;
 }
 /**
- * The `NumericInput` component is designed for numeric data entry, offering
- * features like digit grouping, adornments, and precision control to enhance
- * the user experience when dealing with numbers.
+ * The numeric input component is used to collect numeric user input. It is
+ * built on top of the [`Input`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-forms-input--docs)
+ * and the [`react-number-format`
+ * library](https://s-yadav.github.io/react-number-format/).
  *
- * Similar to the [Input](/docs/ostack-ui-forms-input--docs)
- * component,`NumericInput` works seamlessly with the `Field` component to
- * create structured, accessible form groups. By combining it with `Field`, you
- * can ensure proper associations between `Label`, `NumericInput`, and
- * `HelperText`, improving clarity and accessibility for users.
+ * It supports specifying the precision, scale, separators, grouping of digits,
+ * restrictions, or affixes of a number.
+ *
+ * For accessibility purposes, numeric inputs are usually included within a
+ * `Field` together with a `Label` and optionally `HelperText` and/or
+ * `Feedback`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { NumericInput } from "@ostack.tech/ui";
+ *
+ * function NumberOfTickets() {
+ *   return <NumericInput placeholder="Enter number of tickets…" />;
+ * }
+ * ```
  */
 export declare const NumericInput: import('react').ForwardRefExoticComponent<NumericInputProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -87,8 +87,8 @@ export type SelectProps = SelectSingleProps | SelectMultipleProps;
  * Control which displays a menu of options for the user to pick from. Provides
  * an alternative to the browser's [`<select>`
  * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select)
- * via the “combobox” pattern, allowing users to search for options. It is built
- * on top of the `Input`, `Popover`, and `CommandMenu` components.
+ * while also allowing users to search for options. It is built on top of the
+ * `Input`, `Popover`, and `CommandMenu` components.
  *
  * It supports the selection of more than one option by setting the `multiple`
  * property.

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

@@ -23,6 +23,9 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrim
  *
  * The `value` set on each tab should match the `value` of its content.
  *
+ * Built on top of the [Radix Tabs
+ * primitive](https://radix-ui.com/primitives/docs/components/tabs).
+ *
  * It composes the following subcomponents:
  *
  * - `TabList`: A container holding the list of tabs.

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

@@ -4,18 +4,21 @@ import { InputPropsBase } from '../Input';
 export interface TextAreaProps extends Omit<InputPropsBase, "asChild" | "children">, ComponentPropsWithoutRef<"textarea"> {
 }
 /**
- * The `TextArea` component is a flexible, multiline input field designed for
- * text entry. This component is ideal for capturing larger amounts of text,
- * such as user feedback, comments, or descriptions.
+ * The text area component is used to collect multi-line user input. It is built
+ * on top of the browser's [`<textarea>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea).
  *
- * All extra properties are passed directly to the underlying textarea element,
- * offering full control over behavior and appearance. The TextArea component
- * can be combined with the `Field` component for better structure and
- * accessibility. The `Field` ensures proper associations between the `Label`,
- * `TextArea`, and related elements like `HelperText`, improving usability and
- * accessibility for users.
+ * For accessibility purposes, text areas are usually included within a `Field`
+ * together with a `Label` and optionally `HelperText` and/or `Feedback`.
  *
- * This setup ensures that the `TextArea` can adapt to different use cases while
- * maintaining a consistent and accessible form structure.
+ * Example usage:
+ *
+ * ```tsx
+ * import { TextArea } from "@ostack.tech/ui";
+ *
+ * function CommentArea() {
+ *   return <TextArea placeholder="Leave a comment…" />;
+ * }
+ * ```
  */
 export declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -12,14 +12,18 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
     showArrow?: boolean;
     /** Tooltip's trigger element. */
     children: ReactElement;
-    /** The open state of the tooltip when it is initially rendered. */
+    /** Default open state of the tooltip. */
     defaultOpen?: boolean;
     /**
-     * The controlled open state of the tooltip. Should be used in conjunction
-     * with `onOpenChange`.
+     * Controlled open state of the tooltip.
+     *
+     * Use together with `onOpenChange`.
      */
     open?: boolean;
-    /** Event handler called when the open state of the tooltip changes. */
+    /**
+     * Function called when the open state of the tooltip changes. Use it to
+     * control the tooltip's open state together with the `open` property.
+     */
     onOpenChange?: (open: boolean) => void;
     /**
      * Override the duration given to the `TooltipProvider` to customise the open
@@ -39,17 +43,24 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
     arrowProps?: ComponentPropsWithRef<typeof TooltipPrimitive.Arrow>;
 }
 /**
- * The `Tooltip` component renders a popup that displays information related to
- * an element (trigger) when the element receives keyboard focus or the mouse
- * hovers over it.
+ * The tooltip component displays a popup containing information related to an
+ * element when the user focuses or hovers over it.
+ *
+ * Built on top of the [Radix Tooltip
+ * primitive](https://www.radix-ui.com/primitives/docs/components/tooltip).
+ *
+ * Example usage:
  *
- * In ostack/UI applications, `TooltipProvider` is already integrated into the
- * root container to ensure consistent tooltip behavior throughout the
- * application. Developers typically don't need to configure it manually, as the
- * default setup handles delay times and interactions seamlessly.
+ * ```tsx
+ * import { Button, Tooltip } from "@ostack.tech/ui";
  *
- * For detailed information on these props, which do not have descriptions,
- * please refer to the
- * [docs](https://www.radix-ui.com/primitives/docs/components/tooltip).
+ * function BookmarkButton() {}
+ *   return (
+ *     <Tooltip content="Save for later…">
+ *       <Button>Bookmark</Button>
+ *     </Tooltip>
+ *   );
+ * }
+ * ```
  */
 export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -3,7 +3,7 @@ import { CalendarProps } from '../../components/Calendar';
 import { CloseButtonProps } from '../../components/CloseButton';
 import { CommandMenuDialogProps, CommandMenuProps } from '../../components/CommandMenu';
 import { ControlCodeProps } from '../../components/ControlCode';
-import { DataTableContentProps, DataTableFilterProps, DataTablePaginationProps, DataTableRowsPerPageProps } from '../../components/DataTable';
+import { DataTableContentProps, DataTableFilterProps, DataTablePaginationProps, DataTableProps, DataTableRowsPerPageProps } from '../../components/DataTable';
 import { DateInputProps } from '../../components/DateInput';
 import { DateRangeInputProps } from '../../components/DateRangeInput';
 import { ErrorBoundaryProps } from '../../components/ErrorBoundary';
@@ -31,9 +31,10 @@ export interface LocalizationObject {
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
     ConfirmDialog: Pick<ConfirmDialogOptions, "okText" | "cancelText">;
     ControlCode: Pick<ControlCodeProps, "visuallyHiddenPrefix">;
-    DataTable: Pick<DataTableContentProps, "emptyMessage">;
+    DataTable: Pick<DataTableProps, "selectAllRowsLabel" | "selectRowLabel">;
+    DataTableContent: Pick<DataTableContentProps, "emptyMessage">;
     DataTableFilter: Pick<DataTableFilterProps, "aria-label" | "placeholder">;
-    DataTablePagination: Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel">;
+    DataTablePagination: Pick<DataTablePaginationProps, "aria-label" | "rowsRange" | "rowsRangeSelectLabel" | "previousPageButtonLabel" | "nextPageButtonLabel">;
     DataTableRowsPerPage: Pick<DataTableRowsPerPageProps, "label">;
     DateInput: Pick<DateInputProps, "format" | "announcedFormat" | "placeholder" | "formatDescription" | "selectedDateDescription" | "calendarButtonLabel">;
     DateRangeInput: Pick<DateRangeInputProps, "startInputLabel" | "endInputLabel" | "selectedDateRangeDescription" | "calendarButtonLabel">;

package/dist/types/utils/numericStringUtils.d.ts

@@ -1,8 +1,8 @@
 /**
- * Converts a numberic value to a string, removing exponential notation. Nullish
+ * Converts a numeric value to a string, removing exponential notation. Nullish
  * or `NaN` values become the empty string.
  */
-export declare function numericToString(v: string | number | null | undefined): string;
+export declare function numericToString(v: string | number | bigint | null | undefined): string;
 /** Whether a numeric string represents a negative number. */
 export declare function isNumericStringNegative(v: string): boolean;
 /** Whether a numeric string represents the `null` value. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -38,9 +38,7 @@
   ],
   "scripts": {
     "clean": "rimraf dist/ scss/",
-    "build": "npm run build:js && npm run build:css",
-    "build:js": "vite build",
-    "build:css": "npm run copy:scss && sass -I ../../node_modules/ scss/index.scss dist/ostack-ui.css",
+    "build": "vite build && npm run copy:scss",
     "copy:scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
   },
   "dependencies": {

package/scss/components/Code/_Code-variables.scss

@@ -6,7 +6,7 @@ $code-padding-x: spacing(1) !default;
 $code-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $code-font-family: var(--#{$prefix}font-family-code) !default;
 $code-font-weight: $font-weight-normal !default;
-$code-font-size: 0.975em !default;
+$code-font-size: 0.875em !default;
 $code-line-height: 1.25 !default;
 $code-background-color: var(--#{$prefix}accent-a3) !default;
 $code-color: var(--#{$prefix}accent-a11) !default;

package/scss/components/DataTable/_DataTable-variables.scss

@@ -13,9 +13,15 @@ $data-table-filter-max-width: 250px !default;
 
 // Rows per page
 $data-table-rows-per-page-gap-x: spacing(1) !default;
+$data-table-rows-per-page-font-size: var(--#{$prefix}font-size-sm) !default;
+$data-table-rows-per-page-line-height: var(--#{$prefix}line-height-sm) !default;
+$data-table-rows-per-page-font-weight: $font-weight-normal !default;
 
 // Pagination
 $data-table-pagination-gap-x: spacing(2) !default;
+$data-table-pagination-font-size: var(--#{$prefix}font-size-sm) !default;
+$data-table-pagination-line-height: var(--#{$prefix}line-height-sm) !default;
+$data-table-pagination-font-weight: null !default;
 
 // Pagination arrows
 $data-table-pagination-arrows-gap-x: spacing(1) !default;

package/scss/components/DataTable/_DataTable.scss

@@ -4,6 +4,7 @@
 @use "../../scss/utils/breakpoints" as *;
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/transition" as *;
+@use "../../scss/utils/maybe-important" as *;
 
 .#{$prefix}data-table {
   $data-table: &;
@@ -48,6 +49,9 @@
 
   &__rows-per-page-label {
     margin-right: $data-table-rows-per-page-gap-x;
+    font-size: $data-table-rows-per-page-font-size;
+    line-height: $data-table-rows-per-page-line-height;
+    font-weight: maybe-important($data-table-rows-per-page-font-weight);
   }
 
   &__rows-per-page-select-root,
@@ -59,6 +63,9 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    font-size: $data-table-pagination-font-size;
+    line-height: $data-table-pagination-line-height;
+    font-weight: $data-table-pagination-font-weight;
   }
 
   &__pagination-arrows {

package/scss/components/Dialog/_Dialog.scss

@@ -60,7 +60,8 @@
 
   // Variants
   @each $variant in $dialog-variants {
-    &#{$card}--#{$variant} {
+    &#{$card}--#{$variant},
+    #{$card}--#{$variant} {
       @include declare-var(
         --#{$prefix}card-border-color,
         map.get($dialog-border-color-by-variant, $variant)

package/scss/components/Keyboard/_Keyboard-variables.scss

@@ -2,13 +2,13 @@
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/css-color-functions" as *;
 
-$keyboard-padding: 0 0.25em !default;
+$keyboard-padding: 1px 0.25em 0 !default;
 $keyboard-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $keyboard-font-family: var(--#{$prefix}font-family-code) !default;
 $keyboard-font-weight: $font-weight-normal !default;
 $keyboard-font-size: 0.875em !default;
-$keyboard-line-height: 1 !default;
+$keyboard-line-height: 1.25 !default;
 $keyboard-word-wrap: break-word !default;
 
 $keyboard-border-width: 1px 1px 2px !default;