@wellingtonhlc/shared-ui 0.1.1 → 0.1.3

package/README.md

@@ -60,6 +60,22 @@ Nao inclua:
 | `npm run storybook` | Sobe o Storybook local. |
 | `npm run build-storybook` | Gera build estatico do Storybook. |
 
+## Storybook
+
+O Storybook esta na linha `10.4.6` (`storybook`, `@storybook/react-vite`, `@storybook/addon-docs` e `@storybook/addon-a11y`).
+
+Use o Storybook para validar estados visuais antes de publicar mudancas no pacote:
+
+```bash
+npm run storybook
+```
+
+Antes de publicar ou consumir localmente uma alteracao visual, gere tambem a build estatica:
+
+```bash
+npm run build-storybook
+```
+
 ## Exportacoes
 
 Entrada principal:
@@ -95,6 +111,37 @@ Componentes disponiveis na API publica:
 | Controle de renderizacao | `RenderIf`, `RenderCase` |
 | Tema | `ThemePreferencesSelector` |
 
+## ThemePreferencesSelector
+
+`ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.
+
+Contrato minimo:
+
+```tsx
+import { ThemePreferencesSelector, type ThemePreferencesValue } from '@wellingtonhlc/shared-ui';
+
+const value: ThemePreferencesValue = {
+  color: 'indigo',
+  appearance: 'system',
+};
+
+<ThemePreferencesSelector
+  value={value}
+  options={[
+    { key: 'indigo', label: 'Indigo', primary: '#5b5cff' },
+    { key: 'emerald', label: 'Emerald', primary: '#059669' },
+  ]}
+  onChange={setValue}
+/>;
+```
+
+Pontos de validacao:
+
+- O botao de aparencia selecionado deve ficar perceptivelmente destacado sem depender de hover.
+- Opcoes de cor bloqueadas usam `locked` e podem informar `requiredPlan`.
+- Use `showColorSelector={false}` ou `showAppearanceSelector={false}` quando o consumidor precisar exibir apenas uma parte do controle.
+- A story `AppearanceStates` mostra as tres aparencias ja selecionadas para validacao visual rapida.
+
 ## Filter
 
 `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:
 
 | Versao | Data | Tipo | Resumo | Validacao |
 |--------|------|------|--------|-----------|
+| `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`. |
 | `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`. |
 | `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. |
 | `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/ActionPrimitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+BAEpF;AAQD,eAAO,MAAM,qBAAqB,0HA2CjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}
+{"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+BAEpF;AAQD,eAAO,MAAM,qBAAqB,0HA6CjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}

package/dist/components/ActionPrimitives.js

@@ -17,9 +17,10 @@ export const ActionButtonPrimitive = forwardRef(({ children, className, disabled
     const hasText = Boolean(content);
     const isDisabled = disabled || loading;
     return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex cursor-pointer select-none items-center justify-center border font-bold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-150 active:translate-y-px disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] disabled:cursor-not-allowed disabled:opacity-60', variantClasses[variant], 
-        // Botoes com texto: cantos arredondados. Botoes so-icone (IconButtonPrimitive):
-        // circulo por padrao — a forma vem do pacote, nao do consumidor.
-        hasText ? 'min-h-8 gap-1.5 rounded-md px-3 text-[0.8125rem]' : 'size-8 rounded-full p-0', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "whitespace-nowrap", children: content })] }));
+        // Forma visual consistente: cantos arredondados (rounded-md) com e sem texto.
+        // Botoes so-icone (IconButtonPrimitive) ficam quadrados; botoes com texto
+        // recebem padding horizontal. A forma vem do pacote, nao do consumidor.
+        'rounded-md', hasText ? 'min-h-8 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "whitespace-nowrap", children: content })] }));
 });
 ActionButtonPrimitive.displayName = 'ActionButtonPrimitive';
 export const IconButtonPrimitive = forwardRef(({ 'aria-label': ariaLabel, tooltip, ...props }, ref) => (_jsx(ActionButtonPrimitive, { ref: ref, "aria-label": ariaLabel, tooltip: tooltip ?? ariaLabel, ...props })));

package/dist/components/NavCard.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface NavCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Oculta a seta de navegacao a direita. */
+    hideArrow?: boolean;
+}
+/**
+ * Card/botao navegavel generico: titulo, descricao e icone opcionais, com seta a
+ * direita que desliza no hover/focus. Sem regra de dominio — use para atalhos,
+ * itens de listas navegaveis e acessos rapidos.
+ */
+export declare const NavCard: import("react").ForwardRefExoticComponent<NavCardProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=NavCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavCard.d.ts","sourceRoot":"","sources":["../../src/components/NavCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9E,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC1F,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,4GAoCnB,CAAC"}

package/dist/components/NavCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ArrowRightIcon } from 'lucide-react';
+import { cn } from '../utils/cn';
+/**
+ * Card/botao navegavel generico: titulo, descricao e icone opcionais, com seta a
+ * direita que desliza no hover/focus. Sem regra de dominio — use para atalhos,
+ * itens de listas navegaveis e acessos rapidos.
+ */
+export const NavCard = forwardRef(({ className, description, hideArrow = false, icon, title, type = 'button', ...props }, ref) => {
+    return (_jsxs("button", { ref: ref, type: type, className: cn('group border-app-border bg-background hover:bg-surface flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left transition-colors', 'hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] focus-visible:outline-none', className), ...props, children: [icon && (_jsx("span", { className: "text-foreground-muted group-hover:text-brand inline-flex shrink-0 items-center justify-center transition-colors [&_svg]:size-5", children: icon })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground line-clamp-2 text-sm leading-snug font-medium", children: title }), description && (_jsx("span", { className: "text-foreground-muted truncate text-xs", children: description }))] }), !hideArrow && (_jsx(ArrowRightIcon, { "aria-hidden": "true", className: "text-foreground-muted/50 group-hover:text-brand size-4 shrink-0 transition-transform duration-150 group-hover:translate-x-0.5" }))] }));
+});
+NavCard.displayName = 'NavCard';

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

@@ -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"}
+{"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

@@ -29,6 +29,7 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
                                     : option.label }, option.key));
                         }) })] })) : 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;
-                            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));
+                            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-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));
                         }) })] })) : null] }));
 }

package/dist/index.d.ts

@@ -35,4 +35,5 @@ export { ThemePreferencesSelector, type ThemeAppearance, type ThemeColorOption,
 export * from './components/ActionPrimitives';
 export { Card, type CardActionsProps, type CardBodyProps, type CardDensity, type CardDescriptionProps, type CardHeaderProps, type CardProps, type CardToolbarProps, type CardVariant, } from './components/Card';
 export { StatCard, type StatCardProps, type StatCardSize, type StatCardVariant } from './components/StatCard';
+export { NavCard, type NavCardProps } from './components/NavCard';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,KAAK,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC3J,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,wBAAwB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,GACnC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpG,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,KAAK,uBAAuB,EAAE,KAAK,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAClK,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnK,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC1G,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACvG,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,KAAK,iBAAiB,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,EACL,wBAAwB,EACxB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EACL,IAAI,EACJ,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,WAAW,GACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC9G,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -35,3 +35,4 @@ export { ThemePreferencesSelector, } from './components/ThemePreferencesSelector
 export * from './components/ActionPrimitives';
 export { Card, } from './components/Card';
 export { StatCard } from './components/StatCard';
+export { NavCard } from './components/NavCard';

package/dist/styles.css

@@ -657,6 +657,7 @@ h2.react-datepicker__current-month {
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -992,6 +993,12 @@ h2.react-datepicker__current-month {
   .ml-auto {
     margin-left: auto;
   }
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
   .block {
     display: block;
   }
@@ -1460,6 +1467,9 @@ h2.react-datepicker__current-month {
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
@@ -1580,12 +1590,6 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[color-mix\(in_srgb\,var\(--brand\)_44\%\,var\(--app-border\)\)\] {
-    border-color: var(--brand);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,var(--brand) 44%,var(--app-border));
-    }
-  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1634,10 +1638,10 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--app-border) 60%,transparent);
     }
   }
-  .bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,var\(--surface\)\)\] {
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_16\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--brand) 12%,var(--surface));
+      background-color: color-mix(in srgb,var(--brand) 16%,var(--surface));
     }
   }
   .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
@@ -1931,6 +1935,10 @@ h2.react-datepicker__current-month {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -2073,6 +2081,13 @@ h2.react-datepicker__current-month {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     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\)_18\%\,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) 18%,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_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_20\%\,transparent\)\] {
     --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
     @supports (color: color-mix(in lab, red, red)) {
@@ -2249,6 +2264,14 @@ h2.react-datepicker__current-month {
     -webkit-user-select: none;
     user-select: none;
   }
+  .group-hover\:translate-x-0\.5 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: calc(var(--spacing) * 0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .first\:border-l-0 {
     &:first-child {
       border-left-style: var(--tw-border-style);
@@ -3055,6 +3078,12 @@ h2.react-datepicker__current-month {
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\]\:size-5 {
+    & svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&_td\]\:py-2 {
     & td {
       padding-block: calc(var(--spacing) * 2);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",
@@ -38,16 +38,16 @@
         "react-dom": "^18.3.0"
     },
     "devDependencies": {
-        "@storybook/addon-a11y": "^10.4.2",
-        "@storybook/addon-docs": "^10.4.2",
-        "@storybook/react-vite": "^10.4.2",
+        "@storybook/addon-a11y": "^10.4.6",
+        "@storybook/addon-docs": "^10.4.6",
+        "@storybook/react-vite": "^10.4.6",
         "@tailwindcss/postcss": "4.1.10",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "autoprefixer": "^10.5.0",
         "lucide-react": "^0.522.0",
         "postcss": "^8.5.15",
-        "storybook": "^10.4.2",
+        "storybook": "^10.4.6",
         "tailwindcss": "4.1.10",
         "typescript": "~5.8.3",
         "vite": "^8.0.16"