@wellingtonhlc/shared-ui 0.1.2 → 0.1.4

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 +49 -0
  2. package/dist/components/ThemePreferencesSelector.d.ts.map +1 -1
  3. package/dist/components/ThemePreferencesSelector.js +2 -1
  4. package/dist/styles.css +30 -12
  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,8 @@ Tabela de historico:
163
210
 
164
211
  | Versao | Data | Tipo | Resumo | Validacao |
165
212
  |--------|------|------|--------|-----------|
213
+ | `0.1.4` | 2026-06-16 | Patch | Usa estado `data-selected` no `ThemePreferencesSelector` para manter o destaque da aparencia selecionada nos consumidores. | `npm run build`; `npm run build-storybook`. |
214
+ | `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
215
  | `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
216
  | `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
217
  | `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
+ const isSelected = value.appearance === option.value;
33
+ 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 data-[selected=true]:[border-color:var(--brand)] data-[selected=true]:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))] data-[selected=true]:[color:var(--brand)] data-[selected=true]:shadow-[0_0_0_3px_color-mix(in_srgb,var(--brand)_18%,transparent)]'), onClick: () => selectAppearance(option.value), disabled: disabled || locked, "aria-pressed": isSelected, "data-selected": isSelected, 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,12 +1638,6 @@ 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\)\)\] {
1645
- background-color: var(--brand);
1646
- @supports (color: color-mix(in lab, red, red)) {
1647
- background-color: color-mix(in srgb,var(--brand) 12%,var(--surface));
1648
- }
1649
- }
1650
1641
  .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
1651
1642
  background-color: var(--destructive);
1652
1643
  @supports (color: color-mix(in lab, red, red)) {
@@ -2628,6 +2619,33 @@ h2.react-datepicker__current-month {
2628
2619
  opacity: 100%;
2629
2620
  }
2630
2621
  }
2622
+ .data-\[selected\=true\]\:\[border-color\:var\(--brand\)\] {
2623
+ &[data-selected="true"] {
2624
+ border-color: var(--brand);
2625
+ }
2626
+ }
2627
+ .data-\[selected\=true\]\:bg-\[color-mix\(in_srgb\,var\(--brand\)_16\%\,var\(--surface\)\)\] {
2628
+ &[data-selected="true"] {
2629
+ background-color: var(--brand);
2630
+ @supports (color: color-mix(in lab, red, red)) {
2631
+ background-color: color-mix(in srgb,var(--brand) 16%,var(--surface));
2632
+ }
2633
+ }
2634
+ }
2635
+ .data-\[selected\=true\]\:\[color\:var\(--brand\)\] {
2636
+ &[data-selected="true"] {
2637
+ color: var(--brand);
2638
+ }
2639
+ }
2640
+ .data-\[selected\=true\]\:shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
2641
+ &[data-selected="true"] {
2642
+ --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2643
+ @supports (color: color-mix(in lab, red, red)) {
2644
+ --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
2645
+ }
2646
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2647
+ }
2648
+ }
2631
2649
  .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
2632
2650
  &[data-state="open"] {
2633
2651
  background-color: color-mix(in srgb,#facc15 14%,transparent);
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.4",
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"