@wellingtonhlc/shared-ui 0.1.4 → 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.
package/README.md
CHANGED
|
@@ -210,6 +210,7 @@ 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`. |
|
|
213
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`. |
|
|
214
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`. |
|
|
215
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`. |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemePreferencesSelector.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreferencesSelector.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -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)
|
|
@@ -30,6 +36,6 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
|
|
|
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
38
|
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
|
|
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
|
}
|
|
@@ -2619,33 +2622,6 @@ h2.react-datepicker__current-month {
|
|
|
2619
2622
|
opacity: 100%;
|
|
2620
2623
|
}
|
|
2621
2624
|
}
|
|
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
|
-
}
|
|
2649
2625
|
.data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
|
|
2650
2626
|
&[data-state="open"] {
|
|
2651
2627
|
background-color: color-mix(in srgb,#facc15 14%,transparent);
|