npm package: @musa.tech/design-system
Description: Design System da Musa.tech baseado em React, TypeScript, Tailwind CSS e Radix UI
Author: Musa.tech
Latest version: 1.0.31

# @musa.tech/design-system

Design System da Musa.tech baseado em React, TypeScript, Tailwind CSS e Radix UI. Uma coleção completa de componentes reutilizáveis e acessíveis para criar interfaces modernas.

## 📦 Instalação

```bash
npm install @musa.tech/design-system
```

ou

```bash
yarn add @musa.tech/design-system
```

ou

```bash
pnpm add @musa.tech/design-system
```

ou

```bash
bun add @musa.tech/design-system
```

## 🎨 Configuração

### 1. Importe o CSS

Adicione o CSS da biblioteca no seu arquivo principal (ex: `main.tsx` ou `App.tsx`):

```typescript
import "@musa.tech/design-system/styles.css";
```

### 2. Configure o Tailwind CSS (RECOMENDADO)

Para ter **autocomplete completo** de todas as cores e classes do Tailwind, use o preset:

```typescript
// tailwind.config.ts
import type { Config } from "tailwindcss";
import musaPreset from "@musa.tech/design-system/tailwind.preset";

export default {
  presets: [musaPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@musa.tech/design-system/dist/**/*.{js,cjs}",
  ],
  // Suas customizações adicionais aqui
} satisfies Config;
```

### 3. Autocomplete de Variáveis CSS (Opcional)

Para autocomplete de variáveis CSS em `style` props:

```typescript
// src/types/global.d.ts ou src/vite-env.d.ts
import "@musa.tech/design-system/css-variables";
```

> 📖 **Para instruções detalhadas**, consulte o arquivo [INSTALLATION.md](./INSTALLATION.md)

    extend: {},

},
plugins: [require("tailwindcss-animate")],
};

````

### 3. Dependências Peer

Certifique-se de ter as seguintes dependências instaladas no seu projeto:

- `react` ^18.3.1
- `react-dom` ^18.3.1
- `tailwindcss` ^3.4.0
- `tailwindcss-animate` ^1.0.7

## 🚀 Uso

```typescript
import { Button, Card, CardContent, Input } from "@musa.tech/design-system";

function App() {
  return (
    <Card>
      <CardContent>
        <h1>Olá, Musa.tech!</h1>
        <Input placeholder="Digite algo..." />
        <Button>Clique aqui</Button>
      </CardContent>
    </Card>
  );
}
````

## 📚 Componentes Disponíveis

A biblioteca inclui os seguintes componentes:

### Layout

- `Card`, `CardHeader`, `CardContent`, `CardFooter`
- `Sheet`, `SheetTrigger`, `SheetContent`
- `Sidebar`, `SidebarProvider`, `SidebarContent`
- `ScrollArea`, `ScrollBar`
- `ResizablePanel`, `ResizablePanelGroup`
- `Separator`
- `AspectRatio`

### Formulários

- `Button`
- `Input`
- `Textarea`
- `Checkbox`
- `RadioGroup`, `RadioGroupItem`
- `Switch`
- `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`
- `Slider`
- `Form`, `FormField`, `FormItem`, `FormLabel`
- `Label`
- `InputOTP`

### Navegação

- `NavigationMenu`, `NavigationMenuItem`
- `Menubar`, `MenubarMenu`, `MenubarTrigger`
- `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbLink`
- `Pagination`, `PaginationContent`, `PaginationItem`
- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`

### Feedback

- `Alert`, `AlertTitle`, `AlertDescription`
- `Toast`, `Toaster`, `useToast`
- `Sonner`
- `Progress`
- `Skeleton`
- `Badge`

### Overlays

- `Dialog`, `DialogTrigger`, `DialogContent`
- `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`
- `Drawer`, `DrawerTrigger`, `DrawerContent`
- `Popover`, `PopoverTrigger`, `PopoverContent`
- `HoverCard`, `HoverCardTrigger`, `HoverCardContent`
- `Tooltip`, `TooltipProvider`, `TooltipTrigger`, `TooltipContent`
- `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`
- `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`

### Data Display

- `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableCell`
- `DataTable`
- `Avatar`, `AvatarImage`, `AvatarFallback`
- `Calendar`
- `Carousel`, `CarouselContent`, `CarouselItem`
- `Chart`, `ChartContainer`, `ChartTooltip`
- `Text`

### Utilitários

- `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`
- `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
- `Command`, `CommandInput`, `CommandList`, `CommandItem`
- `Toggle`, `ToggleGroup`, `ToggleGroupItem`

### Hooks

- `useToast` - Gerenciamento de notificações toast
- `useIsMobile` - Detecção de dispositivos móveis
- `useSidebar` - Controle da sidebar

### Utilitários

- `cn` - Função para mesclar classes CSS com suporte a Tailwind

## 🤖 Claude Code Skill

O pacote inclui uma **skill para Claude Code** que instrui o agente a usar os componentes, tokens e padrões do design system automaticamente — sem precisar explicar a cada conversa.

A skill é invocada automaticamente pelo Claude ao detectar que o projeto usa `@musa.tech/design-system`. Ela cobre:

- Quais componentes usar para cada caso de uso
- Como configurar o Tailwind preset e CSS variables
- Tokens de cor, tipografia e bordas
- Anti-patterns a evitar
- Exemplos prontos de formulários, tabelas, modais, toasts, etc.

### Instalando a skill no seu projeto

Após instalar o pacote, copie a skill para o diretório `.claude/` do seu projeto:

```bash
# Opção 1 — script incluído no pacote (rode no seu projeto)
npx --package=@musa.tech/design-system npm run install-skill

# Opção 2 — cópia manual
cp -r node_modules/@musa.tech/design-system/.claude/skills/musa-design-system .claude/skills/
```

Crie a pasta `.claude/skills/` se ela não existir:

```bash
mkdir -p .claude/skills
cp -r node_modules/@musa.tech/design-system/.claude/skills/musa-design-system .claude/skills/
```

Após isso, o Claude Code vai usar o design system corretamente em qualquer tarefa de UI no projeto.

## 🎨 Customização

Todos os componentes são totalmente customizáveis via Tailwind CSS. Use a prop `className` para aplicar estilos personalizados:

```typescript
<Button className="bg-purple-600 hover:bg-purple-700">Botão Customizado</Button>
```

## 🔧 Desenvolvimento

```bash
# Instalar dependências
npm install

# Modo desenvolvimento
npm run dev

# Build como biblioteca (para publicar no npm)
BUILD_LIB=true npm run build

# Build como aplicação (para publicar no Lovable)
npm run build

# Lint
npm run lint
```

### Build Modes

Este projeto suporta dois modos de build:

1. **Biblioteca (Library Mode)**: Para publicar no npm

   - Use `BUILD_LIB=true npm run build`
   - Gera arquivos ESM e CJS em `dist/`
   - Inclui arquivos de tipagem TypeScript

2. **Aplicação (App Mode)**: Para publicar no Lovable
   - Use `npm run build`
   - Gera uma aplicação web completa
   - Inclui todos os assets e páginas de demonstração

## 📄 Licença

MIT © Musa.tech

## 🤝 Contribuindo

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request no repositório.

## 📮 Contato

Para dúvidas ou suporte, entre em contato com a equipe Musa.tech.

The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)

Follow these steps:

```sh
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev
```

**Edit a file directly in GitHub**

- Navigate to the desired file(s).
- Click the "Edit" button (pencil icon) at the top right of the file view.
- Make your changes and commit the changes.

**Use GitHub Codespaces**

- Navigate to the main page of your repository.
- Click on the "Code" button (green button) near the top right.
- Select the "Codespaces" tab.
- Click on "New codespace" to launch a new Codespace environment.
- Edit files directly within the Codespace and commit and push your changes once you're done.

## What technologies are used for this project?

This project is built with:

- Vite
- TypeScript
- React
- Tailwind CSS

## How can I deploy this project?

Simply open [Lovable](https://lovable.dev/projects/49afe3bf-9099-4f26-9534-368346ec7b23) and click on Share -> Publish.

## Can I connect a custom domain to my Lovable project?

Yes, you can!

To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.

Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)