@rendra-ui/web 2.6.0 → 2.7.0

package/README.md

@@ -180,6 +180,7 @@ Todos em `src/components/ui`, um por finalidade, com o ícone de feedback da mar
 | **Atendimento**  | Chat omnichannel: ConversationList (foto com o logotipo do canal: WhatsApp, WhatsApp Web, Instagram, Facebook, TikTok, Google Meu Negócio e Reclame Aqui), ChatThread (cliente, atendente, robô e avisos; botão direito ou "…" para responder, reagir, editar e excluir; citação que leva à mensagem original; áudio em 1x, 1,5x e 2x; baixar anexos) e ChatComposer (textarea que cresce, anexos, emoji, mensagens rápidas, gravação de áudio, arrastar e soltar ou colar prints; no celular, campo, enviar e um botão de ações)                                                                                                                         |
 | **Conteúdo**     | RichTextEditor (Tiptap): formatação completa, listas, alinhamento, links, tabela, imagem com 4 alças para redimensionar, colar print, arrastar imagens e modo HTML                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | **Painel**       | WidgetGrid: widgets que se arrastam e redimensionam no modo "Ajustar dashboard", com a arrumação salva; Chart com velocímetro de meta, funil com conversão, barras com linha, barras coloridas e empilhadas                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Fluxo**        | FlowEditor (monta o fluxo de automação com gatilho, ação, condição, espera e fim: paleta, arrastar, ligar, apagar, validar com mensagens e testar o caminho passo a passo; o JSON do fluxo vai e volta por `serializeFlow` e `parseFlow`; no celular só vê e navega, e a gaveta do bloco edita, liga ao próximo e exclui) e FlowViewer (só leitura), em `@rendra-ui/web/flow` com o React Flow                                                                                                                                                                                                                                                            |
 | **Planejamento** | Calendar (mês, semana, dia e agenda em lista, no mesmo componente; no celular vira mês compacto com a lista do dia), Kanban (altura da tela, 5 etapas visíveis e rolagem lateral também pelo touchpad, rolagem infinita por etapa, (+) no título da etapa, totais em R$ de P&S e MRR por etapa e por cartão, arrastar no computador, menu "Mover para" no toque e no teclado, uma coluna por vez no celular, limite por coluna) e ImageViewer (imagens em popup, com setas, Esc, arrastar e pinça)                                                                                                                                                        |
 | **Layout**       | Container (respiro igual em todos os lados), Stack, Inline, Grid (por tela ou por container query), Section e PageHeader (título no corpo do celular por `bodyTitle`, sem reservar o bloco do título por `titleSpace`)                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
@@ -385,7 +386,7 @@ import '@rendra-ui/web/base.css'
 import '@rendra-ui/web/components.css'
 ```
 
-O CSS já sai compilado (estratégia A: o host recebe `tokens.css`, `base.css` e `components.css` prontos, sem precisar ter o Tailwind instalado, e sem nenhuma variável do namespace do Tailwind vazar para o seu tema). `react-router` fica fora das dependências: quem usa React Router importa a ponte, `@rendra-ui/web/router-bridge`; quem não usa, não precisa dela. Os componentes pesados (`document-viewer`, `rich-text-editor`, `chart`, `widget-grid`) são subcaminhos próprios, para não engordar quem não usa.
+O CSS já sai compilado (estratégia A: o host recebe `tokens.css`, `base.css` e `components.css` prontos, sem precisar ter o Tailwind instalado, e sem nenhuma variável do namespace do Tailwind vazar para o seu tema). `react-router` fica fora das dependências: quem usa React Router importa a ponte, `@rendra-ui/web/router-bridge`; quem não usa, não precisa dela. Os componentes pesados (`document-viewer`, `rich-text-editor`, `chart`, `widget-grid`, `flow`) são subcaminhos próprios, para não engordar quem não usa. O `flow` (FlowEditor e FlowViewer) usa o React Flow (`@xyflow/react`, MIT): ele vem como dependência do pacote e você só importa `@rendra-ui/web/flow`, que já traz o CSS dele. No clone deste repositório, `FlowEditor` e `FlowViewer` vêm de `@/components/ui/flow-editor` e `@/components/ui/flow-viewer`, e `validateFlow`, `serializeFlow` e `parseFlow` de `@/lib/flow`.
 
 **O que o `components.css` traz, e o que não traz.** Ele contém só as classes que os componentes do pacote usam por dentro e as `@utility` do Rendra. Classes de composição das suas próprias telas (`p-12`, `max-w-sm`, `flex-col`, `mb-0`) não estão garantidas: num host com Tailwind v4, deixe o seu Tailwind gerá-las e reproduza no `@theme` a escala do Rendra (espaço 0, px, 1, 2, 3, 4, 6, 8, 12, 16 e 24, raios por papel, cores `--rendra-*`); num host sem Tailwind, escreva o CSS de composição à mão com as variáveis `--rendra-*`. A receita completa e a lista de todas as `@utility` estão em [`docs/COMO_APLICAR.md`](docs/COMO_APLICAR.md), na seção "O CSS do pacote e as classes das suas telas".
 

package/dist/base.css

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 
 @layer base {
   *,

package/dist/{empty-state-DrQjqxvp.js → brand-feedback-icon-BYNcqBel.js}

@@ -1,7 +1,5 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-TBlI6-gS.js";
-import { i as useMotionLib } from "./motion-context-BL545cb6.js";
-import { t as useMotionPresets } from "./use-motion-presets-DCJPBfNJ.js";
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-B0N3Pek0.js";
 import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -149,64 +147,6 @@ function BrandFeedbackIcon({ type, size, label, animated = false, symbolTone = "
 	});
 }
 //#endregion
-//#region src/components/ui/empty-state.tsx
-/** Estado vazio (e de erro) com o ícone de feedback da marca. */
-function EmptyState({ title, description, type = "info", actions, size = "default", className }) {
-	const lib = useMotionLib();
-	const on = lib !== null;
-	const presets = useMotionPresets();
-	const Icon = on ? lib.m.span : "span";
-	const Title = on ? lib.m.p : "p";
-	const Description = on ? lib.m.p : "p";
-	const Actions = on ? lib.m.div : "div";
-	const part = (index) => {
-		if (!on) return {};
-		const enter = presets.slide("bottom", "short");
-		return {
-			...enter,
-			transition: {
-				...enter.transition,
-				...presets.stagger(index)
-			}
-		};
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		"data-rendra": "VAZ-001",
-		className: cn("flex flex-col items-center justify-center gap-4 text-center", size === "compact" ? "px-4 py-8" : "px-4 py-12 md:py-16", className),
-		children: [
-			/* @__PURE__ */ jsxs(Icon, {
-				className: "relative flex items-center justify-center",
-				...part(0),
-				children: [/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "absolute size-16 rounded-full bg-gradient-soft"
-				}), /* @__PURE__ */ jsx(BrandFeedbackIcon, {
-					type,
-					size: size === "compact" ? "xl" : "2xl",
-					className: "relative"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-col gap-1",
-				children: [/* @__PURE__ */ jsx(Title, {
-					className: "text-base font-semibold wrap-break-word",
-					...part(1),
-					children: title
-				}), description && /* @__PURE__ */ jsx(Description, {
-					className: "text-sm wrap-break-word text-muted-foreground",
-					...part(2),
-					children: description
-				})]
-			}),
-			actions && /* @__PURE__ */ jsx(Actions, {
-				className: "flex flex-wrap justify-center gap-3",
-				...part(3),
-				children: actions
-			})
-		]
-	});
-}
-//#endregion
-export { BrandContext as a, useBrand as i, BrandFeedbackIcon as n, feedbackLabels as r, EmptyState as t };
+export { BrandContext as i, feedbackLabels as n, useBrand as r, BrandFeedbackIcon as t };
 
-//# sourceMappingURL=empty-state-DrQjqxvp.js.map
+//# sourceMappingURL=brand-feedback-icon-BYNcqBel.js.map

package/dist/brand-feedback-icon-BYNcqBel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-feedback-icon-BYNcqBel.js","names":[],"sources":["../src/brand/brand-context.ts","../src/brand/use-brand.ts","../src/components/ui/brand-feedback-icon.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport type { Shape } from '@/lib/shape'\nimport type { BrandConfig, PaletteConfig } from './types'\n\nexport type ColorMode = 'light' | 'dark' | 'system'\n\nexport interface BrandContextValue {\n  brand: BrandConfig\n  brands: BrandConfig[]\n  setBrandId: (id: string) => void\n  mode: ColorMode\n  resolvedMode: 'light' | 'dark'\n  setMode: (mode: ColorMode) => void\n  /** Formato do template ativo (fixo por template). */\n  shape: Shape\n  /** Paleta de cores em uso (por padrão, a do próprio modelo). */\n  palette: PaletteConfig\n  palettes: PaletteConfig[]\n  /** Usa a paleta de outro template; null volta às cores do próprio modelo. */\n  setPaletteId: (id: string | null) => void\n  /** Logotipo adequado para a sidebar com a paleta atual. */\n  sidebarLogoVariant: 'light' | 'dark'\n}\n\nexport const BrandContext = createContext<BrandContextValue | null>(null)\n","import { useContext } from 'react'\nimport { BrandContext } from './brand-context'\n\nexport function useBrand() {\n  const ctx = useContext(BrandContext)\n  if (!ctx) throw new Error('useBrand precisa estar dentro de <BrandProvider>.')\n  return ctx\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { CircleCheck, CircleX, Info, TriangleAlert, type LucideIcon } from 'lucide-react'\nimport type { SVGProps } from 'react'\nimport { useBrand } from '@/brand/use-brand'\nimport type { FeedbackType } from '@/brand/types'\nimport { cn } from '@/lib/cn'\n\nconst sizes = {\n  sm: 'size-icon-sm',\n  md: 'size-icon-md',\n  lg: 'size-icon-lg',\n  xl: 'size-12',\n  '2xl': 'size-16',\n} as const\n\nconst iconVariants = cva('relative inline-flex shrink-0', {\n  variants: { size: sizes },\n  defaultVariants: { size: 'md' },\n})\n\n/** Cor do estado (tinge o símbolo e, em statusBadge, o ícone ao lado). */\nconst stateText: Record<FeedbackType, string> = {\n  success: 'text-success',\n  error: 'text-destructive',\n  warning: 'text-warning',\n  info: 'text-info',\n}\n\n/** Ícone Lucide do selo ao lado do símbolo (statusBadge). */\nconst badgeIcons: Record<FeedbackType, LucideIcon> = {\n  success: CircleCheck,\n  error: CircleX,\n  warning: TriangleAlert,\n  info: Info,\n}\n\n/** Tamanho do ícone ao lado, proporcional ao do símbolo. */\nconst badgeIconSize: Record<keyof typeof sizes, string> = {\n  sm: 'size-3',\n  md: 'size-icon-sm',\n  lg: 'size-icon-md',\n  xl: 'size-icon-lg',\n  '2xl': 'size-icon-lg',\n}\n\nconst badgeTone: Record<FeedbackType, string> = {\n  success: 'bg-success text-success-foreground',\n  error: 'bg-destructive text-destructive-foreground',\n  warning: 'bg-warning text-warning-foreground',\n  info: 'bg-info text-info-foreground',\n}\n\nexport const feedbackLabels: Record<FeedbackType, string> = {\n  success: 'Sucesso',\n  error: 'Erro',\n  warning: 'Atenção',\n  info: 'Informação',\n}\n\n/** Glifos universais de status desenhados em traço, herdando currentColor. */\nfunction StatusGlyph({\n  type,\n  animated,\n  ...props\n}: { type: FeedbackType; animated?: boolean } & SVGProps<SVGSVGElement>) {\n  // pathLength=1 normaliza o traço: o desenho anima de 1 a 0 em qualquer glifo.\n  const draw = animated\n    ? ({ pathLength: 1, strokeDasharray: 1, className: 'animate-draw' } as const)\n    : {}\n  const common = {\n    viewBox: '0 0 12 12',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 2,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    'aria-hidden': true,\n    ...props,\n  }\n  switch (type) {\n    case 'success':\n      return (\n        <svg {...common}>\n          <path d=\"M3 6.2 5.1 8.2 9 4\" {...draw} />\n        </svg>\n      )\n    case 'error':\n      return (\n        <svg {...common}>\n          <path d=\"M4 4l4 4M8 4 4 8\" {...draw} />\n        </svg>\n      )\n    case 'warning':\n      return (\n        <svg {...common}>\n          <path d=\"M6 3.2v3.3M6 8.8v0\" {...draw} />\n        </svg>\n      )\n    case 'info':\n      return (\n        <svg {...common}>\n          <path d=\"M6 3.2v0M6 5.5v3.3\" {...draw} />\n        </svg>\n      )\n  }\n}\n\nexport interface BrandFeedbackIconProps extends VariantProps<typeof iconVariants> {\n  type: FeedbackType\n  /** Texto para leitores de tela. Sem ele o ícone é decorativo (o texto ao lado informa). */\n  label?: string\n  /**\n   * Anima a entrada: o símbolo entra com mola e o glifo se desenha (check se formando,\n   * X se riscando). O erro treme ao final. Respeita reduzir movimento.\n   * Troque a key do componente para repetir a animação.\n   */\n  animated?: boolean\n  /**\n   * Cor do símbolo. `state` (padrão): a cor do estado (verde, vermelho, amarelo, azul).\n   * `brand`: a cor primária da marca (`text-primary-text`); o selo de estado mantém a cor do\n   * estado, para o significado não depender só da cor.\n   */\n  symbolTone?: 'state' | 'brand'\n  /**\n   * `false` (padrão): selo de estado sobreposto ao símbolo. `true`: o ícone do estado\n   * (Lucide, na cor do estado) fica ao lado do símbolo, no lugar do selo sobreposto. Com um\n   * SVG próprio em `brand.feedbackIcons[type]`, o SVG vence e nenhum selo é desenhado.\n   */\n  statusBadge?: boolean\n  /**\n   * Só vale com `animated`. `pop` (padrão): entra com mola, o glifo se desenha e o erro\n   * treme. `encaixe`: entra em 240 ms, curva de saída suave, sem quique, sem desenho e sem\n   * tremor. Com \"reduzir movimento\" do sistema, nenhuma animação roda.\n   */\n  animation?: 'pop' | 'encaixe'\n  className?: string\n}\n\n/**\n * Ícone de feedback da marca: o símbolo da marca em currentColor, tingido pela cor\n * semântica, com um selo de status para que o significado não dependa só da cor.\n * Cada tipo pode ser substituído por um SVG próprio em brand.config.ts (feedbackIcons).\n */\nexport function BrandFeedbackIcon({\n  type,\n  size,\n  label,\n  animated = false,\n  symbolTone = 'state',\n  statusBadge = false,\n  animation = 'pop',\n  className,\n}: BrandFeedbackIconProps) {\n  const { brand } = useBrand()\n  const Custom = brand.feedbackIcons?.[type]\n  const Symbol = brand.symbol\n  const a11y = label\n    ? ({ role: 'img', 'aria-label': label } as const)\n    : ({ 'aria-hidden': true } as const)\n  const encaixe = animation === 'encaixe'\n  // Com `symbolTone=\"state\"` o texto do estado fica na raiz (como sempre); com `brand` sai da raiz.\n  const rootTone = symbolTone === 'state' ? stateText[type] : undefined\n  const symbolTonal = symbolTone === 'brand' && 'text-primary-text'\n  const symbolAnim = animated && (encaixe ? 'animate-encaixe' : 'animate-pop')\n  const badgeAnim = animated && (encaixe ? 'animate-encaixe' : 'animate-pop anim-delay-1')\n  const BadgeIcon = badgeIcons[type]\n  const sideBadge = statusBadge && !Custom\n\n  return (\n    <span\n      data-slot=\"feedback-icon\"\n      data-rendra=\"BFI-001\"\n      className={cn(\n        sideBadge ? 'relative inline-flex shrink-0 items-center gap-1' : iconVariants({ size }),\n        rootTone,\n        animated && !encaixe && type === 'error' && 'animate-shake',\n        className,\n      )}\n      {...a11y}\n    >\n      {Custom ? (\n        <Custom className={cn('size-full', symbolTonal, symbolAnim)} />\n      ) : sideBadge ? (\n        <>\n          <Symbol className={cn(sizes[size ?? 'md'], symbolTonal, symbolAnim)} />\n          <BadgeIcon\n            aria-hidden\n            className={cn('shrink-0', badgeIconSize[size ?? 'md'], stateText[type], badgeAnim)}\n          />\n        </>\n      ) : (\n        <>\n          <Symbol className={cn('size-full mask-status-cutout', symbolTonal, symbolAnim)} />\n          <span\n            className={cn(\n              'absolute right-0 bottom-0 flex size-1/2 items-center justify-center rounded-full',\n              badgeTone[type],\n              badgeAnim,\n            )}\n          >\n            <StatusGlyph type={type} animated={animated && !encaixe} className=\"size-full\" />\n          </span>\n        </>\n      )}\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/{button-B6-644xP.js → button-DlzWwpZk.js}

@@ -1,8 +1,8 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-TBlI6-gS.js";
-import { a as useMotionMode, o as useMotionOn, u as usePrefersReducedMotion } from "./motion-context-BL545cb6.js";
-import { t as useMotionPresets } from "./use-motion-presets-DCJPBfNJ.js";
-import { p as resolveCatalogCode } from "./components-Btk1cUg2.js";
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-B0N3Pek0.js";
+import { a as useMotionMode, o as useMotionOn, u as usePrefersReducedMotion } from "./motion-context-BUMPf0e9.js";
+import { t as useMotionPresets } from "./use-motion-presets-D3ww1oJX.js";
+import { p as resolveCatalogCode } from "./components-CpQPMGfT.js";
 import { Loader2 } from "lucide-react";
 import { Slot } from "radix-ui";
 import { forwardRef } from "react";
@@ -205,4 +205,4 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
 //#endregion
 export { buttonVariants as n, Spinner as r, Button as t };
 
-//# sourceMappingURL=button-B6-644xP.js.map
+//# sourceMappingURL=button-DlzWwpZk.js.map

package/dist/{button-B6-644xP.js.map → button-DlzWwpZk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-B6-644xP.js","names":[],"sources":["../src/components/ui/spinner.tsx","../src/lib/motion/native-events.ts","../src/components/ui/button.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n  size?: 'sm' | 'md' | 'lg'\n  /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n  label?: string\n  className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n  sm: 'size-icon-sm',\n  md: 'size-icon-md',\n  lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n  const reduced = usePrefersReducedMotion()\n  const icon = (\n    <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n  )\n\n  if (!label) {\n    return (\n      <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n        {icon}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      data-rendra=\"SPIN-001\"\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n    >\n      {icon}\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n","/*\n * O Motion toma `onDrag`, `onDragStart`, `onDragEnd` e `onAnimationStart` para os gestos e\n * animações dele: tira essas props do DOM e as tipa com outra assinatura. Em `m.button` e\n * `m.li`, o consumidor que passa o evento nativo (HTML5 drag, animationstart do CSS) o perderia.\n * Estes ajudantes separam essas chaves das props e as ligam como ouvintes nativos no elemento.\n */\n\nconst NATIVE_EVENTS = {\n  onDrag: 'drag',\n  onDragStart: 'dragstart',\n  onDragEnd: 'dragend',\n  onAnimationStart: 'animationstart',\n} as const\n\ntype NativeKey = keyof typeof NATIVE_EVENTS\ntype Handler = ((event: never) => void) | undefined\n\n/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */\nexport function splitNativeEvents<P extends object>(props: P) {\n  const native: Partial<Record<NativeKey, Handler>> = {}\n  const rest: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key in NATIVE_EVENTS) native[key as NativeKey] = value as Handler\n    else rest[key] = value\n  }\n  return { native, rest: rest as Omit<P, NativeKey> }\n}\n\n/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */\nexport function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>) {\n  const bound: [string, EventListener][] = []\n  for (const [key, type] of Object.entries(NATIVE_EVENTS)) {\n    const handler = native[key as NativeKey]\n    if (!handler) continue\n    const listener = ((event: Event) => handler(event as never)) as EventListener\n    el.addEventListener(type, listener)\n    bound.push([type, listener])\n  }\n  return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionOn, useMotionPresets } from '@/lib/motion'\nimport { bindNativeEvents, splitNativeEvents } from '@/lib/motion/native-events'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n        primary:\n          'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n        outline:\n          'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        // Transparentes: no hover, assumem a cor primária do template.\n        ghost:\n          'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n        link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n      },\n      size: {\n        sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n        md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n        lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n      },\n      iconOnly: { true: 'px-0', false: '' },\n      fullWidth: { true: 'w-full', false: '' },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n      { iconOnly: true, size: 'md', className: 'w-control-md' },\n      { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n      { variant: 'link', className: 'h-auto px-0' },\n    ],\n    defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n  },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n  /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n  icon?: ReactNode\n  /** Ícone à direita do texto. */\n  iconRight?: ReactNode\n  /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n  iconOnly?: boolean\n  /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n  loading?: boolean\n  /** Ocupa toda a largura do contêiner. */\n  fullWidth?: boolean\n  /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n  asChild?: boolean\n}\n\ntype MotionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children: ReactNode\n}\n\n/**\n * O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma\n * (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,\n * então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion\n * moram aqui e o `off` não paga nada.\n */\nconst MotionButton = forwardRef<HTMLButtonElement, MotionButtonProps>(\n  function MotionButton(props, ref) {\n    const { m } = useMotionOn()\n    const presets = useMotionPresets()\n    const { native, rest } = splitNativeEvents(props)\n    const attach = (el: HTMLButtonElement | null) => {\n      assignRef(ref, el)\n      if (!el) return\n      const unbind = bindNativeEvents(el, native)\n      return () => {\n        unbind()\n        assignRef(ref, null)\n      }\n    }\n    return (\n      <m.button\n        ref={attach}\n        whileTap={presets.press.whileTap}\n        transition={presets.press.transition}\n        {...rest}\n      />\n    )\n  },\n)\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') ref(value)\n  else if (ref) ref.current = value\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    icon,\n    iconRight,\n    iconOnly = false,\n    loading = false,\n    fullWidth = false,\n    asChild = false,\n    disabled,\n    type = 'button',\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n    console.warn('Button com iconOnly precisa de aria-label.')\n  }\n  const on = useMotionMode() === 'on'\n  // Em `on` o toque é do whileTap: a classe `active:scale-97` sairia somando com ele, e o\n  // `transform` sai da lista de transition (senão o CSS transiciona cada quadro que o Motion grava\n  // e o toque chega atrasado). Com asChild nada disso: é só CSS, como em `off`.\n  const classes = cn(\n    buttonVariants({ variant, size, iconOnly, fullWidth }),\n    on &&\n      !asChild &&\n      'transition-[color,background-color,border-color,box-shadow] active:scale-100',\n    className,\n  )\n  const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n  if (asChild) {\n    return (\n      <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n        {children}\n      </Slot.Root>\n    )\n  }\n\n  // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n  // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n  const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n  if (on) {\n    return (\n      <MotionButton\n        ref={ref}\n        type={type}\n        data-rendra={code}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {leading}\n        {iconOnly ? (loading ? null : children) : children}\n        {!iconOnly && iconRight}\n      </MotionButton>\n    )\n  }\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-rendra={code}\n      className={classes}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {leading}\n      {iconOnly ? (loading ? null : children) : children}\n      {!iconOnly && iconRight}\n    </button>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"button-DlzWwpZk.js","names":[],"sources":["../src/components/ui/spinner.tsx","../src/lib/motion/native-events.ts","../src/components/ui/button.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n  size?: 'sm' | 'md' | 'lg'\n  /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n  label?: string\n  className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n  sm: 'size-icon-sm',\n  md: 'size-icon-md',\n  lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n  const reduced = usePrefersReducedMotion()\n  const icon = (\n    <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n  )\n\n  if (!label) {\n    return (\n      <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n        {icon}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      data-rendra=\"SPIN-001\"\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n    >\n      {icon}\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n","/*\n * O Motion toma `onDrag`, `onDragStart`, `onDragEnd` e `onAnimationStart` para os gestos e\n * animações dele: tira essas props do DOM e as tipa com outra assinatura. Em `m.button` e\n * `m.li`, o consumidor que passa o evento nativo (HTML5 drag, animationstart do CSS) o perderia.\n * Estes ajudantes separam essas chaves das props e as ligam como ouvintes nativos no elemento.\n */\n\nconst NATIVE_EVENTS = {\n  onDrag: 'drag',\n  onDragStart: 'dragstart',\n  onDragEnd: 'dragend',\n  onAnimationStart: 'animationstart',\n} as const\n\ntype NativeKey = keyof typeof NATIVE_EVENTS\ntype Handler = ((event: never) => void) | undefined\n\n/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */\nexport function splitNativeEvents<P extends object>(props: P) {\n  const native: Partial<Record<NativeKey, Handler>> = {}\n  const rest: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key in NATIVE_EVENTS) native[key as NativeKey] = value as Handler\n    else rest[key] = value\n  }\n  return { native, rest: rest as Omit<P, NativeKey> }\n}\n\n/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */\nexport function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>) {\n  const bound: [string, EventListener][] = []\n  for (const [key, type] of Object.entries(NATIVE_EVENTS)) {\n    const handler = native[key as NativeKey]\n    if (!handler) continue\n    const listener = ((event: Event) => handler(event as never)) as EventListener\n    el.addEventListener(type, listener)\n    bound.push([type, listener])\n  }\n  return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionOn, useMotionPresets } from '@/lib/motion'\nimport { bindNativeEvents, splitNativeEvents } from '@/lib/motion/native-events'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n        primary:\n          'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n        outline:\n          'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        // Transparentes: no hover, assumem a cor primária do template.\n        ghost:\n          'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n        link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n      },\n      size: {\n        sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n        md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n        lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n      },\n      iconOnly: { true: 'px-0', false: '' },\n      fullWidth: { true: 'w-full', false: '' },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n      { iconOnly: true, size: 'md', className: 'w-control-md' },\n      { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n      { variant: 'link', className: 'h-auto px-0' },\n    ],\n    defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n  },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n  /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n  icon?: ReactNode\n  /** Ícone à direita do texto. */\n  iconRight?: ReactNode\n  /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n  iconOnly?: boolean\n  /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n  loading?: boolean\n  /** Ocupa toda a largura do contêiner. */\n  fullWidth?: boolean\n  /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n  asChild?: boolean\n}\n\ntype MotionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children: ReactNode\n}\n\n/**\n * O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma\n * (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,\n * então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion\n * moram aqui e o `off` não paga nada.\n */\nconst MotionButton = forwardRef<HTMLButtonElement, MotionButtonProps>(\n  function MotionButton(props, ref) {\n    const { m } = useMotionOn()\n    const presets = useMotionPresets()\n    const { native, rest } = splitNativeEvents(props)\n    const attach = (el: HTMLButtonElement | null) => {\n      assignRef(ref, el)\n      if (!el) return\n      const unbind = bindNativeEvents(el, native)\n      return () => {\n        unbind()\n        assignRef(ref, null)\n      }\n    }\n    return (\n      <m.button\n        ref={attach}\n        whileTap={presets.press.whileTap}\n        transition={presets.press.transition}\n        {...rest}\n      />\n    )\n  },\n)\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') ref(value)\n  else if (ref) ref.current = value\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    icon,\n    iconRight,\n    iconOnly = false,\n    loading = false,\n    fullWidth = false,\n    asChild = false,\n    disabled,\n    type = 'button',\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n    console.warn('Button com iconOnly precisa de aria-label.')\n  }\n  const on = useMotionMode() === 'on'\n  // Em `on` o toque é do whileTap: a classe `active:scale-97` sairia somando com ele, e o\n  // `transform` sai da lista de transition (senão o CSS transiciona cada quadro que o Motion grava\n  // e o toque chega atrasado). Com asChild nada disso: é só CSS, como em `off`.\n  const classes = cn(\n    buttonVariants({ variant, size, iconOnly, fullWidth }),\n    on &&\n      !asChild &&\n      'transition-[color,background-color,border-color,box-shadow] active:scale-100',\n    className,\n  )\n  const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n  if (asChild) {\n    return (\n      <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n        {children}\n      </Slot.Root>\n    )\n  }\n\n  // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n  // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n  const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n  if (on) {\n    return (\n      <MotionButton\n        ref={ref}\n        type={type}\n        data-rendra={code}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {leading}\n        {iconOnly ? (loading ? null : children) : children}\n        {!iconOnly && iconRight}\n      </MotionButton>\n    )\n  }\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-rendra={code}\n      className={classes}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {leading}\n      {iconOnly ? (loading ? null : children) : children}\n      {!iconOnly && iconRight}\n    </button>\n  )\n})\n"],"mappings":"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"}

package/dist/chart.js

@@ -1,10 +1,10 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-TBlI6-gS.js";
-import { a as useMotionMode, i as useMotionLib, s as useRevealScope } from "./motion-context-BL545cb6.js";
-import { n as toCubicBezier, t as useMotionPresets } from "./use-motion-presets-DCJPBfNJ.js";
-import { p as resolveCatalogCode } from "./components-Btk1cUg2.js";
-import { t as Button } from "./button-B6-644xP.js";
-import { n as useBreakpoint } from "./use-breakpoint-CNxDwEpc.js";
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-B0N3Pek0.js";
+import { a as useMotionMode, i as useMotionLib, s as useRevealScope } from "./motion-context-BUMPf0e9.js";
+import { n as toCubicBezier, t as useMotionPresets } from "./use-motion-presets-D3ww1oJX.js";
+import { p as resolveCatalogCode } from "./components-CpQPMGfT.js";
+import { t as Button } from "./button-DlzWwpZk.js";
+import { n as useBreakpoint } from "./use-breakpoint-En17oXKY.js";
 import { ArrowDown, BarChart3, List } from "lucide-react";
 import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/cli/auditar.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative, sep } from "node:path";
 //#region src/cli/auditar.ts

package/dist/cli/codigos.js

@@ -1,5 +1,5 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as CATALOG } from "../components-Btk1cUg2.js";
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as CATALOG } from "../components-CpQPMGfT.js";
 //#region src/cli/codigos.ts
 /** Todo o catálogo, na ordem cadastrada. Sem duplicata: garantido por assertCatalogIntegrity. */
 function codigos() {

package/dist/cli/executar-auditar.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { EXTENSAO_VARRIDA, IDS_REGRAS_GENERICAS, auditLines, auditar, casaPrefixo, coletarArquivos, percorrer, relativoA } from "./auditar.js";
 import { formatHelp } from "./help.js";
 import { existsSync, readFileSync } from "node:fs";

package/dist/cli/help.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 //#region src/cli/help.ts
 /** Linha final de autoria, igual em toda saída publicável (CLI, banner do pacote). */
 var AUTHOR_LINE = "Rendra Design System, por Bruno Magalhaes: brunomagalhaes.me · instagram.com/brunomagalhaes.me";

package/dist/cli/trocar.js

@@ -1,5 +1,5 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { f as getCatalogEntry } from "../components-Btk1cUg2.js";
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { f as getCatalogEntry } from "../components-CpQPMGfT.js";
 import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
 import { join, relative, sep } from "node:path";
 //#region src/cli/trocar.ts

package/dist/cli/typescript-loader.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { join } from "node:path";
 import { createRequire } from "node:module";
 import { pathToFileURL } from "node:url";

package/dist/{cn-TBlI6-gS.js → cn-B0N3Pek0.js}

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 //#region src/lib/cn.ts
@@ -19,4 +19,4 @@ function cn(...inputs) {
 //#endregion
 export { cn as t };
 
-//# sourceMappingURL=cn-TBlI6-gS.js.map
+//# sourceMappingURL=cn-B0N3Pek0.js.map

package/dist/{cn-TBlI6-gS.js.map → cn-B0N3Pek0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cn-TBlI6-gS.js","names":[],"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Ensina o tailwind-merge sobre os tokens próprios, para que text-xs e text-primary-text\n// não sejam tratados como conflito, e h-control-md substitua h-12 corretamente. text-label e\n// text-help são tamanho (rótulo e orientação do campo); text-label-foreground é cor.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', 'label', 'help'] }],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;AAMA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,aAAa,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAQ;CAAM;CAAM;CAAO;CAAO;CAAS;AAAM,EAAE,CAAC,EACzF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}
+{"version":3,"file":"cn-B0N3Pek0.js","names":[],"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Ensina o tailwind-merge sobre os tokens próprios, para que text-xs e text-primary-text\n// não sejam tratados como conflito, e h-control-md substitua h-12 corretamente. text-label e\n// text-help são tamanho (rótulo e orientação do campo); text-label-foreground é cor.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', 'label', 'help'] }],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;AAMA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,aAAa,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAQ;CAAM;CAAM;CAAO;CAAO;CAAS;AAAM,EAAE,CAAC,EACzF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/{components-Btk1cUg2.js → components-CpQPMGfT.js}

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 //#region src/catalog/components.ts
 /** Formato do código: de 3 a 4 letras maiúsculas, hífen, três dígitos. */
 var COMPONENT_CODE_PATTERN = /^[A-Z]{3,4}-\d{3}$/;
@@ -703,6 +703,22 @@ var CATALOG = [
 		variantProps: { layout: "gallery" },
 		whenToUse: "Para upload de fotos e vídeos, com miniatura em vez de linha de lista."
 	},
+	{
+		code: "FLX-001",
+		name: "Editor de fluxo",
+		component: "FlowEditor",
+		file: "components/ui/flow-editor.tsx",
+		variantProps: {},
+		whenToUse: "Para montar, ligar, validar e testar um fluxo de automação (gatilho, ação, condição, espera e fim)."
+	},
+	{
+		code: "FLX-002",
+		name: "Visualizador de fluxo",
+		component: "FlowViewer",
+		file: "components/ui/flow-viewer.tsx",
+		variantProps: {},
+		whenToUse: "Para mostrar um fluxo de automação só para ler, sem editar."
+	},
 	{
 		code: "WDG-001",
 		name: "Grade de widgets",
@@ -814,4 +830,4 @@ function assertCatalogIntegrity() {
 //#endregion
 export { catalogByComponent as a, findComponentsWithoutDefault as c, findPresetCollisions as d, getCatalogEntry as f, assertCatalogIntegrity as i, findDuplicateCodes as l, CATALOG_EXCLUDED_FILES as n, filesMissingCatalogEntry as o, resolveCatalogCode as p, COMPONENT_CODE_PATTERN as r, findComponentsWithMultipleDefaults as s, CATALOG as t, findInvalidFormatCodes as u };
 
-//# sourceMappingURL=components-Btk1cUg2.js.map
+//# sourceMappingURL=components-CpQPMGfT.js.map