@darknblackagency/react

React wrappers tipados para o framework Dark Brutalist — preto absoluto, tipografia pesada, acento gold.

Instalação

npm install @darknblackagency/react @darknblackagency/css

@darknblackagency/css é peer dependency — importar o CSS separadamente no entry point do projeto:

// app/layout.tsx (Next.js) ou main.tsx (Vite)
import '@darknblackagency/css'

Uso rápido

import { Button, Card, Badge } from '@darknblackagency/react'

export function Example() {
  return (
    <Card variant="featured">
      <Badge variant="filled">NOVO</Badge>
      <Button variant="gold" href="/saiba-mais">SAIBA MAIS</Button>
    </Card>
  )
}

Integração com Next.js (next/link)

Componentes que renderizam links (Button, Breadcrumb, PageNav) aceitam LinkComponent para usar o roteador do framework host. Se não passado, usa <a> padrão.

import Link from 'next/link'
import { Breadcrumb, PageNav, Button } from '@darknblackagency/react'

// Button como link
<Button href="/rota" LinkComponent={Link} variant="gold">IR PARA ROTA</Button>

// Breadcrumb
<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Componentes' },  // sem href = item atual
  ]}
  LinkComponent={Link}
/>

// PageNav
<PageNav
  prev={{ label: 'Tokens', href: '/tokens' }}
  next={{ label: 'Tipografia', href: '/tipografia' }}
  LinkComponent={Link}
/>

API dos componentes

<Button>

interface ButtonProps {
  children: ReactNode
  variant?: 'default' | 'gold'     // default: 'default'
  size?: 'default' | 'small'       // default: 'default'
  href?: string                    // renderiza <a> ou LinkComponent se passado
  LinkComponent?: ElementType      // next/link, react-router Link etc. Default: <a>
  onClick?: () => void
  type?: 'button' | 'submit' | 'reset'  // default: 'button'
  disabled?: boolean
  target?: string
  rel?: string
  className?: string
  style?: CSSProperties
}

<Button>DEFAULT</Button>
<Button variant="gold">GOLD</Button>
<Button variant="gold" size="small">PEQUENO</Button>
<Button href="/rota" LinkComponent={Link} variant="gold">LINK</Button>

<Card>

interface CardProps {
  children: ReactNode
  variant?: 'default' | 'featured' | 'accent'  // default: 'default'
  noise?: boolean                               // default: true
  className?: string
  style?: CSSProperties
}

• featured — borda superior gold
• accent — borda esquerda gold
• noise — overlay de ruído sobre o fundo (ligado por padrão)

<Card>Card padrão com noise</Card>
<Card variant="featured" noise={false}>Destaque sem noise</Card>
<Card variant="accent">Accent card</Card>

<Badge>

interface BadgeProps {
  children: ReactNode
  variant?: 'outline' | 'filled' | 'muted'  // default: 'outline'
}

<Badge>OUTLINE</Badge>
<Badge variant="filled">FILLED</Badge>
<Badge variant="muted">MUTED</Badge>

<StatusChip>

A cor é passada diretamente — use tokens de var(--dnb-*) ou hex. Internamente usa CSS custom property --dnb-chip-color.

interface StatusChipProps {
  children: ReactNode
  color: string  // valor CSS: 'var(--dnb-status-success)', '#c83232', etc.
}

import { tokens } from '@darknblackagency/react'

<StatusChip color={tokens.color.statusSuccess}>ATIVO</StatusChip>
<StatusChip color={tokens.color.statusError}>BLOQUEADO</StatusChip>
<StatusChip color={tokens.color.gold}>DESTAQUE</StatusChip>

<RuleBox>

interface RuleBoxProps {
  children: ReactNode
  variant?: 'info' | 'do' | 'dont'  // default: 'info'
}

<RuleBox variant="info">Nota informativa</RuleBox>
<RuleBox variant="do">O que fazer</RuleBox>
<RuleBox variant="dont">O que não fazer</RuleBox>

<CodeBlock>

interface CodeBlockProps {
  children: string   // conteúdo do bloco (string, não ReactNode)
  label?: string     // título opcional acima do bloco
}

<CodeBlock label="exemplo.ts">
  const x = 'código aqui'
</CodeBlock>

<Breadcrumb>

Item sem href é tratado como item atual (não-clicável).

interface BreadcrumbItem {
  label: string
  href?: string
}

interface BreadcrumbProps {
  items: BreadcrumbItem[]
  LinkComponent?: ElementType  // Default: <a>
}

<Breadcrumb
  items={[
    { label: 'Design System', href: '/design-system' },
    { label: 'Componentes' },
  ]}
  LinkComponent={Link}
/>

<PageNav>

interface PageNavItem {
  label: string
  href: string
}

interface PageNavProps {
  prev?: PageNavItem
  next?: PageNavItem
  LinkComponent?: ElementType  // Default: <a>
}

<PageNav
  prev={{ label: 'Tokens', href: '/tokens' }}
  next={{ label: 'Tipografia', href: '/tipografia' }}
  LinkComponent={Link}
/>

<ColorSwatch>

Clique copia hex para a área de transferência. Internamente usa --dnb-swatch-color.

interface ColorSwatchProps {
  color: string   // valor CSS para a cor visual do quadrado
  name: string    // nome exibido
  hex: string     // hex copiado no click
  desc?: string   // descrição opcional
}

<ColorSwatch
  color="var(--dnb-gold)"
  name="Gold"
  hex="#c8a44e"
  desc="Acento principal"
/>

<SectionLabel>

<SectionLabel>02.01 — SEÇÃO</SectionLabel>

<GoldLine>

<GoldLine />             // 48px × 3px, alinhado à esquerda
<GoldLine full />        // linha horizontal full-width

<Divider>

<Divider />              // divider cinza com margin 40px
<Divider gold />         // divider gold

Tokens em TypeScript

O pacote exporta os tokens como objeto tipado para uso em lógica JS:

import { tokens } from '@darknblackagency/react'

// Cores
tokens.color.gold           // 'var(--dnb-gold)'
tokens.color.blackRich      // 'var(--dnb-black-rich)'
tokens.color.statusSuccess  // 'var(--dnb-status-success)'

// Fontes
tokens.font.display         // 'var(--dnb-font-display)'
tokens.font.body            // 'var(--dnb-font-body)'
tokens.font.mono            // 'var(--dnb-font-mono)'

// Escala tipográfica
tokens.text.hero            // 'var(--dnb-text-hero)'
tokens.text.displayLg       // 'var(--dnb-text-display-lg)'

// Espaçamento
tokens.space.md             // 'var(--dnb-space-md)'
tokens.space.xl             // 'var(--dnb-space-xl)'

Regras para IA — ao gerar código React com este pacote

1. Sempre importar @darknblackagency/css antes dos componentes — os wrappers não têm CSS embutido.
2. LinkComponent={Link} para links em Next.js/React Router — nunca usar next/link diretamente no componente; passar como prop.
3. StatusChip recebe color como string CSS — usar tokens.color.* ou var(--dnb-*), nunca hex hardcoded.
4. Card tem noise={true} por padrão — passar noise={false} quando não desejado.
5. CodeBlock.children é string, não ReactNode — não passar JSX como filho.
6. Sem CSS inline hardcoded — usar tokens.* ou var(--dnb-*) em style={}.
7. Sem border-radius > 0 — o sistema é anguloso por filosofia.