@wellingtonhlc/shared-ui 0.27.1 → 0.29.1

package/README.md

@@ -168,10 +168,32 @@ import { cn } from '@wellingtonhlc/shared-ui/utils/cn';
 Estilos:
 
 ```tsx
-import '@wellingtonhlc/shared-ui/styles.css';
-```
-
-Preset Tailwind:
+import '@wellingtonhlc/shared-ui/styles.css';
+```
+
+### Foundations e tokens
+
+`styles.css` define os tokens semânticos consumidos pelos componentes. Prefira sempre
+esses tokens a valores locais:
+
+- cores de superfície, texto, borda, marca e estados (`--background`, `--surface`,
+  `--brand`, `--status-*-*`);
+- tipografia (`--font-family-*`, `--font-size-*`, `--line-height-*`);
+- espaçamento (`--space-*`);
+- forma e elevação (`--radius-*`, `--shadow-*`);
+- movimento (`--duration-*`).
+
+O Storybook documenta as escalas em `Foundations` e organiza os exemplos públicos em
+`Components`, por função. Consumidores podem sobrescrever tokens de tema, mas componentes
+não devem introduzir hexadecimais, sombras ou escalas paralelas.
+
+O tema padrão usa azul como identidade de marca (`--brand`/`--primary`). No tema claro,
+Sidebar e Top Bar usam `--surface`; no tema escuro, usam `--background-secondary`, a mesma
+superfície de `Page.Actions`. `TabsUnderlined` possui um token próprio (`--tabs-background`)
+para manter contraste entre abas selecionadas e não selecionadas mesmo quando as superfícies
+do consumidor possuem a mesma cor.
+
+Preset Tailwind:
 
 ```ts
 import sharedUiPreset from '@wellingtonhlc/shared-ui/tailwind-preset';
@@ -249,13 +271,22 @@ primitivos de acao, mas aplica o tamanho esperado para a topbar.
 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>
-```
-
-## TabsUnderlined
+<AppShell.Actions>
+  <AppShell.Topbar.Button icon={<Bell />} tooltip="Notificacoes" />
+  <AppShell.Topbar.Button icon={<Settings />} tooltip="Configuracoes" />
+</AppShell.Actions>
+```
+
+## Sidebar
+
+Use `Sidebar.ActionButton`, `Sidebar.SubActionButton` e `Sidebar.NavGroup` para navegação.
+Não use variantes de `Button` para simular itens do menu. O botão sanduíche é fornecido por
+`Sidebar.ToggleButton` e compartilha os mesmos estados de hover e foco dos itens principais.
+
+No modo compacto, o Sidebar reserva um slot estável para cada ícone. Labels e chevrons são
+revelados durante a expansão sem deslocar o ícone ou provocar layout shift.
+
+## TabsUnderlined
 
 `TabsUnderlined` renderiza abas sublinhadas com conteudo controlado ou nao controlado.
 As abas ja possuem tamanho minimo padrao e padding horizontal para comportar labels
@@ -287,15 +318,15 @@ Contrato minimo:
 ```tsx
 import { ThemePreferencesSelector, type ThemePreferencesValue } from '@wellingtonhlc/shared-ui';
 
-const value: ThemePreferencesValue = {
-  color: 'indigo',
+const value: ThemePreferencesValue = {
+  color: 'ocean',
   appearance: 'system',
 };
 
 <ThemePreferencesSelector
   value={value}
   options={[
-    { key: 'indigo', label: 'Indigo', primary: '#5b5cff' },
+    { key: 'ocean', label: 'Ocean', primary: '#2563eb' },
     { key: 'emerald', label: 'Emerald', primary: '#059669' },
   ]}
   onChange={setValue}

package/dist/components/ActionBar.js

@@ -9,8 +9,8 @@ function Separator({ className }) {
 }
 const variantClasses = {
     default: 'text-foreground-muted hover:bg-background hover:text-foreground data-[state=open]:bg-background data-[state=open]:text-foreground',
-    primary: 'text-amber-600 hover:bg-[color-mix(in_srgb,#facc15_14%,transparent)] hover:text-amber-700 data-[state=open]:bg-[color-mix(in_srgb,#facc15_14%,transparent)] data-[state=open]:text-amber-700',
-    danger: 'text-red-600 hover:bg-[color-mix(in_srgb,var(--destructive)_12%,transparent)] hover:text-red-700 data-[state=open]:bg-[color-mix(in_srgb,var(--destructive)_12%,transparent)] data-[state=open]:text-red-700',
+    primary: 'text-[var(--status-warning-icon)] hover:bg-[var(--status-warning-bg)] hover:text-[var(--status-warning-text)] data-[state=open]:bg-[var(--status-warning-bg)] data-[state=open]:text-[var(--status-warning-text)]',
+    danger: 'text-[var(--status-danger-icon)] hover:bg-[var(--status-danger-bg)] hover:text-[var(--status-danger-text)] data-[state=open]:bg-[var(--status-danger-bg)] data-[state=open]:text-[var(--status-danger-text)]',
 };
 const shapeClasses = {
     icon: 'size-8 p-0',
@@ -19,7 +19,7 @@ const shapeClasses = {
 const Button = forwardRef(({ className, disabled = false, highlight = false, icon, label, loading = false, tooltip, type = 'button', variant = 'default', ...props }, ref) => {
     const resolvedVariant = highlight ? 'primary' : variant;
     const tooltipText = tooltip ?? label ?? props['aria-label'];
-    return (_jsxs("button", { ref: ref, ...props, type: type, disabled: disabled || loading, "aria-label": props['aria-label'] ?? tooltipText, title: tooltipText, className: cn('inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md border-0 bg-transparent font-semibold transition-[background-color,color,box-shadow,opacity] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:cursor-not-allowed disabled:opacity-45', label ? shapeClasses.labeled : shapeClasses.icon, variantClasses[resolvedVariant], loading && 'cursor-wait opacity-75', className), children: [_jsx("span", { className: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }), label && _jsx("span", { className: "max-w-30 overflow-hidden text-ellipsis whitespace-nowrap max-sm:hidden", children: label })] }));
+    return (_jsxs("button", { ref: ref, ...props, type: type, disabled: disabled || loading, "aria-label": props['aria-label'] ?? tooltipText, title: tooltipText, className: cn('inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md border-0 bg-transparent font-semibold transition-[background-color,color,box-shadow,opacity] duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:cursor-not-allowed disabled:opacity-45', label ? shapeClasses.labeled : shapeClasses.icon, variantClasses[resolvedVariant], loading && 'cursor-wait opacity-75', className), children: [_jsx("span", { className: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }), label && _jsx("span", { className: "max-w-30 overflow-hidden text-ellipsis whitespace-nowrap max-sm:hidden", children: label })] }));
 });
 Button.displayName = 'ActionBar.Button';
 export const ActionBar = {

package/dist/components/ActionPrimitives.js

@@ -8,19 +8,19 @@ export function ActionSeparatorPrimitive({ className }) {
     return (_jsx("span", { "aria-hidden": "true", "data-action-separator": "true", className: cn('bg-app-border min-h-7 w-px shrink-0 self-stretch rounded-full', 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-[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',
+    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-[var(--shadow-action)]',
+    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-[var(--shadow-action)] hover:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))] hover:text-brand',
+    danger: 'border-[var(--status-danger-border)] bg-[var(--status-danger-bg)] text-[var(--status-danger-text)] hover:border-[var(--destructive)] hover:bg-destructive hover:text-[var(--on-solid)]',
 };
 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 min-w-0 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], 
+    return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex min-w-0 cursor-pointer select-none items-center justify-center border font-semibold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-[var(--duration-fast)] 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 max-w-44 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: "min-w-0 max-w-full truncate", children: content })] }));
+        'rounded-md', hasText ? 'min-h-8 max-w-44 gap-1.5 px-3 text-[length:var(--font-size-compact)]' : '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: "min-w-0 max-w-full truncate", 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.js

@@ -4,9 +4,9 @@ import { cn } from '../utils/cn';
 import { AppShellActionButton, AppShellActions, AppShellActionsSeparator, } from './AppShellActions';
 const AppShellOverlayContext = createContext('default');
 const overlayVariantClasses = {
-    default: 'bg-slate-900/28 backdrop-blur-[2px]',
-    soft: 'bg-slate-900/18 backdrop-blur-[1.5px]',
-    strong: 'bg-slate-900/42 backdrop-blur-[3px]',
+    default: 'bg-[var(--overlay-navigation)] backdrop-blur-[var(--backdrop-blur-sm)]',
+    soft: 'bg-[var(--overlay-navigation-soft)] backdrop-blur-[var(--backdrop-blur-xs)]',
+    strong: 'bg-[var(--overlay-navigation-strong)] backdrop-blur-[var(--backdrop-blur-md)]',
 };
 const Root = forwardRef(({ bannerSlot, children, className, overlayVariant = 'default' }, ref) => (_jsx(AppShellOverlayContext.Provider, { value: overlayVariant, children: _jsxs("div", { ref: ref, className: cn('flex h-screen flex-col', className), children: [bannerSlot, children] }) })));
 Root.displayName = 'AppShell.Root';
@@ -17,7 +17,7 @@ const Overlay = forwardRef(({ className, label = 'Fechar menu lateral', onClick,
     const resolvedVariant = variant ?? inheritedVariant;
     if (!visible)
         return null;
-    return (_jsx("button", { ref: ref, type: "button", "aria-label": label, className: cn('fixed inset-0 z-[29] cursor-pointer border-0', overlayVariantClasses[resolvedVariant], className), onClick: onClick }));
+    return (_jsx("button", { ref: ref, type: "button", "aria-label": label, className: cn('fixed inset-0 z-[var(--z-navigation-overlay)] cursor-pointer border-0', overlayVariantClasses[resolvedVariant], className), onClick: onClick }));
 });
 Overlay.displayName = 'AppShell.Overlay';
 const ContentColumn = forwardRef(({ children, className }, ref) => (_jsx("div", { ref: ref, className: cn('flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden', className), children: children })));
@@ -26,7 +26,7 @@ const WorkArea = forwardRef(({ children, className }, ref) => (_jsx("div", { ref
 WorkArea.displayName = 'AppShell.WorkArea';
 const TopbarButton = forwardRef(({ className, ...props }, ref) => (_jsx(AppShellActionButton, { ref: ref, className: cn('relative size-10 min-h-10 min-w-10 !rounded-full', 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] }))] })));
+const TopbarRoot = forwardRef(({ actions, actionsClassName, children, className, icon, mobileToggle, pageTitle, titleContainerClassName, }, ref) => (_jsxs("header", { ref: ref, className: cn('border-app-border bg-[var(--topbar-background)] flex min-h-16 items-center justify-between border-b px-4 pr-4 shadow-[var(--shadow-topbar)] 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-[var(--letter-spacing-title)] 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,

package/dist/components/Badge.js

@@ -13,10 +13,10 @@ const variantAlias = {
 const variantClasses = {
     default: 'border-[color-mix(in_srgb,var(--foreground-muted)_42%,var(--app-border))] bg-[color-mix(in_srgb,var(--foreground-muted)_14%,var(--surface))] text-foreground',
     primary: 'border-[color-mix(in_srgb,var(--brand)_40%,transparent)] bg-[color-mix(in_srgb,var(--brand)_14%,var(--surface))] text-[var(--brand)]',
-    success: 'border-[var(--status-success-border,#86efac)] bg-[var(--status-success-bg,rgba(220,252,231,0.8))] text-[var(--status-success-text,#15803d)]',
-    warning: 'border-[var(--status-warning-border,#fcd34d)] bg-[var(--status-warning-bg,rgba(254,243,199,0.8))] text-[var(--status-warning-text,#92400e)]',
-    info: 'border-[var(--status-info-border,#93c5fd)] bg-[var(--status-info-bg,rgba(219,234,254,0.8))] text-[var(--status-info-text,#1d4ed8)]',
-    danger: 'border-[var(--status-danger-border,#fca5a5)] bg-[var(--status-danger-bg,rgba(254,202,202,0.8))] text-[var(--status-danger-text,#b91c1c)]',
+    success: 'border-[var(--status-success-border)] bg-[var(--status-success-bg)] text-[var(--status-success-text)]',
+    warning: 'border-[var(--status-warning-border)] bg-[var(--status-warning-bg)] text-[var(--status-warning-text)]',
+    info: 'border-[var(--status-info-border)] bg-[var(--status-info-bg)] text-[var(--status-info-text)]',
+    danger: 'border-[var(--status-danger-border)] bg-[var(--status-danger-bg)] text-[var(--status-danger-text)]',
     muted: 'border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--surface))] text-foreground-muted',
 };
 const sizeClasses = {

package/dist/components/Banner.js

@@ -4,10 +4,10 @@ import { X } from 'lucide-react';
 import { Button } from './Button';
 import { cn } from '../utils/cn';
 const variantStyles = {
-    info: 'border-[color-mix(in_srgb,#60a5fa_45%,var(--app-border))] bg-[color-mix(in_srgb,#3b82f6_16%,var(--background-secondary))] text-[var(--status-info-text)]',
-    warning: 'border-[color-mix(in_srgb,#fbbf24_52%,var(--app-border))] bg-[color-mix(in_srgb,#f59e0b_16%,var(--background-secondary))] text-[var(--status-warning-text)]',
-    critical: 'border-[color-mix(in_srgb,#f87171_52%,var(--app-border))] bg-[color-mix(in_srgb,#ef4444_16%,var(--background-secondary))] text-[var(--status-danger-text)]',
-    success: 'border-[color-mix(in_srgb,#34d399_45%,var(--app-border))] bg-[color-mix(in_srgb,#10b981_16%,var(--background-secondary))] text-[var(--status-success-text)]',
+    info: 'border-[var(--status-info-border)] bg-[var(--status-info-bg)] text-[var(--status-info-text)]',
+    warning: 'border-[var(--status-warning-border)] bg-[var(--status-warning-bg)] text-[var(--status-warning-text)]',
+    critical: 'border-[var(--status-danger-border)] bg-[var(--status-danger-bg)] text-[var(--status-danger-text)]',
+    success: 'border-[var(--status-success-border)] bg-[var(--status-success-bg)] text-[var(--status-success-text)]',
 };
 const sizeStyles = {
     sm: 'min-h-10 px-3 py-2 text-sm',
@@ -25,5 +25,5 @@ export function Banner({ variant = 'info', size = 'md', closable = true, onClose
     }
     if (!visible)
         return null;
-    return (_jsxs("div", { className: cn('relative flex w-full items-center border shadow-sm', variantStyles[variant], sizeStyles[size], className), children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-2 text-center", children: children }), closable ? (_jsx(Button, { variant: "ghost", size: "xs", rounded: true, "aria-label": "Fechar banner", className: "absolute top-1/2 right-2 -translate-y-1/2 text-current hover:bg-black/10 dark:hover:bg-white/10", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })) : null] }));
+    return (_jsxs("div", { className: cn('relative flex w-full items-center border shadow-sm', variantStyles[variant], sizeStyles[size], className), children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-2 text-center", children: children }), closable ? (_jsx(Button, { variant: "ghost", size: "xs", rounded: true, "aria-label": "Fechar banner", className: "absolute top-1/2 right-2 -translate-y-1/2 text-current hover:bg-[var(--contrast-hover)]", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })) : null] }));
 }

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'information' | 'success' | 'warning' | 'danger' | 'destructive' | 'sidebar';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'success' | 'warning' | 'danger' | 'destructive';
 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,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"}
+{"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,SAAS,GACT,SAAS,GACT,QAAQ,GACR,aAAa,CAAC;AAClB,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;AAqCD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}

package/dist/components/Button.js

@@ -2,26 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn';
 const variantClasses = {
-    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-[var(--status-info-border,#93c5fd)] bg-[var(--status-info-bg,rgba(219,234,254,0.8))] text-[var(--status-info-text,#1d4ed8)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-info-border,#93c5fd)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-info-bg,rgba(219,234,254,0.8))_78%,var(--status-info-border,#93c5fd))]',
-    success: 'border-[var(--status-success-border,#86efac)] bg-[var(--status-success-bg,rgba(220,252,231,0.8))] text-[var(--status-success-text,#15803d)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-success-border,#86efac)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-success-bg,rgba(220,252,231,0.8))_78%,var(--status-success-border,#86efac))]',
-    warning: 'border-[var(--status-warning-border,#fcd34d)] bg-[var(--status-warning-bg,rgba(254,243,199,0.8))] text-[var(--status-warning-text,#92400e)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-warning-border,#fcd34d)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-warning-bg,rgba(254,243,199,0.8))_78%,var(--status-warning-border,#fcd34d))]',
-    danger: 'border-[var(--status-danger-border,#fca5a5)] bg-[var(--status-danger-bg,rgba(254,202,202,0.8))] text-[var(--status-danger-text,#b91c1c)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-danger-border,#fca5a5)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-danger-bg,rgba(254,202,202,0.8))_78%,var(--status-danger-border,#fca5a5))]',
-    destructive: 'border-transparent bg-[#dc2626] text-white hover:bg-[#b91c1c]',
-    sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
+    primary: 'border-transparent bg-[var(--brand)] text-[var(--primary-foreground)] shadow-[var(--shadow-brand)] hover:bg-[var(--brand-hover)] hover:shadow-[var(--shadow-brand-hover)]',
+    secondary: 'border-[var(--status-info-border)] bg-[var(--status-info-bg)] text-[var(--status-info-text)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-info-border)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-info-bg)_78%,var(--status-info-border))]',
+    ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[var(--brand-surface-hover)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,var(--on-solid))]',
+    outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[var(--brand-surface-subtle)] 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:text-[color-mix(in_srgb,var(--brand)_78%,var(--on-solid))]',
+    success: 'border-[var(--status-success-border)] bg-[var(--status-success-bg)] text-[var(--status-success-text)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-success-border)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-success-bg)_78%,var(--status-success-border))]',
+    warning: 'border-[var(--status-warning-border)] bg-[var(--status-warning-bg)] text-[var(--status-warning-text)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-warning-border)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-warning-bg)_78%,var(--status-warning-border))]',
+    danger: 'border-[var(--status-danger-border)] bg-[var(--status-danger-bg)] text-[var(--status-danger-text)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-danger-border)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-danger-bg)_78%,var(--status-danger-border))]',
+    destructive: 'border-transparent bg-[var(--destructive)] text-[var(--on-solid)] hover:bg-[var(--destructive-hover)]',
 };
 const sizeClasses = {
-    xs: 'min-h-7 min-w-7 px-1.5 py-1 text-[0.625rem]',
+    xs: 'min-h-7 min-w-7 px-1.5 py-1 text-[length:var(--font-size-2xs)]',
     sm: 'min-h-9 min-w-9 px-2.5 py-2 text-xs',
     md: 'min-h-11 min-w-20 px-4 py-2.5 text-sm',
     lg: 'min-h-13 min-w-24 px-6 py-3 text-base',
     wide: 'min-h-11 min-w-20 w-full px-4 py-2.5 text-sm',
 };
 const roundedSizeClasses = {
-    xs: 'size-7 min-h-7 min-w-7 p-1 text-[0.625rem]',
+    xs: 'size-7 min-h-7 min-w-7 p-1 text-[length:var(--font-size-2xs)]',
     sm: 'size-9 min-h-9 min-w-9 p-1.5 text-xs',
     md: 'size-12 min-h-12 min-w-12 p-2 text-sm',
     lg: 'size-14 min-h-14 min-w-14 p-3 text-base',
@@ -31,7 +29,7 @@ export const Button = forwardRef(({ children, className, disabled, isLoading = f
     const busy = isLoading || isSubmitting;
     const resolvedSize = rounded ? roundedSizeClasses[size] : sizeClasses[size];
     const ariaBusy = props['aria-busy'] ?? (busy ? true : undefined);
-    return (_jsx("button", { ref: ref, className: cn('inline-flex cursor-pointer items-center justify-center gap-2 rounded-[var(--radius)] border font-semibold leading-none no-underline transition-[background-color,border-color,color,opacity,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:cursor-not-allowed disabled:opacity-55 disabled:saturate-50', variantClasses[variant], resolvedSize, rounded && 'rounded-full', busy && 'cursor-wait opacity-90', className), disabled: disabled || busy, style: {
+    return (_jsx("button", { ref: ref, className: cn('inline-flex cursor-pointer items-center justify-center gap-2 rounded-[var(--radius)] border font-semibold leading-none no-underline transition-[background-color,border-color,color,opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:cursor-not-allowed disabled:opacity-55 disabled:saturate-50', variantClasses[variant], resolvedSize, rounded && 'rounded-full', busy && 'cursor-wait opacity-90', className), disabled: disabled || busy, style: {
             ...style,
             ...(minWidth !== undefined
                 ? { minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth }

package/dist/components/Card.js

@@ -5,10 +5,10 @@ function getCardVariantClass(variant) {
         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)]';
+        return 'bg-surface shadow-[inset_0_1px_0_color-mix(in_srgb,var(--on-solid)_40%,transparent)]';
     }
     if (variant === 'elevated') {
-        return 'bg-surface shadow-[0_16px_36px_-24px_color-mix(in_srgb,#000_50%,transparent)]';
+        return 'bg-surface shadow-[var(--shadow-lg)]';
     }
     return 'bg-background-secondary shadow-sm';
 }
@@ -21,7 +21,7 @@ function getContentDensityClass(density) {
 }
 function CardRoot({ className, children, highlight = false, variant = 'default', ...props }) {
     return (_jsx("div", { className: cn('border-app-border rounded-xl border', highlight
-            && 'bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-surface,var(--surface))_92%,var(--color-primary,var(--brand))_8%),var(--color-surface,var(--surface)))] shadow-[0_12px_32px_rgba(15,23,42,0.06)]', !highlight && getCardVariantClass(variant), className), ...props, children: children }));
+            && 'bg-[linear-gradient(135deg,color-mix(in_srgb,var(--surface)_92%,var(--brand)_8%),var(--surface))] shadow-[var(--shadow-md)]', !highlight && getCardVariantClass(variant), className), ...props, children: children }));
 }
 function CardHeader({ className, children, ...props }) {
     return (_jsx("div", { className: cn('border-app-border flex flex-col gap-1 border-b p-4', '[&>h2]:h-auto [&>h2]:rounded-none [&>h2]:border-0 [&>h2]:p-0', className), ...props, children: children }));

package/dist/components/ConfirmationDialog.js

@@ -11,23 +11,23 @@ function resolveVariant(variant) {
 const dialogVariantStyles = {
     information: {
         icon: InfoIcon,
-        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))]',
+        iconClassName: 'text-[var(--status-info-icon)]',
+        titleClassName: 'text-[var(--status-info-text)]',
     },
     question: {
         icon: HelpCircleIcon,
-        iconClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
-        titleClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
+        iconClassName: 'text-foreground-muted',
+        titleClassName: 'text-foreground',
     },
     warning: {
         icon: AlertTriangleIcon,
-        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))]',
+        iconClassName: 'text-[var(--status-warning-icon)]',
+        titleClassName: 'text-[var(--status-warning-text)]',
     },
     destructive: {
         icon: AlertCircleIcon,
-        iconClassName: 'text-[color-mix(in_srgb,#dc2626_86%,var(--foreground))]',
-        titleClassName: 'text-[color-mix(in_srgb,#dc2626_86%,var(--foreground))]',
+        iconClassName: 'text-[var(--status-danger-icon)]',
+        titleClassName: 'text-[var(--status-danger-text)]',
     },
 };
 const buttonVariantDefaults = {
@@ -37,8 +37,8 @@ const buttonVariantDefaults = {
     success: { label: 'Sim', buttonVariant: 'primary' },
 };
 const confirmButtonVariantByDialog = {
-    information: 'information',
-    question: 'primary',
+    information: 'secondary',
+    question: 'outline',
     warning: 'warning',
     destructive: 'destructive',
 };
@@ -150,7 +150,7 @@ function Root({ children, className, closeOnEscape = true, onOpenChange, open, o
     if (!open) {
         return null;
     }
-    return createPortal(_jsx(ConfirmationDialogContext.Provider, { value: value, children: _jsx("div", { className: cn('fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 p-4 backdrop-blur-[2px]', overlayClassName), role: "presentation", children: _jsxs("section", { "aria-describedby": descriptionId, "aria-labelledby": titleId, "aria-modal": "true", className: cn('border-app-border bg-background-secondary text-foreground relative grid gap-4 rounded-xl border p-6 shadow-2xl', className), role: "alertdialog", style: { width: 'min(29rem, calc(100vw - 2rem))' }, children: [_jsx("button", { "aria-label": "Fechar", className: cn('text-foreground-muted hover:bg-background hover:text-foreground absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md opacity-60 transition disabled:cursor-not-allowed disabled:opacity-30'), disabled: isBusy, onClick: close, type: "button", children: _jsx(XIcon, { className: "size-3.5" }) }), children] }) }) }), document.body);
+    return createPortal(_jsx(ConfirmationDialogContext.Provider, { value: value, children: _jsx("div", { className: cn('fixed inset-0 z-[var(--z-critical-dialog)] flex items-center justify-center bg-[var(--overlay-scrim)] p-4 backdrop-blur-[var(--backdrop-blur-sm)]', overlayClassName), role: "presentation", children: _jsxs("section", { "aria-describedby": descriptionId, "aria-labelledby": titleId, "aria-modal": "true", className: cn('border-app-border bg-background-secondary text-foreground relative grid gap-4 rounded-xl border p-6 shadow-[var(--shadow-overlay)]', className), role: "alertdialog", style: { width: 'min(29rem, calc(100vw - 2rem))' }, children: [_jsx("button", { "aria-label": "Fechar", className: cn('text-foreground-muted hover:bg-background hover:text-foreground absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md opacity-60 transition disabled:cursor-not-allowed disabled:opacity-30'), disabled: isBusy, onClick: close, type: "button", children: _jsx(XIcon, { className: "size-3.5" }) }), children] }) }) }), document.body);
 }
 function Icon({ className }) {
     const { variant } = useConfirmationDialog();
@@ -198,7 +198,7 @@ function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 1
             ...style,
             ...(isFocused
                 ? {
-                    boxShadow: '0 0 0 2px var(--background-secondary), 0 0 0 4px rgba(245, 158, 11, 0.62)',
+                    boxShadow: 'var(--shadow-warning-focus)',
                 }
                 : {}),
         }, children: children ?? label ?? defaults.label }));

package/dist/components/CopyableField.js

@@ -55,6 +55,6 @@ export const CopyableField = React.forwardRef(function CopyableField({ asChild =
         }
     }
     return (_jsx(Component, { ref: ref, role: canCopy ? "button" : undefined, tabIndex: canCopy ? 0 : -1, title: canCopy ? title : undefined, "aria-disabled": !canCopy, "aria-label": canCopy && copied ? "Copiado" : undefined, "data-copied": copied ? "true" : undefined, className: cn(canCopy &&
-            "group/copyable relative cursor-pointer rounded-md border border-transparent focus-visible:outline-none", className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: asChild ? (children) : (_jsxs(_Fragment, { children: [children, canCopy ? (_jsx("span", { "aria-hidden": "true", className: cn("border-app-border bg-[color-mix(in_srgb,var(--foreground-muted)_3%,var(--background-secondary))] text-foreground-muted pointer-events-none absolute top-1/2 right-0 inline-flex size-6 translate-x-[calc(100%+0.25rem)] -translate-y-1/2 items-center justify-center rounded-md border opacity-0 shadow-sm transition-[opacity,color,border-color,background-color] duration-150 group-hover/copyable:opacity-100 group-focus-visible/copyable:opacity-100", copied &&
+            "group/copyable relative cursor-pointer rounded-md border border-transparent focus-visible:outline-none", className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: asChild ? (children) : (_jsxs(_Fragment, { children: [children, canCopy ? (_jsx("span", { "aria-hidden": "true", className: cn("border-app-border bg-[color-mix(in_srgb,var(--foreground-muted)_3%,var(--background-secondary))] text-foreground-muted pointer-events-none absolute top-1/2 right-0 inline-flex size-6 translate-x-[calc(100%+0.25rem)] -translate-y-1/2 items-center justify-center rounded-md border opacity-0 shadow-sm transition-[opacity,color,border-color,background-color] duration-[var(--duration-fast)] group-hover/copyable:opacity-100 group-focus-visible/copyable:opacity-100", copied &&
                         "bg-[color-mix(in_srgb,var(--brand)_9%,var(--background-secondary))] text-brand opacity-100"), children: copied ? (_jsx(ClipboardCheckIcon, { className: "size-3.5" })) : (_jsx(ClipboardIcon, { className: "size-3.5" })) })) : null] })) }));
 });

package/dist/components/DateField.d.ts

@@ -14,6 +14,7 @@ export interface DateFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     enableTime?: boolean;
     timeIntervals?: number;
     noPortal?: boolean;
+    calendarClassName?: string;
 }
 export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=DateField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AA6FzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,yFA6IrB,CAAC"}
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AA6FzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,yFA8IrB,CAAC"}

package/dist/components/DateField.js

@@ -102,7 +102,7 @@ function assignRef(ref, value) {
     }
     ref.current = value;
 }
-export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef, disabled, errorMessage, id, className, wrapperClassName, labelClassName, size = 'sm', roundedFull = false, noPortal = false, mode, enableTime = false, timeIntervals = 5, value, name, placeholder, min, max, autoComplete = 'off', autoFocus, }, ref) => {
+export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef, disabled, errorMessage, id, className, wrapperClassName, labelClassName, size = 'sm', roundedFull = false, noPortal = false, calendarClassName, mode, enableTime = false, timeIntervals = 5, value, name, placeholder, min, max, autoComplete = 'off', autoFocus, }, ref) => {
     const sizeMap = {
         sm: 'h-9 text-sm px-3 rounded-md',
         md: 'h-12 text-sm px-4 rounded-md',
@@ -163,7 +163,7 @@ export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef,
                         ? { showTimeSelect: true, showTimeSelectOnly: true, timeIntervals, dateFormat: 'HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
                         : isDateTime
                             ? { showTimeSelect: true, timeIntervals, dateFormat: 'dd/MM/yyyy HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
-                            : { dateFormat: 'dd/MM/yyyy', minDate: toOptionalDate(min), maxDate: toOptionalDate(max) }), locale: "pt-BR", placeholderText: placeholder ?? label, disabled: controlDisabled, showPopperArrow: false, popperClassName: "app-datepicker-popper", calendarClassName: "app-datepicker", wrapperClassName: "w-full", formatWeekDay: (day) => day.slice(0, 3), ariaDescribedBy: describedBy, ariaInvalid: controlError ? 'true' : undefined, autoComplete: autoComplete, autoFocus: autoFocus, className: controlClasses({
+                            : { dateFormat: 'dd/MM/yyyy', minDate: toOptionalDate(min), maxDate: toOptionalDate(max) }), locale: "pt-BR", placeholderText: placeholder ?? label, disabled: controlDisabled, showPopperArrow: false, popperClassName: "app-datepicker-popper", calendarClassName: cn('app-datepicker', calendarClassName), wrapperClassName: "w-full", formatWeekDay: (day) => day.slice(0, 3), ariaDescribedBy: describedBy, ariaInvalid: controlError ? 'true' : undefined, autoComplete: autoComplete, autoFocus: autoFocus, className: controlClasses({
                         errorMessage: controlError,
                         disabled: controlDisabled,
                         extra: cn(className, 'w-full cursor-pointer pr-10', sizeClass),

package/dist/components/FieldControl.js

@@ -12,7 +12,7 @@ export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '',
     const roundedClass = roundedFull ? 'fc-rounded-full' : '';
     const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
     const labelSizeClassMap = {
-        xs: 'text-[10px]',
+        xs: 'text-[length:var(--font-size-2xs)]',
         sm: 'text-xs',
         md: 'text-sm',
         lg: 'text-base',
@@ -64,7 +64,7 @@ export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '',
         .dark .${scopeClass} textarea::-webkit-input-placeholder { color: var(--muted-foreground); opacity: 0.50; }
         .${roundedClass} input,
         .${roundedClass} textarea,
-        .${roundedClass} select { border-radius: 9999px; padding: 0.375rem 1rem; min-height: 2rem; }
+        .${roundedClass} select { border-radius: var(--radius-full); padding: var(--space-1-5) var(--space-4); min-height: var(--space-8); }
         .${roundedClass} input::placeholder,
         .${roundedClass} textarea::placeholder,
         .${roundedClass} select::placeholder { opacity: 0.5; }

package/dist/components/FieldValidationError.js

@@ -3,5 +3,5 @@ import { cn } from '../utils/cn';
 export function FieldValidationError({ id, message, hasValidation = false }) {
     if (!hasValidation && !message)
         return null;
-    return (_jsx("p", { id: id, className: cn('mt-px text-left text-[11px] leading-[14px] transition-opacity duration-200 select-none', hasValidation ? 'min-h-[14px]' : 'min-h-0', message ? 'text-red-600 opacity-100 dark:text-red-400' : 'opacity-0'), "aria-live": "polite", "aria-atomic": "true", role: message ? 'alert' : undefined, children: message ?? '' }));
+    return (_jsx("p", { id: id, className: cn('mt-px text-left text-[length:var(--font-size-2xs)] leading-[var(--line-height-2xs)] transition-opacity duration-[var(--duration-normal)] select-none', hasValidation ? 'min-h-[14px]' : 'min-h-0', message ? 'text-red-600 opacity-100 dark:text-red-400' : 'opacity-0'), "aria-live": "polite", "aria-atomic": "true", role: message ? 'alert' : undefined, children: message ?? '' }));
 }

package/dist/components/LoadingOverlay.js

@@ -4,5 +4,5 @@ import { cn } from '../utils/cn';
 export function LoadingOverlay({ open = false, variant = 'solid', size = 'lg', label = 'Carregando', className, }) {
     if (!open)
         return null;
-    return (_jsx("div", { className: cn('fixed inset-0 z-[999] flex items-center justify-center', variant === 'solid' ? 'bg-background' : 'bg-background/40 backdrop-blur-[3px]', className), role: "status", "aria-label": label, "aria-live": "polite", children: _jsx(Loading, { size: size, "aria-label": label }) }));
+    return (_jsx("div", { className: cn('fixed inset-0 z-[var(--z-loading-overlay)] flex items-center justify-center', variant === 'solid' ? 'bg-background' : 'bg-[var(--overlay-loading)] backdrop-blur-[var(--backdrop-blur-md)]', className), role: "status", "aria-label": label, "aria-live": "polite", children: _jsx(Loading, { size: size, "aria-label": label }) }));
 }

package/dist/components/Modal.js

@@ -73,11 +73,11 @@ function ModalRoot({ allowExternalFocus = false, centered = false, children, cla
         onOpenChange?.(nextOpen);
     }
     const hasFooter = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ModalFooter);
-    return (_jsx(DialogPrimitive.Root, { ...props, modal: !allowExternalFocus, open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { style: { zIndex: overlayZIndex }, className: cn('fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px]', allowExternalFocus && 'pointer-events-none', overlayClassName) }), _jsxs(DialogPrimitive.Content, { style: {
+    return (_jsx(DialogPrimitive.Root, { ...props, modal: !allowExternalFocus, open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { style: { zIndex: overlayZIndex }, className: cn('fixed inset-0 z-[var(--z-modal-overlay)] bg-[var(--overlay-scrim)] backdrop-blur-[var(--backdrop-blur-sm)]', allowExternalFocus && 'pointer-events-none', overlayClassName) }), _jsxs(DialogPrimitive.Content, { style: {
                         zIndex: contentZIndex,
                         width: widthVariants[size],
                         ...(!centered && offset ? { top: `${offset}px` } : {}),
-                    }, className: cn('fixed z-[110] grid max-h-[95vh]', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl', density === 'default' && 'p-6', density === 'compact' && '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], 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-[var(--z-modal)] grid max-h-[95vh]', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl', density === 'default' && 'p-6', density === 'compact' && 'p-4', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border shadow-[var(--shadow-lg)]', variant === 'elevated' && 'border-app-border bg-surface text-foreground border shadow-[var(--shadow-overlay)]', 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], 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.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 }));

package/dist/components/MultiSelectField.js

@@ -19,7 +19,7 @@ function OptionListItem({ option, isSelected, isDisabledByMax, onToggle, }) {
             return;
         onToggle(option.value);
     }
-    return (_jsxs("li", { role: "option", "aria-selected": isSelected, className: cn('hover:bg-background flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors', disabled && 'cursor-not-allowed opacity-50'), onClick: handleClick, children: [_jsx("span", { className: cn('border-app-border flex size-4 shrink-0 items-center justify-center rounded border', isSelected && 'bg-brand border-brand'), children: _jsx(RenderIf, { when: isSelected, children: _jsx(Check, { className: "size-3 text-white" }) }) }), option.label] }));
+    return (_jsxs("li", { role: "option", "aria-selected": isSelected, className: cn('hover:bg-background flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors', disabled && 'cursor-not-allowed opacity-50'), onClick: handleClick, children: [_jsx("span", { className: cn('border-app-border flex size-4 shrink-0 items-center justify-center rounded border', isSelected && 'bg-brand border-brand'), children: _jsx(RenderIf, { when: isSelected, children: _jsx(Check, { className: "size-3 text-[var(--on-solid)]" }) }) }), option.label] }));
 }
 export function MultiSelectField({ label, value, options, onChange, placeholder = 'Selecione...', errorMessage, disabled = false, maxSelected, wrapperClassName, size = 'sm', labelPosition = 'top', }) {
     const [open, setOpen] = useState(false);
@@ -73,8 +73,8 @@ export function MultiSelectField({ label, value, options, onChange, placeholder
         md: 'min-h-12 text-sm px-4',
         lg: 'min-h-14 text-base px-6',
     };
-    const triggerClass = cn('bg-surface border-app-border text-foreground w-full rounded-md border transition-colors duration-200', 'relative flex cursor-pointer select-none flex-wrap items-center gap-1 py-1.5 pr-8', sizeClassMap[size], !disabled && 'hover:border-brand focus:outline-none focus:ring-2 focus:ring-brand/50', errorMessage && 'border-red-500 focus:ring-red-200', disabled && 'bg-input-bg cursor-not-allowed opacity-60');
-    const dropdownClass = cn('bg-surface border-app-border text-foreground absolute left-0 z-50 w-full rounded-md border shadow-lg', direction === 'down' ? 'top-full mt-1' : 'bottom-full mb-1');
+    const triggerClass = cn('bg-surface border-app-border text-foreground w-full rounded-md border transition-colors duration-[var(--duration-normal)]', 'relative flex cursor-pointer select-none flex-wrap items-center gap-1 py-1.5 pr-8', sizeClassMap[size], !disabled && 'hover:border-brand focus:outline-none focus:ring-2 focus:ring-brand/50', errorMessage && 'border-red-500 focus:ring-red-200', disabled && 'bg-input-bg cursor-not-allowed opacity-60');
+    const dropdownClass = cn('bg-surface border-app-border text-foreground absolute left-0 z-[var(--z-popover)] w-full rounded-md border shadow-[var(--shadow-md)]', direction === 'down' ? 'top-full mt-1' : 'bottom-full mb-1');
     const selectedOptions = options.filter((option) => value.includes(option.value));
     return (_jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, errorMessage: errorMessage, disabled: disabled, size: size, labelPosition: labelPosition, children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", tabIndex: disabled ? -1 : 0, className: triggerClass, onClick: handleOpen, onKeyDown: handleComboboxKeyDown, children: [_jsxs(RenderCase.Root, { children: [_jsx(RenderCase.If, { when: selectedOptions.length === 0, children: _jsx("span", { className: "text-foreground-muted/50 text-sm", children: placeholder }) }), _jsx(RenderCase.Else, { children: selectedOptions.map((option) => (_jsx(ChipItem, { option: option, disabled: disabled, onRemove: handleRemoveChip }, String(option.value)))) })] }), _jsx("div", { className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: _jsx(ChevronDown, { className: cn('text-foreground-muted/90 size-4 transition-transform', open && 'rotate-180') }) })] }), _jsx(RenderIf, { when: open, children: _jsx("div", { className: dropdownClass, children: _jsx("ul", { role: "listbox", "aria-multiselectable": "true", className: "max-h-52 overflow-y-auto py-1", children: options.map((option) => {
                                 const isSelected = value.includes(option.value);

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-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" }))] }));
+    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-[var(--shadow-action)]', '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-[var(--duration-fast)] group-hover:translate-x-0.5" }))] }));
 });
 NavCard.displayName = 'NavCard';

package/dist/components/Page.js

@@ -258,7 +258,7 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
     const verticalMetaJustification = getVerticalMetaJustification(effectivePosition);
     const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(effectivePosition), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) })) : null;
     const labelToggleButton = canToggleLabels ? (_jsx(ActionButtonPrimitive, { "aria-pressed": effectiveShowLabels, "aria-label": effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', icon: effectiveShowLabels ? _jsx(CaptionsOffIcon, { "aria-hidden": "true" }) : _jsx(CaptionsIcon, { "aria-hidden": "true" }), tooltip: effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', onClick: handleToggleLabels })) : null;
-    const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-40 min-w-36 rounded-md border p-1 text-xs shadow-lg', isVertical && effectivePosition === 'left' && 'left-full top-0 ml-2', isVertical && effectivePosition === 'right' && 'right-full top-0 mr-2', !isVertical && 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
+    const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-[var(--z-popover)] min-w-36 rounded-md border p-1 text-xs shadow-[var(--shadow-md)]', isVertical && effectivePosition === 'left' && 'left-full top-0 ml-2', isVertical && effectivePosition === 'right' && 'right-full top-0 mr-2', !isVertical && 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
     const actions = (_jsxs("div", { className: cn('flex min-h-0 min-w-0 gap-2', isVertical ? 'h-full w-full flex-col' : 'w-full items-center'), children: [_jsx(PageActionsRenderContext.Provider, { value: { showLabels: effectiveShowLabels }, children: _jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0 flex-1', isVertical
                         ? cn('min-h-0 flex-col content-start [&>[data-action-separator=true]]:h-px [&>[data-action-separator=true]]:min-h-0 [&>[data-action-separator=true]]:w-full [&>[data-action-separator=true]]:self-auto', effectiveShowLabels
                             ? 'w-full items-stretch [&>button]:w-full [&>button]:justify-start [&>div]:w-full [&>div>button]:w-full [&>div>button]:justify-start'
@@ -267,7 +267,7 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
     return (_jsxs("div", { className: cn('flex min-w-0', positionClasses[effectivePosition], isVertical ? 'flex-col' : 'items-center', className), children: [actions, isDragging ? _jsx(PageActionsDropZones, { activePosition: dragTarget ?? effectivePosition, allowedPositions: effectiveAllowedPositions }) : null] }));
 }
 function PageActionsDropZones({ activePosition, allowedPositions }) {
-    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50", children: allPositions.map((position) => {
+    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[var(--z-popover)]", children: allPositions.map((position) => {
             if (!allowedPositions.includes(position))
                 return null;
             return (_jsx("div", { className: cn('absolute border-2 border-dashed border-brand/50 bg-brand/10 transition-colors', position === 'left' && 'left-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'right' && 'right-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'top' && 'left-2 top-2 h-14 w-[calc(100%-1rem)] rounded-md', position === 'bottom' && 'bottom-2 left-2 h-14 w-[calc(100%-1rem)] rounded-md', activePosition === position && 'border-brand bg-brand/20 shadow-[0_0_0_4px_color-mix(in_srgb,var(--brand)_18%,transparent)]') }, position));
@@ -324,14 +324,14 @@ function ActionsSlot({ className, position }) {
     return (_jsx("div", { className: cn('flex min-w-0 flex-none', (position === 'top' || position === 'bottom') && 'w-full', (position === 'left' || position === 'right') && 'min-h-0 self-stretch', className), children: cloneElement(actions, { __fromSlot: true }) }));
 }
 function Title({ children, className, ...props }) {
-    return (_jsx("h1", { className: cn('text-xl font-semibold tracking-[-0.03em] text-foreground', className), ...props, children: children }));
+    return (_jsx("h1", { className: cn('text-xl font-semibold tracking-[var(--letter-spacing-tight)] text-foreground', className), ...props, children: children }));
 }
 function Description({ children, className, ...props }) {
     return (_jsx("p", { className: cn('text-sm leading-6 text-foreground-muted', className), ...props, children: children }));
 }
 function Header({ actions, description, eyebrow, title }) {
     const hasLeft = eyebrow || title || description;
-    return (_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [hasLeft && (_jsxs("div", { children: [eyebrow && _jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.16em] text-foreground-muted", children: eyebrow }), title && _jsx(Title, { children: title }), description && _jsx(Description, { children: description })] })), actions && _jsx("div", { className: "flex min-w-0 justify-end", children: actions })] }));
+    return (_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [hasLeft && (_jsxs("div", { children: [eyebrow && _jsx("span", { className: "text-xs font-semibold uppercase tracking-[var(--letter-spacing-caps)] text-foreground-muted", children: eyebrow }), title && _jsx(Title, { children: title }), description && _jsx(Description, { children: description })] })), actions && _jsx("div", { className: "flex min-w-0 justify-end", children: actions })] }));
 }
 export const Page = {
     Root,