@goopti/ui 1.0.0 → 1.0.2

package/README.md

@@ -1,183 +1,183 @@
-# @opti-solucoes/ui
-
-Um kit de componentes React acessíveis e customizáveis, baseado em [shadcn/ui](https://ui.shadcn.com), com tema e tokens da OPTI Soluções.
-
-## Instalação
-
-```bash
-npm install @opti-solucoes/ui
-# ou
-yarn add @opti-solucoes/ui
-# ou
-pnpm add @opti-solucoes/ui
-```
-
-## Uso Rápido
-
-### 1. Adicione Tailwind CSS ao seu projeto
-
-Este kit usa Tailwind CSS. Se ainda não tiver configurado:
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-Configure o `tailwind.config.js`:
-
-```js
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@opti-solucoes/ui/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
-
-### 2. Importe o CSS do tema
-
-```jsx
-import "@opti-solucoes/ui/css";
-```
-
-### 3. Use um componente
-
-```jsx
-import { Button } from "@opti-solucoes/ui/components/button";
-
-export default function App() {
-  return (
-    <Button variant="primary">
-      Agendar diagnóstico
-    </Button>
-  );
-}
-```
-
-## Componentes Disponíveis
-
-### Básicos
-- **Button** — Botão em 6 variantes (primary, brand, secondary, outline, ghost, link)
-- **Badge** — Rótulo de status/categoria
-- **Card** — Container de conteúdo com espaçamento
-
-### Formulário
-- **Input** — Campo de texto
-- **Textarea** — Campo multilinha
-- **Select** — Dropdown customizado
-- **Checkbox** — Caixa de seleção
-- **Radio** — Grupo de rádio
-- **Switch** — Interruptor on/off
-- **Slider** — Controle deslizante
-- **InputOTP** — Entrada de código 2FA
-
-### Overlays
-- **Dialog** — Modal customizado
-- **Sheet** — Painel lateral (drawer)
-- **Popover** — Tooltip com conteúdo
-- **HoverCard** — Card ao passar o mouse
-- **Dropdown** — Menu suspenso
-- **Tooltip** — Dica ao passar o mouse
-- **Command** — Paleta de comandos (⌘K)
-
-### Navegação
-- **Tabs** — Abas de conteúdo
-- **Breadcrumb** — Caminho de navegação
-- **Pagination** — Paginador
-- **Sidebar** — Barra lateral com seções
-
-### Feedback
-- **Toast** — Notificação temporária
-- **AlertDialog** — Diálogo de confirmação
-- **Progress** — Barra de progresso
-- **Skeleton** — Placeholder de carregamento
-
-### Data & Pickers
-- **DatePicker** — Seletor de data
-- **TimePicker** — Seletor de hora
-- **DataTable** — Tabela com sort/filter
-- **Carousel** — Carrossel de itens
-
-### Utilitários
-- **Collapsible** — Conteúdo colapsável
-- **ScrollArea** — Área com scroll customizado
-
-## Customização
-
-### Cores e Tokens
-
-O tema padrão está em `src/theme.css`. Para customizar cores, fonts e espaçamento:
-
-1. Copie e edite `node_modules/@opti-solucoes/ui/dist/theme.css`
-2. Ou sobrescreva as variáveis CSS no seu `globals.css`:
-
-```css
-:root {
-  --primary: 0 0% 100%;        /* cor primária */
-  --primary-foreground: 215 100% 50%;
-  --secondary: 215 100% 50%;
-  --muted: 0 0% 95%;
-  /* ... mais tokens */
-}
-```
-
-### Espaçamento, Raio e Sombras
-
-Defina no seu `tailwind.config.js`:
-
-```js
-theme: {
-  extend: {
-    spacing: {
-      '4xs': '2px',
-      '3xs': '4px',
-      // ... conforme seu design system
-    },
-    borderRadius: {
-      none: '0px',
-      xs: '4px',
-      sm: '6px',
-      md: '8px',
-      lg: '12px',
-    },
-  },
-}
-```
-
-## Acessibilidade
-
-Todos os componentes são construídos com acessibilidade em mente:
-- Teclado: Tab, Arrow, Enter, Escape
-- ARIA labels e roles
-- Contraste de cores WCAG AA
-- Focus management
-- Screen reader support
-
-## TypeScript
-
-Este pacote inclui tipos completos. Use com confiança:
-
-```tsx
-import { Button, ButtonProps } from "@opti-solucoes/ui/components/button";
-
-interface MyButtonProps extends ButtonProps {
-  customProp?: string;
-}
-```
-
-## Licença
-
-MIT — Use livremente em projetos comerciais e open-source.
-
-## Suporte
-
-Para problemas ou sugestões, abra uma issue no [repositório GitHub](https://github.com/OPTI-Solucoes/opti-ui).
-
-## Changelog
-
-Veja [CHANGELOG.md](./CHANGELOG.md) para histórico de versões.
+# @goopti/ui
+
+Um kit de componentes React acessíveis e customizáveis, baseado em [shadcn/ui](https://ui.shadcn.com), com tema e tokens da OPTI Soluções.
+
+## Instalação
+
+```bash
+npm install @goopti/ui
+# ou
+yarn add @goopti/ui
+# ou
+pnpm add @goopti/ui
+```
+
+## Uso Rápido
+
+### 1. Adicione Tailwind CSS ao seu projeto
+
+Este kit usa Tailwind CSS. Se ainda não tiver configurado:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+Configure o `tailwind.config.js`:
+
+```js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@goopti/ui/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+### 2. Importe o CSS do tema
+
+```jsx
+import "@goopti/ui/css";
+```
+
+### 3. Use um componente
+
+```jsx
+import { Button } from "@goopti/ui/components/button";
+
+export default function App() {
+  return (
+    <Button variant="primary">
+      Agendar diagnóstico
+    </Button>
+  );
+}
+```
+
+## Componentes Disponíveis
+
+### Básicos
+- **Button** — Botão em 6 variantes (primary, brand, secondary, outline, ghost, link)
+- **Badge** — Rótulo de status/categoria
+- **Card** — Container de conteúdo com espaçamento
+
+### Formulário
+- **Input** — Campo de texto
+- **Textarea** — Campo multilinha
+- **Select** — Dropdown customizado
+- **Checkbox** — Caixa de seleção
+- **Radio** — Grupo de rádio
+- **Switch** — Interruptor on/off
+- **Slider** — Controle deslizante
+- **InputOTP** — Entrada de código 2FA
+
+### Overlays
+- **Dialog** — Modal customizado
+- **Sheet** — Painel lateral (drawer)
+- **Popover** — Tooltip com conteúdo
+- **HoverCard** — Card ao passar o mouse
+- **Dropdown** — Menu suspenso
+- **Tooltip** — Dica ao passar o mouse
+- **Command** — Paleta de comandos (⌘K)
+
+### Navegação
+- **Tabs** — Abas de conteúdo
+- **Breadcrumb** — Caminho de navegação
+- **Pagination** — Paginador
+- **Sidebar** — Barra lateral com seções
+
+### Feedback
+- **Toast** — Notificação temporária
+- **AlertDialog** — Diálogo de confirmação
+- **Progress** — Barra de progresso
+- **Skeleton** — Placeholder de carregamento
+
+### Data & Pickers
+- **DatePicker** — Seletor de data
+- **TimePicker** — Seletor de hora
+- **DataTable** — Tabela com sort/filter
+- **Carousel** — Carrossel de itens
+
+### Utilitários
+- **Collapsible** — Conteúdo colapsável
+- **ScrollArea** — Área com scroll customizado
+
+## Customização
+
+### Cores e Tokens
+
+O tema padrão está em `src/theme.css`. Para customizar cores, fonts e espaçamento:
+
+1. Copie e edite `node_modules/@goopti/ui/dist/theme.css`
+2. Ou sobrescreva as variáveis CSS no seu `globals.css`:
+
+```css
+:root {
+  --primary: 0 0% 100%;        /* cor primária */
+  --primary-foreground: 215 100% 50%;
+  --secondary: 215 100% 50%;
+  --muted: 0 0% 95%;
+  /* ... mais tokens */
+}
+```
+
+### Espaçamento, Raio e Sombras
+
+Defina no seu `tailwind.config.js`:
+
+```js
+theme: {
+  extend: {
+    spacing: {
+      '4xs': '2px',
+      '3xs': '4px',
+      // ... conforme seu design system
+    },
+    borderRadius: {
+      none: '0px',
+      xs: '4px',
+      sm: '6px',
+      md: '8px',
+      lg: '12px',
+    },
+  },
+}
+```
+
+## Acessibilidade
+
+Todos os componentes são construídos com acessibilidade em mente:
+- Teclado: Tab, Arrow, Enter, Escape
+- ARIA labels e roles
+- Contraste de cores WCAG AA
+- Focus management
+- Screen reader support
+
+## TypeScript
+
+Este pacote inclui tipos completos. Use com confiança:
+
+```tsx
+import { Button, ButtonProps } from "@goopti/ui/components/button";
+
+interface MyButtonProps extends ButtonProps {
+  customProp?: string;
+}
+```
+
+## Licença
+
+MIT — Use livremente em projetos comerciais e open-source.
+
+## Suporte
+
+Para problemas ou sugestões, abra uma issue no [repositório GitHub](https://github.com/OPTI-Solucoes/opti-ui).
+
+## Changelog
+
+Veja [CHANGELOG.md](./CHANGELOG.md) para histórico de versões.