@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/preview/chat.cjs

@@ -2,14 +2,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const chipGroup = require("../chunks/chip-group-2-f_Yo7Y.cjs");
+const appShell = require("../chunks/app-shell-Cyh8AUJT.cjs");
 const useTheme = require("../chunks/useTheme-Dee4mo-A.cjs");
-const appShell = require("../chunks/app-shell-CPx9X7zP.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-BWevV7up.cjs");
-const chatV2Styles = chipGroup.tv({
+const input = require("../chunks/input-BjUSWce3.cjs");
+const chatV2Styles = appShell.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",
@@ -102,7 +101,7 @@ function ConversationActionsMenu({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      chipGroup.Button,
+      appShell.Button,
       {
         color: "secondary",
         variant: "outline",
@@ -146,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 = chipGroup.tv({
+const messageBubbleStyles = appShell.tv({
   slots: {
     /** Wrapper que controla o alinhamento horizontal (esquerda/direita). */
     row: "flex",
@@ -196,7 +195,7 @@ const SIZE_CLASSES = {
 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 }) });
 }
-const conversationColumnStyles = chipGroup.tv({
+const conversationColumnStyles = appShell.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",
@@ -239,10 +238,10 @@ function ConversationColumn({
     ]);
     setText("");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: chipGroup.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Conversa", className: appShell.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       onBackToList && /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -264,7 +263,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(chipGroup.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag })
+          /* @__PURE__ */ jsxRuntime.jsx(appShell.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 }),
@@ -286,7 +285,7 @@ function ConversationColumn({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chipGroup.Button,
+          appShell.Button,
           {
             color: "primary",
             variant: "filled",
@@ -309,7 +308,7 @@ function ConversationColumn({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chipGroup.Button,
+          appShell.Button,
           {
             color: "secondary",
             variant: "outline",
@@ -328,7 +327,7 @@ function ConversationColumn({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: send, className: s.composer(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -350,7 +349,7 @@ function ConversationColumn({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -361,7 +360,7 @@ function ConversationColumn({
         }
       ),
       text.trim() ? /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "primary",
           variant: "filled",
@@ -371,7 +370,7 @@ function ConversationColumn({
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { strokeWidth: 2.2 })
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "primary",
           variant: "filled",
@@ -422,7 +421,7 @@ function DetailSection({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-sm pt-pad-xs", children })
   ] });
 }
-const detailsColumnStyles = chipGroup.tv({
+const detailsColumnStyles = appShell.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. */
@@ -462,7 +461,7 @@ function DetailsColumn({
     {
       "aria-label": "Detalhes do contato",
       style: { width },
-      className: chipGroup.cn(s.root(), className),
+      className: appShell.cn(s.root(), className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -475,7 +474,7 @@ function DetailsColumn({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
           onBackToChat && /* @__PURE__ */ jsxRuntime.jsx(
-            chipGroup.Button,
+            appShell.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -488,7 +487,7 @@ function DetailsColumn({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: s.title(), children: "Detalhes" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chipGroup.Button,
+            appShell.Button,
             {
               color: "secondary",
               variant: "ghost",
@@ -539,8 +538,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(chipGroup.Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag }),
-                    detail.extraTags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: "info", variant: "soft", size: "sm", shape: "pill", children: t }, t)),
+                    /* @__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.jsxs("button", { type: "button", className: s.tagAddBtn(), children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 11, strokeWidth: 2.2 }),
                       " tag"
@@ -574,7 +573,7 @@ function DetailsColumn({
     }
   );
 }
-const filterRowStyles = chipGroup.tv({
+const filterRowStyles = appShell.tv({
   slots: {
     button: [
       "flex items-center gap-gp-md w-full",
@@ -639,7 +638,7 @@ function FilterRow({ item, isActive, onClick }) {
     }
   );
 }
-const filtersColumnStyles = chipGroup.tv({
+const filtersColumnStyles = appShell.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",
@@ -668,7 +667,7 @@ function FiltersColumn({
   className
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros", className: chipGroup.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: appShell.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,
@@ -690,7 +689,7 @@ function FilterSection({
   isFirst
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chipGroup.cn(s.section(), !isFirst && s.sectionDivider()), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: appShell.cn(s.section(), !isFirst && s.sectionDivider()), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle(), children: title }),
     items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       FilterRow,
@@ -703,7 +702,7 @@ function FilterSection({
     ))
   ] });
 }
-const railItemStyles = chipGroup.tv({
+const railItemStyles = appShell.tv({
   slots: {
     button: [
       "relative grid place-items-center size-form-md rounded-radius-md cursor-pointer",
@@ -766,10 +765,10 @@ function FiltersRail({
   className
 }) {
   const s = filtersColumnStyles();
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": "Filtros (compactos)", className: chipGroup.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: appShell.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: chipGroup.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
+      className: appShell.cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
       children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
         RailItem,
         {
@@ -783,7 +782,7 @@ function FiltersRail({
     group
   )) }) });
 }
-const conversationListItemStyles = chipGroup.tv({
+const conversationListItemStyles = appShell.tv({
   slots: {
     /** Card raiz (button) — flex horizontal com avatar + conteúdo. */
     root: [
@@ -856,7 +855,7 @@ function ConversationListItem({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.rowBot(), children: [
             /* @__PURE__ */ jsxRuntime.jsx(ChannelDot, { channel: conv.channel }),
-            /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: conv.tagKind, variant: "soft", size: "sm", shape: "pill", children: conv.tag }),
+            /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { color: conv.tagKind, variant: "soft", size: "sm", shape: "pill", children: conv.tag }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.id(), children: conv.id })
           ] })
         ] })
@@ -864,7 +863,7 @@ function ConversationListItem({
     }
   );
 }
-const queueColumnStyles = chipGroup.tv({
+const queueColumnStyles = appShell.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",
@@ -911,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: chipGroup.cn(s.root(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Fila de conversas", className: appShell.cn(s.root(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.header(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chipGroup.Button,
+        appShell.Button,
         {
           color: "secondary",
           variant: "ghost",
@@ -926,7 +925,7 @@ function QueueColumn({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: s.title(), children: "Conversas" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chipGroup.Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: filtered.length })
+      /* @__PURE__ */ jsxRuntime.jsx(appShell.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() }),
@@ -952,7 +951,7 @@ function QueueColumn({
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.chipsWrap(), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      chipGroup.ChipGroup,
+      appShell.ChipGroup,
       {
         type: "single",
         value: queueFilter,
@@ -960,15 +959,15 @@ function QueueColumn({
         size: "md",
         ariaLabel: "Filtrar conversas",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: "all", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "all", children: [
             "Todas",
             counts.all > 0 && ` (${counts.all})`
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: "unread", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "unread", children: [
             "Não lidas",
             counts.unread > 0 && ` (${counts.unread})`
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(chipGroup.ChipGroupItem, { value: "read", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(appShell.ChipGroupItem, { value: "read", children: [
             "Lidas",
             counts.read > 0 && ` (${counts.read})`
           ] })
@@ -1074,7 +1073,7 @@ function ChatV2() {
             onQueueFilterChange: setQueueFilter,
             filtersCollapsed,
             onToggleFilters: () => setFiltersCollapsed((c) => !c),
-            className: chipGroup.cn(
+            className: appShell.cn(
               mobileView === "list" ? `${mobileOverlay.active} max-md:z-[1]` : mobileOverlay.hidden
             )
           }
@@ -1086,7 +1085,7 @@ function ChatV2() {
             detailsOpen,
             onToggleDetails: handleToggleDetails,
             onBackToList: () => setMobileView("list"),
-            className: chipGroup.cn(
+            className: appShell.cn(
               mobileView === "chat" ? `${mobileOverlay.active} max-md:z-[2]` : mobileOverlay.hidden
             )
           }
@@ -1105,7 +1104,7 @@ function ChatV2() {
             onBackToChat: () => setMobileView("chat"),
             width: detailsResize.width,
             onResizeStart: detailsResize.onResizeStart,
-            className: chipGroup.cn(
+            className: appShell.cn(
               mobileView === "details" ? `${mobileOverlay.active} max-md:!w-full max-md:z-[3]` : mobileOverlay.hidden
             )
           }