@cube-dev/ui-kit 0.107.0 → 0.108.1

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.1
  * 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.1
  * 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.1
+ * 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.1
  * 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.1
  * 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.1
  * 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.1
  * 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.1
  * 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.1
  * Released under the MIT license.
  */
 
-export const VERSION = '0.107.0';
+export const VERSION = '0.108.1';
 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.1",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -79,7 +79,8 @@
     "./tasty/zero/babel": {
       "import": "./es/tasty/zero/babel.js",
       "types": "./types/tasty/zero/babel.d.ts"
-    }
+    },
+    "./tasty.config": "./tasty.config.ts"
   },
   "private": false
 }

package/tasty.config.ts

@@ -0,0 +1,311 @@
+/**
+ * Tasty Extension Configuration
+ *
+ * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
+ * It provides token names, units, presets, and state aliases for validation and autocomplete.
+ *
+ * Projects using @cube-dev/ui-kit can extend this config:
+ * ```typescript
+ * export default {
+ *   extends: '@cube-dev/ui-kit',
+ *   // Add project-specific tokens, presets, etc.
+ * };
+ * ```
+ *
+ * @see https://github.com/tenphi/tasty-vscode-extension for extension documentation
+ */
+
+export default {
+  /**
+   * Valid token names for validation and autocomplete.
+   * Color tokens use # prefix, custom properties use $ prefix.
+   */
+  tokens: [
+    // ============================================================================
+    // Color Tokens (from src/tokens/colors.ts)
+    // ============================================================================
+
+    // Pink
+    '#pink',
+
+    // Purple (primary)
+    '#purple',
+    '#purple-text',
+    '#purple-bg',
+    '#purple-icon',
+    '#purple-disabled',
+    '#purple-01',
+    '#purple-02',
+    '#purple-03',
+    '#purple-04',
+
+    // Focus
+    '#focus',
+
+    // Text
+    '#text',
+
+    // Dark shades
+    '#dark',
+    '#dark-01',
+    '#dark-02',
+    '#dark-03',
+    '#dark-04',
+    '#dark-05',
+    '#dark-bg',
+
+    // Light
+    '#light',
+
+    // Black & White
+    '#white',
+    '#black',
+
+    // Danger (red)
+    '#danger',
+    '#danger-text',
+    '#danger-bg',
+    '#danger-icon',
+    '#danger-disabled',
+
+    // Success (green)
+    '#success',
+    '#success-text',
+    '#success-bg',
+    '#success-icon',
+    '#success-disabled',
+
+    // Warning (yellow/amber)
+    '#warning',
+    '#warning-text',
+    '#warning-bg',
+    '#warning-icon',
+    '#warning-disabled',
+
+    // Note (violet)
+    '#note',
+    '#note-text',
+    '#note-bg',
+    '#note-icon',
+    '#note-disabled',
+
+    // Border
+    '#border',
+
+    // Placeholder
+    '#placeholder',
+
+    // Semantic colors
+    '#clear',
+    '#shadow',
+    '#minor',
+    '#primary',
+
+    // Disabled state colors
+    '#disabled',
+    '#disabled-text',
+    '#disabled-bg',
+
+    // Scrollbar colors (from base.ts)
+    '#scrollbar-thumb',
+    '#scrollbar-outline',
+    '#scrollbar-bg',
+    '#scrollbar-corner',
+
+    // Tabs tokens
+    '#tabs-fade-left',
+    '#tabs-fade-right',
+    '$tab-indicator-size',
+
+    // ============================================================================
+    // Custom Property Tokens (from src/tokens/base.ts)
+    // ============================================================================
+
+    // Typography base
+    '$font-size',
+    '$line-height',
+
+    // Input typography
+    '$input-font-size',
+    '$input-line-height',
+    '$input-letter-spacing',
+
+    // Opacity & dimensions
+    '$disabled-opacity',
+    '$gap',
+    '$stroke-width',
+    '$outline-width',
+    '$border-width',
+
+    // Border radius
+    '$radius',
+    '$large-radius',
+    '$card-radius',
+    '$leaf-sharp-radius',
+
+    // Misc dimensions
+    '$fade-width',
+    '$min-dialog-size',
+
+    // Transitions
+    '$transition',
+    '$disclosure-transition',
+    '$tab-transition',
+    '$fade-transition',
+
+    // Scrollbar tokens
+    '$scrollbar-width',
+    '$scrollbar-outline-width',
+    '$scrollbar-radius',
+
+    // ============================================================================
+    // Spacing Tokens (from src/tokens/spacing.ts)
+    // ============================================================================
+    '$space-xs',
+    '$space-sm',
+    '$space-md',
+    '$space-lg',
+    '$space-xl',
+
+    // ============================================================================
+    // Size Tokens (from src/tokens/sizes.ts)
+    // ============================================================================
+    '$size-xs',
+    '$size-sm',
+    '$size-md',
+    '$size-lg',
+    '$size-xl',
+
+    // ============================================================================
+    // Shadow Tokens (from src/tokens/shadows.ts)
+    // ============================================================================
+    '$item-shadow',
+    '$card-shadow',
+    '$dialog-shadow',
+
+    // ============================================================================
+    // Layout Tokens (from src/tokens/layout.ts)
+    // ============================================================================
+    '$max-content-width',
+    '$topbar-height',
+    '$devmodebar-height',
+    '$sidebar-width',
+    '$border-radius-base',
+
+    // Scrollbar tokens
+    '$scrollbar-h-left',
+    '$scrollbar-h-width',
+  ],
+
+  // Note: Built-in units (x, r, cr, bw, ow, fs, lh, sf) are always available.
+  // No need to list them here - they're automatically included by the extension.
+
+  /**
+   * State alias names for autocomplete.
+   * These are predefined responsive and theme states.
+   */
+  states: ['@mobile', '@compact'],
+
+  /**
+   * Valid preset names for the `preset` style property.
+   * These are defined in src/tokens/typography.ts.
+   *
+   * Note: Preset modifiers (strong, italic, icon, tight) are built-in
+   * and can be combined with any preset (e.g., 't1 strong', 'h2 italic').
+   */
+  presets: [
+    // Base text
+    'default',
+
+    // Headings (h1-h6)
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+
+    // Text styles (t1-t4, with medium weight variants)
+    't1',
+    't2',
+    't2m',
+    't3',
+    't3m',
+    't4',
+    't4m',
+
+    // Markdown/prose styles (m1-m3)
+    'm1',
+    'm2',
+    'm3',
+
+    // Paragraph styles (p1-p4)
+    'p1',
+    'p2',
+    'p3',
+    'p4',
+
+    // Caption/uppercase styles (c1-c2)
+    'c1',
+    'c2',
+
+    // Tag typography
+    'tag',
+
+    // Inline semantic styles
+    'strong',
+    'em',
+  ],
+
+  /**
+   * Descriptions for presets, shown on hover.
+   * Based on typography.ts definitions.
+   */
+  presetDescriptions: {
+    // Headings
+    h1: 'Heading 1 (36px/44px, semibold)',
+    h2: 'Heading 2 (24px/32px, semibold)',
+    h3: 'Heading 3 (20px/28px, semibold)',
+    h4: 'Heading 4 (18px/24px, semibold)',
+    h5: 'Heading 5 (16px/22px, semibold)',
+    h6: 'Heading 6 (14px/20px, semibold)',
+
+    // Text styles
+    t1: 'Text large (18px/24px)',
+    t2: 'Text regular (16px/22px)',
+    t2m: 'Text regular medium (16px/22px, medium weight)',
+    t3: 'Text default (14px/20px)',
+    t3m: 'Text default medium (14px/20px, medium weight)',
+    t4: 'Text small (12px/18px, medium weight)',
+    t4m: 'Text small semibold (12px/18px, semibold)',
+
+    // Markdown/prose styles
+    m1: 'Markdown large (18px/32px, relaxed line-height)',
+    m2: 'Markdown regular (16px/28px, relaxed line-height)',
+    m3: 'Markdown default (14px/24px, relaxed line-height)',
+
+    // Paragraph styles
+    p1: 'Paragraph large (18px/28px)',
+    p2: 'Paragraph regular (16px/24px)',
+    p3: 'Paragraph default (14px/22px)',
+    p4: 'Paragraph small (12px/20px, medium weight)',
+
+    // Caption/uppercase
+    c1: 'Caption (14px/20px, semibold, uppercase)',
+    c2: 'Caption small (12px/18px, semibold, uppercase)',
+
+    // Other
+    tag: 'Tag/badge typography (12px/18px, semibold)',
+    default: 'Base text style (inherits t3)',
+    strong: 'Bold/semibold text (inherits font size)',
+    em: 'Italic text (inherits font size)',
+  },
+
+  /**
+   * Descriptions for state aliases, shown on hover.
+   */
+  stateDescriptions: {
+    '@mobile': 'Mobile viewport (width < 768px)',
+    '@compact': 'Compact layout (width < 600px)',
+  },
+};

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;
 }