@goopti/ui 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +183 -183
  2. package/package.json +2 -4
package/README.md CHANGED
@@ -1,183 +1,183 @@
1
- # @goopti/ui
2
-
3
- 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.
4
-
5
- ## Instalação
6
-
7
- ```bash
8
- npm install @goopti/ui
9
- # ou
10
- yarn add @goopti/ui
11
- # ou
12
- pnpm add @goopti/ui
13
- ```
14
-
15
- ## Uso Rápido
16
-
17
- ### 1. Adicione Tailwind CSS ao seu projeto
18
-
19
- Este kit usa Tailwind CSS. Se ainda não tiver configurado:
20
-
21
- ```bash
22
- npm install -D tailwindcss postcss autoprefixer
23
- npx tailwindcss init -p
24
- ```
25
-
26
- Configure o `tailwind.config.js`:
27
-
28
- ```js
29
- export default {
30
- content: [
31
- "./index.html",
32
- "./src/**/*.{js,jsx,ts,tsx}",
33
- "./node_modules/@goopti/ui/**/*.{js,jsx,ts,tsx}",
34
- ],
35
- theme: {
36
- extend: {},
37
- },
38
- plugins: [],
39
- };
40
- ```
41
-
42
- ### 2. Importe o CSS do tema
43
-
44
- ```jsx
45
- import "@goopti/ui/css";
46
- ```
47
-
48
- ### 3. Use um componente
49
-
50
- ```jsx
51
- import { Button } from "@goopti/ui/components/button";
52
-
53
- export default function App() {
54
- return (
55
- <Button variant="primary">
56
- Agendar diagnóstico
57
- </Button>
58
- );
59
- }
60
- ```
61
-
62
- ## Componentes Disponíveis
63
-
64
- ### Básicos
65
- - **Button** — Botão em 6 variantes (primary, brand, secondary, outline, ghost, link)
66
- - **Badge** — Rótulo de status/categoria
67
- - **Card** — Container de conteúdo com espaçamento
68
-
69
- ### Formulário
70
- - **Input** — Campo de texto
71
- - **Textarea** — Campo multilinha
72
- - **Select** — Dropdown customizado
73
- - **Checkbox** — Caixa de seleção
74
- - **Radio** — Grupo de rádio
75
- - **Switch** — Interruptor on/off
76
- - **Slider** — Controle deslizante
77
- - **InputOTP** — Entrada de código 2FA
78
-
79
- ### Overlays
80
- - **Dialog** — Modal customizado
81
- - **Sheet** — Painel lateral (drawer)
82
- - **Popover** — Tooltip com conteúdo
83
- - **HoverCard** — Card ao passar o mouse
84
- - **Dropdown** — Menu suspenso
85
- - **Tooltip** — Dica ao passar o mouse
86
- - **Command** — Paleta de comandos (⌘K)
87
-
88
- ### Navegação
89
- - **Tabs** — Abas de conteúdo
90
- - **Breadcrumb** — Caminho de navegação
91
- - **Pagination** — Paginador
92
- - **Sidebar** — Barra lateral com seções
93
-
94
- ### Feedback
95
- - **Toast** — Notificação temporária
96
- - **AlertDialog** — Diálogo de confirmação
97
- - **Progress** — Barra de progresso
98
- - **Skeleton** — Placeholder de carregamento
99
-
100
- ### Data & Pickers
101
- - **DatePicker** — Seletor de data
102
- - **TimePicker** — Seletor de hora
103
- - **DataTable** — Tabela com sort/filter
104
- - **Carousel** — Carrossel de itens
105
-
106
- ### Utilitários
107
- - **Collapsible** — Conteúdo colapsável
108
- - **ScrollArea** — Área com scroll customizado
109
-
110
- ## Customização
111
-
112
- ### Cores e Tokens
113
-
114
- O tema padrão está em `src/theme.css`. Para customizar cores, fonts e espaçamento:
115
-
116
- 1. Copie e edite `node_modules/@goopti/ui/dist/theme.css`
117
- 2. Ou sobrescreva as variáveis CSS no seu `globals.css`:
118
-
119
- ```css
120
- :root {
121
- --primary: 0 0% 100%; /* cor primária */
122
- --primary-foreground: 215 100% 50%;
123
- --secondary: 215 100% 50%;
124
- --muted: 0 0% 95%;
125
- /* ... mais tokens */
126
- }
127
- ```
128
-
129
- ### Espaçamento, Raio e Sombras
130
-
131
- Defina no seu `tailwind.config.js`:
132
-
133
- ```js
134
- theme: {
135
- extend: {
136
- spacing: {
137
- '4xs': '2px',
138
- '3xs': '4px',
139
- // ... conforme seu design system
140
- },
141
- borderRadius: {
142
- none: '0px',
143
- xs: '4px',
144
- sm: '6px',
145
- md: '8px',
146
- lg: '12px',
147
- },
148
- },
149
- }
150
- ```
151
-
152
- ## Acessibilidade
153
-
154
- Todos os componentes são construídos com acessibilidade em mente:
155
- - Teclado: Tab, Arrow, Enter, Escape
156
- - ARIA labels e roles
157
- - Contraste de cores WCAG AA
158
- - Focus management
159
- - Screen reader support
160
-
161
- ## TypeScript
162
-
163
- Este pacote inclui tipos completos. Use com confiança:
164
-
165
- ```tsx
166
- import { Button, ButtonProps } from "@goopti/ui/components/button";
167
-
168
- interface MyButtonProps extends ButtonProps {
169
- customProp?: string;
170
- }
171
- ```
172
-
173
- ## Licença
174
-
175
- MIT — Use livremente em projetos comerciais e open-source.
176
-
177
- ## Suporte
178
-
179
- Para problemas ou sugestões, abra uma issue no [repositório GitHub](https://github.com/OPTI-Solucoes/opti-ui).
180
-
181
- ## Changelog
182
-
183
- Veja [CHANGELOG.md](./CHANGELOG.md) para histórico de versões.
1
+ # @goopti/ui
2
+
3
+ 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.
4
+
5
+ ## Instalação
6
+
7
+ ```bash
8
+ npm install @goopti/ui
9
+ # ou
10
+ yarn add @goopti/ui
11
+ # ou
12
+ pnpm add @goopti/ui
13
+ ```
14
+
15
+ ## Uso Rápido
16
+
17
+ ### 1. Adicione Tailwind CSS ao seu projeto
18
+
19
+ Este kit usa Tailwind CSS. Se ainda não tiver configurado:
20
+
21
+ ```bash
22
+ npm install -D tailwindcss postcss autoprefixer
23
+ npx tailwindcss init -p
24
+ ```
25
+
26
+ Configure o `tailwind.config.js`:
27
+
28
+ ```js
29
+ export default {
30
+ content: [
31
+ "./index.html",
32
+ "./src/**/*.{js,jsx,ts,tsx}",
33
+ "./node_modules/@goopti/ui/**/*.{js,jsx,ts,tsx}",
34
+ ],
35
+ theme: {
36
+ extend: {},
37
+ },
38
+ plugins: [],
39
+ };
40
+ ```
41
+
42
+ ### 2. Importe o CSS do tema
43
+
44
+ ```jsx
45
+ import "@goopti/ui/css";
46
+ ```
47
+
48
+ ### 3. Use um componente
49
+
50
+ ```jsx
51
+ import { Button } from "@goopti/ui/components/button";
52
+
53
+ export default function App() {
54
+ return (
55
+ <Button variant="primary">
56
+ Agendar diagnóstico
57
+ </Button>
58
+ );
59
+ }
60
+ ```
61
+
62
+ ## Componentes Disponíveis
63
+
64
+ ### Básicos
65
+ - **Button** – Botão em 6 variantes (primary, brand, secondary, outline, ghost, link)
66
+ - **Badge** – Rótulo de status/categoria
67
+ - **Card** – Container de conteúdo com espaçamento
68
+
69
+ ### Formulário
70
+ - **Input** – Campo de texto
71
+ - **Textarea** – Campo multilinha
72
+ - **Select** – Dropdown customizado
73
+ - **Checkbox** – Caixa de seleção
74
+ - **Radio** – Grupo de rádio
75
+ - **Switch** – Interruptor on/off
76
+ - **Slider** – Controle deslizante
77
+ - **InputOTP** – Entrada de código 2FA
78
+
79
+ ### Overlays
80
+ - **Dialog** – Modal customizado
81
+ - **Sheet** – Painel lateral (drawer)
82
+ - **Popover** – Tooltip com conteúdo
83
+ - **HoverCard** – Card ao passar o mouse
84
+ - **Dropdown** – Menu suspenso
85
+ - **Tooltip** – Dica ao passar o mouse
86
+ - **Command** – Paleta de comandos (⌘K)
87
+
88
+ ### Navegação
89
+ - **Tabs** – Abas de conteúdo
90
+ - **Breadcrumb** – Caminho de navegação
91
+ - **Pagination** – Paginador
92
+ - **Sidebar** – Barra lateral com seções
93
+
94
+ ### Feedback
95
+ - **Toast** – Notificação temporária
96
+ - **AlertDialog** – Diálogo de confirmação
97
+ - **Progress** – Barra de progresso
98
+ - **Skeleton** – Placeholder de carregamento
99
+
100
+ ### Data & Pickers
101
+ - **DatePicker** – Seletor de data
102
+ - **TimePicker** – Seletor de hora
103
+ - **DataTable** – Tabela com sort/filter
104
+ - **Carousel** – Carrossel de itens
105
+
106
+ ### Utilitários
107
+ - **Collapsible** – Conteúdo colapsável
108
+ - **ScrollArea** – Área com scroll customizado
109
+
110
+ ## Customização
111
+
112
+ ### Cores e Tokens
113
+
114
+ O tema padrão está em `src/theme.css`. Para customizar cores, fonts e espaçamento:
115
+
116
+ 1. Copie e edite `node_modules/@goopti/ui/dist/theme.css`
117
+ 2. Ou sobrescreva as variáveis CSS no seu `globals.css`:
118
+
119
+ ```css
120
+ :root {
121
+ --primary: 0 0% 100%; /* cor primária */
122
+ --primary-foreground: 215 100% 50%;
123
+ --secondary: 215 100% 50%;
124
+ --muted: 0 0% 95%;
125
+ /* ... mais tokens */
126
+ }
127
+ ```
128
+
129
+ ### Espaçamento, Raio e Sombras
130
+
131
+ Defina no seu `tailwind.config.js`:
132
+
133
+ ```js
134
+ theme: {
135
+ extend: {
136
+ spacing: {
137
+ '4xs': '2px',
138
+ '3xs': '4px',
139
+ // ... conforme seu design system
140
+ },
141
+ borderRadius: {
142
+ none: '0px',
143
+ xs: '4px',
144
+ sm: '6px',
145
+ md: '8px',
146
+ lg: '12px',
147
+ },
148
+ },
149
+ }
150
+ ```
151
+
152
+ ## Acessibilidade
153
+
154
+ Todos os componentes são construídos com acessibilidade em mente:
155
+ - Teclado: Tab, Arrow, Enter, Escape
156
+ - ARIA labels e roles
157
+ - Contraste de cores WCAG AA
158
+ - Focus management
159
+ - Screen reader support
160
+
161
+ ## TypeScript
162
+
163
+ Este pacote inclui tipos completos. Use com confiança:
164
+
165
+ ```tsx
166
+ import { Button, ButtonProps } from "@goopti/ui/components/button";
167
+
168
+ interface MyButtonProps extends ButtonProps {
169
+ customProp?: string;
170
+ }
171
+ ```
172
+
173
+ ## Licença
174
+
175
+ MIT – Use livremente em projetos comerciais e open-source.
176
+
177
+ ## Suporte
178
+
179
+ Para problemas ou sugestões, abra uma issue no [repositório GitHub](https://github.com/OPTI-Solucoes/opti-ui).
180
+
181
+ ## Changelog
182
+
183
+ Veja [CHANGELOG.md](./CHANGELOG.md) para histórico de versões.
package/package.json CHANGED
@@ -1,15 +1,13 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "@goopti/ui",
4
- "version": "1.1.0",
4
+ "version": "1.1.2",
5
5
  "description": "OPTI Soluções UI Kit based on shadcn/ui — A collection of accessible, customizable React components.",
6
6
  "main": "dist/index.js",
7
- "module": "dist/index.esm.js",
8
7
  "types": "dist/index.d.ts",
9
8
  "exports": {
10
9
  ".": {
11
- "import": "./dist/index.esm.js",
12
- "require": "./dist/index.js",
10
+ "import": "./dist/index.js",
13
11
  "types": "./dist/index.d.ts"
14
12
  },
15
13
  "./css": "./dist/theme.css",