@wellingtonhlc/shared-ui 0.1.16 → 0.22.0

package/README.md

@@ -111,6 +111,22 @@ Componentes disponiveis na API publica:
 | Controle de renderizacao | `RenderIf`, `RenderCase` |
 | Tema | `ThemePreferencesSelector` |
 
+## AppShell.Topbar.Button
+
+Use `AppShell.Topbar.Button` para acoes de icone na barra superior, como notificacoes,
+configuracoes e atalhos globais. O componente reutiliza o mesmo contrato visual dos
+primitivos de acao, mas aplica o tamanho esperado para a topbar.
+
+```tsx
+import { AppShell } from '@wellingtonhlc/shared-ui';
+import { Bell, Settings } from 'lucide-react';
+
+<AppShell.Actions>
+  <AppShell.Topbar.Button icon={<Bell />} tooltip="Notificacoes" />
+  <AppShell.Topbar.Button icon={<Settings />} tooltip="Configuracoes" />
+</AppShell.Actions>
+```
+
 ## ThemePreferencesSelector
 
 `ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.
@@ -210,6 +226,9 @@ Tabela de historico:
 
 | Versao | Data | Tipo | Resumo | Validacao |
 |--------|------|------|--------|-----------|
+| `0.21.0` | 2026-06-17 | Minor pre-v1 | Adiciona stories para `Modal`, `Card`, `PageMessage`, `EmptyState`, `StatCard`, `SelectField`, `TextareaField`, `DateField`, `DecimalField`, `RadioGroup`, `MultiSelectField`, `TabsUnderlined`, `Tooltip`, `CopyableField`, `FieldGroup`, `FieldSkeleton`, `FieldValidationError`, `NavCard`, `Sidebar` e `AppShell`. | `npm run build`; `npm run build-storybook`. |
+| `0.1.17` | 2026-06-16 | Minor pre-v1 | Remove a variante ambigua `default` de `Button`; adiciona variants semanticas `information` e `warning`; `ConfirmationDialog` usa `information`, `question`, `warning` e `destructive` com botao principal na cor da variant; Storybook passou a gerar tokens semanticos de tema. | `npm run build`; `npm run build-storybook`; builds do `EloDesk.CRM` e `EloDesk.CRM.Portal`. |
+| `0.1.16` | 2026-06-16 | Patch | Consolida os ajustes visuais recentes do pacote para consumo no `EloDesk.CRM`. | `npm run build`; `npm run build-storybook`; validacao no `EloDesk.CRM`. |
 | `0.1.15` | 2026-06-16 | Patch | Corrige a hierarquia de z-index de `Modal` e `ConfirmationDialog` para o overlay cobrir sidebar e flyouts. | `npm run build`; `npm run build-storybook`. |
 | `0.1.14` | 2026-06-16 | Minor pre-v1 | Adiciona `icon` e `iconPosition` ao `TextField` e ajusta o offset lateral dos icones internos. | `npm run build`; `npm run build-storybook`. |
 | `0.1.13` | 2026-06-16 | Minor pre-v1 | Refina o visual do `Pagination`, remove botoes circulares e adiciona `size="sm" | "md" | "lg"`. | `npm run build`; `npm run build-storybook`. |

package/dist/components/ActionPrimitives.d.ts

@@ -13,6 +13,7 @@ export interface ActionSeparatorPrimitiveProps {
 }
 export interface ActionButtonPrimitiveProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     children?: ReactNode;
+    highlight?: boolean;
     icon?: ReactNode;
     label?: ReactNode;
     loading?: boolean;

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,0HA6CjC,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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,0HAiDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}

package/dist/components/ActionPrimitives.js

@@ -9,18 +9,18 @@ export function ActionSeparatorPrimitive({ className }) {
 }
 const variantClasses = {
     default: 'border-app-border bg-surface text-foreground-muted 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 hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]',
-    primary: 'border-transparent bg-gradient-to-br from-brand to-brand-hover text-white shadow-[0_18px_32px_-22px_var(--brand-hover)] hover:text-white',
-    danger: 'border-transparent bg-[color-mix(in_srgb,var(--destructive)_12%,var(--surface))] text-red-700 hover:bg-destructive hover:text-white',
+    primary: 'border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] text-brand shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)] hover:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))] hover:text-brand',
+    danger: 'border-[var(--status-danger-border,#f87171)] bg-[color-mix(in_srgb,var(--destructive)_12%,var(--surface))] text-[var(--status-danger-text,#7f1d1d)] hover:border-[var(--destructive)] hover:bg-destructive hover:text-white',
 };
-export const ActionButtonPrimitive = forwardRef(({ children, className, disabled, icon, label, loading = false, tooltip, type = 'button', variant = 'default', ...props }, ref) => {
+export const ActionButtonPrimitive = forwardRef(({ children, className, disabled, highlight = false, icon, label, loading = false, tooltip, type = 'button', variant = 'default', ...props }, ref) => {
     const content = label ?? children;
     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], 
+    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-semibold 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], 
         // 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 })] }));
+        'rounded-md', hasText ? 'min-h-8 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', highlight && variant === 'default' && 'font-bold text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'primary' && 'font-bold text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'danger' && 'font-bold text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', 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/AppShell.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { AppShellActions, AppShellActionsSeparator } from './AppShellActions';
+import { AppShellActions, AppShellActionsSeparator, type AppShellActionButtonProps } from './AppShellActions';
 export type AppShellContentMode = 'default' | 'fluid' | 'fullscreen';
 export type AppShellOverlayVariant = 'default' | 'soft' | 'strong';
 export interface AppShellRootProps {
@@ -24,6 +24,8 @@ interface AppShellSlotProps {
     children: ReactNode;
     className?: string;
 }
+export interface AppShellTopbarButtonProps extends AppShellActionButtonProps {
+}
 export interface AppShellTopbarProps {
     actions?: ReactNode;
     actionsClassName?: string;
@@ -34,6 +36,9 @@ export interface AppShellTopbarProps {
     pageTitle: ReactNode;
     titleContainerClassName?: string;
 }
+export declare const Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement>> & {
+    Button: import("react").ForwardRefExoticComponent<AppShellTopbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
 export interface AppShellMainProps {
     children: ReactNode;
     className?: string;
@@ -51,7 +56,9 @@ export declare const AppShell: {
     ActionsSeparator: typeof AppShellActionsSeparator;
     ContentColumn: import("react").ForwardRefExoticComponent<AppShellSlotProps & import("react").RefAttributes<HTMLDivElement>>;
     WorkArea: import("react").ForwardRefExoticComponent<AppShellSlotProps & import("react").RefAttributes<HTMLDivElement>>;
-    Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement>>;
+    Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement>> & {
+        Button: import("react").ForwardRefExoticComponent<AppShellTopbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    };
     Main: import("react").ForwardRefExoticComponent<AppShellMainProps & import("react").RefAttributes<HTMLElement>>;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAwB,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAEpG,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAUnE,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAcD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAeD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;CAClB;AAsBD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAqCD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqCD,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWpB,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,eAAe,EACf,wBAAwB,EACxB,KAAK,yBAAyB,EAC/B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAUnE,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAcD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAeD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;CAClB;AAsBD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB;CAAG;AAa/E,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAqCD,eAAO,MAAM,MAAM;;CAEjB,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqCD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAWpB,CAAC"}

package/dist/components/AppShell.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, } from 'react';
 import { cn } from '../utils/cn';
-import { AppShellActionButton, AppShellActions, AppShellActionsSeparator } from './AppShellActions';
+import { AppShellActionButton, AppShellActions, AppShellActionsSeparator, } from './AppShellActions';
 const AppShellOverlayContext = createContext('default');
 const overlayVariantClasses = {
     default: 'bg-slate-900/28 backdrop-blur-[2px]',
@@ -24,8 +24,13 @@ const ContentColumn = forwardRef(({ children, className }, ref) => (_jsx("div",
 ContentColumn.displayName = 'AppShell.ContentColumn';
 const WorkArea = forwardRef(({ children, className }, ref) => (_jsx("div", { ref: ref, className: cn('flex min-h-0 min-w-0 flex-1 flex-col-reverse overflow-hidden md:flex-col', className), children: children })));
 WorkArea.displayName = 'AppShell.WorkArea';
-const Topbar = forwardRef(({ actions, actionsClassName, children, className, icon, mobileToggle, pageTitle, titleContainerClassName, }, ref) => (_jsxs("header", { ref: ref, className: cn('border-app-border bg-background-secondary flex min-h-16 items-center justify-between border-b px-4 pr-4 shadow-[0_2px_8px_-2px_color-mix(in_srgb,#000_6%,transparent)] max-md:pl-0', className), role: "banner", children: [_jsxs("div", { className: cn('flex min-w-0 items-center gap-2.5 max-md:gap-3', titleContainerClassName), children: [mobileToggle, icon && _jsx("span", { className: "shrink-0 text-foreground-muted", "aria-hidden": "true", children: icon }), _jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold leading-7 tracking-[-0.015em] text-foreground-muted", children: pageTitle })] }), (children || actions) && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-4', actionsClassName), children: [children, actions] }))] })));
-Topbar.displayName = 'AppShell.Topbar';
+const TopbarButton = forwardRef(({ className, ...props }, ref) => (_jsx(AppShellActionButton, { ref: ref, className: cn('relative size-10 min-h-10 min-w-10', className), ...props })));
+TopbarButton.displayName = 'AppShell.Topbar.Button';
+const TopbarRoot = forwardRef(({ actions, actionsClassName, children, className, icon, mobileToggle, pageTitle, titleContainerClassName, }, ref) => (_jsxs("header", { ref: ref, className: cn('border-app-border bg-background-secondary flex min-h-16 items-center justify-between border-b px-4 pr-4 shadow-[0_2px_8px_-2px_color-mix(in_srgb,#000_6%,transparent)] max-md:pl-0', className), role: "banner", children: [_jsxs("div", { className: cn('flex min-w-0 items-center gap-2.5 max-md:gap-3', titleContainerClassName), children: [mobileToggle, icon && _jsx("span", { className: "shrink-0 text-foreground-muted", "aria-hidden": "true", children: icon }), _jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold leading-7 tracking-[-0.015em] text-foreground-muted", children: pageTitle })] }), (children || actions) && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-4', actionsClassName), children: [children, actions] }))] })));
+TopbarRoot.displayName = 'AppShell.Topbar';
+export const Topbar = Object.assign(TopbarRoot, {
+    Button: TopbarButton,
+});
 const Main = forwardRef(({ children, className, contentPaddingClassName, contentMode = 'default', disableContentPadding = false, scrollable = true, }, ref) => {
     const isFullscreen = contentMode === 'fullscreen';
     return (_jsx("main", { ref: ref, className: cn('flex h-full min-h-0 w-full flex-1 flex-col bg-background', !isFullscreen && 'overflow-x-hidden p-3', contentMode === 'default' && 'flex flex-col gap-3', contentMode === 'fluid' && 'flex flex-col gap-3 overflow-y-hidden', contentMode === 'fullscreen' && 'overflow-hidden p-0', !isFullscreen && !disableContentPadding && contentPaddingClassName, !isFullscreen && (scrollable ? 'overflow-y-auto' : 'overflow-y-hidden'), className), children: children }));

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes } from 'react';
-export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ghost' | 'outline' | 'success' | 'danger' | 'destructive' | 'sidebar';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'information' | 'success' | 'warning' | 'danger' | 'destructive' | 'sidebar';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'wide';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuCD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,aAAa,GACb,SAAS,GACT,SAAS,GACT,QAAQ,GACR,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}

package/dist/components/Button.js

@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn';
 const variantClasses = {
-    default: 'border-app-border bg-surface text-foreground hover:border-[color-mix(in_srgb,var(--foreground-muted)_42%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))]',
-    primary: 'border-transparent bg-[var(--brand)] text-[var(--primary-foreground,#ffffff)] shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--brand)_70%,#000)] hover:bg-[var(--brand-hover,var(--brand))]',
-    secondary: 'border-[color-mix(in_srgb,var(--brand)_28%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] text-[var(--brand)] hover:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))]',
-    ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,transparent)] hover:text-foreground',
-    outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[var(--brand)]',
+    primary: 'border-transparent bg-[var(--brand)] text-[var(--primary-foreground,#ffffff)] shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--brand)_70%,#000)] hover:bg-[var(--brand-hover,var(--brand))] hover:shadow-[0_16px_28px_-18px_color-mix(in_srgb,var(--brand)_80%,#000)] dark:shadow-[0_14px_28px_-20px_color-mix(in_srgb,var(--brand)_86%,#000)]',
+    secondary: 'border-[color-mix(in_srgb,var(--brand)_34%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_12%,var(--surface))] text-[color-mix(in_srgb,var(--brand)_88%,var(--foreground))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_8%,transparent)] hover:border-[color-mix(in_srgb,var(--brand)_48%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:border-[color-mix(in_srgb,var(--brand)_42%,var(--app-border))] dark:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:text-[color-mix(in_srgb,var(--brand)_42%,#fff)] dark:hover:bg-[color-mix(in_srgb,var(--brand)_24%,var(--surface))] dark:hover:text-[color-mix(in_srgb,var(--brand)_30%,#fff)]',
+    ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_14%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
+    outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:border-[color-mix(in_srgb,var(--brand)_54%,var(--app-border))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
+    information: 'border-transparent bg-[var(--status-info-text,#1d4ed8)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-info-text,#1d4ed8)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-info-text,#1d4ed8)_88%,#000)]',
     success: 'border-transparent bg-[var(--status-success-text,#15803d)] text-white hover:bg-[color-mix(in_srgb,var(--status-success-text,#15803d)_88%,#000)]',
+    warning: 'border-transparent bg-[var(--status-warning-text,#92400e)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-warning-text,#92400e)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-warning-text,#92400e)_88%,#000)]',
     danger: 'border-transparent bg-[var(--status-danger-text,#b91c1c)] text-white hover:bg-[color-mix(in_srgb,var(--status-danger-text,#b91c1c)_88%,#000)]',
     destructive: 'border-transparent bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_88%,#000)]',
     sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
@@ -26,7 +27,7 @@ const roundedSizeClasses = {
     lg: 'size-14 min-h-14 min-w-14 p-3 text-base',
     wide: 'min-h-11 min-w-20 w-full px-4 py-2.5 text-sm',
 };
-export const Button = forwardRef(({ children, className, disabled, isLoading = false, isSubmitting = false, minWidth, rounded = false, size = 'md', style, title, tooltip, type = 'button', variant = 'secondary', ...props }, ref) => {
+export const Button = forwardRef(({ children, className, disabled, isLoading = false, isSubmitting = false, minWidth, rounded = false, size = 'md', style, title, tooltip, type = 'button', variant = 'primary', ...props }, ref) => {
     const busy = isLoading || isSubmitting;
     const resolvedSize = rounded ? roundedSizeClasses[size] : sizeClasses[size];
     const ariaBusy = props['aria-busy'] ?? (busy ? true : undefined);

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAkB9D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,SAAiB,EACjB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,+BAeX;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAarE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAavF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAM/E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAMtF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAMvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BASvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BASpF;AAED,eAAO,MAAM,IAAI;;;;;;;;;CAShB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAyB9D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,SAAiB,EACjB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,+BAeX;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAarE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAavF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAM/E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAMtF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAMvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BASvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BASpF;AAED,eAAO,MAAM,IAAI;;;;;;;;;CAShB,CAAC"}

package/dist/components/Card.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../utils/cn';
 function getCardVariantClass(variant) {
-    if (variant === 'subtle')
-        return 'bg-surface/60';
+    if (variant === 'subtle') {
+        return 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] shadow-none';
+    }
+    if (variant === 'surface') {
+        return 'bg-surface shadow-[inset_0_1px_0_color-mix(in_srgb,#fff_40%,transparent)]';
+    }
     if (variant === 'elevated') {
-        return 'bg-surface shadow-[0_12px_32px_rgba(15,23,42,0.06)]';
+        return 'bg-surface shadow-[0_16px_36px_-24px_color-mix(in_srgb,#000_50%,transparent)]';
     }
-    return 'bg-surface';
+    return 'bg-background-secondary shadow-sm';
 }
 function getContentDensityClass(density) {
     if (density === 'none')

package/dist/components/ConfirmationDialog.d.ts

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from 'react';
 import { type ButtonProps } from './Button';
-export type ConfirmationDialogVariant = 'default' | 'question' | 'destructive';
+export type ConfirmationDialogVariant = 'information' | 'question' | 'warning' | 'destructive';
+export type ConfirmationDialogVariantInput = ConfirmationDialogVariant | 'default';
 export type ConfirmationDialogButtonVariant = 'cancel' | 'confirm' | 'danger' | 'success';
 export interface ConfirmationDialogAction extends Omit<ButtonProps, 'children' | 'onClick'> {
     children?: ReactNode;
@@ -18,7 +19,7 @@ export interface ConfirmationDialogProps {
     onConfirm?: () => Promise<void> | void;
     open: boolean;
     title?: ReactNode;
-    variant?: ConfirmationDialogVariant;
+    variant?: ConfirmationDialogVariantInput;
 }
 export interface ConfirmationDialogRootProps {
     children: ReactNode;
@@ -27,7 +28,7 @@ export interface ConfirmationDialogRootProps {
     onOpenChange: (open: boolean) => void;
     open: boolean;
     overlayClassName?: string;
-    variant?: ConfirmationDialogVariant;
+    variant?: ConfirmationDialogVariantInput;
 }
 export interface ConfirmationDialogButtonProps extends Omit<ButtonProps, 'children' | 'onClick' | 'variant'> {
     buttonVariant?: ButtonProps['variant'];

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationDialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/ConfirmationDialog.js

@@ -1,32 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { AlertTriangleIcon, HelpCircleIcon, InfoIcon, XIcon } from 'lucide-react';
+import { AlertCircleIcon, AlertTriangleIcon, HelpCircleIcon, InfoIcon, XIcon } from 'lucide-react';
 import { cn } from '../utils/cn';
 import { Button as BaseButton } from './Button';
 const ConfirmationDialogContext = createContext(null);
+function resolveVariant(variant) {
+    return variant === 'default' ? 'information' : variant;
+}
 const dialogVariantStyles = {
-    default: {
+    information: {
         icon: InfoIcon,
-        iconClassName: 'text-brand',
-        titleClassName: 'text-foreground',
+        iconClassName: 'text-[color-mix(in_srgb,var(--status-info-text,#2563eb)_76%,var(--foreground))]',
+        titleClassName: 'text-[color-mix(in_srgb,var(--status-info-text,#2563eb)_76%,var(--foreground))]',
     },
     question: {
         icon: HelpCircleIcon,
-        iconClassName: 'text-foreground-muted',
-        titleClassName: 'text-foreground',
+        iconClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
+        titleClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
     },
-    destructive: {
+    warning: {
         icon: AlertTriangleIcon,
-        iconClassName: 'text-destructive',
-        titleClassName: 'text-foreground',
+        iconClassName: 'text-[color-mix(in_srgb,var(--status-warning-text,#d97706)_76%,var(--foreground))]',
+        titleClassName: 'text-[color-mix(in_srgb,var(--status-warning-text,#d97706)_76%,var(--foreground))]',
+    },
+    destructive: {
+        icon: AlertCircleIcon,
+        iconClassName: 'text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))]',
+        titleClassName: 'text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))]',
     },
 };
 const buttonVariantDefaults = {
     cancel: { label: 'Cancelar', buttonVariant: 'outline' },
-    confirm: { label: 'Confirmar', buttonVariant: 'default' },
+    confirm: { label: 'Confirmar', buttonVariant: 'primary' },
     danger: { label: 'Não', buttonVariant: 'outline' },
-    success: { label: 'Sim', buttonVariant: 'default' },
+    success: { label: 'Sim', buttonVariant: 'primary' },
+};
+const confirmButtonVariantByDialog = {
+    information: 'information',
+    question: 'primary',
+    warning: 'warning',
+    destructive: 'destructive',
 };
 function useConfirmationDialog() {
     const context = useContext(ConfirmationDialogContext);
@@ -35,9 +49,10 @@ function useConfirmationDialog() {
     }
     return context;
 }
-function Root({ children, className, closeOnEscape = true, onOpenChange, open, overlayClassName, variant = 'default', }) {
+function Root({ children, className, closeOnEscape = true, onOpenChange, open, overlayClassName, variant = 'information', }) {
     const titleId = useId();
     const descriptionId = useId();
+    const resolvedVariant = resolveVariant(variant);
     const [submittingId, setSubmittingId] = useState(null);
     const [focusedId, setFocusedId] = useState(null);
     const buttonRefs = useRef({});
@@ -130,8 +145,8 @@ function Root({ children, className, closeOnEscape = true, onOpenChange, open, o
         setFocusedId,
         submittingId,
         titleId,
-        variant,
-    }), [descriptionId, focusedId, isBusy, submittingId, titleId, variant]);
+        variant: resolvedVariant,
+    }), [descriptionId, focusedId, isBusy, resolvedVariant, submittingId, titleId]);
     if (!open) {
         return null;
     }
@@ -160,11 +175,14 @@ function Footer({ children, className }) {
 }
 function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 100, onClick, size = 'sm', submit = false, variant = 'confirm', ...props }) {
     const id = useId();
-    const { focusedId, isBusy, registerButton, runAction, setFocusedId, submittingId } = useConfirmationDialog();
+    const { focusedId, isBusy, registerButton, runAction, setFocusedId, submittingId, variant: dialogVariant, } = useConfirmationDialog();
     const defaults = buttonVariantDefaults[variant];
     const { buttonVariant, className, onBlur, onFocus, style, ...buttonProps } = props;
     const isSubmitting = submittingId === id;
     const isFocused = focusedId === id;
+    const isMainAction = variant === 'confirm' || variant === 'success';
+    const resolvedButtonVariant = buttonVariant
+        ?? (isMainAction ? confirmButtonVariantByDialog[dialogVariant] : defaults.buttonVariant);
     function handleClick() {
         void runAction(id, onClick, submit, closeOnSuccess);
     }
@@ -176,7 +194,7 @@ function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 1
         setFocusedId(null);
         onBlur?.(event);
     }
-    return (_jsx(BaseButton, { ...buttonProps, ref: (element) => registerButton(id, element), disabled: disabled || (isBusy && !isSubmitting), isSubmitting: isSubmitting, minWidth: minWidth, onBlur: handleBlur, onClick: handleClick, onFocus: handleFocus, size: size, variant: buttonVariant ?? defaults.buttonVariant, className: cn('h-9 min-h-9 rounded-md px-3 py-0 text-sm leading-none', 'focus:outline-none focus-visible:outline-none', className), style: {
+    return (_jsx(BaseButton, { ...buttonProps, ref: (element) => registerButton(id, element), disabled: disabled || (isBusy && !isSubmitting), isSubmitting: isSubmitting, minWidth: minWidth, onBlur: handleBlur, onClick: handleClick, onFocus: handleFocus, size: size, variant: resolvedButtonVariant, className: cn('h-9 min-h-9 rounded-md px-3 py-0 text-sm leading-none', 'focus:outline-none focus-visible:outline-none', className), style: {
             ...style,
             ...(isFocused
                 ? {
@@ -185,7 +203,7 @@ function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 1
                 : {}),
         }, children: children ?? label ?? defaults.label }));
 }
-function ConfirmationDialogSimple({ actions, cancelLabel = 'Não', children, className, confirmLabel = 'Sim', description, onClose, onConfirm, open, title = 'Tem certeza?', variant = 'default', }) {
+function ConfirmationDialogSimple({ actions, cancelLabel = 'Não', children, className, confirmLabel = 'Sim', description, onClose, onConfirm, open, title = 'Tem certeza?', variant = 'information', }) {
     function handleOpenChange(nextOpen) {
         if (!nextOpen) {
             onClose();

package/dist/components/EmptyState.d.ts

@@ -6,8 +6,9 @@ export interface EmptyStateProps {
     icon?: ReactNode;
     showIcon?: boolean;
     variant?: EmptyStateVariant;
+    withMargin?: boolean;
     className?: string;
     children?: ReactNode;
 }
-export declare function EmptyState({ title, description, icon, showIcon, variant, className, children, }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ title, description, icon, showIcon, variant, withMargin, className, children, }: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=EmptyState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA4BjB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,UAAkB,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA6BjB"}

package/dist/components/EmptyState.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from 'react';
 import { cn } from '../utils/cn';
-export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', className, children, }) {
+export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', withMargin = false, className, children, }) {
     const isCompact = variant === 'compact';
     const styledIcon = isValidElement(icon)
         ? cloneElement(icon, {
             className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
         })
         : icon;
-    return (_jsx("div", { className: cn('m-2 flex min-h-0 flex-1 items-center justify-center rounded-[1.5rem] border border-dashed rounded rounded-md bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'px-5 py-10', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
+    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
 }
 function DefaultEmptyIcon() {
     return (_jsx("svg", { "aria-hidden": "true", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.8", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 8.75 6.2 5.4A2 2 0 0 1 7.82 4.6h8.36a2 2 0 0 1 1.62.8l2.45 3.35M3.75 8.75v6.9A3.75 3.75 0 0 0 7.5 19.4h9a3.75 3.75 0 0 0 3.75-3.75v-6.9M3.75 8.75h4.92a1.5 1.5 0 0 1 1.34.83l.28.56a1.5 1.5 0 0 0 1.34.83h.74a1.5 1.5 0 0 0 1.34-.83l.28-.56a1.5 1.5 0 0 1 1.34-.83h4.92" }) }));

package/dist/components/FieldSkeleton.js

@@ -14,7 +14,7 @@ const controlSizeClasses = {
 };
 export const FieldSkeleton = ({ isLoading, hasLabel = true, labelPosition = 'top', size = 'md', className, children, ...divProps }) => {
     const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
-    const content = (_jsxs(_Fragment, { children: [hasLabel && (_jsx("div", { className: cn('block rounded bg-gray-300 dark:bg-gray-700', labelSizeClasses[size], isHorizontal ? 'mb-0 shrink-0' : 'mb-1') })), _jsx("div", { className: cn('w-full animate-pulse rounded-md bg-gray-300 dark:bg-gray-700', controlSizeClasses[size]) })] }));
+    const content = (_jsxs(_Fragment, { children: [hasLabel && (_jsx("div", { className: cn('block rounded bg-[color-mix(in_srgb,var(--foreground-muted)_18%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_30%,var(--surface))]', labelSizeClasses[size], isHorizontal ? 'mb-0 shrink-0' : 'mb-1') })), _jsx("div", { className: cn('w-full animate-pulse rounded-md bg-[color-mix(in_srgb,var(--foreground-muted)_16%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_28%,var(--surface))]', controlSizeClasses[size]) })] }));
     if (isLoading) {
         return (_jsx("div", { className: cn(isHorizontal ? 'flex items-center gap-2' : 'flex flex-col gap-1', labelPosition === 'right' && 'flex-row-reverse', className), ...divProps, children: content }));
     }

package/dist/components/Modal.d.ts

@@ -7,6 +7,7 @@ export interface ModalRootProps extends React.ComponentProps<typeof DialogPrimit
     size?: ModalSize;
     offset?: number;
     centered?: boolean;
+    density?: ModalDensity;
     showCloseButton?: boolean;
     variant?: ModalVariant;
     className?: string;
@@ -26,7 +27,7 @@ declare function createTrigger(trigger: React.ReactNode, options: {
     open: boolean;
     onOpen: () => void;
 }): string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
-declare function ModalRoot({ allowExternalFocus, centered, children, className, overlayClassName, offset, showCloseButton, size, variant, ...props }: ModalRootProps): React.JSX.Element;
+declare function ModalRoot({ allowExternalFocus, centered, children, className, density, overlayClassName, offset, showCloseButton, size, variant, ...props }: ModalRootProps): React.JSX.Element;
 declare function ModalHeader({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;
 declare function ModalBody({ className, density, overflowVisible, scrollable, ...props }: ModalBodyProps): React.JSX.Element;
 declare function ModalFooter({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgDD,iBAAS,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,4UAW9F;AAED,iBAAS,SAAS,CAAC,EACjB,kBAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,eAAsB,EACtB,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,qBAoDhB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBActG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAc3H;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAcrG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAE9F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAE1G;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgDD,iBAAS,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,4UAW9F;AAED,iBAAS,SAAS,CAAC,EACjB,kBAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,gBAAgB,EAChB,MAAM,EACN,eAAsB,EACtB,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,qBAsDhB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAetG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAc3H;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAcrG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAE9F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAE1G;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAC"}

package/dist/components/Modal.js

@@ -47,21 +47,21 @@ function createTrigger(trigger, options) {
         'data-state': options.open ? 'open' : 'closed',
     });
 }
-function ModalRoot({ allowExternalFocus = false, centered = false, children, className, overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
+function ModalRoot({ allowExternalFocus = false, centered = false, children, className, density = 'default', overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
     const hasFooter = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ModalFooter);
     return (_jsx(DialogPrimitive.Root, { ...props, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', overlayClassName) }), _jsxs(DialogPrimitive.Content, { onFocusOutside: allowExternalFocus ? (event) => event.preventDefault() : undefined, style: {
                         width: widthVariants[size],
                         ...(!centered && offset ? { top: `${offset}px` } : {}),
-                    }, className: cn('fixed z-[110] grid max-h-[95vh] gap-4', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl duration-200', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border p-6 shadow-lg', variant === 'elevated' && 'border-app-border bg-surface text-foreground border p-6 shadow-2xl', centered ? 'left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2' : 'left-[50%] top-[2.5%] -translate-x-1/2', sizeVariants[size], minHeightVariants[size], 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: cn('absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md', 'text-foreground-muted hover:bg-background hover:text-foreground cursor-pointer transition-colors', 'focus:ring-brand/50 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'), children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Fechar" })] })) : null] })] }) }));
+                    }, className: cn('fixed z-[110] grid max-h-[95vh] gap-4', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl duration-200', density === 'default' && 'gap-4 p-6', density === 'compact' && 'gap-2.5 p-4', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border shadow-lg', variant === 'elevated' && 'border-app-border bg-surface text-foreground border shadow-2xl', centered ? 'left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2' : 'left-[50%] top-[2.5%] -translate-x-1/2', sizeVariants[size], minHeightVariants[size], 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: cn('absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md', 'text-foreground-muted hover:bg-background hover:text-foreground cursor-pointer transition-colors', 'focus:ring-brand/50 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'), children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Fechar" })] })) : null] })] }) }));
 }
 function ModalHeader({ className, density = 'default', separated = false, ...props }) {
-    return (_jsx("div", { "data-slot": "modal-header", className: cn('flex flex-col text-center sm:text-left', density === 'default' && 'gap-1', density === 'compact' && 'gap-0.5', separated && 'border-app-border border-b pb-3', className), ...props }));
+    return (_jsx("div", { "data-slot": "modal-header", className: cn('flex flex-col text-center sm:text-left', density === 'default' && 'gap-1.5 [&_[data-slot=modal-description]]:text-sm [&_[data-slot=modal-title]]:text-lg', density === 'compact' && 'gap-0.5 [&_[data-slot=modal-description]]:text-xs [&_[data-slot=modal-title]]:text-base', separated && density === 'default' && 'border-app-border border-b pb-4', separated && density === 'compact' && 'border-app-border border-b pb-2', className), ...props }));
 }
 function ModalBody({ className, density = 'default', overflowVisible = false, scrollable = false, ...props }) {
-    return (_jsx("div", { "data-slot": "modal-body", className: cn('flex min-h-0 flex-col text-sm', density === 'default' && 'space-y-4', density === 'compact' && 'space-y-3', overflowVisible ? 'overflow-visible' : scrollable ? 'overflow-y-auto py-0.5 pr-1' : 'overflow-visible', className), ...props }));
+    return (_jsx("div", { "data-slot": "modal-body", className: cn('flex min-h-0 flex-col', density === 'default' && 'space-y-5 text-sm leading-6', density === 'compact' && 'space-y-2 text-xs leading-5', overflowVisible ? 'overflow-visible' : scrollable ? 'overflow-y-auto py-0.5 pr-1' : 'overflow-visible', className), ...props }));
 }
 function ModalFooter({ className, density = 'default', separated = true, ...props }) {
-    return (_jsx("div", { "data-slot": "modal-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', density === 'default' && 'mt-2 pt-4', density === 'compact' && 'mt-1 pt-3', separated && 'border-app-border border-t', className), ...props }));
+    return (_jsx("div", { "data-slot": "modal-footer", className: cn('flex flex-col-reverse sm:flex-row sm:justify-end', density === 'default' && 'mt-3 gap-2.5 pt-5', density === 'compact' && 'mt-0 gap-1.5 pt-2', separated && 'border-app-border border-t', className), ...props }));
 }
 function ModalTitle({ className, ...props }) {
     return _jsx(DialogPrimitive.Title, { "data-slot": "modal-title", className: cn('text-foreground flex items-center gap-2 text-lg font-semibold leading-none tracking-tight', className), ...props });

package/dist/components/NavCard.js

@@ -8,6 +8,6 @@ import { cn } from '../utils/cn';
  * 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" }))] }));
+    return (_jsxs("button", { ref: ref, type: type, className: cn('group border-app-border bg-surface flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left transition-[background-color,border-color,box-shadow]', 'hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_7%,var(--surface))] 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-[color-mix(in_srgb,var(--brand)_68%,var(--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/PageMessage.js

@@ -3,28 +3,28 @@ import { AlertCircleIcon, AlertTriangleIcon, CheckCircle2Icon, InfoIcon, } from
 import { cn } from '../utils/cn';
 const variantClasses = {
     default: {
-        container: 'border-app-border bg-surface text-foreground',
-        icon: 'text-foreground-muted',
+        container: 'app-page-message--default',
+        icon: 'app-page-message__icon--default',
         defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
     },
     info: {
-        container: 'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-100',
-        icon: 'text-blue-600 dark:text-blue-300',
+        container: 'app-page-message--info',
+        icon: 'app-page-message__icon--info',
         defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
     },
     success: {
-        container: 'border-emerald-300 bg-emerald-50 text-emerald-800 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-100',
-        icon: 'text-emerald-600 dark:text-emerald-300',
+        container: 'app-page-message--success',
+        icon: 'app-page-message__icon--success',
         defaultIcon: _jsx(CheckCircle2Icon, { className: "size-4" }),
     },
     warning: {
-        container: 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100',
-        icon: 'text-amber-600 dark:text-amber-300',
+        container: 'app-page-message--warning',
+        icon: 'app-page-message__icon--warning',
         defaultIcon: _jsx(AlertTriangleIcon, { className: "size-4" }),
     },
     danger: {
-        container: 'border-red-300 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-100',
-        icon: 'text-red-600 dark:text-red-300',
+        container: 'app-page-message--danger',
+        icon: 'app-page-message__icon--danger',
         defaultIcon: _jsx(AlertCircleIcon, { className: "size-4" }),
     },
 };
@@ -32,5 +32,5 @@ export function PageMessage({ children, className, icon, message, title, variant
     const variantStyle = variantClasses[variant];
     const resolvedIcon = icon === false ? null : icon ?? variantStyle.defaultIcon;
     const content = children ?? message;
-    return (_jsxs("div", { className: cn('flex min-w-0 items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-sm', variantStyle.container, className), children: [resolvedIcon ? (_jsx("span", { className: cn('mt-0.5 shrink-0', variantStyle.icon), children: resolvedIcon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5", children: title }) : null, content ? _jsx("div", { className: cn('leading-5', title ? 'mt-0.5' : undefined), children: content }) : null] })] }));
+    return (_jsxs("div", { className: cn('app-page-message flex min-w-0 items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-sm', variantStyle.container, className), children: [resolvedIcon ? (_jsx("span", { className: cn('mt-0.5 shrink-0', variantStyle.icon), children: resolvedIcon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5", children: title }) : null, content ? _jsx("div", { className: cn('leading-5', title ? 'mt-0.5' : undefined), children: content }) : null] })] }));
 }