@majapisoftwares/ui 4.3.17 → 5.0.0

package/AGENTS.md

@@ -0,0 +1,17 @@
+# Padrão obrigatório do Workbench
+
+- Novos apps web devem partir de starters/next-app, criado por npm run create:app -- <diretorio-novo>. O starter usa a versão estável do Next.js fixada e validada no manifesto; atualizações devem manter lockfile, CI e revisão de compatibilidade.
+
+- A base de primitivas é shadcn sobre Base UI (base-nova), não Radix. Use render para composição e nativeButton=false quando Button renderizar Link/a. Preserve as fronteiras use client da biblioteca em consumidores Next.js.
+
+- Esta biblioteca pública é a base obrigatória de todos os apps atuais e futuros do Workbench, incluindo administrativos, dashboards, login e cadastro. Leia README.md e docs/STANDARDS.md antes de alterar interfaces.
+- Antes de criar UI em um app, procure o componente, variante ou padrão existente aqui. Reutilize-o diretamente como dependência.
+- Se faltar uma capacidade reutilizável, contribua primeiro para esta biblioteca: adicione uma API genérica, documente o comportamento e mostre o uso no catálogo. Depois atualize o app para o commit publicado.
+- Não copie componentes shadcn para apps, não faça forks locais e não use CSS, classes ou wrappers locais para corrigir cores, tipografia, tamanho, estados ou comportamento de um componente compartilhado.
+- Adaptações específicas de domínio e composição de layout ficam no app; capacidades compartilhadas, tokens e variantes ficam aqui. Não traga AWS, autenticação, secrets ou modelos de negócio para a biblioteca.
+- Use o CLI oficial shadcn para adicionar componentes. Preserve a licença upstream e registre adaptações em docs/STANDARDS.md. Imports internos da biblioteca devem ser relativos, sem aliases particulares do consumidor.
+- className nos apps é para layout. Mudanças visuais precisam de tokens, variantes ou padrões oficiais. Evite controles HTML crus quando houver um componente da biblioteca.
+- Todos os fluxos devem incluir estados carregando, vazio, erro, parcial e indisponível quando aplicáveis. Não esconda falhas ou altere dados para o exemplo parecer funcionar.
+- Preserve acessibilidade: nome acessível, foco visível, navegação por teclado, título e descrição de overlays, labels em campos, e texto junto aos estados.
+- Antes de publicar: npm run typecheck, npm run lint, npm run check:standards, npm run build, git diff --check e revisão visual em desktop/mobile. Teste comportamentos novos de risco, sem testes que apenas espelhem markup.
+- Publique código e evidências no GitHub e vincule os commits ao PLAN.md central. Registre breaking changes e migração antes de atualizar consumidores.

package/README.md

@@ -0,0 +1,71 @@
+# Majapi UI
+
+Biblioteca pública `@majapisoftwares/ui`, base obrigatória de código, interface e experiência de **todos os apps atuais e futuros do Workbench**, baseada em shadcn/ui (**Base UI / base-nova**), React e Tailwind CSS v4. Repositório: https://github.com/majapisoftwares/workbench-ui.
+
+## Regra central
+
+**Contribuir para a biblioteca antes de customizar o app.** Quando um produto precisa de uma variante ou comportamento reutilizável, a mudança deve ser implementada aqui com documentação e exemplo. O produto passa a consumir a versão publicada. Não mantenha cópias, forks ou overrides visuais locais dos componentes.
+
+Composição de páginas, lógica de domínio, dados e permissões pertencem ao app. Primitivos, variantes, tokens e comportamentos reutilizáveis pertencem à biblioteca. Consulte [AGENTS.md](AGENTS.md) e [docs/STANDARDS.md](docs/STANDARDS.md).
+
+## Criar um app Next.js
+
+O starter completo fica em [starters/next-app](starters/next-app), com **Next.js 16.4.3** (latest estável verificado na criação), React, App Router, TypeScript, Tailwind e esta biblioteca já configurados. A dependência da UI é uma versão npm fixa; não depende de caminhos para este checkout.
+
+Dentro deste repositório:
+
+```sh
+npm run create:app -- ../meu-app
+cd ../meu-app
+npm ci
+npm run dev
+```
+
+O comando não sobrescreve diretórios existentes. Copia dashboard, login, cadastro, carregamento/erro/404, regras de agentes, lockfile e CI, sem node_modules, builds ou secrets. Customize por componentes, props e slots. As telas de autenticação são demonstrativas e devem ser conectadas à autenticação real do produto.
+
+## Catálogo visual
+
+```powershell
+npm ci
+npm run dev
+```
+
+Abra http://127.0.0.1:4318. O catálogo permite revisar componentes, temas claro/escuro, tabela com busca/ordenação/paginação/filtro, detalhes e estados de vazio/erro/carregamento. Usa dados demonstrativos explícitos, sem AWS ou credenciais.
+
+## Consumir
+
+Pacote público **@majapisoftwares/ui@5.0.0**, publicado na organização npm existente. Instale com `npm install --save-exact @majapisoftwares/ui@5.0.0` e versione o lockfile. O pacote exporta fontes TSX para bundlers React/TypeScript (Vite ou Next.js), não para execução direta em Node sem transformação. O starter e o gerador permanecem neste repositório Git, separados do pacote npm da biblioteca.
+
+O catálogo público está em **https://ui.majapi.com**. A versão 5 substitui a base 4.x com uma mudança incompatível de API e a base antes chamada @workbench/ui. Apps existentes em ^4 permanecem nessa linha até migração explícita.
+
+```tsx
+import { Button } from "@majapisoftwares/ui/components/button";
+import { DataTable } from "@majapisoftwares/ui/patterns/data-table";
+import { AdminDashboard } from "@majapisoftwares/ui/templates/admin-dashboard";
+import { AuthLayout } from "@majapisoftwares/ui/templates/auth-layout";
+import { LoginForm } from "@majapisoftwares/ui/templates/login-form";
+import { SignupForm } from "@majapisoftwares/ui/templates/signup-form";
+import "@majapisoftwares/ui/styles.css";
+```
+
+O CSS inclui os tokens, fontes locais e o Tailwind, com `@source` da biblioteca. O app precisa processar esse CSS com Tailwind v4. Faça dedupe de react/react-dom no Vite se estiver desenvolvendo com um checkout local. Dependências de catálogo, como Vite, não entram no código executado pelo consumidor.
+
+## Contribuir e validar
+
+Templates iniciais: **AdminDashboard**, **AuthLayout**, **LoginForm** e **SignupForm**. Configure marca, navegação, textos, dados, ações e conteúdo por props/slots React. Variações de tema são definidas e documentadas na biblioteca. Formulários recebem callbacks tipados; autenticação real, validação no servidor, sessões e autorização pertencem ao app. O catálogo demonstra os templates sem enviar ou persistir senhas.
+
+1. Leia o padrão e procure o primitivo/padrão existente.
+2. Adicione uma API reutilizável ou variante oficial, com defaults compatíveis.
+3. Documente motivos, estados e migração; adicione exemplo no catálogo.
+4. Valide tipos, lint, padrões, build, teclado e visual desktop/mobile.
+5. Publique o commit e atualize o consumidor para esse commit; registre no plano.
+
+```powershell
+npm run typecheck
+npm run lint
+npm run check:standards
+npm run build
+git diff --check
+```
+
+Os componentes foram instalados pelo CLI shadcn 4.22.1, preset base-nova e Base UI 1.9.0. A versão 0.2 migra a base anterior Radix; veja [docs/MIGRATION-0.2.md](docs/MIGRATION-0.2.md). Atribuição upstream: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). O Cloud Manager é o primeiro consumidor real.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,15 @@
+# Third-party notices
+
+The primitives in src/components/ui were generated with shadcn/ui 4.22.1, base-nova preset (Base UI), from https://github.com/shadcn-ui/ui and https://ui.shadcn.com. They are distributed under the MIT License:
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Other dependencies retain their own licenses in their package metadata. This notice does not change ownership or licensing of Workbench-authored code.

package/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/docs/MIGRATION-0.2.md

@@ -0,0 +1,20 @@
+# Migração 0.1 → 0.2: shadcn sobre Base UI
+
+A base inicial era radix-nova. A versão 0.2 usa base-nova e @base-ui/react 1.9.0, regenerados pelo CLI oficial shadcn em diretório limpo e adaptados para preservar os contratos do Workbench. Tokens, estilos compartilhados, variantes navigation/success/warning e nomes dos padrões permanecem.
+
+## Mudanças de API
+
+- Primitivas com composição usam render, não asChild. Exemplo: `<Button render={<Link href="/dashboard" />} nativeButton={false}>Dashboard</Button>`.
+- Sheet usa Dialog de Base UI, com Backdrop/Popup e composição render. Os padrões DetailsSheet e DetailList mantêm suas props.
+- Badge usa useRender/mergeProps de Base UI. Button usa ButtonPrimitive.Props. Considere essas mudanças incompatíveis para consumidores diretos das primitivas antigas.
+- Componentes e padrões interativos têm use client explícito. Dados vindos do servidor devem ser serializáveis; callbacks de UI e definição de colunas com funções ficam em Client Components.
+- Não importe radix-ui ou @radix-ui diretamente nos consumidores. O verificador de padrões detecta esses imports.
+
+## Atualizar um produto
+
+1. Atualize a dependência @majapisoftwares/ui para o commit publicado da versão 0.2 e regenere o lockfile.
+2. Substitua asChild por render e nativeButton=false em links/triggers não nativos.
+3. Preserve imports dos padrões compostos, evitando reimplementar o comportamento no produto.
+4. Execute typecheck, lint/padrões, build e verificações de navegação, foco, overlays, campos e telas menores.
+
+O starter Next.js é o caminho padrão para novos apps. Autenticação real e permissões continuam sendo responsabilidade do produto, sem fallback ou simulação de login.

package/docs/NEXT-STARTER-VALIDATION.md

@@ -0,0 +1,14 @@
+# Validação do starter Next.js e Base UI
+
+- Next.js e create-next-app 16.4.3 conferidos no registry npm e na documentação oficial; React 19.3.1; UI 0.2 com shadcn base-nova e @base-ui/react 1.9.0.
+- Biblioteca regenerada pelo CLI oficial shadcn em diretório limpo, preservando tokens e variantes compartilhadas. Imports diretos de Radix removidos; fronteiras use client explícitas nas primitivas e padrões interativos.
+- Biblioteca: typecheck, ESLint, verificação de padrões e build Vite aprovados.
+- Starter: lint, typegen/TypeScript, check:ui e build Next.js de produção aprovados para /dashboard, /login e /signup.
+- Um projeto independente foi criado pelo comando create:app e validado com npm ci, lint, tipos, padrões e build. O projeto não depende de um checkout local da biblioteca.
+- Teste do gerador confirma nome/lockfile coerentes, rotas, regras de agentes, workflow, ausência de node_modules e recusa de sobrescrita de diretório existente.
+- npm pack --dry-run foi inspecionado: starter incluído, sem node_modules, .next, tsbuildinfo ou arquivos de ambiente no pacote.
+- Navegador com build de produção: dashboard, navegação para login/cadastro, painel de detalhes Base UI, devolução de foco ao fechar, console sem erros/warnings e revisão de cadastro em viewport mobile de 500px.
+- As telas usam dados demonstrativos explícitos. Nenhuma credencial foi enviada nem conta criada; autenticação real e proteção das rotas são integração do produto consumidor.
+- Cloud Manager atualizado para a mesma UI Base UI: build, types, padrões e 20 testes passaram.
+
+A CI pública valida tanto a biblioteca quanto o starter Next.js. O processo de produção local do starter foi aberto em http://127.0.0.1:4319 para revisão. Não houve deploy público nem provisionamento de infraestrutura.

package/docs/STANDARDS.md

@@ -0,0 +1,36 @@
+# Padrão v1 de código e UI/UX
+
+Base atual: shadcn base-nova com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
+
+## Arquitetura e código
+
+TypeScript em modo strict, React com componentes funcionais e composição. APIs genéricas tipadas; sem any para contornar contratos, estado derivado duplicado ou dependências de domínio na UI. Imports públicos por subpath, internos relativos. Dependências e lockfile versionados. Interface, acesso a dados, autorização e operações de infraestrutura permanecem separados. Entradas externas são validadas no servidor; erros e resultados incompletos são explícitos.
+
+## Base visual
+
+`src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Paleta neutra com ação primária terracota; body Geist, títulos Georgia; foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
+
+Os 13 primitivos shadcn são Button, Badge, Input, Table, Sheet, Alert, Empty, NativeSelect, Separator, Skeleton, Tabs, Field e Label. Os sete padrões compostos são AppShell, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet e DetailList. Os quatro templates React são AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
+
+## Comportamentos de UX
+
+- Ação primária destaca o objetivo; secundária usa outline/secondary; destrutiva usa variante própria e depende das autorizações do app.
+- Busca, filtros, ordenação por coluna e paginação seguem DataTable. Filtros de domínio são slots tipados do app. Não reconstruir tabelas por tela. Persistência não é habilitada por padrão para evitar guardar buscas sensíveis; quando necessária, deve evoluir como capacidade compartilhada com controle explícito.
+- Estados com texto e cor: sucesso, aviso, erro e desconhecido. Nunca traduzir ausência de informação em zero ou sucesso.
+- Carregamento usa Skeleton, vazio usa Empty, falhas usam Alert e detalhes usam DetailsSheet com título, descrição, foco preso ao overlay, Escape e devolução do foco ao fechar.
+- Em telas pequenas, controles têm texto de pelo menos 16px e alvo de 44px, navegação se reorganiza e tabelas têm rolagem interna, sem rolagem horizontal da página.
+- Preferência por movimento reduzido é respeitada. A ordem de leitura deve acompanhar a ordem visual. Ícones sozinhos exigem nome acessível.
+- Distinguir dados demonstrativos de dados reais; mostrar observação e cobertura em telas de infraestrutura. Comunicação e labels em português no v1.
+
+## Evolução sem customizações isoladas
+
+Uma necessidade reutilizável entra na biblioteca por prop, variante, token ou novo padrão documentado. Não adicionar props específicas como awsAccountId a componentes genéricos. Novas variantes preservam defaults; mudanças incompatíveis exigem versão/migração explícitas e atualização coordenada dos consumidores. A versão semântica identifica a API, e o commit Git fixo identifica o código efetivamente consumido.
+
+AGENTS.md nos apps exige contribuição upstream antes de uso. O verificador estático bloqueia primitivas locais e cores avulsas em consumidores; não substitui revisão humana de design, acessibilidade e comportamento. O catálogo e o primeiro consumidor devem ser revisados em navegador.
+
+## Adaptações do upstream
+
+- Sheet usa import interno relativo para funcionar como pacote e traduz o nome acessível do fechamento para português.
+- Field usa imports relativos. Button assume type=button para evitar submissões acidentais; formulários declaram type=submit. Badge inclui variantes success e warning reutilizadas por StatusBadge.
+- Tokens de identidade, estados semânticos e padrões compostos são mantidos aqui.
+- Mudanças posteriores no upstream devem ser avaliadas com o diff do CLI, preservando estas decisões e o contrato público.

package/docs/VALIDATION.md

@@ -0,0 +1,11 @@
+# Validação da base v1
+
+- TypeScript strict, ESLint sem warnings, verificador de padrões, Prettier e build Vite aprovados.
+- CI pública executa npm ci, typecheck, lint, check:standards e build, sem secrets ou acesso à AWS.
+- Catálogo renderizado em navegador real em desktop e mobile (viewport de 500px), incluindo template administrativo, login e cadastro.
+- Cadastro demonstrativo: confirmação divergente de senha foi bloqueada, campo marcado aria-invalid e erro anunciado por role=alert. Nenhuma informação foi enviada ou persistida.
+- DataTable demonstrativa possui busca, filtro por região, ordenação e paginação; DetailsSheet usa Radix com título e descrição. Estados de vazio, erro e carregamento estão expostos no catálogo.
+- O primeiro consumidor real é o Cloud Manager, que importa a biblioteca por commit público fixo e continua exibindo o inventário real AWS. Detalhes de infraestrutura e credenciais permanecem no repo privado do produto.
+- Ajustes de navegação e toolbar mobile foram feitos nos componentes compartilhados e publicados antes de atualizar o consumidor, exercitando a regra de contribuição upstream.
+
+Esta revisão é uma validação inicial de implementação, não uma certificação de acessibilidade nem prova de integração de autenticação. Backend de login/cadastro pertence a cada produto e deve ser validado pelo consumidor.

package/package.json

@@ -1,8 +1,75 @@
 {
   "name": "@majapisoftwares/ui",
+  "version": "5.0.0",
+  "description": "Shared Workbench UI and UX standards based on shadcn/ui",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/majapisoftwares/ui.git"
+    "url": "git+https://github.com/majapisoftwares/workbench-ui.git"
+  },
+  "homepage": "https://ui.majapi.com",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "scripts/check-standards.mjs",
+    "src",
+    "components.json",
+    "docs",
+    "AGENTS.md",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "exports": {
+    "./components/*": "./src/components/ui/*.tsx",
+    "./patterns/*": "./src/patterns/*.tsx",
+    "./templates/*": "./src/templates/*.tsx",
+    "./styles.css": "./src/styles.css",
+    "./lib/utils": "./src/lib/utils.ts"
+  },
+  "scripts": {
+    "create:app": "node scripts/create-app.mjs",
+    "test:starter": "node --test scripts/create-app.test.mjs",
+    "dev": "vite --host 127.0.0.1 --port 4318 --strictPort",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --max-warnings=0",
+    "format:check": "prettier --check src examples scripts *.json *.ts *.md docs/*.md",
+    "check:standards": "node scripts/check-standards.mjs"
+  },
+  "peerDependencies": {
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cn": "^0.5.0",
+    "lucide-react": "1.61.0",
+    "shadcn": "^4.22.1",
+    "tailwind-merge": "3.7.0",
+    "tw-animate-css": "^1.4.0"
   },
-  "version": "4.3.17"
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "eslint": "10.13.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "prettier": "3.9.10",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.0",
+    "vite": "8.3.5"
+  }
 }

package/scripts/check-standards.mjs

@@ -0,0 +1,39 @@
+import { readdir, readFile } from "node:fs/promises";
+import { resolve, relative } from "node:path";
+const consumer = process.argv[2];
+const root = resolve(consumer ?? "src");
+const violations = [];
+async function visit(path) {
+  for (const entry of await readdir(path, { withFileTypes: true })) {
+    if (["node_modules", "dist", ".git"].includes(entry.name)) continue;
+    const file = resolve(path, entry.name);
+    if (entry.isDirectory()) {
+      await visit(file);
+      continue;
+    }
+    if (!/\.[jt]sx?$/.test(entry.name)) continue;
+    const text = await readFile(file, "utf8"),
+      name = relative(root, file).replaceAll("\\", "/");
+    if (/from\s+["'](?:radix-ui|@radix-ui\/)/.test(text))
+      violations.push(`${name}: the Workbench foundation uses Base UI`);
+    if (!consumer && name.startsWith("components/ui/")) continue;
+    if (consumer && /(?:^|\/)components\/ui\//.test(name))
+      violations.push(`${name}: local UI primitive copies are forbidden`);
+    if (/<(?:button|input|select|table|dialog)(?:\s|>)/.test(text))
+      violations.push(`${name}: use the shared UI primitive`);
+    if (
+      /(?:bg|text|border)-(?:red|blue|green|orange|gray|slate|zinc)-\d|(?:bg|text|border)-\[#[a-f\d]/i.test(
+        text,
+      )
+    )
+      violations.push(`${name}: use semantic tokens instead of local colors`);
+    if (!consumer && /from ["']@\//.test(text))
+      violations.push(`${name}: library internals must use portable imports`);
+  }
+}
+await visit(root);
+if (violations.length) {
+  console.error(violations.join("\n"));
+  process.exitCode = 1;
+} else
+  console.log(`UI standards passed (${consumer ? "consumer" : "library"}).`);

package/src/components/ui/alert.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/badge.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        navigation:
+          "bg-transparent text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  type = "button",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      type={type}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/components/ui/empty.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "font-heading text-sm font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};