@cube-dev/ui-kit 0.95.0 → 0.96.0

package/es/utils/react/useLocalStorage.js

@@ -0,0 +1,130 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { useCallback, useSyncExternalStore } from 'react';
+import { useEvent } from '../../_internal/hooks/use-event';
+/** Global registry of listeners per key for same-tab cross-instance sync */
+const listeners = new Map();
+/** Notify all listeners for a given key */
+function notifyListeners(key) {
+    listeners.get(key)?.forEach((listener) => listener());
+}
+/** Check if localStorage is available */
+function isLocalStorageAvailable() {
+    try {
+        const testKey = '__localStorage_test__';
+        window.localStorage.setItem(testKey, testKey);
+        window.localStorage.removeItem(testKey);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** Safely parse JSON with fallback */
+function parseJSON(value, fallback) {
+    if (value === null) {
+        return fallback;
+    }
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return fallback;
+    }
+}
+/** Get initial value, supporting lazy initializer */
+function getInitialValue(initialValue) {
+    return typeof initialValue === 'function'
+        ? initialValue()
+        : initialValue;
+}
+/**
+ * A hook to persist state in localStorage with cross-instance synchronization.
+ *
+ * Features:
+ * - JSON serialization/deserialization
+ * - Syncs between hook instances with the same key (same tab)
+ * - Syncs across browser tabs via storage event
+ * - SSR-safe (gracefully handles missing localStorage)
+ * - Supports lazy initial value
+ *
+ * @param key - The localStorage key. Pass `null` or `undefined` to disable the hook.
+ * @param initialValue - Initial value or lazy initializer function
+ * @returns Tuple of [value, setValue] similar to useState
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [theme, setTheme] = useLocalStorage('theme', 'light');
+ *
+ * // With lazy initializer
+ * const [settings, setSettings] = useLocalStorage('settings', () => getDefaultSettings());
+ *
+ * // Disabled (returns initialValue, setValue is no-op)
+ * const [value, setValue] = useLocalStorage(null, 'default');
+ *
+ * // Conditionally enabled
+ * const [data, setData] = useLocalStorage(isEnabled ? 'my-key' : null, {});
+ * ```
+ */
+export function useLocalStorage(key, initialValue) {
+    const resolvedInitial = getInitialValue(initialValue);
+    const subscribe = useCallback((onStoreChange) => {
+        if (!key) {
+            return () => { };
+        }
+        // Add to same-tab listeners
+        if (!listeners.has(key)) {
+            listeners.set(key, new Set());
+        }
+        listeners.get(key).add(onStoreChange);
+        // Listen for cross-tab changes
+        const handleStorageEvent = (event) => {
+            if (event.key === key) {
+                onStoreChange();
+            }
+        };
+        window.addEventListener('storage', handleStorageEvent);
+        return () => {
+            listeners.get(key)?.delete(onStoreChange);
+            if (listeners.get(key)?.size === 0) {
+                listeners.delete(key);
+            }
+            window.removeEventListener('storage', handleStorageEvent);
+        };
+    }, [key]);
+    const getSnapshot = useCallback(() => {
+        if (!key || !isLocalStorageAvailable()) {
+            return resolvedInitial;
+        }
+        return parseJSON(localStorage.getItem(key), resolvedInitial);
+    }, [key, resolvedInitial]);
+    const getServerSnapshot = useCallback(() => {
+        return resolvedInitial;
+    }, [resolvedInitial]);
+    const storedValue = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    const setValue = useEvent((update) => {
+        if (!key || !isLocalStorageAvailable()) {
+            return;
+        }
+        const currentValue = parseJSON(localStorage.getItem(key), resolvedInitial);
+        const newValue = typeof update === 'function'
+            ? update(currentValue)
+            : update;
+        try {
+            localStorage.setItem(key, JSON.stringify(newValue));
+            notifyListeners(key);
+        }
+        catch (error) {
+            console.error(`[useLocalStorage] Failed to save "${key}":`, error);
+        }
+    });
+    return [storedValue, setValue];
+}
+
+        

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.95.0
+ * @cube-dev/ui-kit v0.96.0
  * 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.95.0
+ * @cube-dev/ui-kit v0.96.0
  * 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.95.0
+ * @cube-dev/ui-kit v0.96.0
  * 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.95.0
+ * @cube-dev/ui-kit v0.96.0
  * 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.95.0
+ * @cube-dev/ui-kit v0.96.0
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.95.0
+ * @cube-dev/ui-kit v0.96.0
  * Released under the MIT license.
  */
 
-export const VERSION = '0.95.0';
+export const VERSION = '0.96.0';
 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.95.0",
+  "version": "0.96.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/actions/Button/Button.d.ts

@@ -53,21 +53,13 @@ export declare const DEFAULT_BUTTON_STYLES: {
         readonly 'single-icon | type=link': 0;
     };
     readonly width: {
-        readonly '': "initial";
-        readonly 'size=xsmall & single-icon': "$size-xs $size-xs";
-        readonly 'size=small & single-icon': "$size-sm $size-sm";
-        readonly 'size=medium & single-icon': "$size-md $size-md";
-        readonly 'size=large & single-icon': "$size-lg $size-lg";
-        readonly 'size=xlarge & single-icon': "$size-xl $size-xl";
-        readonly 'type=link': "initial";
+        readonly '': "min $size";
+        readonly 'left-icon & right-icon': "min ($size * 2 - 2bw)";
+        readonly 'single-icon': "fixed $size";
+        readonly 'type=link': "min 1ch";
     };
     readonly height: {
-        readonly '': "initial";
-        readonly 'size=xsmall': "$size-xs $size-xs";
-        readonly 'size=small': "$size-sm $size-sm";
-        readonly 'size=medium': "$size-md $size-md";
-        readonly 'size=large': "$size-lg $size-lg";
-        readonly 'size=xlarge': "$size-xl $size-xl";
+        readonly '': "fixed $size";
         readonly 'type=link': "initial";
     };
     readonly whiteSpace: "nowrap";
@@ -75,6 +67,14 @@ export declare const DEFAULT_BUTTON_STYLES: {
         readonly '': true;
         readonly 'type=link & !focused': 0;
     };
+    readonly $size: {
+        readonly '': "$size-md";
+        readonly 'size=xsmall': "$size-xs";
+        readonly 'size=small': "$size-sm";
+        readonly 'size=medium': "$size-md";
+        readonly 'size=large': "$size-lg";
+        readonly 'size=xlarge': "$size-xl";
+    };
     readonly ButtonIcon: {
         readonly width: "min 1fs";
     };

package/types/components/actions/Menu/styled.d.ts

@@ -71,9 +71,7 @@ export declare const StyledHeader: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: {
-        [key: string]: string | number | boolean | null | undefined;
-    } | undefined;
+    mods?: import("../../../tasty").Mods | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -517,9 +515,7 @@ export declare const StyledFooter: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: {
-        [key: string]: string | number | boolean | null | undefined;
-    } | undefined;
+    mods?: import("../../../tasty").Mods | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -965,9 +961,7 @@ export declare const StyledSectionHeading: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: {
-        [key: string]: string | number | boolean | null | undefined;
-    } | undefined;
+    mods?: import("../../../tasty").Mods | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;

package/types/components/content/Layout/GridLayout.d.ts

@@ -0,0 +1,36 @@
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { Styles } from '../../../tasty';
+import { CubeLayoutProps } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFlex } from './LayoutFlex';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutGrid } from './LayoutGrid';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPane } from './LayoutPane';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+export interface CubeGridLayoutProps extends CubeLayoutProps {
+    /** Grid template columns */
+    columns?: Styles['gridColumns'];
+    /** Grid template rows */
+    rows?: Styles['gridRows'];
+    /** Grid template shorthand */
+    template?: Styles['gridTemplate'];
+    children?: ReactNode;
+}
+interface GridLayoutComponent extends ForwardRefExoticComponent<CubeGridLayoutProps & RefAttributes<HTMLDivElement>> {
+    Toolbar: typeof LayoutToolbar;
+    Header: typeof LayoutHeader;
+    Footer: typeof LayoutFooter;
+    Content: typeof LayoutContent;
+    Block: typeof LayoutBlock;
+    Flex: typeof LayoutFlex;
+    Grid: typeof LayoutGrid;
+    Pane: typeof LayoutPane;
+    Panel: typeof LayoutPanel;
+    PanelHeader: typeof LayoutPanelHeader;
+}
+declare const GridLayout: GridLayoutComponent;
+export { GridLayout };

package/types/components/content/Layout/Layout.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FlowStyleProps {
+    /** Switch to grid display mode */
+    isGrid?: boolean;
+    /** Grid template columns (when isGrid=true) */
+    columns?: Styles['gridColumns'];
+    /** Grid template rows (when isGrid=true) */
+    rows?: Styles['gridRows'];
+    /** Grid template shorthand */
+    template?: Styles['gridTemplate'];
+    /** Padding for content areas (Layout.Content components). Default: '1x' */
+    contentPadding?: Styles['padding'];
+    /** Enable transition animation for Inner content when panels open/close */
+    hasTransition?: boolean;
+    /** Styles for wrapper and Inner sub-element */
+    styles?: Styles;
+    children?: ReactNode;
+    /**
+     * @internal Force show dev warning even in production (for storybook testing)
+     */
+    _forceShowDevWarning?: boolean;
+}
+declare const _Layout: import("react").ForwardRefExoticComponent<CubeLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _Layout as Layout };

package/types/components/content/Layout/LayoutBlock.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutBlockProps extends CubeLayoutContentProps {
+}
+declare const _LayoutBlock: import("react").ForwardRefExoticComponent<CubeLayoutBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutBlock as LayoutBlock };

package/types/components/content/Layout/LayoutContent.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Mods } from '../../../tasty';
+export type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';
+export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
+    /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */
+    scrollbar?: ScrollbarType;
+    children?: ReactNode;
+    /** Additional modifiers to apply */
+    mods?: Mods;
+}
+declare const _LayoutContent: import("react").ForwardRefExoticComponent<CubeLayoutContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutContent as LayoutContent };

package/types/components/content/Layout/LayoutContext.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export type Side = 'left' | 'top' | 'right' | 'bottom';
+export interface LayoutContextValue {
+    registerPanel: (side: Side, size: number) => void;
+    unregisterPanel: (side: Side) => void;
+    updatePanelSize: (side: Side, size: number) => void;
+    setDragging: (isDragging: boolean) => void;
+    markReady: () => void;
+    panelSizes: Record<Side, number>;
+    isDragging: boolean;
+    isReady: boolean;
+    /** Whether transitions are enabled for panels */
+    hasTransition: boolean;
+}
+export declare const LayoutContext: import("react").Context<LayoutContextValue | null>;
+export declare function useLayoutContext(): LayoutContextValue | null;
+export interface LayoutProviderProps {
+    children: ReactNode;
+    /** Whether transitions are enabled for panels */
+    hasTransition?: boolean;
+}
+export declare function LayoutProvider({ children, hasTransition, }: LayoutProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Provider that resets the layout context for sub-components.
+ * Used to prevent panels in nested Layouts from affecting parent layouts.
+ */
+export declare function LayoutContextReset({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface LayoutPanelContextValue {
+    /** Callback to change the panel's open state */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Current open state of the panel */
+    isOpen: boolean;
+}
+export declare const LayoutPanelContext: import("react").Context<LayoutPanelContextValue | null>;
+export declare function useLayoutPanelContext(): LayoutPanelContextValue | null;

package/types/components/content/Layout/LayoutFlex.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutFlexProps extends CubeLayoutContentProps {
+}
+declare const _LayoutFlex: import("react").ForwardRefExoticComponent<CubeLayoutFlexProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutFlex as LayoutFlex };

package/types/components/content/Layout/LayoutFooter.d.ts

@@ -0,0 +1,7 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutFooterProps extends CubeLayoutContentProps {
+    /** Inverts the order of children (primary action on right) */
+    invertOrder?: boolean;
+}
+declare const _LayoutFooter: import("react").ForwardRefExoticComponent<CubeLayoutFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutFooter as LayoutFooter };

package/types/components/content/Layout/LayoutGrid.d.ts

@@ -0,0 +1,12 @@
+import { Styles } from '../../../tasty';
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutGridProps extends CubeLayoutContentProps {
+    /** Grid template columns */
+    columns?: Styles['gridColumns'];
+    /** Grid template rows */
+    rows?: Styles['gridRows'];
+    /** Grid template shorthand */
+    template?: Styles['gridTemplate'];
+}
+declare const _LayoutGrid: import("react").ForwardRefExoticComponent<CubeLayoutGridProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutGrid as LayoutGrid };

package/types/components/content/Layout/LayoutHeader.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutHeaderProps extends CubeLayoutContentProps {
+    /** Page/section title */
+    title?: ReactNode;
+    /** Title heading level (1-6) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Content next to the title */
+    suffix?: ReactNode;
+    /** Content on the right side */
+    extra?: ReactNode;
+    /** Text below the title */
+    subtitle?: ReactNode;
+    /**
+     * Navigation breadcrumbs (max 3 items recommended).
+     * Uses Link component which integrates with the navigation provider.
+     */
+    breadcrumbs?: Array<[label: string, href: string]>;
+}
+declare const _LayoutHeader: import("react").ForwardRefExoticComponent<CubeLayoutHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutHeader as LayoutHeader };

package/types/components/content/Layout/LayoutPane.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+import { ScrollbarType } from './LayoutContent';
+export type ResizeEdge = 'right' | 'bottom';
+export interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {
+    /** Edge where resize handler appears */
+    resizeEdge?: ResizeEdge;
+    /** Enable resize functionality */
+    isResizable?: boolean;
+    /** Controlled size (width for right edge, height for bottom edge) */
+    size?: number | string;
+    /** Default size for uncontrolled state */
+    defaultSize?: number | string;
+    /** Minimum size constraint */
+    minSize?: number | string;
+    /** Maximum size constraint */
+    maxSize?: number | string;
+    /** Size change callback */
+    onSizeChange?: (size: number) => void;
+    /** Scrollbar style */
+    scrollbar?: ScrollbarType;
+    /** Custom styles */
+    styles?: Styles;
+    children?: ReactNode;
+}
+declare const _LayoutPane: import("react").ForwardRefExoticComponent<CubeLayoutPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPane as LayoutPane };

package/types/components/content/Layout/LayoutPanel.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+import { CubeDialogContainerProps } from '../../overlays/Dialog/DialogContainer';
+import { Side } from './LayoutContext';
+export interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
+    /** Side of the layout where panel is positioned */
+    side: Side;
+    /** Panel size (width for left/right, height for top/bottom) - controlled */
+    size?: number | string;
+    /** Default panel size for uncontrolled state */
+    defaultSize?: number | string;
+    /** Minimum panel size */
+    minSize?: number | string;
+    /** Maximum panel size */
+    maxSize?: number | string;
+    /** Enable resize functionality */
+    isResizable?: boolean;
+    /** Size change callback */
+    onSizeChange?: (size: number) => void;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Default open state */
+    defaultIsOpen?: boolean;
+    /** Open state change callback */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Enable slide transition on open/close */
+    hasTransition?: boolean;
+    /** Switch to dialog mode (renders panel inside Dialog) */
+    isDialog?: boolean;
+    /** Controlled dialog open state */
+    isDialogOpen?: boolean;
+    /** Default dialog open state */
+    defaultIsDialogOpen?: boolean;
+    /** Dialog open state change callback */
+    onDialogOpenChange?: (isOpen: boolean) => void;
+    /** Props passed to Dialog component when in dialog mode */
+    dialogProps?: Omit<CubeDialogContainerProps, 'isDismissable' | 'onDismiss' | 'isOpen'>;
+    /** Padding for content areas inside the panel. Default: '1x' */
+    contentPadding?: Styles['padding'];
+    /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */
+    sizeStorageKey?: string;
+    /** Styles for the panel */
+    styles?: Styles;
+    children?: ReactNode;
+}
+declare const _LayoutPanel: import("react").ForwardRefExoticComponent<CubeLayoutPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPanel as LayoutPanel };

package/types/components/content/Layout/LayoutPanelHeader.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps } from '../../../tasty';
+export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStyleProps {
+    /** Panel title */
+    title?: ReactNode;
+    /** Title heading level (affects semantics, not visual) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Show close button */
+    isClosable?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Custom actions to display (overrides default close button) */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+declare const _LayoutPanelHeader: import("react").ForwardRefExoticComponent<CubeLayoutPanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutPanelHeader as LayoutPanelHeader };

package/types/components/content/Layout/LayoutToolbar.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContentProps } from './LayoutContent';
+export interface CubeLayoutToolbarProps extends CubeLayoutContentProps {
+}
+declare const _LayoutToolbar: import("react").ForwardRefExoticComponent<CubeLayoutToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutToolbar as LayoutToolbar };

package/types/components/content/Layout/hooks/useTinyScrollbar.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, RefObject } from 'react';
+export interface TinyScrollbarState {
+    hasOverflowY: boolean;
+    hasOverflowX: boolean;
+    scrollTop: number;
+    scrollLeft: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface TinyScrollbarResult {
+    handleVStyle: CSSProperties;
+    handleHStyle: CSSProperties;
+    hasOverflowY: boolean;
+    hasOverflowX: boolean;
+    isScrolling: boolean;
+}
+export declare function useTinyScrollbar(ref: RefObject<HTMLElement | null>, enabled: boolean): TinyScrollbarResult;

package/types/components/content/Layout/index.d.ts

@@ -0,0 +1,41 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { CubeLayoutProps } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFlex } from './LayoutFlex';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutGrid } from './LayoutGrid';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPane } from './LayoutPane';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+export { GridLayout } from './GridLayout';
+export type { CubeGridLayoutProps } from './GridLayout';
+export type { CubeLayoutProps } from './Layout';
+export type { CubeLayoutBlockProps } from './LayoutBlock';
+export type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';
+export type { CubeLayoutFlexProps } from './LayoutFlex';
+export type { CubeLayoutGridProps } from './LayoutGrid';
+export type { CubeLayoutFooterProps } from './LayoutFooter';
+export type { CubeLayoutHeaderProps } from './LayoutHeader';
+export type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';
+export type { CubeLayoutPanelProps } 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';
+interface LayoutComponent extends ForwardRefExoticComponent<CubeLayoutProps & RefAttributes<HTMLDivElement>> {
+    Toolbar: typeof LayoutToolbar;
+    Header: typeof LayoutHeader;
+    Footer: typeof LayoutFooter;
+    Content: typeof LayoutContent;
+    Block: typeof LayoutBlock;
+    Flex: typeof LayoutFlex;
+    Grid: typeof LayoutGrid;
+    Pane: typeof LayoutPane;
+    Panel: typeof LayoutPanel;
+    PanelHeader: typeof LayoutPanelHeader;
+}
+declare const Layout: LayoutComponent;
+export { Layout };

package/types/components/content/Layout/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clamps a size value within min/max constraints.
+ * Handles both number and string constraint values (only numbers are applied).
+ */
+export declare function clampSize(value: number, minSize?: number | string, maxSize?: number | string): number;

package/types/components/content/List/SectionHeading.d.ts

@@ -68,9 +68,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: {
-        [key: string]: string | number | boolean | null | undefined;
-    } | undefined;
+    mods?: import("../../../tasty").Mods | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;