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:

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

Com npm:

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

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:

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.