@leonardofirme/deploy-nextjs16 1.1.4

package/src/components/ui/Dropdown.tsx

@@ -0,0 +1,72 @@
+// src/components/ui/Dropdown.tsx
+/**
+ * @file Dropdown.tsx
+ * @description Componente de menu suspenso com detecção de clique externo.
+ * Marcado como 'use client' para suportar Hooks de estado e efeitos no NextJS 16.
+ */
+"use client";
+
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '@/utils/cn';
+
+interface DropdownProps {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const Dropdown = ({ label, children, className }: DropdownProps): React.JSX.Element => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    return (
+        <div className="relative inline-block text-left" ref={containerRef}>
+            <div
+                className="cursor-pointer"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {label}
+            </div>
+
+            {isOpen && (
+                <div className={cn(
+                    "absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-xl border border-gray-200 bg-white shadow-xl outline-none",
+                    "dark:border-gray-800 dark:bg-gray-950",
+                    className
+                )}>
+                    <div className="py-2 px-1">{children}</div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+interface DropdownItemProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+
+export const DropdownItem = ({ children, onClick, className }: DropdownItemProps): React.JSX.Element => (
+    <button
+        onClick={onClick}
+        className={cn(
+            "block w-full px-4 py-2 text-left text-sm transition-colors rounded-lg font-sans",
+            "text-gray-500 hover:bg-gray-100 hover:text-gray-800",
+            "dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-50",
+            className
+        )}
+    >
+        {children}
+    </button>
+);

package/src/components/ui/FireworksBackground.tsx

@@ -0,0 +1,202 @@
+// src/components/ui/FireworksBackground.tsx
+/**
+ * @file FireworksBackground.tsx
+ * @description Background de alta performance com Canvas 2D.
+ * Implementação limpa sem dependência de lib externa.
+ * @author Leonardo Firme
+ */
+"use client";
+
+import React, { useCallback, useEffect, useRef } from "react";
+
+// Implementação interna do cn para evitar erro de módulo não encontrado em pastas separadas
+const cn = (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(" ");
+
+interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    alpha: number;
+    decay: number;
+    color: string;
+    size: number;
+}
+
+interface Firework {
+    x: number;
+    y: number;
+    targetY: number;
+    vx: number;
+    vy: number;
+    color: string;
+    trail: { x: number; y: number; alpha: number }[];
+}
+
+export interface FireworksProps {
+    className?: string;
+    children?: React.ReactNode;
+    autoLaunchInterval?: number;
+    particleCount?: number;
+}
+
+export function FireworksBackground({
+    className,
+    children,
+    autoLaunchInterval = 800,
+    particleCount = 60,
+}: FireworksProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const particlesRef = useRef<Particle[]>([]);
+    const fireworksRef = useRef<Firework[]>([]);
+    const animationRef = useRef<number>(0);
+    const scaleRef = useRef(1);
+
+    const colors = [
+        "#ff595e",
+        "#ffca3a",
+        "#8ac926",
+        "#1982c4",
+        "#6a4c93",
+        "#f72585",
+        "#4cc9f0",
+        "#80ed99",
+        "#ffd166",
+        "#ef476f",
+    ];
+
+    const rand = (min: number, max: number) => Math.random() * (max - min) + min;
+
+    const createExplosion = useCallback((x: number, y: number, color: string) => {
+        const scale = scaleRef.current;
+        const count = Math.floor(particleCount * Math.max(1, scale * 0.8));
+        for (let i = 0; i < count; i++) {
+            const angle = rand(0, Math.PI * 2);
+            const speed = rand(1, 6) * scale;
+            particlesRef.current.push({
+                x,
+                y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                alpha: 1,
+                decay: rand(0.01, 0.02),
+                color,
+                size: rand(1.5, 3.5),
+            });
+        }
+    }, [particleCount]);
+
+    const launchFirework = useCallback((targetX?: number, targetY?: number) => {
+        if (!containerRef.current) return;
+        const { offsetWidth: width, offsetHeight: height } = containerRef.current;
+        const scale = scaleRef.current;
+        const x = targetX ?? rand(width * 0.2, width * 0.8);
+        const startY = height;
+        const endY = targetY ?? rand(height * 0.2, height * 0.5);
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const speed = rand(10, 15) * scale;
+
+        fireworksRef.current.push({
+            x,
+            y: startY,
+            targetY: endY,
+            vx: rand(-1, 1) * scale,
+            vy: -speed,
+            color,
+            trail: [],
+        });
+    }, []);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const updateSize = () => {
+            const rect = container.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+            scaleRef.current = Math.min(rect.width, rect.height) / 1000;
+        };
+
+        updateSize();
+        const ro = new ResizeObserver(updateSize);
+        ro.observe(container);
+
+        const animate = () => {
+            const isDark = document.documentElement.classList.contains("dark");
+            ctx.fillStyle = isDark ? "rgba(3, 7, 18, 0.2)" : "rgba(255, 255, 255, 0.2)";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            const scale = scaleRef.current;
+
+            for (let i = fireworksRef.current.length - 1; i >= 0; i--) {
+                const fw = fireworksRef.current[i];
+                fw.trail.push({ x: fw.x, y: fw.y, alpha: 1 });
+                if (fw.trail.length > 12) fw.trail.shift();
+                fw.x += fw.vx;
+                fw.y += fw.vy;
+                fw.vy += 0.2 * scale;
+
+                fw.trail.forEach((p, idx) => {
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, 2 * scale * (idx / fw.trail.length), 0, Math.PI * 2);
+                    ctx.fillStyle = fw.color;
+                    ctx.globalAlpha = (idx / fw.trail.length) * 0.5;
+                    ctx.fill();
+                });
+
+                if (fw.vy >= 0 || fw.y <= fw.targetY) {
+                    createExplosion(fw.x, fw.y, fw.color);
+                    fireworksRef.current.splice(i, 1);
+                }
+            }
+
+            for (let i = particlesRef.current.length - 1; i >= 0; i--) {
+                const p = particlesRef.current[i];
+                p.vy += 0.08 * scale;
+                p.x += p.vx;
+                p.y += p.vy;
+                p.alpha -= p.decay;
+
+                if (p.alpha <= 0) {
+                    particlesRef.current.splice(i, 1);
+                    continue;
+                }
+
+                ctx.save();
+                ctx.globalAlpha = p.alpha;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.size * scale, 0, Math.PI * 2);
+                ctx.fillStyle = p.color;
+                if (isDark) {
+                    ctx.shadowBlur = 10 * scale;
+                    ctx.shadowColor = p.color;
+                }
+                ctx.fill();
+                ctx.restore();
+            }
+
+            animationRef.current = requestAnimationFrame(animate);
+        };
+
+        animationRef.current = requestAnimationFrame(animate);
+        const launcher = setInterval(() => autoLaunchInterval > 0 && launchFirework(), autoLaunchInterval);
+
+        return () => {
+            cancelAnimationFrame(animationRef.current);
+            clearInterval(launcher);
+            ro.disconnect();
+        };
+    }, [createExplosion, launchFirework, autoLaunchInterval]);
+
+    return (
+        <div ref={containerRef} className={cn("fixed inset-0 overflow-hidden bg-white dark:bg-gray-950", className)}>
+            <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
+            <div className="relative z-10 h-full w-full">{children}</div>
+        </div>
+    );
+}

package/src/components/ui/Index.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file Index.ts
+ * @description Ponto central de exportação dos componentes atômicos (UI Kit).
+ * Esta estrutura segue os padrões de Clean Architecture, permitindo que os componentes
+ * sejam importados de forma modular e otimizada via Tree Shaking.
+ * * @author Leonardo Firme | v0 Digital
+ * @version 1.1.0
+ */
+
+// Exportação do componente de botão com suporte a variantes (primary, outline, ghost)
+export * from './Button';
+
+// Exportação de campos de entrada de texto com tipagem estrita e modo dark nativo
+export * from './Input';
+
+// Exportação de containers de conteúdo com suporte a títulos e subtítulos
+export * from './Card';
+
+// Exportação de indicadores de status e tags informativas
+export * from './Badge';
+
+// Exportação de campo de texto multilinhas para descrições e observações
+export * from './Textarea';
+
+// Exportação de placeholders animados para estados de carregamento (Loading)
+export * from './Skeleton';
+
+// Exportação de interruptores (Switch) para controle de estados binários (on/off)
+export * from './Toggle';
+
+// Exportação do ecossistema de tabelas (Table, Header, Row, Cell) para exibição de dados
+export * from './Table';
+
+// Exportação de janelas sobrepostas animadas via Framer Motion
+export * from './Modal';
+
+// Exportação de menus de seleção única com mapeamento de opções
+export * from './Select';
+
+// Exportação de componentes para feedbacks visuais, mensagens de erro ou avisos
+export * from './Alert';
+
+// Exportação de sistemas de navegação estruturada (Trilhas)
+export * from './Breadcrumb';
+
+// Exportação de seletores de múltipla escolha (Check)
+export * from './Checkbox';
+
+// Exportação de menus de contexto e ações suspensas
+export * from './Dropdown';
+
+// Exportação de barras de progresso e indicadores de carregamento linear
+export * from './Progress';
+
+// Exportação do provedor de notificações (Toast) padronizado v0 Digital
+export * from './Toaster';

package/src/components/ui/Input.tsx

@@ -0,0 +1,34 @@
+// src/components/ui/Input.tsx
+/**
+ * @file Input.tsx
+ * @description Campo de entrada de texto padronizado.
+ * Sem uso de uppercase para preservar a integridade de dados sensíveis.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}
+
+export const Input = ({ label, className, ...props }: InputProps): React.JSX.Element => {
+    return (
+        <div className="w-full space-y-1.5">
+            {label && (
+                <label className="text-sm font-medium text-gray-500 dark:text-gray-100 font-sans">
+                    {label}
+                </label>
+            )}
+            <input
+                {...props}
+                className={cn(
+                    "flex h-10 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800 transition-all font-sans",
+                    "placeholder:text-gray-400 focus-visible:outline-hidden focus:border-v0-600",
+                    "disabled:cursor-not-allowed disabled:opacity-50",
+                    "dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50 dark:placeholder:text-gray-400",
+                    className
+                )}
+            />
+        </div>
+    );
+};

package/src/components/ui/Modal.tsx

@@ -0,0 +1,65 @@
+// src/components/ui/Modal.tsx
+/**
+ * @file Modal.tsx
+ * @description Janela sobreposta animada com Framer Motion.
+ * Marcado como 'use client' para gerenciar estados de animação e eventos de clique.
+ */
+"use client";
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/utils/cn';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const Modal = ({ isOpen, onClose, title, children, className }: ModalProps): React.JSX.Element => {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+                    {/* Overlay com desfoque minimalista */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className="absolute inset-0 bg-black/40 backdrop-blur-sm cursor-pointer"
+                    />
+
+                    {/* Conteúdo do Modal */}
+                    <motion.div
+                        initial={{ scale: 0.95, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        exit={{ scale: 0.95, opacity: 0 }}
+                        className={cn(
+                            "relative w-full max-w-lg rounded-xl border border-gray-200 bg-white p-6 shadow-xl",
+                            "dark:border-gray-800 dark:bg-gray-950 font-sans",
+                            className
+                        )}
+                    >
+                        <div className="mb-4 flex items-center justify-between">
+                            <h2 className="text-xl font-bold tracking-tight text-gray-800 dark:text-gray-50 font-sans">
+                                {title}
+                            </h2>
+                            <button
+                                onClick={onClose}
+                                className="text-gray-400 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-50 cursor-pointer transition-colors"
+                            >
+                                ✕
+                            </button>
+                        </div>
+                        <div className="text-gray-400 dark:text-gray-200 leading-relaxed">
+                            {children}
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+};

package/src/components/ui/Progress.tsx

@@ -0,0 +1,27 @@
+// src/components/ui/Progress.tsx
+/**
+ * @file Progress.tsx
+ * @description Barra de progresso linear para feedbacks de carregamento ou métricas.
+ * Design minimalista com transições suaves integradas.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+interface ProgressProps {
+    value?: number;
+    className?: string;
+}
+
+export const Progress = ({ value = 0, className }: ProgressProps): React.JSX.Element => {
+    return (
+        <div className={cn(
+            "h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-900",
+            className
+        )}>
+            <div
+                className="h-full bg-gray-800 transition-all duration-500 ease-in-out dark:bg-gray-50"
+                style={{ width: `${value}%` }}
+            />
+        </div>
+    );
+};

package/src/components/ui/Provider.tsx

@@ -0,0 +1,16 @@
+// src/components/ui/Provider.tsx
+"use client";
+import { useEffect } from "react";
+import { LEGAL } from "@/core/legal";
+
+export const IntegrityProvider = ({ children }: { children: React.ReactNode }) => {
+    useEffect(() => {
+        // Log estilizado que aparece no console do navegador do usuário
+        console.log(
+            `%c ${LEGAL.notice} `,
+            "background: #111; color: #fff; border-left: 4px solid #v0-600; padding: 10px; font-weight: bold;"
+        );
+    }, []);
+
+    return <>{children}</>;
+};

package/src/components/ui/Select.tsx

@@ -0,0 +1,41 @@
+// src/components/ui/Select.tsx
+/**
+ * @file Select.tsx
+ * @description Seletor de opções padronizado para formulários ERP.
+ * Segue o layout minimalista de bordas e tipografia do ecossistema v0 Digital.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    options: { label: string; value: string | number }[];
+}
+
+export const Select = ({ label, options, className, ...props }: SelectProps): React.JSX.Element => {
+    return (
+        <div className="w-full space-y-1.5">
+            {label && (
+                <label className="text-sm font-medium text-gray-500 dark:text-gray-100 font-sans">
+                    {label}
+                </label>
+            )}
+            <select
+                {...props}
+                className={cn(
+                    "flex h-10 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800 font-sans transition-all",
+                    "focus-visible:outline-hidden focus:border-v0-600 cursor-pointer",
+                    "disabled:cursor-not-allowed disabled:opacity-50",
+                    "dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+                    className
+                )}
+            >
+                {options.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+};

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Skeleton = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => {
+    return (
+        <div
+            className={`animate-pulse rounded-md bg-gray-200 dark:bg-gray-800 ${className}`}
+            {...props}
+        />
+    );
+};

package/src/components/ui/StarfieldBackground.tsx

@@ -0,0 +1,161 @@
+// src/components/ui/StarfieldBackground.tsx
+/**
+ * @file StarfieldBackground.tsx
+ * @description Background espacial com efeito de profundidade (warp speed).
+ * Otimizado para alta performance via Canvas 2D sem dependências.
+ * @author Leonardo Firme
+ */
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+// Implementação interna do cn para garantir portabilidade entre pastas
+const cn = (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(" ");
+
+export interface StarfieldBackgroundProps {
+    className?: string;
+    children?: React.ReactNode;
+    count?: number;
+    speed?: number;
+    starColor?: string;
+    twinkle?: boolean;
+}
+
+interface Star {
+    x: number;
+    y: number;
+    z: number;
+    twinkleSpeed: number;
+    twinkleOffset: number;
+}
+
+export function StarfieldBackground({
+    className,
+    children,
+    count = 400,
+    speed = 0.5,
+    starColor = "#ffffff",
+    twinkle = true,
+}: StarfieldBackgroundProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container) return;
+
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        let width = 0;
+        let height = 0;
+        const maxDepth = 1500;
+
+        const updateSize = () => {
+            const rect = container.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+            canvas.width = width;
+            canvas.height = height;
+        };
+
+        const createStar = (initialZ?: number): Star => ({
+            x: (Math.random() - 0.5) * width * 2,
+            y: (Math.random() - 0.5) * height * 2,
+            z: initialZ ?? Math.random() * maxDepth,
+            twinkleSpeed: Math.random() * 0.02 + 0.01,
+            twinkleOffset: Math.random() * Math.PI * 2,
+        });
+
+        updateSize();
+        let stars: Star[] = Array.from({ length: count }, () => createStar());
+        let animationId: number;
+        let tick = 0;
+
+        const ro = new ResizeObserver(updateSize);
+        ro.observe(container);
+
+        const animate = () => {
+            tick++;
+            const isDark = document.documentElement.classList.contains("dark");
+
+            // Cor de fundo dinâmica baseada no tema do sistema
+            ctx.fillStyle = isDark ? "rgba(3, 7, 18, 0.2)" : "rgba(255, 255, 255, 0.2)";
+            ctx.fillRect(0, 0, width, height);
+
+            const cx = width / 2;
+            const cy = height / 2;
+            const currentStarColor = isDark ? starColor : "#1f2937"; // Gray-800 no light mode
+
+            for (const star of stars) {
+                star.z -= speed * 2;
+
+                if (star.z <= 0) {
+                    star.x = (Math.random() - 0.5) * width * 2;
+                    star.y = (Math.random() - 0.5) * height * 2;
+                    star.z = maxDepth;
+                }
+
+                const scale = 400 / star.z;
+                const x = cx + star.x * scale;
+                const y = cy + star.y * scale;
+
+                if (x < -10 || x > width + 10 || y < -10 || y > height + 10) continue;
+
+                const size = Math.max(0.5, (1 - star.z / maxDepth) * 3);
+                let opacity = (1 - star.z / maxDepth) * 0.9 + 0.1;
+
+                if (twinkle && star.twinkleSpeed > 0.015) {
+                    opacity *= 0.7 + 0.3 * Math.sin(tick * star.twinkleSpeed + star.twinkleOffset);
+                }
+
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fillStyle = currentStarColor;
+                ctx.globalAlpha = opacity;
+                ctx.fill();
+
+                // Streak effect (rastro) para estrelas próximas
+                if (star.z < maxDepth * 0.3 && speed > 0.3) {
+                    const streakLength = (1 - star.z / maxDepth) * speed * 8;
+                    const angle = Math.atan2(star.y, star.x);
+                    ctx.beginPath();
+                    ctx.moveTo(x, y);
+                    ctx.lineTo(x - Math.cos(angle) * streakLength, y - Math.sin(angle) * streakLength);
+                    ctx.strokeStyle = currentStarColor;
+                    ctx.globalAlpha = opacity * 0.3;
+                    ctx.lineWidth = size * 0.5;
+                    ctx.stroke();
+                }
+            }
+
+            ctx.globalAlpha = 1;
+            animationId = requestAnimationFrame(animate);
+        };
+
+        animationId = requestAnimationFrame(animate);
+
+        return () => {
+            cancelAnimationFrame(animationId);
+            ro.disconnect();
+        };
+    }, [count, speed, starColor, twinkle]);
+
+    return (
+        <div ref={containerRef} className={cn("fixed inset-0 overflow-hidden bg-white dark:bg-gray-950", className)}>
+            <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
+
+            {/* Nebula sutil usando as cores v0 */}
+            <div
+                className="pointer-events-none absolute inset-0 opacity-20 dark:opacity-30"
+                style={{
+                    background:
+                        "radial-gradient(ellipse at 30% 40%, rgba(79, 70, 229, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 50%)",
+                }}
+            />
+
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+}