@cube-dev/ui-kit 0.107.0 → 0.108.0

package/es/utils/react/Slots.js

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

package/es/utils/react/chain.js

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

package/es/utils/react/forwardRefWithGenerics.js

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

package/es/utils/react/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
@@ -21,5 +21,6 @@ export { useControlledFocusVisible } from './useControlledFocusVisible.js';
 export { RenderCache } from './RenderCache.js';
 export { useLocalStorage } from './useLocalStorage.js';
 export { resolveIcon } from './resolveIcon.js';
+export { useMergeStyles } from './useMergeStyles.js';
 
         

package/es/utils/react/interactions.js

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

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/resolveIcon.js

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

package/es/utils/react/sharedStore.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useControlledFocusVisible.js

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

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useLocalStorage.js

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

package/es/utils/react/useMergeStyles.js

@@ -0,0 +1,49 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.108.0
+ * Released under the MIT license.
+ */
+
+import { useMemo } from 'react';
+import { mergeStyles } from '../../tasty/index.js';
+/**
+ * Hook to merge base styles with sub-element style props.
+ *
+ * This simplifies the common pattern of accepting props like `tabListStyles`,
+ * `prefixStyles`, etc. that should merge into `styles.TabList`, `styles.Prefix`, etc.
+ *
+ * @param styles - Base styles object
+ * @param subStylesMap - Mapping of sub-element names to their additional styles
+ * @returns Merged styles object
+ *
+ * @example
+ * ```tsx
+ * const { styles, tabListStyles, prefixStyles, suffixStyles, ...rest } = props;
+ *
+ * const mergedStyles = useMergeStyles(styles, {
+ *   TabList: tabListStyles,
+ *   Prefix: prefixStyles,
+ *   Suffix: suffixStyles,
+ * });
+ *
+ * return <TabsElement styles={mergedStyles} {...rest} />;
+ * ```
+ */
+export function useMergeStyles(styles, subStylesMap) {
+    // Extract values for dependency array - must be stable
+    const subStylesValues = Object.values(subStylesMap);
+    return useMemo(() => {
+        // Build sub-element styles object from the map
+        const subStyles = {};
+        for (const [element, elementStyles] of Object.entries(subStylesMap)) {
+            if (elementStyles != null) {
+                subStyles[element] = elementStyles;
+            }
+        }
+        // Merge base styles with sub-element styles
+        return mergeStyles(styles, subStyles);
+    }, [styles, ...subStylesValues]);
+}
+
+        

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.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.107.0
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.107.0
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
-export const VERSION = '0.107.0';
+export const VERSION = '0.108.0';
 if (typeof window !== 'undefined') {
     const version = VERSION;
     // Ensure CubeUIKit is defined on window in a way bundlers recognize

package/package.json

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

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

@@ -16,7 +16,7 @@ export type ItemMods = Mods<{
     'has-description'?: boolean;
     'has-actions'?: boolean;
     'has-actions-content'?: boolean;
-    'show-actions-on-hover'?: boolean;
+    'auto-hide-actions'?: boolean;
     'preserve-actions-space'?: boolean;
     checkbox?: boolean;
     disabled?: boolean;
@@ -35,6 +35,11 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
     suffix?: ReactNode;
     description?: ReactNode;
     descriptionPlacement?: 'inline' | 'block';
+    /**
+     * When true, the item is rendered inside a wrapper element to separate the actions from the item.
+     * @default false
+     */
+    insideWrapper?: boolean;
     /**
      * Whether the item is selected.
      * @default false
@@ -50,10 +55,15 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * When true, actions are hidden by default and shown only on hover, focus, or focus-within.
      * Uses opacity transition for visual hiding while maintaining layout space.
      */
-    showActionsOnHover?: boolean;
+    autoHideActions?: boolean;
+    /**
+     * When true and insideWrapper is true, this controls the visibility of the actions.
+     * @default false
+     */
+    showActions?: boolean;
     /**
      * When true, preserves the actions width when hidden (only changes opacity).
-     * Only applies when showActionsOnHover is true.
+     * Only applies when autoHideActions is true.
      * @default false
      */
     preserveActionsSpace?: boolean;

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

@@ -1,26 +1,62 @@
-import { ReactNode } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
 export type Side = 'left' | 'top' | 'right' | 'bottom';
+/**
+ * Refs context - stable refs that don't change and don't trigger re-renders.
+ * Provides portal container ref for panels to render into.
+ */
+export interface LayoutRefsContextValue {
+    /** Container element ref for panels to portal into */
+    panelContainerRef: MutableRefObject<HTMLDivElement | null>;
+    /** Whether the panel container is mounted and ready for portals */
+    isPanelContainerReady: boolean;
+    /** Callback ref to set on the panel container element */
+    setPanelContainer: (element: HTMLDivElement | null) => void;
+}
+export declare const LayoutRefsContext: import("react").Context<LayoutRefsContextValue | null>;
+export declare function useLayoutRefsContext(): LayoutRefsContextValue | null;
 /** Callback to dismiss an overlay panel */
 export type OverlayDismissCallback = () => void;
-export interface LayoutContextValue {
+/**
+ * Actions context - stable functions and configuration that don't change.
+ * Separating these from state prevents unnecessary re-renders when only state changes.
+ */
+export interface LayoutActionsContextValue {
+    /** Register a panel on a specific side with initial size */
     registerPanel: (side: Side, size: number) => void;
+    /** Unregister a panel from a specific side */
     unregisterPanel: (side: Side) => void;
+    /** Update the size of a registered panel */
     updatePanelSize: (side: Side, size: number) => void;
+    /** Set global dragging state (when any panel is being resized) */
     setDragging: (isDragging: boolean) => void;
+    /** Mark the layout as ready (after initial mount) */
     markReady: () => void;
-    panelSizes: Record<Side, number>;
-    isDragging: boolean;
-    isReady: boolean;
-    /** Whether transitions are enabled for panels */
-    hasTransition: boolean;
     /** Register an overlay panel's dismiss callback. Returns unregister function. */
     registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;
     /** Dismiss all overlay panels */
     dismissOverlayPanels: () => void;
-    /** Whether there are any overlay panels currently open */
+    /** Whether transitions are enabled for panels (stable config value) */
+    hasTransition: boolean;
+}
+/** State context - reactive state that triggers re-renders */
+export interface LayoutStateContextValue {
+    panelSizes: Record<Side, number>;
+    isDragging: boolean;
+    isReady: boolean;
     hasOverlayPanels: boolean;
 }
-export declare const LayoutContext: import("react").Context<LayoutContextValue | null>;
+export declare const LayoutActionsContext: import("react").Context<LayoutActionsContextValue | null>;
+export declare const LayoutStateContext: import("react").Context<LayoutStateContextValue | null>;
+export declare function useLayoutActionsContext(): LayoutActionsContextValue | null;
+export declare function useLayoutStateContext(): LayoutStateContextValue | null;
+/** Combined layout context value for convenience */
+export interface LayoutContextValue extends LayoutActionsContextValue, LayoutStateContextValue, LayoutRefsContextValue {
+}
+/**
+ * Combined hook that returns all layout context values.
+ * Convenience wrapper around the individual context hooks.
+ * Returns null if used outside of a Layout component.
+ */
 export declare function useLayoutContext(): LayoutContextValue | null;
 export interface LayoutProviderProps {
     children: ReactNode;

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

@@ -27,8 +27,8 @@ export type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';
 export type { CubeLayoutPanelProps, LayoutPanelMode } from './LayoutPanel';
 export type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';
 export type { CubeLayoutToolbarProps } from './LayoutToolbar';
-export { LayoutContext, LayoutPanelContext, useLayoutContext, useLayoutPanelContext, } from './LayoutContext';
-export type { LayoutContextValue, LayoutPanelContextValue, Side, } from './LayoutContext';
+export { LayoutActionsContext, LayoutStateContext, LayoutRefsContext, LayoutPanelContext, LayoutContextReset, useLayoutActionsContext, useLayoutStateContext, useLayoutRefsContext, useLayoutPanelContext, useLayoutContext, } from './LayoutContext';
+export type { LayoutActionsContextValue, LayoutStateContextValue, LayoutRefsContextValue, LayoutPanelContextValue, LayoutContextValue, Side, } from './LayoutContext';
 interface LayoutComponent extends ForwardRefExoticComponent<CubeLayoutProps & RefAttributes<HTMLDivElement>> {
     Toolbar: typeof LayoutToolbar;
     Header: typeof LayoutHeader;

package/types/components/fields/Slider/HueSlider.d.ts

@@ -0,0 +1,12 @@
+import { CubeSliderProps } from './Slider';
+export interface CubeHueSliderProps extends Omit<CubeSliderProps, 'minValue' | 'maxValue' | 'step'> {
+    /** The current hue value (0-359) */
+    value?: number;
+    /** The default hue value (0-359) */
+    defaultValue?: number;
+}
+declare const __HueSlider: import("react").ForwardRefExoticComponent<Omit<CubeHueSliderProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLDivElement, HTMLDivElement>>> & {
+    cubeInputType: string;
+    displayName: string;
+};
+export { __HueSlider as HueSlider };

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

@@ -1,6 +1,13 @@
+import { Styles, Tokens } from '../../../tasty';
 import type { CubeSliderBaseProps } from './types';
 export interface CubeSliderProps extends CubeSliderBaseProps<number> {
     gradation?: string[];
+    /** Custom styles for the track element */
+    trackStyles?: Styles;
+    /** Custom styles for the thumb element */
+    thumbStyles?: Styles;
+    /** Custom tokens for the thumb element (e.g., #slider-thumb for fill color) */
+    thumbTokens?: Tokens;
 }
 declare const __Slider: import("react").ForwardRefExoticComponent<Omit<CubeSliderProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLDivElement, HTMLDivElement>>> & {
     cubeInputType: string;

package/types/components/fields/Slider/SliderThumb.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
 import { AriaSliderThumbOptions } from 'react-aria';
+import { Styles, Tokens } from '../../../tasty';
 import type { SliderState } from 'react-stately';
 export interface SliderThumbProps extends AriaSliderThumbOptions {
     state: SliderState;
@@ -7,5 +8,7 @@ export interface SliderThumbProps extends AriaSliderThumbOptions {
     trackRef: RefObject<HTMLElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
     index: number;
+    styles?: Styles;
+    tokens?: Tokens;
 }
 export declare function SliderThumb(props: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

package/types/components/fields/Slider/SliderTrack.d.ts

@@ -1,7 +1,9 @@
+import { Styles } from '../../../tasty';
 import type { SliderState } from 'react-stately';
 export type SliderTrackProps = {
     state: SliderState;
     orientation?: 'horizontal' | 'vertical';
     isDisabled?: boolean;
+    styles?: Styles;
 };
 export declare function SliderTrack(props: SliderTrackProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 export * from './RangeSlider';
 export * from './Slider';
+export * from './HueSlider';
 export * from './types';
 export { useSliderState } from 'react-stately';
 export type { SliderState } from 'react-stately';

package/types/components/navigation/Tabs/DraggableTabList.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode, RefObject } from 'react';
 import { DraggableCollectionState, DroppableCollectionState, TabListState } from 'react-stately';
-import type { Key } from '@react-types/shared';
 export interface DraggableTabListProps {
     /** Tab list state from React Stately */
     state: TabListState<object>;
@@ -9,7 +8,7 @@ export interface DraggableTabListProps {
     /** Current ordered keys */
     orderedKeys: string[];
     /** Callback when tabs are reordered */
-    onReorder?: (newOrder: Key[]) => void;
+    onReorder?: (newOrder: string[]) => void;
     /** Render function that receives drag/drop states */
     children: (dragState: DraggableCollectionState, dropState: DroppableCollectionState, collectionProps: Record<string, unknown>) => ReactNode;
 }

package/types/components/navigation/Tabs/TabPanel.d.ts

@@ -1,4 +1,3 @@
-import type { Key } from '@react-types/shared';
 import type { ReactNode } from 'react';
 import type { TabListState } from 'react-stately';
 import type { Styles } from '../../../tasty';
@@ -28,7 +27,7 @@ export interface CachedPanelRendererProps {
     parsedTabs: ParsedTab[];
     explicitPanels: Map<string, ParsedPanel>;
     state: TabListState<object>;
-    renderPanel: (key: Key) => ReactNode;
+    renderPanel: (key: string) => ReactNode;
     panelCacheKeys?: Record<string | number, CacheKeyValue>;
     prerender: boolean;
     keepMounted: boolean;

package/types/components/navigation/Tabs/TabPicker.d.ts

@@ -1,14 +1,13 @@
-import { Key } from 'react-aria';
 import type { ParsedTab, TabSize, TabType } from './types';
 export interface TabPickerProps {
     /** Ordered list of parsed tabs to display in the picker */
     tabs: ParsedTab[];
     /** Currently selected tab key */
-    selectedKey: Key | null;
+    selectedKey: string | null;
     /** Callback when a tab is selected from the picker */
-    onSelect: (key: Key) => void;
+    onSelect: (key: string) => void;
     /** Callback when a tab should be deleted. When provided, shows delete action on items. */
-    onDelete?: (key: Key) => void;
+    onDelete?: (key: string) => void;
     /** Size of the picker trigger button */
     size?: TabSize;
     /** Type of the parent Tabs component (for border styling) */

package/types/components/navigation/Tabs/TabsContext.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import type { Key } from '@react-types/shared';
 import type { DraggableCollectionState, DroppableCollectionState, TabListState } from 'react-stately';
 import type { CubeItemActionProps } from '../../actions/ItemAction';
 import type { CubeMenuProps } from '../../actions/Menu';
@@ -11,8 +10,8 @@ export interface TabsContextValue {
     type: TabType;
     /** Parent-level size default */
     size?: TabSize;
-    /** Parent-level showActionsOnHover default */
-    showActionsOnHover?: boolean;
+    /** Parent-level autoHideActions default */
+    autoHideActions?: boolean;
     /** Parent-level isEditable default */
     isEditable?: boolean;
     /** Parent-level menu default */
@@ -24,23 +23,23 @@ export interface TabsContextValue {
     /** Parent-level contextMenu default */
     contextMenu?: boolean;
     /** Callback when tab is deleted */
-    onDelete?: (key: Key) => void;
+    onDelete?: (key: string) => void;
     /** Parent-level onAction callback */
-    onAction?: (action: Key, tabKey: Key) => void;
+    onAction?: (action: string, tabKey: string) => void;
     /** Drag state for reorderable tabs (undefined if not reorderable) */
     dragState?: DraggableCollectionState;
     /** Drop state for reorderable tabs (undefined if not reorderable) */
     dropState?: DroppableCollectionState;
     /** Current tab being edited (null if none) */
-    editingKey: Key | null;
+    editingKey: string | null;
     /** Current edit value */
     editValue: string;
     /** Set the edit value */
     setEditValue: (value: string) => void;
     /** Start editing a tab */
-    startEditing: (key: Key, currentTitle: string) => void;
+    startEditing: (key: string, currentTitle: string) => void;
     /** Submit the current edit */
-    submitEditing: (key: Key, newTitle: string, tabOnTitleChange?: (title: string) => void) => void;
+    submitEditing: (key: string, newTitle: string, tabOnTitleChange?: (title: string) => void) => void;
     /** Cancel the current edit */
     cancelEditing: () => void;
 }

package/types/components/navigation/Tabs/styled.d.ts

@@ -934,8 +934,10 @@ export declare const TabElement: import("react").ComponentType<{
     rightIcon?: import("../../..").DynamicIcon<import("../../content/Item").ItemMods>;
     suffix?: import("react").ReactNode;
     descriptionPlacement?: "block" | "inline" | undefined;
+    insideWrapper?: boolean | undefined;
     actions?: import("react").ReactNode;
-    showActionsOnHover?: boolean | undefined;
+    autoHideActions?: boolean | undefined;
+    showActions?: boolean | undefined;
     preserveActionsSpace?: boolean | undefined;
     disableActionsFocus?: boolean | undefined;
     hotkeys?: string | undefined;