@cube-dev/ui-kit 0.102.0 → 0.103.0

package/es/components/navigation/Tabs/TabsContext.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+// =============================================================================
+// Context
+// =============================================================================
+const TabsContext = createContext(null);
+TabsContext.displayName = 'TabsContext';
+export function TabsProvider({ value, children }) {
+    return _jsx(TabsContext.Provider, { value: value, children: children });
+}
+// =============================================================================
+// Hook
+// =============================================================================
+export function useTabsContext() {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('useTabsContext must be used within a TabsProvider');
+    }
+    return context;
+}
+
+        

package/es/components/navigation/Tabs/index.js

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

package/es/components/navigation/Tabs/styled.js

@@ -0,0 +1,337 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * Released under the MIT license.
+ */
+
+import { tasty } from '../../../tasty/index.js';
+import { Item } from '../../content/Item/index.js';
+// =============================================================================
+// Main Tabs Container
+// =============================================================================
+export const TabsElement = tasty({
+    styles: {
+        display: 'flex',
+        flow: 'row',
+        placeItems: {
+            '': 'end stretch',
+            'type=radio | type=file | type=panel': 'stretch',
+        },
+        overflow: 'visible',
+        border: {
+            '': 0,
+            '(type=default | type=file | type=panel | type=narrow) & has-panels': 'bottom',
+        },
+        width: {
+            '': '100%',
+            'type=radio': 'max-content',
+        },
+        padding: {
+            '': 0,
+            'type=radio': '.5x',
+        },
+        radius: {
+            '': 0,
+            'type=radio': '1cr',
+        },
+        fill: {
+            '': '#clear',
+            'type=radio': '#dark.06',
+        },
+        flexShrink: 0,
+        flexGrow: 0,
+        $transition: '$tab-transition',
+        '$tab-indicator-size': {
+            '': '2bw',
+            'size=large': '1ow',
+        },
+        Prefix: {
+            display: 'flex',
+            placeItems: 'center',
+            placeContent: 'center',
+            flexShrink: 0,
+            placeSelf: 'center',
+        },
+        Suffix: {
+            display: 'flex',
+            placeItems: 'center',
+            placeContent: 'center',
+            flexShrink: 0,
+            placeSelf: 'center',
+        },
+        // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)
+        ScrollWrapper: {
+            position: 'relative',
+            display: 'flex',
+            flexGrow: 1,
+            flexShrink: 1,
+            width: 'min 0',
+            overflow: {
+                '': 'hidden',
+                'type=radio': 'visible',
+            },
+        },
+        Scroll: {
+            position: 'relative',
+            display: 'block',
+            overflow: {
+                '': 'auto hidden',
+                'type=radio': 'visible',
+            },
+            scrollbar: 'none',
+            flexGrow: 1,
+            width: '100%',
+            // Add padding/margin for radio type to allow shadow to render outside
+            padding: {
+                '': 0,
+                'type=radio': '.5x',
+            },
+            margin: {
+                '': 0,
+                'type=radio': '-.5x',
+            },
+            // Use multi-group fade with color tokens for smooth transitions
+            fade: '2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black',
+            // ##name outputs --name-color (literal CSS property name)
+            transition: '##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in',
+            // Transition transparent color: opaque (no fade) -> transparent (fade visible)
+            '#tabs-fade-left': {
+                '': 'rgb(0 0 0 / 1)',
+                'fade-left': 'rgb(0 0 0 / 0)',
+            },
+            '#tabs-fade-right': {
+                '': 'rgb(0 0 0 / 1)',
+                'fade-right': 'rgb(0 0 0 / 0)',
+            },
+        },
+        Container: {
+            position: 'relative',
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gridAutoColumns: {
+                '': 'auto',
+                'type=radio': '1fr',
+            },
+            gap: {
+                '': 0,
+                'type=narrow': '2x',
+                'type=radio': '.5x',
+            },
+            placeContent: 'start',
+            overflow: 'visible',
+            width: {
+                '': 'max-content',
+                'type=radio': '100%',
+            },
+        },
+        // Custom horizontal scrollbar (tiny) - positioned relative to ScrollWrapper
+        ScrollbarH: {
+            position: 'absolute',
+            bottom: '1px',
+            left: '$scrollbar-h-left',
+            height: '1ow',
+            width: '$scrollbar-h-width',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                'focused | scrolling': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+    },
+});
+// =============================================================================
+// Tab Button (extends Item)
+// =============================================================================
+export const TabElement = tasty(Item, {
+    as: 'button',
+    styles: {
+        radius: {
+            '': false,
+            'type=radio': true,
+            'type=default | type=narrow': 'top',
+        },
+        color: {
+            '': '#dark-02',
+            '(type=default | type=narrow) & (hovered & !selected)': '#purple-text',
+            '(type=default | type=narrow) & selected': '#purple-text',
+            disabled: '#dark-04',
+        },
+        fill: {
+            '': '#clear',
+            'type=file | type=panel': '#light',
+            '(type=file | type=panel) & hovered': '#light.5',
+            'type=radio & hovered': '#white.5',
+            '(type=file | type=panel | type=radio) & selected': '#white',
+        },
+        border: {
+            '': '0 #clear',
+            'type=panel & selected': '$tab-indicator-size #purple bottom',
+        },
+        preset: {
+            '': 't3m',
+            'size=xsmall': 't4',
+        },
+        shadow: {
+            '': 'none',
+            'focused & focus-visible': 'inset 0 0 0 1bw #purple-text',
+            editing: 'inset 0 0 0 1bw #purple-text',
+            'type=radio & selected': '$item-shadow',
+            'type=radio & selected & focused & focus-visible': '$item-shadow, inset 0 0 0 1bw #purple-text',
+        },
+        // Collapse horizontal padding for narrow type
+        '$label-padding-left': {
+            '': '$inline-padding',
+            'has-start-content': 0,
+            'type=narrow': 0,
+        },
+        '$label-padding-right': {
+            '': '$inline-padding',
+            'has-end-content': 0,
+            'type=narrow': 0,
+        },
+        Label: {
+            placeSelf: {
+                '': 'center start',
+                'type=radio': 'center start',
+                'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',
+            },
+        },
+        Actions: {
+            transition: false,
+        },
+    },
+});
+// =============================================================================
+// Tab Container (wrapper for tab + actions)
+// =============================================================================
+export const TabContainer = tasty({
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        border: {
+            '': 0,
+            'type=file | type=panel': 'right',
+        },
+        cursor: {
+            '': 'default',
+            draggable: 'grab',
+            dragging: 'grabbing',
+        },
+        // Size variable for actions (same as ItemButton's ActionsWrapper)
+        $size: {
+            '': '$size-md',
+            'size=xsmall': '$size-xs',
+            'size=small': '$size-sm',
+            'size=medium': '$size-md',
+            'size=large': '$size-lg',
+            'size=xlarge': '$size-xl',
+        },
+        // Actions rendered outside the button for accessibility
+        Actions: {
+            $: '>',
+            position: 'absolute',
+            inset: '1bw 1bw auto auto',
+            display: 'flex',
+            gap: '1bw',
+            placeItems: 'center',
+            placeContent: 'center end',
+            pointerEvents: 'auto',
+            height: 'min ($size - 2bw)',
+            padding: '0 $side-padding',
+            // Simple CSS opacity for show-on-hover
+            opacity: {
+                '': 1,
+                'show-actions-on-hover': 0,
+                'show-actions-on-hover & (active | :hover | :focus-within | :has([data-pressed]))': 1,
+            },
+            transition: 'opacity $transition',
+            // Size variables (same as Item)
+            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (4x - 2bw))',
+            '$side-padding': '(($size - $action-size - 2bw) / 2)',
+        },
+    },
+});
+// =============================================================================
+// Drop Indicator for Drag-and-Drop
+// =============================================================================
+export const DropIndicatorElement = tasty({
+    styles: {
+        zIndex: 10,
+        position: 'absolute',
+        pointerEvents: 'none',
+        opacity: {
+            '': 0,
+            'drop-target': 1,
+        },
+        fill: '#purple',
+        width: '.5x',
+        top: 0,
+        bottom: 0,
+        left: {
+            '': 'auto',
+            before: '-2px',
+        },
+        right: {
+            '': 'auto',
+            after: '-2px',
+        },
+    },
+});
+// =============================================================================
+// Tab Selection Indicator (for default type)
+// =============================================================================
+export const TabIndicatorElement = tasty({
+    styles: {
+        position: 'absolute',
+        bottom: '0',
+        left: 0,
+        height: '$tab-indicator-size',
+        fill: '#purple',
+        transition: 'left, width',
+        transitionDuration: '.2s',
+        transitionTimingFunction: 'ease-out',
+        pointerEvents: 'none',
+    },
+});
+// =============================================================================
+// Tab Panel
+// =============================================================================
+export const TabPanelElement = tasty({
+    as: 'section',
+    styles: {
+        display: 'contents',
+    },
+});
+// =============================================================================
+// Editable Title Input
+// =============================================================================
+export const EditableTitleInputElement = tasty({
+    as: 'input',
+    styles: {
+        border: 0,
+        padding: 0,
+        margin: 0,
+        fill: 'transparent',
+        outline: 0,
+        preset: 'inherit',
+        color: 'inherit',
+        width: 'initial $input-width 100%',
+    },
+});
+export const HiddenMeasure = tasty({
+    styles: {
+        position: 'absolute',
+        visibility: 'hidden',
+        whiteSpace: 'pre',
+        font: 'inherit',
+        pointerEvents: 'none',
+        height: 0,
+        overflow: 'hidden',
+    },
+});
+
+        

package/es/components/navigation/Tabs/types.js

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Size mapping for radio type tabs.
+ * Radio type uses smaller sizes similar to RadioGroup tabs mode.
+ */
+export const RADIO_SIZE_MAP = {
+    medium: 'xsmall',
+    large: 'medium',
+};
+
+        

package/es/components/navigation/Tabs/use-tab-editing.js

@@ -0,0 +1,61 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * Released under the MIT license.
+ */
+
+import { useCallback, useState } from 'react';
+import { chainRaf } from '../../../utils/raf.js';
+// =============================================================================
+// Hook
+// =============================================================================
+/**
+ * Hook to manage tab title editing state.
+ *
+ * Provides state and callbacks for inline title editing with support for:
+ * - Starting edit mode (selecting the tab and focusing input)
+ * - Submitting changes (with tab-level or parent-level callback)
+ * - Canceling edits
+ */
+export function useTabEditing({ onChange, onTitleChange, } = {}) {
+    const [editingKey, setEditingKey] = useState(null);
+    const [editValue, setEditValue] = useState('');
+    const startEditing = useCallback((key, currentTitle) => {
+        // Also select the tab being edited
+        onChange?.(key);
+        // Use chainRaf to ensure DOM is ready before entering edit mode
+        chainRaf(() => {
+            setEditingKey(key);
+            setEditValue(currentTitle);
+        }, 2);
+    }, [onChange]);
+    const cancelEditing = useCallback(() => {
+        setEditingKey(null);
+        setEditValue('');
+    }, []);
+    const submitEditing = useCallback((key, newTitle, tabOnTitleChange) => {
+        const trimmed = newTitle.trim();
+        if (trimmed) {
+            // Tab-level callback takes precedence
+            if (tabOnTitleChange) {
+                tabOnTitleChange(trimmed);
+            }
+            else if (onTitleChange) {
+                onTitleChange(key, trimmed);
+            }
+        }
+        setEditingKey(null);
+        setEditValue('');
+    }, [onTitleChange]);
+    return {
+        editingKey,
+        editValue,
+        setEditValue,
+        startEditing,
+        cancelEditing,
+        submitEditing,
+    };
+}
+
+        

package/es/components/navigation/Tabs/use-tab-indicator.js

@@ -0,0 +1,77 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * Released under the MIT license.
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { chainRaf } from '../../../utils/raf.js';
+// =============================================================================
+// Hook
+// =============================================================================
+/**
+ * Hook to track and animate tab indicator position.
+ *
+ * Calculates the position and width of the selection indicator
+ * based on the currently selected tab. Returns null if disabled
+ * (e.g., for non-default tab types).
+ *
+ * @param containerRef - Ref to the tab container element
+ * @param selectedKey - Currently selected tab key
+ * @param enabled - Whether the indicator should be shown
+ * @param orderToken - Optional token that changes when tab order changes (triggers recalculation)
+ * @returns Indicator style (left, width) or null if disabled/not ready
+ */
+export function useTabIndicator(containerRef, selectedKey, enabled, orderToken) {
+    const [style, setStyle] = useState(null);
+    const cancelRef = useRef(null);
+    const updateIndicator = useCallback(() => {
+        if (!enabled || !containerRef.current || selectedKey == null) {
+            setStyle(null);
+            return;
+        }
+        // Find the selected tab button within the container
+        const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
+        if (!selectedTab) {
+            setStyle(null);
+            return;
+        }
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const tabRect = selectedTab.getBoundingClientRect();
+        // Only update if dimensions are valid (element has been painted)
+        if (tabRect.width > 0) {
+            setStyle({
+                left: tabRect.left - containerRect.left + containerRef.current.scrollLeft,
+                width: tabRect.width,
+            });
+        }
+    }, [containerRef, selectedKey, enabled, orderToken]);
+    // Update on selectedKey change - use chainRaf to ensure DOM is fully painted
+    useLayoutEffect(() => {
+        // Cancel any pending RAF chain
+        if (cancelRef.current) {
+            cancelRef.current();
+        }
+        // Schedule update after 2 frames to ensure layout is complete
+        cancelRef.current = chainRaf(() => {
+            updateIndicator();
+        }, 2);
+        return () => {
+            if (cancelRef.current) {
+                cancelRef.current();
+            }
+        };
+    }, [updateIndicator]);
+    // Update on window resize
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handleResize = () => updateIndicator();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [enabled, updateIndicator]);
+    return enabled ? style : null;
+}
+
+        

package/es/components/navigation/index.js

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

package/es/components/organisms/FileTabs/FileTabs.js

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

package/es/components/organisms/StatsCard/StatsCard.js

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

package/es/components/other/Calendar/Calendar.js

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

package/es/components/other/Calendar/CalendarCell.js

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

package/es/components/other/Calendar/CalendarGrid.js

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

package/es/components/other/Calendar/RangeCalendar.js

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

package/es/components/other/CloudLogo/CloudLogo.js

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

package/es/components/overlays/AlertDialog/AlertDialog.js

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

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

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

package/es/components/overlays/AlertDialog/AlertDialogZone.js

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

package/es/components/overlays/AlertDialog/index.js

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

package/es/components/overlays/AlertDialog/types.js

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

package/es/components/overlays/Dialog/Dialog.js

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

package/es/components/overlays/Dialog/DialogContainer.js

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