@wellingtonhlc/shared-ui 0.29.2 → 0.30.0

package/README.md

@@ -207,7 +207,7 @@ Componentes disponiveis na API publica:
 |-------|-------------|
 | Layout | `AppShell`, `Page`, `Sidebar`, `Card`, `StatCard` |
 | Acoes | `Button`, `ActionPrimitives`, `AppShellActions`, `ConfirmationDialog` |
-| Feedback | `Badge`, `EmptyState`, `PageMessage`, `Tooltip`, `CopyableField` |
+| Feedback | `Badge`, `EmptyState`, `PageMessage`, `Tooltip`, `CopyableField`, `NotificationCard` |
 | Formularios | `FieldControl`, `FieldGroup`, `TextField`, `TextareaField`, `SelectField`, `SelectionField`, `DateField`, `DecimalField`, `MultiSelectField`, `PasswordInput`, `Switch`, `RadioGroup` |
 | Consulta | `Filter`, `Workspace` |
 | Dados | `Table`, `Pagination`, `TabsUnderlined` |

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

@@ -1 +1 @@
-{"version":3,"file":"DismissiblePopover.d.ts","sourceRoot":"","sources":["../../src/components/DismissiblePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAiB,EACjB,iBAAuB,GACxB,EAAE,uBAAuB,+BA6EzB"}
+{"version":3,"file":"DismissiblePopover.d.ts","sourceRoot":"","sources":["../../src/components/DismissiblePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAiB,EACjB,iBAAuB,GACxB,EAAE,uBAAuB,+BA4FzB"}

package/dist/components/DismissiblePopover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, } from 'react';
 import { cn } from '../utils/cn';
 export function DismissiblePopover({ open, onOpenChange, trigger, content, className, contentClassName, containerRef, closeDelay = 1500, animationDuration = 180, }) {
     const closeTimerRef = useRef(null);
@@ -17,7 +17,7 @@ export function DismissiblePopover({ open, onOpenChange, trigger, content, class
         animationTimerRef.current = window.setTimeout(() => {
             setContentVisible(false);
             animationTimerRef.current = null;
-        }, animationDuration);
+        }, animationDuration + 50);
         return () => {
             if (animationTimerRef.current !== null) {
                 window.clearTimeout(animationTimerRef.current);
@@ -37,6 +37,12 @@ export function DismissiblePopover({ open, onOpenChange, trigger, content, class
             closeTimerRef.current = null;
         }
     }
+    function clearAnimationTimer() {
+        if (animationTimerRef.current !== null) {
+            window.clearTimeout(animationTimerRef.current);
+            animationTimerRef.current = null;
+        }
+    }
     function handleMouseEnter() {
         clearCloseTimer();
     }
@@ -47,5 +53,11 @@ export function DismissiblePopover({ open, onOpenChange, trigger, content, class
             closeTimerRef.current = null;
         }, closeDelay);
     }
-    return (_jsxs("div", { ref: containerRef, className: cn('relative', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, children: [trigger, contentVisible ? (_jsx("div", { "data-state": open ? 'open' : 'closed', className: cn('transition-[opacity,transform] ease-out', open ? 'translate-x-0 opacity-100' : 'pointer-events-none translate-x-2 opacity-0', contentClassName), style: { transitionDuration: `${animationDuration}ms` }, children: content })) : null] }));
+    function handleTransitionEnd(event) {
+        if (open || event.currentTarget !== event.target || event.propertyName !== 'opacity')
+            return;
+        clearAnimationTimer();
+        setContentVisible(false);
+    }
+    return (_jsxs("div", { ref: containerRef, className: cn('relative', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, children: [trigger, contentVisible ? (_jsx("div", { "data-state": open ? 'open' : 'closed', className: cn('transition-[opacity,transform,translate,scale] ease-out', open ? 'translate-x-0 opacity-100' : 'pointer-events-none translate-x-2 opacity-0', contentClassName), style: { transitionDuration: `${animationDuration}ms` }, onTransitionEnd: handleTransitionEnd, children: content })) : null] }));
 }

package/dist/components/NotificationCard.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type NotificationCardVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface NotificationCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    variant?: NotificationCardVariant;
+    icon?: ReactNode;
+    unread?: boolean;
+    interactive?: boolean;
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
+    dismissLabel?: string;
+    isDismissing?: boolean;
+}
+export declare function NotificationCard({ title, description, meta, variant, icon, unread, interactive, onDismiss, dismissLabel, isDismissing, className, onClick, ...props }: NotificationCardProps): import("react").JSX.Element;
+//# sourceMappingURL=NotificationCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCard.d.ts","sourceRoot":"","sources":["../../src/components/NotificationCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMzE,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC9D,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAgBD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAgB,EAChB,IAAI,EACJ,MAAc,EACd,WAAW,EACX,SAAS,EACT,YAAsC,EACtC,YAAoB,EACpB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAoEvB"}

package/dist/components/NotificationCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
+import { cn } from '../utils/cn';
+const variantClasses = {
+    info: 'text-sky-600 dark:text-sky-700',
+    success: 'text-green-600',
+    warning: 'text-amber-600',
+    danger: 'text-red-600',
+};
+const variantIcons = {
+    info: _jsx(Info, { className: "size-4" }),
+    success: _jsx(CircleCheck, { className: "size-4" }),
+    warning: _jsx(CircleAlert, { className: "size-4" }),
+    danger: _jsx(TriangleAlert, { className: "size-4" }),
+};
+export function NotificationCard({ title, description, meta, variant = 'info', icon, unread = false, interactive, onDismiss, dismissLabel = 'Descartar notificação', isDismissing = false, className, onClick, ...props }) {
+    function handleDismiss(event) {
+        event.stopPropagation();
+        onDismiss?.(event);
+    }
+    return (_jsxs("article", { className: "relative", children: [_jsx("button", { type: "button", className: cn('w-full rounded-md border p-3 text-left transition', onDismiss ? 'pr-8' : 'pr-3', unread
+                    ? 'border-brand/40 bg-brand/5 hover:bg-brand/10 dark:bg-[color-mix(in_srgb,var(--brand)_8%,var(--background))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_12%,var(--background))]'
+                    : 'border-app-border bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] hover:bg-[color-mix(in_srgb,var(--brand)_7%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_4%,var(--background))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_8%,var(--background))]', (interactive ?? Boolean(onClick)) ? 'cursor-pointer' : 'cursor-default', className), onClick: onClick, ...props, children: _jsxs("span", { className: "flex items-start gap-3", children: [_jsx("span", { className: cn('mt-0.5 inline-flex size-7 shrink-0 items-center justify-center', variantClasses[variant]), children: icon ?? variantIcons[variant] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "text-foreground truncate text-sm font-semibold", children: title }), unread ? (_jsx("span", { className: "bg-brand size-2 shrink-0 rounded-full", "aria-hidden": "true" })) : null] }), description ? (_jsx("span", { className: "text-foreground-muted mt-1 block text-sm break-words", children: description })) : null, meta ? (_jsx("span", { className: "text-foreground-muted mt-2 flex flex-wrap items-center gap-2 text-[11px]", children: meta })) : null] })] }) }), onDismiss ? (_jsx("button", { type: "button", "aria-label": dismissLabel, disabled: isDismissing, className: "text-foreground-muted hover:text-foreground hover:bg-background absolute top-2 right-2 z-10 rounded p-0.5 transition disabled:cursor-not-allowed disabled:opacity-40", onClick: handleDismiss, children: _jsx(X, { className: "size-3.5" }) })) : null] }));
+}

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

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

package/dist/styles.css

@@ -596,6 +596,11 @@ h2.react-datepicker__current-month {
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-950: oklch(25.8% 0.092 26.042);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -859,6 +864,9 @@ h2.react-datepicker__current-month {
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -880,6 +888,9 @@ h2.react-datepicker__current-month {
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -931,6 +942,9 @@ h2.react-datepicker__current-month {
   .left-full {
     left: 100%;
   }
+  .z-10 {
+    z-index: 10;
+  }
   .z-\[var\(--z-critical-dialog\)\] {
     z-index: var(--z-critical-dialog);
   }
@@ -1097,6 +1111,10 @@ h2.react-datepicker__current-month {
     width: calc(var(--spacing) * 10) !important;
     height: calc(var(--spacing) * 10) !important;
   }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -1231,6 +1249,9 @@ h2.react-datepicker__current-month {
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[40rem\] {
+    height: 40rem;
+  }
   .h-\[calc\(100\%-1rem\)\] {
     height: calc(100% - 1rem);
   }
@@ -1255,6 +1276,9 @@ h2.react-datepicker__current-month {
   .max-h-\[95vh\] {
     max-height: 95vh;
   }
+  .max-h-\[560px\] {
+    max-height: 560px;
+  }
   .max-h-\[calc\(100vh-5rem\)\] {
     max-height: calc(100vh - 5rem);
   }
@@ -1420,6 +1444,9 @@ h2.react-datepicker__current-month {
   .w-\[34rem\] {
     width: 34rem;
   }
+  .w-\[38rem\] {
+    width: 38rem;
+  }
   .w-\[42rem\] {
     width: 42rem;
   }
@@ -1438,6 +1465,9 @@ h2.react-datepicker__current-month {
   .w-\[min\(10rem\,24vw\)\] {
     width: min(10rem, 24vw);
   }
+  .w-\[min\(24rem\,calc\(100vw-2rem\)\)\] {
+    width: min(24rem, calc(100vw - 2rem));
+  }
   .w-auto {
     width: auto;
   }
@@ -1587,6 +1617,9 @@ h2.react-datepicker__current-month {
     --tw-border-spacing-y: calc(var(--spacing) * 0);
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
+  .origin-top-right {
+    transform-origin: top right;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1627,6 +1660,9 @@ h2.react-datepicker__current-month {
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-default {
+    cursor: default;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1669,6 +1705,9 @@ h2.react-datepicker__current-month {
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
+  .grid-rows-\[auto_1fr\] {
+    grid-template-rows: auto 1fr;
+  }
   .grid-rows-\[auto_minmax\(0\,1fr\)\] {
     grid-template-rows: auto minmax(0,1fr);
   }
@@ -1951,6 +1990,12 @@ h2.react-datepicker__current-month {
   .border-brand {
     border-color: var(--color-brand);
   }
+  .border-brand\/40 {
+    border-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
+    }
+  }
   .border-brand\/50 {
     border-color: var(--color-brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2104,6 +2149,12 @@ h2.react-datepicker__current-month {
   .bg-brand {
     background-color: var(--color-brand);
   }
+  .bg-brand\/5 {
+    background-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand) 5%, transparent);
+    }
+  }
   .bg-brand\/10 {
     background-color: var(--color-brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2125,6 +2176,9 @@ h2.react-datepicker__current-month {
   .bg-input-bg {
     background-color: var(--color-input-bg);
   }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -2272,6 +2326,9 @@ h2.react-datepicker__current-month {
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -2290,6 +2347,9 @@ h2.react-datepicker__current-month {
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2384,6 +2444,12 @@ h2.react-datepicker__current-month {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[length\:var\(--font-size-2xs\)\] {
     font-size: var(--font-size-2xs);
   }
@@ -2550,6 +2616,9 @@ h2.react-datepicker__current-month {
   .text-\[var\(--status-warning-text\)\] {
     color: var(--status-warning-text);
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-brand {
     color: var(--color-brand);
   }
@@ -2574,6 +2643,9 @@ h2.react-datepicker__current-month {
       color: color-mix(in oklab, var(--color-foreground-muted) 90%, transparent);
     }
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-primary {
     color: var(--color-primary);
   }
@@ -2583,6 +2655,12 @@ h2.react-datepicker__current-month {
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-sky-600 {
+    color: var(--color-sky-600);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2703,6 +2781,10 @@ h2.react-datepicker__current-month {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2789,13 +2871,13 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[opacity\,transform\,visibility\] {
-    transition-property: opacity,transform,visibility;
+  .transition-\[opacity\,transform\,translate\,scale\] {
+    transition-property: opacity,transform,translate,scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[opacity\,transform\] {
-    transition-property: opacity,transform;
+  .transition-\[opacity\,transform\,visibility\] {
+    transition-property: opacity,transform,visibility;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -3261,6 +3343,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-brand\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-destructive {
     &:hover {
       @media (hover: hover) {
@@ -3598,6 +3690,11 @@ h2.react-datepicker__current-month {
       opacity: 30%;
     }
   }
+  .disabled\:opacity-40 {
+    &:disabled {
+      opacity: 40%;
+    }
+  }
   .disabled\:opacity-45 {
     &:disabled {
       opacity: 45%;
@@ -3685,6 +3782,22 @@ h2.react-datepicker__current-month {
       color: var(--color-foreground);
     }
   }
+  .data-\[state\=closed\]\:scale-95 {
+    &[data-state="closed"] {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .data-\[state\=open\]\:scale-100 {
+    &[data-state="open"] {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .data-\[state\=open\]\:bg-\[var\(--status-danger-bg\)\] {
     &[data-state="open"] {
       background-color: var(--status-danger-bg);
@@ -3925,6 +4038,22 @@ h2.react-datepicker__current-month {
       border-color: var(--color-red-400);
     }
   }
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,var\(--background\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in srgb,var(--brand) 8%,var(--background));
+      }
+    }
+  }
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_4\%\,var\(--background\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--foreground-muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in srgb,var(--foreground-muted) 4%,var(--background));
+      }
+    }
+  }
   .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_28\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
       background-color: var(--foreground-muted);
@@ -3941,11 +4070,21 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:bg-background-secondary {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-background-secondary);
+    }
+  }
   .dark\:text-red-400 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-red-400);
     }
   }
+  .dark\:text-sky-700 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-sky-700);
+    }
+  }
   .dark\:hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_54\%\,var\(--app-border\)\)\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -3958,6 +4097,30 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,var\(--background\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--brand) 8%,var(--background));
+          }
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,var\(--background\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--brand) 12%,var(--background));
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-icon\)_16\%\,transparent\)\]\! {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -5101,6 +5264,21 @@ h2.react-datepicker__current-month {
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5170,6 +5348,9 @@ h2.react-datepicker__current-month {
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.29.2",
+    "version": "0.30.0",
     "private": false,
     "type": "module",
     "packageManager": "npm@11.12.1",