@snksergio/design-system 0.61.0 → 0.63.0

package/dist-lib/ai/exemplos/finance/clientes-financeiro-mocks.ts

@@ -0,0 +1,227 @@
+import { CLIENTS_87 } from "./clientes-showcase-mocks";
+import type {
+  AccountStatus,
+  BankAccount,
+  BankId,
+  FinanceClientRow,
+  FinanceTransaction,
+  PaymentMethod,
+} from "./clientes-financeiro.types";
+
+/* ── Banks (lookup com nome + cor temática) ─────────────────────── */
+
+export const BANKS: Record<BankId, { name: string; color: string; initials: string }> = {
+  bb:         { name: "Banco do Brasil", color: "#FAE128", initials: "BB" },
+  itau:       { name: "Itaú",            color: "#EC7000", initials: "IT" },
+  nubank:     { name: "Nubank",          color: "#820AD1", initials: "NU" },
+  santander:  { name: "Santander",       color: "#EC0000", initials: "SA" },
+  bradesco:   { name: "Bradesco",        color: "#CC092F", initials: "BR" },
+};
+
+const BANK_IDS: BankId[] = ["bb", "itau", "nubank", "santander", "bradesco"];
+
+/** Contas mocadas pra o modal Sacar — opções fixas. */
+export const SACAR_ACCOUNT_OPTIONS: BankAccount[] = [
+  { bank: "bb",        bankName: "Banco do Brasil", agency: "0001", account: "12345-6" },
+  { bank: "nubank",    bankName: "Nubank",          agency: "0001", account: "98765-4" },
+  { bank: "itau",      bankName: "Itaú",            agency: "1234", account: "55555-1" },
+];
+
+/* ── Helpers de geração ─────────────────────────────────────────── */
+
+/** Gera dado bancário pseudo-determinístico baseado no índice do cliente. */
+function makeAccount(idx: number): BankAccount {
+  const bank = BANK_IDS[idx % BANK_IDS.length];
+  const agency = String(1000 + (idx * 37) % 9000).padStart(4, "0");
+  const accountSeq = String(10000 + (idx * 113) % 89999).padStart(5, "0");
+  const dv = (idx * 7) % 10;
+  return {
+    bank,
+    bankName: BANKS[bank].name,
+    agency,
+    account: `${accountSeq}-${dv}`,
+  };
+}
+
+/** Saldo pseudo-determinístico — varia entre R$ 150 e R$ 25.000. */
+function makeBalance(idx: number): number {
+  const base = 150 + (idx * 317) % 24850;
+  // arredonda pra 2 casas
+  return Math.round(base * 100) / 100;
+}
+
+/** Razão social pseudo-determinística — combina nome do contato + sufixo. */
+const COMPANY_SUFFIXES = [
+  "Solar Energy LTDA",
+  "Energia Renovável ME",
+  "Eco Solutions S.A.",
+  "Green Power LTDA",
+  "Solar Tech ME",
+  "Energy Brasil S.A.",
+];
+function makeCompanyName(idx: number, contactName: string): string {
+  // Pega o primeiro nome do contato e combina com sufixo PJ
+  const firstName = contactName.split(" ")[0];
+  const suffix = COMPANY_SUFFIXES[idx % COMPANY_SUFFIXES.length];
+  return `${firstName} ${suffix}`;
+}
+
+/** CNPJ pseudo-determinístico — gera formato XX.XXX.XXX/0001-XX baseado no idx. */
+function makeCNPJ(idx: number): string {
+  // Bloco 1: 2 dígitos
+  const b1 = String(10 + (idx * 13) % 89).padStart(2, "0");
+  // Bloco 2: 3 dígitos
+  const b2 = String(100 + (idx * 71) % 899).padStart(3, "0");
+  // Bloco 3: 3 dígitos
+  const b3 = String(100 + (idx * 127) % 899).padStart(3, "0");
+  // DV: 2 dígitos
+  const dv = String(10 + (idx * 53) % 89).padStart(2, "0");
+  return `${b1}.${b2}.${b3}/0001-${dv}`;
+}
+
+/* ── Situação da conta (badge + eixo do Kanban) ─────────────────── */
+
+export const ACCOUNT_STATUS: Record<
+  AccountStatus,
+  { label: string; color: "warning" | "success" | "info" | "danger" }
+> = {
+  pendente:   { label: "Pendente",      color: "warning" },
+  ativo:      { label: "Ativo",         color: "success" },
+  negociacao: { label: "Em negociação", color: "info" },
+  bloqueado:  { label: "Bloqueado",     color: "danger" },
+};
+
+const ACCOUNT_STATUS_IDS: AccountStatus[] = [
+  "ativo",
+  "ativo",
+  "pendente",
+  "ativo",
+  "negociacao",
+  "ativo",
+  "bloqueado",
+]; // distribuição enviesada p/ "ativo" (realista) via módulo do índice
+
+const PAYMENT_METHOD_SETS: PaymentMethod[][] = [
+  ["pix"],
+  ["pix", "ted"],
+  ["pix", "boleto"],
+  ["pix", "ted", "boleto"],
+  ["ted", "boleto"],
+];
+
+const TRANSACTION_DESCRIPTIONS: Record<"in" | "out", string[]> = {
+  in: ["Comissão de venda", "Bônus de meta", "Repasse de royalty", "Estorno"],
+  out: ["Saque para conta", "Taxa de serviço", "Antecipação", "Ajuste de saldo"],
+};
+
+const NOW = new Date("2026-06-10T12:00:00Z").getTime();
+const DAY = 86400000;
+
+/** Status pseudo-determinístico baseado no índice. */
+function makeAccountStatus(idx: number): AccountStatus {
+  return ACCOUNT_STATUS_IDS[idx % ACCOUNT_STATUS_IDS.length];
+}
+
+/** Volume mensal pseudo-determinístico — R$ 2k a R$ 80k. */
+function makeMonthlyVolume(idx: number): number {
+  return Math.round((2000 + ((idx * 911) % 78000)) * 100) / 100;
+}
+
+/** Taxa de comissão 4%–14% (1 casa). */
+function makeCommissionRate(idx: number): number {
+  return Math.round((4 + ((idx * 37) % 100) / 10) * 10) / 10;
+}
+
+/** Última movimentação — entre 0 e ~45 dias atrás. */
+function makeLastMovement(idx: number): number {
+  return NOW - ((idx * 53) % 45) * DAY - ((idx * 17) % 24) * 3600000;
+}
+
+/** Extrato pseudo-determinístico — 4 a 6 movimentações recentes. */
+function makeTransactions(idx: number, lastMovement: number): FinanceTransaction[] {
+  const count = 4 + (idx % 3);
+  return Array.from({ length: count }, (_, i) => {
+    const type: "in" | "out" = (idx + i) % 3 === 0 ? "out" : "in";
+    const pool = TRANSACTION_DESCRIPTIONS[type];
+    return {
+      id: `TX-${idx}-${i}`,
+      date: lastMovement - i * (2 * DAY + ((idx * 7) % 5) * DAY),
+      type,
+      amount: Math.round((120 + ((idx * 211 + i * 67) % 9800)) * 100) / 100,
+      description: pool[(idx + i) % pool.length],
+    };
+  });
+}
+
+/* ── Dataset financeiro — 87 clientes com banco + saldo ─────────── */
+
+export const FINANCE_CLIENTS: FinanceClientRow[] = CLIENTS_87.map((c, idx) => {
+  const lastMovement = makeLastMovement(idx);
+  return {
+    ...c,
+    // Force categoria "licenciado" pra tema financeiro (afiliados/parceiros PJ)
+    categoryId: "licenciado",
+    bankAccount: makeAccount(idx),
+    availableBalance: makeBalance(idx),
+    monthlyVolume: makeMonthlyVolume(idx),
+    commissionRate: makeCommissionRate(idx),
+    accountStatus: makeAccountStatus(idx),
+    autoWithdraw: idx % 3 !== 0, // ~2/3 com saque automático
+    paymentMethods: PAYMENT_METHOD_SETS[idx % PAYMENT_METHOD_SETS.length],
+    lastMovement,
+    transactions: makeTransactions(idx, lastMovement),
+    cnpj: makeCNPJ(idx),
+    companyName: makeCompanyName(idx, c.name),
+  };
+});
+
+/* ── Formatters ─────────────────────────────────────────────────── */
+
+export function formatBRL(value: number): string {
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  }).format(value);
+}
+
+export function formatBankAccountShort(acc: BankAccount): string {
+  // Ex: "BB · Ag 0001 · 12345-6"
+  return `${BANKS[acc.bank].initials} · Ag ${acc.agency} · ${acc.account}`;
+}
+
+/* ── Estatísticas agregadas (KPIs do header da página) ──────────── */
+
+export const FINANCE_KPIS = {
+  /** Total disponível pra saque em todos os clientes. */
+  totalAvailable: FINANCE_CLIENTS.reduce((sum, c) => sum + c.availableBalance, 0),
+  /** Quantidade de clientes com saldo > R$ 5.000 (pra destacar high-value). */
+  highValueCount: FINANCE_CLIENTS.filter((c) => c.availableBalance > 5000).length,
+  /** Saldo médio. */
+  averageBalance: 0,
+  /** Contas em risco (negociação + bloqueado) — alinha com a preset "Inadimplentes". */
+  atRiskCount: FINANCE_CLIENTS.filter(
+    (c) => c.accountStatus === "negociacao" || c.accountStatus === "bloqueado",
+  ).length,
+};
+FINANCE_KPIS.averageBalance =
+  FINANCE_KPIS.totalAvailable / FINANCE_CLIENTS.length;
+
+/** Label curto pra movimentação relativa ("hoje", "há 3 dias"). */
+export function formatRelativeDays(ts: number): string {
+  const days = Math.floor((NOW - ts) / DAY);
+  if (days <= 0) return "hoje";
+  if (days === 1) return "ontem";
+  if (days < 30) return `há ${days} dias`;
+  const months = Math.floor(days / 30);
+  return months === 1 ? "há 1 mês" : `há ${months} meses`;
+}
+
+/** Data curta "09 fev" / "09 fev, 14:30" pro extrato. */
+export function formatDateTimeShort(ts: number): string {
+  return new Date(ts).toLocaleString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}

package/dist-lib/ai/exemplos/finance/clientes-financeiro.types.ts

@@ -0,0 +1,75 @@
+/**
+ * Types do ClientesFinanceiroShowcase — extensão financeira do ClientesShowcase.
+ *
+ * Reaproveita estrutura de cliente mas adiciona dados bancários + saldo
+ * disponível pra suportar a action de Saque.
+ */
+
+import type { ClientRow } from "./_table-data";
+
+/** Banco suportado nos mocks (com logo/cor próprios). */
+export type BankId = "bb" | "itau" | "nubank" | "santander" | "bradesco";
+
+export type BankAccount = {
+  bank: BankId;
+  bankName: string;
+  agency: string;   // ex: "1234"
+  account: string;  // ex: "98765-4"
+};
+
+/**
+ * Situação financeira da conta (pipeline) — vira coluna `badge` (chip colorido)
+ * E o eixo do board Kanban. Fluxo: pendente → ativo → negociação → bloqueado.
+ */
+export type AccountStatus = "pendente" | "ativo" | "negociacao" | "bloqueado";
+
+/** Método de recebimento aceito pelo licenciado (coluna `tags`). */
+export type PaymentMethod = "pix" | "ted" | "boleto";
+
+/** Movimentação financeira — usada no extrato da row expansion. */
+export type FinanceTransaction = {
+  id: string;
+  /** Timestamp (ms) da movimentação. */
+  date: number;
+  /** Entrada (crédito) ou saída (saque/débito). */
+  type: "in" | "out";
+  /** Valor em BRL (sempre positivo; `type` define o sinal). */
+  amount: number;
+  description: string;
+};
+
+/** Cliente com dados financeiros — estende ClientRow. */
+export type FinanceClientRow = ClientRow & {
+  /** Saldo disponível pra saque (BRL). */
+  availableBalance: number;
+  /** Volume financeiro movimentado no mês (BRL). */
+  monthlyVolume: number;
+  /** Taxa de comissão do licenciado (0–100, editável inline). */
+  commissionRate: number;
+  /** Situação da conta — chip + eixo do Kanban. */
+  accountStatus: AccountStatus;
+  /** Saque automático habilitado (boolean editável inline). */
+  autoWithdraw: boolean;
+  /** Métodos de recebimento aceitos (tags). */
+  paymentMethods: PaymentMethod[];
+  /** Timestamp (ms) da última movimentação financeira. */
+  lastMovement: number;
+  /** Extrato das últimas movimentações (row expansion). */
+  transactions: FinanceTransaction[];
+  /** Dados bancários do cliente. */
+  bankAccount: BankAccount;
+  /** CNPJ do cliente (formato XX.XXX.XXX/0001-XX). */
+  cnpj: string;
+  /** Razão social da empresa (nome PJ). */
+  companyName: string;
+};
+
+/**
+ * Form data do modal Sacar — usuário escolhe valor + conta destino.
+ * `clientId` é injetado pelo trigger (row da action).
+ */
+export type SacarFormData = {
+  clientId: string;
+  amount: number;
+  selectedAccountBank: BankId;
+};

package/dist-lib/ai/exemplos/finance/clientes-showcase-mocks.ts

@@ -0,0 +1,117 @@
+import {
+  CLIENTS_MOCK,
+  STATUSES,
+  CATEGORIES,
+  AGENTS,
+  type ClientRow,
+} from "./_table-data";
+
+/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */
+
+export const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>
+  CLIENTS_MOCK.map((row, i) => ({
+    ...row,
+    id: `CLI-${2400 + batch * 10 + i}`,
+  })),
+)
+  .flat()
+  .slice(0, 87);
+
+/* ── Lookups por categoria de status (column color mapping) ────── */
+
+export const STATUS_COLOR_MAP: Record<string, string> = {
+  active: "success",
+  pending: "warning",
+  paused: "info",
+  inactive: "neutral",
+};
+
+export const STATUS_DOT: Record<string, string> = {
+  active: "var(--color-fg-success)",
+  pending: "var(--color-fg-warning)",
+  paused: "var(--color-fg-info)",
+  inactive: "var(--color-fg-muted)",
+};
+
+export const CATEGORY_KIND: Record<string, "warning" | "info" | "success"> = {
+  royal: "warning",
+  licenciado: "info",
+  lead: "success",
+};
+
+/* ── Options pra filters/selects ───────────────────────────────── */
+
+export const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: STATUS_COLOR_MAP[v] ?? "neutral",
+}));
+
+export const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({
+  value: v,
+  label: m.label,
+  color: m.kind === "neutral" ? "neutral" : m.kind,
+}));
+
+export const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({
+  value: v,
+  label: a.name,
+}));
+
+/* ── Avatar lookup pro column type "user" ──────────────────────── */
+
+export const AGENTS_LOOKUP = Object.fromEntries(
+  Object.entries(AGENTS).map(([id, a]) => [
+    id,
+    {
+      name: a.name,
+      initials: a.name
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .slice(0, 2),
+      color: a.color,
+    },
+  ]),
+);
+
+/* ── Kanban columns (1 por status) ─────────────────────────────── */
+
+export const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({
+  id,
+  label: s.label,
+  dotColor: STATUS_DOT[id] ?? "var(--color-fg-muted)",
+}));
+
+/* ── Cidades pro select do drawer ──────────────────────────────── */
+
+export const CITIES = [
+  "São Paulo, SP",
+  "Rio de Janeiro, RJ",
+  "Belo Horizonte, MG",
+  "Porto Alegre, RS",
+  "Curitiba, PR",
+  "Recife, PE",
+  "Salvador, BA",
+  "Fortaleza, CE",
+  "Brasília, DF",
+  "Manaus, AM",
+];
+
+/* ── Helpers de formatação ─────────────────────────────────────── */
+
+export function formatBRL(value: number) {
+  return value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    minimumFractionDigits: 2,
+  });
+}
+
+export function formatShortDate(ms: number) {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  const day = d.getDate().toString().padStart(2, "0");
+  const months = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+  return `${day} ${months[d.getMonth()]}`;
+}

package/dist-lib/ai/exemplos/finance/clientes-showcase.styles.ts

@@ -0,0 +1,13 @@
+import { tv } from "@/utils/tv";
+
+/**
+ * Layout em grid de 2 colunas usado dentro do drawer pra pares de campos
+ * (Email + WhatsApp, Cidade + Valor).
+ * `gap-form-gap` (20px) = token DS pra spacing entre FormField units (L-024).
+ */
+export const drawerFormStyles = tv({
+  slots: {
+    twoCols: "grid grid-cols-2 gap-form-gap",
+    statusDot: "inline-block size-[8px] rounded-radius-full mr-gp-xs shrink-0",
+  },
+});

package/dist-lib/ai/exemplos/finance/clientes-showcase.types.ts

@@ -0,0 +1,16 @@
+import type { STATUSES, CATEGORIES } from "./_table-data";
+
+/**
+ * Payload do formulário do drawer "Novo cliente".
+ * Consumido por <NovoClienteDrawer onSubmit={...}> no main page.
+ */
+export type NovoClienteFormData = {
+  name: string;
+  email: string;
+  whatsapp: string;
+  statusId: keyof typeof STATUSES;
+  categoryId: keyof typeof CATEGORIES;
+  city: string;
+  value: number;
+  notes: string;
+};

package/dist-lib/ai/exemplos/finance/components/EditarFinanceDrawer/editar-finance-drawer.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useState } from "react";
+import { Panel } from "@/components/ui/Panel";
+import { Button } from "@/components/ui/Button/button";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+} from "@/components/ui/FormField";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { Switch } from "@/components/shadcn/switch";
+import { AGENTS } from "../../_table-data";
+import { ACCOUNT_STATUS, BANKS } from "../../clientes-financeiro-mocks";
+import type {
+  AccountStatus,
+  BankId,
+  FinanceClientRow,
+  PaymentMethod,
+} from "../../clientes-financeiro.types";
+
+const PAYMENT_METHODS: { value: PaymentMethod; label: string }[] = [
+  { value: "pix", label: "PIX" },
+  { value: "ted", label: "TED" },
+  { value: "boleto", label: "Boleto" },
+];
+
+const BANK_OPTIONS = (Object.keys(BANKS) as BankId[]).map((id) => ({
+  value: id,
+  label: BANKS[id].name,
+}));
+
+const AGENT_OPTIONS = Object.entries(AGENTS).map(([id, a]) => ({
+  value: id,
+  label: a.name,
+}));
+
+const STATUS_OPTIONS = (
+  Object.entries(ACCOUNT_STATUS) as [AccountStatus, (typeof ACCOUNT_STATUS)[AccountStatus]][]
+).map(([value, m]) => ({ value, label: m.label, color: m.color }));
+
+/** Campos editáveis da row financeira. */
+export type FinanceEditPatch = {
+  name: string;
+  email: string;
+  phone: string;
+  companyName: string;
+  cnpj: string;
+  accountStatus: AccountStatus;
+  bank: BankId;
+  commissionRate: number;
+  autoWithdraw: boolean;
+  paymentMethods: PaymentMethod[];
+  agentId: string;
+};
+
+export type EditarFinanceDrawerProps = {
+  /** Row em edição — null fecha o drawer. */
+  client: FinanceClientRow | null;
+  onOpenChange: (open: boolean) => void;
+  /** Salva as alterações (mock no showcase). */
+  onSave?: (id: string, patch: FinanceEditPatch) => void;
+};
+
+/**
+ * Drawer "Editar licenciado" — campos REAIS da row financeira (não o form
+ * genérico de criação). Panel + FormField (Input/Select) + ChipGroup + Switch.
+ */
+export function EditarFinanceDrawer({
+  client,
+  onOpenChange,
+  onSave,
+}: EditarFinanceDrawerProps) {
+  const [form, setForm] = useState<FinanceEditPatch | null>(null);
+
+  // (Re)hidrata o form ao abrir/trocar de cliente.
+  useEffect(() => {
+    if (!client) return;
+    setForm({
+      name: client.name,
+      email: client.email,
+      phone: client.phone,
+      companyName: client.companyName,
+      cnpj: client.cnpj,
+      accountStatus: client.accountStatus,
+      bank: client.bankAccount.bank,
+      commissionRate: client.commissionRate,
+      autoWithdraw: client.autoWithdraw,
+      paymentMethods: client.paymentMethods,
+      agentId: client.agentId as string,
+    });
+  }, [client]);
+
+  const patch = (p: Partial<FinanceEditPatch>) =>
+    setForm((f) => (f ? { ...f, ...p } : f));
+
+  const canSave = !!form && form.name.trim().length > 0;
+
+  const handleSave = () => {
+    if (!client || !form || !canSave) return;
+    onSave?.(client.id, form);
+    onOpenChange(false);
+  };
+
+  return (
+    <Panel
+      open={client !== null}
+      onOpenChange={onOpenChange}
+      title={client ? `Editar — ${client.name}` : "Editar licenciado"}
+      side="right"
+      size="md"
+      footer={
+        <>
+          <Button variant="outline" color="secondary" size="md" onClick={() => onOpenChange(false)}>
+            Cancelar
+          </Button>
+          <Button
+            variant="filled"
+            color="primary"
+            size="md"
+            disabled={!canSave}
+            onClick={handleSave}
+          >
+            Salvar alterações
+          </Button>
+        </>
+      }
+    >
+      {form && (
+        <>
+          <FormFieldInput
+            label="Licenciado"
+            required
+            value={form.name}
+            onChange={(e) => patch({ name: e.target.value })}
+          />
+
+          <div className="grid grid-cols-2 gap-form-gap">
+            <FormFieldInput
+              label="Email"
+              type="email"
+              value={form.email}
+              onChange={(e) => patch({ email: e.target.value })}
+            />
+            <FormFieldInput
+              label="Telefone"
+              type="tel"
+              value={form.phone}
+              onChange={(e) => patch({ phone: e.target.value })}
+            />
+          </div>
+
+          <FormFieldInput
+            label="Razão Social"
+            value={form.companyName}
+            onChange={(e) => patch({ companyName: e.target.value })}
+          />
+          <FormFieldInput
+            label="CNPJ"
+            value={form.cnpj}
+            onChange={(e) => patch({ cnpj: e.target.value })}
+          />
+
+          <FormField label="Situação">
+            {() => (
+              <ChipGroup
+                type="single"
+                value={form.accountStatus}
+                onValueChange={(v) => v && patch({ accountStatus: v as AccountStatus })}
+                size="md"
+                shape="pill"
+                ariaLabel="Situação da conta"
+              >
+                {STATUS_OPTIONS.map((o) => (
+                  <ChipGroupItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ChipGroupItem>
+                ))}
+              </ChipGroup>
+            )}
+          </FormField>
+
+          <div className="grid grid-cols-2 gap-form-gap">
+            <FormFieldSelect
+              label="Banco"
+              value={form.bank}
+              onValueChange={(v) => patch({ bank: v as BankId })}
+              options={BANK_OPTIONS}
+            />
+            <FormFieldInput
+              label="Comissão (%)"
+              type="number"
+              value={String(form.commissionRate)}
+              onChange={(e) => patch({ commissionRate: Number(e.target.value) })}
+              min={0}
+              max={100}
+              step={0.1}
+            />
+          </div>
+
+          <FormFieldSelect
+            label="Gestor da conta"
+            value={form.agentId}
+            onValueChange={(v) => patch({ agentId: v })}
+            options={AGENT_OPTIONS}
+          />
+
+          <FormField label="Métodos de recebimento">
+            {() => (
+              <ChipGroup
+                type="multiple"
+                value={form.paymentMethods}
+                onValueChange={(v) => patch({ paymentMethods: v as PaymentMethod[] })}
+                size="md"
+                shape="rounded"
+                ariaLabel="Métodos de recebimento"
+              >
+                {PAYMENT_METHODS.map((m) => (
+                  <ChipGroupItem key={m.value} value={m.value}>
+                    {m.label}
+                  </ChipGroupItem>
+                ))}
+              </ChipGroup>
+            )}
+          </FormField>
+
+          <FormField
+            label="Saque automático"
+            helperText="Quando ligado, saques são processados automaticamente."
+          >
+            {() => (
+              <Switch
+                checked={form.autoWithdraw}
+                onCheckedChange={(next) => patch({ autoWithdraw: next })}
+                aria-label="Saque automático"
+              />
+            )}
+          </FormField>
+        </>
+      )}
+    </Panel>
+  );
+}

package/dist-lib/ai/exemplos/finance/components/EditarFinanceDrawer/index.ts

@@ -0,0 +1,5 @@
+export { EditarFinanceDrawer } from "./editar-finance-drawer";
+export type {
+  EditarFinanceDrawerProps,
+  FinanceEditPatch,
+} from "./editar-finance-drawer";