@wellingtonhlc/shared-ui 0.1.2 → 0.1.3

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 (5) hide show
  1. package/README.md +48 -0
  2. package/dist/components/ThemePreferencesSelector.d.ts.map +1 -1
  3. package/dist/components/ThemePreferencesSelector.js +2 -1
  4. package/dist/styles.css +12 -8
  5. package/package.json +5 -5
package/README.md CHANGED
@@ -60,6 +60,22 @@ Nao inclua:
60
60
  | `npm run storybook` | Sobe o Storybook local. |
61
61
  | `npm run build-storybook` | Gera build estatico do Storybook. |
62
62
 
63
+ ## Storybook
64
+
65
+ O Storybook esta na linha `10.4.6` (`storybook`, `@storybook/react-vite`, `@storybook/addon-docs` e `@storybook/addon-a11y`).
66
+
67
+ Use o Storybook para validar estados visuais antes de publicar mudancas no pacote:
68
+
69
+ ```bash
70
+ npm run storybook
71
+ ```
72
+
73
+ Antes de publicar ou consumir localmente uma alteracao visual, gere tambem a build estatica:
74
+
75
+ ```bash
76
+ npm run build-storybook
77
+ ```
78
+
63
79
  ## Exportacoes
64
80
 
65
81
  Entrada principal:
@@ -95,6 +111,37 @@ Componentes disponiveis na API publica:
95
111
  | Controle de renderizacao | `RenderIf`, `RenderCase` |
96
112
  | Tema | `ThemePreferencesSelector` |
97
113
 
114
+ ## ThemePreferencesSelector
115
+
116
+ `ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.
117
+
118
+ Contrato minimo:
119
+
120
+ ```tsx
121
+ import { ThemePreferencesSelector, type ThemePreferencesValue } from '@wellingtonhlc/shared-ui';
122
+
123
+ const value: ThemePreferencesValue = {
124
+ color: 'indigo',
125
+ appearance: 'system',
126
+ };
127
+
128
+ <ThemePreferencesSelector
129
+ value={value}
130
+ options={[
131
+ { key: 'indigo', label: 'Indigo', primary: '#5b5cff' },
132
+ { key: 'emerald', label: 'Emerald', primary: '#059669' },
133
+ ]}
134
+ onChange={setValue}
135
+ />;
136
+ ```
137
+
138
+ Pontos de validacao:
139
+
140
+ - O botao de aparencia selecionado deve ficar perceptivelmente destacado sem depender de hover.
141
+ - Opcoes de cor bloqueadas usam `locked` e podem informar `requiredPlan`.
142
+ - Use `showColorSelector={false}` ou `showAppearanceSelector={false}` quando o consumidor precisar exibir apenas uma parte do controle.
143
+ - A story `AppearanceStates` mostra as tres aparencias ja selecionadas para validacao visual rapida.
144
+
98
145
  ## Filter
99
146
 
100
147
  `Filter.Root` organiza filtros compactos, ocupando apenas o espaço necessário. Quando houver muitos filtros, somente o corpo do painel rola e as ações continuam visíveis.
@@ -163,6 +210,7 @@ Tabela de historico:
163
210
 
164
211
  | Versao | Data | Tipo | Resumo | Validacao |
165
212
  |--------|------|------|--------|-----------|
213
+ | `0.1.3` | 2026-06-16 | Patch | Atualiza Storybook para `10.4.6`, documenta `ThemePreferencesSelector` e reforca o destaque visual da aparencia selecionada. | `npm run build`; `npm run build-storybook`. |
166
214
  | `0.1.0` | 2026-06-15 | Breaking pre-v1 | Define `Filter.Root`/`Filter.Footer` como contrato final de filtros e remove aliases públicos provisórios. | `npm run build`; builds de `EloDesk.CRM` e `EloDesk.CRM.Portal`. |
167
215
  | `0.0.7` | 2026-06-14 | Breaking pre-v1 | Publica API composicional `SearchWorkspace.Root` e `SearchFilter.Root`/`SearchFilter.Footer` para consultas com filtros compactos. | Pendente antes da publicacao. |
168
216
  | `0.0.5` | 2026-06-14 | Minor pre-v1 | Adiciona `Table.Root isFramed`, `fill`, `viewportClassName` e `wrapperProps` para controlar frame e ocupacao de espaco sem classes ad-hoc. | `npm run build`. |
package/dist/components/ThemePreferencesSelector.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemePreferencesSelector.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreferencesSelector.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC1D;AAQD,wBAAgB,wBAAwB,CAAC,EACvC,QAAgB,EAChB,MAAc,EACd,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACP,sBAA6B,EAC7B,iBAAwB,EACxB,KAAK,GACN,EAAE,6BAA6B,+BAgF/B"}
1
+ {"version":3,"file":"ThemePreferencesSelector.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreferencesSelector.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC1D;AAQD,wBAAgB,wBAAwB,CAAC,EACvC,QAAgB,EAChB,MAAc,EACd,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACP,sBAA6B,EAC7B,iBAAwB,EACxB,KAAK,GACN,EAAE,6BAA6B,+BAiF/B"}
package/dist/components/ThemePreferencesSelector.js CHANGED
@@ -29,6 +29,7 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
29
29
  : option.label }, option.key));
30
30
  }) })] })) : null, showAppearanceSelector ? (_jsxs("section", { className: "grid gap-2", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.16em] text-foreground-muted", children: "Aparencia" }), _jsx("div", { className: "flex flex-wrap items-center justify-start gap-2", children: appearanceOptions.map((option) => {
31
31
  const Icon = option.Icon;
32
- return (_jsxs("button", { type: "button", className: cn('border-app-border bg-surface inline-flex h-9 w-full max-w-[120px] cursor-pointer items-center justify-center gap-1.5 rounded-md border px-3 text-xs font-bold text-foreground-muted transition-[background-color,border-color,color,box-shadow] hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:cursor-not-allowed disabled:opacity-60', value.appearance === option.value && 'border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_12%,var(--surface))] text-brand'), onClick: () => selectAppearance(option.value), disabled: disabled || locked, "aria-pressed": value.appearance === option.value, children: [_jsx(Icon, { "aria-hidden": "true", size: 14, strokeWidth: 2 }), option.label] }, option.value));
32
+ return (_jsxs("button", { type: "button", className: cn('border-app-border bg-surface inline-flex h-9 w-full max-w-[120px] cursor-pointer items-center justify-center gap-1.5 rounded-md border px-3 text-xs font-bold text-foreground-muted transition-[background-color,border-color,color,box-shadow] hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:cursor-not-allowed disabled:opacity-60', value.appearance === option.value &&
33
+ 'border-brand bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))] text-brand shadow-[0_0_0_3px_color-mix(in_srgb,var(--brand)_18%,transparent)]'), onClick: () => selectAppearance(option.value), disabled: disabled || locked, "aria-pressed": value.appearance === option.value, children: [_jsx(Icon, { "aria-hidden": "true", size: 14, strokeWidth: 2 }), option.label] }, option.value));
33
34
  }) })] })) : null] }));
34
35
  }
package/dist/styles.css CHANGED
@@ -1467,6 +1467,9 @@ h2.react-datepicker__current-month {
1467
1467
  .gap-4 {
1468
1468
  gap: calc(var(--spacing) * 4);
1469
1469
  }
1470
+ .gap-5 {
1471
+ gap: calc(var(--spacing) * 5);
1472
+ }
1470
1473
  .gap-6 {
1471
1474
  gap: calc(var(--spacing) * 6);
1472
1475
  }
@@ -1587,12 +1590,6 @@ h2.react-datepicker__current-month {
1587
1590
  --tw-border-style: dashed;
1588
1591
  border-style: dashed;
1589
1592
  }
1590
- .border-\[color-mix\(in_srgb\,var\(--brand\)_44\%\,var\(--app-border\)\)\] {
1591
- border-color: var(--brand);
1592
- @supports (color: color-mix(in lab, red, red)) {
1593
- border-color: color-mix(in srgb,var(--brand) 44%,var(--app-border));
1594
- }
1595
- }
1596
1593
  .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
1597
1594
  border-color: var(--brand);
1598
1595
  @supports (color: color-mix(in lab, red, red)) {
@@ -1641,10 +1638,10 @@ h2.react-datepicker__current-month {
1641
1638
  background-color: color-mix(in srgb,var(--app-border) 60%,transparent);
1642
1639
  }
1643
1640
  }
1644
- .bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,var\(--surface\)\)\] {
1641
+ .bg-\[color-mix\(in_srgb\,var\(--brand\)_16\%\,var\(--surface\)\)\] {
1645
1642
  background-color: var(--brand);
1646
1643
  @supports (color: color-mix(in lab, red, red)) {
1647
- background-color: color-mix(in srgb,var(--brand) 12%,var(--surface));
1644
+ background-color: color-mix(in srgb,var(--brand) 16%,var(--surface));
1648
1645
  }
1649
1646
  }
1650
1647
  .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
@@ -2084,6 +2081,13 @@ h2.react-datepicker__current-month {
2084
2081
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
2085
2082
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2086
2083
  }
2084
+ .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
2085
+ --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2086
+ @supports (color: color-mix(in lab, red, red)) {
2087
+ --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
2088
+ }
2089
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2090
+ }
2087
2091
  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_20\%\,transparent\)\] {
2088
2092
  --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2089
2093
  @supports (color: color-mix(in lab, red, red)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wellingtonhlc/shared-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -38,16 +38,16 @@
38
38
  "react-dom": "^18.3.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@storybook/addon-a11y": "^10.4.2",
42
- "@storybook/addon-docs": "^10.4.2",
43
- "@storybook/react-vite": "^10.4.2",
41
+ "@storybook/addon-a11y": "^10.4.6",
42
+ "@storybook/addon-docs": "^10.4.6",
43
+ "@storybook/react-vite": "^10.4.6",
44
44
  "@tailwindcss/postcss": "4.1.10",
45
45
  "@types/react": "^19.1.2",
46
46
  "@types/react-dom": "^19.1.2",
47
47
  "autoprefixer": "^10.5.0",
48
48
  "lucide-react": "^0.522.0",
49
49
  "postcss": "^8.5.15",
50
- "storybook": "^10.4.2",
50
+ "storybook": "^10.4.6",
51
51
  "tailwindcss": "4.1.10",
52
52
  "typescript": "~5.8.3",
53
53
  "vite": "^8.0.16"