@cntyclub/ui-react 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/sidebar.tsx

@@ -58,6 +58,7 @@ function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
+  persistKey,
   className,
   style,
   children,
@@ -66,6 +67,14 @@ function SidebarProvider({
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Remember the expanded/collapsed state in `localStorage` under this key and
+   * restore it on the next load (desktop rail only; the mobile sheet is always
+   * closed on load). Opt-in — omit to keep the sidebar un-persisted. Ignored in
+   * controlled mode (when `open` is provided). The restore runs before first
+   * paint, so there's no expand→collapse flash.
+   */
+  persistKey?: string;
 }) {
   // Self-contained breakpoint check (md = 48rem). Resolved in a layout effect
   // before the first paint so the sidebar never flashes from mobile to desktop.
@@ -93,16 +102,38 @@ function SidebarProvider({
       }
 
       // Persist the sidebar state. document.cookie works in every browser
-      // (cookieStore is Chromium-only and throws elsewhere).
+      // (cookieStore is Chromium-only and throws elsewhere). When `persistKey`
+      // is set we also mirror it to localStorage so a client-only app (no SSR
+      // cookie read) can restore it on load.
       try {
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        if (persistKey) {
+          window.localStorage.setItem(persistKey, openState ? "true" : "false");
+        }
       } catch {
         // Ignore — persistence is best-effort.
       }
     },
-    [setOpenProp, open],
+    [setOpenProp, open, persistKey],
   );
 
+  // Restore the persisted (localStorage) open state on mount — uncontrolled use
+  // only. Runs in a layout effect so the restore lands before first paint (no
+  // expand→collapse flash). SSR renders `defaultOpen` and the client's first
+  // render matches it, so this reconciles afterwards without a hydration
+  // mismatch.
+  useIsomorphicLayoutEffect(() => {
+    if (!persistKey || openProp !== undefined) return;
+    try {
+      const stored = window.localStorage.getItem(persistKey);
+      if (stored === "true" || stored === "false") {
+        _setOpen(stored === "true");
+      }
+    } catch {
+      // Ignore — restore is best-effort.
+    }
+  }, [persistKey, openProp]);
+
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);