@ostack.tech/ui 0.6.5 → 0.8.0

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

@@ -69,7 +69,7 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
  * ```tsx
  * import { Alert, AlertTitle } from "@ostack.tech/ui";
  *
- * function TermAndConditionsNotice {
+ * function TermsAndConditionsNotice {
  *   return (
  *     <Alert>
  *       <AlertTitle>Notice</AlertTitle>

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

@@ -1,6 +1,10 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element an alert title can be rendered as. */
+export type AlertTitleAs = "div" | "span" | "h2" | "h3" | "h4" | "h5" | "h6";
 /** Properties of the alert title component. */
-export interface AlertTitleProps extends ComponentPropsWithoutRef<"div"> {
+export type AlertTitleProps<TAs extends AlertTitleAs = "div"> = PolymorphicProps<AlertTitleAs, TAs, "div", AlertTitleOwnProps>;
+/** Own properties of the alert title component. */
+export interface AlertTitleOwnProps {
     /**
      * 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
@@ -9,4 +13,4 @@ export interface AlertTitleProps extends ComponentPropsWithoutRef<"div"> {
     asChild?: boolean;
 }
 /** Title of the alert. */
-export declare const AlertTitle: import('react').ForwardRefExoticComponent<AlertTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: PolymorphicComponent<AlertTitleAs, "div", AlertTitleOwnProps>;

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

@@ -1,7 +1,12 @@
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element an alert dialog title can be rendered as. */
+export type AlertDialogTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
 /** Properties of the alert dialog title component. */
-export interface AlertDialogTitleProps extends ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
+export type AlertDialogTitleProps<TAs extends AlertDialogTitleAs = "h2"> = PolymorphicProps<AlertDialogTitleAs, TAs, "h2", AlertDialogTitleOwnProps>;
+/** Own properties of the alert dialog title component. */
+export interface AlertDialogTitleOwnProps extends Pick<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>, "asChild"> {
 }
 /** Accessible title to be announced when the alert dialog is opened. */
-export declare const AlertDialogTitle: import('react').ForwardRefExoticComponent<AlertDialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogTitle: PolymorphicComponent<AlertDialogTitleAs, "h2", AlertDialogTitleOwnProps>;

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

@@ -1,7 +1,10 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
 import { Icon, IconProp } from '../Icon';
 import { Spinner } from '../Spinner';
+/** Elements a button can be rendered as. */
+export type ButtonAs = "button" | "a";
 /** Button variants. */
 export type ButtonVariant = "solid" | "subtle" | "outlined" | "ghost";
 /** Button colours. */
@@ -11,7 +14,9 @@ export type ButtonSize = "sm" | "md" | "lg" | "xl";
 /** Button's icon placement. */
 export type ButtonIconPlacement = "start" | "end";
 /** Properties of the button component. */
-export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+export type ButtonProps<TAs extends ButtonAs = "button"> = PolymorphicProps<ButtonAs, TAs, "button", ButtonOwnProps>;
+/** Own properties of the button component. */
+export interface ButtonOwnProps {
     /**
      * 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
@@ -70,25 +75,50 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
      */
     disabled?: boolean;
     /**
-     * Whether to display the button in "loading" state by presenting a spinner as
-     * icon. The position of the spinner may be controlled via `iconPlacement`.
+     * Renders the button in a **loading** state.
      *
-     * Setting this property will automatically disable the button.
+     * When `true`, the button is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown as
+     * the button's icon (_i.e._, `showSpinner` is set to `true` unless
+     * overridden).
      *
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Whether the button should be enabled when `loading` is `true`.
+     * The button's content while loading can be controlled via `loadingContent`.
+     * The position of the spinner may be controlled via `iconPlacement`.
+     *
+     * To only show a spinner without “soft-disabling” the button, set
+     * `showSpinner` instead.
+     *
+     * @example
+     *
+     * ```tsx
+     * <Button loading={saving} loadingContent="Saving…">
+     *   Save
+     * </Button>;
+     * ```
      *
      * @default false
      */
-    enabledWhenLoading?: boolean;
+    loading?: boolean;
     /**
-     * Content of the button when it is in "loading" state. If not provided, the
+     * Content of the button when it is in “loading” state. If not provided, the
      * button content will remain unchanged.
      */
     loadingContent?: ReactNode;
+    /**
+     * Whether to show a spinner as the button's icon.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the button.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * button. To “soft-disable” **without** a spinner, set `loading` to `true`
+     * and `showSpinner` to `false`.
+     *
+     * The position of the spinner may be controlled via `iconPlacement`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /** Properties to pass to the icon component. */
     iconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon">;
     /** Properties to pass to the spinner component. */
@@ -108,4 +138,4 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
  * }
  * ```
  */
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Button: PolymorphicComponent<ButtonAs, "button", ButtonOwnProps>;

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

@@ -26,9 +26,9 @@ export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected"
     /** Properties to pass to the caption element. */
     captionProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the previous button component. */
-    previousButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    previousButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the next button component. */
-    nextButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    nextButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the month select component. */
     monthSelectProps?: Omit<ComponentPropsWithRef<typeof Select>, "multiple" | "defaultValue" | "value">;
     /** Properties to pass to the year select component. */

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

@@ -1,19 +1,16 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevel } from '../Heading';
-/** Properties of the card title component. */
-export interface CardTitleProps extends ComponentPropsWithoutRef<"h2"> {
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Elements a card title can be rendered as. */
+export type CardTitleAs = "div" | "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Properties of the button component. */
+export type CardTitleProps<TAs extends CardTitleAs = "div"> = PolymorphicProps<CardTitleAs, TAs, "div", CardTitleOwnProps>;
+/** Own properties of the card title component. */
+export interface CardTitleOwnProps {
     /**
      * 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;
-    /**
-     * Heading level.
-     *
-     * @default 2
-     */
-    level?: HeadingLevel;
 }
 /** Title of the `Card` component. */
-export declare const CardTitle: import('react').ForwardRefExoticComponent<CardTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: PolymorphicComponent<CardTitleAs, "div", CardTitleOwnProps>;

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

@@ -21,12 +21,36 @@ export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof Chec
     /** Sets the checkbox as read-only. */
     readOnly?: boolean;
     /**
-     * Adds a spinner to the checkbox to indicate activity. Note that it doesn't
-     * automatically disable the checkbox.
+     * Renders the checkbox in a **loading** state.
+     *
+     * When `true`, the checkbox is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown
+     * (_i.e._, `showSpinner` is set to `true` unless overridden).
+     *
+     * The checkbox's accessible description while loading can be controlled via
+     * `loadingDescription`.
+     *
+     * To only show a spinner without “soft-disabling” the checkbox, set
+     * `showSpinner` instead.
      *
      * @default false
      */
     loading?: boolean;
+    /** Accessible description of the checkbox when it is in a “loading” state. */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show a spinner next to the checkbox.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the checkbox.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * checkbox. To “soft-disable” **without** a spinner, set `loading` to `true`
+     * and `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /**
      * Function called when the focus moves out of the control as a whole.
      *

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

@@ -21,12 +21,39 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<"div"> {
     /** Checkbox group name. */
     name?: string;
     /**
-     * Adds a spinner to the checkbox group to indicate activity. Note that it
-     * doesn't automatically disable the control.
+     * Renders the checkbox group in a **loading** state.
+     *
+     * When `true`, the checkbox group is “soft-disabled”: it looks disabled and
+     * ignores user interaction but remains focusable. By default, a spinner is
+     * shown (_i.e._, `showSpinner` is set to `true` unless overridden).
+     *
+     * The checkbox group's accessible description while loading can be controlled
+     * via `loadingDescription`.
+     *
+     * To only show a spinner without “soft-disabling” the checkbox group, set
+     * `showSpinner` instead.
      *
      * @default false
      */
     loading?: boolean;
+    /**
+     * Accessible description of the checkbox group when it is in a “loading”
+     * state.
+     */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show a spinner next to the checkbox group.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the checkbox group.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * checkbox group. To “soft-disable” **without** a spinner, set `loading` to
+     * `true` and `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /** Whether the field is required. */
     required?: boolean;
     /** Whether to disable the checkbox group. */

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

@@ -2,6 +2,10 @@ export interface CheckboxGroupContextValue {
     name?: string;
     value: string[];
     onCheckedChange: (value: string, checked: boolean) => void;
+    loadingDescriptionId?: string;
+    errorMessageIds?: string[];
+    ariaDescribedBy?: string;
+    descriptionIds?: string[];
 }
 /** Checkbox group context. */
 export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue | null>;

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { IconButton } from '../IconButton';
 /** Properties of the close button component. */
-export interface CloseButtonProps extends Partial<ComponentPropsWithoutRef<typeof IconButton>> {
+export interface CloseButtonProps extends Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>> {
 }
 /** Component rendering a “close” button. */
 export declare const CloseButton: import('react').ForwardRefExoticComponent<CloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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" | "enabledWhenLoading" | "loadingContent" | "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" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
     /**
      * Render the item as a link. When set, you can pass `href`, `target`, and
      * `rel` properties to the item.

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

@@ -25,9 +25,9 @@ export interface DataTablePaginationProps extends ComponentPropsWithoutRef<"div"
      * Properties to pass to the previous page button (only relevant in paged
      * mode).
      */
-    previousPageButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    previousPageButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the next page button (only relevant in paged mode). */
-    nextPageButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    nextPageButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
 }
 /** Component used to provide pagination to the data table. */
 export declare const DataTablePagination: import('react').ForwardRefExoticComponent<DataTablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, Key, MouseEvent, ReactNode } from 'react';
 import { Button } from '../Button';
 /** Properties of the data table selection trigger component. */
-export interface DataTableSelectionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "onClick"> {
+export interface DataTableSelectionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "onClick"> {
     /**
      * Whether the component should preferably be aligned to the right. This only
      * has an effect when the component is nested directly under the `DataTable`.

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

@@ -54,26 +54,61 @@ export interface DateRangeInputProps extends Omit<ComponentPropsWithoutRef<"div"
     /** Maximum year allowed. */
     maxYear?: number;
     /**
-     * Adds a spinner to the start/end inputs to indicate activity. Note that it
-     * doesn't automatically disable the input.
+     * Renders the date-range input in a **loading** state.
+     *
+     * When `true`, the date-range input is “soft-disabled”: it looks disabled and
+     * ignores user interaction but remains focusable. By default, spinners are
+     * shown (_i.e._, `showSpinners` is set to `true` unless overridden).
+     *
+     * The date-range input's accessible description while loading can be
+     * controlled via `loadingDescription`.
+     *
+     * To only show spinners without “soft-disabling” the date-range input, set
+     * `showSpinners` instead.
+     *
+     * @example
+     *
+     * ```tsx
+     * <DateRangeInput loading={fetching} loadingDescription="Fetching…" />;
+     * ```
      *
      * @default false
      */
     loading?: boolean;
     /**
-     * Adds a spinner to the start input to indicate activity. Note that it
-     * doesn't automatically disable the input.
+     * Accessible description of the date-range input when it is in a “loading”
+     * state.
+     */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show spinners in the start and end parts of the date-range
+     * input.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the date-range input.
+     *
+     * Use `showSpinners` when you want spinners **without** “soft-disabling” the
+     * date-range input. To “soft-disable” **without** spinners, set `loading` to
+     * `true` and `showSpinners` to `false`.
+     *
+     * Use `showStartSpinner` or `showEndSpinner` to individually control whether
+     * to show a spinner in the start or end parts of the date-range input.
      *
      * @default loading
      */
-    startLoading?: boolean;
+    showSpinners?: boolean;
     /**
-     * Adds a spinner to the end input to indicate activity. Note that it doesn't
-     * automatically disable the input.
+     * Whether to show the start input spinner.
      *
-     * @default loading
+     * @default showSpinners
+     */
+    showStartSpinner?: boolean;
+    /**
+     * Whether to show the end input spinner.
+     *
+     * @default showSpinners
      */
-    endLoading?: boolean;
+    showEndSpinner?: boolean;
     /** Sets the inputs' text align. */
     align?: Responsive<CSSProperties["textAlign"]>;
     /** Date-range input's start adornment. */
@@ -104,17 +139,17 @@ export interface DateRangeInputProps extends Omit<ComponentPropsWithoutRef<"div"
      */
     fullFormat?: string;
     /** Description of the short format provided to assistive technologies. */
-    formatDescription?: string;
+    formatDescription?: ReactNode;
     /**
      * Label announced to assistive technologies for the start input (so that the
      * user knows that they are interacting with the start input).
      */
-    startInputLabel?: string;
+    startInputLabel?: ReactNode;
     /**
      * Label announced to assistive technologies for the end input (so that the
      * user knows that they are interacting with the end input).
      */
-    endInputLabel?: string;
+    endInputLabel?: ReactNode;
     /**
      * Function that should return the label to provide to the button that opens
      * the input's calendar.

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

@@ -1,7 +1,12 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element a dialog title can be rendered as. */
+export type DialogTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
 /** Properties of the dialog title component. */
-export interface DialogTitleProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+export type DialogTitleProps<TAs extends DialogTitleAs = "h2"> = PolymorphicProps<DialogTitleAs, TAs, "h2", DialogTitleOwnProps>;
+/** Own properties of the dialog title component. */
+export interface DialogTitleOwnProps extends Pick<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, "asChild"> {
 }
 /** Accessible title to be announced when the dialog is opened. */
-export declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const DialogTitle: PolymorphicComponent<DialogTitleAs, "h2", DialogTitleOwnProps>;

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" | "enabledWhenLoading" | "loadingContent" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface DropdownMenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
     /**
      * 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" | "enabledWhenLoading" | "loadingContent" | "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" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
     /**
      * 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" | "enabledWhenLoading" | "loadingContent" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+export interface DropdownMenuRadioItemProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, "asChild" | "color">, Pick<MenuListItemProps, "color" | "loading" | "loadingContent" | "showSpinner" | "iconPlacement" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
     /**
      * Whether to show the radio.
      *

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

@@ -68,7 +68,7 @@ export interface ErrorBoundaryProps extends Pick<ComponentPropsWithoutRef<typeof
      * Properties to pass to the `IconButton` component used to reset the error
      * boundary.
      */
-    resetButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    resetButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     children?: ReactNode;
 }
 /**

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

@@ -25,7 +25,7 @@ export interface FeedbackPopoverProps extends ComponentPropsWithoutRef<typeof Po
     /** Properties to pass to the element containing the button. */
     buttonContainerProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the `IconButton` component. */
-    iconButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton>, "size" | "icon" | "label">;
+    iconButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton<"button">>, "size" | "icon" | "label">;
 }
 /**
  * Component used to provide feedback to a form control, where the feedback is

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

@@ -61,6 +61,7 @@ export declare function useFieldDescriptionIds(): string[] | undefined;
 export declare function useFieldErrorMessageIds(): string[] | undefined;
 /** Hook that makes a field aware of its control's information. */
 export declare function useSetFieldControl(controlId: string | undefined, controlTagName: string | undefined, controlCodeId: string | undefined, controlHasCode?: boolean | undefined, controlRequired?: boolean | undefined): {
+    generatedId: string;
     controlId: string;
     codeId: string | undefined;
 };

package/dist/types/components/FieldGroup/FieldGroupTitle.d.ts

@@ -1,19 +1,16 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevel } from '../Heading';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element a field group title can be rendered as. */
+export type FieldGroupTitleAs = "div" | "span" | "label" | "h2" | "h3" | "h4" | "h5" | "h6";
 /** Properties of the field group title component. */
-export interface FieldGroupTitleProps extends ComponentPropsWithoutRef<"h2"> {
+export type FieldGroupTitleProps<TAs extends FieldGroupTitleAs = "div"> = PolymorphicProps<FieldGroupTitleAs, TAs, "div", FieldGroupTitleOwnProps>;
+/** Own properties of the field group title component. */
+export interface FieldGroupTitleOwnProps {
     /**
      * 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;
-    /**
-     * Heading level.
-     *
-     * @default 2
-     */
-    level?: HeadingLevel;
 }
 /** Component used to display the caption of a field group. */
-export declare const FieldGroupTitle: import('react').ForwardRefExoticComponent<FieldGroupTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const FieldGroupTitle: PolymorphicComponent<FieldGroupTitleAs, "div", FieldGroupTitleOwnProps>;

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

@@ -1,8 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Elements a heading can be rendered as. */
+export type HeadingAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "label";
 /** Heading levels. */
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 /** Properties of the heading component. */
-export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}`> {
+export type HeadingProps<TAs extends HeadingAs = "h2"> = PolymorphicProps<HeadingAs, TAs, "h2", HeadingOwnProps>;
+/** Own properties of the heading component. */
+export interface HeadingOwnProps {
     /**
      * 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
@@ -10,9 +14,12 @@ export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}
      */
     asChild?: boolean;
     /**
-     * Heading level. By default, if `asChild` is not provided, the level is used
-     * to determine which HTML element to render, so a level of `2` causes an
-     * `<h2>` element to be rendered.
+     * Heading level, the larger the level, the smaller the font-size (level `1`
+     * is largest, `6` smallest).
+     *
+     * By default, if `as` and `asChild` are not provided, the level is used to
+     * determine which HTML element to render, so a level of `2` causes a `<h2>`
+     * element to be rendered.
      *
      * @default 2
      */
@@ -31,4 +38,4 @@ export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}
  * }
  * ```
  */
-export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const Heading: PolymorphicComponent<HeadingAs, "h2", HeadingOwnProps>;