@snksergio/design-system 0.61.0 → 0.63.0

package/dist-lib/ai/exemplos/dashboard/index.ts

@@ -0,0 +1 @@
+export { DashboardScreen, default } from "./dashboard-screen";

package/dist-lib/ai/exemplos/edit-page/components/StepNav.tsx

@@ -0,0 +1,81 @@
+import type { LucideIcon } from "@/lib/lucide-types";
+import { cn } from "@/lib/utils";
+
+export type Step = {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+};
+
+/**
+ * Nav lateral (stepper) da tela de edição — itens com ícone + título +
+ * descrição; o ativo ganha destaque de marca. Clicar seleciona + rola até a
+ * seção. Composição local do showcase usando tokens DS.
+ */
+export function StepNav({
+  steps,
+  activeId,
+  onSelect,
+  className,
+}: {
+  steps: Step[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  className?: string;
+}) {
+  return (
+    <nav
+      className={cn(
+        "flex flex-col gap-gp-xs rounded-radius-lg border border-border-subtle bg-bg-surface p-pad-md shadow-sh-sm",
+        className,
+      )}
+      aria-label="Etapas do pedido"
+    >
+      {steps.map((s) => {
+        const Icon = s.icon;
+        const active = s.id === activeId;
+        return (
+          <button
+            key={s.id}
+            type="button"
+            onClick={() => onSelect(s.id)}
+            aria-current={active ? "step" : undefined}
+            className={cn(
+              "flex items-start gap-gp-md rounded-radius-md border p-pad-lg text-left transition-colors",
+              active
+                ? "border-border-brand bg-bg-brand-subtle"
+                : "border-transparent hover:bg-bg-muted",
+            )}
+          >
+            <span
+              className={cn(
+                "grid size-8 shrink-0 place-items-center rounded-radius-md border",
+                active
+                  ? "border-transparent bg-bg-brand text-fg-on-brand"
+                  // bg-surface (branco no light) + borda: contrasta tanto no card
+                  // quanto no hover cinza (senão o ícone funde com o hover).
+                  : "border-border-subtle bg-bg-surface text-fg-muted",
+              )}
+            >
+              <Icon className="size-icon-sm" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span
+                className={cn(
+                  "block text-body-sm font-semibold",
+                  active ? "text-fg-brand" : "text-fg-default",
+                )}
+              >
+                {s.title}
+              </span>
+              <span className="mt-gp-2xs block text-caption-sm leading-snug text-fg-muted">
+                {s.description}
+              </span>
+            </span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/dist-lib/ai/exemplos/edit-page/components/section-card.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Card de seção flat — bg-surface + borda sutil, sem elevação pesada.
+ * Espelha o visual dos blocos da referência (Products ordered, Customer, etc).
+ * Composição local do showcase consumindo tokens DS via classes.
+ */
+export function SectionCard({
+  title,
+  icon,
+  action,
+  children,
+  className,
+  bodyClassName,
+}: {
+  title?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+}) {
+  const hasHeader = !!(title || action);
+  const header = hasHeader && (
+    // Header: padding 16px (pad-2xl) + divider full-bleed embaixo.
+    <header className="flex items-center justify-between gap-gp-md border-b border-border-subtle bg-bg-subtle p-pad-2xl">
+      {/* gap ícone↔título = 12px (gap-gp-md) */}
+      <div className="flex items-center gap-gp-md">
+        {icon && (
+          <span className="grid size-8 shrink-0 place-items-center rounded-radius-md bg-bg-muted text-fg-muted">
+            {icon}
+          </span>
+        )}
+        {title && (
+          <h2 className="text-title-md font-semibold text-fg-default">
+            {title}
+          </h2>
+        )}
+      </div>
+      {action}
+    </header>
+  );
+
+  return (
+    <section className={cn("overflow-hidden rounded-radius-lg border border-border-subtle bg-bg-surface shadow-sh-sm", className)}>
+      {header}
+      {/* body: padding 16px (pad-2xl) — uniforme; abaixo do divider quando há header */}
+      <div className={cn("p-pad-2xl", bodyClassName)}>{children}</div>
+    </section>
+  );
+}
+
+/** Divisória sutil de seção. `my` controla o respiro vertical (default md). */
+export function SectionDivider({ className }: { className?: string }) {
+  return <div className={cn("h-px bg-border-subtle", className)} />;
+}
+
+/** Par label-uppercase + valor (grid de Customer/Shipping/Billing Information). */
+export function Field({
+  label,
+  value,
+  accent,
+}: {
+  label: string;
+  value: ReactNode;
+  /** Destaca o valor com a cor de marca (links, ids de transação, etc). */
+  accent?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-gp-2xs">
+      <span className="text-caption-sm font-medium uppercase tracking-wider text-fg-muted">
+        {label}
+      </span>
+      <span
+        className={cn(
+          "text-body-md",
+          accent ? "text-fg-brand" : "text-fg-default",
+        )}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/edit-page/edit-page-screen.tsx

@@ -0,0 +1,234 @@
+import { useRef, useState } from "react";
+import { CreditCard, MapPin, Package, User } from "lucide-react";
+import { Button } from "@/components/ui/Button/button";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { PageHeader } from "@/components/ui/PageHeader";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+} from "@/components/ui/FormField";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/shadcn/select";
+import { Input } from "@/components/shadcn/input";
+import { SectionCard } from "./components/section-card";
+import { StepNav, type Step } from "./components/StepNav";
+
+const STEPS: Step[] = [
+  {
+    id: "produtos",
+    icon: Package,
+    title: "Selecionar produtos",
+    description: "Adicione produtos à lista de compra.",
+  },
+  {
+    id: "cliente",
+    icon: User,
+    title: "Dados do cliente",
+    description: "Nome, e-mail e telefone do cliente.",
+  },
+  {
+    id: "endereco",
+    icon: MapPin,
+    title: "Endereço",
+    description: "Informe o endereço de entrega.",
+  },
+  {
+    id: "pagamento",
+    icon: CreditCard,
+    title: "Pagamento",
+    description: "Método e dados do pagamento.",
+  },
+];
+
+const COUNTRY_OPTIONS = [
+  { value: "br", label: "Brasil" },
+  { value: "pt", label: "Portugal" },
+  { value: "us", label: "Estados Unidos" },
+];
+
+const PAYMENT_OPTIONS = [
+  { value: "card", label: "Cartão de crédito/débito" },
+  { value: "pix", label: "PIX" },
+  { value: "boleto", label: "Boleto" },
+];
+
+const DDI_OPTIONS = ["+55", "+1", "+351"];
+
+/**
+ * EditPageScreen — tela de edição de pedido (formulário em etapas). Mesmo
+ * modelo de design da OrderDetail (SectionCard) + nav lateral (stepper).
+ * Toggle de layout: 1 coluna (igual à referência) ou 2 colunas. Domínio
+ * iGreen (energia solar).
+ */
+export function EditPageScreen() {
+  const [cols, setCols] = useState<"one" | "two">("one");
+  const [activeStep, setActiveStep] = useState("produtos");
+
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const goTo = (id: string) => {
+    setActiveStep(id);
+    sectionRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const setRef = (id: string) => (el: HTMLDivElement | null) => {
+    sectionRefs.current[id] = el;
+  };
+
+  return (
+    // Conteúdo da página (sem shell). Embrulhe no seu AppShell/layout — o
+    // parent precisa dar altura (h-full/flex) pra página preencher.
+    <div className="flex flex-col h-full min-h-0 gap-gp-2xl">
+      <PageHeader
+        title="Editar pedido"
+        description="Pedido #84021 · atualize produtos, cliente, entrega e pagamento."
+        hideTextOnMobile={false}
+        actions={
+          <ChipGroup
+            type="single"
+            value={cols}
+            onValueChange={(v) => v && setCols(v as "one" | "two")}
+            size="sm"
+            ariaLabel="Layout das colunas"
+          >
+            <ChipGroupItem value="one">1 coluna</ChipGroupItem>
+            <ChipGroupItem value="two">2 colunas</ChipGroupItem>
+          </ChipGroup>
+        }
+      />
+
+      <div className="grid grid-cols-1 items-start gap-gp-4xl pb-pad-6xl lg:grid-cols-[260px_1fr]">
+        {/* Nav lateral */}
+        <StepNav
+          steps={STEPS}
+          activeId={activeStep}
+          onSelect={goTo}
+          className="lg:sticky lg:top-gp-2xl"
+        />
+
+        {/* Seções do formulário */}
+        <div
+          className={
+            cols === "two"
+              ? "grid grid-cols-1 items-start gap-gp-4xl xl:grid-cols-2"
+              : "flex flex-col gap-gp-4xl"
+          }
+        >
+          <div ref={setRef("produtos")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Selecionar produtos">
+              <FormFieldInput
+                label="Buscar produto"
+                placeholder="Busque por nome ou SKU..."
+              />
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("cliente")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Dados do cliente">
+              <div className="flex flex-col gap-form-gap">
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Nome" placeholder="Nome" />
+                  <FormFieldInput label="Usuário" placeholder="Nome de usuário" />
+                </div>
+                <FormFieldInput
+                  label="Email"
+                  type="email"
+                  placeholder="email@exemplo.com"
+                />
+                <FormField label="Telefone">
+                  {({ id }) => (
+                    <div className="flex gap-gp-sm">
+                      <Select defaultValue="+55">
+                        <SelectTrigger className="w-24 shrink-0">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {DDI_OPTIONS.map((d) => (
+                            <SelectItem key={d} value={d}>
+                              {d}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        id={id}
+                        type="tel"
+                        placeholder="Número de telefone"
+                        className="flex-1"
+                      />
+                    </div>
+                  )}
+                </FormField>
+              </div>
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("endereco")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Endereço">
+              <div className="flex flex-col gap-form-gap">
+                <FormFieldSelect
+                  label="País"
+                  placeholder="Selecione o país"
+                  options={COUNTRY_OPTIONS}
+                />
+                <FormFieldInput label="Endereço" placeholder="Rua, número" />
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Cidade" placeholder="Cidade" />
+                  <FormFieldInput label="CEP" placeholder="00000-000" />
+                </div>
+              </div>
+            </SectionCard>
+          </div>
+
+          <div ref={setRef("pagamento")} className="scroll-mt-gp-2xl">
+            <SectionCard title="Pagamento">
+              <div className="flex flex-col gap-form-gap">
+                <FormFieldSelect
+                  label="Método de pagamento"
+                  defaultValue="card"
+                  options={PAYMENT_OPTIONS}
+                />
+                <FormFieldInput
+                  label="Nome no cartão"
+                  placeholder="Nome impresso no cartão"
+                />
+                <FormFieldInput
+                  label="Número do cartão"
+                  placeholder="0000 0000 0000 0000"
+                  inputMode="numeric"
+                />
+                <div className="grid grid-cols-1 gap-form-gap sm:grid-cols-2">
+                  <FormFieldInput label="Validade" placeholder="MM/AA" />
+                  <FormFieldInput label="CVV" placeholder="123" />
+                </div>
+              </div>
+            </SectionCard>
+          </div>
+
+          {/* Footer de ações */}
+          <div
+            className={
+              "flex items-center justify-end gap-gp-md" +
+              (cols === "two" ? " xl:col-span-2" : "")
+            }
+          >
+            <Button variant="outline" color="secondary" size="md">
+              Cancelar
+            </Button>
+            <Button variant="filled" color="primary" size="md">
+              Salvar pedido
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EditPageScreen;

package/dist-lib/ai/exemplos/edit-page/index.ts

@@ -0,0 +1 @@
+export { EditPageScreen, default } from "./edit-page-screen";

package/dist-lib/ai/exemplos/finance/_table-data.ts

@@ -0,0 +1,57 @@
+/**
+ * Dados base compartilhados (extraídos do showcase TableDoc do DS).
+ * Mantém o exemplo autossuficiente — sem dependência da infra de preview.
+ */
+
+export const STATUSES: Record<string, { label: string; color: string }> = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" },
+};
+
+export type CategoryKind = "warning" | "info" | "success" | "neutral";
+export const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" },
+};
+
+export const AGENTS: Record<string, { name: string; initials: string; color: string }> = {
+  you: { name: "Voce", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" },
+};
+
+export type ClientRow = {
+  id: string;
+  name: string;
+  initials: string;
+  avatarColor: string;
+  email: string;
+  phone: string;
+  statusId: keyof typeof STATUSES;
+  categoryId: keyof typeof CATEGORIES;
+  location: string;
+  value: number;
+  agentId: keyof typeof AGENTS;
+  createdAt: number;
+  lastContact: number;
+};
+
+const BASE_DATE = new Date("2026-04-15T12:00:00Z").getTime();
+const DAY_MS = 86400000;
+
+export const CLIENTS_MOCK: ClientRow[] = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE },
+];