@commercetools/nimbus 0.0.0-canary-20251013071647 → 0.0.0-canary-20251013204307

package/dist/dialog.d.ts

@@ -7,34 +7,36 @@ import { DialogHeaderProps as DialogHeaderProps_2 } from './dialog.types';
 import { DialogRootProps as DialogRootProps_2 } from './dialog.types';
 import { DialogTitleProps as DialogTitleProps_2 } from './dialog.types';
 import { DialogTriggerProps as DialogTriggerProps_2 } from './dialog.types';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { ModalOverlayProps } from 'react-aria-components';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
-declare interface ButtonProps extends FunctionalButtonProps {
+declare type ButtonProps = ButtonRootProps & FunctionalButtonProps & {
     slot?: string | null | undefined;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 /**
  * Base recipe props interface that combines Chakra UI's recipe props
  * with the unstyled prop option for the button element.
  */
-declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {
-}
+declare type ButtonRecipeProps = {
+    size?: RecipeProps<"button">["size"];
+    variant?: RecipeProps<"button">["variant"];
+    tone?: RecipeProps<"button">["tone"];
+} & UnstyledProp;
 
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare interface ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> {
+declare type ButtonRootProps = Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> & {
     slot?: string | null | undefined;
-}
+};
 
 /**
  * Dialog
@@ -262,7 +264,7 @@ export declare const Dialog: {
  *
  * The main body content section of the dialog.
  */
-export declare interface DialogBodyProps extends DialogBodySlotProps {
+export declare type DialogBodyProps = DialogBodySlotProps & {
     /**
      * The body content
      */
@@ -271,9 +273,9 @@ export declare interface DialogBodyProps extends DialogBodySlotProps {
      * The ref to the dialog body
      */
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
-declare type DialogBodySlotProps = HTMLChakraProps<"div">;
+export declare type DialogBodySlotProps = HTMLChakraProps<"div">;
 
 /**
  * Props for the Dialog.CloseTrigger component
@@ -281,13 +283,15 @@ declare type DialogBodySlotProps = HTMLChakraProps<"div">;
  * A button that closes the dialog when activated.
  * Displays an IconButton with an X icon by default.
  */
-export declare interface DialogCloseTriggerProps extends Omit<IconButtonProps, "aria-label"> {
+export declare type DialogCloseTriggerProps = Omit<IconButtonProps, "aria-label"> & {
     /**
      * Accessible label for the close button
      * @default "Close dialog"
      */
     "aria-label"?: string;
-}
+};
+
+export declare type DialogCloseTriggerSlotProps = HTMLChakraProps<"div">;
 
 /**
  * Props for the Dialog.Content component
@@ -295,7 +299,7 @@ export declare interface DialogCloseTriggerProps extends Omit<IconButtonProps, "
  * The main dialog content container that wraps the React Aria Dialog and Dialog.
  * Configuration (size, placement, etc.) is inherited from Dialog.Root via context.
  */
-export declare interface DialogContentProps extends DialogModalOverlaySlotProps {
+export declare type DialogContentProps = DialogModalOverlaySlotProps & {
     /**
      * The dialog content
      */
@@ -304,14 +308,16 @@ export declare interface DialogContentProps extends DialogModalOverlaySlotProps
      * The ref to the dialog content
      */
     ref?: React.RefObject<HTMLDivElement>;
-}
+};
+
+export declare type DialogContentSlotProps = HTMLChakraProps<"div">;
 
 /**
  * Props for the Dialog.Footer component
  *
  * The footer section of the dialog, typically containing action buttons.
  */
-export declare interface DialogFooterProps extends DialogFooterSlotProps {
+export declare type DialogFooterProps = DialogFooterSlotProps & {
     /**
      * The footer content (usually buttons)
      */
@@ -320,16 +326,16 @@ export declare interface DialogFooterProps extends DialogFooterSlotProps {
      * The ref to the dialog footer
      */
     ref?: React.Ref<HTMLElement>;
-}
+};
 
-declare type DialogFooterSlotProps = HTMLChakraProps<"footer">;
+export declare type DialogFooterSlotProps = HTMLChakraProps<"footer">;
 
 /**
  * Props for the Dialog.Header component
  *
  * The header section of the dialog content.
  */
-export declare interface DialogHeaderProps extends DialogHeaderSlotProps {
+export declare type DialogHeaderProps = DialogHeaderSlotProps & {
     /**
      * The header content
      */
@@ -338,11 +344,18 @@ export declare interface DialogHeaderProps extends DialogHeaderSlotProps {
      * The ref to the dialog header
      */
     ref?: React.Ref<HTMLElement>;
-}
+};
+
+export declare type DialogHeaderSlotProps = HTMLChakraProps<"header">;
 
-declare type DialogHeaderSlotProps = HTMLChakraProps<"header">;
+export declare type DialogModalOverlaySlotProps = HTMLChakraProps<"div">;
 
-declare type DialogModalOverlaySlotProps = HTMLChakraProps<"div">;
+export declare type DialogModalSlotProps = HTMLChakraProps<"div">;
+
+declare type DialogRecipeProps = {
+    placement?: SlotRecipeProps<"dialog">["placement"];
+    scrollBehavior?: SlotRecipeProps<"dialog">["scrollBehavior"];
+};
 
 /**
  * Props for the Dialog.Root component
@@ -353,7 +366,7 @@ declare type DialogModalOverlaySlotProps = HTMLChakraProps<"div">;
  * This component handles configuration through recipe variants that are passed
  * down to child components via context.
  */
-export declare interface DialogRootProps extends RecipeVariantProps<typeof dialogSlotRecipe> {
+export declare type DialogRootProps = DialogRootSlotProps & {
     /**
      * The children components (Trigger, Content, etc.)
      */
@@ -394,74 +407,21 @@ export declare interface DialogRootProps extends RecipeVariantProps<typeof dialo
      * a `slot`-property set to `title`.
      */
     "aria-label"?: string;
-}
+};
+
+export declare type DialogRootSlotProps = HTMLChakraProps<"div", DialogRecipeProps>;
 
 /**
  * Scroll behavior variants for the dialog
  */
 export declare type DialogScrollBehavior = "inside" | "outside";
 
-/**
- * Dialog recipe - styling for Dialog component overlays
- * Supports center positioning, various sizes, and motion presets for accessible dialog experiences
- */
-declare const dialogSlotRecipe: SlotRecipeDefinition<"trigger" | "modalOverlay" | "modal" | "content" | "title" | "closeTrigger" | "header" | "body" | "footer", {
-placement: {
-center: {
-modal: {
-alignItems: "center";
-};
-content: {
-"--dialog-base-margin": "auto";
-mx: "auto";
-};
-};
-top: {
-modal: {
-alignItems: "flex-start";
-};
-content: {
-"--dialog-base-margin": "spacing.1600";
-mx: "auto";
-};
-};
-bottom: {
-modal: {
-alignItems: "flex-end";
-};
-content: {
-"--dialog-base-margin": "spacing.1600";
-mx: "auto";
-};
-};
-};
-scrollBehavior: {
-inside: {
-modal: {
-overflow: "hidden";
-};
-content: {
-maxH: "calc(100% - 7.5rem)";
-};
-body: {
-overflow: "auto";
-focusVisibleRing: "outside";
-};
-};
-outside: {
-modal: {
-overflow: "auto";
-};
-};
-};
-}>;
-
 /**
  * Props for the Dialog.Title component
  *
  * The accessible title element for the dialog.
  */
-export declare interface DialogTitleProps extends DialogTitleSlotProps {
+export declare type DialogTitleProps = DialogTitleSlotProps & {
     /**
      * The title text
      */
@@ -470,16 +430,16 @@ export declare interface DialogTitleProps extends DialogTitleSlotProps {
      * The ref to the dialog title
      */
     ref?: React.Ref<HTMLHeadingElement>;
-}
+};
 
-declare type DialogTitleSlotProps = HTMLChakraProps<"h2">;
+export declare type DialogTitleSlotProps = HTMLChakraProps<"h2">;
 
 /**
  * Props for the Dialog.Trigger component
  *
  * The trigger element that opens the dialog when activated.
  */
-export declare interface DialogTriggerProps extends DialogTriggerSlotProps {
+export declare type DialogTriggerProps = DialogTriggerSlotProps & {
     /**
      * The trigger content
      */
@@ -498,9 +458,9 @@ export declare interface DialogTriggerProps extends DialogTriggerSlotProps {
      * The ref to the trigger html-button
      */
     ref?: React.RefObject<HTMLButtonElement>;
-}
+};
 
-declare type DialogTriggerSlotProps = HTMLChakraProps<"button">;
+export declare type DialogTriggerSlotProps = HTMLChakraProps<"button">;
 
 /** combine chakra-button props with aria-button props */
 declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps | "slot"> & {
@@ -510,11 +470,11 @@ declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, key
 /**
  * Main props interface for the IconButton component.
  */
-declare interface IconButtonProps extends ButtonProps {
+declare type IconButtonProps = ButtonProps & {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 export { }
 

package/dist/draggable-list.d.ts

@@ -0,0 +1,307 @@
+import { DraggableListFieldItemData as DraggableListFieldItemData_2 } from './draggable-list.types';
+import { DraggableListFieldProps as DraggableListFieldProps_2 } from './draggable-list.types';
+import { DraggableListItemData as DraggableListItemData_2 } from './draggable-list.types';
+import { DraggableListItemProps as DraggableListItemProps_2 } from './draggable-list.types';
+import { DraggableListRootProps as DraggableListRootProps_2 } from './draggable-list.types';
+import { GridListItemProps } from 'react-aria-components';
+import { GridListProps } from 'react-aria-components';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { Key } from 'react-aria-components';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * DraggableList
+ * ============================================================
+ * A drag-and-drop list component for reordering items.
+ * Built with React Aria Components for accessibility and keyboard navigation.
+ *
+ * Features:
+ * - Drag-and-drop reordering with visual feedback
+ * - Keyboard navigation support
+ * - Controlled and uncontrolled modes
+ * - Accessible drag-and-drop interactions
+ * - Customizable item rendering
+ *
+ * **Important:** You must provide either an `aria-label` or `aria-labelledby`
+ * prop for accessibility. The drag-and-drop functionality will not work properly
+ * without an accessible label.
+ *
+ * @example
+ * ```tsx
+ * <DraggableList.Root items={items} aria-label="Task list">
+ *   {(item) => (
+ *     <DraggableList.Item key={item.id} id={item.id}>
+ *       {item.content}
+ *     </DraggableList.Item>
+ *   )}
+ * </DraggableList.Root>
+ * ```
+ *
+ * @see https://react-spectrum.adobe.com/react-aria/dnd.html
+ */
+export declare const DraggableList: {
+    /**
+     * # DraggableList.Root
+     *
+     * The root component that provides context and drag-and-drop functionality.
+     * Manages the state of draggable items and handles reordering logic.
+     *
+     * This component must wrap all DraggableList.Item components and provides
+     * the drag-and-drop context and reordering callbacks.
+     *
+     * Note: If your items have `key` and `label` properties, you can omit the children
+     * prop and the component will render the items automatically.
+     *
+     * @example
+     * ```tsx
+     * // With custom children
+     * <DraggableList.Root items={items} aria-label="Tasks list">
+     *   {(item) => (
+     *     <DraggableList.Item key={item.id} id={item.id}>
+     *       {item.content}
+     *     </DraggableList.Item>
+     *   )}
+     * </DraggableList.Root>
+     *
+     * // Without children (items must have key and label)
+     * <DraggableList.Root items={itemsWithKeyAndLabel} aria-label="Priority list" />
+     * ```
+     */
+    Root: <T extends DraggableListItemData_2>({ children, ref, items, onUpdateItems, removableItems, renderEmptyState: renderEmptyStateFromProps, ...restProps }: DraggableListRootProps_2<T>) => JSX.Element;
+    /**
+     * # DraggableList.Item
+     *
+     * An individual draggable item within the list.
+     * Handles drag interactions and provides visual feedback during dragging.
+     *
+     * This component represents a single item in the draggable list and supports
+     * drag handles, drag previews, and reordering interactions.
+     *
+     * @example
+     * ```tsx
+     * <DraggableList.Root items={items} aria-label="Task list">
+     *   {(item) => (
+     *     <DraggableList.Item key={item.id} id={item.id}>
+     *       <div>{item.title}</div>
+     *       <div>{item.description}</div>
+     *     </DraggableList.Item>
+     *   )}
+     * </DraggableList.Root>
+     * ```
+     */
+    Item: <T extends DraggableListItemData_2>({ children, id, onRemoveItem, textValue: textValueFromProps, ...restProps }: DraggableListItemProps_2<T>) => JSX.Element;
+    /**
+     * # DraggableList.Field
+     *
+     * A standalone form field component for DraggableList that integrates with form libraries.
+     * Provides label, error handling, and hint text support for draggable lists.
+     *
+     * This component is configured entirely through props and does not accept children.
+     * All draggable list configuration is passed via the `items` prop and related properties.
+     *
+     * @example
+     * ```tsx
+     * <DraggableList.Field
+     *   label="Priority Order"
+     *   description="Drag items to reorder"
+     *   error={errors.priorities}
+     *   items={items}
+     *   aria-label="Priority list"
+     * />
+     * ```
+     */
+    Field: <T extends DraggableListFieldItemData_2>({ label, description, error, infoBox, isRequired, isInvalid, isDisabled, isReadOnly, id, items, ...restProps }: DraggableListFieldProps_2<T>) => JSX.Element;
+};
+
+export declare type DraggableListEmptySlotProps = HTMLChakraProps<"div">;
+
+export declare const _DraggableListField: <T extends DraggableListFieldItemData>({ label, description, error, infoBox, isRequired, isInvalid, isDisabled, isReadOnly, id, items, ...restProps }: DraggableListFieldProps<T>) => JSX.Element;
+
+/**
+ * Data shape for items used in DraggableList.Field
+ *
+ * Extends DraggableListItemData with required key and label properties.
+ * This ensures all items have the necessary data for default rendering in form fields.
+ *
+ * @property key - Unique identifier for the item (required)
+ * @property label - Display content for the item (required)
+ */
+export declare type DraggableListFieldItemData = DraggableListItemData & {
+    key: string;
+    label: string;
+};
+
+/**
+ * Props for the DraggableList.Field component
+ *
+ * A form field wrapper for DraggableList that combines the draggable list
+ * functionality with form field labeling, description, and error handling.
+ *
+ * This component is configured via props only and does not accept children.
+ * Items are rendered using their `key` and `label` properties.
+ *
+ * @template T - Type for item data, must extend DraggableListFieldItemData
+ */
+export declare type DraggableListFieldProps<T extends DraggableListFieldItemData> = Omit<DraggableListRootProps<T>, "children" | "direction"> & Omit<FormFieldProps, "slot"> & {
+    /**
+     * The form field label (required)
+     *
+     * If a visible label is not necessary, use `DraggableList.Root`
+     */
+    label: ReactNode;
+    /**
+     * Optional description text displayed below the label
+     */
+    description?: ReactNode;
+    /**
+     * Error message to display when validation fails
+     */
+    error?: ReactNode;
+    /**
+     * Optional info box content for additional context
+     */
+    infoBox?: ReactNode;
+};
+
+export declare const _DraggableListItem: <T extends DraggableListItemData>({ children, id, onRemoveItem, textValue: textValueFromProps, ...restProps }: DraggableListItemProps<T>) => JSX.Element;
+
+export declare type DraggableListItemContentSlotProps = HTMLChakraProps<"div">;
+
+/**
+ * Base data shape for draggable list items
+ *
+ * @property key - Unique identifier for the item (required for default rendering)
+ * @property label - Display content for the item (required for default rendering)
+ *
+ * If either `key` or `label` are not defined, you must provide custom children
+ * to the DraggableList.Root component.
+ */
+export declare type DraggableListItemData = {
+    key?: string;
+    label?: ReactNode;
+} & Record<string, unknown>;
+
+/**
+ * Props for the DraggableList.Item component
+ *
+ * The item component renders each individual item in the draggable list.
+ * Supports drag-and-drop interaction and optional removal.
+ *
+ * @template T - Type for the item's data object
+ */
+export declare type DraggableListItemProps<T extends DraggableListItemData> = Omit<GridListItemProps<T>, "className" | "onClick" | "style" | "translate"> & Omit<DraggableListItemSlotProps, "children"> & {
+    /**
+     * The unique identifier for the item
+     */
+    id?: string;
+    /**
+     * Ref to the item container element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The content to display for this item
+     */
+    children?: ReactNode;
+    /**
+     * Callback fired when the remove button is pressed.
+     * The remove button is only rendered when this callback is provided.
+     * @param key - The key of the item being removed
+     */
+    onRemoveItem?: (key: Key) => void;
+};
+
+export declare type DraggableListItemSlotProps = HTMLChakraProps<"div">;
+
+declare type DraggableListRecipeProps = {
+    size?: SlotRecipeProps<"draggableList">["size"];
+};
+
+export declare const _DraggableListRoot: <T extends DraggableListItemData>({ children, ref, items, onUpdateItems, removableItems, renderEmptyState: renderEmptyStateFromProps, ...restProps }: DraggableListRootProps<T>) => JSX.Element;
+
+/**
+ * Props for the DraggableList.Root component
+ *
+ * The root component that provides context and state management for the draggable list.
+ * Uses React Aria's GridList for accessibility and drag-and-drop functionality.
+ *
+ * @template T - Type for item data displayed in the list. Items array type is `T[]`.
+ */
+export declare type DraggableListRootProps<T extends DraggableListItemData> = Omit<GridListProps<T>, "autoFocus" | "className" | "style" | "translate" | "renderEmptyState"> & Omit<HTMLChakraProps<"div", SlotRecipeProps<"draggableList">>, "children" | "slot"> & {
+    /**
+     * Array of items to display in the list.
+     * If `children` is not provided, each item must have both `key` and `label` properties.
+     */
+    items?: T[];
+    /**
+     * Callback fired when the list is updated by drag-and-drop or item removal
+     * @param updatedItems - The new array of items after the update
+     */
+    onUpdateItems?: (updatedItems: T[]) => void;
+    /**
+     * Ref to the root container element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Whether to show a remove button for each item.
+     * When an item is removed, `onUpdateItems` is called with the updated list.
+     * @default false
+     */
+    removableItems?: boolean;
+    /**
+     * Custom render function for list items.
+     * If not provided, items will be rendered using their `key` and `label` properties.
+     */
+    children?: GridListProps<T>["children"];
+    /**
+     * Content to display when the list is empty
+     * @default "drop items here"
+     */
+    renderEmptyState?: ReactNode;
+};
+
+export declare type DraggableListRootSlotProps = HTMLChakraProps<"div", DraggableListRecipeProps>;
+
+/**
+ * Main props interface for the FormField component.
+ * Extends FormFieldVariantProps to include both root props and variant props,
+ * while adding support for React children.
+ */
+declare type FormFieldProps = FormFieldRootSlotProps & {
+    children?: React.ReactNode;
+    /** true if the field is a required field */
+    isRequired?: boolean;
+    /** true if the field is invalid */
+    isInvalid?: boolean;
+    /** true if the field is disabled */
+    isDisabled?: boolean;
+    /** true, if the field is read only  */
+    isReadOnly?: boolean;
+    /** id passed to the field's input component*/
+    id?: string;
+    /**
+     * React ref to be forwarded to the root element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
+
+declare type FormFieldRecipeProps = {
+    size?: SlotRecipeProps<"formField">["size"];
+    direction?: SlotRecipeProps<"formField">["direction"];
+};
+
+declare type FormFieldRootSlotProps = HTMLChakraProps<"div", FormFieldRecipeProps & UnstyledProp>;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/drawer.d.ts

@@ -8,33 +8,37 @@ import { DrawerRootProps as DrawerRootProps_2 } from './drawer.types';
 import { DrawerTitleProps as DrawerTitleProps_2 } from './drawer.types';
 import { DrawerTriggerProps as DrawerTriggerProps_2 } from './drawer.types';
 import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps as HTMLChakraProps_2 } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { ModalOverlayProps } from 'react-aria-components';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
 import { RecipeVariantProps } from '@chakra-ui/react';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { UnstyledProp } from '@chakra-ui/react';
 
-declare interface ButtonProps extends FunctionalButtonProps {
+declare type ButtonProps = ButtonRootProps & FunctionalButtonProps & {
     slot?: string | null | undefined;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 /**
  * Base recipe props interface that combines Chakra UI's recipe props
  * with the unstyled prop option for the button element.
  */
-declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {
-}
+declare type ButtonRecipeProps = {
+    size?: RecipeProps<"button">["size"];
+    variant?: RecipeProps<"button">["variant"];
+    tone?: RecipeProps<"button">["tone"];
+} & UnstyledProp;
 
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare interface ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> {
+declare type ButtonRootProps = Omit<HTMLChakraProps_2<"button", ButtonRecipeProps>, "slot"> & {
     slot?: string | null | undefined;
-}
+};
 
 /**
  * Drawer
@@ -410,7 +414,7 @@ export declare type DrawerRootSlotProps = HTMLChakraProps<"div">;
  * Drawer recipe - styling for Drawer component overlays
  * Supports center positioning, various sizes, and motion presets for accessible drawer experiences
  */
-declare const drawerSlotRecipe: SlotRecipeDefinition<"trigger" | "modalOverlay" | "modal" | "content" | "title" | "closeTrigger" | "header" | "body" | "footer", {
+declare const drawerSlotRecipe: SlotRecipeDefinition<"content" | "body" | "modal" | "trigger" | "title" | "header" | "footer" | "modalOverlay" | "closeTrigger", {
 showBackdrop: {
 true: {
 modalOverlay: {
@@ -559,11 +563,11 @@ declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, key
 /**
  * Main props interface for the IconButton component.
  */
-declare interface IconButtonProps extends ButtonProps {
+declare type IconButtonProps = ButtonProps & {
     /** explains the intended action, required for accessibility */
     "aria-label": string;
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 export { }