@cube-dev/ui-kit 0.0.0-canary-0127833 → 0.0.0-canary-fa86c75

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/HotKeys/HotKeys.js

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

package/es/components/content/HotKeys/index.js

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

package/es/components/content/Item/Item.js

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

package/es/components/content/Item/index.js

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

package/es/components/content/ItemBadge/ItemBadge.js

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

package/es/components/content/ItemBadge/index.js

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

package/es/components/content/Layout/GridLayout.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { tasty } from '../../../tasty';
+import { Layout } from './Layout';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+const GridLayoutElement = tasty(Layout, {
+    qa: 'GridLayout',
+    styles: {
+        Content: {
+            display: 'grid',
+        },
+    },
+});
+function GridLayoutBase(props, ref) {
+    const { columns, rows, template, ...otherProps } = props;
+    return (_jsx(GridLayoutElement, { ref: ref, isGrid: true, columns: columns, rows: rows, template: template, ...otherProps }));
+}
+const _GridLayout = forwardRef(GridLayoutBase);
+_GridLayout.displayName = 'GridLayout';
+const GridLayout = Object.assign(_GridLayout, {
+    Toolbar: LayoutToolbar,
+    Header: LayoutHeader,
+    Footer: LayoutFooter,
+    Content: LayoutContent,
+    Panel: LayoutPanel,
+    PanelHeader: LayoutPanelHeader,
+});
+export { GridLayout };
+
+        

package/es/components/content/Layout/Layout.js

@@ -0,0 +1,137 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, useEffect, useMemo, } from 'react';
+import { BLOCK_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, FLOW_STYLES, OUTER_STYLES, tasty, } from '../../../tasty';
+import { LayoutProvider, useLayoutContext } from './LayoutContext';
+const INNER_STYLE_KEYS = [
+    ...BLOCK_STYLES,
+    ...COLOR_STYLES,
+    ...FLOW_STYLES,
+];
+const LayoutElement = tasty({
+    as: 'div',
+    qa: 'Layout',
+    styles: {
+        position: 'relative',
+        display: 'block',
+        overflow: 'hidden',
+        flexGrow: 1,
+        placeSelf: 'stretch',
+        gridArea: 'layout',
+        Inner: {
+            // Direct child selector required for nested layouts
+            $: '>',
+            position: 'absolute',
+            inset: '$inset-top $inset-right $inset-bottom $inset-left',
+            display: 'flex',
+            flow: 'column',
+            overflow: 'hidden',
+            // Disable transition during panel resize for snappy feedback
+            // Also disable transition when not ready to prevent initial animation
+            transition: {
+                '': 'inset $transition ease-out',
+                'dragging | not-ready': 'none',
+            },
+        },
+    },
+});
+// Check if a child is a Layout.Panel
+function isPanelElement(child) {
+    return (isValidElement(child) &&
+        typeof child.type !== 'string' &&
+        child.type.displayName === 'Layout.Panel');
+}
+function LayoutInner(props) {
+    const layoutContext = useLayoutContext();
+    const { isGrid, columns, rows, template, styles, children, style, forwardedRef, ...otherProps } = props;
+    // Separate panels from other children
+    const { panels, content } = useMemo(() => {
+        const panelElements = [];
+        const contentElements = [];
+        Children.forEach(children, (child) => {
+            if (isPanelElement(child)) {
+                panelElements.push(child);
+            }
+            else {
+                contentElements.push(child);
+            }
+        });
+        return { panels: panelElements, content: contentElements };
+    }, [children]);
+    // Extract inner content styles using extractStyles
+    const contentStyles = extractStyles(otherProps, INNER_STYLE_KEYS);
+    // Extract outer wrapper styles
+    const wrapperStyles = extractStyles(otherProps, OUTER_STYLES);
+    // Handle grid mode
+    if (isGrid) {
+        contentStyles.display = 'grid';
+    }
+    if (columns) {
+        contentStyles.gridColumns = columns;
+    }
+    if (rows) {
+        contentStyles.gridRows = rows;
+    }
+    if (template) {
+        contentStyles.gridTemplate = template;
+    }
+    // Merge styles
+    const finalStyles = {
+        ...wrapperStyles,
+        ...styles,
+        Inner: { ...contentStyles, ...styles?.Inner },
+    };
+    // Calculate inset values from panel sizes
+    const panelSizes = layoutContext?.panelSizes ?? {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    };
+    const isDragging = layoutContext?.isDragging ?? false;
+    const isReady = layoutContext?.isReady ?? true;
+    const markReady = layoutContext?.markReady;
+    // Mark layout as ready after first paint
+    // Using useEffect + requestAnimationFrame ensures:
+    // 1. Panels register in useLayoutEffect → correct insets before first paint
+    // 2. First paint with not-ready=true (transition disabled)
+    // 3. After paint completes → enables transitions for subsequent changes
+    useEffect(() => {
+        const frameId = requestAnimationFrame(() => {
+            markReady?.();
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [markReady]);
+    const insetStyle = useMemo(() => {
+        const baseStyle = {
+            '--inset-top': `${panelSizes.top - 1}px`,
+            '--inset-right': `${panelSizes.right - 1}px`,
+            '--inset-bottom': `${panelSizes.bottom - 1}px`,
+            '--inset-left': `${panelSizes.left - 1}px`,
+        };
+        if (style) {
+            return { ...baseStyle, ...style };
+        }
+        return baseStyle;
+    }, [panelSizes, style]);
+    const mods = useMemo(() => ({ dragging: isDragging, 'not-ready': !isReady }), [isDragging, isReady]);
+    return (_jsxs(LayoutElement, { ref: forwardedRef, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, children: [panels, _jsx("div", { "data-element": "Inner", children: content })] }));
+}
+/**
+ * Layout component provides a vertical flex layout with overflow-safe content.
+ * Uses a two-element architecture (wrapper + content) to ensure content never overflows.
+ */
+function Layout(props, ref) {
+    return (_jsx(LayoutProvider, { children: _jsx(LayoutInner, { ...props, forwardedRef: ref }) }));
+}
+const _Layout = forwardRef(Layout);
+_Layout.displayName = 'Layout';
+export { _Layout as Layout };
+
+        

package/es/components/content/Layout/LayoutContent.js

@@ -0,0 +1,100 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
+import { useHover } from 'react-aria';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import { useCombinedRefs } from '../../../utils/react';
+import { useTinyScrollbar } from './hooks/useTinyScrollbar';
+import { LayoutContextReset } from './LayoutContext';
+const ContentElement = tasty({
+    as: 'div',
+    qa: 'LayoutContent',
+    styles: {
+        position: 'relative',
+        display: 'block',
+        flexGrow: 1,
+        minHeight: 0,
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        Inner: {
+            position: 'absolute',
+            inset: 0,
+            display: 'block',
+            overflow: 'auto',
+            scrollbar: {
+                '': 'thin',
+                'scrollbar=tiny | scrollbar=none': 'none',
+            },
+        },
+        // Custom scrollbar handles (when scrollbar="tiny")
+        ScrollbarV: {
+            position: 'absolute',
+            right: '1px',
+            top: '$scrollbar-v-top',
+            width: '1ow',
+            height: '$scrollbar-v-height',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+        ScrollbarH: {
+            position: 'absolute',
+            bottom: '1px',
+            left: '$scrollbar-h-left',
+            height: '1ow',
+            width: '$scrollbar-h-width',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+    },
+});
+function LayoutContent(props, ref) {
+    const { children, scrollbar = 'thin', ...otherProps } = props;
+    const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(ref);
+    const isTinyScrollbar = scrollbar === 'tiny';
+    const { hoverProps, isHovered } = useHover({});
+    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX } = useTinyScrollbar(innerRef, isTinyScrollbar);
+    const scrollbarStyle = useMemo(() => {
+        if (!isTinyScrollbar)
+            return {};
+        return {
+            ...handleVStyle,
+            ...handleHStyle,
+        };
+    }, [isTinyScrollbar, handleVStyle, handleHStyle]);
+    const mods = useMemo(() => ({
+        scrollbar,
+        hovered: isHovered,
+    }), [scrollbar, isHovered]);
+    // Apply container styles (like padding) to the Inner element
+    const finalStyles = useMemo(() => {
+        return {
+            Inner: extractedStyles,
+        };
+    }, [extractedStyles]);
+    return (_jsxs(ContentElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: mods, styles: finalStyles, style: scrollbarStyle, children: [_jsx("div", { ref: innerRef, "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }));
+}
+const _LayoutContent = forwardRef(LayoutContent);
+_LayoutContent.displayName = 'Layout.Content';
+export { _LayoutContent as LayoutContent };
+
+        

package/es/components/content/Layout/LayoutContext.js

@@ -0,0 +1,87 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+export const LayoutContext = createContext(null);
+export function useLayoutContext() {
+    return useContext(LayoutContext);
+}
+export function LayoutProvider({ children }) {
+    const registeredPanels = useRef(new Set());
+    const [panelSizes, setPanelSizes] = useState({
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const registerPanel = useCallback((side, size) => {
+        if (registeredPanels.current.has(side)) {
+            throw new Error(`Layout: Only one panel per side is allowed. ` +
+                `A panel is already registered on the "${side}" side.`);
+        }
+        registeredPanels.current.add(side);
+        setPanelSizes((prev) => {
+            if (prev[side] === size)
+                return prev;
+            return { ...prev, [side]: size };
+        });
+    }, []);
+    const unregisterPanel = useCallback((side) => {
+        registeredPanels.current.delete(side);
+        setPanelSizes((prev) => {
+            if (prev[side] === 0)
+                return prev;
+            return { ...prev, [side]: 0 };
+        });
+    }, []);
+    const updatePanelSize = useCallback((side, size) => {
+        setPanelSizes((prev) => {
+            // Only update if the size actually changed
+            if (prev[side] === size)
+                return prev;
+            return { ...prev, [side]: size };
+        });
+    }, []);
+    const setDragging = useCallback((dragging) => {
+        setIsDragging(dragging);
+    }, []);
+    const markReady = useCallback(() => {
+        setIsReady(true);
+    }, []);
+    const value = useMemo(() => ({
+        registerPanel,
+        unregisterPanel,
+        updatePanelSize,
+        setDragging,
+        markReady,
+        panelSizes,
+        isDragging,
+        isReady,
+    }), [
+        registerPanel,
+        unregisterPanel,
+        updatePanelSize,
+        setDragging,
+        markReady,
+        panelSizes,
+        isDragging,
+        isReady,
+    ]);
+    return (_jsx(LayoutContext.Provider, { value: value, children: children }));
+}
+/**
+ * Provider that resets the layout context for sub-components.
+ * Used to prevent panels in nested Layouts from affecting parent layouts.
+ */
+export function LayoutContextReset({ children }) {
+    return (_jsx(LayoutContext.Provider, { value: null, children: children }));
+}
+
+        

package/es/components/content/Layout/LayoutFooter.js

@@ -0,0 +1,45 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import { LayoutContextReset } from './LayoutContext';
+const FooterElement = tasty({
+    as: 'footer',
+    qa: 'LayoutFooter',
+    role: 'contentinfo',
+    styles: {
+        display: 'flex',
+        flow: {
+            '': 'row nowrap',
+            inverted: 'row-reverse nowrap',
+        },
+        placeContent: 'center space-between',
+        placeItems: 'center stretch',
+        gap: '1x',
+        padding: '1x 2x',
+        border: 'top',
+        width: '100%',
+        height: 'min 5x',
+        boxSizing: 'border-box',
+    },
+});
+function LayoutFooter(props, ref) {
+    const { children, invertOrder, mods, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    const finalMods = useMemo(() => ({
+        inverted: invertOrder,
+        ...mods,
+    }), [invertOrder, mods]);
+    return (_jsx(FooterElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), mods: finalMods, styles: styles, children: _jsx(LayoutContextReset, { children: children }) }));
+}
+const _LayoutFooter = forwardRef(LayoutFooter);
+_LayoutFooter.displayName = 'Layout.Footer';
+export { _LayoutFooter as LayoutFooter };
+
+        

package/es/components/content/Layout/LayoutHeader.js

@@ -0,0 +1,102 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, } from 'react';
+import { SlashIcon } from '../../../icons/SlashIcon';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import { Link } from '../../actions/Link/Link';
+import { Text } from '../Text';
+import { useAutoTooltip } from '../use-auto-tooltip';
+import { LayoutContextReset } from './LayoutContext';
+const HeaderElement = tasty({
+    as: 'header',
+    qa: 'LayoutHeader',
+    styles: {
+        display: 'grid',
+        gridTemplate: `
+      "breadcrumbs breadcrumbs breadcrumbs" auto
+      "title suffix extra" auto
+      "subtitle subtitle subtitle" auto
+      / 1fr max-content max-content
+    `,
+        gap: '0.5x 1x',
+        padding: '2x',
+        border: 'bottom',
+        width: '100%',
+        boxSizing: 'border-box',
+        Breadcrumbs: {
+            gridArea: 'breadcrumbs',
+            display: 'flex',
+            flow: 'row nowrap',
+            placeItems: 'center start',
+            gap: '0.5x',
+            preset: 't3',
+            color: '#dark-02',
+        },
+        Title: {
+            gridArea: 'title',
+            preset: {
+                '': 'h3',
+                'level=1': 'h1',
+                'level=2': 'h2',
+                'level=3': 'h3',
+                'level=4': 'h4',
+                'level=5': 'h5',
+                'level=6': 'h6',
+            },
+            color: '#dark',
+            margin: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+        Suffix: {
+            gridArea: 'suffix',
+            display: 'flex',
+            placeItems: 'center',
+        },
+        Extra: {
+            gridArea: 'extra',
+            display: 'flex',
+            placeItems: 'center',
+            gap: '1x',
+        },
+        Subtitle: {
+            gridArea: 'subtitle',
+            preset: 't3',
+            color: '#dark-02',
+        },
+    },
+});
+function LayoutHeader(props, ref) {
+    const { title, level = 3, suffix, extra, subtitle, breadcrumbs, children, mods, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    // Use auto tooltip for title overflow detection
+    const { labelRef, renderWithTooltip } = useAutoTooltip({
+        tooltip: true,
+        children: typeof title === 'string' ? title : undefined,
+    });
+    const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
+    const renderBreadcrumbs = () => {
+        if (!hasBreadcrumbs)
+            return null;
+        return (_jsxs("div", { "data-element": "Breadcrumbs", children: [breadcrumbs.map(([label, href], index) => (_jsxs(Fragment, { children: [_jsx(Link, { to: href, children: label }), _jsx(SlashIcon, {})] }, href))), typeof title === 'string' && _jsx(Text, { color: "#dark-02", children: title })] }));
+    };
+    const renderTitle = (tooltipProps, tooltipRef) => {
+        if (!title)
+            return null;
+        const TitleTag = `h${level}`;
+        return (_jsx(TitleTag, { ref: tooltipRef, "data-element": "Title", "data-level": level, ...tooltipProps, children: _jsx("span", { ref: labelRef, children: title }) }));
+    };
+    return (_jsx(HeaderElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), mods: { ...mods, level }, styles: styles, children: _jsxs(LayoutContextReset, { children: [renderBreadcrumbs(), renderWithTooltip(renderTitle, 'bottom'), suffix && _jsx("div", { "data-element": "Suffix", children: suffix }), extra && _jsx("div", { "data-element": "Extra", children: extra }), subtitle && _jsx("div", { "data-element": "Subtitle", children: subtitle }), children] }) }));
+}
+const _LayoutHeader = forwardRef(LayoutHeader);
+_LayoutHeader.displayName = 'Layout.Header';
+export { _LayoutHeader as LayoutHeader };
+
+