@wellingtonhlc/shared-ui 0.27.1 → 0.29.1

package/dist/components/Pagination.js

@@ -5,23 +5,23 @@ import { Button } from './Button';
 const sizeClasses = {
     sm: {
         root: 'gap-2 md:gap-3',
-        count: 'text-xs md:min-w-[7rem] md:text-[0.8125rem]',
+        count: 'text-xs md:min-w-[7rem] md:text-[length:var(--font-size-compact)]',
         controls: 'gap-1',
         iconButton: 'h-8 min-h-8 min-w-8 px-2 py-0 [&_svg]:size-3.5',
         navButton: 'h-8 min-h-8 min-w-8 px-2 py-0 min-[901px]:min-w-[5.75rem] [&_svg]:size-3.5',
-        pageIndicator: 'h-8 px-2 text-xs md:min-w-[6.75rem] md:text-[0.8125rem]',
+        pageIndicator: 'h-8 px-2 text-xs md:min-w-[6.75rem] md:text-[length:var(--font-size-compact)]',
         select: 'h-8 min-w-18 px-2.5 text-xs',
-        selectLabel: 'text-xs md:text-[0.8125rem]',
+        selectLabel: 'text-xs md:text-[length:var(--font-size-compact)]',
     },
     md: {
         root: 'gap-2.5 md:gap-3',
-        count: 'text-[0.8125rem] md:min-w-[7.5rem]',
+        count: 'text-[length:var(--font-size-compact)] md:min-w-[7.5rem]',
         controls: 'gap-1.5',
         iconButton: 'h-9 min-h-9 min-w-9 px-2.5 py-0 [&_svg]:size-4',
         navButton: 'h-9 min-h-9 min-w-9 px-3 py-0 min-[901px]:min-w-[6.25rem] [&_svg]:size-4',
-        pageIndicator: 'h-9 px-3 text-[0.8125rem] md:min-w-[7.25rem]',
-        select: 'h-9 min-w-20 px-3 text-[0.8125rem]',
-        selectLabel: 'text-[0.8125rem]',
+        pageIndicator: 'h-9 px-3 text-[length:var(--font-size-compact)] md:min-w-[7.25rem]',
+        select: 'h-9 min-w-20 px-3 text-[length:var(--font-size-compact)]',
+        selectLabel: 'text-[length:var(--font-size-compact)]',
     },
     lg: {
         root: 'gap-3 md:gap-4',

package/dist/components/RadioGroup.js

@@ -56,7 +56,7 @@ function RadioGroupBase({ children, direction = 'row', disabled = false, errorMe
     if (variant === 'plain') {
         return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: () => (_jsx("div", { role: "radiogroup", "aria-label": label, "aria-describedby": describedBy, onBlur: inputOnBlur, className: groupClassName, children: children })) }) }));
     }
-    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsxs("div", { className: cn(fieldWrapper, wrapperClassName), "data-disabled": resolvedDisabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsxs("fieldset", { className: cn('border-app-border flex h-full flex-1 flex-col justify-center rounded-xl border px-3 pb-2 pt-0 transition-[background-color,border-color,box-shadow,color] duration-200', boxedFieldsetHeightStyles[size], resolvedDisabled && 'cursor-not-allowed opacity-60', errorMessage && 'border-red-500 dark:border-red-400'), children: [label ? (_jsx("legend", { id: legendId, className: cn('text-foreground-muted px-2 text-xs font-medium transition-colors', resolvedDisabled && 'cursor-not-allowed opacity-70', errorMessage && 'text-red-600 dark:text-red-400', labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-label": label ? undefined : resolvedName, "aria-labelledby": label ? legendId : undefined, "aria-describedby": describedBy, onBlur: inputOnBlur, className: boxedGroupClassName, children: children })] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage })] }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsxs("div", { className: cn(fieldWrapper, wrapperClassName), "data-disabled": resolvedDisabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsxs("fieldset", { className: cn('border-app-border flex h-full flex-1 flex-col justify-center rounded-xl border px-3 pb-2 pt-0 transition-[background-color,border-color,box-shadow,color] duration-[var(--duration-normal)]', boxedFieldsetHeightStyles[size], resolvedDisabled && 'cursor-not-allowed opacity-60', errorMessage && 'border-red-500 dark:border-red-400'), children: [label ? (_jsx("legend", { id: legendId, className: cn('text-foreground-muted px-2 text-xs font-medium transition-colors', resolvedDisabled && 'cursor-not-allowed opacity-70', errorMessage && 'text-red-600 dark:text-red-400', labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-label": label ? undefined : resolvedName, "aria-labelledby": label ? legendId : undefined, "aria-describedby": describedBy, onBlur: inputOnBlur, className: boxedGroupClassName, children: children })] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage })] }) }));
 }
 function Item({ className, disabled: itemDisabled, label, value }) {
     const { value: groupValue, disabled: groupDisabled, size, onChange } = React.useContext(RadioGroupContext);
@@ -66,7 +66,7 @@ function Item({ className, disabled: itemDisabled, label, value }) {
     function handleClick() {
         onChange(value);
     }
-    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": isChecked, "aria-label": label, disabled: isDisabled, onClick: handleClick, className: cn('flex items-center gap-2 transition-colors focus:outline-none', isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), children: [_jsx("span", { "data-checked": isChecked, className: cn('app-radio flex shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-200', s.outer), children: isChecked ? _jsx("span", { className: cn('app-radio__dot rounded-full', s.dot) }) : null }), _jsx("span", { className: cn('leading-none transition-colors duration-200', s.text, isChecked ? 'text-foreground' : 'text-foreground-muted'), children: label })] }));
+    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": isChecked, "aria-label": label, disabled: isDisabled, onClick: handleClick, className: cn('flex items-center gap-2 transition-colors focus:outline-none', isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), children: [_jsx("span", { "data-checked": isChecked, className: cn('app-radio flex shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-[var(--duration-normal)]', s.outer), children: isChecked ? _jsx("span", { className: cn('app-radio__dot rounded-full', s.dot) }) : null }), _jsx("span", { className: cn('leading-none transition-colors duration-[var(--duration-normal)]', s.text, isChecked ? 'text-foreground' : 'text-foreground-muted'), children: label })] }));
 }
 function HookFormRadioGroup(props) {
     const { control, name, rules, ...rest } = props;

package/dist/components/SelectionField.js

@@ -100,6 +100,6 @@ export function SelectionField({ label, description, value, placeholder = 'Selec
                                 ? 'cursor-not-allowed'
                                 : cn('cursor-pointer', !isClearHover &&
                                     'hover:border-[color-mix(in_srgb,var(--brand)_58%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,var(--surface))]'), size === 'lg' ? 'rounded-lg' : 'rounded-md', controlSizeClass[size], controlGapClass[size], resolvedIcon ? controlIconPaddingClass[size] : controlLeadingPaddingClass[size], controlClassName),
-                        }), "data-empty": !hasValue || undefined, "data-loading": loading || undefined, onClick: handleOpen, children: [resolvedIcon ? (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center rounded-md text-foreground-muted', !hasValue && 'text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground-muted))]', actionSizeClass[size], iconSizeClass[size]), "aria-hidden": "true", children: resolvedIcon })) : null, _jsxs("div", { className: cn('min-w-0 flex-1 text-left', textGapClass[size]), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("span", { className: cn('min-w-0 truncate font-semibold', hasValue ? 'text-foreground' : 'text-foreground-muted'), children: [title, required && !hasValue ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), meta ? (_jsx("span", { className: "border-app-border bg-background text-foreground-muted shrink-0 rounded border px-1.5 py-0.5 font-mono text-[0.65rem] leading-none", children: meta })) : null] }), subtitle ? (_jsx("p", { className: cn('text-foreground-muted truncate text-xs font-medium', (size === 'xs' || size === 'sm') && 'sr-only'), children: subtitle })) : null] }), shortcutHint ? (_jsx("kbd", { className: "border-app-border bg-background text-foreground-muted hidden shrink-0 rounded border px-1.5 py-1 font-mono text-[0.65rem] leading-none sm:inline-flex", children: shortcutHint })) : null, showClear ? (_jsx("button", { type: "button", "aria-label": clearTooltip, className: cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'hover:bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] hover:text-[var(--destructive)]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive)]/25', actionSizeClass[size]), title: clearTooltip, onClick: handleClear, onMouseEnter: handleClearMouseEnter, onMouseLeave: handleClearMouseLeave, children: _jsx(X, { "aria-hidden": "true" }) })) : null, disabled ? null : _jsx("span", { onClick: stopPropagation, children: selectionTrigger })] }), description ? (_jsx("p", { id: describedById, className: "mt-1 text-xs font-medium text-foreground-muted", children: description })) : null] }));
+                        }), "data-empty": !hasValue || undefined, "data-loading": loading || undefined, onClick: handleOpen, children: [resolvedIcon ? (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center rounded-md text-foreground-muted', !hasValue && 'text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground-muted))]', actionSizeClass[size], iconSizeClass[size]), "aria-hidden": "true", children: resolvedIcon })) : null, _jsxs("div", { className: cn('min-w-0 flex-1 text-left', textGapClass[size]), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("span", { className: cn('min-w-0 truncate font-semibold', hasValue ? 'text-foreground' : 'text-foreground-muted'), children: [title, required && !hasValue ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), meta ? (_jsx("span", { className: "border-app-border bg-background text-foreground-muted shrink-0 rounded border px-1.5 py-0.5 font-mono text-[length:var(--font-size-2xs)] leading-none", children: meta })) : null] }), subtitle ? (_jsx("p", { className: cn('text-foreground-muted truncate text-xs font-medium', (size === 'xs' || size === 'sm') && 'sr-only'), children: subtitle })) : null] }), shortcutHint ? (_jsx("kbd", { className: "border-app-border bg-background text-foreground-muted hidden shrink-0 rounded border px-1.5 py-1 font-mono text-[length:var(--font-size-2xs)] leading-none sm:inline-flex", children: shortcutHint })) : null, showClear ? (_jsx("button", { type: "button", "aria-label": clearTooltip, className: cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'hover:bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] hover:text-[var(--destructive)]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive)]/25', actionSizeClass[size]), title: clearTooltip, onClick: handleClear, onMouseEnter: handleClearMouseEnter, onMouseLeave: handleClearMouseLeave, children: _jsx(X, { "aria-hidden": "true" }) })) : null, disabled ? null : _jsx("span", { onClick: stopPropagation, children: selectionTrigger })] }), description ? (_jsx("p", { id: describedById, className: "mt-1 text-xs font-medium text-foreground-muted", children: description })) : null] }));
         } }));
 }

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

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

package/dist/components/Sidebar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../utils/cn';
 const Root = forwardRef(function SidebarRoot({ ariaLabel = 'Menu lateral', children, className, desktopWidthClass = 'lg:w-72', isOpen, mobileWidthClass = 'w-72', }, ref) {
-    return (_jsx("aside", { ref: ref, "aria-label": ariaLabel, "data-open": isOpen, className: cn('border-app-border bg-background-secondary fixed inset-y-0 left-0 z-40 flex h-full w-20 shrink-0 -translate-x-full flex-col justify-between overflow-visible border-r px-2 transition-[width,transform] duration-300 ease-in-out data-[open=true]:w-4/5 data-[open=true]:translate-x-0 md:static md:z-[60] md:w-20 md:translate-x-0 md:shadow-none md:data-[open=true]:w-72', isOpen && `${mobileWidthClass} ${desktopWidthClass}`, className), children: children }));
+    return (_jsx("aside", { ref: ref, "aria-label": ariaLabel, "data-open": isOpen, className: cn('border-app-border bg-[var(--sidebar-background)] fixed inset-y-0 left-0 z-[var(--z-navigation)] flex h-full w-20 shrink-0 -translate-x-full flex-col justify-between overflow-visible border-r px-2 transition-[width,transform] duration-[var(--duration-slow)] ease-in-out data-[open=true]:w-4/5 data-[open=true]:translate-x-0 md:static md:z-[var(--z-navigation-desktop)] md:w-20 md:translate-x-0 md:shadow-none md:data-[open=true]:w-72', isOpen && `${mobileWidthClass} ${desktopWidthClass}`, className), children: children }));
 });
 function Content({ ariaLabel = 'Navegação principal', children, className }) {
     return (_jsx("nav", { "aria-label": ariaLabel, className: cn('flex min-h-0 w-full flex-1 flex-col', className), children: children }));
@@ -27,13 +27,13 @@ function Separator({ className, flush = false }) {
     return (_jsx("div", { "aria-hidden": "true", className: cn('border-app-border w-full border-t', flush && 'my-0', className) }));
 }
 const ToggleButton = forwardRef(function SidebarToggleButton({ className, closedLabel = 'Abrir menu lateral', icon, isOpen, onToggle, openLabel = 'Recolher menu lateral' }, ref) {
-    return (_jsx("button", { ref: ref, type: "button", onClick: onToggle, "aria-label": isOpen ? openLabel : closedLabel, "aria-expanded": isOpen, "data-open": isOpen, className: cn('border-app-border text-foreground-muted focus-visible:ring-brand/35 flex w-14 flex-none cursor-pointer items-center rounded-xl border bg-[rgb(var(--color-brand)/0.08)] transition-[width,background-color,color] focus-visible:ring-2 focus-visible:outline-none hover:bg-[rgb(var(--color-brand)/0.11)] hover:text-foreground data-[open=true]:w-full dark:bg-[rgb(var(--color-brand)/0.13)] dark:hover:bg-[rgb(var(--color-brand)/0.16)] dark:hover:text-foreground', className), children: _jsx("span", { className: "grid w-14 flex-none place-items-center py-2", children: icon }) }));
+    return (_jsx("button", { ref: ref, type: "button", onClick: onToggle, "aria-label": isOpen ? openLabel : closedLabel, "aria-expanded": isOpen, "data-open": isOpen, className: cn('text-foreground-muted focus-visible:ring-brand/35 flex w-full flex-none cursor-pointer items-center rounded-xl bg-transparent transition-[background-color,color] focus-visible:ring-2 focus-visible:outline-none hover:bg-[var(--sidebar-item-hover)] hover:text-foreground', className), children: _jsx("span", { className: "grid w-16 min-w-16 flex-none place-items-center py-2", children: icon }) }));
 });
 const ActionButton = forwardRef(function SidebarActionButton({ active = false, className, expanded = false, icon, isOpen, label, labelClassName, showChevron = false, size = 'default', title, tone = 'nav', type = 'button', ...props }, ref) {
-    return (_jsxs("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn(sidebarButtonClasses(active, size, tone), className), ...props, children: [_jsx("span", { className: cn('grid w-14 min-w-14 flex-none place-items-center transition-colors', size === 'compact' ? 'h-9' : 'h-11', active ? 'text-current' : 'text-current'), children: icon }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left font-medium whitespace-nowrap transition-opacity duration-200', size === 'compact' ? 'text-xs max-md:text-base' : 'text-[13px] max-md:text-base', isOpen ? 'opacity-100' : 'pointer-events-none w-0 opacity-0', labelClassName), children: label }), _jsx("span", { className: cn('grid flex-none place-items-center', size === 'compact' ? 'h-9 w-6' : 'h-11 w-7', showChevron && isOpen ? 'opacity-100' : 'opacity-0'), children: _jsx(ChevronIcon, { expanded: expanded }) })] }));
+    return (_jsxs("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-open": isOpen, "data-sidebar-active": active ? 'true' : undefined, className: cn(sidebarButtonClasses(active, size, tone), showChevron && isOpen && 'pr-2', className), ...props, children: [_jsx("span", { className: cn('grid w-16 min-w-16 flex-none place-items-center transition-colors', size === 'compact' ? 'h-9' : 'h-11', active ? 'text-current' : 'text-current'), children: icon }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left font-medium whitespace-nowrap transition-opacity duration-[var(--duration-normal)]', size === 'compact' ? 'text-xs max-md:text-base' : 'text-[length:var(--font-size-compact)] max-md:text-base', isOpen ? 'opacity-100' : 'pointer-events-none w-0 opacity-0', labelClassName), children: label }), _jsx("span", { className: cn('flex-none place-items-center', isOpen ? 'grid' : 'hidden', size === 'compact' ? 'h-9 w-6' : 'h-11 w-7', showChevron && isOpen ? 'opacity-100' : 'opacity-0'), children: _jsx(ChevronIcon, { expanded: expanded }) })] }));
 });
 const SubActionButton = forwardRef(function SidebarSubActionButton({ active = false, className, isOpen, label, size = 'compact', title, type = 'button', ...props }, ref) {
-    return (_jsx("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn('focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9 text-xs' : 'h-11 min-h-11 text-[13px]', isOpen ? 'justify-start pl-14' : 'justify-center', subActionButtonTone(active, size), className), ...props, children: _jsx("span", { className: cn('truncate', isOpen ? 'opacity-100' : 'sr-only'), children: label }) }));
+    return (_jsx("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn('focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9 text-xs' : 'h-11 min-h-11 text-[length:var(--font-size-compact)]', isOpen ? 'justify-start pl-14' : 'justify-center', subActionButtonTone(active, size), className), ...props, children: _jsx("span", { className: cn('truncate', isOpen ? 'opacity-100' : 'sr-only'), children: label }) }));
 });
 function NavGroup({ active = false, className, collapsible = false, defaultExpanded, icon, isOpen, items, subItemSize = 'compact', title, }) {
     const itemByKey = useMemo(() => new Map(items.map((item) => [item.key, item])), [items]);
@@ -92,22 +92,22 @@ function NavGroup({ active = false, className, collapsible = false, defaultExpan
     if (singleItem) {
         return (_jsx("li", { className: cn('w-full', className), children: _jsx(ActionButton, { active: singleItem.active, icon: singleItem.icon ?? icon, isOpen: isOpen, label: singleItem.label, onClick: handleSingleItemClick, title: singleItem.title, tone: "subtle" }) }));
     }
-    return (_jsxs("li", { className: cn('relative w-full', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(ActionButton, { active: groupActive, "aria-expanded": isOpen ? expanded : undefined, icon: icon, isOpen: isOpen, label: title, labelClassName: labelVisible ? 'opacity-100' : 'opacity-0', onClick: handleGroupClick, expanded: expanded, showChevron: collapsible && isOpen, tone: "subtle" }), isOpen ? (_jsx("div", { className: "grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-200 ease-out data-[expanded=true]:grid-rows-[1fr] data-[expanded=true]:opacity-100", "data-expanded": expanded, children: _jsx("div", { className: "relative min-h-0 overflow-hidden", children: _jsx("ul", { className: "flex w-full flex-col", children: items.map((item, index) => (_jsxs("li", { className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: cn('bg-app-border absolute left-7 top-0 w-px', index === items.length - 1 ? 'h-1/2' : 'bottom-0') }), _jsx("span", { "aria-hidden": "true", className: "bg-app-border absolute left-7 top-1/2 h-px w-5" }), _jsx(SubActionButton, { active: item.active, "data-sidebar-item-key": item.key, isOpen: isOpen, label: item.label, onClick: handleItemSelect, size: subItemSize, title: item.title })] }, item.key))) }) }) })) : (_jsx(Flyout, { open: hovered, title: title, items: items, onItemSelect: handleItemSelect }))] }));
+    return (_jsxs("li", { className: cn('relative w-full', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(ActionButton, { active: groupActive, "aria-expanded": isOpen ? expanded : undefined, icon: icon, isOpen: isOpen, label: title, labelClassName: labelVisible ? 'opacity-100' : 'opacity-0', onClick: handleGroupClick, expanded: expanded, showChevron: collapsible && isOpen, tone: "subtle" }), isOpen ? (_jsx("div", { className: "grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-[var(--duration-normal)] ease-out data-[expanded=true]:grid-rows-[1fr] data-[expanded=true]:opacity-100", "data-expanded": expanded, children: _jsx("div", { className: "relative min-h-0 overflow-hidden", children: _jsx("ul", { className: "flex w-full flex-col", children: items.map((item, index) => (_jsxs("li", { className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: cn('bg-app-border absolute left-7 top-0 w-px', index === items.length - 1 ? 'h-1/2' : 'bottom-0') }), _jsx("span", { "aria-hidden": "true", className: "bg-app-border absolute left-7 top-1/2 h-px w-5" }), _jsx(SubActionButton, { active: item.active, "data-sidebar-item-key": item.key, isOpen: isOpen, label: item.label, onClick: handleItemSelect, size: subItemSize, title: item.title })] }, item.key))) }) }) })) : (_jsx(Flyout, { open: hovered, title: title, items: items, onItemSelect: handleItemSelect }))] }));
 }
 function Flyout({ items, onItemSelect, open, title }) {
-    return (_jsxs("div", { className: "border-app-border bg-background-secondary invisible pointer-events-none absolute left-[calc(100%+0.375rem)] top-0 z-[70] min-w-52 -translate-x-2 overflow-hidden rounded-xl border p-2 opacity-0 shadow-[0_8px_24px_-4px_rgba(0,0,0,0.16),0_2px_8px_-2px_rgba(0,0,0,0.08)] transition-[opacity,transform,visibility] duration-150 data-[open=true]:visible data-[open=true]:pointer-events-auto data-[open=true]:translate-x-0 data-[open=true]:opacity-100", "data-open": open, children: [_jsx("span", { "aria-hidden": "true", className: "absolute right-full top-0 h-full w-2.5" }), _jsx("p", { className: "text-foreground-muted mb-2 text-[11px] font-semibold uppercase tracking-[0.14em]", children: title }), _jsx("div", { className: "flex max-h-[calc(100vh-5rem)] flex-col overflow-y-auto", children: items.map((item) => (_jsxs("button", { type: "button", "data-sidebar-item-key": item.key, onClick: onItemSelect, className: cn('group focus-visible:ring-brand/35 flex h-9 min-h-9 w-full cursor-pointer items-center gap-2 rounded-lg text-left text-xs font-medium leading-none transition-colors focus-visible:ring-2 focus-visible:outline-none', item.active
-                        ? '!bg-[rgb(var(--color-brand)/0.08)] text-foreground font-semibold shadow-[inset_0_0_0_1px_rgb(var(--color-brand)/0.10)] hover:!bg-[rgb(var(--color-brand)/0.12)] dark:!bg-[rgb(var(--color-brand)/0.13)] dark:text-foreground dark:hover:!bg-[rgb(var(--color-brand)/0.17)]'
-                        : '!bg-transparent text-foreground-muted hover:!bg-[rgb(var(--color-brand)/0.12)] hover:text-foreground hover:font-semibold dark:hover:!bg-[rgb(var(--color-brand)/0.17)] dark:hover:text-foreground'), children: [_jsx("span", { className: "grid h-3.5 w-3.5 flex-none place-items-center text-current transition-colors [&>svg]:h-3.5 [&>svg]:w-3.5", children: item.icon }), _jsx("span", { className: "flex min-h-4 items-center leading-none", children: item.label })] }, item.key))) })] }));
+    return (_jsxs("div", { className: "border-app-border bg-[var(--sidebar-flyout-background)] invisible pointer-events-none absolute left-[calc(100%+0.375rem)] top-0 z-[var(--z-flyout)] min-w-52 -translate-x-2 overflow-hidden rounded-xl border p-2 opacity-0 shadow-[var(--shadow-flyout)] transition-[opacity,transform,visibility] duration-[var(--duration-fast)] data-[open=true]:visible data-[open=true]:pointer-events-auto data-[open=true]:translate-x-0 data-[open=true]:opacity-100", "data-open": open, children: [_jsx("span", { "aria-hidden": "true", className: "absolute right-full top-0 h-full w-2.5" }), _jsx("p", { className: "text-foreground-muted mb-2 text-[length:var(--font-size-caption)] font-semibold uppercase tracking-[var(--letter-spacing-caps)]", children: title }), _jsx("div", { className: "flex max-h-[calc(100vh-5rem)] flex-col overflow-y-auto", children: items.map((item) => (_jsxs("button", { type: "button", "data-sidebar-item-key": item.key, onClick: onItemSelect, className: cn('group focus-visible:ring-brand/35 flex h-9 min-h-9 w-full cursor-pointer items-center gap-2 rounded-lg text-left text-xs font-medium leading-none transition-colors focus-visible:ring-2 focus-visible:outline-none', item.active
+                        ? '!bg-transparent text-foreground font-semibold'
+                        : '!bg-transparent text-foreground-muted hover:text-foreground hover:font-semibold'), children: [_jsx("span", { className: "grid h-3.5 w-3.5 flex-none place-items-center text-current transition-colors [&>svg]:h-3.5 [&>svg]:w-3.5", children: item.icon }), _jsx("span", { className: "flex min-h-4 items-center leading-none", children: item.label })] }, item.key))) })] }));
 }
 function subActionButtonTone(active, size) {
     if (size === 'compact') {
         return active
-            ? '!bg-[rgb(var(--color-brand)/0.08)] text-foreground font-semibold shadow-[inset_0_0_0_1px_rgb(var(--color-brand)/0.10)] hover:!bg-[rgb(var(--color-brand)/0.12)] dark:!bg-[rgb(var(--color-brand)/0.13)] dark:text-foreground dark:hover:!bg-[rgb(var(--color-brand)/0.17)]'
-            : '!bg-transparent text-foreground-muted hover:!bg-[rgb(var(--color-brand)/0.12)] hover:text-foreground hover:font-semibold dark:hover:!bg-[rgb(var(--color-brand)/0.17)] dark:hover:text-foreground';
+            ? '!bg-transparent text-foreground font-semibold'
+            : '!bg-transparent text-foreground-muted hover:text-foreground hover:font-semibold';
     }
     return active
-        ? 'bg-[rgb(var(--color-brand)/0.08)] text-foreground font-semibold dark:bg-[rgb(var(--color-brand)/0.13)] dark:text-foreground'
-        : 'text-foreground-muted hover:bg-[rgb(var(--color-brand)/0.12)] hover:text-foreground hover:font-semibold dark:hover:bg-[rgb(var(--color-brand)/0.17)] dark:hover:text-foreground';
+        ? 'bg-transparent text-foreground font-semibold'
+        : 'text-foreground-muted hover:text-foreground hover:font-semibold';
 }
 function sidebarButtonClasses(active, size, tone) {
     return cn('group focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl bg-transparent text-left transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9' : 'h-11 min-h-11', actionButtonTone(active, tone));
@@ -115,12 +115,12 @@ function sidebarButtonClasses(active, size, tone) {
 function actionButtonTone(active, tone) {
     if (tone === 'subtle') {
         return active
-            ? '!bg-[rgb(var(--color-brand)/0.08)] text-foreground font-semibold shadow-[inset_0_0_0_1px_rgb(var(--color-brand)/0.12)] hover:!bg-[rgb(var(--color-brand)/0.12)] dark:!bg-[rgb(var(--color-brand)/0.13)] dark:text-foreground dark:shadow-[inset_0_0_0_1px_rgb(var(--color-brand)/0.18)] dark:hover:!bg-[rgb(var(--color-brand)/0.17)]'
-            : '!bg-transparent text-foreground-muted hover:!bg-[rgb(var(--color-brand)/0.12)] hover:text-foreground hover:font-semibold dark:hover:!bg-[rgb(var(--color-brand)/0.17)] dark:hover:text-foreground';
+            ? '!bg-[var(--sidebar-item-active)] text-foreground font-semibold hover:!bg-[var(--sidebar-item-hover)]'
+            : '!bg-transparent text-foreground-muted hover:!bg-[var(--sidebar-item-hover)] hover:text-foreground hover:font-semibold';
     }
     return active
-        ? 'bg-white/80 text-foreground font-semibold shadow-[inset_0_0_0_1px_rgba(15,23,42,0.06)] dark:bg-white/[0.08] dark:text-foreground'
-        : 'text-foreground-muted hover:bg-white/70 hover:text-foreground hover:shadow-[inset_0_0_0_1px_rgba(15,23,42,0.05)] dark:hover:bg-white/[0.06] dark:hover:text-foreground';
+        ? 'bg-[var(--sidebar-neutral-active)] text-foreground font-semibold'
+        : 'text-foreground-muted hover:bg-[var(--sidebar-neutral-hover)] hover:text-foreground';
 }
 function clearHoverTimer(timerRef) {
     if (timerRef.current) {
@@ -129,7 +129,7 @@ function clearHoverTimer(timerRef) {
     }
 }
 function ChevronIcon({ expanded }) {
-    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: cn('h-4 w-4 transition-transform duration-200', expanded && 'rotate-180'), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", children: _jsx("path", { d: "m6 8 4 4 4-4" }) }));
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: cn('h-4 w-4 transition-transform duration-[var(--duration-normal)]', expanded && 'rotate-180'), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", children: _jsx("path", { d: "m6 8 4 4 4-4" }) }));
 }
 export const Sidebar = {
     Root,

package/dist/components/Switch.js

@@ -36,7 +36,7 @@ function SwitchBase({ checked, className, errorMessage, id, inputChecked, inputD
         onCheckedChange?.(nextChecked);
         onChange?.(nextChecked);
     }
-    const button = (controlId, describedBy, disabled = resolvedDisabled) => (_jsx("button", { type: "button", role: "switch", "aria-checked": !!resolvedChecked, "aria-label": label, "aria-describedby": describedBy, id: controlId, name: resolvedName, onClick: handleClick, onBlur: inputOnBlur, disabled: disabled, "data-checked": !!resolvedChecked, className: cn('app-switch focus:ring-brand/50 inline-flex shrink-0 flex-none self-center rounded-full transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none', sizeClasses.root, disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), ...props, children: _jsx("span", { className: cn('app-switch__thumb block rounded-full shadow-sm transition-transform duration-200', sizeClasses.thumb), style: { transform: `translateX(${resolvedChecked ? sizeClasses.offset : 0}px)` } }) }));
+    const button = (controlId, describedBy, disabled = resolvedDisabled) => (_jsx("button", { type: "button", role: "switch", "aria-checked": !!resolvedChecked, "aria-label": label, "aria-describedby": describedBy, id: controlId, name: resolvedName, onClick: handleClick, onBlur: inputOnBlur, disabled: disabled, "data-checked": !!resolvedChecked, className: cn('app-switch focus:ring-brand/50 inline-flex shrink-0 flex-none self-center rounded-full transition-colors duration-[var(--duration-normal)] focus:ring-2 focus:ring-offset-2 focus:outline-none', sizeClasses.root, disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), ...props, children: _jsx("span", { className: cn('app-switch__thumb block rounded-full shadow-sm transition-transform duration-[var(--duration-normal)]', sizeClasses.thumb), style: { transform: `translateX(${resolvedChecked ? sizeClasses.offset : 0}px)` } }) }));
     if (display === 'inline') {
         const labelElement = label ? (_jsx("span", { className: cn('min-w-0 flex-1 text-sm font-medium leading-snug text-foreground', labelClassName), children: label })) : null;
         const isLabelAfter = labelPosition === 'right' || labelPosition === 'bottom';

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,cAAe,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACpE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC/C;AA6ED,UAAU,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA4CD,eAAO,MAAM,0BAA0B,QAAqD,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAyB9C,wBAAgB,yBAAyB,CAAC,WAAW,SAAI,EAAE,aAAa,UAAQ,UAQ/E;AAED,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC3E,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AA+BD,UAAU,mBAAoB,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAYD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;CAAG;AA8BhF;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAmB/D,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAoBD,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,cAAe,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACpE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC/C;AA6ED,UAAU,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA4CD,eAAO,MAAM,0BAA0B,QAAqD,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAyB9C,wBAAgB,yBAAyB,CAAC,WAAW,SAAI,EAAE,aAAa,UAAQ,UAQ/E;AAED,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC3E,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AA+BD,UAAU,mBAAoB,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAYD,UAAU,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;CAAG;AA8BhF;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAiB/D,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAoBD,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC"}

package/dist/components/Table.js

@@ -8,7 +8,7 @@ const Root = forwardRef(({ children, chrome = 'default', className, density = 'd
     const tableChildren = childNodes.filter((child) => !isValidElement(child) || child.type !== Pagination);
     const paginationChildren = childNodes.filter((child) => isValidElement(child) && child.type === Pagination);
     const { className: wrapperPropsClassName, ...resolvedWrapperProps } = wrapperProps ?? {};
-    return (_jsxs("div", { ...resolvedWrapperProps, "data-slot": "table-root", className: cn('bg-surface flex w-full min-w-0 flex-col overflow-hidden', fill && 'h-full min-h-0 grow', isFramed && 'border-app-border rounded-[var(--radius)] border', isFramed && chrome === 'default' && 'shadow-[0_4px_6px_-1px_rgb(0_0_0/0.07),0_2px_4px_-2px_rgb(0_0_0/0.05)]', density === 'compact' && '[&_td]:py-2 [&_th]:py-2', wrapperPropsClassName, wrapperClassName), children: [_jsx("div", { className: cn('min-h-0 flex-1 overflow-auto', viewportClassName), children: _jsx("table", { ref: ref, className: cn('w-full border-separate border-spacing-0 caption-bottom text-sm text-foreground', layout === 'fixed' && 'table-fixed', className), ...props, children: tableChildren }) }), paginationChildren.length > 0 && (_jsx("div", { "data-slot": "table-pagination", className: cn('border-app-border bg-background-secondary shrink-0 border-t px-3 py-2', density === 'compact' && 'px-3 py-2'), children: paginationChildren }))] }));
+    return (_jsxs("div", { ...resolvedWrapperProps, "data-slot": "table-root", className: cn('bg-surface flex w-full min-w-0 flex-col overflow-hidden', fill && 'h-full min-h-0 grow', isFramed && 'border-app-border rounded-[var(--radius)] border', isFramed && chrome === 'default' && 'shadow-[var(--shadow-sm)]', density === 'compact' && '[&_td]:py-2 [&_th]:py-2', wrapperPropsClassName, wrapperClassName), children: [_jsx("div", { className: cn('min-h-0 flex-1 overflow-auto', viewportClassName), children: _jsx("table", { ref: ref, className: cn('w-full border-separate border-spacing-0 caption-bottom text-sm text-foreground', layout === 'fixed' && 'table-fixed', className), ...props, children: tableChildren }) }), paginationChildren.length > 0 && (_jsx("div", { "data-slot": "table-pagination", className: cn('border-app-border bg-background-secondary shrink-0 border-t px-3 py-2', density === 'compact' && 'px-3 py-2'), children: paginationChildren }))] }));
 });
 Root.displayName = 'Table.Root';
 const Header = forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('bg-background-secondary', className), ...props }));
@@ -19,7 +19,7 @@ const Footer = forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref
 Footer.displayName = 'Table.Footer';
 const Row = forwardRef(({ className, isInteractive = true, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('transition-colors hover:bg-[color-mix(in_srgb,var(--brand)_5%,transparent)] has-[td[data-slot=table-action-cell]:hover]:bg-transparent last:[&>td]:border-b-0', isInteractive && 'cursor-pointer', className), ...props })));
 Row.displayName = 'Table.Row';
-const Head = forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('border-app-border bg-background-secondary sticky top-0 z-[2] h-10 whitespace-nowrap border-b px-3 py-2.5 text-left align-middle text-xs font-extrabold tracking-[0.045em] text-foreground-muted uppercase', className), ...props })));
+const Head = forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('border-app-border bg-background-secondary sticky top-0 z-[var(--z-table-header)] h-10 whitespace-nowrap border-b px-3 py-2.5 text-left align-middle text-xs font-extrabold tracking-[var(--letter-spacing-label)] text-foreground-muted uppercase', className), ...props })));
 Head.displayName = 'Table.Head';
 const Cell = forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('border-app-border border-b px-3 py-2.5 align-middle text-foreground', className), ...props })));
 Cell.displayName = 'Table.Cell';
@@ -86,18 +86,16 @@ const ActionCell = forwardRef(({ children, className, style, ...props }, ref) =>
     }, ...props, children: _jsx("div", { className: "flex min-h-7 items-center justify-center", children: children }) })));
 ActionCell.displayName = 'Table.ActionCell';
 /**
- * Mesmo vermelho do `destructive` do ConfirmationDialog: a cor chapada misturada
- * com o `--foreground` puxa para escuro no tema claro e para claro no escuro, o que
- * mantem o tom saturado nos dois. Nao usar os tokens `--status-*-text`: eles sao
- * feitos para texto sobre o fundo do badge e, no escuro, saem lavados (rosa/menta).
+ * Os tons usam os tokens semanticos de icone, que preservam saturacao e contraste
+ * nos temas claro e escuro sem repetir hexadecimais no componente.
  *
  * `!` obrigatorio: o cn do pacote nao usa tailwind-merge, entao sem ele o
  * `text-foreground-muted`/`hover:bg` do ghost venceria pela ordem do CSS.
  */
 const actionToneClasses = {
     default: '',
-    success: 'text-[color-mix(in_srgb,#16a34a_86%,var(--foreground))]! hover:bg-[color-mix(in_srgb,#16a34a_10%,transparent)]! hover:text-[color-mix(in_srgb,#16a34a_86%,var(--foreground))]! dark:hover:bg-[color-mix(in_srgb,#16a34a_16%,transparent)]!',
-    danger: 'text-[color-mix(in_srgb,#dc2626_86%,var(--foreground))]! hover:bg-[color-mix(in_srgb,#dc2626_10%,transparent)]! hover:text-[color-mix(in_srgb,#dc2626_86%,var(--foreground))]! dark:hover:bg-[color-mix(in_srgb,#dc2626_16%,transparent)]!',
+    success: 'text-[var(--status-success-icon)]! hover:bg-[color-mix(in_srgb,var(--status-success-icon)_10%,transparent)]! hover:text-[var(--status-success-icon)]! dark:hover:bg-[color-mix(in_srgb,var(--status-success-icon)_16%,transparent)]!',
+    danger: 'text-[var(--status-danger-icon)]! hover:bg-[color-mix(in_srgb,var(--status-danger-icon)_10%,transparent)]! hover:text-[var(--status-danger-icon)]! dark:hover:bg-[color-mix(in_srgb,var(--status-danger-icon)_16%,transparent)]!',
 };
 const Action = forwardRef(({ className, size = 'xs', tone = 'default', tooltip, ...props }, ref) => (
 // `props` vem primeiro: o corpo (variant/size/className) e do Table.Action, e nao

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

@@ -1 +1 @@
-{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAa9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA4DrB"}
+{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA4DrB"}

package/dist/components/TabsUnderlined.js

@@ -3,9 +3,9 @@ import { useMemo, useState } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { cn } from '../utils/cn';
 const DEFAULT_TAB_MIN_WIDTH = '8.75rem';
-const TAB_BAR_BACKGROUND = 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--background-secondary))]';
-const TAB_INACTIVE_BACKGROUND = 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--background-secondary))]';
-const TAB_INACTIVE_HOVER_BACKGROUND = 'hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--background-secondary))]';
+const TAB_BAR_BACKGROUND = 'bg-[var(--tabs-background)]';
+const TAB_INACTIVE_BACKGROUND = 'bg-[var(--tabs-background)]';
+const TAB_INACTIVE_HOVER_BACKGROUND = 'hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--tabs-background))]';
 export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels = false, value, }) {
     const visibleItems = useMemo(() => items.filter((item) => item.visible ?? true), [items]);
     const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
@@ -17,7 +17,7 @@ export function TabsUnderlined({ className, contentClassName, defaultValue, item
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
     }
-    return (_jsx("div", { className: cn('border-app-border bg-background-secondary flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex min-w-0 overflow-x-auto overflow-y-hidden border-b text-sm', TAB_BAR_BACKGROUND, listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
+    return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn("flex min-w-0 overflow-x-auto overflow-y-hidden rounded-t-[calc(var(--radius-xl)-1px)] text-sm after:min-w-0 after:flex-1 after:border-b after:border-app-border after:bg-[var(--tabs-background)] after:content-['']", TAB_BAR_BACKGROUND, listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
 }
 function TabTrigger({ children, className, value, maxWidth, minWidth, width, truncate, }) {
     const style = {
@@ -25,5 +25,5 @@ function TabTrigger({ children, className, value, maxWidth, minWidth, width, tru
         minWidth: minWidth ?? DEFAULT_TAB_MIN_WIDTH,
         width,
     };
-    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-background-secondary data-[state=active]:bg-background-secondary data-[state=active]:text-foreground -mb-px inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-transparent px-4 py-2 text-sm font-medium transition-colors first:border-l-0 focus:outline-none focus-visible:ring-2', TAB_INACTIVE_BACKGROUND, TAB_INACTIVE_HOVER_BACKGROUND, className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
+    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 border-b-app-border data-[state=active]:border-app-border data-[state=active]:!border-b-transparent data-[state=active]:bg-surface data-[state=active]:text-foreground inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-x-transparent px-4 py-2 text-sm font-medium transition-colors first:border-l-0 focus:outline-none focus-visible:ring-2', TAB_INACTIVE_BACKGROUND, TAB_INACTIVE_HOVER_BACKGROUND, className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
 }

package/dist/components/ThemePreferencesSelector.js

@@ -21,17 +21,17 @@ export function ThemePreferencesSelector({ disabled = false, locked = false, onC
         }
         onChange({ ...value, color: option.key });
     }
-    return (_jsxs("div", { className: "grid gap-4", children: [showColorSelector ? (_jsxs("section", { className: "grid gap-2", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.16em] text-foreground-muted", children: "Cor do sistema" }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => {
+    return (_jsxs("div", { className: "grid gap-4", children: [showColorSelector ? (_jsxs("section", { className: "grid gap-2", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[var(--letter-spacing-caps)] text-foreground-muted", children: "Cor do sistema" }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => {
                             const isSelected = value.color === option.key;
                             const isOptionLocked = locked || option.locked;
-                            return (_jsx("button", { type: "button", className: cn('relative size-8 cursor-pointer rounded-full border-2 border-transparent shadow-[inset_0_0_0_1px_color-mix(in_srgb,#fff_32%,transparent),0_8px_18px_-14px_rgba(0,0,0,0.55)] transition-[border-color,box-shadow,transform,opacity] hover:-translate-y-px hover:border-[color-mix(in_srgb,var(--brand)_52%,transparent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:opacity-60', isSelected && 'border-[color-mix(in_srgb,var(--brand)_64%,#fff)] shadow-[0_0_0_3px_color-mix(in_srgb,var(--brand)_20%,transparent)]', isOptionLocked && 'cursor-not-allowed opacity-45 saturate-50 hover:translate-y-0 hover:border-transparent'), style: { '--theme-color': option.primary, background: option.primary }, onClick: () => selectColor(option), disabled: disabled, "aria-pressed": isSelected, "aria-label": isOptionLocked ? `${option.label} bloqueado` : option.label, title: isOptionLocked && option.requiredPlan
+                            return (_jsx("button", { type: "button", className: cn('relative size-8 cursor-pointer rounded-full border-2 border-transparent shadow-[var(--shadow-theme-swatch)] transition-[border-color,box-shadow,transform,opacity] hover:-translate-y-px hover:border-[color-mix(in_srgb,var(--brand)_52%,transparent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:opacity-60', isSelected && 'border-[color-mix(in_srgb,var(--brand)_64%,var(--on-solid))] shadow-[var(--shadow-focus)]', isOptionLocked && 'cursor-not-allowed opacity-45 saturate-50 hover:translate-y-0 hover:border-transparent'), style: { '--theme-color': option.primary, background: option.primary }, onClick: () => selectColor(option), disabled: disabled, "aria-pressed": isSelected, "aria-label": isOptionLocked ? `${option.label} bloqueado` : option.label, title: isOptionLocked && option.requiredPlan
                                     ? `${option.label} exige ${option.requiredPlan}`
                                     : option.label }, option.key));
-                        }) })] })) : null, showAppearanceSelector ? (_jsxs("section", { className: "grid gap-2", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.16em] text-foreground-muted", children: "Aparencia" }), _jsx("div", { className: "flex flex-wrap items-center justify-start gap-2", children: appearanceOptions.map((option) => {
+                        }) })] })) : null, showAppearanceSelector ? (_jsxs("section", { className: "grid gap-2", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[var(--letter-spacing-caps)] text-foreground-muted", children: "Aparencia" }), _jsx("div", { className: "flex flex-wrap items-center justify-start gap-2", children: appearanceOptions.map((option) => {
                             const Icon = option.Icon;
                             const isSelected = value.appearance === option.value;
                             return (_jsxs("button", { type: "button", className: cn('border-app-border bg-surface inline-flex h-9 w-full max-w-[120px] cursor-pointer items-center justify-center gap-1.5 rounded-md border px-3 text-xs font-bold text-foreground-muted transition-[background-color,border-color,color,box-shadow] hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:cursor-not-allowed disabled:opacity-60', appearanceButtonClassName, isSelected &&
                                     (selectedAppearanceButtonClassName ??
-                                        'border-brand bg-brand text-primary-foreground shadow-[0_0_0_3px_color-mix(in_srgb,var(--brand)_24%,transparent)]')), style: isSelected ? { ...appearanceButtonStyle, ...selectedAppearanceButtonStyle } : appearanceButtonStyle, onClick: () => selectAppearance(option.value), disabled: disabled || locked, "aria-pressed": isSelected, "data-selected": isSelected, children: [_jsx(Icon, { "aria-hidden": "true", size: 14, strokeWidth: 2 }), option.label] }, option.value));
+                                        'border-brand bg-brand text-primary-foreground shadow-[var(--shadow-focus)]')), style: isSelected ? { ...appearanceButtonStyle, ...selectedAppearanceButtonStyle } : appearanceButtonStyle, onClick: () => selectAppearance(option.value), disabled: disabled || locked, "aria-pressed": isSelected, "data-selected": isSelected, children: [_jsx(Icon, { "aria-hidden": "true", size: 14, strokeWidth: 2 }), option.label] }, option.value));
                         }) })] })) : null] }));
 }

package/dist/components/Tooltip.js

@@ -36,5 +36,5 @@ export function Tooltip({ children, className, content, delayDuration = 300, ope
             return;
         setOpen((current) => !current);
     }
-    return (_jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, children: _jsxs(TooltipPrimitive.Root, { open: openOnClick ? open : undefined, onOpenChange: openOnClick ? handleOpenChange : undefined, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, ref: triggerRef, onClick: handleTriggerClick, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: contentRef, className: cn('border-app-border bg-surface text-foreground z-[200] rounded-md border px-3 py-1.5 text-xs shadow-lg', 'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), side: side, sideOffset: sideOffset, children: [content, _jsx(TooltipPrimitive.Arrow, { className: "fill-surface" })] }) })] }) }));
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, children: _jsxs(TooltipPrimitive.Root, { open: openOnClick ? open : undefined, onOpenChange: openOnClick ? handleOpenChange : undefined, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, ref: triggerRef, onClick: handleTriggerClick, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: contentRef, className: cn('border-app-border bg-surface text-foreground z-[var(--z-tooltip)] rounded-md border px-3 py-1.5 text-xs shadow-[var(--shadow-md)]', 'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), side: side, sideOffset: sideOffset, children: [content, _jsx(TooltipPrimitive.Arrow, { className: "fill-surface" })] }) })] }) }));
 }

package/dist/components/form-control-helpers.js

@@ -1,7 +1,7 @@
 import { cn } from '../utils/cn';
 export const fieldWrapper = 'flex w-full flex-col space-y-1';
 export const labelBase = 'text-md font-medium';
-const controlShared = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 font-medium border', 'transition-[background-color,border-color,box-shadow,color] duration-200', 'disabled:cursor-not-allowed disabled:opacity-60');
+const controlShared = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 font-medium border', 'transition-[background-color,border-color,box-shadow,color] duration-[var(--duration-normal)]', 'disabled:cursor-not-allowed disabled:opacity-60');
 const controlDefault = cn(controlShared, 'bg-surface border-app-border', 'enabled:hover:border-brand', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
 const controlFilled = cn(controlShared, 'bg-input-bg border-app-border', 'enabled:hover:border-brand enabled:hover:bg-[color-mix(in_srgb,var(--input-bg)_75%,var(--surface))]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
 const controlGhost = cn(controlShared, 'bg-transparent border-transparent', 'enabled:hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,transparent)] enabled:hover:border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/25', 'disabled:bg-transparent disabled:border-transparent');