@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/utils/react/resolveIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveIcon.js","names":[],"sources":["../../../src/utils/react/resolveIcon.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Mods } from '../../tasty';\n\n/**\n * Function that receives mods (can be destructured) and returns an icon or true for empty slot.\n * @example\n * icon={({ loading, selected }) => loading ? <SpinnerIcon /> : <Icon />}\n */\nexport type IconRenderFn<T extends Mods = Mods> = (mods: T) => ReactNode | true;\n\n/** Dynamic icon prop: ReactNode, true for empty slot, or render function */\nexport type DynamicIcon<T extends Mods = Mods> =\n  | ReactNode\n  | true\n  | IconRenderFn<T>;\n\nexport interface ResolvedIcon {\n  /** The icon content to render (null for empty slot) */\n  content: ReactNode | null;\n  /** Whether the slot should be rendered (true even for empty slots) */\n  hasSlot: boolean;\n}\n\n/**\n * Resolves a dynamic icon prop to its content and slot state.\n * - If `true`: empty slot (hasSlot=true, content=null)\n * - If function: call with mods, then process result\n * - Otherwise: use as-is\n */\nexport function resolveIcon<T extends Mods>(\n  icon: DynamicIcon<T> | undefined,\n  mods: T,\n): ResolvedIcon {\n  if (icon === undefined || icon === null || icon === false) {\n    return { content: null, hasSlot: false };\n  }\n\n  if (icon === true) {\n    return { content: null, hasSlot: true };\n  }\n\n  if (typeof icon === 'function') {\n    const result = (icon as IconRenderFn<T>)(mods);\n    if (result === true) {\n      return { content: null, hasSlot: true };\n    }\n    if (result === undefined || result === null || result === false) {\n      return { content: null, hasSlot: false };\n    }\n    return { content: result, hasSlot: true };\n  }\n\n  return { content: icon, hasSlot: true };\n}\n"],"mappings":";;;;;;;;AA8BA,SAAgB,YACd,MACA,MACc;AACd,KAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,MAClD,QAAO;EAAE,SAAS;EAAM,SAAS;EAAO;AAG1C,KAAI,SAAS,KACX,QAAO;EAAE,SAAS;EAAM,SAAS;EAAM;AAGzC,KAAI,OAAO,SAAS,YAAY;EAC9B,MAAM,SAAU,KAAyB,KAAK;AAC9C,MAAI,WAAW,KACb,QAAO;GAAE,SAAS;GAAM,SAAS;GAAM;AAEzC,MAAI,WAAW,UAAa,WAAW,QAAQ,WAAW,MACxD,QAAO;GAAE,SAAS;GAAM,SAAS;GAAO;AAE1C,SAAO;GAAE,SAAS;GAAQ,SAAS;GAAM;;AAG3C,QAAO;EAAE,SAAS;EAAM,SAAS;EAAM"}

package/dist/utils/react/sharedStore.js

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useEvent } from "../../_internal/hooks/use-event.js";
+import { useSyncExternalStore } from "react";
+
+//#region src/utils/react/sharedStore.ts
+/**
+* Create a shared store that survives hot-reloads.
+*
+* Pass a unique `name` once per logical store module:
+*   export const useSidebarStore = createSharedStore('sidebar', { open: false });
+*/
+function createSharedStore(name, initialState) {
+	const cacheKey = `__sharedStore_${name}__`;
+	const existing = cacheKey && globalThis[cacheKey];
+	const holder = existing ?? {
+		state: initialState,
+		listeners: /* @__PURE__ */ new Set()
+	};
+	if (existing && existing.state !== initialState) console.warn(`[createSharedStore] Store "${name}" already exists – the new initialState is ignored to preserve hot-reload state.`);
+	if (cacheKey && !existing) globalThis[cacheKey] = holder;
+	const getSnapshot = () => holder.state;
+	const subscribe = (cb) => {
+		holder.listeners.add(cb);
+		return () => holder.listeners.delete(cb);
+	};
+	const setStore = (update) => {
+		holder.state = typeof update === "function" ? update(holder.state) : update;
+		holder.listeners.forEach((l) => l());
+	};
+	const useSharedStore = () => {
+		return [useSyncExternalStore(subscribe, getSnapshot), useEvent(setStore)];
+	};
+	return useSharedStore;
+}
+
+//#endregion
+export { createSharedStore };
+//# sourceMappingURL=sharedStore.js.map

package/dist/utils/react/sharedStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedStore.js","names":[],"sources":["../../../src/utils/react/sharedStore.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { useEvent } from '../../_internal/hooks/use-event';\n\n/** Like React.setState: either a value or a function of the previous value */\ntype Updater<S> = S | ((prev: S) => S);\n\n/* Internal shape kept on globalThis */\ninterface StoreHolder<S> {\n  state: S;\n  listeners: Set<() => void>;\n}\n\n/**\n * Create a shared store that survives hot-reloads.\n *\n * Pass a unique `name` once per logical store module:\n *   export const useSidebarStore = createSharedStore('sidebar', { open: false });\n */\nexport function createSharedStore<S>(\n  name: string,\n  initialState: S,\n): UseSharedStoreHook<S> {\n  const cacheKey = `__sharedStore_${name}__`;\n  const existing: StoreHolder<S> | undefined =\n    cacheKey && (globalThis as any)[cacheKey];\n\n  const holder: StoreHolder<S> = existing ?? {\n    state: initialState,\n    listeners: new Set<() => void>(),\n  };\n\n  /* Warn if someone tries to “re-initialise” with a different value */\n  if (\n    process.env.NODE_ENV === 'development' &&\n    existing &&\n    existing.state !== initialState\n  ) {\n    console.warn(\n      `[createSharedStore] Store \"${name}\" already exists – ` +\n        'the new initialState is ignored to preserve hot-reload state.',\n    );\n  }\n\n  if (cacheKey && !existing) {\n    (globalThis as any)[cacheKey] = holder;\n  }\n\n  const getSnapshot = () => holder.state;\n\n  const subscribe = (cb: () => void) => {\n    holder.listeners.add(cb);\n\n    return () => holder.listeners.delete(cb);\n  };\n\n  const setStore = (update: Updater<S>) => {\n    holder.state =\n      typeof update === 'function'\n        ? (update as (prev: S) => S)(holder.state)\n        : update;\n\n    holder.listeners.forEach((l) => l());\n  };\n\n  const useSharedStore: UseSharedStoreHook<S> = () => {\n    return [useSyncExternalStore(subscribe, getSnapshot), useEvent(setStore)];\n  };\n\n  return useSharedStore;\n}\n\ntype UseSharedStoreHook<S> = () => readonly [S, (u: Updater<S>) => void];\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,kBACd,MACA,cACuB;CACvB,MAAM,WAAW,iBAAiB,KAAK;CACvC,MAAM,WACJ,YAAa,WAAmB;CAElC,MAAM,SAAyB,YAAY;EACzC,OAAO;EACP,2BAAW,IAAI,KAAiB;EACjC;AAGD,KAEE,YACA,SAAS,UAAU,aAEnB,SAAQ,KACN,8BAA8B,KAAK,kFAEpC;AAGH,KAAI,YAAY,CAAC,SACf,CAAC,WAAmB,YAAY;CAGlC,MAAM,oBAAoB,OAAO;CAEjC,MAAM,aAAa,OAAmB;AACpC,SAAO,UAAU,IAAI,GAAG;AAExB,eAAa,OAAO,UAAU,OAAO,GAAG;;CAG1C,MAAM,YAAY,WAAuB;AACvC,SAAO,QACL,OAAO,WAAW,aACb,OAA0B,OAAO,MAAM,GACxC;AAEN,SAAO,UAAU,SAAS,MAAM,GAAG,CAAC;;CAGtC,MAAM,uBAA8C;AAClD,SAAO,CAAC,qBAAqB,WAAW,YAAY,EAAE,SAAS,SAAS,CAAC;;AAG3E,QAAO"}

package/dist/utils/react/useCombinedRefs.d.ts

@@ -0,0 +1,9 @@
+
+import { Ref, RefObject } from "react";
+
+//#region src/utils/react/useCombinedRefs.d.ts
+declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (value: T | null) => void;
+declare function useCombinedRefs<T>(...refs: Array<Ref<T> | undefined>): RefObject<T>;
+//#endregion
+export { mergeRefs, useCombinedRefs };
+//# sourceMappingURL=useCombinedRefs.d.ts.map

package/dist/utils/react/useCombinedRefs.js

@@ -0,0 +1,24 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useEffect, useRef } from "react";
+
+//#region src/utils/react/useCombinedRefs.ts
+function mergeRefs(...refs) {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(value);
+			else ref.current = value;
+		});
+	};
+}
+function useCombinedRefs(...refs) {
+	const targetRef = useRef(null);
+	useEffect(() => {
+		mergeRefs(...refs)(targetRef.current);
+	}, [refs]);
+	return targetRef;
+}
+
+//#endregion
+export { mergeRefs, useCombinedRefs };
+//# sourceMappingURL=useCombinedRefs.js.map

package/dist/utils/react/useCombinedRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCombinedRefs.js","names":[],"sources":["../../../src/utils/react/useCombinedRefs.ts"],"sourcesContent":["import { Ref, RefObject, useEffect, useRef } from 'react';\n\ntype AssignableRef<T> = { current: T | null };\n\nexport function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n\n      if (typeof ref === 'function') {\n        ref(value);\n      } else {\n        (ref as AssignableRef<T>).current = value;\n      }\n    });\n  };\n}\n\nexport function useCombinedRefs<T>(\n  ...refs: Array<Ref<T> | undefined>\n): RefObject<T> {\n  const targetRef = useRef<T>(null) as RefObject<T>;\n\n  useEffect(() => {\n    mergeRefs(...refs)(targetRef.current);\n  }, [refs]);\n\n  return targetRef;\n}\n"],"mappings":";;;;AAIA,SAAgB,UAAa,GAAG,MAAiC;AAC/D,SAAQ,UAAoB;AAC1B,OAAK,SAAS,QAAQ;AACpB,OAAI,CAAC,IAAK;AAEV,OAAI,OAAO,QAAQ,WACjB,KAAI,MAAM;OAEV,CAAC,IAAyB,UAAU;IAEtC;;;AAIN,SAAgB,gBACd,GAAG,MACW;CACd,MAAM,YAAY,OAAU,KAAK;AAEjC,iBAAgB;AACd,YAAU,GAAG,KAAK,CAAC,UAAU,QAAQ;IACpC,CAAC,KAAK,CAAC;AAEV,QAAO"}

package/dist/utils/react/useControlledFocusVisible.d.ts

@@ -0,0 +1,15 @@
+
+//#region src/utils/react/useControlledFocusVisible.d.ts
+interface UseControlledFocusVisibleResult {
+  isFocusVisible: boolean;
+  activateFocusVisible: () => void;
+}
+/**
+ * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,
+ * but also returns activateFocusVisible function that manually switches the state to true
+ * until the original flag is switched to false.
+ */
+declare function useControlledFocusVisible(): UseControlledFocusVisibleResult;
+//#endregion
+export { UseControlledFocusVisibleResult, useControlledFocusVisible };
+//# sourceMappingURL=useControlledFocusVisible.d.ts.map

package/dist/utils/react/useControlledFocusVisible.js

@@ -0,0 +1,34 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { createSharedStore } from "./sharedStore.js";
+import { useEffect } from "react";
+import { useFocusVisible } from "react-aria";
+
+//#region src/utils/react/useControlledFocusVisible.ts
+const useControlledFocusVisibleStore = createSharedStore("controlledFocusVisible", { isManuallyActivated: false });
+/**
+* A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,
+* but also returns activateFocusVisible function that manually switches the state to true
+* until the original flag is switched to false.
+*/
+function useControlledFocusVisible() {
+	const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});
+	const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();
+	useEffect(() => {
+		if (!originalIsFocusVisible && isManuallyActivated) setStore({ isManuallyActivated: false });
+	}, [
+		originalIsFocusVisible,
+		isManuallyActivated,
+		setStore
+	]);
+	const activateFocusVisible = () => {
+		setStore({ isManuallyActivated: true });
+	};
+	return {
+		isFocusVisible: originalIsFocusVisible || isManuallyActivated,
+		activateFocusVisible
+	};
+}
+
+//#endregion
+export { useControlledFocusVisible };
+//# sourceMappingURL=useControlledFocusVisible.js.map

package/dist/utils/react/useControlledFocusVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledFocusVisible.js","names":[],"sources":["../../../src/utils/react/useControlledFocusVisible.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useFocusVisible } from 'react-aria';\n\nimport { createSharedStore } from './sharedStore';\n\ninterface ControlledFocusVisibleState {\n  isManuallyActivated: boolean;\n}\n\n// Create a shared store for the controlled focus visible state\nconst useControlledFocusVisibleStore =\n  createSharedStore<ControlledFocusVisibleState>('controlledFocusVisible', {\n    isManuallyActivated: false,\n  });\n\nexport interface UseControlledFocusVisibleResult {\n  isFocusVisible: boolean;\n  activateFocusVisible: () => void;\n}\n\n/**\n * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,\n * but also returns activateFocusVisible function that manually switches the state to true\n * until the original flag is switched to false.\n */\nexport function useControlledFocusVisible(): UseControlledFocusVisibleResult {\n  // Get the original focus visible state from react-aria\n  const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});\n\n  // Get the shared store state and setter\n  const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();\n\n  // Reset manual activation when original focus visible becomes false\n  useEffect(() => {\n    if (!originalIsFocusVisible && isManuallyActivated) {\n      setStore({ isManuallyActivated: false });\n    }\n  }, [originalIsFocusVisible, isManuallyActivated, setStore]);\n\n  // Function to manually activate focus visible state\n  const activateFocusVisible = () => {\n    setStore({ isManuallyActivated: true });\n  };\n\n  // Return combined state: true if either original is true OR manually activated\n  return {\n    isFocusVisible: originalIsFocusVisible || isManuallyActivated,\n    activateFocusVisible,\n  };\n}\n"],"mappings":";;;;;;AAUA,MAAM,iCACJ,kBAA+C,0BAA0B,EACvE,qBAAqB,OACtB,CAAC;;;;;;AAYJ,SAAgB,4BAA6D;CAE3E,MAAM,EAAE,gBAAgB,2BAA2B,gBAAgB,EAAE,CAAC;CAGtE,MAAM,CAAC,EAAE,uBAAuB,YAAY,gCAAgC;AAG5E,iBAAgB;AACd,MAAI,CAAC,0BAA0B,oBAC7B,UAAS,EAAE,qBAAqB,OAAO,CAAC;IAEzC;EAAC;EAAwB;EAAqB;EAAS,CAAC;CAG3D,MAAM,6BAA6B;AACjC,WAAS,EAAE,qBAAqB,MAAM,CAAC;;AAIzC,QAAO;EACL,gBAAgB,0BAA0B;EAC1C;EACD"}

package/dist/utils/react/useEventBus.d.ts

@@ -0,0 +1,92 @@
+
+import React, { ReactNode } from "react";
+
+//#region src/utils/react/useEventBus.d.ts
+type EventBusListener<T = any> = (data: T) => void;
+interface EventBusContextValue {
+  emit: <T = any>(event: string, data?: T) => void;
+  emitSync: <T = any>(event: string, data?: T) => void;
+  on: <T = any>(event: string, listener: EventBusListener<T>) => () => void;
+  off: <T = any>(event: string, listener: EventBusListener<T>) => void;
+}
+interface EventBusProviderProps {
+  children: ReactNode;
+}
+/**
+ * EventBusProvider provides a global event system for the application.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <EventBusProvider>
+ *       <YourComponents />
+ *     </EventBusProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function EventBusProvider({
+  children
+}: EventBusProviderProps): React.FunctionComponentElement<React.ProviderProps<EventBusContextValue | null>>;
+/**
+ * Hook to access the event bus functionality.
+ * Must be used within an EventBusProvider.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const { emit, emitSync, on } = useEventBus();
+ *
+ *   const handleClick = () => {
+ *     emit('user-action', { type: 'click', target: 'button' });
+ *   };
+ *
+ *   const handleSyncAction = () => {
+ *     emitSync('sync-action', { immediate: true });
+ *   };
+ *
+ *   useEffect(() => {
+ *     const unsubscribe = on('data-updated', (data) => {
+ *       console.log('Data updated:', data);
+ *     });
+ *
+ *     return unsubscribe;
+ *   }, [on]);
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleClick}>Async Event</button>
+ *       <button onClick={handleSyncAction}>Sync Event</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useEventBus(): EventBusContextValue;
+/**
+ * Convenience hook for subscribing to events with automatic cleanup.
+ * The listener will be automatically unsubscribed when the component unmounts
+ * or when the dependencies change.
+ *
+ * @param event - The event name to listen for
+ * @param listener - The callback function to execute when the event is emitted
+ * @param deps - Dependency array for the effect (similar to useEffect)
+ *
+ * @example
+ * ```tsx
+ * function NotificationComponent() {
+ *   const [message, setMessage] = useState('');
+ *
+ *   useEventListener('notification', (data) => {
+ *     setMessage(data.message);
+ *   }, []);
+ *
+ *   return <div>{message}</div>;
+ * }
+ * ```
+ */
+declare function useEventListener<T = any>(event: string, listener: EventBusListener<T>, deps?: React.DependencyList): void;
+//#endregion
+export { EventBusContextValue, EventBusListener, EventBusProvider, useEventBus, useEventListener };
+//# sourceMappingURL=useEventBus.d.ts.map

package/dist/utils/react/useEventBus.js

@@ -0,0 +1,125 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
+
+//#region src/utils/react/useEventBus.ts
+const EventBusContext = createContext(null);
+/**
+* EventBusProvider provides a global event system for the application.
+*
+* @example
+* ```tsx
+* function App() {
+*   return (
+*     <EventBusProvider>
+*       <YourComponents />
+*     </EventBusProvider>
+*   );
+* }
+* ```
+*/
+function EventBusProvider({ children }) {
+	const listeners = useRef({});
+	const off = useCallback((event, listener) => {
+		const eventListeners = listeners.current[event];
+		if (eventListeners) {
+			listeners.current[event] = eventListeners.filter((l) => l !== listener);
+			if (listeners.current[event].length === 0) delete listeners.current[event];
+		}
+	}, []);
+	const emitSync = useCallback((event, data) => {
+		const eventListeners = listeners.current[event];
+		if (eventListeners) eventListeners.forEach((listener) => listener(data));
+	}, []);
+	const contextValue = {
+		emit: useCallback((event, data) => {
+			setTimeout(() => {
+				emitSync(event, data);
+			}, 0);
+		}, []),
+		emitSync,
+		on: useCallback((event, listener) => {
+			if (!listeners.current[event]) listeners.current[event] = [];
+			listeners.current[event].push(listener);
+			return () => {
+				off(event, listener);
+			};
+		}, [off]),
+		off
+	};
+	return React.createElement(EventBusContext.Provider, { value: contextValue }, children);
+}
+/**
+* Hook to access the event bus functionality.
+* Must be used within an EventBusProvider.
+*
+* @example
+* ```tsx
+* function Component() {
+*   const { emit, emitSync, on } = useEventBus();
+*
+*   const handleClick = () => {
+*     emit('user-action', { type: 'click', target: 'button' });
+*   };
+*
+*   const handleSyncAction = () => {
+*     emitSync('sync-action', { immediate: true });
+*   };
+*
+*   useEffect(() => {
+*     const unsubscribe = on('data-updated', (data) => {
+*       console.log('Data updated:', data);
+*     });
+*
+*     return unsubscribe;
+*   }, [on]);
+*
+*   return (
+*     <div>
+*       <button onClick={handleClick}>Async Event</button>
+*       <button onClick={handleSyncAction}>Sync Event</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useEventBus() {
+	const context = useContext(EventBusContext);
+	if (!context) throw new Error("useEventBus must be used within an EventBusProvider");
+	return context;
+}
+/**
+* Convenience hook for subscribing to events with automatic cleanup.
+* The listener will be automatically unsubscribed when the component unmounts
+* or when the dependencies change.
+*
+* @param event - The event name to listen for
+* @param listener - The callback function to execute when the event is emitted
+* @param deps - Dependency array for the effect (similar to useEffect)
+*
+* @example
+* ```tsx
+* function NotificationComponent() {
+*   const [message, setMessage] = useState('');
+*
+*   useEventListener('notification', (data) => {
+*     setMessage(data.message);
+*   }, []);
+*
+*   return <div>{message}</div>;
+* }
+* ```
+*/
+function useEventListener(event, listener, deps = []) {
+	const { on } = useEventBus();
+	useEffect(() => {
+		return on(event, listener);
+	}, [
+		event,
+		on,
+		...deps
+	]);
+}
+
+//#endregion
+export { EventBusProvider, useEventBus, useEventListener };
+//# sourceMappingURL=useEventBus.js.map

package/dist/utils/react/useEventBus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventBus.js","names":[],"sources":["../../../src/utils/react/useEventBus.ts"],"sourcesContent":["import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type EventBusListener<T = any> = (data: T) => void;\n\nexport interface EventBusContextValue {\n  emit: <T = any>(event: string, data?: T) => void;\n  emitSync: <T = any>(event: string, data?: T) => void;\n  on: <T = any>(event: string, listener: EventBusListener<T>) => () => void;\n  off: <T = any>(event: string, listener: EventBusListener<T>) => void;\n}\n\nconst EventBusContext = createContext<EventBusContextValue | null>(null);\n\nexport interface EventBusProviderProps {\n  children: ReactNode;\n}\n\n/**\n * EventBusProvider provides a global event system for the application.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <EventBusProvider>\n *       <YourComponents />\n *     </EventBusProvider>\n *   );\n * }\n * ```\n */\nexport function EventBusProvider({ children }: EventBusProviderProps) {\n  const listeners = useRef<Record<string, EventBusListener[]>>({});\n\n  const off = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      const eventListeners = listeners.current[event];\n      if (eventListeners) {\n        listeners.current[event] = eventListeners.filter((l) => l !== listener);\n\n        // Clean up empty event arrays\n        if (listeners.current[event].length === 0) {\n          delete listeners.current[event];\n        }\n      }\n    },\n    [],\n  );\n\n  const emitSync = useCallback(<T = any>(event: string, data?: T) => {\n    const eventListeners = listeners.current[event];\n    if (eventListeners) {\n      eventListeners.forEach((listener) => listener(data));\n    }\n  }, []);\n\n  const emit = useCallback(<T = any>(event: string, data?: T) => {\n    // Use setTimeout to ensure async emission after current render cycle\n    setTimeout(() => {\n      emitSync(event, data);\n    }, 0);\n  }, []);\n\n  const on = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      if (!listeners.current[event]) {\n        listeners.current[event] = [];\n      }\n      listeners.current[event].push(listener);\n\n      // Return cleanup function\n      return () => {\n        off(event, listener);\n      };\n    },\n    [off],\n  );\n\n  const contextValue: EventBusContextValue = {\n    emit,\n    emitSync,\n    on,\n    off,\n  };\n\n  return React.createElement(\n    EventBusContext.Provider,\n    { value: contextValue },\n    children,\n  );\n}\n\n/**\n * Hook to access the event bus functionality.\n * Must be used within an EventBusProvider.\n *\n * @example\n * ```tsx\n * function Component() {\n *   const { emit, emitSync, on } = useEventBus();\n *\n *   const handleClick = () => {\n *     emit('user-action', { type: 'click', target: 'button' });\n *   };\n *\n *   const handleSyncAction = () => {\n *     emitSync('sync-action', { immediate: true });\n *   };\n *\n *   useEffect(() => {\n *     const unsubscribe = on('data-updated', (data) => {\n *       console.log('Data updated:', data);\n *     });\n *\n *     return unsubscribe;\n *   }, [on]);\n *\n *   return (\n *     <div>\n *       <button onClick={handleClick}>Async Event</button>\n *       <button onClick={handleSyncAction}>Sync Event</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useEventBus(): EventBusContextValue {\n  const context = useContext(EventBusContext);\n\n  if (!context) {\n    throw new Error('useEventBus must be used within an EventBusProvider');\n  }\n\n  return context;\n}\n\n/**\n * Convenience hook for subscribing to events with automatic cleanup.\n * The listener will be automatically unsubscribed when the component unmounts\n * or when the dependencies change.\n *\n * @param event - The event name to listen for\n * @param listener - The callback function to execute when the event is emitted\n * @param deps - Dependency array for the effect (similar to useEffect)\n *\n * @example\n * ```tsx\n * function NotificationComponent() {\n *   const [message, setMessage] = useState('');\n *\n *   useEventListener('notification', (data) => {\n *     setMessage(data.message);\n *   }, []);\n *\n *   return <div>{message}</div>;\n * }\n * ```\n */\nexport function useEventListener<T = any>(\n  event: string,\n  listener: EventBusListener<T>,\n  deps: React.DependencyList = [],\n) {\n  const { on } = useEventBus();\n\n  useEffect(() => {\n    const unsubscribe = on(event, listener);\n    return unsubscribe;\n  }, [event, on, ...deps]);\n}\n"],"mappings":";;;;AAkBA,MAAM,kBAAkB,cAA2C,KAAK;;;;;;;;;;;;;;;AAoBxE,SAAgB,iBAAiB,EAAE,YAAmC;CACpE,MAAM,YAAY,OAA2C,EAAE,CAAC;CAEhE,MAAM,MAAM,aACA,OAAe,aAAkC;EACzD,MAAM,iBAAiB,UAAU,QAAQ;AACzC,MAAI,gBAAgB;AAClB,aAAU,QAAQ,SAAS,eAAe,QAAQ,MAAM,MAAM,SAAS;AAGvE,OAAI,UAAU,QAAQ,OAAO,WAAW,EACtC,QAAO,UAAU,QAAQ;;IAI/B,EAAE,CACH;CAED,MAAM,WAAW,aAAsB,OAAe,SAAa;EACjE,MAAM,iBAAiB,UAAU,QAAQ;AACzC,MAAI,eACF,gBAAe,SAAS,aAAa,SAAS,KAAK,CAAC;IAErD,EAAE,CAAC;CAwBN,MAAM,eAAqC;EACzC,MAvBW,aAAsB,OAAe,SAAa;AAE7D,oBAAiB;AACf,aAAS,OAAO,KAAK;MACpB,EAAE;KACJ,EAAE,CAAC;EAmBJ;EACA,IAlBS,aACC,OAAe,aAAkC;AACzD,OAAI,CAAC,UAAU,QAAQ,OACrB,WAAU,QAAQ,SAAS,EAAE;AAE/B,aAAU,QAAQ,OAAO,KAAK,SAAS;AAGvC,gBAAa;AACX,QAAI,OAAO,SAAS;;KAGxB,CAAC,IAAI,CACN;EAMC;EACD;AAED,QAAO,MAAM,cACX,gBAAgB,UAChB,EAAE,OAAO,cAAc,EACvB,SACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCH,SAAgB,cAAoC;CAClD,MAAM,UAAU,WAAW,gBAAgB;AAE3C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,SAAgB,iBACd,OACA,UACA,OAA6B,EAAE,EAC/B;CACA,MAAM,EAAE,OAAO,aAAa;AAE5B,iBAAgB;AAEd,SADoB,GAAG,OAAO,SAAS;IAEtC;EAAC;EAAO;EAAI,GAAG;EAAK,CAAC"}

package/dist/utils/react/useId.js

@@ -0,0 +1,56 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
+import { useEffect, useRef, useState } from "react";
+import { useSSRSafeId } from "@react-aria/ssr";
+
+//#region src/utils/react/useId.tsx
+let idsUpdaterMap = /* @__PURE__ */ new Map();
+/**
+* If a default is not provided, generate an id.
+* @param defaultId - Default component id.
+*/
+function useId$1(defaultId) {
+	let isRendering = useRef(true);
+	isRendering.current = true;
+	let [value, setValue] = useState(defaultId);
+	let nextId = useRef(null);
+	let updateValue = (val) => {
+		if (!isRendering.current) setValue(val);
+		else nextId.current = val;
+	};
+	useLayoutEffect$1(() => {
+		isRendering.current = false;
+	});
+	useEffect(() => {
+		let newId = nextId.current;
+		if (newId) {
+			setValue(newId);
+			nextId.current = null;
+		}
+	}, [setValue, updateValue]);
+	let res = useSSRSafeId(value);
+	idsUpdaterMap.set(res, updateValue);
+	return res;
+}
+/**
+* Merges two ids.
+* Different ids will trigger a side-effect and re-render components hooked up with `useId`.
+*/
+function mergeIds(idA, idB) {
+	if (idA === idB) return idA;
+	let setIdA = idsUpdaterMap.get(idA);
+	if (setIdA) {
+		setIdA(idB);
+		return idB;
+	}
+	let setIdB = idsUpdaterMap.get(idB);
+	if (setIdB) {
+		setIdB(idA);
+		return idA;
+	}
+	return idB;
+}
+
+//#endregion
+export { mergeIds, useId$1 as useId };
+//# sourceMappingURL=useId.js.map

package/dist/utils/react/useId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.js","names":["useId"],"sources":["../../../src/utils/react/useId.tsx"],"sourcesContent":["import { useSSRSafeId } from '@react-aria/ssr';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nlet idsUpdaterMap = new Map();\n\n/**\n * If a default is not provided, generate an id.\n * @param defaultId - Default component id.\n */\nexport function useId(defaultId?) {\n  let isRendering = useRef(true);\n\n  isRendering.current = true;\n\n  let [value, setValue] = useState(defaultId);\n  let nextId = useRef(null);\n\n  // don't memo this, we want it new each render so that the Effects always run\n\n  let updateValue = (val) => {\n    if (!isRendering.current) {\n      setValue(val);\n    } else {\n      nextId.current = val;\n    }\n  };\n\n  useLayoutEffect(() => {\n    isRendering.current = false;\n  });\n\n  useEffect(() => {\n    let newId = nextId.current;\n    if (newId) {\n      setValue(newId);\n      nextId.current = null;\n    }\n  }, [setValue, updateValue]);\n\n  let res = useSSRSafeId(value);\n  idsUpdaterMap.set(res, updateValue);\n  return res;\n}\n\n/**\n * Merges two ids.\n * Different ids will trigger a side-effect and re-render components hooked up with `useId`.\n */\nexport function mergeIds(idA, idB) {\n  if (idA === idB) {\n    return idA;\n  }\n\n  let setIdA = idsUpdaterMap.get(idA);\n  if (setIdA) {\n    setIdA(idB);\n    return idB;\n  }\n\n  let setIdB = idsUpdaterMap.get(idB);\n  if (setIdB) {\n    setIdB(idA);\n    return idA;\n  }\n\n  return idB;\n}\n\n/**\n * Used to generate an id, and after render, check if that id is rendered so we know\n * if we can use it in places such as labelledby.\n */\nexport function useSlotId() {\n  let [id, setId] = useState<string | null>(useId());\n  useLayoutEffect(() => {\n    if (id) {\n      let setCurr = idsUpdaterMap.get(id);\n      if (setCurr && !document.getElementById(id)) {\n        setId(null);\n      }\n    }\n  }, [id]);\n\n  return id;\n}\n"],"mappings":";;;;;;AAKA,IAAI,gCAAgB,IAAI,KAAK;;;;;AAM7B,SAAgBA,QAAM,WAAY;CAChC,IAAI,cAAc,OAAO,KAAK;AAE9B,aAAY,UAAU;CAEtB,IAAI,CAAC,OAAO,YAAY,SAAS,UAAU;CAC3C,IAAI,SAAS,OAAO,KAAK;CAIzB,IAAI,eAAe,QAAQ;AACzB,MAAI,CAAC,YAAY,QACf,UAAS,IAAI;MAEb,QAAO,UAAU;;AAIrB,yBAAsB;AACpB,cAAY,UAAU;GACtB;AAEF,iBAAgB;EACd,IAAI,QAAQ,OAAO;AACnB,MAAI,OAAO;AACT,YAAS,MAAM;AACf,UAAO,UAAU;;IAElB,CAAC,UAAU,YAAY,CAAC;CAE3B,IAAI,MAAM,aAAa,MAAM;AAC7B,eAAc,IAAI,KAAK,YAAY;AACnC,QAAO;;;;;;AAOT,SAAgB,SAAS,KAAK,KAAK;AACjC,KAAI,QAAQ,IACV,QAAO;CAGT,IAAI,SAAS,cAAc,IAAI,IAAI;AACnC,KAAI,QAAQ;AACV,SAAO,IAAI;AACX,SAAO;;CAGT,IAAI,SAAS,cAAc,IAAI,IAAI;AACnC,KAAI,QAAQ;AACV,SAAO,IAAI;AACX,SAAO;;AAGT,QAAO"}

package/dist/utils/react/useIsDarwin.js

@@ -0,0 +1,36 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useEffect, useState } from "react";
+
+//#region src/utils/react/useIsDarwin.ts
+/**
+* useIsDarwin
+* ----------
+* @returns true  – if the browser is running on macOS / iOS
+*          false – otherwise (Windows, Linux, Android…)
+*
+* • Safe to call during server-side rendering: it defaults to `true`
+*   until it can really inspect the client.
+* • Uses the modern UA-Client-Hints platform field where available,
+*   then falls back to navigator.platform, then navigator.userAgent.
+*/
+function useIsDarwin(defaultValue = true) {
+	const [isDarwin, setIsDarwin] = useState(defaultValue);
+	useEffect(() => {
+		if (typeof navigator === "undefined") return;
+		const chPlatform = navigator.userAgentData?.platform;
+		if (chPlatform) {
+			setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));
+			return;
+		}
+		if (navigator.platform) {
+			setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));
+			return;
+		}
+		setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));
+	}, []);
+	return isDarwin;
+}
+
+//#endregion
+export { useIsDarwin };
+//# sourceMappingURL=useIsDarwin.js.map

package/dist/utils/react/useIsDarwin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsDarwin.js","names":[],"sources":["../../../src/utils/react/useIsDarwin.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * useIsDarwin\n * ----------\n * @returns true  – if the browser is running on macOS / iOS\n *          false – otherwise (Windows, Linux, Android…)\n *\n * • Safe to call during server-side rendering: it defaults to `true`\n *   until it can really inspect the client.\n * • Uses the modern UA-Client-Hints platform field where available,\n *   then falls back to navigator.platform, then navigator.userAgent.\n */\nexport function useIsDarwin(defaultValue: boolean = true): boolean {\n  const [isDarwin, setIsDarwin] = useState<boolean>(defaultValue);\n\n  useEffect(() => {\n    if (typeof navigator === 'undefined') return; // ← running on the server\n\n    // 1 — Prefer UA-CH (Chromium 89+, Edge 94+, Arc, Opera, Android Chrome)\n    const chPlatform = (navigator as any).userAgentData?.platform;\n    if (chPlatform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));\n      return;\n    }\n\n    // 2 — Safari & Firefox: navigator.platform is still reliable\n    if (navigator.platform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));\n      return;\n    }\n\n    // 3 — Last-ditch for very old browsers\n    setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));\n  }, []);\n\n  return isDarwin;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,YAAY,eAAwB,MAAe;CACjE,MAAM,CAAC,UAAU,eAAe,SAAkB,aAAa;AAE/D,iBAAgB;AACd,MAAI,OAAO,cAAc,YAAa;EAGtC,MAAM,aAAc,UAAkB,eAAe;AACrD,MAAI,YAAY;AACd,eAAY,wBAAwB,KAAK,WAAW,CAAC;AACrD;;AAIF,MAAI,UAAU,UAAU;AACtB,eAAY,wBAAwB,KAAK,UAAU,SAAS,CAAC;AAC7D;;AAIF,cAAY,wBAAwB,KAAK,UAAU,UAAU,CAAC;IAC7D,EAAE,CAAC;AAEN,QAAO"}

package/dist/utils/react/useKeySymbols.js

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useIsDarwin } from "./useIsDarwin.js";
+import { useMemo } from "react";
+
+//#region src/utils/react/useKeySymbols.ts
+const COMMON = {
+	esc: "Esc",
+	escape: "Esc",
+	enter: "⏎",
+	return: "⏎",
+	space: "␣",
+	backspace: "⌫",
+	delete: "⌦",
+	up: "↑",
+	arrowup: "↑",
+	down: "↓",
+	arrowdown: "↓",
+	left: "←",
+	arrowleft: "←",
+	right: "→",
+	arrowright: "→"
+};
+const MAC = {
+	mod: "⌘",
+	meta: "⌘",
+	cmd: "⌘",
+	command: "⌘",
+	ctrl: "⌃",
+	control: "⌃",
+	alt: "⌥",
+	option: "⌥",
+	shift: "⇧"
+};
+const PC = {
+	mod: "Ctrl",
+	ctrl: "Ctrl",
+	control: "Ctrl",
+	meta: "Win",
+	win: "Win",
+	windows: "Win",
+	cmd: "Win",
+	command: "Win",
+	alt: "⎇",
+	option: "⎇",
+	shift: "⇧"
+};
+/**
+* useKeySymbols
+* -------------
+* Turns an author string such as
+*   "mod+k, ctrl+k"
+* into
+*   [["⌘", "K"], ["Ctrl", "K"]]
+*/
+function useKeySymbols(combo) {
+	const modifiers = useIsDarwin() ? MAC : PC;
+	return useMemo(() => {
+		/** split on commas, trim each alternative */
+		return combo.split(",").map((raw) => raw.trim().toLowerCase()).filter(Boolean).map((alternative) => alternative.split("+").map((part) => {
+			const key = part.trim();
+			return modifiers[key] ?? COMMON[key] ?? part.toUpperCase();
+		}));
+	}, [combo, modifiers]);
+}
+
+//#endregion
+export { useKeySymbols };
+//# sourceMappingURL=useKeySymbols.js.map

package/dist/utils/react/useKeySymbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeySymbols.js","names":[],"sources":["../../../src/utils/react/useKeySymbols.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDarwin } from './useIsDarwin';\n\n/* symbols that are identical on every OS */\nconst COMMON: Record<string, string> = {\n  esc: 'Esc',\n  escape: 'Esc',\n  enter: '⏎',\n  return: '⏎',\n  space: '␣',\n  backspace: '⌫',\n  delete: '⌦',\n  up: '↑',\n  arrowup: '↑',\n  down: '↓',\n  arrowdown: '↓',\n  left: '←',\n  arrowleft: '←',\n  right: '→',\n  arrowright: '→',\n};\n\n/* modifiers for macOS / iOS */\nconst MAC: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  cmd: '⌘',\n  command: '⌘',\n  ctrl: '⌃',\n  control: '⌃',\n  alt: '⌥',\n  option: '⌥',\n  shift: '⇧',\n};\n\n/* modifiers for Windows / Linux */\nconst PC: Record<string, string> = {\n  mod: 'Ctrl',\n  ctrl: 'Ctrl',\n  control: 'Ctrl',\n  meta: 'Win',\n  win: 'Win',\n  windows: 'Win',\n  cmd: 'Win',\n  command: 'Win',\n  alt: '⎇',\n  option: '⎇',\n  shift: '⇧',\n};\n\n/**\n * useKeySymbols\n * -------------\n * Turns an author string such as\n *   \"mod+k, ctrl+k\"\n * into\n *   [[\"⌘\", \"K\"], [\"Ctrl\", \"K\"]]\n */\nexport function useKeySymbols(combo: string): string[][] {\n  const isDarwin = useIsDarwin(); // ⌘ by default during SSR\n  const modifiers = isDarwin ? MAC : PC;\n\n  return useMemo(() => {\n    /** split on commas, trim each alternative */\n    return combo\n      .split(',')\n      .map((raw) => raw.trim().toLowerCase())\n      .filter(Boolean) // drop empty fragments\n      .map((alternative) =>\n        alternative.split('+').map((part) => {\n          const key = part.trim();\n          return (\n            modifiers[key] ?? // platform-specific modifier\n            COMMON[key] ?? // shared glyphs\n            part.toUpperCase() // plain key\n          );\n        }),\n      );\n  }, [combo, modifiers]);\n}\n"],"mappings":";;;;;AAKA,MAAM,SAAiC;CACrC,KAAK;CACL,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACb;AAGD,MAAM,MAA8B;CAClC,KAAK;CACL,MAAM;CACN,KAAK;CACL,SAAS;CACT,MAAM;CACN,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACR;AAGD,MAAM,KAA6B;CACjC,KAAK;CACL,MAAM;CACN,SAAS;CACT,MAAM;CACN,KAAK;CACL,SAAS;CACT,KAAK;CACL,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACR;;;;;;;;;AAUD,SAAgB,cAAc,OAA2B;CAEvD,MAAM,YADW,aAAa,GACD,MAAM;AAEnC,QAAO,cAAc;;AAEnB,SAAO,MACJ,MAAM,IAAI,CACV,KAAK,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,CACtC,OAAO,QAAQ,CACf,KAAK,gBACJ,YAAY,MAAM,IAAI,CAAC,KAAK,SAAS;GACnC,MAAM,MAAM,KAAK,MAAM;AACvB,UACE,UAAU,QACV,OAAO,QACP,KAAK,aAAa;IAEpB,CACH;IACF,CAAC,OAAO,UAAU,CAAC"}

package/dist/utils/react/useLayoutEffect.d.ts

@@ -0,0 +1,8 @@
+
+import * as React$1 from "react";
+
+//#region src/utils/react/useLayoutEffect.d.ts
+declare const useLayoutEffect$1: typeof React$1.useEffect;
+//#endregion
+export { useLayoutEffect$1 as useLayoutEffect };
+//# sourceMappingURL=useLayoutEffect.d.ts.map

package/dist/utils/react/useLayoutEffect.js

@@ -0,0 +1,9 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import * as React$1 from "react";
+
+//#region src/utils/react/useLayoutEffect.tsx
+const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
+
+//#endregion
+export { useLayoutEffect$1 as useLayoutEffect };
+//# sourceMappingURL=useLayoutEffect.js.map

package/dist/utils/react/useLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEffect.js","names":["useLayoutEffect","React"],"sources":["../../../src/utils/react/useLayoutEffect.tsx"],"sourcesContent":["import * as React from 'react';\n\n// During SSR, React emits a warning when calling useLayoutEffect.\n// Since neither useLayoutEffect nor useEffect run on the server,\n// we can suppress this by replacing it with a noop on the server.\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n"],"mappings":";;;;AAKA,MAAaA,oBACX,OAAO,WAAW,cAAcC,QAAM,kBAAkBA,QAAM"}

package/dist/utils/react/useLocalStorage.d.ts

@@ -0,0 +1,37 @@
+
+//#region src/utils/react/useLocalStorage.d.ts
+/** Like React.setState: either a value or a function of the previous value */
+type Updater<T> = T | ((prev: T) => T);
+/**
+ * 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, {});
+ * ```
+ */
+declare function useLocalStorage<T>(key: string | null | undefined, initialValue: T | (() => T)): readonly [T, (value: Updater<T>) => void];
+//#endregion
+export { useLocalStorage };
+//# sourceMappingURL=useLocalStorage.d.ts.map