@cube-dev/ui-kit 0.107.0 → 0.108.1

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;

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

@@ -1,4 +1,3 @@
-import type { Key } from '@react-types/shared';
 import type { ReactNode } from 'react';
 import type { BaseProps, OuterStyleProps, Styles } from '../../../tasty';
 import type { CubeItemActionProps } from '../../actions/ItemAction';
@@ -33,7 +32,7 @@ export interface QAProps {
     qaVal?: string;
 }
 /** Props from CubeItemProps that don't apply to Tab */
-type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'showActionsOnHover';
+type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'autoHideActions';
 /** Common styling props for tabs - inherits style props from CubeItemProps */
 export interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
     /**
@@ -44,15 +43,15 @@ export interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
     /** Visual appearance type. */
     type?: TabType;
     /** Whether to show actions only on hover. */
-    showActionsOnHover?: boolean;
+    autoHideActions?: boolean;
 }
 /** Cache key type - primitives only for reliable comparison */
 export type CacheKeyValue = string | number | boolean | null | undefined;
 export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
     /** Controlled active tab key. When provided, component is controlled. */
-    activeKey?: Key;
+    activeKey?: string;
     /** Initial active tab key for uncontrolled mode. */
-    defaultActiveKey?: Key;
+    defaultActiveKey?: string;
     /**
      * Visual appearance type for tabs.
      * - `default` - Standard tabs with selection indicator below (default)
@@ -75,13 +74,13 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
     /** Content rendered after the tab list. */
     suffix?: ReactNode;
     /** Callback when active tab changes. */
-    onChange?: (key: Key) => void;
+    onChange?: (key: string) => void;
     /** Callback when tab delete button is clicked. Presence enables delete buttons. */
-    onDelete?: (key: Key) => void;
+    onDelete?: (key: string) => void;
     /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */
-    onTitleChange?: (key: Key, newTitle: string) => void;
+    onTitleChange?: (key: string, newTitle: string) => void;
     /** Whether to show tab actions only on hover. Can be overridden per-tab. */
-    showActionsOnHover?: boolean;
+    autoHideActions?: boolean;
     /**
      * Whether tabs are editable by default.
      * Can be overridden per-tab via Tab's isEditable prop.
@@ -116,7 +115,7 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
      * Called with the action key and the tab key.
      * Tab-level onAction is called first, then this.
      */
-    onAction?: (action: Key, tabKey: Key) => void;
+    onAction?: (action: string, tabKey: string) => void;
     /** Custom tasty styles for the tab bar container. */
     styles?: Styles;
     /** QA selector attribute. */
@@ -128,7 +127,7 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
      * When provided, panel content is only evaluated for the active tab,
      * while inactive tabs use cached content.
      */
-    renderPanel?: (key: Key) => ReactNode;
+    renderPanel?: (key: string) => ReactNode;
     /**
      * Cache keys for individual panels. Enables caching for specified panels.
      */
@@ -142,11 +141,11 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
      * Controlled order of tab keys.
      * When provided, tabs are displayed in this order.
      */
-    keyOrder?: Key[];
+    keyOrder?: string[];
     /**
      * Callback when tabs are reordered via drag-and-drop.
      */
-    onReorder?: (newOrder: Key[]) => void;
+    onReorder?: (newOrder: string[]) => void;
     /**
      * Whether to show a tab picker dropdown in the suffix area.
      * - `true` - always show the tab picker
@@ -177,6 +176,17 @@ export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehavior
      * @default 'suffix'
      */
     scrollArrowsPosition?: TabsActionPosition;
+    /**
+     * Inline padding for the tab list container.
+     * Sets horizontal padding only (e.g., "2x" → padding: "0 2x").
+     */
+    tabListPadding?: string;
+    /** Custom tasty styles for the TabList sub-element. */
+    tabListStyles?: Styles;
+    /** Custom tasty styles for the Prefix sub-element. */
+    prefixStyles?: Styles;
+    /** Custom tasty styles for the Suffix sub-element. */
+    suffixStyles?: Styles;
 }
 export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
     /**
@@ -222,7 +232,7 @@ export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
      * Callback when a menu action is triggered.
      * Called with the action key from Menu.Item.
      */
-    onAction?: (action: Key) => void;
+    onAction?: (action: string) => void;
 }
 export interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {
     /**

package/types/components/navigation/Tabs/use-tab-editing.d.ts

@@ -1,21 +1,20 @@
-import type { Key } from '@react-types/shared';
 export interface UseTabEditingOptions {
     /** Callback when tab selection changes (used to select tab when editing starts) */
-    onChange?: (key: Key) => void;
+    onChange?: (key: string) => void;
     /** Callback when a tab title is changed */
-    onTitleChange?: (key: Key, newTitle: string) => void;
+    onTitleChange?: (key: string, newTitle: string) => void;
 }
 export interface UseTabEditingResult {
     /** Currently editing tab key (null if not editing) */
-    editingKey: Key | null;
+    editingKey: string | null;
     /** Current edit input value */
     editValue: string;
     /** Set the edit value */
     setEditValue: (value: string) => void;
     /** Start editing a tab with the given title */
-    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/tasty/config.d.ts

@@ -155,6 +155,9 @@ export interface TastyConfig {
      * Predefined tokens that are replaced during style parsing.
      * Token values are processed through the parser (like component tokens).
      * Use `$name` for custom properties and `#name` for color tokens.
+     *
+     * For color tokens (#name), boolean `true` is converted to `transparent`.
+     *
      * @example
      * ```ts
      * configure({
@@ -163,6 +166,7 @@ export interface TastyConfig {
      *     '$card-padding': '4x',
      *     '#accent': '#purple',
      *     '#surface': '#white',
+     *     '#overlay': true, // → transparent
      *   },
      * });
      *
@@ -176,7 +180,9 @@ export interface TastyConfig {
      * ```
      */
     tokens?: {
-        [key: `$${string}` | `#${string}`]: string | number;
+        [key: `$${string}`]: string | number | boolean;
+    } & {
+        [key: `#${string}`]: string | number | boolean;
     };
 }
 /**

package/types/tasty/index.d.ts

@@ -26,5 +26,5 @@ export * from './utils/typography';
 export * from './injector';
 export * from './debug';
 export type { TastyProps, TastyElementOptions, TastyElementProps, AllBasePropsWithMods, SubElementDefinition, ElementsDefinition, SubElementProps, } from './tasty';
-export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, ModValue, Tokens, TokenValue, } from './types';
+export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, ModValue, Tokens, TokenValue, TastyExtensionConfig, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/tasty/styles/types.d.ts

@@ -397,7 +397,7 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      *
      * Examples:
      * - `'@keyframes': { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }`
-     * - `'@keyframes': { pulse: { '0%, 100%': 'transform: scale(1)', '50%': 'transform: scale(1.05)' } }`
+     * - `'@keyframes': { pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } } }`
      */
     '@keyframes'?: Record<string, KeyframesSteps>;
     /**
@@ -429,7 +429,7 @@ export interface SpecialStyleProperties {
 }
 /** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
 export interface StylesIndexSignature {
-    [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | StylesInterface['@keyframes'] | StylesInterface['@properties'];
+    [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'];
     /**
      * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
      * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.

package/types/tasty/types.d.ts

@@ -19,8 +19,13 @@ export type ModValue = boolean | string | number | undefined | null;
 export type Mods<T extends Record<string, ModValue> = {}> = T & {
     [key: string]: ModValue;
 };
-/** Token value: string or number (processed), undefined/null (skipped) */
-export type TokenValue = string | number | undefined | null;
+/**
+ * Token value: string or number (processed), boolean for special handling, undefined/null (skipped).
+ * For color tokens (#name), boolean `true` is converted to `transparent`.
+ * For non-color tokens ($name), boolean `true` results in an empty string value.
+ * Boolean `false` results in no CSS output (token is skipped).
+ */
+export type TokenValue = string | number | boolean | undefined | null;
 /**
  * Tokens definition for inline CSS custom properties.
  * - `$name` keys become `--name` CSS properties
@@ -90,4 +95,79 @@ export interface Props {
     [key: string]: any;
 }
 export type TagName = keyof HTMLElementTagNameMap;
+/**
+ * Configuration type for tasty.config.ts files.
+ * Used by the Tasty VSCode extension for validation and autocomplete.
+ *
+ * @example
+ * ```typescript
+ * import type { TastyExtensionConfig } from '@cube-dev/ui-kit';
+ *
+ * const config: TastyExtensionConfig = {
+ *   tokens: ['#primary', '#danger', '$spacing'],
+ *   units: ['x', 'r', 'bw'],
+ *   states: ['@mobile', '@tablet', '@dark'],
+ *   presets: ['h1', 'h2', 't1', 't2'],
+ * };
+ *
+ * export default config;
+ * ```
+ */
+export interface TastyExtensionConfig {
+    /**
+     * Extend another config file. Path is relative to this config file.
+     * The extended config is merged first, then this config's values are added.
+     * @example '../tasty.config.ts'
+     */
+    extends?: string;
+    /**
+     * Valid token names for validation and autocomplete.
+     * Use # prefix for colors, $ prefix for custom properties.
+     * Set to `false` to disable token validation (overrides parent).
+     * @example ['#primary', '#danger', '$spacing', '$gap']
+     */
+    tokens?: false | string[];
+    /**
+     * Valid custom unit names.
+     * Set to `false` to disable unit validation (overrides parent).
+     * @example ['x', 'r', 'bw', 'cols']
+     */
+    units?: false | string[];
+    /**
+     * Valid custom function names.
+     * Set to `false` to disable function validation (overrides parent).
+     * @example ['clamp', 'double']
+     */
+    funcs?: false | string[];
+    /**
+     * State alias names for autocomplete.
+     * Must start with @ prefix.
+     * @example ['@mobile', '@tablet', '@dark']
+     */
+    states?: string[];
+    /**
+     * Valid preset names for the `preset` style property.
+     * Tasty has no built-in presets - they are project-specific.
+     * @example ['h1', 'h2', 'h3', 't1', 't2', 't3', 'tag']
+     */
+    presets?: string[];
+    /**
+     * Custom style property names added via configure({ handlers }).
+     * Suppresses "unknown property" warnings for these names.
+     * @example ['myGradient', 'customLayout', 'brandBorder']
+     */
+    styles?: string[];
+    /**
+     * Descriptions for presets, shown on hover in the extension.
+     * Maps preset names to human-readable descriptions.
+     * @example { h1: 'Heading 1 (36px/44px, semibold)', t1: 'Text large (18px/24px)' }
+     */
+    presetDescriptions?: Record<string, string>;
+    /**
+     * Descriptions for state aliases, shown on hover in the extension.
+     * Maps state names to human-readable descriptions.
+     * @example { '@mobile': 'Mobile viewport (width < 768px)' }
+     */
+    stateDescriptions?: Record<string, string>;
+}
 export {};

package/types/tasty/utils/styles.d.ts

@@ -3,6 +3,16 @@ import { Styles } from '../styles/types';
 import type { ProcessedStyle, StyleDetails } from '../parser/types';
 import type { AtRuleContext, ParsedAdvancedState } from '../states';
 export type StyleValue<T = string> = T | boolean | number | null | undefined;
+/**
+ * Normalize a color token value.
+ * - Boolean `true` is converted to `'transparent'`
+ * - Boolean `false` returns `null` (signals the token should be skipped)
+ * - Other values are returned as-is
+ *
+ * @param value - The raw token value
+ * @returns Normalized value or null if the token should be skipped
+ */
+export declare function normalizeColorTokenValue<T>(value: T | boolean): T | 'transparent' | null;
 export type StyleValueStateMap<T = string> = {
     [key: string]: StyleValue<T>;
 };

package/types/utils/react/index.d.ts

@@ -18,3 +18,4 @@ export type { RenderCacheProps } from './RenderCache';
 export { useLocalStorage } from './useLocalStorage';
 export { resolveIcon } from './resolveIcon';
 export type { DynamicIcon, IconRenderFn, ResolvedIcon } from './resolveIcon';
+export { useMergeStyles } from './useMergeStyles';

package/types/utils/react/useMergeStyles.d.ts

@@ -0,0 +1,25 @@
+import { Styles } from '../../tasty';
+/**
+ * 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 declare function useMergeStyles(styles: Styles | undefined, subStylesMap: Record<string, Styles | undefined>): Styles;