npm package: @leap-studios/purpose-ui
Description: A collection of React components for building web applications.
Latest version: 1.2.0

# Purpose UI — Design System

Uma biblioteca de componentes React para acelerar a construção de interfaces consistentes. Este repositório contém o design system "Purpose UI", mantido pela Leap Studios.

- Pacote: `@leap-studios/purpose-ui`
- Runtime: React 19
- Estilos: classes utilitárias do Tailwind CSS (v4)
- Bundling: Vite (rolldown) + tipos TypeScript
- Documentação de componentes: Storybook

## Instalação

Com pnpm:

```bash
pnpm add @leap-studios/purpose-ui react react-dom
```

Com npm:

```bash
npm install @leap-studios/purpose-ui react react-dom
```

Requisitos de estilos:
- Os componentes usam classes do Tailwind CSS. Recomenda-se que seu projeto esteja com Tailwind v4 configurado.

## Uso básico

```tsx
import { Button, Input, Checkbox, Radio, Switch, Breadcrumb, Tab } from "@leap-studios/purpose-ui";

export default function Example() {
  return (
    <div className="p-4 space-y-4">
      <Breadcrumb items={[{ label: "Início" }, { label: "Página" }]} />

      <Button intent="primary">Salvar</Button>

      <Input label="Nome" placeholder="Digite seu nome" />

      <Checkbox>Concordo com os termos</Checkbox>

      <Radio name="plan" value="basic">Plano Básico</Radio>

      <Switch defaultChecked>Ativo</Switch>

      <Tab tabs={[{ id: "t1", label: "Tab 1" }, { id: "t2", label: "Tab 2" }]} />
    </div>
  );
}
```

## Componentes disponíveis

Exportados a partir de `@leap-studios/purpose-ui`:
- Breadcrumb
- Button
- Checkbox
- Input
- Radio
- Switch
- Tab

Consulte o Storybook para exemplos, props e boas práticas.

## Storybook

- Iniciar: `pnpm storybook` — abre em http://localhost:6006
- Build estático: `pnpm build-storybook` — saída em `storybook-static/`

## Desenvolvimento

- Dev (playground): `pnpm dev`
- Lint: `pnpm lint`
- Lint (fix): `pnpm lint:fix`
- Format: `pnpm format`
- Check (format + lint): `pnpm check`
- Build da lib: `pnpm build` (gera `dist/` com ESM, UMD e tipos)

Publicação: o script `prepublishOnly` garante um build atualizado antes do publish.

## Configuração do Tailwind

Este projeto usa Tailwind CSS v4. Em aplicações consumidoras, assegure-se de ter o Tailwind configurado (por exemplo, com `@tailwind base;`, `@tailwind components;`, `@tailwind utilities;` no CSS de entrada) para que as classes utility funcionem corretamente.

## Suporte e contribuição

Sinta-se à vontade para abrir issues e PRs com melhorias e novos componentes. Mantenha o padrão de código executando `pnpm check` antes de enviar.


## Variações de cores

O componente Button possui variações de cores prontas para sucesso, aviso e informação além das já existentes:

```tsx
import { Button } from "@leap-studios/purpose-ui";

export function Examples() {
  return (
    <div className="flex gap-3 flex-wrap">
      <Button variant="default">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Danger</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
      <Button variant="soft">Soft</Button>
    </div>
  );
}
```

As classes utilitárias são alimentadas por tokens semânticos do tema (bg-success, text-success-foreground, etc.). Caso use tema escuro (.dark), as cores continuam legíveis automaticamente.