@wellingtonhlc/shared-ui 0.26.13 → 0.26.14

package/dist/components/Banner.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export type BannerVariant = 'info' | 'warning' | 'critical' | 'success';
+export type BannerSize = 'sm' | 'md' | 'lg';
+export interface BannerProps {
+    variant?: BannerVariant;
+    size?: BannerSize;
+    closable?: boolean;
+    onClose?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+export declare function Banner({ variant, size, closable, onClose, className, children, }: BannerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAeD,wBAAgB,MAAM,CAAC,EACrB,OAAgB,EAChB,IAAW,EACX,QAAe,EACf,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,WAAW,sCAwCb"}

package/dist/components/Banner.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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)]',
+};
+const sizeStyles = {
+    sm: 'min-h-10 px-3 py-2 text-sm',
+    md: 'min-h-11 px-4 py-2.5 text-sm',
+    lg: 'min-h-12 px-4 py-3 text-base',
+};
+export function Banner({ variant = 'info', size = 'md', closable = true, onClose, className, children, }) {
+    const [visible, setVisible] = useState(true);
+    function handleClose() {
+        if (onClose) {
+            onClose();
+            return;
+        }
+        setVisible(false);
+    }
+    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] }));
+}

package/dist/components/FieldControl.js

@@ -48,26 +48,26 @@ export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '',
     };
     const renderedChildren = typeof children === 'function' ? children(renderProps) : children;
     const renderedLabel = label ? (_jsxs("div", { className: cn('flex items-center justify-between gap-2', isHorizontal && 'shrink-0'), style: { order: labelOrder }, children: [_jsx("label", { htmlFor: componentId, className: mergedLabelClassName, children: label }), labelAction] })) : null;
-    return (_jsxs("div", { className: cn(fieldWrapper, wrapperClassName, scopeClass, roundedClass), "data-disabled": disabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsx("style", { children: `
-        .${scopeClass} input,
-        .${scopeClass} textarea,
-        .${scopeClass} select { color: var(--foreground); }
-        .${scopeClass} input::placeholder,
-        .${scopeClass} textarea::placeholder,
-        .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.34; }
-        .dark .${scopeClass} input::placeholder,
-        .dark .${scopeClass} textarea::placeholder,
-        .dark .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.50; }
-        .${scopeClass} input::-webkit-input-placeholder,
-        .${scopeClass} textarea::-webkit-input-placeholder { color: var(--muted-foreground); opacity: 0.34; }
-        .dark .${scopeClass} input::-webkit-input-placeholder,
-        .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} input::placeholder,
-        .${roundedClass} textarea::placeholder,
-        .${roundedClass} select::placeholder { opacity: 0.5; }
+    return (_jsxs("div", { className: cn(fieldWrapper, wrapperClassName, scopeClass, roundedClass), "data-disabled": disabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsx("style", { children: `
+        .${scopeClass} input,
+        .${scopeClass} textarea,
+        .${scopeClass} select { color: var(--foreground); }
+        .${scopeClass} input::placeholder,
+        .${scopeClass} textarea::placeholder,
+        .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.34; }
+        .dark .${scopeClass} input::placeholder,
+        .dark .${scopeClass} textarea::placeholder,
+        .dark .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.50; }
+        .${scopeClass} input::-webkit-input-placeholder,
+        .${scopeClass} textarea::-webkit-input-placeholder { color: var(--muted-foreground); opacity: 0.34; }
+        .dark .${scopeClass} input::-webkit-input-placeholder,
+        .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} input::placeholder,
+        .${roundedClass} textarea::placeholder,
+        .${roundedClass} select::placeholder { opacity: 0.5; }
       ` }), _jsxs("div", { className: cn('flex gap-2', flexDirection), children: [labelOrder === 0 && renderedLabel, _jsx("div", { style: { order: inputOrder }, className: isHorizontal ? 'flex-1' : undefined, children: renderedChildren }), labelOrder === 1 && renderedLabel] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage, hasValidation: hasValidation })] }));
 };
 FieldControl.displayName = 'FieldControl';

package/dist/components/Loading.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode, type SVGProps } from 'react';
+declare const sizeClasses: {
+    readonly xs: "h-3 w-3";
+    readonly sm: "h-4 w-4";
+    readonly md: "h-5 w-5";
+    readonly lg: "h-6 w-6";
+};
+export type LoadingSize = keyof typeof sizeClasses;
+export interface LoadingProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    isLoading?: boolean;
+    children?: ReactNode;
+    size?: LoadingSize;
+    strokeWidth?: number;
+}
+export declare function Loading({ isLoading, children, className, size, strokeWidth, 'aria-label': ariaLabel, ...props }: LoadingProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=Loading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../src/components/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAS,MAAM,OAAO,CAAC;AAI7D,QAAA,MAAM,WAAW;;;;;CAKP,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAgB,EAChB,QAAQ,EACR,SAAS,EACT,IAAW,EACX,WAAe,EACf,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,YAAY,+TAoCd"}

package/dist/components/Loading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../utils/cn';
+const sizeClasses = {
+    xs: 'h-3 w-3',
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-6 w-6',
+};
+export function Loading({ isLoading = true, children, className, size = 'sm', strokeWidth = 4, 'aria-label': ariaLabel, ...props }) {
+    const gradientId = useId().replace(/:/g, '');
+    if (!isLoading)
+        return children;
+    return (_jsxs("svg", { className: cn('text-brand m-auto animate-spin', sizeClasses[size], className), viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", role: ariaLabel ? 'status' : undefined, "aria-label": ariaLabel, "aria-hidden": ariaLabel ? undefined : true, ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }), _jsx("stop", { offset: "70%", stopColor: "currentColor", stopOpacity: "0.25" }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), _jsx("circle", { cx: "24", cy: "24", r: "18", stroke: "currentColor", strokeOpacity: "0.06", strokeWidth: strokeWidth, fill: "none" }), _jsx("circle", { cx: "24", cy: "24", r: "18", stroke: `url(#${gradientId})`, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: "80 113", transform: "rotate(-90 24 24)", fill: "none" })] }));
+}

package/dist/components/LoadingOverlay.d.ts

@@ -0,0 +1,11 @@
+import { type LoadingSize } from './Loading';
+export type LoadingOverlayVariant = 'solid' | 'scrim';
+export interface LoadingOverlayProps {
+    open?: boolean;
+    variant?: LoadingOverlayVariant;
+    size?: LoadingSize;
+    label?: string;
+    className?: string;
+}
+export declare function LoadingOverlay({ open, variant, size, label, className, }: LoadingOverlayProps): import("react").JSX.Element | null;
+//# sourceMappingURL=LoadingOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../src/components/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAItD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAY,EACZ,OAAiB,EACjB,IAAW,EACX,KAAoB,EACpB,SAAS,GACV,EAAE,mBAAmB,sCAiBrB"}

package/dist/components/LoadingOverlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loading } from './Loading';
+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 }) }));
+}

package/dist/index.d.ts

@@ -2,7 +2,10 @@ export { cn } from './utils/cn';
 export { AppShell, type AppShellContentMode, type AppShellMainProps, type AppShellOverlayProps, type AppShellOverlayVariant, type AppShellTopbarButtonProps, type AppShellTopbarProps, } from './components/AppShell';
 export { AppShellActionButton, AppShellActions, AppShellActionsSeparator, type AppShellActionButtonProps, type AppShellActionButtonVariant, type AppShellActionsAlign, type AppShellActionsProps, type AppShellActionsRegion, type AppShellActionsSeparatorProps, } from './components/AppShellActions';
 export { Badge, type BadgeProps, type BadgeVariant } from './components/Badge';
+export { Banner, type BannerProps, type BannerSize, type BannerVariant } from './components/Banner';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button';
+export { Loading, type LoadingProps, type LoadingSize } from './components/Loading';
+export { LoadingOverlay, type LoadingOverlayProps, type LoadingOverlayVariant, } from './components/LoadingOverlay';
 export { DismissiblePopover, type DismissiblePopoverProps } from './components/DismissiblePopover';
 export { ConfirmationDialog, type ConfirmationDialogAction, type ConfirmationDialogProps, type ConfirmationDialogVariant, type ConfirmationDialogVariantInput, } from './components/ConfirmationDialog';
 export { CopyableField, type CopyableFieldProps } from './components/CopyableField';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -2,7 +2,10 @@ export { cn } from './utils/cn';
 export { AppShell, } from './components/AppShell';
 export { AppShellActionButton, AppShellActions, AppShellActionsSeparator, } from './components/AppShellActions';
 export { Badge } from './components/Badge';
+export { Banner } from './components/Banner';
 export { Button } from './components/Button';
+export { Loading } from './components/Loading';
+export { LoadingOverlay, } from './components/LoadingOverlay';
 export { DismissiblePopover } from './components/DismissiblePopover';
 export { ConfirmationDialog, } from './components/ConfirmationDialog';
 export { CopyableField } from './components/CopyableField';

package/dist/styles.css

@@ -637,6 +637,7 @@ h2.react-datepicker__current-month {
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -953,6 +954,9 @@ h2.react-datepicker__current-month {
   .z-\[110\] {
     z-index: 110;
   }
+  .z-\[999\] {
+    z-index: 999;
+  }
   .order-3 {
     order: 3;
   }
@@ -983,6 +987,9 @@ h2.react-datepicker__current-month {
   .m-3 {
     margin: calc(var(--spacing) * 3);
   }
+  .m-auto {
+    margin: auto;
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
@@ -1196,12 +1203,12 @@ h2.react-datepicker__current-month {
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -1292,6 +1299,9 @@ h2.react-datepicker__current-month {
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
   .min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }
@@ -1376,6 +1386,9 @@ h2.react-datepicker__current-month {
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -1400,9 +1413,6 @@ h2.react-datepicker__current-month {
   .w-\[44rem\] {
     width: 44rem;
   }
-  .w-\[46rem\] {
-    width: 46rem;
-  }
   .w-\[52rem\] {
     width: 52rem;
   }
@@ -1595,6 +1605,9 @@ h2.react-datepicker__current-month {
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1855,6 +1868,30 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-\[color-mix\(in_srgb\,\#34d399_45\%\,var\(--app-border\)\)\] {
+    border-color: #34d399;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#34d399 45%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#60a5fa_45\%\,var\(--app-border\)\)\] {
+    border-color: #60a5fa;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#60a5fa 45%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#f87171_52\%\,var\(--app-border\)\)\] {
+    border-color: #f87171;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#f87171 52%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#fbbf24_52\%\,var\(--app-border\)\)\] {
+    border-color: #fbbf24;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#fbbf24 52%,var(--app-border));
+    }
+  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_34\%\,var\(--app-border\)\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1930,6 +1967,30 @@ h2.react-datepicker__current-month {
   .\!bg-transparent {
     background-color: transparent !important;
   }
+  .bg-\[color-mix\(in_srgb\,\#3b82f6_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #3b82f6;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#3b82f6 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#10b981_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #10b981;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#10b981 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#ef4444_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #ef4444;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#ef4444 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#f59e0b_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #f59e0b;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#f59e0b 16%,var(--background-secondary));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_5\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2038,6 +2099,12 @@ h2.react-datepicker__current-month {
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
+  .bg-background\/40 {
+    background-color: var(--color-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2509,18 +2576,30 @@ h2.react-datepicker__current-month {
   .text-\[var\(--primary-foreground\,\#ffffff\)\] {
     color: var(--primary-foreground,#ffffff);
   }
+  .text-\[var\(--status-danger-text\)\] {
+    color: var(--status-danger-text);
+  }
   .text-\[var\(--status-danger-text\,\#7f1d1d\)\] {
     color: var(--status-danger-text,#7f1d1d);
   }
   .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
     color: var(--status-danger-text,#b91c1c);
   }
+  .text-\[var\(--status-info-text\)\] {
+    color: var(--status-info-text);
+  }
   .text-\[var\(--status-info-text\,\#1d4ed8\)\] {
     color: var(--status-info-text,#1d4ed8);
   }
+  .text-\[var\(--status-success-text\)\] {
+    color: var(--status-success-text);
+  }
   .text-\[var\(--status-success-text\,\#15803d\)\] {
     color: var(--status-success-text,#15803d);
   }
+  .text-\[var\(--status-warning-text\)\] {
+    color: var(--status-warning-text);
+  }
   .text-\[var\(--status-warning-text\,\#92400e\)\] {
     color: var(--status-warning-text,#92400e);
   }
@@ -3203,6 +3282,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-black\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-destructive {
     &:hover {
       @media (hover: hover) {
@@ -4040,6 +4129,18 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:hover\:bg-white\/10 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-white\/\[0\.06\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -4476,15 +4577,15 @@ h2.react-datepicker__current-month {
   border-color: var(--status-danger-border);
   background-color: var(--status-danger-bg);
 }
-.app-stat-card__label--default,
-.app-stat-card__description--default,
+.app-stat-card__label--default,
+.app-stat-card__description--default,
 .app-stat-card__icon--default {
   color: var(--foreground-muted);
 }
 .app-stat-card__value--default {
   color: var(--foreground);
 }
-.app-stat-card__label--info,
+.app-stat-card__label--info,
 .app-stat-card__description--info {
   color: var(--status-info-text);
 }
@@ -4494,7 +4595,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--info {
   color: var(--status-info-icon);
 }
-.app-stat-card__label--success,
+.app-stat-card__label--success,
 .app-stat-card__description--success {
   color: var(--status-success-text);
 }
@@ -4504,7 +4605,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--success {
   color: var(--status-success-icon);
 }
-.app-stat-card__label--warning,
+.app-stat-card__label--warning,
 .app-stat-card__description--warning {
   color: var(--status-warning-text);
 }
@@ -4514,7 +4615,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--warning {
   color: var(--status-warning-icon);
 }
-.app-stat-card__label--danger,
+.app-stat-card__label--danger,
 .app-stat-card__description--danger {
   color: var(--status-danger-text);
 }
@@ -4539,14 +4640,14 @@ h2.react-datepicker__current-month {
   background-color: var(--background-secondary) !important;
   border-bottom-color: var(--app-border) !important;
 }
-.react-datepicker__current-month,
+.react-datepicker__current-month,
 .react-datepicker-time__header {
   color: var(--foreground) !important;
   font-size: 0.8125rem !important;
   font-weight: 600 !important;
 }
-.react-datepicker__day-name,
-.react-datepicker__day,
+.react-datepicker__day-name,
+.react-datepicker__day,
 .react-datepicker__time-name {
   width: 2rem;
   line-height: 2rem;
@@ -4567,21 +4668,21 @@ h2.react-datepicker__current-month {
   color: var(--foreground) !important;
   transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
-.react-datepicker__day:hover,
+.react-datepicker__day:hover,
 .react-datepicker__day--keyboard-selected {
   background-color: var(--background) !important;
   color: var(--foreground) !important;
 }
-.react-datepicker__day--disabled,
+.react-datepicker__day--disabled,
 .react-datepicker__day--disabled:hover {
   background-color: transparent !important;
   color: var(--foreground-muted) !important;
   opacity: 0.4;
   cursor: not-allowed;
 }
-.react-datepicker__day--selected,
-.react-datepicker__day--selected:hover,
-.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--selected,
+.react-datepicker__day--selected:hover,
+.react-datepicker__day--in-selecting-range,
 .react-datepicker__day--in-range {
   background-color: var(--brand) !important;
   color: #ffffff !important;
@@ -4621,8 +4722,8 @@ h2.react-datepicker__current-month {
   float: none !important;
   border-left: 1px solid var(--app-border) !important;
 }
-.react-datepicker__time-container .react-datepicker__header--time,
-.react-datepicker__time-container .react-datepicker__time,
+.react-datepicker__time-container .react-datepicker__header--time,
+.react-datepicker__time-container .react-datepicker__time,
 .react-datepicker__time-container .react-datepicker__time-box {
   background-color: var(--background-secondary) !important;
   border-bottom-color: var(--app-border) !important;
@@ -4640,13 +4741,13 @@ h2.react-datepicker__current-month {
   background-color: var(--background) !important;
   color: var(--foreground) !important;
 }
-.react-datepicker__time-list-item--selected,
+.react-datepicker__time-list-item--selected,
 .react-datepicker__time-list-item--selected:hover {
   background-color: var(--brand) !important;
   color: #ffffff !important;
   font-weight: 600 !important;
 }
-.react-datepicker__time-list-item--disabled,
+.react-datepicker__time-list-item--disabled,
 .react-datepicker__time-list-item--disabled:hover {
   color: var(--foreground-muted) !important;
   opacity: 0.4;
@@ -4662,18 +4763,18 @@ h2.react-datepicker__current-month {
 .field-select:focus {
   background-color: var(--input-bg) !important;
 }
-.field-select option,
+.field-select option,
 .field-select optgroup {
   background-color: var(--background-secondary) !important;
   color: var(--foreground) !important;
 }
-.field-select option:checked,
-.field-select option:hover,
+.field-select option:checked,
+.field-select option:hover,
 .field-select option:focus {
   background-color: var(--brand) !important;
   color: #ffffff !important;
 }
-.dark .field-select,
+.dark .field-select,
 [data-theme='dark'] .field-select {
   color-scheme: dark;
 }
@@ -4948,6 +5049,11 @@ h2.react-datepicker__current-month {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -5013,4 +5119,4 @@ h2.react-datepicker__current-month {
       --tw-ease: initial;
     }
   }
-}
+}

package/package.json

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