@snksergio/design-system 0.53.0 → 0.55.0

package/dist-lib/chunks/{useTheme-Dh3POjCr.cjs → useTheme-BTjHuaT2.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const avatar = require("./avatar-DAmZ7fBZ.cjs");
+const avatar = require("./avatar-CMWPg3A3.cjs");
 const lucideReact = require("lucide-react");
 const ToggleGroupPrimitive = require("@radix-ui/react-toggle-group");
 function _interopNamespaceDefault(e) {
@@ -63,27 +63,6 @@ const headerIconBtnBadge = avatar.tv({
   },
   defaultVariants: { kind: "brand" }
 });
-const breadcrumbRoot = avatar.tv({
-  base: "flex items-center gap-gp-sm min-w-0"
-});
-const breadcrumbItem = avatar.tv({
-  base: "font-medium truncate transition-colors leading-none",
-  variants: {
-    current: {
-      true: "text-fg-default font-semibold",
-      false: "text-fg-muted hover:text-fg-default cursor-pointer"
-    },
-    /** Quando único item no breadcrumb (= título da página), font-size sobe pra 16px */
-    standalone: {
-      true: "text-body-lg",
-      false: "text-body-sm font-normal"
-    }
-  },
-  defaultVariants: { current: false, standalone: false }
-});
-const breadcrumbSeparator = avatar.tv({
-  base: "text-fg-subtle shrink-0"
-});
 const searchFakeInput = avatar.tv({
   base: [
     "inline-flex items-center gap-gp-md h-form-md w-[180px]",
@@ -267,81 +246,239 @@ const hdFooterLink = avatar.tv({
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-brand"
   ]
 });
+const breadcrumbSwitcher = avatar.tv({
+  slots: {
+    trigger: [
+      "inline-flex max-w-[240px] items-center gap-gp-xs rounded-radius-sm",
+      "px-pad-xs py-pad-2xs -mx-pad-xs",
+      "font-medium text-fg-default",
+      "transition-colors hover:bg-bg-muted",
+      "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
+      "disabled:pointer-events-none disabled:opacity-60",
+      // aberto fica marcado: sem isso, com o dropdown na tela, o gatilho some do olhar
+      "data-[state=open]:bg-bg-muted"
+    ],
+    /** O rótulo trunca; o chevron nunca — ele é o que anuncia que dá pra trocar. */
+    label: "truncate",
+    chevron: "size-icon-xs shrink-0 text-fg-muted",
+    content: "w-[300px] p-0",
+    title: "px-pad-xl pt-pad-lg pb-pad-sm text-caption-md font-semibold text-fg-subtle",
+    /** O rodapé fica FORA da área que rola — “ver todos” não pode fugir com a lista. */
+    footer: "border-t border-border-default p-pad-sm",
+    item: "flex items-center gap-gp-md",
+    itemTexto: "flex min-w-0 flex-1 flex-col",
+    itemLabel: "truncate",
+    itemDescricao: "truncate text-caption-md text-fg-subtle"
+  },
+  variants: {
+    /**
+     * Acompanha o tamanho do caminho. Sem isto o gatilho ficava 13px fixo no meio de irmãos de
+     * 14px (medido na doc) — o item que troca é o MESMO item do caminho, não pode ter corpo
+     * próprio.
+     */
+    size: {
+      sm: { trigger: "text-body-sm" },
+      md: { trigger: "text-body-md" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const BreadcrumbSwitcher = React.forwardRef(
+  function BreadcrumbSwitcher2({
+    value,
+    onValueChange,
+    options,
+    placeholder,
+    title,
+    searchPlaceholder = "Buscar…",
+    emptyMessage = "Nada encontrado.",
+    footer,
+    open: openProp,
+    onOpenChange,
+    align = "start",
+    size = "md",
+    disabled,
+    className,
+    contentClassName,
+    "aria-label": ariaLabel = "Trocar registro aberto"
+  }, ref) {
+    const [openInterno, setOpenInterno] = React.useState(false);
+    const open = openProp ?? openInterno;
+    const setOpen = (proximo) => {
+      setOpenInterno(proximo);
+      onOpenChange?.(proximo);
+    };
+    const estilos = breadcrumbSwitcher({ size });
+    const atual = options.find((o) => o.value === value);
+    const grupos = React.useMemo(() => {
+      const mapa = /* @__PURE__ */ new Map();
+      for (const opcao of options) {
+        const chave = opcao.group ?? "";
+        const atual2 = mapa.get(chave);
+        if (atual2) atual2.push(opcao);
+        else mapa.set(chave, [opcao]);
+      }
+      return [...mapa.entries()];
+    }, [options]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(avatar.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-label": ariaLabel,
+          "aria-expanded": open,
+          disabled,
+          className: estilos.trigger({ className }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: estilos.label(), children: atual?.label ?? placeholder ?? value }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: estilos.chevron(), "aria-hidden": true })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        avatar.PopoverContent,
+        {
+          align,
+          className: estilos.content({ className: contentClassName }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.Command, { children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: estilos.title(), children: title }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandInput, { placeholder: searchPlaceholder }),
+            /* @__PURE__ */ jsxRuntime.jsxs(avatar.CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandEmpty, { children: emptyMessage }),
+              grupos.map(([nomeGrupo, opcoes]) => /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandGroup, { heading: nomeGrupo || void 0, children: opcoes.map((opcao) => {
+                const selecionada = opcao.value === value;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  avatar.CommandItem,
+                  {
+                    "data-atual": selecionada || void 0,
+                    value: opcao.label,
+                    keywords: [opcao.value, ...opcao.keywords ?? []],
+                    onSelect: () => {
+                      onValueChange(opcao.value);
+                      setOpen(false);
+                    },
+                    className: avatar.cn(selecionada && "font-medium text-fg-default"),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: estilos.item(), children: [
+                      opcao.leading,
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: estilos.itemTexto(), children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: estilos.itemLabel(), children: opcao.label }),
+                        opcao.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: estilos.itemDescricao(), children: opcao.description }) : null
+                      ] }),
+                      selecionada ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-icon-sm shrink-0 text-fg-brand", "aria-hidden": true }) : null
+                    ] })
+                  },
+                  opcao.value
+                );
+              }) }, nomeGrupo || "_"))
+            ] }),
+            footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: estilos.footer(), children: footer }) : null
+          ] })
+        }
+      )
+    ] });
+  }
+);
+BreadcrumbSwitcher.displayName = "BreadcrumbSwitcher";
+const breadcrumbCaminho = avatar.tv({
+  slots: {
+    lista: "gap-gp-sm sm:gap-gp-sm",
+    separador: "shrink-0 text-fg-subtle [&>svg]:size-[14px]",
+    item: "truncate transition-colors leading-none"
+  },
+  variants: {
+    size: {
+      sm: { item: "text-body-sm font-normal" },
+      md: { item: "text-body-md font-normal" }
+    },
+    /**
+     * Item único = título da página. O `HeaderBreadcrumb` fazia isso e é o que mantém o Header
+     * pixel a pixel: 16px/600 em vez do 13px da cadeia.
+     */
+    sozinho: {
+      true: { item: "text-body-lg font-semibold" },
+      false: {}
+    },
+    atual: {
+      true: { item: "text-fg-default" },
+      false: { item: "text-fg-muted hover:text-fg-default" }
+    }
+  },
+  defaultVariants: { size: "md", sozinho: false, atual: false }
+});
+function ehSwitcher(item) {
+  return Array.isArray(item.switcher) && item.switcher.length > 0 && typeof item.value === "string" && typeof item.onValueChange === "function";
+}
+const Breadcrumb = React.forwardRef(function Breadcrumb2({ items, size = "md", separator, className, children, ...rest }, ref) {
+  if (!items) {
+    return /* @__PURE__ */ jsxRuntime.jsx(avatar.Breadcrumb, { ref, className, ...rest, children });
+  }
+  if (items.length === 0) return null;
+  const sozinho = items.length === 1;
+  const estilos = breadcrumbCaminho({ size, sozinho });
+  return /* @__PURE__ */ jsxRuntime.jsx(avatar.Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(avatar.BreadcrumbList, { className: estilos.lista(), children: items.map((item, i) => {
+    const ultimo = i === items.length - 1;
+    const clicavel = !ultimo && (item.href !== void 0 || item.onClick !== void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      i > 0 ? /* @__PURE__ */ jsxRuntime.jsx(avatar.BreadcrumbSeparator, { className: estilos.separador(), children: separator ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { strokeWidth: 1.7 }) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.BreadcrumbItem, { className: "min-w-0", children: ehSwitcher(item) ? (
+        /* Vem ANTES do teste de link: um seletor com `href` continua sendo seletor —
+           o clique abre a lista. */
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BreadcrumbSwitcher,
+          {
+            value: item.value,
+            onValueChange: item.onValueChange,
+            options: item.switcher,
+            size,
+            title: item.switcherTitle,
+            searchPlaceholder: item.switcherSearchPlaceholder,
+            emptyMessage: item.switcherEmptyMessage,
+            footer: item.switcherFooter,
+            "aria-label": item.switcherAriaLabel ?? `Trocar: ${item.label}`
+          }
+        )
+      ) : clicavel ? /* @__PURE__ */ jsxRuntime.jsx(
+        avatar.BreadcrumbLink,
+        {
+          href: item.href ?? "#",
+          className: estilos.item({ atual: false }),
+          onClick: (e) => {
+            if (!item.href) e.preventDefault();
+            item.onClick?.(e);
+          },
+          children: item.label
+        }
+      ) : ultimo ? /* @__PURE__ */ jsxRuntime.jsx(avatar.BreadcrumbPage, { className: estilos.item({ atual: true }), children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: avatar.cn(estilos.item({ atual: false }), "cursor-default"), children: item.label }) })
+    ] }, `${item.label}-${i}`);
+  }) }) });
+});
+Breadcrumb.displayName = "Breadcrumb";
 function HeaderBreadcrumb({
   items,
   mobileShowLastOnly,
   className
 }) {
   if (items.length === 0) return null;
-  const isStandalone = items.length === 1;
-  const lastItem = items[items.length - 1];
+  const ultimo = items[items.length - 1];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "nav",
+      Breadcrumb,
       {
-        className: avatar.cn(
-          breadcrumbRoot(),
-          mobileShowLastOnly && "hidden md:flex",
-          className
-        ),
-        "aria-label": "Breadcrumb",
-        children: items.map((item, idx) => {
-          const isLast = idx === items.length - 1;
-          const isClickable = !isLast && (item.href !== void 0 || item.onClick !== void 0);
-          return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-            idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronRight,
-              {
-                size: 14,
-                strokeWidth: 1.7,
-                className: breadcrumbSeparator(),
-                "aria-hidden": "true"
-              }
-            ),
-            isClickable ? /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: item.href ?? "#",
-                className: breadcrumbItem({
-                  current: false,
-                  standalone: isStandalone
-                }),
-                onClick: (e) => {
-                  if (!item.href) e.preventDefault();
-                  item.onClick?.(e);
-                },
-                children: item.label
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: breadcrumbItem({
-                  current: isLast,
-                  standalone: isStandalone
-                }),
-                "aria-current": isLast ? "page" : void 0,
-                children: item.label
-              }
-            )
-          ] }, `${item.label}-${idx}`);
-        })
+        items,
+        size: "sm",
+        className: avatar.cn("min-w-0", mobileShowLastOnly && "hidden md:block", className)
       }
     ),
-    mobileShowLastOnly && /* @__PURE__ */ jsxRuntime.jsx(
-      "nav",
+    mobileShowLastOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+      Breadcrumb,
       {
-        className: avatar.cn(breadcrumbRoot(), "md:hidden", className),
+        items: [ultimo],
+        size: "sm",
         "aria-label": "Seção atual",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: breadcrumbItem({ current: true, standalone: true }),
-            "aria-current": "page",
-            children: lastItem.label
-          }
-        )
+        className: avatar.cn("min-w-0 md:hidden", className)
       }
-    )
+    ) : null
   ] });
 }
 function HeaderSearch({
@@ -3484,6 +3621,8 @@ function useTheme() {
   return { theme, setTheme, isDark, toggle };
 }
 exports.AppShell = AppShell;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbSwitcher = BreadcrumbSwitcher;
 exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
 exports.ChipGroupItem = ChipGroupItem;
@@ -3503,6 +3642,8 @@ exports.SidebarSection = SidebarSection;
 exports.SidebarSubgroup = SidebarSubgroup;
 exports.SingleMenuSidebar = SingleMenuSidebar;
 exports.UserMenu = UserMenu;
+exports.breadcrumbCaminho = breadcrumbCaminho;
+exports.breadcrumbSwitcher = breadcrumbSwitcher;
 exports.chipCount = chipCount;
 exports.chipVariants = chipVariants;
 exports.isExternalHref = isExternalHref;
@@ -3512,4 +3653,4 @@ exports.shouldPreventNavigation = shouldPreventNavigation;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
 exports.useTheme = useTheme;
-//# sourceMappingURL=useTheme-Dh3POjCr.cjs.map
+//# sourceMappingURL=useTheme-BTjHuaT2.cjs.map