@ostack.tech/ui 0.8.2 → 0.9.1

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

@@ -58,7 +58,7 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
     closeButtonProps?: ComponentPropsWithRef<typeof CloseButton>;
 }
 /**
- * The alert component can be used to attract the user's attentions.
+ * The alert component can be used to attract the user's attention.
  *
  * It has the following subcomponent:
  *

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

@@ -1,8 +1,11 @@
 import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
+import { KeyboardShortcutKeybinds } from '../../utils/keyboardShortcut.ts';
 import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
 import { Icon, IconProp } from '../Icon';
+import { Keybinds } from '../Keybinds';
 import { Spinner } from '../Spinner';
+import { Tooltip } from '../Tooltip';
 /** Elements a button can be rendered as. */
 export type ButtonAs = "button" | "a";
 /** Button variants. */
@@ -119,10 +122,27 @@ export interface ButtonOwnProps {
      * @default loading
      */
     showSpinner?: boolean;
+    /** Content to display in a tooltip when hovering over or focusing the button. */
+    tooltipContent?: ReactNode;
+    /**
+     * [`tinykeys`](https://jamiebuilds.github.io/tinykeys) keyboard shortcut
+     * keybinds used to trigger the action performed by the button. Rendered at
+     * 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.
+     */
+    keybinds?: KeyboardShortcutKeybinds;
     /** Properties to pass to the icon component. */
     iconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon">;
     /** Properties to pass to the spinner component. */
     spinnerProps?: ComponentPropsWithRef<typeof Spinner>;
+    /** Properties to pass to the tooltip component. */
+    tooltipProps?: Omit<ComponentPropsWithRef<typeof Tooltip>, "content" | "children">;
+    /** Properties to pass to the keybinds component. */
+    keybindsProps?: ComponentPropsWithRef<typeof Keybinds>;
 }
 /**
  * The button component is used to trigger actions or events, such as opening a

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

@@ -1,4 +1,3 @@
-import { Locale } from 'date-fns';
 import { ComponentPropsWithRef } from 'react';
 import { DayPickerProps } from 'react-day-picker';
 import { IconButton } from '../IconButton';
@@ -17,14 +16,18 @@ export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected"
     minYear?: number;
     /** Maximum year allowed. */
     maxYear?: number;
-    /** `date-fns` locale to format dates and to be used by the date picker. */
-    locale?: Locale;
+    /** Label of the "month" select. */
+    monthSelectLabel?: string;
+    /** Label of the "year" select. */
+    yearSelectLabel?: string;
     /** Label of the "previous month" button. */
     previousMonthLabel?: string;
     /** Label of the "next month" button. */
     nextMonthLabel?: string;
-    /** Properties to pass to the caption element. */
-    captionProps?: ComponentPropsWithRef<"div">;
+    /** Properties to pass to the header element. */
+    headerProps?: ComponentPropsWithRef<"header">;
+    /** Properties to pass to the header label element. */
+    headerLabelProps?: ComponentPropsWithRef<"span">;
     /** Properties to pass to the previous button component. */
     previousButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the next button component. */
@@ -38,4 +41,4 @@ export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected"
  * Calendar component built on top of [React
  * DayPicker](https://react-day-picker.js.org).
  */
-export declare function Calendar({ required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, numberOfMonths, showOutsideDays, fixedWeeks, disableNavigation, locale: dateFnsLocale, disabled, modifiers, captionProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -3,9 +3,12 @@ import { CalendarProps } from './Calendar.tsx';
 export interface CalendarContextValue {
     minAllowedDate: Date | undefined;
     maxAllowedDate: Date | undefined;
+    monthSelectLabel: CalendarProps["monthSelectLabel"];
+    yearSelectLabel: CalendarProps["yearSelectLabel"];
     previousMonthLabel: CalendarProps["previousMonthLabel"];
     nextMonthLabel: CalendarProps["nextMonthLabel"];
-    captionProps: CalendarProps["captionProps"];
+    headerProps: CalendarProps["headerProps"];
+    headerLabelProps: CalendarProps["headerLabelProps"];
     previousButtonProps: CalendarProps["previousButtonProps"];
     nextButtonProps: CalendarProps["nextButtonProps"];
     monthSelectProps: CalendarProps["monthSelectProps"];

package/dist/types/components/Calendar/{CalendarMonthCaption.d.ts → CalendarHeader.d.ts}

@@ -2,7 +2,7 @@
  * Reimplementation of the React Day Picker's caption component to provide both
  * navigation arrows and dropdown selections.
  */
-export declare const CalendarMonthCaption: import('react').NamedExoticComponent<{
+export declare const CalendarHeader: import('react').NamedExoticComponent<{
     calendarMonth: import('react-day-picker').CalendarMonth;
     displayIndex: number;
 } & import('react').HTMLAttributes<HTMLDivElement>>;

package/dist/types/components/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -1,11 +1,69 @@
+import { RefObject } from 'react';
+import { CheckboxGroupProps } from './CheckboxGroup.tsx';
+/** Value of the checkbox group's context. */
 export interface CheckboxGroupContextValue {
     name?: string;
-    value: string[];
-    onCheckedChange: (value: string, checked: boolean) => void;
+    required?: boolean;
     loadingDescriptionId?: string;
     errorMessageIds?: string[];
-    ariaDescribedBy?: string;
     descriptionIds?: string[];
+    store: CheckboxGroupStore;
+}
+/** State of the checkbox group. */
+export interface CheckboxGroupState {
+    value: string[];
+    firstCheckboxId: string | undefined;
+    actions: CheckboxGroupActions;
 }
-/** Checkbox group context. */
+/** State of the checkbox group. */
+interface CheckboxGroupActions {
+    handleCheckedChange: (checkboxValue: string, checked: boolean) => void;
+}
+/** Checkbox group's store. */
+export type CheckboxGroupStore = ReturnType<typeof useCreateCheckboxGroupContext>["store"];
+/** Checkbox group's context. */
 export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue | null>;
+/** Options for the `useCreateCheckboxGroupContext` hook. */
+export interface UseCreateCheckboxGroupContextOptions extends Omit<CheckboxGroupContextValue, "store">, Pick<CheckboxGroupProps, "defaultValue" | "value" | "onValueChange"> {
+    checkboxGroupRef: RefObject<HTMLDivElement | null>;
+}
+/** Hook which creates the checkbox group's store. */
+export declare function useCreateCheckboxGroupContext({ defaultValue, value, onValueChange, name, required, loadingDescriptionId, errorMessageIds, descriptionIds, checkboxGroupRef, }: UseCreateCheckboxGroupContextOptions): {
+    name: string | undefined;
+    required: boolean | undefined;
+    loadingDescriptionId: string | undefined;
+    errorMessageIds: string[] | undefined;
+    descriptionIds: string[] | undefined;
+    store: Omit<import('zustand').StoreApi<CheckboxGroupState>, "subscribe"> & {
+        subscribe: {
+            (listener: (selectedState: CheckboxGroupState, previousSelectedState: CheckboxGroupState) => void): () => void;
+            <U>(selector: (state: CheckboxGroupState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+                equalityFn?: ((a: U, b: U) => boolean) | undefined;
+                fireImmediately?: boolean;
+            } | undefined): () => void;
+        };
+    };
+};
+/** Hook returning the checkbox group's context value. */
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | null;
+/**
+ * Hook which returns the checked state of a checkbox in a checkbox group and a
+ * function to mark it as checked or unchecked.
+ */
+export declare function useIsCheckedInGroup(checkboxValue: string): [boolean | undefined, ((checked: boolean) => void) | undefined];
+/**
+ * Returns whether a checkbox within a group should be marked as required.
+ *
+ * All checkboxes within a group are marked as required when the group itself is
+ * required and no checkboxes have been checked.
+ */
+export declare function useIsRequiredInGroup(): boolean | undefined;
+/**
+ * Returns the description ids to set on a checkbox of a checkbox group.
+ *
+ * Description ids are set on the first checkbox of the group.
+ *
+ * @param checkboxId Id of the checkbox.
+ */
+export declare function useCheckboxGroupDescriptionIds(checkboxId: string): string[] | undefined;
+export {};

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

@@ -1,7 +1,7 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithoutRef } from 'react';
 import { MenuListItemProps } from '../MenuList';
-export interface CommandMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "loadingContent" | "showSpinner" | "icon" | "iconPlacement" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface CommandMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "loadingContent" | "showSpinner" | "icon" | "iconPlacement" | "keybinds" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps" | "keybindsProps"> {
     /**
      * Render the item as a link. When set, you can pass `href`, `target`, and
      * `rel` properties to the item.

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

@@ -1,5 +1,4 @@
-import { Locale } from 'date-fns';
-import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
 import { DatePicker } from '../DatePicker';
 import { Input } from '../Input';
 import { PopoverContent } from '../Popover';
@@ -27,30 +26,24 @@ export interface DateInputProps extends Omit<ComponentPropsWithoutRef<typeof Inp
     minYear?: number;
     /** Maximum year allowed. */
     maxYear?: number;
-    /** `date-fns` locale to format dates and to be used by the date picker. */
-    locale?: Locale;
     /**
-     * Short format of the date, as supported by
+     * Format of the date, as supported by
      * [`date-fns`](https://date-fns.org/docs/format), used for the written input
      * text.
      */
-    shortFormat?: string;
+    format?: string;
     /**
-     * Full format of the date, as supported by
+     * Announced format of the date, as supported by
      * [`date-fns`](https://date-fns.org/docs/format), used to announce the date
      * to assistive technologies.
      */
-    fullFormat?: string;
+    announcedFormat?: string;
     /** Description of the short format provided to assistive technologies. */
-    formatDescription?: string;
-    /**
-     * Function that should return the label to provide to the button that opens
-     * the input's calendar.
-     *
-     * @param selectedDate Currently selected date.
-     * @param editable Whether the calendar is editable.
-     */
-    calendarButtonLabel?: (selectedDate: string | null, editable: boolean) => string;
+    formatDescription?: ReactNode;
+    /** Description of the selected date, announced to assistive technologies. */
+    selectedDateDescription?: (date: string) => ReactNode;
+    /** Label of the button that opens the input's calendar. */
+    calendarButtonLabel?: ReactNode;
     /** Function called whenever the popover's open state changes. */
     onPopoverOpenChange?: (open: boolean) => void;
     /** Properties to pass to the date picker component. */

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

@@ -1,4 +1,3 @@
-import { Locale } from 'date-fns';
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, FocusEvent, ReactNode } from 'react';
 import { ControlStatus, ControlVariant } from '../../utils/control.ts';
 import { Responsive } from '../../utils/useResponsiveValues.ts';
@@ -124,20 +123,18 @@ export interface DateRangeInputProps extends Omit<ComponentPropsWithoutRef<"div"
     showClearButtons?: ShowClearButton;
     /** Label of the clear buttons announced to assistive technologies. */
     clearButtonsLabel?: string;
-    /** `date-fns` locale to format dates and to be used by the date-range picker. */
-    locale?: Locale;
     /**
-     * Short format of the dates, as supported by
+     * Format of the dates, as supported by
      * [`date-fns`](https://date-fns.org/docs/format), used for the written input
      * text.
      */
-    shortFormat?: string;
+    format?: string;
     /**
-     * Full format of the dates, as supported by
+     * Announced format of the dates, as supported by
      * [`date-fns`](https://date-fns.org/docs/format), used to announce the dates
      * to assistive technologies.
      */
-    fullFormat?: string;
+    announcedFormat?: string;
     /** Description of the short format provided to assistive technologies. */
     formatDescription?: ReactNode;
     /**
@@ -150,14 +147,15 @@ export interface DateRangeInputProps extends Omit<ComponentPropsWithoutRef<"div"
      * user knows that they are interacting with the end input).
      */
     endInputLabel?: ReactNode;
+    /** Prefix used when announcing a selected date to assistive technologies. */
+    selectedDateDescription?: (date: string) => ReactNode;
     /**
-     * Function that should return the label to provide to the button that opens
-     * the input's calendar.
-     *
-     * @param selectedDateRange Currently selected date-range.
-     * @param editable Whether the calendar is editable.
+     * Prefix used when announcing the selected date-range to assistive
+     * technologies.
      */
-    calendarButtonLabel?: (selectedDateRange: string | null, editable: boolean) => string;
+    selectedDateRangeDescription?: (dateRange: StringRange) => ReactNode;
+    /** Label of the button that opens the input's calendar. */
+    calendarButtonLabel?: ReactNode;
     /** Placeholder for both start and end inputs. */
     placeholder?: string;
     /** Placeholder for the start input (defaults to `placeholder`). */

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

@@ -4,7 +4,7 @@ import { CheckboxChecked } from '../Checkbox';
 import { Icon } from '../Icon';
 import { MenuListItemProps } from '../MenuList';
 /** Properties of the dropdown menu checkbox item. */
-export interface DropdownMenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface DropdownMenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "keybinds" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps" | "keybindsProps"> {
     /**
      * Whether to show the checkbox.
      *

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

@@ -2,7 +2,7 @@ import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
 import { MenuListItemProps } from '../MenuList';
 /** Properties of the dropdown menu item. */
-export interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "loadingContent" | "showSpinner" | "icon" | "iconPlacement" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "loadingContent" | "showSpinner" | "icon" | "iconPlacement" | "keybinds" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps" | "keybindsProps"> {
     /**
      * Render the item as a link. When set, you can pass `href`, `target`, and
      * `rel` properties to the item.

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

@@ -2,7 +2,7 @@ import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 import { MenuListItemProps } from '../MenuList';
 /** Properties of the dropdown menu radio item. */
-export interface DropdownMenuRadioItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface DropdownMenuRadioItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "keybinds" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps" | "keybindsProps"> {
     /**
      * Whether to show the radio.
      *

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

@@ -1,9 +1,11 @@
 import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { KeyboardShortcutKeybinds } from '../../utils/keyboardShortcut.ts';
 import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
 import { ButtonAs, ButtonColor, ButtonSize, ButtonVariant } from '../Button';
 import { Icon, IconProp } from '../Icon';
 import { Spinner } from '../Spinner';
 import { Tooltip } from '../Tooltip';
+import { VisuallyHidden } from '../VisuallyHidden';
 /** Elements an icon button can be rendered as. */
 export type IconButtonAs = ButtonAs;
 /** Icon button variants. */
@@ -46,11 +48,11 @@ export interface IconButtonOwnProps {
     /** Icon to show within the button. */
     icon: IconProp | ReactElement;
     /**
-     * Label of the icon button. This label is rendered as a visually hidden
-     * element inside the button.
+     * Accessible label of the icon button. This label is rendered as a visually
+     * hidden element inside the button.
      *
      * By default, and for sighted users, it is also displayed as a tooltip
-     * (unless `disableTooltip` is set).
+     * (overridable via `tooltipContent`).
      */
     label: ReactNode;
     /**
@@ -111,18 +113,33 @@ export interface IconButtonOwnProps {
      */
     showSpinner?: boolean;
     /**
-     * Whether to disable showing the icon button's label in a tooltip. Disabling
-     * the tooltip does **not** affect the button's accessibility.
+     * Content to display in a tooltip when hovering over or focusing the icon
+     * button. By default, the icon button's label is displayed.
      *
-     * @default false
+     * Set to `null` to not render any content (other than the `keybinds`).
+     */
+    tooltipContent?: ReactNode;
+    /**
+     * [`tinykeys`](https://jamiebuilds.github.io/tinykeys) keyboard shortcut
+     * keybinds used to trigger the action performed by the icon button. Rendered
+     * at the end of the icon 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 icon button's action. This should be done manually via
+     * _e.g._ the `useKeyboardShortcut` hook.
      */
-    disableTooltip?: boolean;
+    keybinds?: KeyboardShortcutKeybinds;
     /** Properties to pass to the `Icon` component. */
     iconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon" | "label">;
+    /** Properties to pass to the `VisuallyHidden` label component. */
+    labelProps?: Omit<ComponentPropsWithRef<typeof VisuallyHidden>, "children">;
     /** Properties to pass to the `Spinner` component. */
     spinnerProps?: ComponentPropsWithRef<typeof Spinner>;
     /** Properties to pass to the `Tooltip` component. */
     tooltipProps?: Omit<ComponentPropsWithRef<typeof Tooltip>, "content" | "children">;
+    /** Properties to pass to the keybinds component. */
+    keybindsProps?: ComponentPropsWithRef<"div">;
 }
 /**
  * The icon button component renders a button containing a single icon. Use it

package/dist/types/components/Keybinds/Key.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { KeybindsProps } from './Keybinds.tsx';
+/** Properties of the key component. */
+export interface KeyProps extends Pick<KeybindsProps, "keySymbols" | "keyLabels"> {
+    /** Name of the key. */
+    keyName: string;
+}
+/** Component representing a single (normalised) key. */
+export declare function Key({ keyName, keyLabels, keySymbols }: KeyProps): ReactNode;

package/dist/types/components/Keybinds/KeyPress.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { KeybindsProps } from './Keybinds.tsx';
+export interface KeyPressProps extends Pick<KeybindsProps, "keySymbols" | "keyLabels"> {
+    /** Key press. */
+    keyPress: string[];
+}
+export declare function KeyPress({ keyPress, keySymbols, keyLabels, }: KeyPressProps): ReactNode;

package/dist/types/components/Keybinds/Keybind.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { KeybindsProps } from './Keybinds.tsx';
+export interface KeybindProps extends Pick<KeybindsProps, "keyPressesSeparatorLabel" | "keySymbols" | "keyLabels"> {
+    /** Keybind. */
+    keybind: string[][];
+}
+export declare function Keybind({ keybind, keyPressesSeparatorLabel, keySymbols, keyLabels, }: KeybindProps): ReactNode;

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

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface KeybindsProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    keybinds: string | string[] | null | undefined;
+    /**
+     * Limits the number of keybinds to display. Must be >= 1. By default, all
+     * keybinds are displayed.
+     */
+    limit?: number;
+    /** Accessible label used to separate keybinds. */
+    keybindsSeparatorLabel?: ReactNode;
+    /** Accessible label used to separate key presses. */
+    keyPressesSeparatorLabel?: ReactNode;
+    /** Accessible label used to separate keys. */
+    keysSeparatorLabel?: ReactNode;
+    /** Key symbols to use instead of the default ones. */
+    keySymbols?: Record<string, ReactNode>;
+    /** Accessible key labels to use instead of the default ones. */
+    keyLabels?: Record<string, ReactNode>;
+}
+export declare const Keybinds: import('react').ForwardRefExoticComponent<KeybindsProps & import('react').RefAttributes<HTMLSpanElement>>;

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

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

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

@@ -9,8 +9,6 @@ export interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimiti
     required?: boolean;
     /** Optional helper text displayed as a popover triggered by an icon button. */
     helperText?: ReactNode;
-    /** Label of the required icon announced to assistive technologies. */
-    requiredIconLabel?: string;
     /** Label of the helper button announced to assistive technologies. */
     helperButtonLabel?: string;
     /** Properties to pass to the container element. */

package/dist/types/components/MenuList/MenuListItem.d.ts

@@ -1,6 +1,8 @@
 import { ComponentProps, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
+import { KeyboardShortcutKeybinds } from '../../utils/keyboardShortcut.ts';
 import { Icon, IconProp } from '../Icon';
+import { Keybinds } from '../Keybinds';
 import { Spinner } from '../Spinner';
 import { MenuListIconPlacement } from './MenuList.tsx';
 /** Elements a menu list item's action can be rendered as. */
@@ -86,6 +88,17 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
      * @default start
      */
     iconPlacement?: MenuListIconPlacement;
+    /**
+     * [`tinykeys`](https://jamiebuilds.github.io/tinykeys) keyboard shortcut
+     * keybinds used to trigger the action performed by the item. Rendered next to
+     * the item for visual users and announced to screen readers via
+     * `aria-keyshortcuts`.
+     *
+     * **Note:** This property does **not** automatically register a keyboard
+     * shortcut to run the item's action. This should be done manually via _e.g._
+     * the `useKeyboardShortcut` hook.
+     */
+    keybinds?: KeyboardShortcutKeybinds;
     /** Href for the link, when `type` is set to `"link"`. */
     href?: ComponentProps<"a">["href"];
     /** Target of the link, when `type` is set to `"link"`. */
@@ -100,6 +113,8 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
     iconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon">;
     /** Properties to pass to the spinner component. */
     spinnerProps?: ComponentPropsWithRef<typeof Spinner>;
+    /** Properties to pass to the keybinds component. */
+    keybindsProps?: ComponentPropsWithRef<typeof Keybinds>;
 }
 /** Menu list item component. */
 export declare const MenuListItem: import('react').ForwardRefExoticComponent<MenuListItemProps & import('react').RefAttributes<HTMLLIElement>>;

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
 /** Possible sizes of the spinner. */
 export type SpinnerSize = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
@@ -6,12 +6,6 @@ export type SpinnerSize = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2x
 export type SpinnerColor = AccentColor;
 /** Properties of the spinner component. */
 export interface SpinnerProps extends ComponentPropsWithoutRef<"span"> {
-    /**
-     * Change the component to the HTML tag or custom component of the only child.
-     * This will merge the original component props with the props of the supplied
-     * element/component and change the underlying DOM node.
-     */
-    asChild?: boolean;
     /**
      * Size of the spinner. By default, the spinner will be sized according to the
      * current font size.
@@ -28,7 +22,7 @@ export interface SpinnerProps extends ComponentPropsWithoutRef<"span"> {
      * When provided, a visually hidden label is added so that assistive
      * technologies correctly announce it.
      */
-    label?: string;
+    label?: ReactNode;
 }
 /**
  * The spinner component provides a visual cue that an action is currently being

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

@@ -1,11 +1,20 @@
 import { Tabs as TabsPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
+import { IconButton } from '../IconButton';
 /** Properties of the tab list component. */
 export interface TabListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+    /** Label of the scroll left button. */
+    scrollLeftButtonLabel?: ReactNode;
+    /** Label of the scroll right button. */
+    scrollRightButtonLabel?: ReactNode;
     /** Properties to pass to the root element. */
     rootProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the container element. */
     containerProps?: ComponentPropsWithRef<"div">;
+    /** Properties to pass to the scroll left button component. */
+    scrollLeftButtonProps?: Omit<Partial<ComponentPropsWithRef<typeof IconButton>>, "label">;
+    /** Properties to pass to the scroll right button component. */
+    scrollRightButtonProps?: Omit<Partial<ComponentPropsWithRef<typeof IconButton>>, "label">;
 }
 /** Component containing all tabs. */
 export declare const TabList: import('react').ForwardRefExoticComponent<TabListProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -48,6 +48,15 @@ export interface ToastPropsBase extends Pick<ComponentPropsWithoutRef<typeof Toa
      * `action` is not specified.
      */
     showCloseButton?: boolean;
+    /**
+     * Whether the toast should be visually hidden. _I.e._ it provides a
+     * notification only to screen readers.
+     *
+     * This is useful when sighted users can easily see that something has
+     * happened, but nothing would be announced to assistive technology
+     * otherwise.
+     */
+    visuallyHidden?: boolean;
     /** Properties to pass to the root component. */
     rootProps?: Omit<ComponentPropsWithRef<"li">, "onPause">;
     /** Properties to pass to the container component. */

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

@@ -1,3 +1,21 @@
-import { VisuallyHidden as VisuallyHiddenPrimitive } from 'radix-ui';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Elements a visually hidden component can be rendered as. */
+export type VisuallyHiddenAs = "span" | "div";
+/** Properties of the visually hidden component. */
+export type VisuallyHiddenProps<TAs extends VisuallyHiddenAs = "span"> = PolymorphicProps<VisuallyHiddenAs, TAs, "span", VisuallyHiddenOwnProps>;
+/** Own properties of the visually hidden component. */
+export interface VisuallyHiddenOwnProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+    /**
+     * Marks this component as focusable, in which case the content is visible
+     * when it receives focus.
+     */
+    focusable?: boolean;
+}
 /** Component that hides content from the screen in an accessible way. */
-export declare const VisuallyHidden: import('react').ForwardRefExoticComponent<VisuallyHiddenPrimitive.VisuallyHiddenProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const VisuallyHidden: PolymorphicComponent<VisuallyHiddenAs, "span", VisuallyHiddenOwnProps>;

package/dist/types/index.d.ts

@@ -35,6 +35,7 @@ export * from './components/HelperText';
 export * from './components/Icon';
 export * from './components/IconButton';
 export * from './components/Input';
+export * from './components/Keybinds';
 export * from './components/Keyboard';
 export * from './components/Label';
 export * from './components/Link';

package/dist/types/locales/en.d.ts

@@ -1,3 +1,3 @@
 import { LocalizationObject } from '../providers/LocalizationProvider';
 /** `en` locale (partial). */
-export declare const en: Omit<LocalizationObject, "languageTag" | "dateFnsLocale">;
+export declare const en: Omit<LocalizationObject, "languageTag" | "dayPickerLocale">;