@lerianstudio/sindarian-ui 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/components/ui/sidebar/sidebar-back-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-back-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-back-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,2CAS1C"}
+{"version":3,"file":"sidebar-back-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-back-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,2CAM1C"}

package/dist/components/ui/sidebar/sidebar-back-button.js

@@ -3,9 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarBackButton = SidebarBackButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sidebar_item_1 = require("./sidebar-item");
-const separator_1 = require("../separator");
-const sidebar_provider_1 = require("./sidebar-provider");
 function SidebarBackButton({ ...props }) {
-    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-1.5 pt-1.5", children: [(0, jsx_runtime_1.jsx)(sidebar_item_1.SidebarItem, { ...props }), isCollapsed && (0, jsx_runtime_1.jsx)(separator_1.Separator, {})] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col", children: (0, jsx_runtime_1.jsx)(sidebar_item_1.SidebarItem, { ...props }) }));
 }

package/dist/components/ui/sidebar/sidebar-components.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../lib/utils");
 const sidebar_provider_1 = require("./sidebar-provider");
 const separator_1 = require("../separator");
-const SidebarHeader = ({ className, collapsed, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-header", "data-collapsed": collapsed, className: (0, utils_1.cn)('dark:bg-cod-gray-950 flex h-[60px] w-full items-center bg-white px-4', collapsed && 'justify-center p-0', className), ...props }));
+const SidebarHeader = ({ className, collapsed, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-header", "data-collapsed": collapsed, className: (0, utils_1.cn)('dark:bg-cod-gray-950 flex w-full flex-col items-center bg-white p-4', collapsed && 'justify-center p-0', className), ...props }));
 exports.SidebarHeader = SidebarHeader;
 const SidebarContent = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-content", className: (0, utils_1.cn)('group flex flex-1 flex-col gap-4 overflow-hidden bg-white px-4 pt-4 transition-all duration-300 ease-in-out', 'group-data-[collapsed=true]/sidebar:items-center group-data-[collapsed=true]/sidebar:px-2', className), ...props }));
 exports.SidebarContent = SidebarContent;

package/dist/components/ui/sidebar/sidebar-provider.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export type SidebarContextProps = {
     isCollapsed: boolean;
     items: Record<string, boolean>;
+    setItems: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     getItemCollapsed: (key: string) => boolean;
     setItemCollapsed: (key: string, value: boolean) => void;
     toggleSidebar: () => void;

package/dist/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAMD,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,4CAuCpE,CAAA"}
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAMD,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,4CAqDpE,CAAA"}

package/dist/components/ui/sidebar/sidebar-provider.js

@@ -6,8 +6,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarProvider = exports.useSidebar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const storage_1 = require("../../../lib/storage");
 const react_1 = __importDefault(require("react"));
+const storage_1 = require("../../../lib/storage");
 const SidebarContext = react_1.default.createContext(undefined);
 const useSidebar = () => {
     const context = react_1.default.useContext(SidebarContext);
@@ -18,8 +18,9 @@ const useSidebar = () => {
 };
 exports.useSidebar = useSidebar;
 const SidebarProvider = ({ children }) => {
-    const [collapsed, setCollapsed] = react_1.default.useState((0, storage_1.getStorage)('sidebar-collapsed', false) === 'true');
-    const [items, _setItems] = react_1.default.useState((0, storage_1.getStorageObject)('sidebar-items', {}));
+    const [hydrated, setHydrated] = react_1.default.useState(false);
+    const [collapsed, setCollapsed] = react_1.default.useState(false);
+    const [items, _setItems] = react_1.default.useState({});
     const toggleSidebar = () => setCollapsed((collapsed) => !collapsed);
     const getItemCollapsed = (key) => {
         return items[key] || false;
@@ -27,15 +28,29 @@ const SidebarProvider = ({ children }) => {
     const setItemCollapsed = (key, value) => {
         _setItems((items) => ({ ...items, [key]: value }));
     };
+    // Read from localStorage after hydration to avoid SSR mismatch
+    react_1.default.useEffect(() => {
+        setCollapsed((0, storage_1.getStorage)('sidebar-collapsed', false) === 'true');
+        _setItems((0, storage_1.getStorageObject)('sidebar-items', {}));
+        setHydrated(true);
+    }, []);
+    // Only persist to localStorage after hydration to avoid overwriting stored values
     react_1.default.useEffect(() => {
+        if (!hydrated) {
+            return;
+        }
         localStorage.setItem('sidebar-collapsed', JSON.stringify(collapsed));
-    }, [collapsed]);
+    }, [collapsed, hydrated]);
     react_1.default.useEffect(() => {
+        if (!hydrated) {
+            return;
+        }
         localStorage.setItem('sidebar-items', JSON.stringify(items));
-    }, [items]);
+    }, [items, hydrated]);
     return ((0, jsx_runtime_1.jsx)(SidebarContext.Provider, { value: {
             isCollapsed: collapsed,
             items,
+            setItems: _setItems,
             getItemCollapsed,
             setItemCollapsed,
             toggleSidebar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {