@fayz-ai/ui 0.19.0 → 0.22.0

package/dist/{chunk-6YFPPK7X.js → chunk-PQUS22JE.js}

@@ -1,6 +1,6 @@
 import { useHasPageHeaderHost, usePageHeader, PageTitlePortal, useLayoutStore, useHasPageHeaderBack, useRegisterPageActions, usePageHeaderClaimed, usePageTitleSlotHost, useHasPageHeaderOutlet, useHasPageActions, usePageHeaderHost } from './chunk-HKGTF2YA.js';
 import { cn } from './chunk-OKZ6WQB3.js';
-import { ICON_MAP } from './chunk-SB6DWHXI.js';
+import { ICON_MAP } from './chunk-DHNUZF2X.js';
 import * as React2 from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X, Loader2, ArrowLeft, Search, Bell, PanelLeft, PanelLeftClose, Menu, Crown, ChevronDown, ChevronRight, ChevronLeft, ExternalLink, CreditCard, Sparkles, Home, Plus, UserCog, Settings, LogOut } from 'lucide-react';
@@ -264,6 +264,7 @@ function SaveBar({ className }) {
             "button",
             {
               type: "button",
+              "data-tour": "savebar.discard",
               disabled: saving,
               onClick: () => api.handlers.current.onDiscard?.(),
               className: "rounded-full px-3 py-1.5 text-sm font-medium text-background/70 transition-colors hover:bg-background/10 hover:text-background disabled:opacity-50",
@@ -274,6 +275,7 @@ function SaveBar({ className }) {
             "button",
             {
               type: "button",
+              "data-tour": "savebar.save",
               disabled: saving,
               onClick: () => api.handlers.current.onSave?.(),
               className: "inline-flex items-center rounded-full bg-background px-4 py-1.5 text-sm font-semibold text-foreground transition-colors hover:bg-background/90 disabled:opacity-60",
@@ -742,7 +744,13 @@ function NavGroup({
         childExternal && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
         child.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
       ] });
-      const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner });
+      const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : (
+        // `nav.<route>` on group children too, matching the top-level rows
+        // above — without it a guided tour cannot point at "Cardápio",
+        // "Reservas" or any other row that lives under a group (the normal
+        // case in an app that groups its rail).
+        /* @__PURE__ */ jsx("button", { "data-tour": `nav.${child.route}`, onClick: () => onNavigate(child.route), className: childClass, children: childInner })
+      );
       if (!childConnector) return /* @__PURE__ */ jsx(React2.Fragment, { children: row }, child.id);
       const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
       const onPath = activeIndex >= 0 && childIndex < activeIndex;
@@ -821,6 +829,7 @@ function Sidebar({
   topContent,
   identity,
   navTop,
+  beforeNav,
   footerContent,
   borderless,
   userMenuSlot,
@@ -995,6 +1004,7 @@ function Sidebar({
               }
             ) })
           ),
+          beforeNav && /* @__PURE__ */ jsx("div", { className: cn("px-2 pb-1 empty:hidden", collapsed && "flex justify-center"), children: withCollapsed(beforeNav, collapsed) }),
           /* @__PURE__ */ jsxs(
             "nav",
             {
@@ -1390,6 +1400,7 @@ function SidebarLayout({
   sidebarTopContent,
   sidebarIdentity,
   sidebarNavTop,
+  sidebarBeforeNav,
   sidebarFooterContent,
   frame,
   immersive,
@@ -1448,6 +1459,7 @@ function SidebarLayout({
         topContent: sidebarTopContent,
         identity: sidebarIdentity,
         navTop: sidebarNavTop,
+        beforeNav: sidebarBeforeNav,
         footerContent: sidebarFooterContent,
         borderless: frame,
         userMenuSlot,
@@ -1527,6 +1539,7 @@ function SidebarLayout({
         topContent: sidebarTopContent,
         identity: sidebarIdentity,
         navTop: sidebarNavTop,
+        beforeNav: sidebarBeforeNav,
         footerContent: sidebarFooterContent,
         userMenuSlot,
         notificationSlot,
@@ -1855,6 +1868,7 @@ function AppShell({
   sidebarTopContent,
   sidebarIdentity,
   sidebarNavTop,
+  sidebarBeforeNav,
   sidebarFooterContent,
   bottomNav,
   onBottomNavAction,
@@ -1922,6 +1936,7 @@ function AppShell({
           sidebarTopContent,
           sidebarIdentity,
           sidebarNavTop,
+          sidebarBeforeNav,
           sidebarFooterContent,
           frame: contentFrame,
           immersive,
@@ -2131,6 +2146,7 @@ function HeaderTabs({
   onChange,
   className,
   fill,
+  anchorPrefix,
   ...rest
 }) {
   return /* @__PURE__ */ jsx(
@@ -2146,33 +2162,56 @@ function HeaderTabs({
       children: tabs.map((tab) => {
         const active = tab.value === value;
         const Icon = tab.icon;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": active,
-            onClick: () => onChange(tab.value),
-            className: cn(
-              "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap text-sm transition-colors",
-              // Filled: the row owns the band's height and the underline sits on
-              // its bottom edge. Otherwise the underline trails the label by 6px.
-              fill ? "h-full" : "pb-1.5",
-              active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-            ),
-            children: [
-              Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null,
-              /* @__PURE__ */ jsx("span", { children: tab.label }),
-              tab.count != null && /* @__PURE__ */ jsx("span", { className: cn(
-                "ml-0.5 rounded-full px-1.5 text-[11px] tabular-nums",
-                active ? "bg-muted text-foreground" : "bg-muted/70 text-muted-foreground"
-              ), children: tab.count }),
-              tab.badge,
-              active && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground" })
-            ]
-          },
-          tab.value
+        const box = cn(
+          "relative flex shrink-0 items-center gap-1.5 whitespace-nowrap text-sm transition-colors",
+          fill ? "h-full" : "pb-1.5",
+          active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
+          tab.dim && "opacity-50 hover:opacity-100"
         );
+        const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null,
+          /* @__PURE__ */ jsx("span", { children: tab.label }),
+          tab.count != null && /* @__PURE__ */ jsx("span", { className: cn(
+            "ml-0.5 rounded-full px-1.5 text-[11px] tabular-nums",
+            active ? "bg-muted text-foreground" : "bg-muted/70 text-muted-foreground"
+          ), children: tab.count }),
+          tab.badge
+        ] });
+        const underline = active ? /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground" }) : null;
+        if (!tab.trailing) {
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "data-tour": anchorPrefix ? `${anchorPrefix}.${tab.value}` : void 0,
+              onClick: () => onChange(tab.value),
+              className: box,
+              children: [
+                inner,
+                underline
+              ]
+            },
+            tab.value
+          );
+        }
+        return /* @__PURE__ */ jsxs("div", { className: box, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "data-tour": anchorPrefix ? `${anchorPrefix}.${tab.value}` : void 0,
+              onClick: () => onChange(tab.value),
+              className: "flex items-center gap-1.5 whitespace-nowrap",
+              children: inner
+            }
+          ),
+          tab.trailing,
+          underline
+        ] }, tab.value);
       })
     }
   );
@@ -2187,11 +2226,56 @@ function PageTabs({ actions, className, ...props }) {
       ),
       children: [
         /* @__PURE__ */ jsx(HeaderTabs, { ...props, className: "-mb-px" }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pb-1.5", children: actions })
+        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pb-1.5", children: actions })
       ]
     }
   );
 }
+var SIZE = {
+  sm: { container: "h-[26px]", segment: "px-2.5 text-xs" },
+  md: { container: "h-[30px]", segment: "px-3 text-sm" }
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const items = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      className: cn(
+        "inline-flex items-center rounded-button border border-border bg-card p-0.5 shadow-button",
+        SIZE[size].container,
+        className
+      ),
+      children: items.map((item) => {
+        const active = item.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "flex h-full items-center rounded-button font-semibold transition-colors",
+              SIZE[size].segment,
+              active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted/60"
+            ),
+            children: item.label
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
 var NavTransitionContext = React2.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
@@ -2250,6 +2334,7 @@ function RailNavItem({ item }) {
       "button",
       {
         type: "button",
+        "data-tour": `modnav.${item.id}`,
         onClick: () => hasChildren ? setExpanded(!expanded) : item.onClick?.(),
         className: cn(
           "flex items-center gap-2 w-full rounded-md px-2.5 py-1.5 text-sm transition-colors",
@@ -2267,6 +2352,7 @@ function RailNavItem({ item }) {
       "button",
       {
         type: "button",
+        "data-tour": `modnav.${child.id}`,
         onClick: child.onClick,
         className: cn(
           "flex items-center w-full rounded-md px-2.5 py-1 text-xs transition-colors",
@@ -2282,7 +2368,7 @@ function RailNavItem({ item }) {
   ] });
 }
 function defaultChildOf(item) {
-  const kids = item.children ?? [];
+  const kids = (item.children ?? []).filter((c) => c.kind !== "action");
   return kids.find((c) => c.defaultChild) ?? kids.find((c) => /(^|-)list$/i.test(c.id)) ?? kids.find((c) => !/(^|-)(new|novo|nova|create)$/i.test(c.id)) ?? kids[0];
 }
 function MobileTabs({ nav }) {
@@ -2337,8 +2423,9 @@ function MobileTabs({ nav }) {
     }) }),
     expandedId && (() => {
       const item = nav.find((n) => n.id === expandedId);
-      if (!item?.children) return null;
-      return /* @__PURE__ */ jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: item.children.map((child) => /* @__PURE__ */ jsxs(
+      const shown = (item?.children ?? []).filter((c) => c.kind !== "action");
+      if (shown.length < 2) return null;
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-1 px-2 pb-2 animate-in fade-in-0 slide-in-from-top-1", children: shown.map((child) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -2470,8 +2557,8 @@ function ShellSubpageHeader({
 }
 function ModuleHeader({ nav }) {
   function defaultChild(item) {
-    const kids = item.children ?? [];
-    return kids.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids[kids.length - 1];
+    const kids2 = (item.children ?? []).filter((c) => c.kind !== "action");
+    return kids2.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids2[kids2.length - 1];
   }
   const activeItem = nav.find((item) => item.active || item.children?.some((c) => c.active));
   const tabs = nav.map((item) => ({
@@ -2489,7 +2576,28 @@ function ModuleHeader({ nav }) {
     if (hasChildren) defaultChild(item)?.onClick?.();
     else item.onClick?.();
   };
-  return /* @__PURE__ */ jsx(PageTabs, { tabs, value: activeItem?.id ?? nav[0]?.id ?? "", onChange });
+  const kids = (activeItem?.children ?? []).filter((c) => c.kind !== "action");
+  const activeKid = kids.find((c) => c.active)?.id ?? kids[0]?.id;
+  const childControl = kids.length > 1 ? /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "sm",
+      "aria-label": activeItem?.label,
+      options: kids.map((c) => ({ value: c.id, label: c.label })),
+      value: activeKid ?? "",
+      onChange: (id) => kids.find((c) => c.id === id)?.onClick?.()
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    PageTabs,
+    {
+      tabs,
+      value: activeItem?.id ?? nav[0]?.id ?? "",
+      onChange,
+      actions: childControl,
+      anchorPrefix: "modnav"
+    }
+  );
 }
 function ModulePage({ title: _title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
   const ctxVariant = useModuleLayout();
@@ -2522,6 +2630,6 @@ function ModulePage({ title: _title, subtitle, nav, children, className, headerA
   ] });
 }
 
-export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, bottomNavReachesAll, useBackHandler, useBackStyle, useCrossModuleBack, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar, useSaveBarVisible };
-//# sourceMappingURL=chunk-6YFPPK7X.js.map
-//# sourceMappingURL=chunk-6YFPPK7X.js.map
+export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, bottomNavReachesAll, useBackHandler, useBackStyle, useCrossModuleBack, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar, useSaveBarVisible };
+//# sourceMappingURL=chunk-PQUS22JE.js.map
+//# sourceMappingURL=chunk-PQUS22JE.js.map