@cube-dev/ui-kit 0.83.3 → 0.85.0

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useIsDarwin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useKeySymbols.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useLayoutEffect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useViewportSize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/react/wrapNodeIfPlain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/transitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.83.3';
+    const version = '0.85.0';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.83.3",
+  "version": "0.85.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/Item.d.ts

@@ -6,5 +6,8 @@ export interface CubeItemProps<T> extends ItemProps<T>, Omit<CubeItemBaseProps,
     wrapper?: (item: ReactElement) => ReactElement;
     [key: string]: any;
 }
-declare const _Item: <T>(props: CubeItemProps<T>) => ReactElement;
+declare const _Item: (<T>(props: CubeItemProps<T>) => ReactElement) & {
+    Action: import("react").ForwardRefExoticComponent<Omit<import("./actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+    Badge: import("react").ForwardRefExoticComponent<import("./content/ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+};
 export { _Item as Item };

package/types/components/actions/ItemAction/ItemAction.d.ts

@@ -1,8 +1,16 @@
-import { CubeButtonProps } from '../Button';
-export interface CubeItemActionProps extends CubeButtonProps {
+import { ComponentProps, ReactNode } from 'react';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
+import { CubeUseActionProps } from '../use-action';
+export interface CubeItemActionProps extends Omit<CubeUseActionProps, 'as' | 'htmlType'> {
+    icon?: ReactNode | 'checkbox';
+    children?: ReactNode;
+    isLoading?: boolean;
+    isSelected?: boolean;
+    type?: 'primary' | 'secondary' | 'neutral' | 'clear' | (string & {});
+    theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
+    tooltip?: string | (Omit<ComponentProps<typeof TooltipProvider>, 'children'> & {
+        title?: string;
+    });
 }
-export declare const ItemAction: import("react").ComponentType<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {}>;
+export declare const ItemAction: import("react").ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+export type { CubeItemActionProps as ItemActionProps };

package/types/components/actions/ItemActionContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CubeItemBaseProps } from '../content/ItemBase';
+interface ItemActionContextValue {
+    type?: CubeItemBaseProps['type'];
+    theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
+}
+export interface ItemActionProviderProps {
+    type?: CubeItemBaseProps['type'];
+    theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
+    children: ReactNode;
+}
+export declare function ItemActionProvider({ type, theme, children, }: ItemActionProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useItemActionContext(): ItemActionContextValue;
+export {};

package/types/components/actions/ItemButton/ItemButton.d.ts

@@ -1,6 +1,17 @@
+import { ReactNode } from 'react';
+import { Styles } from '../../../tasty';
 import { CubeItemBaseProps } from '../../content/ItemBase';
+import { CubeItemActionProps } from '../ItemAction';
 import { CubeUseActionProps } from '../use-action';
-export interface CubeItemButtonProps extends CubeItemBaseProps, Omit<CubeUseActionProps, 'as'> {
+export interface CubeItemButtonProps extends Omit<CubeItemBaseProps, 'size'>, Omit<CubeUseActionProps, 'as'> {
+    actions?: ReactNode;
+    size?: Omit<CubeItemBaseProps['size'], 'inline'>;
+    wrapperStyles?: Styles;
+    showActionsOnHover?: boolean;
 }
-export declare const ItemButton: import("react").ForwardRefExoticComponent<Omit<CubeItemButtonProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
-export type { CubeItemButtonProps as ItemButtonProps };
+declare const _ItemButton: import("react").ForwardRefExoticComponent<Omit<CubeItemButtonProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
+    Action: import("react").ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+    Badge: import("react").ForwardRefExoticComponent<import("../../content/ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { _ItemButton as ItemButton };
+export type { CubeItemButtonProps as ItemButtonProps, CubeItemActionProps as ItemActionProps, };

package/types/components/actions/Menu/Menu.d.ts

@@ -44,7 +44,10 @@ declare const __Menu: (<T>(props: CubeMenuProps<T> & React.RefAttributes<HTMLULi
     SubMenuTrigger: typeof SubMenuTrigger;
     Trigger: typeof MenuTrigger;
 } & {
-    Item: <T>(props: import("../../Item").CubeItemProps<T>) => ReactElement;
+    Item: (<T>(props: import("../../Item").CubeItemProps<T>) => ReactElement) & {
+        Action: React.ForwardRefExoticComponent<Omit<import("..").CubeItemActionProps, "ref"> & React.RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+        Badge: React.ForwardRefExoticComponent<import("../../..").CubeItemBadgeProps & React.RefAttributes<HTMLDivElement>>;
+    };
     Section: any;
     SubMenuTrigger: typeof SubMenuTrigger;
     Trigger: React.ForwardRefExoticComponent<any>;

package/types/components/actions/index.d.ts

@@ -7,6 +7,7 @@ declare const Button: import("react").ForwardRefExoticComponent<Omit<import("./B
 export * from './Button';
 export * from './Action/Action';
 export * from './ItemAction';
+export * from './ItemActionContext';
 export * from './ItemButton';
 export * from './Menu';
 export * from './CommandMenu';

package/types/components/content/ItemBadge/ItemBadge.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactNode } from 'react';
+import { BaseProps } from '../../../tasty';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
+export interface CubeItemBadgeProps extends BaseProps {
+    icon?: ReactNode | 'checkbox';
+    children?: ReactNode;
+    isLoading?: boolean;
+    isSelected?: boolean;
+    type?: 'primary' | 'secondary' | 'neutral' | 'clear' | (string & {});
+    theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
+    tooltip?: string | (Omit<ComponentProps<typeof TooltipProvider>, 'children'> & {
+        title?: string;
+    });
+}
+export declare const ItemBadge: import("react").ForwardRefExoticComponent<CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { CubeItemBadgeProps as ItemBadgeProps };

package/types/components/content/ItemBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { ItemBadge } from './ItemBadge';
+export type { CubeItemBadgeProps } from './ItemBadge';

package/types/components/content/ItemBase/ItemBase.d.ts

@@ -10,8 +10,18 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
     suffix?: ReactNode;
     description?: ReactNode;
     descriptionPlacement?: 'inline' | 'block' | 'auto';
+    /**
+     * Whether the item is selected.
+     * @default false
+     */
     isSelected?: boolean;
-    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | (string & {});
+    /**
+     * Actions to render inline or placeholder mode for ItemButton wrapper.
+     * - ReactNode: renders actions inline as part of the grid layout
+     * - true: placeholder mode for ItemButton (enables --actions-width calculation)
+     */
+    actions?: ReactNode | true;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number | (string & {});
     type?: 'item' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | (string & {});
     theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
     variant?: ItemVariant;
@@ -46,6 +56,10 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
      * and makes the component disabled.
      */
     isLoading?: boolean;
+    /**
+     * When true, applies card styling with increased border radius.
+     */
+    isCard?: boolean;
     /**
      * @private
      * Default tooltip placement for the item.
@@ -57,10 +71,11 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
      */
     labelRef?: RefObject<HTMLElement>;
 }
-export declare function useAutoTooltip({ tooltip, children, labelProps, }: {
+export declare function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel, }: {
     tooltip: CubeItemBaseProps['tooltip'];
     children: ReactNode;
     labelProps?: Props;
+    isDynamicLabel?: boolean;
 }): {
     labelRef: (element: HTMLElement | null) => void;
     labelProps: {
@@ -71,5 +86,8 @@ export declare function useAutoTooltip({ tooltip, children, labelProps, }: {
     hasTooltip: boolean;
     renderWithTooltip: (renderElement: (tooltipTriggerProps?: HTMLAttributes<HTMLElement>, tooltipRef?: RefObject<HTMLElement>) => ReactNode, defaultTooltipPlacement: OverlayProps["placement"]) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 };
-declare const _ItemBase: import("react").ForwardRefExoticComponent<CubeItemBaseProps & import("react").RefAttributes<HTMLElement>>;
+declare const _ItemBase: import("react").ForwardRefExoticComponent<CubeItemBaseProps & import("react").RefAttributes<HTMLElement>> & {
+    Action: import("react").ForwardRefExoticComponent<Omit<import("../../actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+    Badge: import("react").ForwardRefExoticComponent<import("../ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+};
 export { _ItemBase as ItemBase };

package/types/components/content/ItemBase/index.d.ts

@@ -1 +1,2 @@
 export * from './ItemBase';
+export * from '../ItemBadge';

package/types/components/fields/ComboBox/ComboBox.d.ts

@@ -1,4 +1,4 @@
-import { Key } from '@react-types/shared';
+import { FocusableRef, Key } from '@react-types/shared';
 import React, { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
 import { Section as BaseSection } from 'react-stately';
 import { FieldBaseProps } from '../../../shared';
@@ -69,7 +69,7 @@ export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyl
     /** Ref for accessing the popover element */
     popoverRef?: RefObject<HTMLDivElement>;
     /** Ref for accessing the trigger button element */
-    triggerRef?: RefObject<HTMLButtonElement>;
+    triggerRef?: FocusableRef<HTMLButtonElement>;
     /** Custom styles for the input */
     inputStyles?: Styles;
     /** Custom styles for the trigger button */

package/types/components/fields/DatePicker/DateInputBase.d.ts

@@ -13,6 +13,7 @@ interface CubeDateAtomInputProps extends ContainerStyleProps {
     size?: 'small' | 'medium' | 'large' | (string & {});
     validationState?: ValidationState;
     isLoading?: boolean;
+    suffix?: React.ReactNode;
 }
 declare const _DateInputBase: React.ForwardRefExoticComponent<CubeDateAtomInputProps & React.RefAttributes<unknown>>;
 export { _DateInputBase as DateInputBase };

package/types/components/fields/FilterListBox/FilterListBox.d.ts

@@ -7,7 +7,7 @@ import { CubeListBoxProps } from '../ListBox/ListBox';
 import type { Collection, Node } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
-export interface CubeFilterListBoxProps<T> extends CubeListBoxProps<T>, FieldBaseProps {
+export interface CubeFilterListBoxProps<T> extends Omit<CubeListBoxProps<T>, 'filter'>, FieldBaseProps {
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
     /** Whether the search input should have autofocus */

package/types/components/fields/ListBox/ListBox.d.ts

@@ -96,6 +96,12 @@ export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase
      * Props to apply to the "Select All" option.
      */
     allValueProps?: Partial<CubeItemProps<T>>;
+    /**
+     * Filter function to apply to the collection nodes.
+     * Takes an iterable of nodes and returns a filtered iterable.
+     * Useful for implementing search/filter functionality.
+     */
+    filter?: (nodes: Iterable<any>) => Iterable<any>;
 }
 export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/types/components/fields/Picker/Picker.d.ts

@@ -0,0 +1,69 @@
+import { ForwardedRef, MutableRefObject, ReactElement, ReactNode } from 'react';
+import { Section as BaseSection, ListState } from 'react-stately';
+import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { CubeItemButtonProps } from '../../actions';
+import { CubeItemBaseProps } from '../../content/ItemBase';
+import { CubeListBoxProps, ListBox } from '../ListBox/ListBox';
+import type { FieldBaseProps } from '../../../shared';
+export interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | 'tooltip'>, Omit<CubeItemBaseProps, 'children' | 'size'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, Omit<FieldBaseProps, 'tooltip'>, Pick<CubeItemButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'hotkeys'> {
+    /** Placeholder text when no selection is made */
+    placeholder?: string;
+    /** Size of the picker component */
+    size?: 'small' | 'medium' | 'large';
+    /** Custom styles for the list box popover */
+    listBoxStyles?: Styles;
+    /** Custom styles for the popover container */
+    popoverStyles?: Styles;
+    /** Custom styles for the trigger button */
+    triggerStyles?: Styles;
+    /** Whether to show checkboxes for multiple selection mode */
+    isCheckable?: boolean;
+    /** Whether to flip the popover placement */
+    shouldFlip?: boolean;
+    /** Tooltip for the trigger button (separate from field tooltip) */
+    triggerTooltip?: CubeItemBaseProps['tooltip'];
+    /** Description for the trigger button (separate from field description) */
+    triggerDescription?: CubeItemBaseProps['description'];
+    /**
+     * Custom renderer for the summary shown inside the trigger when there is a selection.
+     *
+     * For `selectionMode="multiple"` the function receives:
+     *  - `selectedLabels`: array of labels of the selected items.
+     *  - `selectedKeys`: array of keys of the selected items or "all".
+     *
+     * For `selectionMode="single"` the function receives:
+     *  - `selectedLabel`: label of the selected item.
+     *  - `selectedKey`: key of the selected item.
+     *
+     * The function should return a `ReactNode` that will be rendered inside the trigger.
+     * Set to `false` to hide the summary text completely.
+     */
+    renderSummary?: ((args: {
+        selectedLabels?: string[];
+        selectedKeys?: 'all' | (string | number)[];
+        selectedLabel?: string;
+        selectedKey?: string | number | null;
+        selectionMode?: 'single' | 'multiple';
+    }) => ReactNode) | false;
+    /** Ref to access internal ListBox state */
+    listStateRef?: MutableRefObject<ListState<T>>;
+    /** Additional modifiers for styling the Picker */
+    mods?: Record<string, boolean>;
+    /** Whether the picker is clearable using a clear button in the rightIcon slot */
+    isClearable?: boolean;
+    /** Callback called when the clear button is pressed */
+    onClear?: () => void;
+    /**
+     * Sort selected item(s) to the top when the popover opens.
+     * Only works when using the `items` prop (data-driven mode).
+     * Supports both single and multiple selection modes.
+     * @default true when items are provided, false when using JSX children
+     */
+    sortSelectedToTop?: boolean;
+}
+export declare const Picker: (<T>(props: CubePickerProps<T> & {
+    ref?: ForwardedRef<HTMLElement>;
+}) => ReactElement) & {
+    Item: typeof ListBox.Item;
+    Section: typeof BaseSection;
+};

package/types/components/fields/Picker/index.d.ts

@@ -0,0 +1,2 @@
+export { Picker } from './Picker';
+export type { CubePickerProps } from './Picker';

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

@@ -86,7 +86,10 @@ declare const __Select: (<T extends object>(props: CubeSelectProps<object> & {
     Item: typeof Item;
     Section: typeof SelectSectionComponent;
 } & {
-    Item: <T>(props: import("../../Item").CubeItemProps<T>) => ReactElement;
+    Item: (<T>(props: import("../../Item").CubeItemProps<T>) => ReactElement) & {
+        Action: React.ForwardRefExoticComponent<Omit<import("../../actions").CubeItemActionProps, "ref"> & React.RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+        Badge: React.ForwardRefExoticComponent<import("../../content/ItemBase").CubeItemBadgeProps & React.RefAttributes<HTMLDivElement>>;
+    };
     Section: any;
 };
 export { __Select as Select };

package/types/components/fields/index.d.ts

@@ -16,4 +16,5 @@ export * from './LegacyComboBox';
 export * from './ListBox';
 export * from './FilterListBox';
 export * from './FilterPicker';
+export * from './Picker';
 export * from './TextInputMapper';

package/types/components/helpers/DisplayTransition/DisplayTransition.d.ts

@@ -7,6 +7,10 @@ export type DisplayTransitionProps = {
     duration?: number;
     /** Fires after enter settles or after exit completes (unmount). */
     onRest?: (transition: 'enter' | 'exit') => void;
+    /** Fires when phase changes. */
+    onPhaseChange?: (phase: Phase) => void;
+    /** Fires when isShown (derived from phase) changes. */
+    onToggle?: (isShown: boolean) => void;
     /** Keep calling children during "unmounted" (you decide what to render). */
     exposeUnmounted?: boolean;
     /** If false and initially shown, start at "entered" (no first-mount animation/SSR pop). */
@@ -20,5 +24,5 @@ export type DisplayTransitionProps = {
         ref: RefCallback<HTMLElement>;
     }) => ReactNode;
 };
-export declare function DisplayTransition({ isShown: targetShown, duration, onRest, exposeUnmounted, animateOnMount, respectReducedMotion, children, }: DisplayTransitionProps): ReactNode;
+export declare function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted, animateOnMount, respectReducedMotion, children, }: DisplayTransitionProps): ReactNode;
 export {};

package/types/data/item-themes.d.ts

@@ -1,5 +1,6 @@
 import { Styles } from 'src/tasty';
 export declare const VALIDATION_STYLES: Styles;
+export declare const ITEM_ACTION_BASE_STYLES: Styles;
 export declare const DEFAULT_PRIMARY_STYLES: Styles;
 export declare const DEFAULT_SECONDARY_STYLES: Styles;
 export declare const DEFAULT_OUTLINE_STYLES: Styles;

package/types/index.d.ts

@@ -9,6 +9,8 @@ export { Block } from './components/Block';
 export type { CubeBlockProps } from './components/Block';
 export { ItemBase } from './components/content/ItemBase/ItemBase';
 export type { CubeItemBaseProps } from './components/content/ItemBase/ItemBase';
+export { ItemBadge } from './components/content/ItemBadge/ItemBadge';
+export type { CubeItemBadgeProps } from './components/content/ItemBadge/ItemBadge';
 export { ActiveZone } from './components/content/ActiveZone/ActiveZone';
 export type { CubeActiveZoneProps } from './components/content/ActiveZone/ActiveZone';
 export * from './components/content/CopySnippet';