@snksergio/design-system 0.61.0 → 0.63.0

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

@@ -0,0 +1,142 @@
+import { ArrowLeft, Plus, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { CHANNEL_LABEL } from "../../chat-v2-mocks";
+import { DetailField } from "../DetailField/detail-field";
+import { DetailSection } from "../DetailSection";
+import { PersonAvatar } from "../PersonAvatar";
+import { detailsColumnStyles } from "./details-column.styles";
+import type { DetailsColumnProps } from "./details-column.types";
+
+/**
+ * Coluna direita: header com título + close, resize handle no left edge (4px),
+ * body scrollável com 3 accordions (Contato, Atendimento, Histórico).
+ * Width controlado pelo hook `useResizable` no parent.
+ */
+export function DetailsColumn({
+  conversation,
+  detail,
+  openSections,
+  onToggleSection,
+  onClose,
+  width,
+  onResizeStart,
+  onBackToChat,
+  className,
+}: DetailsColumnProps) {
+  const s = detailsColumnStyles();
+
+  return (
+    <aside
+      aria-label="Detalhes do contato"
+      style={{ width }}
+      className={cn(s.root(), className)}
+    >
+      <button
+        type="button"
+        onMouseDown={onResizeStart}
+        aria-label="Redimensionar painel de detalhes"
+        className={s.handle()}
+      />
+
+      <header className={s.header()}>
+        {onBackToChat && (
+          <Button
+            color="secondary"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Voltar pra conversa"
+            onClick={onBackToChat}
+            className="md:hidden"
+          >
+            <ArrowLeft />
+          </Button>
+        )}
+        <h3 className={s.title()}>Detalhes</h3>
+        <Button
+          color="secondary"
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Fechar painel"
+          onClick={onClose}
+        >
+          <X />
+        </Button>
+      </header>
+
+      <div className={s.body()}>
+        <DetailSection
+          title="Contato"
+          open={openSections.contact}
+          onToggle={() => onToggleSection("contact")}
+        >
+          <div className={s.contactHead()}>
+            <PersonAvatar
+              initials={conversation.initials}
+              hex={conversation.avatarHex}
+              size="lg"
+            />
+            <div className={s.contactName()}>{conversation.name}</div>
+          </div>
+          <DetailField label="Telefone" value={detail.phone} />
+          <DetailField label="Email" value={detail.email} />
+          <DetailField label="Primeiro contato" value={detail.firstContact} />
+        </DetailSection>
+
+        <DetailSection
+          title="Atendimento"
+          open={openSections.ticket}
+          onToggle={() => onToggleSection("ticket")}
+        >
+          <DetailField label="ID" value={conversation.id} />
+          <DetailField label="Status" value={conversation.statusLabel} />
+          <DetailField label="Atribuído a" value={detail.assignedTo} />
+          <DetailField label="Canal" value={CHANNEL_LABEL[conversation.channel]} />
+          <DetailField label="Criado em" value={detail.createdAt} />
+
+          <div className={s.tagsRow()}>
+            <span className={s.tagsLabel()}>Tags</span>
+            <div className={s.tagsChips()}>
+              <Chip color={conversation.tagKind} variant="soft" size="sm" shape="pill">
+                {conversation.tag}
+              </Chip>
+              {detail.extraTags.map((t) => (
+                <Chip key={t} color="info" variant="soft" size="sm" shape="pill">
+                  {t}
+                </Chip>
+              ))}
+              <button type="button" className={s.tagAddBtn()}>
+                <Plus size={11} strokeWidth={2.2} /> tag
+              </button>
+            </div>
+          </div>
+        </DetailSection>
+
+        <DetailSection
+          title="Histórico"
+          open={openSections.history}
+          onToggle={() => onToggleSection("history")}
+        >
+          {detail.history.length === 0 ? (
+            <div className={s.historyEmpty()}>Nenhum atendimento anterior.</div>
+          ) : (
+            <ul className={s.historyList()}>
+              {detail.history.map((h) => (
+                <li key={h.id} className={s.historyItem()}>
+                  <span className={s.historyId()}>{h.id}</span>
+                  <div className={s.historyBody()}>
+                    <span className={s.historySubject()}>{h.subject}</span>
+                    <span className={s.historyMeta()}>
+                      {h.date} · {h.status}
+                    </span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </DetailSection>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { Conversation, ConversationDetail } from "../../chat-v2.types";
+
+export type SectionsState = Record<"contact" | "ticket" | "history", boolean>;
+
+export type DetailsColumnProps = {
+  conversation: Conversation;
+  detail: ConversationDetail;
+  openSections: SectionsState;
+  onToggleSection: (id: keyof SectionsState) => void;
+  onClose: () => void;
+  width: number;
+  onResizeStart: (e: React.MouseEvent) => void;
+  /** Em mobile: botão de voltar pro chat. Desktop esconde. */
+  onBackToChat?: () => void;
+  className?: string;
+};

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

@@ -0,0 +1,5 @@
+export { DetailsColumn } from "./details-column";
+export type {
+  DetailsColumnProps,
+  SectionsState,
+} from "./details-column.types";

package/dist-lib/ai/exemplos/chat/components/FilterRow/filter-row.styles.ts

@@ -0,0 +1,37 @@
+import { tv, type VariantProps } from "@/utils/tv";
+
+export const filterRowStyles = tv({
+  slots: {
+    button: [
+      "flex items-center gap-gp-md w-full",
+      "px-pad-md py-pad-sm rounded-radius-md text-left",
+      "transition-colors duration-150 cursor-pointer",
+    ].join(" "),
+    /** Leading slot (icon ou dot fallback). */
+    leading: "shrink-0 inline-flex items-center justify-center size-[18px]",
+    /** Label do filtro (ellipsis). */
+    label:
+      "flex-1 min-w-0 text-body-xs whitespace-nowrap overflow-hidden text-ellipsis",
+    /** Dot brand 6px pra "tem novidades". */
+    unreadDot: "size-[6px] rounded-radius-full bg-bg-brand shrink-0",
+    /** Contador à direita. */
+    count: "text-caption-sm text-fg-muted shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Dot fallback (quando item não tem icon). */
+    fallbackDot: "size-[8px] rounded-radius-full",
+  },
+  variants: {
+    isActive: {
+      true: {
+        button: "bg-bg-muted dark:bg-bg-emphasis text-fg-default font-semibold",
+      },
+      false: {
+        button: "text-fg-muted hover:bg-bg-muted hover:text-fg-default",
+      },
+    },
+  },
+  defaultVariants: {
+    isActive: false,
+  },
+});
+
+export type FilterRowVariants = VariantProps<typeof filterRowStyles>;

package/dist-lib/ai/exemplos/chat/components/FilterRow/filter-row.tsx

@@ -0,0 +1,45 @@
+import type { FilterItem } from "../../chat-v2.types";
+import { filterRowStyles } from "./filter-row.styles";
+
+export type FilterRowProps = {
+  item: FilterItem;
+  isActive: boolean;
+  onClick: () => void;
+};
+
+/**
+ * Row clicável da `FiltersColumn` expandida. Layout: leading (icon ou dot) +
+ * label (ellipsis) + dot unread opcional + count tabular.
+ */
+export function FilterRow({ item, isActive, onClick }: FilterRowProps) {
+  const Icon = item.icon;
+  const s = filterRowStyles({ isActive });
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={isActive}
+      className={s.button()}
+    >
+      <span className={s.leading()}>
+        {Icon ? (
+          <Icon
+            size={15}
+            strokeWidth={1.8}
+            style={{ color: item.color ?? "var(--color-fg-muted)" }}
+          />
+        ) : (
+          <span
+            className={s.fallbackDot()}
+            style={{ background: item.color ?? "var(--color-fg-muted)" }}
+            aria-hidden
+          />
+        )}
+      </span>
+      <span className={s.label()}>{item.name}</span>
+      {item.hasUnread && <span className={s.unreadDot()} aria-label="tem novidades" />}
+      <span className={s.count()}>{item.count}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1 @@
+export { FilterRow, type FilterRowProps } from "./filter-row";

package/dist-lib/ai/exemplos/chat/components/FiltersColumn/filters-column.styles.ts

@@ -0,0 +1,27 @@
+import { tv } from "@/utils/tv";
+
+export const filtersColumnStyles = 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",
+    /** Aside raiz da versão rail (64px). */
+    rail: "flex flex-col w-[64px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    /** Container scrollável das seções (expandida). */
+    scroll: "flex-1 min-h-0 overflow-y-auto px-pad-md py-pad-md flex flex-col gap-gp-lg",
+    /** Container scrollável (rail). */
+    railScroll:
+      "flex-1 min-h-0 overflow-y-auto py-pad-md flex flex-col items-center gap-gp-sm",
+    /** Section wrapper (expandida). */
+    section: "flex flex-col gap-gp-2xs",
+    /** Header de section (título all-caps). Combo: `caption-xs` (10/400)
+        + override `font-bold uppercase tracking-[0.06em]` pra pattern strong. */
+    sectionTitle:
+      "px-pad-md pt-pad-2xs pb-pad-2xs text-caption-xs font-bold tracking-[0.06em] text-fg-subtle uppercase",
+    /** Group wrapper (rail) — divider entre grupos. */
+    railGroup: "w-full flex flex-col items-center gap-gp-xs px-pad-md",
+    /** Modifier de divisor pros grupos não-primeiros (rail). */
+    railGroupDivider: "pt-pad-sm border-t border-border-subtle",
+    /** Modifier de divisor pras sections não-primeiras (expandida). */
+    sectionDivider: "pt-pad-lg border-t border-border-subtle",
+  },
+});

package/dist-lib/ai/exemplos/chat/components/FiltersColumn/filters-column.tsx

@@ -0,0 +1,66 @@
+import { cn } from "@/lib/utils";
+import { FILTER_GROUPS } from "../../chat-v2-mocks";
+import type { FilterGroupKey, FilterItem } from "../../chat-v2.types";
+import { FilterRow } from "../FilterRow";
+import { filtersColumnStyles } from "./filters-column.styles";
+import type { FiltersColumnProps, FiltersState } from "./filters-column.types";
+
+/**
+ * Coluna esquerda expandida (280px) com as 4 seções de filtros definidas
+ * em `FILTER_GROUPS` (mocks).
+ */
+export function FiltersColumn({
+  filters,
+  onToggleFilter,
+  className,
+}: FiltersColumnProps) {
+  const s = filtersColumnStyles();
+  return (
+    <aside aria-label="Filtros" className={cn(s.root(), className)}>
+      <div className={s.scroll()}>
+        {FILTER_GROUPS.map((sec, i) => (
+          <FilterSection
+            key={sec.group}
+            title={sec.title}
+            group={sec.group}
+            items={sec.items}
+            filters={filters}
+            onToggle={onToggleFilter}
+            isFirst={i === 0}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+function FilterSection({
+  title,
+  group,
+  items,
+  filters,
+  onToggle,
+  isFirst,
+}: {
+  title: string;
+  group: FilterGroupKey;
+  items: FilterItem[];
+  filters: FiltersState;
+  onToggle: (group: FilterGroupKey, id: string) => void;
+  isFirst?: boolean;
+}) {
+  const s = filtersColumnStyles();
+  return (
+    <section className={cn(s.section(), !isFirst && s.sectionDivider())}>
+      <div className={s.sectionTitle()}>{title}</div>
+      {items.map((item) => (
+        <FilterRow
+          key={item.id}
+          item={item}
+          isActive={filters[group].has(item.id)}
+          onClick={() => onToggle(group, item.id)}
+        />
+      ))}
+    </section>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/FiltersColumn/filters-column.types.ts

@@ -0,0 +1,13 @@
+import type { FilterGroupKey } from "../../chat-v2.types";
+
+/**
+ * Estado dos filtros — um Set de IDs por grupo. Centralizado no parent
+ * (`ChatScreen`) e passado pra baixo.
+ */
+export type FiltersState = Record<FilterGroupKey, Set<string>>;
+
+export type FiltersColumnProps = {
+  filters: FiltersState;
+  onToggleFilter: (group: FilterGroupKey, id: string) => void;
+  className?: string;
+};

package/dist-lib/ai/exemplos/chat/components/FiltersColumn/filters-rail.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import { FILTER_GROUPS } from "../../chat-v2-mocks";
+import { RailItem } from "../RailItem";
+import { filtersColumnStyles } from "./filters-column.styles";
+import type { FiltersColumnProps } from "./filters-column.types";
+
+/**
+ * Coluna esquerda compacta (64px) — só ícones, divididos por grupo
+ * com divider top entre grupos. Consome `FILTER_GROUPS` (mocks).
+ */
+export function FiltersRail({
+  filters,
+  onToggleFilter,
+  className,
+}: FiltersColumnProps) {
+  const s = filtersColumnStyles();
+  return (
+    <aside aria-label="Filtros (compactos)" className={cn(s.rail(), className)}>
+      <div className={s.railScroll()}>
+        {FILTER_GROUPS.map(({ group, items }, gi) => (
+          <div
+            key={group}
+            className={cn(s.railGroup(), gi > 0 && s.railGroupDivider())}
+          >
+            {items.map((item) => (
+              <RailItem
+                key={item.id}
+                item={item}
+                isActive={filters[group].has(item.id)}
+                onClick={() => onToggleFilter(group, item.id)}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,6 @@
+export { FiltersColumn } from "./filters-column";
+export { FiltersRail } from "./filters-rail";
+export type {
+  FiltersColumnProps,
+  FiltersState,
+} from "./filters-column.types";

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

@@ -0,0 +1,2 @@
+export { MessageBubble } from "./message-bubble";
+export type { MessageBubbleProps } from "./message-bubble.types";

package/dist-lib/ai/exemplos/chat/components/MessageBubble/message-bubble.styles.ts

@@ -0,0 +1,37 @@
+import { tv, type VariantProps } from "@/utils/tv";
+
+export const messageBubbleStyles = tv({
+  slots: {
+    /** Wrapper que controla o alinhamento horizontal (esquerda/direita). */
+    row: "flex",
+    /** Balão em si — variants definem cor + corner pointer. */
+    bubble:
+      "max-w-[70%] px-pad-xl py-pad-md rounded-radius-xl shadow-sh-sm",
+    /** Texto da mensagem. */
+    text: "text-body-md leading-[1.45] whitespace-pre-wrap break-words",
+    /** Footer com horário + status icon. */
+    meta: "flex items-center justify-end gap-[4px] mt-[2px] text-caption-xs",
+    /** Span do horário (tabular-nums pra alinhar). */
+    time: "[font-variant-numeric:tabular-nums]",
+  },
+  variants: {
+    from: {
+      me: {
+        row: "justify-end",
+        bubble: "bg-bg-brand text-fg-on-brand rounded-br-[4px]",
+        meta: "text-fg-on-brand opacity-80",
+      },
+      them: {
+        row: "justify-start",
+        bubble:
+          "bg-bg-surface text-fg-default border border-border-subtle rounded-bl-[4px]",
+        meta: "text-fg-muted",
+      },
+    },
+  },
+  defaultVariants: {
+    from: "them",
+  },
+});
+
+export type MessageBubbleVariants = VariantProps<typeof messageBubbleStyles>;

package/dist-lib/ai/exemplos/chat/components/MessageBubble/message-bubble.tsx

@@ -0,0 +1,29 @@
+import { Check, CheckCheck } from "lucide-react";
+import { messageBubbleStyles } from "./message-bubble.styles";
+import type { MessageBubbleProps } from "./message-bubble.types";
+
+/**
+ * Balão de mensagem. Variant `from` (me|them) controla cor + alinhamento.
+ * Status icons (Check / CheckCheck) renderizam apenas pra `from="me"`.
+ */
+export function MessageBubble({ msg }: MessageBubbleProps) {
+  const from = msg.from === "me" ? "me" : "them";
+  const { row, bubble, text, meta, time } = messageBubbleStyles({ from });
+
+  return (
+    <div className={row()}>
+      <div className={bubble()}>
+        <div className={text()}>{msg.text}</div>
+        <div className={meta()}>
+          <span className={time()}>{msg.time}</span>
+          {from === "me" &&
+            (msg.status === "read" ? (
+              <CheckCheck size={12} strokeWidth={2} />
+            ) : (
+              <Check size={12} strokeWidth={2} />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/MessageBubble/message-bubble.types.ts

@@ -0,0 +1,5 @@
+import type { Message } from "../../chat-v2.types";
+
+export type MessageBubbleProps = {
+  msg: Message;
+};

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

@@ -0,0 +1,5 @@
+export {
+  PersonAvatar,
+  type PersonAvatarProps,
+  type PersonAvatarSize,
+} from "./person-avatar";

package/dist-lib/ai/exemplos/chat/components/PersonAvatar/person-avatar.tsx

@@ -0,0 +1,31 @@
+import { Avatar, AvatarFallback } from "@/components/shadcn/avatar";
+
+export type PersonAvatarSize = "sm" | "md" | "lg";
+
+export type PersonAvatarProps = {
+  initials: string;
+  /** Cor de fundo do avatar — hex/rgb/CSS color (vem do mock do contato). */
+  hex: string;
+  /** sm=28px / md=36px / lg=40px. Default: md. */
+  size?: PersonAvatarSize;
+};
+
+const SIZE_CLASSES: Record<PersonAvatarSize, string> = {
+  sm: "size-[28px] text-caption-sm",
+  md: "size-[36px] text-body-sm font-normal",
+  lg: "size-[40px] text-body-md",
+};
+
+/**
+ * Avatar circular com `initials` em branco bold sobre `hex` como background.
+ * Usado em ConversationListItem, header de ConversationColumn e DetailsColumn.
+ */
+export function PersonAvatar({ initials, hex, size = "md" }: PersonAvatarProps) {
+  return (
+    <Avatar className={SIZE_CLASSES[size]} style={{ background: hex }}>
+      <AvatarFallback className="bg-transparent text-white font-bold">
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { QueueColumn } from "./queue-column";
+export type { QueueColumnProps } from "./queue-column.types";

package/dist-lib/ai/exemplos/chat/components/QueueColumn/queue-column.styles.ts

@@ -0,0 +1,19 @@
+import { tv } from "@/utils/tv";
+
+export const queueColumnStyles = 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",
+    title: "m-0 text-title-md text-fg-default flex-1 min-w-0",
+    searchWrap: "px-pad-md pb-pad-lg",
+    searchInner: "relative",
+    searchIcon:
+      "absolute left-pad-lg top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none",
+    searchInput: "pl-[34px] pr-[30px]",
+    searchClear:
+      "absolute right-pad-md top-1/2 -translate-y-1/2 grid place-items-center size-[20px] rounded-radius-md text-fg-muted hover:bg-bg-muted hover:text-fg-default transition-colors",
+    chipsWrap: "px-pad-md pb-pad-2xl",
+    list: "flex-1 min-h-0 overflow-y-auto px-pad-md pb-pad-md flex flex-col gap-gp-xs",
+    empty: "py-pad-4xl px-pad-xl text-center text-body-xs font-normal text-fg-subtle",
+  },
+});