@snksergio/design-system 0.32.1 → 0.34.0

package/dist-lib/preview/chat.cjs

@@ -2,13 +2,12 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const appShell = require("../chunks/app-shell-Cyh8AUJT.cjs");
-const useTheme = require("../chunks/useTheme-Dee4mo-A.cjs");
+const useTheme = require("../chunks/useTheme-D4alxxGV.cjs");
 const lucideReact = require("lucide-react");
 const appShellMocks = require("../chunks/app-shell-mocks-oO_IV3Gw.cjs");
 const chatV2Mocks = require("../chunks/chat-v2-mocks-BV9Wha_Z.cjs");
-const input = require("../chunks/input-BjUSWce3.cjs");
-const chatV2Styles = appShell.tv({
+const input = require("../chunks/input-CizzMZ20.cjs");
+const chatV2Styles = useTheme.tv({
   slots: {
     /** Body do AppShell — flex row com gap entre colunas. `relative` pra mobile overlays. */
     root: "flex flex-1 min-h-0 gap-gp-2xl relative",
@@ -99,9 +98,9 @@ function ConversationActionsMenu({
   onAssign,
   onArchive
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      useTheme.Button,
       {
         color: "secondary",
         variant: "outline",
@@ -110,32 +109,32 @@ function ConversationActionsMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, {})
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-[200px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-[200px]", children: [
       showResolveInMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onSelect: onResolve, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onResolve, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, {}),
           " Resolver"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {})
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onSelect: onCall, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onCall, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, {}),
         " Ligar"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onSelect: onVideo, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onVideo, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}),
         " Vídeo chamada"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onSelect: onAddTag, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onAddTag, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tag, {}),
         " Adicionar tag"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onSelect: onAssign, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onAssign, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, {}),
         " Atribuir"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { variant: "destructive", onSelect: onArchive, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { variant: "destructive", onSelect: onArchive, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, {}),
         " Arquivar"
       ] })
@@ -145,7 +144,7 @@ function ConversationActionsMenu({
 function DateSeparator({ label }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center my-pad-md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-pad-lg py-pad-2xs rounded-radius-full bg-bg-muted text-caption-sm text-fg-muted [font-variant-numeric:tabular-nums]", children: label }) });
 }
-const messageBubbleStyles = appShell.tv({
+const messageBubbleStyles = useTheme.tv({
   slots: {
     /** Wrapper que controla o alinhamento horizontal (esquerda/direita). */
     row: "flex",
@@ -193,9 +192,9 @@ const SIZE_CLASSES = {
   lg: "size-[40px] text-body-md"
 };
 function PersonAvatar({ initials, hex, size = "md" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(appShell.Avatar, { className: SIZE_CLASSES[size], style: { background: hex }, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.AvatarFallback, { className: "bg-transparent text-white font-bold", children: initials }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Avatar, { className: SIZE_CLASSES[size], style: { background: hex }, children: /* @__PURE__ */ jsxRuntime.jsx(useTheme.AvatarFallback, { className: "bg-transparent text-white font-bold", children: initials }) });
 }
-const conversationColumnStyles = appShell.tv({
+const conversationColumnStyles = useTheme.tv({
   slots: {
     root: "flex flex-col flex-1 min-w-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
     header: "flex items-center gap-gp-lg px-pad-2xl py-pad-md border-b border-border-subtle shrink-0",
@@ -238,10 +237,10 @@ function ConversationColumn({
     ]);
     setText("");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: appShell.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: useTheme.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       onBackToList && /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -263,7 +262,7 @@ function ConversationColumn({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerInfo(), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerTitleRow(), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.headerName(), children: conversation.name }),
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag })
+          /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerMetaRow(), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[font-variant-numeric:tabular-nums]", children: conversation.id }),
@@ -285,7 +284,7 @@ function ConversationColumn({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             color: "primary",
             variant: "filled",
@@ -308,7 +307,7 @@ function ConversationColumn({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             color: "secondary",
             variant: "outline",
@@ -327,7 +326,7 @@ function ConversationColumn({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: send, className: s.composer(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -349,7 +348,7 @@ function ConversationColumn({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -360,7 +359,7 @@ function ConversationColumn({
         }
       ),
       text.trim() ? /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "primary",
           variant: "filled",
@@ -370,7 +369,7 @@ function ConversationColumn({
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { strokeWidth: 2.2 })
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "primary",
           variant: "filled",
@@ -421,7 +420,7 @@ function DetailSection({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-sm pt-pad-xs", children })
   ] });
 }
-const detailsColumnStyles = appShell.tv({
+const detailsColumnStyles = useTheme.tv({
   slots: {
     root: "relative flex flex-col shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
     /** Resize handle no left edge — 4px. */
@@ -461,7 +460,7 @@ function DetailsColumn({
     {
       "aria-label": "Detalhes do contato",
       style: { width },
-      className: appShell.cn(s.root(), className),
+      className: useTheme.cn(s.root(), className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -474,7 +473,7 @@ function DetailsColumn({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
           onBackToChat && /* @__PURE__ */ jsxRuntime.jsx(
-            appShell.Button,
+            useTheme.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -487,7 +486,7 @@ function DetailsColumn({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: s.title(), children: "Detalhes" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            appShell.Button,
+            useTheme.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -538,8 +537,8 @@ function DetailsColumn({
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.tagsRow(), children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.tagsLabel(), children: "Tags" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.tagsChips(), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag }),
-                    detail.extraTags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: "info", variant: "soft", size: "sm", shape: "pill", children: t }, t)),
+                    /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag }),
+                    detail.extraTags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { color: "info", variant: "soft", size: "sm", shape: "pill", children: t }, t)),
                     /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: s.tagAddBtn(), children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 11, strokeWidth: 2.2 }),
                       " tag"
@@ -573,7 +572,7 @@ function DetailsColumn({
     }
   );
 }
-const filterRowStyles = appShell.tv({
+const filterRowStyles = useTheme.tv({
   slots: {
     button: [
       "flex items-center gap-gp-md w-full",
@@ -638,7 +637,7 @@ function FilterRow({ item, isActive, onClick }) {
     }
   );
 }
-const filtersColumnStyles = appShell.tv({
+const filtersColumnStyles = useTheme.tv({
   slots: {
     /** Aside raiz da versão expandida (280px). */
     root: "flex flex-col w-[280px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
@@ -667,7 +666,7 @@ function FiltersColumn({
   className
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros", className: appShell.cn(s.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.scroll(), children: chatV2Mocks.FILTER_GROUPS.map((sec, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros", className: useTheme.cn(s.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.scroll(), children: chatV2Mocks.FILTER_GROUPS.map((sec, i) => /* @__PURE__ */ jsxRuntime.jsx(
     FilterSection,
     {
       title: sec.title,
@@ -689,7 +688,7 @@ function FilterSection({
   isFirst
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: appShell.cn(s.section(), !isFirst && s.sectionDivider()), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: useTheme.cn(s.section(), !isFirst && s.sectionDivider()), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle(), children: title }),
     items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       FilterRow,
@@ -702,7 +701,7 @@ function FilterSection({
     ))
   ] });
 }
-const railItemStyles = appShell.tv({
+const railItemStyles = useTheme.tv({
   slots: {
     button: [
       "relative grid place-items-center size-form-md rounded-radius-md cursor-pointer",
@@ -765,10 +764,10 @@ function FiltersRail({
   className
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros (compactos)", className: appShell.cn(s.rail(), className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.railScroll(), children: chatV2Mocks.FILTER_GROUPS.map(({ group, items }, gi) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros (compactos)", className: useTheme.cn(s.rail(), className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.railScroll(), children: chatV2Mocks.FILTER_GROUPS.map(({ group, items }, gi) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: appShell.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
+      className: useTheme.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
       children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
         RailItem,
         {
@@ -782,7 +781,7 @@ function FiltersRail({
     group
   )) }) });
 }
-const conversationListItemStyles = appShell.tv({
+const conversationListItemStyles = useTheme.tv({
   slots: {
     /** Card raiz (button) — flex horizontal com avatar + conteúdo. */
     root: [
@@ -855,7 +854,7 @@ function ConversationListItem({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.rowBot(), children: [
             /* @__PURE__ */ jsxRuntime.jsx(ChannelDot, { channel: conv.channel }),
-            /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: conv.tagKind, variant: "soft", size: "sm", shape: "pill", children: conv.tag }),
+            /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { color: conv.tagKind, variant: "soft", size: "sm", shape: "pill", children: conv.tag }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.id(), children: conv.id })
           ] })
         ] })
@@ -863,7 +862,7 @@ function ConversationListItem({
     }
   );
 }
-const queueColumnStyles = appShell.tv({
+const queueColumnStyles = useTheme.tv({
   slots: {
     root: "flex flex-col w-[340px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
     header: "flex items-center gap-gp-sm px-pad-md pt-pad-md pb-pad-md",
@@ -910,10 +909,10 @@ function QueueColumn({
       read: bySearch.filter((c) => c.unread === 0).length
     };
   }, [searchQuery]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Fila de conversas", className: appShell.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Fila de conversas", className: useTheme.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -925,7 +924,7 @@ function QueueColumn({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: s.title(), children: "Conversas" }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: filtered.length })
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: filtered.length })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.searchWrap(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.searchInner(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 14, strokeWidth: 1.8, className: s.searchIcon() }),
@@ -951,7 +950,7 @@ function QueueColumn({
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.chipsWrap(), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.ChipGroup,
+      useTheme.ChipGroup,
       {
         type: "single",
         value: queueFilter,
@@ -959,15 +958,15 @@ function QueueColumn({
         size: "md",
         ariaLabel: "Filtrar conversas",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "all", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useTheme.ChipGroupItem, { value: "all", children: [
             "Todas",
             counts.all > 0 && ` (${counts.all})`
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "unread", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useTheme.ChipGroupItem, { value: "unread", children: [
             "Não lidas",
             counts.unread > 0 && ` (${counts.unread})`
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "read", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(useTheme.ChipGroupItem, { value: "read", children: [
             "Lidas",
             counts.read > 0 && ` (${counts.read})`
           ] })
@@ -1037,7 +1036,7 @@ function ChatV2() {
   const activeConversation = chatV2Mocks.CONVERSATIONS.find((c) => c.id === activeId) ?? chatV2Mocks.CONVERSATIONS[0];
   const activeDetail = chatV2Mocks.CONVERSATION_DETAILS[activeConversation.id] ?? chatV2Mocks.DEFAULT_DETAIL;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.AppShell,
+    useTheme.AppShell,
     {
       contexts: appShellMocks.APP_SHELL_CONTEXTS,
       defaultActiveContextId: "inbox",
@@ -1073,7 +1072,7 @@ function ChatV2() {
             onQueueFilterChange: setQueueFilter,
             filtersCollapsed,
             onToggleFilters: () => setFiltersCollapsed((c) => !c),
-            className: appShell.cn(
+            className: useTheme.cn(
               mobileView === "list" ? `${mobileOverlay.active} max-md:z-[1]` : mobileOverlay.hidden
             )
           }
@@ -1085,7 +1084,7 @@ function ChatV2() {
             detailsOpen,
             onToggleDetails: handleToggleDetails,
             onBackToList: () => setMobileView("list"),
-            className: appShell.cn(
+            className: useTheme.cn(
               mobileView === "chat" ? `${mobileOverlay.active} max-md:z-[2]` : mobileOverlay.hidden
             )
           }
@@ -1104,7 +1103,7 @@ function ChatV2() {
             onBackToChat: () => setMobileView("chat"),
             width: detailsResize.width,
             onResizeStart: detailsResize.onResizeStart,
-            className: appShell.cn(
+            className: useTheme.cn(
               mobileView === "details" ? `${mobileOverlay.active} max-md:!w-full max-md:z-[3]` : mobileOverlay.hidden
             )
           }