@wellingtonhlc/shared-ui 0.1.3 → 0.1.5

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 +2 -0
  2. package/dist/components/ThemePreferencesSelector.d.ts.map +1 -1
  3. package/dist/components/ThemePreferencesSelector.js +8 -2
  4. package/dist/styles.css +3 -13
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -210,6 +210,8 @@ Tabela de historico:
210
210
 
211
211
  | Versao | Data | Tipo | Resumo | Validacao |
212
212
  |--------|------|------|--------|-----------|
213
+ | `0.1.5` | 2026-06-16 | Patch | Aplica o destaque da aparencia selecionada por estilo inline para evitar perda por ordem/geracao de CSS nos consumidores. | `npm run build`; `npm run build-storybook`; build do `EloDesk.CRM.Portal`. |
214
+ | `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`. |
213
215
  | `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`. |
214
216
  | `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`. |
215
217
  | `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. |
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,+BAiF/B"}
1
+ {"version":3,"file":"ThemePreferencesSelector.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreferencesSelector.tsx"],"names":[],"mappings":"AAIA,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;AAeD,wBAAgB,wBAAwB,CAAC,EACvC,QAAgB,EAChB,MAAc,EACd,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACP,sBAA6B,EAC7B,iBAAwB,EACxB,KAAK,GACN,EAAE,6BAA6B,+BAkF/B"}
package/dist/components/ThemePreferencesSelector.js CHANGED
@@ -6,6 +6,12 @@ const appearanceOptions = [
6
6
  { value: 'light', label: 'Claro', Icon: Sun },
7
7
  { value: 'dark', label: 'Escuro', Icon: Moon },
8
8
  ];
9
+ const selectedAppearanceStyle = {
10
+ backgroundColor: 'var(--brand)',
11
+ borderColor: 'var(--brand)',
12
+ boxShadow: '0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent)',
13
+ color: 'var(--primary-foreground, #fff)',
14
+ };
9
15
  export function ThemePreferencesSelector({ disabled = false, locked = false, onChange, onLockedOptionClick, options, showAppearanceSelector = true, showColorSelector = true, value, }) {
10
16
  function selectAppearance(appearance) {
11
17
  if (disabled || locked)
@@ -29,7 +35,7 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
29
35
  : option.label }, option.key));
30
36
  }) })] })) : 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
37
  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 &&
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));
38
+ const isSelected = value.appearance === option.value;
39
+ 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'), style: isSelected ? selectedAppearanceStyle : undefined, 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));
34
40
  }) })] })) : null] }));
35
41
  }
package/dist/styles.css CHANGED
@@ -1014,6 +1014,9 @@ h2.react-datepicker__current-month {
1014
1014
  .hidden {
1015
1015
  display: none;
1016
1016
  }
1017
+ .inline {
1018
+ display: inline;
1019
+ }
1017
1020
  .inline-flex {
1018
1021
  display: inline-flex;
1019
1022
  }
@@ -1638,12 +1641,6 @@ h2.react-datepicker__current-month {
1638
1641
  background-color: color-mix(in srgb,var(--app-border) 60%,transparent);
1639
1642
  }
1640
1643
  }
1641
- .bg-\[color-mix\(in_srgb\,var\(--brand\)_16\%\,var\(--surface\)\)\] {
1642
- background-color: var(--brand);
1643
- @supports (color: color-mix(in lab, red, red)) {
1644
- background-color: color-mix(in srgb,var(--brand) 16%,var(--surface));
1645
- }
1646
- }
1647
1644
  .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
1648
1645
  background-color: var(--destructive);
1649
1646
  @supports (color: color-mix(in lab, red, red)) {
@@ -2081,13 +2078,6 @@ h2.react-datepicker__current-month {
2081
2078
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
2082
2079
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2083
2080
  }
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
- }
2091
2081
  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_20\%\,transparent\)\] {
2092
2082
  --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
2093
2083
  @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.3",
3
+ "version": "0.1.5",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",