@cube-dev/ui-kit 0.97.1 → 0.98.0

package/types/components/actions/use-action.d.ts

@@ -37,7 +37,7 @@ export declare const useAction: ({ to, as, htmlType, label, mods, onPress, navig
         ref: import("@react-types/shared").RefObject<HTMLElement | null>;
         type: "button" | "reset" | "submit";
         rel: string | undefined;
-        as: "button" | "a" | "div" | "span";
+        as: "button" | "a" | "div" | "span" | import("react").ComponentType<any>;
         isDisabled: boolean | undefined;
         target: string | undefined;
         href: string | undefined;

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

@@ -1,11 +1,35 @@
 import { ReactNode, RefObject } from 'react';
 import { OverlayProps } from 'react-aria';
 import { ItemVariant } from '../../../data/item-themes';
-import { BaseProps, ContainerStyleProps, Props, Styles } from '../../../tasty';
+import { BaseProps, ContainerStyleProps, Mods, Props, Styles } from '../../../tasty';
+import { DynamicIcon } from '../../../utils/react';
 import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
+/** Known modifiers for Item component */
+export type ItemMods = Mods<{
+    'has-icon'?: boolean;
+    'has-start-content'?: boolean;
+    'has-end-content'?: boolean;
+    'has-right-icon'?: boolean;
+    'has-label'?: boolean;
+    'has-prefix'?: boolean;
+    'has-suffix'?: boolean;
+    'has-description'?: boolean;
+    'has-actions'?: boolean;
+    'has-actions-content'?: boolean;
+    'show-actions-on-hover'?: boolean;
+    checkbox?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    size?: string;
+    description?: string;
+    type?: string;
+    theme?: string;
+    shape?: string;
+}>;
 export interface CubeItemProps extends BaseProps, ContainerStyleProps {
-    icon?: ReactNode | 'checkbox';
-    rightIcon?: ReactNode;
+    icon?: DynamicIcon<ItemMods> | 'checkbox';
+    rightIcon?: DynamicIcon<ItemMods>;
     prefix?: ReactNode;
     suffix?: ReactNode;
     description?: ReactNode;
@@ -32,9 +56,8 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      */
     disableActionsFocus?: boolean;
     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;
+    type?: 'item' | 'header' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | 'card' | (string & {});
+    theme?: 'default' | 'danger' | 'success' | 'special' | 'note' | (string & {});
     /** Keyboard shortcut that triggers the element when pressed */
     hotkeys?: string;
     /**
@@ -66,22 +89,15 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * and makes the component disabled.
      */
     isLoading?: boolean;
-    /**
-     * When true, applies card styling with increased border radius.
-     */
-    isCard?: boolean;
-    /**
-     * When true, adds button modifier to the component styling.
-     */
-    isButton?: boolean;
     /**
      * Shape of the item's border radius.
      * - `card` - Card shape with larger border radius (`1cr`)
      * - `button` - Button shape with default border radius (default)
      * - `sharp` - Sharp corners with no border radius (`0`)
+     * - `pill` - Pill shape with fully rounded ends (`round`)
      * @default "button"
      */
-    shape?: 'card' | 'button' | 'sharp';
+    shape?: 'card' | 'button' | 'sharp' | 'pill';
     /**
      * @private
      * Default tooltip placement for the item.
@@ -92,6 +108,12 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * Ref to access the label element directly
      */
     labelRef?: RefObject<HTMLElement>;
+    /**
+     * Heading level for the Label element when type="header".
+     * Changes the Label's HTML tag to the corresponding heading (h1-h6).
+     * @default 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * String to highlight within children.
      * Only works when children is a plain string.
@@ -106,6 +128,10 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * Custom styles for highlighted text.
      */
     highlightStyles?: Styles;
+    /**
+     * Variant of the item.
+     */
+    variant?: ItemVariant;
 }
 declare const _Item: import("react").ForwardRefExoticComponent<CubeItemProps & import("react").RefAttributes<HTMLElement>> & {
     Action: import("react").ForwardRefExoticComponent<Omit<import("../../actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps, Styles } from '../../../tasty';
 export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FlowStyleProps {
     /** Switch to grid display mode */
@@ -16,6 +16,10 @@ export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleP
     /** Styles for wrapper and Inner sub-element */
     styles?: Styles;
     children?: ReactNode;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * @internal Force show dev warning even in production (for storybook testing)
      */

package/types/components/content/Layout/LayoutContainer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps {
     children?: ReactNode;
@@ -6,6 +6,10 @@ export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps
     styles?: Styles;
     /** Custom styles for the inner element */
     innerStyles?: Styles;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutContainer: import("react").ForwardRefExoticComponent<CubeLayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutContainer as LayoutContainer };

package/types/components/content/Layout/LayoutContent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Mods } from '../../../tasty';
 export type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';
 export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
@@ -7,6 +7,10 @@ export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
     children?: ReactNode;
     /** Additional modifiers to apply */
     mods?: Mods;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutContent: import("react").ForwardRefExoticComponent<CubeLayoutContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutContent as LayoutContent };

package/types/components/content/Layout/LayoutPane.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { ScrollbarType } from './LayoutContent';
 export type ResizeEdge = 'right' | 'bottom';
@@ -22,6 +22,10 @@ export interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {
     /** Custom styles */
     styles?: Styles;
     children?: ReactNode;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutPane: import("react").ForwardRefExoticComponent<CubeLayoutPaneProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutPane as LayoutPane };

package/types/components/content/Layout/LayoutPanelHeader.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps } from '../../../tasty';
-export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStyleProps {
+import { CubeItemProps } from '../Item/Item';
+export interface CubeLayoutPanelHeaderProps extends Omit<BaseProps, 'theme'>, ContainerStyleProps, CubeItemProps {
     /** Panel title */
     title?: ReactNode;
     /** Title heading level (affects semantics, not visual) */
@@ -9,9 +10,6 @@ export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStylePro
     isClosable?: boolean;
     /** Close button click handler */
     onClose?: () => void;
-    /** Custom actions to display (overrides default close button) */
-    actions?: ReactNode;
-    children?: ReactNode;
 }
 declare const _LayoutPanelHeader: import("react").ForwardRefExoticComponent<CubeLayoutPanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutPanelHeader as LayoutPanelHeader };

package/types/components/content/List/SectionHeading.d.ts

@@ -13,6 +13,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     margin?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Margin<string | number> | undefined>;
     width?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Width<string | number> | undefined>;
     height?: import("../../../tasty").ResponsiveStyleValue<boolean | import("csstype").Property.Height<string | number> | undefined>;
+    transition?: import("../../../tasty").ResponsiveStyleValue<string | (string & {}) | undefined>;
     placeContent?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PlaceContent | undefined>;
     placeItems?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.PlaceItems | undefined>;
     alignContent?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.AlignContent | undefined>;
@@ -61,14 +62,16 @@ export declare const SectionHeading: import("react").ComponentType<{
     justify?: import("../../../tasty").ResponsiveStyleValue<"stretch" | "initial" | (string & {}) | "left" | "right" | "-moz-initial" | "inherit" | "revert" | "revert-layer" | "unset" | "normal" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     style?: import("react").CSSProperties | (import("react").CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     open?: boolean | undefined;
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: import("../../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -89,13 +92,14 @@ export declare const SectionHeading: import("react").ComponentType<{
     ref?: import("react").Ref<unknown> | undefined;
     role?: import("react").AriaRole | undefined;
     id?: string | undefined;
-    as?: keyof HTMLElementTagNameMap | undefined;
+    as?: keyof HTMLElementTagNameMap | import("react").ComponentType<any> | undefined;
     qa?: string | undefined;
     qaVal?: string | number | undefined;
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -213,7 +217,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -229,7 +233,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

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

@@ -1,9 +1,7 @@
-import THEMES from '../../../data/themes';
 import { Styles } from '../../../tasty';
 import { CubeItemProps } from '../Item';
 export interface CubeTagProps extends CubeItemProps {
-    type?: keyof typeof THEMES | string;
-    theme?: keyof typeof THEMES | string;
+    theme?: 'default' | 'danger' | 'success' | 'note' | 'special';
     isClosable?: boolean;
     onClose?: () => void;
     closeButtonStyles?: Styles;