lumen-ui-kit

Componentes React extremamente profissionais, refinados, modernos e minimalistas — pensados para serem usados tanto por desenvolvedores quanto por IAs (Copilot, Cursor, v0, ChatGPT, Claude…).

• ⚡ Zero dependências — só precisa de React. O CSS é embutido e injetado automaticamente.
• 🌗 Dark mode pronto com uma linha: setTheme("dark").
• 🎨 Design tokens em CSS variables — personalize tudo sobrescrevendo --lm-*.
• ♿ Acessível — foco visível, ARIA, Esc fecha modal, roles corretos.
• 🤖 AI-friendly — inclui AI_GUIDE.md, um guia pronto para colar no contexto da sua IA.
• 📦 TypeScript — tipos completos e JSDoc em todos os componentes.

Instalação

npm install @pedrobef/lumen-ui-kit

Uso

import { Button, Card, CardHeader, CardTitle, CardContent } from "@pedrobef/lumen-ui-kit";

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Bem-vindo</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="accent" size="lg">Começar</Button>
      </CardContent>
    </Card>
  );
}

Não precisa importar CSS. Os estilos são injetados automaticamente na primeira renderização.

Componentes (25+)

| Categoria | Componentes | |---|---| | Botões | Button (8 variantes × 4 tamanhos, loading, ícones, pill, fullWidth), IconButton, ButtonGroup, CloseButton†, ToggleButton†, ToggleButtonGroup† | | Layout | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Divider, AspectRatio‡, ScrollArea‡, Resizable‡, Collapsible‡ | | Formulário | Field, Label, Input, InputGroup, Textarea, Select, Checkbox, Radio, RadioGroup‡, Switch, Slider†, NumberField†, InputOTP‡, Autocomplete†, DatePicker†, Calendar† | | Feedback | Alert, Badge, Spinner, Progress, ProgressCircle†, Skeleton, ToastProvider + useToast | | Overlay | Modal, AlertDialog‡, Drawer†, Popover†, HoverCard‡, Tooltip, Dropdown, ContextMenu‡, Command‡ (⌘K) | | Navegação | Tabs, Accordion, Breadcrumb, Pagination, Steps, NavigationMenu‡, Menubar‡, Sidebar‡ (+ partes) | | Dados | Table, Timeline, Chip, Avatar, AvatarGroup, User†, Stat, EmptyState, Snippet†, Kbd, Carousel‡, Sparkline‡, MiniBarChart‡ | | Ícones | 72 ícones Lucide (IconSearch, IconPlus, IconBell…) via Iconify |

† Portados da HeroUI (Apache-2.0) · ‡ Portados do shadcn/ui (MIT) — veja a seção de créditos.

Cobertura shadcn/ui: todos os componentes do catálogo têm equivalente — os que já existiam mapeiam assim: Dialog→Modal, Sheet→Drawer, Sonner/Toast→ToastProvider, Combobox→Autocomplete, Data Table→Table, Separator→Divider, Toggle→ToggleButton, Toggle Group→ToggleButtonGroup, Form→Field, Chart→Sparkline/MiniBarChart.

Botões

<Button>Primary</Button>
<Button variant="accent">Accent</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>
<Button variant="destructive">Excluir</Button>
<Button variant="link">Link</Button>

<Button size="xs">XS</Button>
<Button size="lg" pill fullWidth loading>Enviando…</Button>
<Button leftIcon={<PlusIcon />}>Novo item</Button>
<IconButton aria-label="Configurações" variant="outline">⚙</IconButton>

Dark mode

import { setTheme, toggleTheme } from "@pedrobef/lumen-ui-kit";

setTheme("dark");   // ativa
toggleTheme();      // alterna

Personalização (design tokens)

Pela dependência (recomendado) — sem escrever CSS:

import { configureTheme, themePresets, resetTheme } from "@pedrobef/lumen-ui-kit";

configureTheme({ accent: "#0ea5e9", radius: 8 });   // cor da marca + raio
configureTheme(themePresets.rose);                  // ou um preset pronto
configureTheme({ font: '"Inter", sans-serif' });    // merge com o atual
resetTheme();                                       // volta ao padrão

O accent recalcula automaticamente hover, fundo suave e anel de foco — nos temas claro e escuro — e afeta todos os componentes (Button, Switch, DatePicker, Calendar, Slider, Command…). Presets: indigo, blue, sky, teal, green, orange, rose, violet, zinc.

Por CSS (alternativa): sobrescreva as variáveis no seu app:

:root {
  --lm-accent: #0ea5e9;        /* sua cor de marca */
  --lm-radius: 8px;            /* cantos */
  --lm-font: "Inter", sans-serif;
}

Para IAs 🤖

Cole o conteúdo de AI_GUIDE.md no system prompt / regras do seu assistente (.cursorrules, instruções do Copilot, etc.). Ele contém a API completa em formato compacto, para a IA gerar interfaces refinadas de primeira.

SSR

Os componentes são seguros em SSR (Next.js etc.): a injeção de CSS ocorre na hidratação. Para evitar flash de estilo, importe LUMEN_CSS e renderize num <style> no servidor:

import { LUMEN_CSS } from "@pedrobef/lumen-ui-kit";
// <style dangerouslySetInnerHTML={{ __html: LUMEN_CSS }} />

Créditos e licenças de terceiros

Este pacote é MIT e incorpora trabalho de outros projetos open source:

• HeroUI (Apache License 2.0, © HeroUI Inc., anteriormente NextUI — a HeroUI migrou de MIT para Apache 2.0 na v3.0.3) — os componentes CloseButton, ToggleButton, ToggleButtonGroup, Slider, NumberField, ProgressCircle, Popover, Drawer, Snippet, User, Calendar, DatePicker e Autocomplete foram portados/adaptados da HeroUI (design e API), com implementação modificada/reescrita em CSS puro para manter a abordagem zero-dependências, conforme declarado no aviso de modificação exigido pela Apache 2.0.
• shadcn/ui (MIT, © 2023 shadcn) — os componentes AlertDialog, AspectRatio, Carousel, Collapsible, Command, ContextMenu, HoverCard, InputOTP, Menubar, NavigationMenu, RadioGroup, ScrollArea, Sidebar, Resizable, Sparkline e MiniBarChart foram portados/adaptados do shadcn/ui (design e API), com implementação reescrita em CSS puro (sem Radix UI, Tailwind ou recharts).
• Lucide (ISC) — os 72 ícones, obtidos via Iconify.

Os textos integrais das licenças estão em THIRD_PARTY_NOTICES.md e o resumo de atribuições em NOTICE, conforme exigido pelas licenças Apache 2.0 e ISC.

Licença

MIT — veja LICENSE.