@geomak/ui 7.2.2 → 7.3.1

package/dist/index.d.cts

@@ -2647,12 +2647,20 @@ declare function TopBar({ brand, center, actions, height, className, }: TopBarPr
 /** ─────────────────── types ─────────────────── */
 interface SidebarItem {
     key: string;
-    icon: react__default.ReactNode;
+    /** Leading icon. Optional for nested sub-items (they show a dot instead). */
+    icon?: react__default.ReactNode;
     label: string;
     isActive?: boolean;
     onClick?: () => void;
     /** Numeric badge shown on the icon */
     badge?: number;
+    /**
+     * Nested sub-items. When present (and the sidebar is expanded), the item
+     * becomes an expandable group with a chevron; clicking toggles the children.
+     */
+    items?: SidebarItem[];
+    /** Start the sub-menu expanded. Defaults to open when a descendant is active. */
+    defaultOpen?: boolean;
 }
 interface SidebarSection {
     key: string;

package/dist/index.d.ts

@@ -2647,12 +2647,20 @@ declare function TopBar({ brand, center, actions, height, className, }: TopBarPr
 /** ─────────────────── types ─────────────────── */
 interface SidebarItem {
     key: string;
-    icon: react__default.ReactNode;
+    /** Leading icon. Optional for nested sub-items (they show a dot instead). */
+    icon?: react__default.ReactNode;
     label: string;
     isActive?: boolean;
     onClick?: () => void;
     /** Numeric badge shown on the icon */
     badge?: number;
+    /**
+     * Nested sub-items. When present (and the sidebar is expanded), the item
+     * becomes an expandable group with a chevron; clicking toggles the children.
+     */
+    items?: SidebarItem[];
+    /** Start the sub-menu expanded. Defaults to open when a descendant is active. */
+    defaultOpen?: boolean;
 }
 interface SidebarSection {
     key: string;

package/dist/index.js

@@ -1,11 +1,11 @@
 export { icons_default as Icon, createIcon } from './chunk-KAFJJO5O.js';
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
-import React29, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React30, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion, useScroll, useTransform } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -555,7 +555,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React29.forwardRef(function Button2({
+var Button = React30.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -636,8 +636,8 @@ function MenuButton({
   side = "bottom",
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button_default,
       {
         variant,
@@ -651,8 +651,8 @@ function MenuButton({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu.Content,
+    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu2.Content,
       {
         align,
         side,
@@ -663,10 +663,10 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
-          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
+        children: items.map((item) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
-            DropdownMenu.Item,
+            DropdownMenu2.Item,
             {
               disabled: item.disabled,
               onSelect: () => item.onSelect?.(),
@@ -1666,7 +1666,7 @@ function Stepper({
   const vertical = orientation === "vertical" || forcedVertical;
   const s = SIZES[size];
   const stateOf = (i) => i < current ? "completed" : i === current ? status : "pending";
-  const Label = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
+  const Label2 = ({ step, state, align }) => /* @__PURE__ */ jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
     /* @__PURE__ */ jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
     step.description && /* @__PURE__ */ jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
   ] });
@@ -1681,7 +1681,7 @@ function Stepper({
           stepButton(i, /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size })),
           !last && /* @__PURE__ */ jsx(VConnector, { filled: i < current, reduced })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label, { step, state, align: "left" })) })
+        /* @__PURE__ */ jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsx(Label2, { step, state, align: "left" })) })
       ] }, step.key);
     }) });
   }
@@ -1700,7 +1700,7 @@ function Stepper({
       ) }),
       stepButton(i, /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsx(Indicator, { state, index: i, step, sizeKey: size }),
-        /* @__PURE__ */ jsx(Label, { step, state, align: "center" })
+        /* @__PURE__ */ jsx(Label2, { step, state, align: "center" })
       ] }))
     ] }, step.key);
   }) });
@@ -1762,7 +1762,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1854,7 +1854,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React29.Children.toArray(children);
+  const slides = React30.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1909,7 +1909,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React29.Children.toArray(children);
+  const slides = React30.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -5131,7 +5131,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React29.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React30.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5429,7 +5429,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React30.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5852,41 +5852,106 @@ function TopBar({
     }
   );
 }
+function hasActiveDescendant(item) {
+  return !!item.items?.some((c) => c.isActive || hasActiveDescendant(c));
+}
+var FLYOUT_PANEL = "z-[400] min-w-[11rem] rounded-lg border border-border bg-surface p-1 shadow-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95";
+function FlyoutItems({ items }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child) => {
+    const cls = [
+      "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
+      child.isActive ? "text-accent data-[highlighted]:bg-accent/10" : "text-foreground data-[highlighted]:bg-surface-raised"
+    ].join(" ");
+    const label = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: child.label }),
+      child.badge !== void 0 && child.badge > 0 && /* @__PURE__ */ jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-status-error px-1 text-[9px] font-bold leading-none text-white", children: child.badge > 99 ? "99+" : child.badge })
+    ] });
+    if (child.items?.length) {
+      return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { className: cls, children: [
+          label,
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-3.5 w-3.5 flex-shrink-0", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) })
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu2.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsx(FlyoutItems, { items: child.items }) }) })
+      ] }, child.key);
+    }
+    return /* @__PURE__ */ jsx(DropdownMenu2.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
+  }) });
+}
 function NavItem({
   item,
-  isExpanded
+  isExpanded,
+  depth = 0
 }) {
+  const hasChildren = !!(item.items && item.items.length);
+  const [open, setOpen] = useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
+  const handleClick = () => {
+    if (hasChildren && isExpanded) setOpen((o) => !o);
+    item.onClick?.();
+  };
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: item.onClick,
+      onClick: handleClick,
+      "aria-label": !isExpanded && typeof item.label === "string" ? item.label : void 0,
+      "aria-expanded": hasChildren && isExpanded ? open : void 0,
+      style: isExpanded && depth > 0 ? { paddingLeft: 10 + depth * 18 } : void 0,
       className: [
         "group relative flex w-full items-center gap-2.5 rounded-md",
         "px-2.5 py-2 transition-colors duration-100",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
-        item.isActive ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+        item.isActive || !isExpanded && hasActiveDescendant(item) ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
       ].join(" "),
       children: [
         /* @__PURE__ */ jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
-          item.icon,
+          item.icon ?? (depth > 0 ? /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current opacity-50" }) : null),
           item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-status-error text-[9px] font-bold text-white leading-none", children: item.badge > 99 ? "99+" : item.badge })
         ] }),
-        isExpanded && /* @__PURE__ */ jsx(
-          motion.span,
+        isExpanded && /* @__PURE__ */ jsx(motion.span, { initial: false, animate: { opacity: 1 }, className: "flex-1 truncate text-left text-sm font-medium", children: item.label }),
+        isExpanded && hasChildren && /* @__PURE__ */ jsx(
+          "svg",
           {
-            initial: false,
-            animate: { opacity: 1 },
-            className: "truncate text-sm font-medium",
-            children: item.label
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            "aria-hidden": "true",
+            className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`,
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" })
           }
         ),
-        item.isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
+        item.isActive && depth === 0 && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
       ]
     }
   );
-  if (isExpanded) return btn;
-  return /* @__PURE__ */ jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
+  if (!isExpanded) {
+    if (hasChildren) {
+      return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: btn }),
+        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu2.Content, { side: "right", align: "start", sideOffset: 8, collisionPadding: 8, className: FLYOUT_PANEL, children: [
+          /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
+          /* @__PURE__ */ jsx(FlyoutItems, { items: item.items })
+        ] }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
+  }
+  if (!hasChildren) return btn;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    btn,
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+        style: { overflow: "hidden" },
+        children: /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex flex-col gap-0.5", children: item.items.map((child) => /* @__PURE__ */ jsx(NavItem, { item: child, isExpanded, depth: depth + 1 }, child.key)) })
+      }
+    ) })
+  ] });
 }
 function Sidebar({
   sections,
@@ -6081,8 +6146,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
-var elementsOfType = (children, type) => React29.Children.toArray(children).filter(
-  (c) => React29.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React30.Children.toArray(children).filter(
+  (c) => React30.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -6119,9 +6184,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React29.Children.toArray(panel.props.children);
+  const nodes = React30.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React29.isValidElement(node)) return null;
+    if (!React30.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -6530,7 +6595,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React29.useId().replace(/:/g, "");
+  const id = React30.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -8834,7 +8899,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -9890,7 +9955,7 @@ function Blog({
           post.tag != null && !post.image && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
           post.excerpt != null && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
-          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
             j > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
             /* @__PURE__ */ jsx("span", { children: m })
           ] }, j)) })