@cube-dev/ui-kit 0.107.0 → 0.108.0

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/styles/types.d.ts

@@ -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

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;