@orangecheck/app-design 0.5.12 → 0.6.0

package/dist/index.mjs

@@ -2584,6 +2584,57 @@ function SectionSwitch({
     }
   );
 }
+function TabBar({ items }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Pages",
+      "data-oca-tabbar": "",
+      className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
+          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+          children: items.map((it) => /* @__PURE__ */ jsxs(
+            Link2,
+            {
+              href: it.href,
+              "aria-current": it.active ? "page" : void 0,
+              className: cn(
+                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
+                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+                    ),
+                    children: [
+                      it.icon,
+                      it.badge ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
+                it.badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: it.badge }) : null
+              ]
+            },
+            it.href
+          ))
+        }
+      )
+    }
+  );
+}
+function tabsFor(groups) {
+  const items = groups.flatMap((g) => g.items);
+  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
+}
 var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
 var warned = /* @__PURE__ */ new Set();
 function warnDuplicateLabels(groups) {
@@ -2614,6 +2665,7 @@ function AppShell({
   const current = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
   const groups = current ? [...current.groups, ...persistent] : [...nav ?? [], ...persistent];
   warnDuplicateLabels(groups);
+  const tabs = current ? null : tabsFor(groups);
   const page = activeItem(groups);
   const place = useMemo(
     () => ({
@@ -2623,66 +2675,95 @@ function AppShell({
     [current, page?.label, pageOverride]
   );
   const switcher = sections && current && sections.length > 1 ? /* @__PURE__ */ jsx(SectionSwitch, { sections, current, onNavigate: () => setOpen(false) }) : null;
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxs("div", { className: cn("min-h-dvh bg-background", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
-        /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ jsx(
-            SheetTrigger,
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "min-h-dvh bg-background",
+        tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
+            /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+              /* @__PURE__ */ jsx(
+                SheetTrigger,
+                {
+                  className: cn(
+                    "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
+                    // The tab bar holds every page; the sheet is left for a footer.
+                    tabs && !footer && "max-md:hidden"
+                  ),
+                  "aria-label": "Open navigation",
+                  children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+                switcher,
+                /* @__PURE__ */ jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
+                footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Link2, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
+            /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: account })
+          ] }),
+          place.page ? /* @__PURE__ */ jsxs(
+            "div",
             {
-              className: "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-              "aria-label": "Open navigation",
-              children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+              className: cn(
+                "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
+                // The active tab already names the page.
+                tabs && !pageOverride && "max-md:hidden"
+              ),
+              children: [
+                place.section ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
+                  /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
+                ] }) : null,
+                /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: place.page })
+              ]
             }
-          ),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
-            /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
+          /* @__PURE__ */ jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
+            /* @__PURE__ */ jsx(Link2, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
             switcher,
-            /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }),
-            footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
+            /* @__PURE__ */ jsx(SideNav, { groups }),
+            /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
+            banner ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
+            /* @__PURE__ */ jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Link2, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsx(Lockup, { size: 22 }) }),
-        /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: account })
-      ] }),
-      place.page ? /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]", children: [
-        place.section ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
-          /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
-        ] }) : null,
-        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: place.page })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
-      /* @__PURE__ */ jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
-        /* @__PURE__ */ jsx(Link2, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Lockup, { size: 26 }) }),
-        switcher,
-        /* @__PURE__ */ jsx(SideNav, { groups }),
-        /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
-        banner ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
-        /* @__PURE__ */ jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
-      ] })
-    ] })
-  ] }) });
+        tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
+      ]
+    }
+  ) });
 }
 function AccountMenu({
   name,
   detail,
-  items
+  items,
+  nameFrom = "sm"
 }) {
   const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
-        className: "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring sm:pr-3.5",
+        className: cn(
+          "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
+          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
+        ),
         "aria-label": `Account: ${name}`,
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate max-sm:hidden", children: name })
+          /* @__PURE__ */ jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
         ]
       }
     ),