@opencosmos/ui 1.3.3 → 1.3.5

package/dist/index.mjs

@@ -10723,13 +10723,13 @@ var DEFAULT_CONTEXT = {
 function useAppSidebar() {
   return useContext9(AppSidebarContext) ?? DEFAULT_CONTEXT;
 }
-function AppSidebarProvider({ children, defaultOpen = true }) {
+function AppSidebarProvider({ children, defaultOpen = true, storageKey = STORAGE_KEY }) {
   const [isOpen, setIsOpen] = useState17(defaultOpen);
   useEffect11(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(storageKey);
     if (stored !== null) setIsOpen(stored === "true");
-  }, []);
-  const persist3 = (value) => localStorage.setItem(STORAGE_KEY, String(value));
+  }, [storageKey]);
+  const persist3 = (value) => localStorage.setItem(storageKey, String(value));
   const toggle = () => setIsOpen((prev) => {
     const next = !prev;
     persist3(next);
@@ -10768,6 +10768,7 @@ function AppSidebar({
   logo,
   title,
   items = [],
+  bottomItems = [],
   children,
   footer,
   className
@@ -10882,6 +10883,40 @@ function AppSidebar({
             children
           }
         ),
+        bottomItems.length > 0 && /* @__PURE__ */ jsx89("nav", { className: "px-2 py-2 space-y-1 shrink-0 border-t border-foreground/8", "aria-label": "Bottom navigation", children: bottomItems.map((item) => /* @__PURE__ */ jsxs56(
+          "a",
+          {
+            href: item.href,
+            target: item.external ? "_blank" : void 0,
+            rel: item.external ? "noopener noreferrer" : void 0,
+            title: !isOpen ? item.label : void 0,
+            "aria-label": !isOpen ? item.label : void 0,
+            className: cn(
+              "flex items-center rounded-lg transition-colors duration-150",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]",
+              isOpen ? "gap-3 px-3 py-3" : "justify-center w-9 h-9 mx-auto",
+              item.active ? "bg-foreground/8 text-foreground font-medium" : "text-[var(--color-text-secondary)] hover:bg-foreground/5 hover:text-[var(--color-text-primary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx89("span", { className: "shrink-0 flex items-center justify-center w-4 h-4", children: item.icon }),
+              /* @__PURE__ */ jsx89(
+                "span",
+                {
+                  className: "text-sm whitespace-nowrap",
+                  style: {
+                    opacity: isOpen ? 1 : 0,
+                    width: isOpen ? "auto" : 0,
+                    overflow: "hidden",
+                    pointerEvents: isOpen ? "auto" : "none",
+                    transition: shouldAnimate ? `opacity ${Math.round(duration * 0.55)}ms ease-out` : "none"
+                  },
+                  children: item.label
+                }
+              )
+            ]
+          },
+          item.label
+        )) }),
         footer && /* @__PURE__ */ jsx89(
           "div",
           {