@geomak/ui 7.2.1 → 7.3.0

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,7 +1,7 @@
 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';
@@ -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",
@@ -663,7 +663,7 @@ 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: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu.Item,
@@ -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",
         {
@@ -5478,23 +5478,12 @@ function Pagination({
   onPageChange,
   maxPage,
   options,
-  onPerPageChange,
-  serverSide = false
+  perPage,
+  onPerPageChange
 }) {
   const picker = options.pickerOptions ?? DEFAULT_PICKER;
-  const matchedOption = picker.find(
-    (o) => o.label === options.perPage || o.value === options.perPage
-  );
-  const [perPageKey, setPerPageKey] = useState(() => matchedOption?.key ?? picker[0]?.key);
-  const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
-  useEffect(() => {
-    if (serverSide && options.perPage != null) {
-      const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
-      if (next) setPerPageKey(next.key);
-    }
-  }, [serverSide, options.perPage, picker]);
-  const currentOpt = picker.find((o) => o.key === displayPerPageKey);
-  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
+  const currentOpt = picker.find((o) => o.value === perPage || o.label === perPage);
+  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? perPage ?? "";
   const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
   const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
   const chevronRight = /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
@@ -5513,10 +5502,7 @@ function Pagination({
           items: picker.map((o) => ({
             key: o.key,
             label: String(o.label ?? o.value ?? o.key),
-            onSelect: () => {
-              if (!serverSide) setPerPageKey(o.key);
-              onPerPageChange(o.label ?? o.value ?? o.key);
-            }
+            onSelect: () => onPerPageChange(o.value ?? o.label ?? o.key)
           }))
         }
       )
@@ -5656,9 +5642,9 @@ function Table({
       activePage,
       onPageChange: handlePageChange,
       maxPage: MAX_PAGE,
+      perPage,
       onPerPageChange: onPaginationChange,
-      options: pagination,
-      serverSide: isServerSide
+      options: pagination
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
@@ -5868,13 +5854,22 @@ function TopBar({
 }
 function NavItem({
   item,
-  isExpanded
+  isExpanded,
+  depth = 0
 }) {
+  const hasChildren = !!(item.items && item.items.length);
+  const [open, setOpen] = useState(item.defaultOpen ?? (hasChildren && !!item.items?.some((c) => c.isActive)));
+  const handleClick = () => {
+    if (hasChildren && isExpanded) setOpen((o) => !o);
+    item.onClick?.();
+  };
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: item.onClick,
+      onClick: handleClick,
+      "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",
@@ -5883,24 +5878,44 @@ function NavItem({
       ].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) {
+    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,
@@ -6095,8 +6110,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",
@@ -6133,9 +6148,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;
@@ -6544,7 +6559,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(() => {
@@ -8848,7 +8863,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",
       {
@@ -9904,7 +9919,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)) })