@leonardofirme/deploy-nextjs16 1.1.4

package/README.md

@@ -0,0 +1,99 @@
+# Deploy NextJS 16+ | Leonardo Firme
+
+Estrutura profissional (Scaffold) para desenvolvimento de SaaS e ERPs dinâmicos, utilizando NextJS 16+, React 19 e Tailwind CSS v4.
+
+![Leonardo Firme](https://img.shields.io/badge/Leonardo_Firme-fff1f0?style=for-the-badge&logo=data:image/png;base64,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&logoColor=white)
+![Next.js](https://img.shields.io/badge/Next.js_16+-000000?style=for-the-badge&logo=next.js&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS_v4-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
+
+---
+
+## 🚀 Instalação Rápida
+
+Para iniciar um novo projeto utilizando este scaffold, execute o comando abaixo no seu terminal:
+
+```bash
+npx @LeonardoFirme/deploy-nextjs16   meu-novo-projeto
+
+```
+
+> **Nota:** Certifique-se de ter um arquivo `.npmrc` configurado com seu Token do GitHub para acessar os pacotes privados `@LeonardoFirme`.
+
+---
+
+## 📂 Detalhamento da Estrutura
+
+### 📁 Raiz (Root) & Configurações
+
+* **`bin/lf-init`**: Executável do scaffold para automação da cópia de arquivos e setup inicial.
+* **`package.json`**: Manifesto com dependências (Next 16.1.6, React 19.2.3, Tailwind v4). Define o binário `lf-init`.
+* **`package-lock.json`**: Controle de integridade e versões das dependências.
+* **`postcss.config.mjs`**: Configuração do motor PostCSS para processamento do Tailwind v4.
+* **`tsconfig.json`**: Regras de tipagem estática e aliases de caminhos (paths) do projeto.
+
+### 📁 `src/app` (Rotas e Estilo Global)
+
+* **`layout.tsx`**: Layout principal da aplicação. Gerencia fontes, metadados e wrappers de contexto.
+* **`page.tsx`**: View principal da rota raiz (Home).
+* **`globals.css`**: Configuração global do Tailwind v4 e variáveis de cores dinâmicas.
+
+### 📁 `src/components/ui` (Biblioteca Minimalista)
+
+Componentes atômicos com suporte nativo a `dark:`.
+
+* **`Alert.tsx`, `Badge.tsx`, `Breadcrumb.tsx**`: Sinalização, status e navegação.
+* **`Button.tsx`**: Ação principal (`bg-gray-800` light / `bg-gray-50` dark).
+* **`Card.tsx`, `Modal.tsx`, `Dropdown.tsx**`: Containers de conteúdo e sobreposição.
+* **`Input.tsx`, `Select.tsx`, `Checkbox.tsx`, `Toggle.tsx`, `Textarea.tsx**`: Elementos de formulário (sem manipulação de `uppercase`).
+* **`Table.tsx`**: Grid de dados avançado para sistemas ERP.
+* **`StarfieldBackground.tsx` & `FireworksBackground.tsx**`: Backgrounds animados profissionais.
+* **`ToggleDarkmode.tsx`**: Controle de alternância de tema.
+* **`Provider.tsx`**: Wrapper centralizador de contextos de interface.
+* **`Index.tsx`**: Ponto central de exportação dos componentes.
+
+### 📁 `src/core` (Lógica e Regras)
+
+* **`animations.ts`**: Configurações centralizadas de Framer Motion.
+* **`config.ts`**: Variáveis de ambiente e constantes globais do sistema.
+* **`constants.ts`**: Valores estáticos e Enums de negócio.
+* **`legal.ts`**: Textos jurídicos e termos padronizados.
+* **`providers/node-resolver.tsx`**: Gerenciador de hidratação para componentes Client/Server.
+
+### 📁 `src/hooks` & `src/layouts`
+
+* **`use-theme.tsx`**: Hook para controle lógico do estado Dark/Light.
+* **`default-layout.tsx`**: Template base estrutural para dashboards e plataformas.
+
+### 📁 `src/proxy.ts` (Segurança e Roteamento)
+
+* **`proxy.ts`**: Camada de interceptação que substitui o middleware, controlando headers e redirecionamentos.
+
+### 📁 `src/utils` & `src/types`
+
+* **`cn.ts`**: Utilitário para mesclagem condicional de classes Tailwind.
+* **`index.ts` & `common.ts**`: Contratos de interfaces e tipos globais do TypeScript.
+
+---
+
+## 🛠️ Comandos de Desenvolvimento
+
+```bash
+# Instalar dependências localmente
+npm install
+
+# Iniciar ambiente de desenvolvimento
+npm run dev
+
+# Gerar build de produção
+npm run build
+
+```
+
+---
+
+## 📄 Licença
+
+Este projeto é de uso restrito para o ecossistema de plataformas desenvolvidas por [Leonardo Firme](https://github.com/LeonardoFirme).
+
+---

package/bin/cli.js

@@ -0,0 +1,36 @@
+// bin/cli.js
+#!/usr/bin/env node
+
+/**
+ * @file cli.js
+ * @description Script de inicialização de estruturas Leonardo Firme.
+ * @author Leonardo Firme
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+
+function run() {
+    // Pegamos o nome do projeto ou definimos o diretório atual
+    const projectName = process.argv[2] || '.';
+    const repo = "LeonardoFirme/deploy-nextjs16";
+
+    console.log("\x1b[34m%s\x1b[0m", "--- Estruturas Leonardo Firme: Inicializando ---");
+
+    try {
+        console.log(`Clonando estrutura de ${repo}...`);
+        // Usando degit para baixar a estrutura sem o histórico do git
+        execSync(`npx degit ${repo} ${projectName}`, { stdio: 'inherit' });
+
+        console.log("\x1b[32m%s\x1b[0m", `\nSucesso! Estrutura instalada.`);
+        console.log("\nPróximos passos:");
+        if (projectName !== '.') console.log(`  cd ${projectName}`);
+        console.log(`  npm install`);
+        console.log(`  npm run dev`);
+    } catch (error) {
+        console.error("Erro ao clonar estrutura. Verifique se o diretório está vazio.");
+        process.exit(1);
+    }
+}
+
+run();

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@leonardofirme/deploy-nextjs16",
+  "version": "1.1.4",
+  "private": false,
+  "description": "Estruturas profissionais de ERP e SaaS - Leonardo Firme",
+  "bin": {
+    "lf-init": "bin/cli.js"
+  },
+  "main": "src/app/page.tsx",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@leonardofirme/package-npm": "^1.1.3",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.4.7",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/app/globals.css

@@ -0,0 +1,79 @@
+/* src/app/globals.css */
+/**
+ * Estilização Global - Ecossistema Leonardo Firme
+ * Configuração de fontes (Instrument Sans & Orbitron), escala de cores v0 (Laravel Base)
+ * e scrollbar customizada profissional para NextJS 16+ e Tailwind v4.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* definindo instrument sans como a fonte principal do projeto */
+  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-orbitron: "Orbitron", sans-serif;
+
+  /* escala v0 digital corrigida - baseada na cor oficial #ff2d20 */
+  --color-v0-50: #fff1f0;
+  --color-v0-100: #ffdfe1;
+  --color-v0-200: #ffc2bd;
+  --color-v0-300: #ff9187;
+  --color-v0-400: #ff5445;
+  --color-v0-500: #f83525;
+  --color-v0-600: #ff2d20; /* cor base oficial laravel */
+  --color-v0-700: #d61f14;
+  --color-v0-800: #b11d15;
+  --color-v0-900: #931d18;
+  --color-v0-950: #500a08;
+}
+
+@layer base {
+  body {
+    @apply bg-white text-gray-400 antialiased font-sans transition-colors duration-300 dark:bg-gray-950 dark:text-gray-300;
+  }
+
+  /* ajuste fino para headlines utilizando a mesma fonte */
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-sans font-bold tracking-tighter;
+  }
+
+  a {
+    @apply font-sans;
+  }
+
+  /* --- scrollbar customizada profissional --- */
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-v0-300 rounded-full border-2 border-solid border-white transition-colors;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-v0-600;
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    @apply bg-gray-800 border-gray-950;
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    @apply bg-v0-600;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #ff2d20 transparent;
+  }
+
+  .dark * {
+    scrollbar-color: #ff2d20 transparent;
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,39 @@
+// src/app/layout.tsx
+/**
+ * @file layout.tsx
+ * @description Root Layout Enterprise.
+ * @author Leonardo Firme
+ */
+import type { Metadata, Viewport } from "next";
+import { NodeResolver } from "@/core/providers/node-resolver";
+import { LEGAL } from "@/core/legal";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: { default: "Enterprise Scaffold", template: `%s | ${LEGAL.owner}` },
+  description: LEGAL.notice,
+  other: { "creator": "Leonardo Firme" }
+};
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  width: "device-width",
+  initialScale: 1,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="pt-br" className="scroll-smooth dark" suppressHydrationWarning>
+      <body className="antialiased selection:bg-gray-800 selection:text-white dark:selection:bg-gray-50 dark:selection:text-gray-950" suppressHydrationWarning>
+        <NodeResolver>
+          {children}
+        </NodeResolver>
+
+        {/* Assinatura Técnica Oculta */}
+        <div style={{ display: 'none' }} aria-hidden="true">
+          System Auth: Leonardo Firme - ID: 2026-ENT
+        </div>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,96 @@
+// src/app/page.tsx
+/**
+ * @file page.tsx
+ * @description Landing Page principal com animações e o novo efeito StarfieldBackground.
+ * @author Leonardo Firme
+ */
+"use client";
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { DefaultLayout } from '@/layouts/default-layout';
+import { Button, Badge } from '@/components/ui/Index';
+import { ITEM_VARIANTS, CONTAINER_VARIANTS } from '@/core/animations';
+import { StarfieldBackground } from '@/components/ui/StarfieldBackground';
+
+export default function HomePage() {
+  return (
+    <DefaultLayout>
+      <StarfieldBackground>
+        <main className="max-w-7xl mx-auto relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-transparent p-6 transition-colors duration-300">
+
+          <motion.div
+            variants={CONTAINER_VARIANTS}
+            initial="hidden"
+            animate="visible"
+            className="z-10 flex w-full max-w-4xl flex-col items-center text-center space-y-12"
+          >
+            {/* Badge de Versão */}
+            <motion.div variants={ITEM_VARIANTS}>
+              <Badge className="bg-v0-50 px-5 py-1.5 font-orbitron tracking-[0.2em] text-v0-600 border-v0-200 dark:bg-v0-950/30 dark:border-v0-900">
+                ESTRUTURA V1.1.3 VALIDADA
+              </Badge>
+            </motion.div>
+
+            {/* Headline Principal */}
+            <motion.div variants={ITEM_VARIANTS} className="space-y-6">
+              <h1 className="font-orbitron text-6xl font-bold uppercase leading-[0.9] tracking-tight text-gray-800 md:text-8xl dark:text-gray-50">
+                FALA <span className="text-v0-600">DEV!</span>
+              </h1>
+              <p className="mx-auto max-w-2xl font-sans text-lg leading-relaxed text-gray-500 md:text-xl dark:text-gray-100">
+                Sua infraestrutura está pronta para escala. Desenvolva com a precisão e a suavidade do
+                <span className="font-bold text-gray-800 dark:text-gray-50"> Ecossistema Leonardo Firme</span>.
+              </p>
+            </motion.div>
+
+            {/* Botão com as cores exatas do seu padrão */}
+            <motion.div variants={ITEM_VARIANTS} className="flex flex-col items-center gap-6 pt-6">
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.98 }}
+                transition={{ type: "spring", stiffness: 400, damping: 10 }}
+              >
+                <Button
+                  className="rounded-full px-14 py-5 font-orbitron text-xs uppercase tracking-[0.3em] shadow-2xl transition-all bg-gray-800 text-white hover:bg-gray-950 dark:bg-gray-50 dark:text-v0-500 dark:hover:bg-gray-200"
+                >
+                  Começar Desenvolvimento
+                </Button>
+              </motion.div>
+
+              <motion.span
+                animate={{ opacity: [0.3, 0.7, 0.3] }}
+                transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+                className="font-orbitron text-[10px] uppercase tracking-[0.5em] text-gray-400"
+              >
+                System Online
+              </motion.span>
+            </motion.div>
+
+            {/* Footer Signature */}
+            <motion.div
+              variants={ITEM_VARIANTS}
+              className="flex items-center space-x-8 pt-20"
+            >
+              <div className="h-px w-16 bg-gray-200 dark:bg-gray-800" />
+              <div className="flex flex-col space-y-1">
+                <span className="font-orbitron text-[10px] uppercase tracking-[0.6em] text-gray-400">
+                  Leonardo Firme
+                </span>
+                <span className="text-center font-sans text-[9px] font-bold uppercase tracking-[0.2em] text-v0-600 opacity-80">
+                  FRAMEWORK V1 • 2026
+                </span>
+              </div>
+              <div className="h-px w-16 bg-gray-200 dark:bg-gray-800" />
+            </motion.div>
+          </motion.div>
+
+          {/* Efeito Visual de Background */}
+          <div className="pointer-events-none absolute inset-0 z-0">
+            <div className="absolute top-1/2 left-1/2 h-200 w-200 -translate-x-1/2 -translate-y-1/2 rounded-full bg-v0-600/5 blur-[120px] dark:bg-v0-600/10" />
+          </div>
+
+        </main>
+      </StarfieldBackground>
+    </DefaultLayout>
+  );
+}

package/src/components/ui/Alert.tsx

@@ -0,0 +1,35 @@
+// src/components/ui/Alert.tsx
+/**
+ * @file Alert.tsx
+ * @description Componente de feedback visual para mensagens de status.
+ * Segue o padrão minimalista com suporte a variantes de informação e perigo.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+interface AlertProps {
+    title?: string;
+    children: React.ReactNode;
+    variant?: 'info' | 'danger';
+    className?: string;
+}
+
+export const Alert = ({ title, children, variant = 'info', className }: AlertProps): React.JSX.Element => {
+    const variants = {
+        info: "border-gray-200 bg-white text-gray-400 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200",
+        danger: "border-red-200 bg-red-50 text-red-900 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-200"
+    };
+
+    return (
+        <div className={cn("relative w-full rounded-xl border p-4 font-sans", variants[variant], className)}>
+            {title && (
+                <h5 className="mb-1 font-bold leading-none tracking-tight text-gray-800 dark:text-gray-50 font-sans">
+                    {title}
+                </h5>
+            )}
+            <div className="text-sm opacity-90 leading-relaxed">
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/ui/Badge.tsx

@@ -0,0 +1,25 @@
+// src/components/ui/Badge.tsx
+/**
+ * @file Badge.tsx
+ * @description Indicador visual compacto para status, tags ou versões.
+ * Utiliza o padrão minimalista de bordas e tipografia do ecossistema.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+interface BadgeProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const Badge = ({ children, className }: BadgeProps): React.JSX.Element => {
+    return (
+        <span className={cn(
+            "inline-flex items-center rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-xs font-bold text-gray-800 transition-colors",
+            "dark:border-gray-800 dark:bg-gray-900 dark:text-gray-50 font-sans",
+            className
+        )}>
+            {children}
+        </span>
+    );
+};

package/src/components/ui/Breadcrumb.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+}
+
+export const Breadcrumb = ({ items }: { items: BreadcrumbItem[] }): React.JSX.Element => {
+    return (
+        <nav className="flex" aria-label="Breadcrumb">
+            <ol className="inline-flex items-center space-x-1 md:space-x-3">
+                {items.map((item, index) => (
+                    <li key={index} className="inline-flex items-center">
+                        {index > 0 && <span className="mx-2 text-gray-400">/</span>}
+                        <span className={`text-sm font-medium ${item.active ? 'text-gray-800 dark:text-gray-50' : 'text-gray-400 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-50'}`}>
+                            {item.label}
+                        </span>
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    );
+};

package/src/components/ui/Button.tsx

@@ -0,0 +1,33 @@
+// src/components/ui/Button.tsx
+/**
+ * @file Button.tsx
+ * @description Componente de botão atômico com suporte a variantes e children.
+ * Ajustado para aceitar conteúdo interno e manter o padrão de cores v0.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'outline' | 'ghost';
+    children: React.ReactNode;
+}
+
+export const Button = ({ children, variant = 'primary', className, ...props }: ButtonProps): React.JSX.Element => {
+    // Base minimalista seguindo as diretrizes de cores e bordas
+    const base = "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 border cursor-pointer active:scale-95";
+
+    const variants = {
+        primary: "bg-gray-800 text-gray-50 border-gray-200 hover:bg-gray-950 dark:bg-gray-50 dark:text-gray-950 dark:border-gray-800 dark:hover:bg-gray-200",
+        outline: "bg-transparent text-gray-800 border-gray-200 hover:bg-gray-100 dark:text-gray-50 dark:border-gray-800 dark:hover:bg-gray-900",
+        ghost: "bg-transparent text-gray-500 border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-900"
+    };
+
+    return (
+        <button
+            {...props}
+            className={cn(base, variants[variant], className)}
+        >
+            {children}
+        </button>
+    );
+};

package/src/components/ui/Card.tsx

@@ -0,0 +1,43 @@
+// src/components/ui/Card.tsx
+/**
+ * @file Card.tsx
+ * @description Container estrutural para agrupamento de informações.
+ * Implementa o padrão de sombras sutis e bordas do ecossistema v0 Digital.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+interface CardProps {
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const Card = ({ title, subtitle, children, className }: CardProps): React.JSX.Element => {
+    return (
+        <div className={cn(
+            "rounded-xl border border-gray-200 bg-white p-6 shadow-xs",
+            "dark:border-gray-800 dark:bg-gray-950",
+            className
+        )}>
+            {(title || subtitle) && (
+                <div className="mb-4 space-y-1">
+                    {title && (
+                        <h3 className="text-xl font-bold tracking-tight text-gray-800 dark:text-gray-50 font-sans">
+                            {title}
+                        </h3>
+                    )}
+                    {subtitle && (
+                        <p className="text-sm text-gray-500 dark:text-gray-100 font-sans">
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+            )}
+            <div className="text-gray-400 dark:text-gray-200 font-sans leading-relaxed">
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,34 @@
+// src/components/ui/Checkbox.tsx
+/**
+ * @file Checkbox.tsx
+ * @description Seletor binário customizado.
+ * Mantém a precisão visual em formulários ERP com suporte nativo ao modo dark.
+ */
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}
+
+export const Checkbox = ({ label, className, ...props }: CheckboxProps): React.JSX.Element => {
+    return (
+        <label className="inline-flex cursor-pointer items-center gap-2 group">
+            <input
+                type="checkbox"
+                {...props}
+                className={cn(
+                    "h-4 w-4 rounded border border-gray-200 bg-white text-gray-800 transition-all",
+                    "focus:ring-0 focus:ring-offset-0 cursor-pointer",
+                    "dark:border-gray-800 dark:bg-gray-950 dark:checked:bg-gray-50",
+                    className
+                )}
+            />
+            {label && (
+                <span className="text-sm font-medium text-gray-500 dark:text-gray-100 font-sans group-hover:text-gray-800 dark:group-hover:text-gray-50 transition-colors">
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+};