@snksergio/design-system 0.61.0 → 0.63.0

package/dist-lib/ai/exemplos/chat/components/ConversationActionsMenu/conversation-actions-menu.tsx

@@ -0,0 +1,83 @@
+import {
+  Archive,
+  CheckCircle2,
+  MoreVertical,
+  Phone,
+  Tag,
+  UserPlus,
+  Video,
+} from "lucide-react";
+import { Button } from "@/components/ui/Button/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/shadcn/dropdown-menu";
+
+export type ConversationActionsMenuProps = {
+  /** Quando true, adiciona "Resolver" no topo do dropdown (mobile compact). */
+  showResolveInMenu?: boolean;
+  onResolve?: () => void;
+  onCall?: () => void;
+  onVideo?: () => void;
+  onAddTag?: () => void;
+  onAssign?: () => void;
+  onArchive?: () => void;
+};
+
+/**
+ * Dropdown "..." do header da conversa com 5–6 ações (Ligar, Vídeo, Tag,
+ * Atribuir, Arquivar; opcionalmente Resolver no topo pra mobile).
+ */
+export function ConversationActionsMenu({
+  showResolveInMenu = false,
+  onResolve,
+  onCall,
+  onVideo,
+  onAddTag,
+  onAssign,
+  onArchive,
+}: ConversationActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          color="secondary"
+          variant="outline"
+          size="icon-sm"
+          aria-label="Mais opções"
+        >
+          <MoreVertical />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" sideOffset={6} className="min-w-[200px]">
+        {showResolveInMenu && (
+          <>
+            <DropdownMenuItem onSelect={onResolve}>
+              <CheckCircle2 /> Resolver
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem onSelect={onCall}>
+          <Phone /> Ligar
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onVideo}>
+          <Video /> Vídeo chamada
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onAddTag}>
+          <Tag /> Adicionar tag
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onAssign}>
+          <UserPlus /> Atribuir
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" onSelect={onArchive}>
+          <Archive /> Arquivar
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/ConversationActionsMenu/index.ts

@@ -0,0 +1,4 @@
+export {
+  ConversationActionsMenu,
+  type ConversationActionsMenuProps,
+} from "./conversation-actions-menu";

package/dist-lib/ai/exemplos/chat/components/ConversationColumn/conversation-column.styles.ts

@@ -0,0 +1,22 @@
+import { tv } from "@/utils/tv";
+
+export const conversationColumnStyles = 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",
+    headerInfo: "flex-1 min-w-0 flex flex-col gap-[2px]",
+    headerTitleRow: "flex items-center gap-gp-sm",
+    headerName:
+      "text-title-md text-fg-default whitespace-nowrap overflow-hidden text-ellipsis",
+    headerMetaRow:
+      "flex flex-wrap items-center gap-x-gp-sm gap-y-[2px] text-caption-sm text-fg-muted min-w-0",
+    headerActions: "flex items-center gap-gp-sm shrink-0",
+    statusInner: "inline-flex items-center gap-[4px]",
+    statusDot: "size-[6px] rounded-radius-full shrink-0",
+    thread:
+      "flex-1 min-h-0 overflow-y-auto bg-bg-muted dark:bg-bg-canvas px-pad-3xl py-pad-2xl flex flex-col gap-gp-md",
+    composer:
+      "flex items-center gap-gp-sm px-pad-2xl py-pad-md border-t border-border-subtle shrink-0 bg-bg-surface",
+  },
+});

package/dist-lib/ai/exemplos/chat/components/ConversationColumn/conversation-column.tsx

@@ -0,0 +1,203 @@
+import { useState } from "react";
+import {
+  ArrowLeft,
+  CheckCircle2,
+  Mic,
+  PanelRightClose,
+  PanelRightOpen,
+  Paperclip,
+  Send,
+  Smile,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { Input } from "@/components/shadcn/input";
+import { SAMPLE_MESSAGES, STATUS_DOT } from "../../chat-v2-mocks";
+import type { Message } from "../../chat-v2.types";
+import { ChannelDot } from "../ChannelDot/channel-dot";
+import { ConversationActionsMenu } from "../ConversationActionsMenu";
+import { DateSeparator } from "../DateSeparator/date-separator";
+import { MessageBubble } from "../MessageBubble";
+import { PersonAvatar } from "../PersonAvatar";
+import { conversationColumnStyles } from "./conversation-column.styles";
+import type { ConversationColumnProps } from "./conversation-column.types";
+
+/**
+ * Coluna central. Header com avatar + nome + meta (id/canal/status) + ações,
+ * thread scrollável com `DateSeparator` + `MessageBubble`, composer com Input
+ * + botões. Estado local: texto digitado + lista de mensagens.
+ */
+export function ConversationColumn({
+  conversation,
+  detailsOpen,
+  onToggleDetails,
+  onBackToList,
+  className,
+}: ConversationColumnProps) {
+  const s = conversationColumnStyles();
+  const [text, setText] = useState("");
+  const [msgs, setMsgs] = useState<Message[]>(SAMPLE_MESSAGES);
+
+  const send = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if (!text.trim()) return;
+    setMsgs((m) => [
+      ...m,
+      {
+        id: Date.now(),
+        from: "me",
+        text: text.trim(),
+        time: new Date().toLocaleTimeString("pt-BR", {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+        status: "sent",
+      },
+    ]);
+    setText("");
+  };
+
+  return (
+    <section aria-label="Conversa" className={cn(s.root(), className)}>
+      {/* Header da conversa */}
+      <header className={s.header()}>
+        {onBackToList && (
+          <Button
+            color="secondary"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Voltar pra lista"
+            onClick={onBackToList}
+            className="md:hidden"
+          >
+            <ArrowLeft />
+          </Button>
+        )}
+        <div className="max-md:hidden">
+          <PersonAvatar
+            initials={conversation.initials}
+            hex={conversation.avatarHex}
+            size="md"
+          />
+        </div>
+
+        <div className={s.headerInfo()}>
+          <div className={s.headerTitleRow()}>
+            <span className={s.headerName()}>{conversation.name}</span>
+            <Chip color={conversation.tagKind} variant="soft" size="sm" shape="pill">
+              {conversation.tag}
+            </Chip>
+          </div>
+
+          <div className={s.headerMetaRow()}>
+            <span className="[font-variant-numeric:tabular-nums]">
+              {conversation.id}
+            </span>
+            <span aria-hidden>·</span>
+            <ChannelDot channel={conversation.channel} />
+            <span aria-hidden>·</span>
+            <span className={s.statusInner()}>
+              <span
+                className={s.statusDot()}
+                style={{ background: STATUS_DOT[conversation.status] }}
+                aria-hidden
+              />
+              {conversation.statusLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className={s.headerActions()}>
+          <Button
+            color="primary"
+            variant="filled"
+            size="sm"
+            iconLeft={<CheckCircle2 />}
+            className="max-md:hidden"
+          >
+            Resolver
+          </Button>
+          <ConversationActionsMenu
+            showResolveInMenu
+            onResolve={() => console.log("resolver")}
+            onCall={() => console.log("ligar")}
+            onVideo={() => console.log("video")}
+            onAddTag={() => console.log("tag")}
+            onAssign={() => console.log("atribuir")}
+            onArchive={() => console.log("arquivar")}
+          />
+          <Button
+            color="secondary"
+            variant="outline"
+            size="icon-sm"
+            aria-label={detailsOpen ? "Ocultar detalhes" : "Mostrar detalhes"}
+            aria-pressed={detailsOpen}
+            onClick={onToggleDetails}
+          >
+            {detailsOpen ? <PanelRightClose /> : <PanelRightOpen />}
+          </Button>
+        </div>
+      </header>
+
+      {/* Thread */}
+      <div className={s.thread()} aria-live="polite">
+        <DateSeparator label="Hoje" />
+        {msgs.map((m) => (
+          <MessageBubble key={m.id} msg={m} />
+        ))}
+      </div>
+
+      {/* Composer */}
+      <form onSubmit={send} className={s.composer()}>
+        <Button
+          color="secondary"
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Anexar"
+          type="button"
+        >
+          <Paperclip />
+        </Button>
+        <Input
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Digite uma mensagem..."
+          aria-label="Mensagem"
+          className="flex-1"
+        />
+        <Button
+          color="secondary"
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Emoji"
+          type="button"
+        >
+          <Smile />
+        </Button>
+        {text.trim() ? (
+          <Button
+            color="primary"
+            variant="filled"
+            size="icon-sm"
+            aria-label="Enviar"
+            type="submit"
+          >
+            <Send strokeWidth={2.2} />
+          </Button>
+        ) : (
+          <Button
+            color="primary"
+            variant="filled"
+            size="icon-sm"
+            aria-label="Gravar áudio"
+            type="button"
+          >
+            <Mic strokeWidth={2.2} />
+          </Button>
+        )}
+      </form>
+    </section>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/ConversationColumn/conversation-column.types.ts

@@ -0,0 +1,10 @@
+import type { Conversation } from "../../chat-v2.types";
+
+export type ConversationColumnProps = {
+  conversation: Conversation;
+  detailsOpen: boolean;
+  onToggleDetails: () => void;
+  /** Visível só em mobile (max-md:flex). Desktop esconde. */
+  onBackToList?: () => void;
+  className?: string;
+};

package/dist-lib/ai/exemplos/chat/components/ConversationColumn/index.ts

@@ -0,0 +1,2 @@
+export { ConversationColumn } from "./conversation-column";
+export type { ConversationColumnProps } from "./conversation-column.types";

package/dist-lib/ai/exemplos/chat/components/ConversationListItem/conversation-list-item.styles.ts

@@ -0,0 +1,55 @@
+import { tv, type VariantProps } from "@/utils/tv";
+
+export const conversationListItemStyles = tv({
+  slots: {
+    /** Card raiz (button) — flex horizontal com avatar + conteúdo. */
+    root: [
+      "group/conv text-left relative",
+      "flex gap-gp-md p-pad-md rounded-radius-md",
+      "cursor-pointer transition-colors duration-150",
+    ].join(" "),
+    /** Coluna direita (3 rows). */
+    content: "flex-1 min-w-0 flex flex-col gap-[3px]",
+    /** Row 1 — nome + horário. */
+    rowTop: "flex items-center gap-gp-sm",
+    /** Nome (ellipsis). */
+    name: "text-body-sm font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis flex-1 min-w-0",
+    /** Horário. */
+    time: "text-caption-sm text-fg-muted shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Row 2 — preview + badge unread. */
+    rowMid: "flex items-center gap-gp-sm",
+    /** Preview da última mensagem (ellipsis). */
+    preview:
+      "text-body-xs font-normal text-fg-muted whitespace-nowrap overflow-hidden text-ellipsis flex-1 min-w-0",
+    /** Badge contador de não lidas — `caption-xs` (10/400) + override
+        `font-bold leading-none` pra centralizar o número dentro do círculo.
+        Tabular-nums alinha dígitos verticalmente em badges com counters dinâmicos. */
+    unread:
+      "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px] rounded-radius-full bg-bg-brand text-fg-on-brand text-caption-xs font-bold leading-none shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Row 3 — canal + tag + ID. */
+    rowBot: "flex items-center gap-gp-sm",
+    /** ID da conversa (canto inferior direito). */
+    id: "ml-auto text-caption-xs text-fg-subtle shrink-0 [font-variant-numeric:tabular-nums]",
+  },
+  variants: {
+    isActive: {
+      true: {
+        root: [
+          "bg-bg-muted dark:bg-bg-emphasis",
+          "before:content-[''] before:absolute before:left-0 before:top-[10px] before:bottom-[10px]",
+          "before:w-[3px] before:bg-bg-brand before:rounded-r-[2px] before:pointer-events-none",
+        ].join(" "),
+      },
+      false: {
+        root: "hover:bg-bg-muted",
+      },
+    },
+  },
+  defaultVariants: {
+    isActive: false,
+  },
+});
+
+export type ConversationListItemVariants = VariantProps<
+  typeof conversationListItemStyles
+>;

package/dist-lib/ai/exemplos/chat/components/ConversationListItem/conversation-list-item.tsx

@@ -0,0 +1,52 @@
+import { Chip } from "@/components/ui/Chip";
+import { ChannelDot } from "../ChannelDot/channel-dot";
+import { PersonAvatar } from "../PersonAvatar";
+import { conversationListItemStyles } from "./conversation-list-item.styles";
+import type { ConversationListItemProps } from "./conversation-list-item.types";
+
+/**
+ * Item da fila de conversas. Avatar (36px) à esquerda + 3 rows de info à direita.
+ * Variant `isActive` adiciona strip lateral brand de 3px + bg muted.
+ */
+export function ConversationListItem({
+  conv,
+  isActive,
+  onSelect,
+}: ConversationListItemProps) {
+  const s = conversationListItemStyles({ isActive });
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(conv.id)}
+      className={s.root()}
+      aria-pressed={isActive}
+    >
+      <PersonAvatar initials={conv.initials} hex={conv.avatarHex} size="md" />
+
+      <div className={s.content()}>
+        <div className={s.rowTop()}>
+          <span className={s.name()}>{conv.name}</span>
+          <span className={s.time()}>{conv.time}</span>
+        </div>
+
+        <div className={s.rowMid()}>
+          <span className={s.preview()}>{conv.last}</span>
+          {conv.unread > 0 && (
+            <span className={s.unread()} aria-label={`${conv.unread} não lidas`}>
+              {conv.unread}
+            </span>
+          )}
+        </div>
+
+        <div className={s.rowBot()}>
+          <ChannelDot channel={conv.channel} />
+          <Chip color={conv.tagKind} variant="soft" size="sm" shape="pill">
+            {conv.tag}
+          </Chip>
+          <span className={s.id()}>{conv.id}</span>
+        </div>
+      </div>
+    </button>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/ConversationListItem/conversation-list-item.types.ts

@@ -0,0 +1,7 @@
+import type { Conversation } from "../../chat-v2.types";
+
+export type ConversationListItemProps = {
+  conv: Conversation;
+  isActive: boolean;
+  onSelect: (id: string) => void;
+};

package/dist-lib/ai/exemplos/chat/components/ConversationListItem/index.ts

@@ -0,0 +1,2 @@
+export { ConversationListItem } from "./conversation-list-item";
+export type { ConversationListItemProps } from "./conversation-list-item.types";

package/dist-lib/ai/exemplos/chat/components/DateSeparator/date-separator.tsx

@@ -0,0 +1,18 @@
+export type DateSeparatorProps = {
+  /** Texto exibido — ex: "Hoje", "Ontem", "12 mar 2024". */
+  label: string;
+};
+
+/**
+ * Pílula centralizada com label de data entre grupos de mensagens.
+ * Visual: chip arredondado com `bg-bg-muted`, tipografia tabular.
+ */
+export function DateSeparator({ label }: DateSeparatorProps) {
+  return (
+    <div className="flex items-center justify-center my-pad-md">
+      <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]">
+        {label}
+      </span>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/DetailField/detail-field.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export type DetailFieldProps = {
+  /** Label à esquerda (text-fg-muted). */
+  label: string;
+  /** Valor à direita — string, número ou ReactNode (Chip, link, etc). */
+  value: ReactNode;
+};
+
+/**
+ * Row label : value usada nas seções de detalhes (Contato, Atendimento).
+ * Layout flex baseline justify-between, quebra de palavra no valor.
+ */
+export function DetailField({ label, value }: DetailFieldProps) {
+  return (
+    <div className="flex items-baseline justify-between gap-gp-md py-pad-2xs">
+      <span className="text-body-xs font-normal text-fg-muted shrink-0">{label}</span>
+      <span className="text-body-xs font-normal text-fg-default text-right break-words min-w-0">
+        {value || "—"}
+      </span>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/DetailSection/detail-section.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+
+export type DetailSectionProps = {
+  title: string;
+  open: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+};
+
+/**
+ * Seção colapsável da `DetailsColumn` (Contato / Atendimento / Histórico).
+ * Header clicável com chevron rotativo + corpo só monta quando `open`.
+ */
+export function DetailSection({
+  title,
+  open,
+  onToggle,
+  children,
+}: DetailSectionProps) {
+  return (
+    <section className="flex flex-col border-b border-border-subtle pb-pad-xl last:border-b-0 last:pb-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={open}
+        className="flex items-center justify-between w-full px-pad-sm py-pad-sm -mx-pad-sm rounded-radius-md cursor-pointer text-left transition-colors duration-150 hover:bg-bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-brand"
+      >
+        <span className="text-body-sm font-semibold text-fg-default">{title}</span>
+        <ChevronDown
+          size={14}
+          className={[
+            "text-fg-muted transition-transform duration-150",
+            open ? "" : "-rotate-90",
+          ].join(" ")}
+        />
+      </button>
+      {open && <div className="flex flex-col gap-gp-sm pt-pad-xs">{children}</div>}
+    </section>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/DetailSection/index.ts

@@ -0,0 +1 @@
+export { DetailSection, type DetailSectionProps } from "./detail-section";

package/dist-lib/ai/exemplos/chat/components/DetailsColumn/details-column.styles.ts

@@ -0,0 +1,30 @@
+import { tv } from "@/utils/tv";
+
+export const detailsColumnStyles = 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. */
+    handle:
+      "absolute left-0 top-0 bottom-0 w-[4px] z-[1] bg-transparent cursor-col-resize hover:bg-bg-brand active:bg-bg-brand transition-colors duration-150 focus-visible:outline-none focus-visible:bg-bg-brand",
+    header:
+      "flex items-center gap-gp-md px-pad-2xl py-pad-lg border-b border-border-subtle shrink-0",
+    title: "m-0 text-title-md text-fg-default flex-1",
+    body: "flex-1 min-h-0 overflow-y-auto px-pad-2xl py-pad-md flex flex-col gap-gp-2xl",
+    contactHead: "flex flex-col items-center gap-gp-md pb-pad-md",
+    contactName: "text-body-md font-semibold text-fg-default text-center",
+    tagsRow: "flex flex-col gap-gp-sm pt-pad-xs",
+    tagsLabel: "text-body-xs font-normal text-fg-muted",
+    tagsChips: "flex items-center gap-gp-xs flex-wrap",
+    tagAddBtn:
+      "inline-flex items-center gap-[3px] px-pad-md h-[22px] rounded-radius-full border border-dashed border-border-input text-caption-sm font-medium text-fg-muted hover:bg-bg-muted hover:text-fg-default transition-colors",
+    historyEmpty: "text-body-xs font-normal text-fg-subtle text-center py-pad-md",
+    historyList: "m-0 p-0 list-none flex flex-col gap-gp-sm",
+    historyItem:
+      "flex gap-gp-md p-pad-md rounded-radius-md bg-bg-muted border border-border-subtle",
+    historyId:
+      "text-caption-sm text-fg-muted shrink-0 [font-variant-numeric:tabular-nums] pt-[1px]",
+    historyBody: "flex-1 min-w-0 flex flex-col gap-[1px]",
+    historySubject: "text-body-xs text-fg-default",
+    historyMeta: "text-caption-sm text-fg-muted",
+  },
+});