@wellingtonhlc/shared-ui 0.1.5 → 0.1.7

package/README.md

@@ -210,6 +210,8 @@ Tabela de historico:
 
 | Versao | Data | Tipo | Resumo | Validacao |
 |--------|------|------|--------|-----------|
+| `0.1.7` | 2026-06-16 | Minor pre-v1 | Adiciona props de customizacao dos botoes de aparencia em `ThemePreferencesSelector`. | `npm run build`; build do `EloDesk.CRM`. |
+| `0.1.6` | 2026-06-16 | Patch | Forca o destaque da aparencia selecionada por CSS explicito em `[aria-pressed='true']`. | `npm run build`; `npm run build-storybook`; build do `EloDesk.CRM.Portal`. |
 | `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`. |
 | `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`. |
 | `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`. |

package/dist/components/ThemePreferencesSelector.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 export type ThemeAppearance = 'system' | 'light' | 'dark';
 export type ThemeColorOption = {
     key: string;
@@ -18,7 +19,11 @@ export interface ThemePreferencesSelectorProps {
     locked?: boolean;
     showAppearanceSelector?: boolean;
     showColorSelector?: boolean;
+    appearanceButtonClassName?: string;
+    selectedAppearanceButtonClassName?: string;
+    appearanceButtonStyle?: CSSProperties;
+    selectedAppearanceButtonStyle?: CSSProperties;
     onLockedOptionClick?: (option: ThemeColorOption) => void;
 }
-export declare function ThemePreferencesSelector({ disabled, locked, onChange, onLockedOptionClick, options, showAppearanceSelector, showColorSelector, value, }: ThemePreferencesSelectorProps): import("react").JSX.Element;
+export declare function ThemePreferencesSelector({ disabled, locked, onChange, onLockedOptionClick, options, appearanceButtonClassName, appearanceButtonStyle, selectedAppearanceButtonClassName, selectedAppearanceButtonStyle, showAppearanceSelector, showColorSelector, value, }: ThemePreferencesSelectorProps): import("react").JSX.Element;
 //# sourceMappingURL=ThemePreferencesSelector.d.ts.map

package/dist/components/ThemePreferencesSelector.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"ThemePreferencesSelector.d.ts","sourceRoot":"","sources":["../../src/components/ThemePreferencesSelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,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,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC,6BAA6B,CAAC,EAAE,aAAa,CAAC;IAC9C,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,yBAAyB,EACzB,qBAAqB,EACrB,iCAAiC,EACjC,6BAA6B,EAC7B,sBAA6B,EAC7B,iBAAwB,EACxB,KAAK,GACN,EAAE,6BAA6B,+BAsF/B"}

package/dist/components/ThemePreferencesSelector.js

@@ -6,13 +6,7 @@ const appearanceOptions = [
     { value: 'light', label: 'Claro', Icon: Sun },
     { value: 'dark', label: 'Escuro', Icon: Moon },
 ];
-const selectedAppearanceStyle = {
-    backgroundColor: 'var(--brand)',
-    borderColor: 'var(--brand)',
-    boxShadow: '0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent)',
-    color: 'var(--primary-foreground, #fff)',
-};
-export function ThemePreferencesSelector({ disabled = false, locked = false, onChange, onLockedOptionClick, options, showAppearanceSelector = true, showColorSelector = true, value, }) {
+export function ThemePreferencesSelector({ disabled = false, locked = false, onChange, onLockedOptionClick, options, appearanceButtonClassName, appearanceButtonStyle, selectedAppearanceButtonClassName, selectedAppearanceButtonStyle, showAppearanceSelector = true, showColorSelector = true, value, }) {
     function selectAppearance(appearance) {
         if (disabled || locked)
             return;
@@ -36,6 +30,8 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
                         }) })] })) : 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) => {
                             const Icon = option.Icon;
                             const isSelected = value.appearance === option.value;
-                            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));
+                            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', appearanceButtonClassName, isSelected &&
+                                    (selectedAppearanceButtonClassName ??
+                                        'border-brand bg-brand text-primary-foreground shadow-[0_0_0_3px_color-mix(in_srgb,var(--brand)_24%,transparent)]')), style: isSelected ? { ...appearanceButtonStyle, ...selectedAppearanceButtonStyle } : appearanceButtonStyle, 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));
                         }) })] })) : null] }));
 }

package/dist/styles.css

@@ -2085,6 +2085,13 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_24\%\,transparent\)\] {
+    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 24%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_2px_8px_-2px_color-mix\(in_srgb\,\#000_6\%\,transparent\)\] {
     --tw-shadow: 0 2px 8px -2px var(--tw-shadow-color, color-mix(in srgb,#000 6%,transparent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3676,4 +3683,4 @@ h2.react-datepicker__current-month {
       --tw-ease: initial;
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.1.5",
+    "version": "0.1.7",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",