@rendra-ui/web 2.1.0

package/dist/document-viewer.js

@@ -0,0 +1,204 @@
+/*! Rendra Design System v2.1.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-DVPheE99.js";
+import { t as Button } from "./button-DIcpJwK9.js";
+import { t as EmptyState } from "./empty-state-DtyZAfYb.js";
+import { ChevronLeft, ChevronRight, ExternalLink, ZoomIn, ZoomOut } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/ui/document-viewer.tsx
+var MIN_SCALE = .25;
+var MAX_SCALE = 3;
+var ZOOM_STEP = 1.25;
+/** Um visualizador de documento por tela; nunca crie um segundo para PDF. */
+function DocumentViewer({ url, title, className, emptyTitle = "Nenhum documento selecionado", emptyDescription = "Escolha um arquivo PDF para visualizar aqui.", loadingLabel = "Carregando documento...", errorTitle = "Não foi possível abrir o documento", errorDescription = "O arquivo pode estar indisponível, corrompido ou bloqueado por CORS.", openInNewTabLabel = "Abrir em nova aba", zoomInLabel = "Aumentar zoom", zoomOutLabel = "Diminuir zoom", previousPageLabel = "Página anterior", nextPageLabel = "Próxima página" }) {
+	const [status, setStatus] = useState(url ? "loading" : "empty");
+	const [page, setPage] = useState(1);
+	const [numPages, setNumPages] = useState(0);
+	const [scale, setScale] = useState(1);
+	const [fitToWidth, setFitToWidth] = useState(true);
+	const pdfRef = useRef(null);
+	const containerRef = useRef(null);
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		let cancelled = false;
+		let loadingTask = null;
+		pdfRef.current = null;
+		setPage(1);
+		setNumPages(0);
+		setFitToWidth(true);
+		setScale(1);
+		if (!url) {
+			setStatus("empty");
+			return;
+		}
+		const targetUrl = url;
+		setStatus("loading");
+		async function load() {
+			try {
+				const [pdfjsLib, workerModule] = await Promise.all([import("pdfjs-dist"), import("pdfjs-dist/build/pdf.worker.min.mjs?url")]);
+				pdfjsLib.GlobalWorkerOptions.workerSrc = workerModule.default;
+				if (cancelled) return;
+				loadingTask = pdfjsLib.getDocument({ url: targetUrl });
+				const doc = await loadingTask.promise;
+				if (cancelled) return;
+				pdfRef.current = doc;
+				setNumPages(doc.numPages);
+				setStatus("ready");
+			} catch {
+				if (cancelled) return;
+				setStatus("error");
+			}
+		}
+		load();
+		return () => {
+			cancelled = true;
+			loadingTask?.destroy();
+		};
+	}, [url]);
+	useEffect(() => {
+		if (status !== "ready" || !pdfRef.current) return;
+		let cancelled = false;
+		async function draw() {
+			const doc = pdfRef.current;
+			if (!doc) return;
+			const pdfPage = await doc.getPage(page);
+			if (cancelled) return;
+			const natural = pdfPage.getViewport({ scale: 1 });
+			const containerWidth = containerRef.current?.clientWidth ?? 0;
+			const effectiveScale = fitToWidth && containerWidth > 0 ? containerWidth / natural.width : scale;
+			const viewport = pdfPage.getViewport({ scale: effectiveScale });
+			const canvas = canvasRef.current;
+			if (!canvas) return;
+			canvas.width = viewport.width;
+			canvas.height = viewport.height;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			await pdfPage.render({
+				canvas,
+				canvasContext: ctx,
+				viewport
+			}).promise;
+		}
+		draw();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		status,
+		page,
+		scale,
+		fitToWidth
+	]);
+	const zoomIn = () => {
+		setFitToWidth(false);
+		setScale((s) => Math.min(MAX_SCALE, s * ZOOM_STEP));
+	};
+	const zoomOut = () => {
+		setFitToWidth(false);
+		setScale((s) => Math.max(MIN_SCALE, s / ZOOM_STEP));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-rendra": "DOC-001",
+		role: "group",
+		"aria-label": title,
+		className: cn("flex h-viewer min-h-0 flex-col overflow-hidden rounded-surface border bg-card", className),
+		children: [
+			status === "empty" && /* @__PURE__ */ jsx(EmptyState, {
+				title: emptyTitle,
+				description: emptyDescription,
+				className: "m-auto"
+			}),
+			status === "loading" && /* @__PURE__ */ jsx("div", {
+				className: "m-auto flex flex-col items-center gap-2 px-4 py-8 text-sm text-muted-foreground",
+				role: "status",
+				children: loadingLabel
+			}),
+			status === "error" && /* @__PURE__ */ jsx(EmptyState, {
+				type: "error",
+				title: errorTitle,
+				description: errorDescription,
+				className: "m-auto",
+				actions: url && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("a", {
+						href: url,
+						target: "_blank",
+						rel: "noreferrer",
+						children: [/* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true }), openInNewTabLabel]
+					})
+				})
+			}),
+			status === "ready" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between gap-3 border-b bg-card px-3 py-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": zoomOutLabel,
+							icon: /* @__PURE__ */ jsx(ZoomOut, {}),
+							onClick: zoomOut
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-12 text-center text-xs text-muted-foreground tabular-nums",
+							children: fitToWidth ? "Ajustar" : `${Math.round(scale * 100)}%`
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": zoomInLabel,
+							icon: /* @__PURE__ */ jsx(ZoomIn, {}),
+							onClick: zoomIn
+						})
+					]
+				}), numPages > 1 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": previousPageLabel,
+							icon: /* @__PURE__ */ jsx(ChevronLeft, {}),
+							disabled: page <= 1,
+							onClick: () => setPage((p) => Math.max(1, p - 1))
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground tabular-nums",
+							"aria-live": "polite",
+							children: [
+								page,
+								" de ",
+								numPages
+							]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": nextPageLabel,
+							icon: /* @__PURE__ */ jsx(ChevronRight, {}),
+							disabled: page >= numPages,
+							onClick: () => setPage((p) => Math.min(numPages, p + 1))
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: containerRef,
+				className: "flex min-h-0 flex-1 items-center justify-center overflow-auto bg-muted p-4",
+				children: /* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					className: "max-w-full rounded-item bg-card shadow-sm"
+				})
+			})] })
+		]
+	});
+}
+//#endregion
+export { DocumentViewer };
+
+//# sourceMappingURL=document-viewer.js.map

package/dist/document-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-viewer.js","names":[],"sources":["../src/components/ui/document-viewer.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, ExternalLink, ZoomIn, ZoomOut } from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { EmptyState } from '@/components/ui/empty-state'\nimport { cn } from '@/lib/cn'\n\n/*\n * Visualizador de documentos PDF. Carrega o pdfjs-dist sob demanda (import dinâmico), com o\n * worker também sob demanda, para o pacote principal nunca pagar o custo de quem não usa o\n * visualizador. url null é o estado vazio legítimo (nenhum documento escolhido ainda). Falha\n * (CORS, arquivo inválido) é declarada, nunca uma tela em branco: sempre com o link \"Abrir em\n * nova aba\".\n */\n\n// pdfjs-dist é grande e só entra no bundle de quem realmente usa o DocumentViewer: os tipos\n// abaixo são só de compilação (import de tipo), o import de valor é sempre dinâmico (import()).\ntype PdfDocumentProxy = import('pdfjs-dist').PDFDocumentProxy\n// destroy() vive na tarefa de carregamento (o que getDocument devolve antes do .promise),\n// não no documento já resolvido: é ela que precisa ser guardada para liberar depois.\ntype PdfLoadingTask = import('pdfjs-dist').PDFDocumentLoadingTask\n\ntype Status = 'empty' | 'loading' | 'ready' | 'error'\n\nexport interface DocumentViewerProps {\n  /** Endereço do PDF. null é o estado vazio legítimo (nenhum documento escolhido ainda). */\n  url: string | null\n  /** Nome acessível do documento (aria-label do visualizador). */\n  title: string\n  className?: string\n  emptyTitle?: string\n  emptyDescription?: string\n  loadingLabel?: string\n  errorTitle?: string\n  errorDescription?: string\n  openInNewTabLabel?: string\n  zoomInLabel?: string\n  zoomOutLabel?: string\n  previousPageLabel?: string\n  nextPageLabel?: string\n}\n\nconst MIN_SCALE = 0.25\nconst MAX_SCALE = 3\nconst ZOOM_STEP = 1.25\n\n/** Um visualizador de documento por tela; nunca crie um segundo para PDF. */\nexport function DocumentViewer({\n  url,\n  title,\n  className,\n  emptyTitle = 'Nenhum documento selecionado',\n  emptyDescription = 'Escolha um arquivo PDF para visualizar aqui.',\n  loadingLabel = 'Carregando documento...',\n  errorTitle = 'Não foi possível abrir o documento',\n  errorDescription = 'O arquivo pode estar indisponível, corrompido ou bloqueado por CORS.',\n  openInNewTabLabel = 'Abrir em nova aba',\n  zoomInLabel = 'Aumentar zoom',\n  zoomOutLabel = 'Diminuir zoom',\n  previousPageLabel = 'Página anterior',\n  nextPageLabel = 'Próxima página',\n}: DocumentViewerProps) {\n  const [status, setStatus] = useState<Status>(url ? 'loading' : 'empty')\n  const [page, setPage] = useState(1)\n  const [numPages, setNumPages] = useState(0)\n  const [scale, setScale] = useState(1)\n  const [fitToWidth, setFitToWidth] = useState(true)\n  const pdfRef = useRef<PdfDocumentProxy | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  // Carrega o documento (ou reinicia o estado vazio) sempre que a url muda. Libera a tarefa\n  // de carregamento (destroy) ao trocar de url e ao desmontar, para não vazar memória nem o\n  // worker que o pdfjs sobe para cada documento.\n  useEffect(() => {\n    let cancelled = false\n    let loadingTask: PdfLoadingTask | null = null\n    pdfRef.current = null\n    setPage(1)\n    setNumPages(0)\n    setFitToWidth(true)\n    setScale(1)\n\n    if (!url) {\n      setStatus('empty')\n      return\n    }\n    const targetUrl: string = url\n\n    setStatus('loading')\n    async function load() {\n      try {\n        const [pdfjsLib, workerModule] = await Promise.all([\n          import('pdfjs-dist'),\n          import('pdfjs-dist/build/pdf.worker.min.mjs?url'),\n        ])\n        pdfjsLib.GlobalWorkerOptions.workerSrc = workerModule.default\n        if (cancelled) return\n        loadingTask = pdfjsLib.getDocument({ url: targetUrl })\n        const doc = await loadingTask.promise\n        if (cancelled) return\n        pdfRef.current = doc\n        setNumPages(doc.numPages)\n        setStatus('ready')\n      } catch {\n        if (cancelled) return\n        setStatus('error')\n      }\n    }\n    void load()\n    return () => {\n      cancelled = true\n      void loadingTask?.destroy()\n    }\n  }, [url])\n\n  // Desenha a página atual sempre que ela, o zoom ou o modo \"ajustar à largura\" mudam.\n  useEffect(() => {\n    if (status !== 'ready' || !pdfRef.current) return\n    let cancelled = false\n    async function draw() {\n      const doc = pdfRef.current\n      if (!doc) return\n      const pdfPage = await doc.getPage(page)\n      if (cancelled) return\n      const natural = pdfPage.getViewport({ scale: 1 })\n      const containerWidth = containerRef.current?.clientWidth ?? 0\n      const effectiveScale =\n        fitToWidth && containerWidth > 0 ? containerWidth / natural.width : scale\n      const viewport = pdfPage.getViewport({ scale: effectiveScale })\n      const canvas = canvasRef.current\n      if (!canvas) return\n      canvas.width = viewport.width\n      canvas.height = viewport.height\n      const ctx = canvas.getContext('2d')\n      // Sem contexto 2D disponível (ambiente sem canvas real): mantém os controles\n      // funcionando, só não desenha o pixel a pixel.\n      if (!ctx) return\n      await pdfPage.render({ canvas, canvasContext: ctx, viewport }).promise\n    }\n    void draw()\n    return () => {\n      cancelled = true\n    }\n  }, [status, page, scale, fitToWidth])\n\n  const zoomIn = () => {\n    setFitToWidth(false)\n    setScale((s) => Math.min(MAX_SCALE, s * ZOOM_STEP))\n  }\n  const zoomOut = () => {\n    setFitToWidth(false)\n    setScale((s) => Math.max(MIN_SCALE, s / ZOOM_STEP))\n  }\n\n  return (\n    <div\n      data-rendra=\"DOC-001\"\n      role=\"group\"\n      aria-label={title}\n      className={cn(\n        'flex h-viewer min-h-0 flex-col overflow-hidden rounded-surface border bg-card',\n        className,\n      )}\n    >\n      {status === 'empty' && (\n        <EmptyState title={emptyTitle} description={emptyDescription} className=\"m-auto\" />\n      )}\n\n      {status === 'loading' && (\n        <div\n          className=\"m-auto flex flex-col items-center gap-2 px-4 py-8 text-sm text-muted-foreground\"\n          role=\"status\"\n        >\n          {loadingLabel}\n        </div>\n      )}\n\n      {status === 'error' && (\n        <EmptyState\n          type=\"error\"\n          title={errorTitle}\n          description={errorDescription}\n          className=\"m-auto\"\n          actions={\n            url && (\n              <Button variant=\"outline\" asChild>\n                <a href={url} target=\"_blank\" rel=\"noreferrer\">\n                  <ExternalLink aria-hidden />\n                  {openInNewTabLabel}\n                </a>\n              </Button>\n            )\n          }\n        />\n      )}\n\n      {status === 'ready' && (\n        <>\n          <div className=\"flex shrink-0 items-center justify-between gap-3 border-b bg-card px-3 py-2\">\n            <div className=\"flex items-center gap-1\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconOnly\n                aria-label={zoomOutLabel}\n                icon={<ZoomOut />}\n                onClick={zoomOut}\n              />\n              <span className=\"w-12 text-center text-xs text-muted-foreground tabular-nums\">\n                {fitToWidth ? 'Ajustar' : `${Math.round(scale * 100)}%`}\n              </span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconOnly\n                aria-label={zoomInLabel}\n                icon={<ZoomIn />}\n                onClick={zoomIn}\n              />\n            </div>\n            {numPages > 1 && (\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  iconOnly\n                  aria-label={previousPageLabel}\n                  icon={<ChevronLeft />}\n                  disabled={page <= 1}\n                  onClick={() => setPage((p) => Math.max(1, p - 1))}\n                />\n                <span className=\"text-xs text-muted-foreground tabular-nums\" aria-live=\"polite\">\n                  {page} de {numPages}\n                </span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  iconOnly\n                  aria-label={nextPageLabel}\n                  icon={<ChevronRight />}\n                  disabled={page >= numPages}\n                  onClick={() => setPage((p) => Math.min(numPages, p + 1))}\n                />\n              </div>\n            )}\n          </div>\n          <div\n            ref={containerRef}\n            className=\"flex min-h-0 flex-1 items-center justify-center overflow-auto bg-muted p-4\"\n          >\n            <canvas ref={canvasRef} className=\"max-w-full rounded-item bg-card shadow-sm\" />\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/empty-state-DtyZAfYb.js

@@ -0,0 +1,168 @@
+/*! Rendra Design System v2.1.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-DVPheE99.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cva } from "class-variance-authority";
+//#region src/brand/brand-context.ts
+var BrandContext = createContext(null);
+//#endregion
+//#region src/brand/use-brand.ts
+function useBrand() {
+	const ctx = useContext(BrandContext);
+	if (!ctx) throw new Error("useBrand precisa estar dentro de <BrandProvider>.");
+	return ctx;
+}
+//#endregion
+//#region src/components/ui/brand-feedback-icon.tsx
+var iconVariants = cva("relative inline-flex shrink-0", {
+	variants: {
+		type: {
+			success: "text-success",
+			error: "text-destructive",
+			warning: "text-warning",
+			info: "text-info"
+		},
+		size: {
+			sm: "size-icon-sm",
+			md: "size-icon-md",
+			lg: "size-icon-lg",
+			xl: "size-12",
+			"2xl": "size-16"
+		}
+	},
+	defaultVariants: {
+		type: "info",
+		size: "md"
+	}
+});
+var badgeTone = {
+	success: "bg-success text-success-foreground",
+	error: "bg-destructive text-destructive-foreground",
+	warning: "bg-warning text-warning-foreground",
+	info: "bg-info text-info-foreground"
+};
+var feedbackLabels = {
+	success: "Sucesso",
+	error: "Erro",
+	warning: "Atenção",
+	info: "Informação"
+};
+/** Glifos universais de status desenhados em traço, herdando currentColor. */
+function StatusGlyph({ type, animated, ...props }) {
+	const draw = animated ? {
+		pathLength: 1,
+		strokeDasharray: 1,
+		className: "animate-draw"
+	} : {};
+	const common = {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		...props
+	};
+	switch (type) {
+		case "success": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3 6.2 5.1 8.2 9 4",
+				...draw
+			})
+		});
+		case "error": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 4l4 4M8 4 4 8",
+				...draw
+			})
+		});
+		case "warning": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M6 3.2v3.3M6 8.8v0",
+				...draw
+			})
+		});
+		case "info": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M6 3.2v0M6 5.5v3.3",
+				...draw
+			})
+		});
+	}
+}
+/**
+* Ícone de feedback da marca: o símbolo da marca em currentColor, tingido pela cor
+* semântica, com um selo de status para que o significado não dependa só da cor.
+* Cada tipo pode ser substituído por um SVG próprio em brand.config.ts (feedbackIcons).
+*/
+function BrandFeedbackIcon({ type, size, label, animated = false, className }) {
+	const { brand } = useBrand();
+	const Custom = brand.feedbackIcons?.[type];
+	const Symbol = brand.symbol;
+	const a11y = label ? {
+		role: "img",
+		"aria-label": label
+	} : { "aria-hidden": true };
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "feedback-icon",
+		"data-rendra": "BFI-001",
+		className: cn(iconVariants({
+			type,
+			size
+		}), animated && type === "error" && "animate-shake", className),
+		...a11y,
+		children: Custom ? /* @__PURE__ */ jsx(Custom, { className: cn("size-full", animated && "animate-pop") }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Symbol, { className: cn("size-full mask-status-cutout", animated && "animate-pop") }), /* @__PURE__ */ jsx("span", {
+			className: cn("absolute right-0 bottom-0 flex size-1/2 items-center justify-center rounded-full", badgeTone[type], animated && "animate-pop anim-delay-1"),
+			children: /* @__PURE__ */ jsx(StatusGlyph, {
+				type,
+				animated,
+				className: "size-full"
+			})
+		})] })
+	});
+}
+//#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 }) {
+	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("span", {
+				className: "relative flex items-center justify-center",
+				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("p", {
+					className: "text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: description
+				})]
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap justify-center gap-3",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { BrandContext as a, useBrand as i, BrandFeedbackIcon as n, feedbackLabels as r, EmptyState as t };
+
+//# sourceMappingURL=empty-state-DtyZAfYb.js.map

package/dist/empty-state-DtyZAfYb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-DtyZAfYb.js","names":[],"sources":["../src/brand/brand-context.ts","../src/brand/use-brand.ts","../src/components/ui/brand-feedback-icon.tsx","../src/components/ui/empty-state.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 type { SVGProps } from 'react'\nimport { useBrand } from '@/brand/use-brand'\nimport type { FeedbackType } from '@/brand/types'\nimport { cn } from '@/lib/cn'\n\nconst iconVariants = cva('relative inline-flex shrink-0', {\n  variants: {\n    type: {\n      success: 'text-success',\n      error: 'text-destructive',\n      warning: 'text-warning',\n      info: 'text-info',\n    },\n    size: {\n      sm: 'size-icon-sm',\n      md: 'size-icon-md',\n      lg: 'size-icon-lg',\n      xl: 'size-12',\n      '2xl': 'size-16',\n    },\n  },\n  defaultVariants: { type: 'info', size: 'md' },\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 Omit<VariantProps<typeof iconVariants>, 'type'> {\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  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  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\n  return (\n    <span\n      data-slot=\"feedback-icon\"\n      data-rendra=\"BFI-001\"\n      className={cn(\n        iconVariants({ type, size }),\n        animated && type === 'error' && 'animate-shake',\n        className,\n      )}\n      {...a11y}\n    >\n      {Custom ? (\n        <Custom className={cn('size-full', animated && 'animate-pop')} />\n      ) : (\n        <>\n          <Symbol className={cn('size-full mask-status-cutout', animated && 'animate-pop')} />\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              animated && 'animate-pop anim-delay-1',\n            )}\n          >\n            <StatusGlyph type={type} animated={animated} className=\"size-full\" />\n          </span>\n        </>\n      )}\n    </span>\n  )\n}\n","import type { ReactNode } from 'react'\nimport type { FeedbackType } from '@/brand/types'\nimport { BrandFeedbackIcon } from '@/components/ui/brand-feedback-icon'\nimport { cn } from '@/lib/cn'\n\nexport interface EmptyStateProps {\n  title: string\n  description?: ReactNode\n  /** Tipo do ícone de feedback da marca. info para \"sem dados\", error para falha. */\n  type?: FeedbackType\n  /** Ações: no máximo uma principal e uma secundária. */\n  actions?: ReactNode\n  /** compact: dentro de tabela ou card pequeno. */\n  size?: 'default' | 'compact'\n  className?: string\n}\n\n/** Estado vazio (e de erro) com o ícone de feedback da marca. */\nexport function EmptyState({\n  title,\n  description,\n  type = 'info',\n  actions,\n  size = 'default',\n  className,\n}: EmptyStateProps) {\n  return (\n    <div\n      data-rendra=\"VAZ-001\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-4 text-center',\n        size === 'compact' ? 'px-4 py-8' : 'px-4 py-12 md:py-16',\n        className,\n      )}\n    >\n      <span className=\"relative flex items-center justify-center\">\n        <span aria-hidden className=\"absolute size-16 rounded-full bg-gradient-soft\" />\n        <BrandFeedbackIcon\n          type={type}\n          size={size === 'compact' ? 'xl' : '2xl'}\n          className=\"relative\"\n        />\n      </span>\n      <div className=\"flex w-full flex-col gap-1\">\n        <p className=\"text-base font-semibold\">{title}</p>\n        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n      </div>\n      {actions && <div className=\"flex flex-wrap justify-center gap-3\">{actions}</div>}\n    </div>\n  )\n}\n"],"mappings":"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"}