@snksergio/design-system 0.35.0 → 0.37.0

package/dist-lib/preview/chat.cjs

@@ -2,12 +2,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useTheme = require("../chunks/useTheme-D4alxxGV.cjs");
+const avatar = require("../chunks/avatar-YpqQgJnh.cjs");
+const useTheme = require("../chunks/useTheme-DQ7FaHdv.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-CizzMZ20.cjs");
-const chatV2Styles = useTheme.tv({
+const input = require("../chunks/input-CJnonz-G.cjs");
+const chatV2Styles = avatar.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",
@@ -98,9 +99,9 @@ function ConversationActionsMenu({
   onAssign,
   onArchive
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      useTheme.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.Button,
       {
         color: "secondary",
         variant: "outline",
@@ -109,32 +110,32 @@ function ConversationActionsMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, {})
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-[200px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-[200px]", children: [
       showResolveInMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onResolve, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { onSelect: onResolve, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, {}),
           " Resolver"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {})
+        /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuSeparator, {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onCall, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { onSelect: onCall, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, {}),
         " Ligar"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onVideo, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { onSelect: onVideo, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}),
         " Vídeo chamada"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onAddTag, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { onSelect: onAddTag, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tag, {}),
         " Adicionar tag"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onSelect: onAssign, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { onSelect: onAssign, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, {}),
         " Atribuir"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { variant: "destructive", onSelect: onArchive, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuItem, { variant: "destructive", onSelect: onArchive, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, {}),
         " Arquivar"
       ] })
@@ -144,7 +145,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 = useTheme.tv({
+const messageBubbleStyles = avatar.tv({
   slots: {
     /** Wrapper que controla o alinhamento horizontal (esquerda/direita). */
     row: "flex",
@@ -192,9 +193,9 @@ const SIZE_CLASSES = {
   lg: "size-[40px] text-body-md"
 };
 function PersonAvatar({ initials, hex, size = "md" }) {
-  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 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(avatar.Avatar, { className: SIZE_CLASSES[size], style: { background: hex }, children: /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "bg-transparent text-white font-bold", children: initials }) });
 }
-const conversationColumnStyles = useTheme.tv({
+const conversationColumnStyles = avatar.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",
@@ -237,10 +238,10 @@ function ConversationColumn({
     ]);
     setText("");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: useTheme.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: avatar.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       onBackToList && /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -284,7 +285,7 @@ function ConversationColumn({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          useTheme.Button,
+          avatar.Button,
           {
             color: "primary",
             variant: "filled",
@@ -307,7 +308,7 @@ function ConversationColumn({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          useTheme.Button,
+          avatar.Button,
           {
             color: "secondary",
             variant: "outline",
@@ -326,7 +327,7 @@ function ConversationColumn({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: send, className: s.composer(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -348,7 +349,7 @@ function ConversationColumn({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -359,7 +360,7 @@ function ConversationColumn({
         }
       ),
       text.trim() ? /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "primary",
           variant: "filled",
@@ -369,7 +370,7 @@ function ConversationColumn({
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { strokeWidth: 2.2 })
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "primary",
           variant: "filled",
@@ -420,7 +421,7 @@ function DetailSection({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-sm pt-pad-xs", children })
   ] });
 }
-const detailsColumnStyles = useTheme.tv({
+const detailsColumnStyles = avatar.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. */
@@ -460,7 +461,7 @@ function DetailsColumn({
     {
       "aria-label": "Detalhes do contato",
       style: { width },
-      className: useTheme.cn(s.root(), className),
+      className: avatar.cn(s.root(), className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -473,7 +474,7 @@ function DetailsColumn({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
           onBackToChat && /* @__PURE__ */ jsxRuntime.jsx(
-            useTheme.Button,
+            avatar.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -486,7 +487,7 @@ function DetailsColumn({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: s.title(), children: "Detalhes" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            useTheme.Button,
+            avatar.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -572,7 +573,7 @@ function DetailsColumn({
     }
   );
 }
-const filterRowStyles = useTheme.tv({
+const filterRowStyles = avatar.tv({
   slots: {
     button: [
       "flex items-center gap-gp-md w-full",
@@ -637,7 +638,7 @@ function FilterRow({ item, isActive, onClick }) {
     }
   );
 }
-const filtersColumnStyles = useTheme.tv({
+const filtersColumnStyles = avatar.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",
@@ -666,7 +667,7 @@ function FiltersColumn({
   className
 }) {
   const s = filtersColumnStyles();
-  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(
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros", className: avatar.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,
@@ -688,7 +689,7 @@ function FilterSection({
   isFirst
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: useTheme.cn(s.section(), !isFirst && s.sectionDivider()), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: avatar.cn(s.section(), !isFirst && s.sectionDivider()), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle(), children: title }),
     items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       FilterRow,
@@ -701,7 +702,7 @@ function FilterSection({
     ))
   ] });
 }
-const railItemStyles = useTheme.tv({
+const railItemStyles = avatar.tv({
   slots: {
     button: [
       "relative grid place-items-center size-form-md rounded-radius-md cursor-pointer",
@@ -764,10 +765,10 @@ function FiltersRail({
   className
 }) {
   const s = filtersColumnStyles();
-  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(
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros (compactos)", className: avatar.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: useTheme.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
+      className: avatar.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
       children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
         RailItem,
         {
@@ -781,7 +782,7 @@ function FiltersRail({
     group
   )) }) });
 }
-const conversationListItemStyles = useTheme.tv({
+const conversationListItemStyles = avatar.tv({
   slots: {
     /** Card raiz (button) — flex horizontal com avatar + conteúdo. */
     root: [
@@ -862,7 +863,7 @@ function ConversationListItem({
     }
   );
 }
-const queueColumnStyles = useTheme.tv({
+const queueColumnStyles = avatar.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",
@@ -909,10 +910,10 @@ function QueueColumn({
       read: bySearch.filter((c) => c.unread === 0).length
     };
   }, [searchQuery]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Fila de conversas", className: useTheme.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Fila de conversas", className: avatar.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        useTheme.Button,
+        avatar.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -1072,7 +1073,7 @@ function ChatV2() {
             onQueueFilterChange: setQueueFilter,
             filtersCollapsed,
             onToggleFilters: () => setFiltersCollapsed((c) => !c),
-            className: useTheme.cn(
+            className: avatar.cn(
               mobileView === "list" ? `${mobileOverlay.active} max-md:z-[1]` : mobileOverlay.hidden
             )
           }
@@ -1084,7 +1085,7 @@ function ChatV2() {
             detailsOpen,
             onToggleDetails: handleToggleDetails,
             onBackToList: () => setMobileView("list"),
-            className: useTheme.cn(
+            className: avatar.cn(
               mobileView === "chat" ? `${mobileOverlay.active} max-md:z-[2]` : mobileOverlay.hidden
             )
           }
@@ -1103,7 +1104,7 @@ function ChatV2() {
             onBackToChat: () => setMobileView("chat"),
             width: detailsResize.width,
             onResizeStart: detailsResize.onResizeStart,
-            className: useTheme.cn(
+            className: avatar.cn(
               mobileView === "details" ? `${mobileOverlay.active} max-md:!w-full max-md:z-[3]` : mobileOverlay.hidden
             )
           }