@cube-dev/ui-kit 0.95.0 → 0.97.0

package/es/tokens.js

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

package/es/utils/ResizeSensor.js

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

package/es/utils/index.js

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

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/raf.js

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

package/es/utils/random.js

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

package/es/utils/range.js

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

package/es/utils/react/RenderCache.js

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

package/es/utils/react/Slots.js

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

package/es/utils/react/chain.js

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

package/es/utils/react/forwardRefWithGenerics.js

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

package/es/utils/react/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.95.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 
@@ -19,5 +19,6 @@ export { useQaProps } from './useQaProps';
 export { useEventBus, useEventListener, EventBusProvider } from './useEventBus';
 export { useControlledFocusVisible } from './useControlledFocusVisible';
 export { RenderCache } from './RenderCache';
+export { useLocalStorage } from './useLocalStorage';
 
         

package/es/utils/react/interactions.js

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

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/sharedStore.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useControlledFocusVisible.js

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

package/es/utils/react/useEventBus.js

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

package/es/utils/react/useId.js

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

package/es/utils/react/useIsDarwin.js

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

package/es/utils/react/useKeySymbols.js

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

package/es/utils/react/useLayoutEffect.js

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

package/es/utils/react/useLocalStorage.js

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

package/types/components/CollectionItem.d.ts

@@ -6,6 +6,23 @@ export interface CubeCollectionItemProps<T> extends ItemProps<T>, Omit<CubeItemP
     wrapper?: (item: ReactElement) => ReactElement;
     [key: string]: any;
 }
+/**
+ * Filters out service props from collection item props, returning only
+ * props that should be passed to the Item component.
+ *
+ * This eliminates the need to manually extract and pass Item props
+ * in components like MenuItem, ListBox Option, and Select Option.
+ *
+ * @param itemProps - The props from a collection item (node.props)
+ * @returns Filtered props safe to spread onto Item component
+ *
+ * @example
+ * ```tsx
+ * const itemProps = filterCollectionItemProps(item.props);
+ * return <Item {...itemProps} />;
+ * ```
+ */
+export declare function filterCollectionItemProps(itemProps: Record<string, any> | undefined): Record<string, any>;
 declare const _CollectionItem: (<T>(props: CubeCollectionItemProps<T>) => ReactElement) & {
     Action: import("react").ForwardRefExoticComponent<Omit<import("./actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
     Badge: import("react").ForwardRefExoticComponent<import("./content/ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 import { ReactNode, RefObject } from 'react';
 import { OverlayProps } from 'react-aria';
 import { ItemVariant } from '../../../data/item-themes';
-import { BaseProps, ContainerStyleProps, Props } from '../../../tasty';
+import { BaseProps, ContainerStyleProps, Props, Styles } from '../../../tasty';
 import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 export interface CubeItemProps extends BaseProps, ContainerStyleProps {
     icon?: ReactNode | 'checkbox';
@@ -92,6 +92,20 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * Ref to access the label element directly
      */
     labelRef?: RefObject<HTMLElement>;
+    /**
+     * String to highlight within children.
+     * Only works when children is a plain string.
+     */
+    highlight?: string;
+    /**
+     * Whether highlight matching is case-sensitive.
+     * @default false
+     */
+    highlightCaseSensitive?: boolean;
+    /**
+     * Custom styles for highlighted text.
+     */
+    highlightStyles?: Styles;
 }
 declare const _Item: import("react").ForwardRefExoticComponent<CubeItemProps & import("react").RefAttributes<HTMLElement>> & {
     Action: import("react").ForwardRefExoticComponent<Omit<import("../../actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

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 };