@zentauri-ui/zentauri-components 1.4.6 → 1.4.7

package/src/charts/shared/variants.ts

@@ -0,0 +1,87 @@
+import { cva } from "class-variance-authority";
+
+export const chartVariants = cva(
+  [
+    "relative w-full min-w-0 overflow-hidden rounded-xl",
+    "h-[var(--chart-height)] min-h-64 sm:min-h-72 md:min-h-80",
+    "[&_.recharts-default-tooltip]:rounded-lg [&_.recharts-default-tooltip]:border [&_.recharts-default-tooltip]:border-slate-200",
+    "[&_.recharts-default-tooltip]:bg-white/95 [&_.recharts-default-tooltip]:shadow-lg",
+    "[&_.recharts-default-tooltip]:text-slate-900",
+  ],
+  {
+    variants: {
+      appearance: {
+        default:
+          "bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        muted:
+          "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        outline:
+          "border border-slate-200 bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        glass:
+          "border border-white/15 bg-white/10 text-slate-100 backdrop-blur-md [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        sky: "bg-sky-50 text-sky-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        emerald:
+          "bg-emerald-50 text-emerald-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        violet:
+          "bg-violet-50 text-violet-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        amber:
+          "bg-amber-50 text-amber-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        rose: "bg-rose-50 text-rose-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        slate:
+          "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        gray: "bg-gray-50 text-gray-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        indigo:
+          "bg-indigo-50 text-indigo-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        "gradient-cyan-violet":
+          "bg-gradient-to-r from-cyan-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-emerald-violet":
+          "bg-gradient-to-r from-emerald-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-amber-rose":
+          "bg-gradient-to-r from-amber-500 to-rose-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-slate-gray":
+          "bg-gradient-to-r from-slate-500 to-gray-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-indigo-purple":
+          "bg-gradient-to-r from-indigo-500 to-purple-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-cyan-blue":
+          "bg-gradient-to-r from-cyan-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-emerald-blue":
+          "bg-gradient-to-r from-emerald-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-amber-blue":
+          "bg-gradient-to-r from-amber-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+      },
+      density: {
+        compact: "p-2 sm:p-3",
+        comfortable: "p-3 sm:p-4",
+        spacious: "p-4 sm:p-5 md:p-6",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      density: "comfortable",
+    },
+  },
+);
+
+export const chartPalette = {
+  cyan: { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  emerald: { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  violet: { stroke: "#7c3aed", fill: "#c4b5fd", textColor: "#7c3aed" },
+  amber: { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+  rose: { stroke: "#e11d48", fill: "#fda4af", textColor: "#e11d48" },
+  slate: { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
+  gray: { stroke: "#6b7280", fill: "#d1d5db", textColor: "#6b7280" },
+  white: { stroke: "#ffffff", fill: "#ffffff", textColor: "#ffffff" },
+  indigo: { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
+  "gradient-cyan-violet": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  "gradient-emerald-violet": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  "gradient-amber-rose": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+  "gradient-slate-gray": { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
+  "gradient-indigo-purple": { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
+  "gradient-cyan-blue": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  "gradient-emerald-blue": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  "gradient-amber-blue": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+} as const;
+
+export const chartColorValues = Object.keys(chartPalette) as Array<
+  keyof typeof chartPalette
+>;

package/src/hooks/index.ts

@@ -23,7 +23,10 @@ export {
   type UseDisclosureParams,
   type UseDisclosureResult,
 } from "./useDisclosure";
-export { useDocumentTitle, type UseDocumentTitleParams } from "./useDocumentTitle";
+export {
+  useDocumentTitle,
+  type UseDocumentTitleParams,
+} from "./useDocumentTitle";
 export { useHover } from "./useHover";
 export { useInView, type UseInViewParams } from "./useInView";
 export {
@@ -42,7 +45,10 @@ export {
 } from "./usePrefersColorScheme";
 export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
 export { useResizeObserver, type ElementSize } from "./useResizeObserver";
-export { useSessionStorage, type UseSessionStorageResult } from "./useSessionStorage";
+export {
+  useSessionStorage,
+  type UseSessionStorageResult,
+} from "./useSessionStorage";
 export { useThrottledCallback } from "./useThrottledCallback";
 export { useToggle } from "./useToggle";
 export { useWindowSize, type WindowSize } from "./useWindowSize";

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -4,10 +4,7 @@ import type { RefObject } from "react";
 import { Dispatch, SetStateAction, useEffect } from "react";
 
 /** DOM events that can represent an “outside” press for closing overlays. */
-export type ClickOutsideEventType =
-  | "mousedown"
-  | "pointerdown"
-  | "touchstart";
+export type ClickOutsideEventType = "mousedown" | "pointerdown" | "touchstart";
 
 export type UseClickOutsideParams = {
   /** Called with `false` when a qualifying event target is outside `ref.current`. */

package/src/hooks/useClipboard/useClipboard.test.ts

@@ -66,7 +66,9 @@ describe("useClipboard", () => {
       const ok = await result.current.copy("z");
       expect(ok).toBe(false);
     });
-    expect(result.current.error?.message).toBe("Clipboard API is not available");
+    expect(result.current.error?.message).toBe(
+      "Clipboard API is not available",
+    );
     expect(result.current.copied).toBe(false);
   });
 

package/src/hooks/useClipboard/useClipboard.ts

@@ -56,8 +56,7 @@ export function useClipboard(resetDelay = 2000): UseClipboardResult {
         }
         return true;
       } catch (cause) {
-        const err =
-          cause instanceof Error ? cause : new Error(String(cause));
+        const err = cause instanceof Error ? cause : new Error(String(cause));
         setError(err);
         return false;
       }

package/src/hooks/useDisclosure/useDisclosure.test.ts

@@ -48,8 +48,7 @@ describe("useDisclosure", () => {
   it("should be controlled when open prop is defined", () => {
     const onOpenChange = vi.fn();
     const { result, rerender } = renderHook(
-      ({ open }: { open: boolean }) =>
-        useDisclosure({ open, onOpenChange }),
+      ({ open }: { open: boolean }) => useDisclosure({ open, onOpenChange }),
       { initialProps: { open: false } },
     );
     expect(result.current.isOpen).toBe(false);

package/src/hooks/useDocumentTitle/useDocumentTitle.test.ts

@@ -6,9 +6,7 @@ import { useDocumentTitle } from "./useDocumentTitle";
 describe("useDocumentTitle", () => {
   it("should set document title from title prop", () => {
     document.title = "Original";
-    const { unmount } = renderHook(() =>
-      useDocumentTitle({ title: "Page A" }),
-    );
+    const { unmount } = renderHook(() => useDocumentTitle({ title: "Page A" }));
     expect(document.title).toBe("Page A");
     unmount();
     expect(document.title).toBe("Original");

package/src/hooks/useFocusManagement/useFocusManagement.test.tsx

@@ -42,4 +42,12 @@ describe("useFocusManagement", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
+
+  it("should return focus inside the overlay when focus moves outside without Tab", () => {
+    render(<Modal initialOpen />);
+    const outsideButton = screen.getByTestId("after");
+    outsideButton.focus();
+    expect(outsideButton).not.toHaveFocus();
+    expect(screen.getByRole("button", { name: "first" })).toHaveFocus();
+  });
 });

package/src/hooks/useFocusManagement/useFocusManagement.ts

@@ -1,39 +1,60 @@
 "use client";
 
 import type { RefObject } from "react";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { useBodyScrollLock } from "../useBodyScrollLock";
 
-const FOCUSABLE_SELECTOR =
-  'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+function getFocusableElements(
+  root: HTMLElement,
+  focusableSelector: string,
+): HTMLElement[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(focusableSelector),
+  ).filter((element) => {
+    if (element.getAttribute("aria-hidden") === "true") {
+      return false;
+    }
+    if (typeof window === "undefined") {
+      return true;
+    }
+    const style = getComputedStyle(element);
+    if (style.visibility === "hidden" || style.display === "none") {
+      return false;
+    }
+    return true;
+  });
+}
 
 /**
- * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, and focus trapping.
- *
- * - Delegates scroll locking to {@link useBodyScrollLock} while `open` is true.
- * - Listens for `Escape` on `window` and calls `setOpen(false)`.
- * - When `open` becomes true, focuses the first visible focusable inside `contentRef`, or the container itself.
- * - Traps focus within `contentRef` via a capturing `focusin` listener on `document` that redirects focus back inside.
- * - On close/unmount of the open effect, restores focus to the element that was focused before the trap ran.
- *
- * @param params.open - Whether the overlay is visible.
- * @param params.setOpen - Setter used for Escape and cleanup paths.
- * @param params.contentRef - Root of the dialog/drawer content (must point at a focusable container or include focusables).
- * @param params.focusableSelector - Query selector for tabbable elements; defaults to a common interactive set.
+ * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, focus trapping with circular Tab cycling, and restoring focus after close.
  */
 export const useFocusManagement = ({
   open,
   setOpen,
   contentRef,
+  triggerRef,
   focusableSelector = FOCUSABLE_SELECTOR,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
-  contentRef: RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLElement | null>;
+  /** Last modal trigger control; used when focus cannot be inferred at open time. */
+  triggerRef?: RefObject<HTMLElement | null>;
   focusableSelector?: string;
 }) => {
   useBodyScrollLock(open);
 
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -47,31 +68,138 @@ export const useFocusManagement = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!open) {
       return;
     }
-    const node = contentRef.current;
-    if (!node) {
-      return;
-    }
-    const focusables = Array.from(
-      node.querySelectorAll<HTMLElement>(focusableSelector),
-    ).filter((element) => element.offsetParent !== null || element === node);
-    const target = focusables[0] ?? node;
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    target.focus();
+
+    let cancelled = false;
+    let rafId = 0;
+    let trapInstalled = false;
+
+    const detachTrap = () => {
+      if (!trapInstalled) {
+        return;
+      }
+      trapInstalled = false;
+      document.removeEventListener("focusin", handleFocusIn, true);
+      document.removeEventListener("keydown", handleTabKeyDown, true);
+    };
+
+    let trapRoot: HTMLElement | null = null;
 
     const handleFocusIn = (event: FocusEvent) => {
-      if (!node.contains(event.target as Node)) {
-        event.stopPropagation();
-        target.focus();
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      const focused = event.target;
+      if (!(focused instanceof Node)) {
+        return;
       }
+      if (node.contains(focused)) {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      const redirectTarget = list[0] ?? node;
+      redirectTarget.focus({ preventScroll: true });
     };
-    document.addEventListener("focusin", handleFocusIn);
+
+    const handleTabKeyDown = (event: KeyboardEvent) => {
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      if (list.length === 0) {
+        event.preventDefault();
+        node.focus({ preventScroll: true });
+        return;
+      }
+      const first = list[0];
+      const last = list[list.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      const activeElement = document.activeElement as HTMLElement | undefined;
+
+      if (!activeElement || !node.contains(activeElement)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus({ preventScroll: true });
+        return;
+      }
+
+      if (event.shiftKey && activeElement === first) {
+        event.preventDefault();
+        last.focus({ preventScroll: true });
+        return;
+      }
+      if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus({ preventScroll: true });
+      }
+    };
+
+    const installTrap = () => {
+      if (cancelled) {
+        return;
+      }
+      const node = contentRef.current;
+      if (!node) {
+        rafId = requestAnimationFrame(installTrap);
+        return;
+      }
+
+      trapRoot = node;
+
+      const active = document.activeElement;
+      if (
+        active instanceof HTMLElement &&
+        active !== document.body &&
+        !node.contains(active)
+      ) {
+        previousFocusRef.current = active;
+      } else {
+        previousFocusRef.current = triggerRef?.current ?? null;
+      }
+
+      const focusables = getFocusableElements(node, focusableSelector);
+      const initialFocus = focusables[0] ?? node;
+      initialFocus.focus({ preventScroll: true });
+
+      document.addEventListener("focusin", handleFocusIn, true);
+      document.addEventListener("keydown", handleTabKeyDown, true);
+      trapInstalled = true;
+    };
+
+    installTrap();
+
     return () => {
-      document.removeEventListener("focusin", handleFocusIn);
-      previouslyFocused?.focus?.();
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+      detachTrap();
+      trapRoot = null;
+
+      const fallbackTrigger =
+        triggerRef?.current &&
+        document.body.contains(triggerRef.current) &&
+        typeof triggerRef.current.focus === "function"
+          ? triggerRef.current
+          : null;
+
+      const toRestore = previousFocusRef.current ?? fallbackTrigger;
+      previousFocusRef.current = null;
+
+      if (
+        toRestore &&
+        typeof toRestore.focus === "function" &&
+        document.body.contains(toRestore)
+      ) {
+        toRestore.focus({ preventScroll: true });
+      }
     };
-  }, [contentRef, open]);
+  }, [open, contentRef, triggerRef, focusableSelector]);
 };

package/src/hooks/useInView/useInView.test.ts

@@ -34,7 +34,12 @@ describe("useInView", () => {
     expect(result.current[1]).toBe(false);
     act(() => {
       lastCallback?.(
-        [{ isIntersecting: true, target: el } as unknown as IntersectionObserverEntry],
+        [
+          {
+            isIntersecting: true,
+            target: el,
+          } as unknown as IntersectionObserverEntry,
+        ],
         {} as IntersectionObserver,
       );
     });

package/src/hooks/useLocalStorage/index.ts

@@ -1,4 +1 @@
-export {
-  useLocalStorage,
-  type UseLocalStorageResult,
-} from "./useLocalStorage";
+export { useLocalStorage, type UseLocalStorageResult } from "./useLocalStorage";

package/src/hooks/useLocalStorage/useLocalStorage.test.ts

@@ -14,27 +14,21 @@ describe("useLocalStorage", () => {
   it("should read existing JSON value on mount", () => {
     const key = `${keyPrefix}-read`;
     localStorage.setItem(key, JSON.stringify({ count: 2 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 2 });
   });
 
   it("should fall back to initialValue when key missing", () => {
     const key = `${keyPrefix}-missing`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 0 });
   });
 
   it("should persist setValue and support functional updates", () => {
     const key = `${keyPrefix}-set`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     act(() => {
       result.current[1]({ count: 5 });
     });
@@ -49,9 +43,7 @@ describe("useLocalStorage", () => {
   it("should remove key and reset to initialValue", () => {
     const key = `${keyPrefix}-remove`;
     localStorage.setItem(key, JSON.stringify({ ok: true }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { ok: false }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { ok: false }));
     const remove = result.current[2];
     act(() => {
       remove();
@@ -62,9 +54,7 @@ describe("useLocalStorage", () => {
 
   it("should reconcile when storage event fires for same key", () => {
     const key = `${keyPrefix}-storage`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -74,16 +64,14 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 99 });
   });
 
   it("should reset to initial when storage event clears key", () => {
     const key = `${keyPrefix}-cleared`;
     localStorage.setItem(key, JSON.stringify({ v: 1 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -93,7 +81,7 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 0 });
   });
 });

package/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -41,15 +41,15 @@ export function useLocalStorage<T>(
   key: string,
   initialValue: T,
 ): UseLocalStorageResult<T> {
-  const [stored, setStored] = useState<T>(() =>
-    readValue(key, initialValue),
-  );
+  const [stored, setStored] = useState<T>(() => readValue(key, initialValue));
 
   const setValue = useCallback(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.localStorage.setItem(key, JSON.stringify(next));

package/src/hooks/useMediaQuery/useMediaQuery.ts

@@ -12,10 +12,7 @@ import { useEffect, useState } from "react";
  * @param defaultValue - Value to use before hydration or when `matchMedia` is unavailable (default `false`).
  * @returns Current `matches` boolean for the query.
  */
-export function useMediaQuery(
-  query: string,
-  defaultValue = false,
-): boolean {
+export function useMediaQuery(query: string, defaultValue = false): boolean {
   const [matches, setMatches] = useState(defaultValue);
 
   useEffect(() => {

package/src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.test.ts

@@ -21,7 +21,9 @@ describe("usePrefersReducedMotion", () => {
         }) as unknown as MediaQueryList,
     );
     const { result } = renderHook(() => usePrefersReducedMotion());
-    expect(matchMediaSpy).toHaveBeenCalledWith("(prefers-reduced-motion: reduce)");
+    expect(matchMediaSpy).toHaveBeenCalledWith(
+      "(prefers-reduced-motion: reduce)",
+    );
     expect(result.current).toBe(true);
   });
 });

package/src/hooks/useResizeObserver/index.ts

@@ -1,4 +1 @@
-export {
-  useResizeObserver,
-  type ElementSize,
-} from "./useResizeObserver";
+export { useResizeObserver, type ElementSize } from "./useResizeObserver";

package/src/hooks/useSessionStorage/useSessionStorage.test.ts

@@ -19,18 +19,14 @@ describe("useSessionStorage", () => {
   it("should apply stored value from sessionStorage after mount", async () => {
     const key = `${keyPrefix}-hydrate`;
     sessionStorage.setItem(key, JSON.stringify("stored"));
-    const { result } = renderHook(() =>
-      useSessionStorage(key, "initial"),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, "initial"));
     await flushEffects();
     expect(result.current[0]).toBe("stored");
   });
 
   it("should persist setValue to sessionStorage", async () => {
     const key = `${keyPrefix}-persist`;
-    const { result } = renderHook(() =>
-      useSessionStorage(key, { n: 0 }),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, { n: 0 }));
     await flushEffects();
     act(() => {
       result.current[1]({ n: 3 });

package/src/hooks/useSessionStorage/useSessionStorage.ts

@@ -47,7 +47,9 @@ export function useSessionStorage<T>(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.sessionStorage.setItem(key, JSON.stringify(next));
@@ -74,7 +76,7 @@ export function useSessionStorage<T>(
 
   useEffect(() => {
     const next = readValue(key, initialValue);
-  
+
     setStored((prev) => {
       return JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
     });

package/src/hooks/useThrottledCallback/useThrottledCallback.ts

@@ -13,9 +13,10 @@ import { useCallback, useEffect, useRef } from "react";
  * @param intervalMs - Minimum milliseconds between invocations.
  * @returns Throttled function with the same call signature as `callback`.
  */
-export function useThrottledCallback<
-  T extends (...args: any[]) => void,
->(callback: T, intervalMs: number): T {
+export function useThrottledCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  intervalMs: number,
+): T {
   const callbackRef = useRef(callback);
   const lastRunRef = useRef(0);
 

package/src/hooks/useWindowSize/useWindowSize.ts

@@ -26,7 +26,10 @@ export function useWindowSize(): WindowSize {
 
   useEffect(() => {
     const onResize = () => {
-      setSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });
+      setSize({
+        width: window.innerWidth || 0,
+        height: window.innerHeight || 0,
+      });
     };
     onResize();
     window.addEventListener("resize", onResize);

package/src/lib/utils.ts

@@ -10,7 +10,7 @@ export const clampPage = (page: number, pageCount: number): number => {
     return 1;
   }
   return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
+};
 
 export const range = (from: number, to: number): number[] => {
   const out: number[] = [];
@@ -18,8 +18,8 @@ export const range = (from: number, to: number): number[] => {
     out.push(i);
   }
   return out;
-}
+};
 
 export const clamp = (value: number, min: number, max: number) => {
   return Math.min(max, Math.max(min, value));
-}
+};