@opencosmos/ui 1.3.2 → 1.3.4

package/dist/index.mjs

@@ -10768,6 +10768,7 @@ function AppSidebar({
   logo,
   title,
   items = [],
+  bottomItems = [],
   children,
   footer,
   className
@@ -10840,7 +10841,7 @@ function AppSidebar({
             }
           )
         ] }),
-        items.length > 0 && /* @__PURE__ */ jsx89("nav", { className: "px-2 py-2 space-y-0.5 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ jsxs56(
+        items.length > 0 && /* @__PURE__ */ jsx89("nav", { className: "px-2 py-2 space-y-1 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ jsxs56(
           "a",
           {
             href: item.href,
@@ -10851,7 +10852,7 @@ function AppSidebar({
             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-2.5" : "justify-center w-9 h-9 mx-auto",
+              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: [
@@ -10882,12 +10883,46 @@ 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",
           {
             className: cn(
               "shrink-0 border-t border-foreground/8",
-              isOpen ? "p-3" : "px-2 py-3 flex justify-center"
+              isOpen ? "px-4 py-4 space-y-3" : "px-2 py-3 flex justify-center"
             ),
             children: footer
           }