@datatechsolutions/ui 3.4.0 → 3.5.1

package/dist/{chunk-FSBR4RCK.js → chunk-K4M4B6ME.js}

@@ -879,7 +879,6 @@ function HeroBlock({
   titlePlaceholder,
   subtitle,
   icon,
-  iconShape = "square",
   iconBackground = "glass",
   gradient,
   iconSize = "md",
@@ -897,13 +896,13 @@ function HeroBlock({
   const subtitleClass = KIND_SUBTITLE_CLASSES[kind];
   const eyebrowClass = KIND_EYEBROW_CLASSES[kind];
   const iconGapClass = KIND_ICON_GAP[kind];
-  const radiusClass = iconShape === "round" ? "rounded-full" : iconSize === "sm" ? "rounded-xl" : "rounded-2xl";
+  const radiusClass = iconSize === "sm" ? "rounded-xl" : "rounded-2xl";
   const titleToneClass = tone === "dark" ? "text-white" : "text-slate-950 dark:text-white";
   const subtitleToneClass = tone === "dark" ? "text-white/75" : "text-slate-600 dark:text-slate-300";
   const eyebrowToneClass = tone === "dark" ? "text-white/75" : "text-slate-600 dark:text-slate-300";
   const wrapIcon = (node) => {
     if (iconBackground === "none") {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex shrink-0 items-center justify-center ${sizeClass} ${radiusClass}`, children: node });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex shrink-0 items-center justify-center ${sizeClass}`, children: node });
     }
     if (iconBackground === "gradient" && gradient) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex shrink-0 items-center justify-center ${sizeClass} ${radiusClass} bg-gradient-to-br ${gradient} shadow-lg`, children: node });
@@ -1011,9 +1010,16 @@ function SectionCard({
   collapsible = false,
   defaultOpen = true,
   open: controlledOpen,
-  onOpenChange
+  onOpenChange,
+  accentGradient,
+  actions,
+  toolbar,
+  badges,
+  kind = "section",
+  headingLevel = "h3",
+  eyebrowExtra
 }) {
-  const { icon, title, subtitle, gradient = "from-indigo-500 to-purple-600", rightContent } = header;
+  const { icon, eyebrow, title, subtitle, gradient = "from-indigo-500 to-purple-600", rightContent } = header;
   const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
   const isOpen = controlledOpen ?? internalOpen;
   const setOpen = (next) => {
@@ -1030,18 +1036,30 @@ function SectionCard({
       "aria-hidden": "true"
     }
   ) : null;
-  const headerRight = collapsible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+  const hasRightSlot = rightContent || actions || chevron;
+  const headerRight = hasRightSlot ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
     rightContent,
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions }),
     chevron
-  ] }) : rightContent;
+  ] }) : void 0;
+  const iconSize = kind === "section" ? "sm" : "md";
+  const sectionPad = "px-4 sm:px-6 py-4";
+  const surfacePad = "px-5 sm:px-8 py-5";
+  const bannerPad = "px-5 sm:px-8 py-6 sm:py-8";
+  const displayPad = "px-6 sm:px-10 py-8 sm:py-12";
+  const headerPadCls = kind === "display" ? displayPad : kind === "banner" ? bannerPad : kind === "surface" ? surfacePad : sectionPad;
+  const bodyPadCls = kind === "display" ? "p-6 sm:p-10" : kind === "banner" ? "p-5 sm:p-8" : kind === "surface" ? "p-5 sm:p-8" : "p-4 sm:p-6";
+  const slotXCls = kind === "display" ? "px-6 sm:px-10" : kind === "banner" ? "px-5 sm:px-8" : kind === "surface" ? "px-5 sm:px-8" : "px-4 sm:px-6";
+  const renderedEyebrow = eyebrow && eyebrowExtra ? `${eyebrow}` : eyebrow;
   const headerContent = /* @__PURE__ */ jsxRuntime.jsx(
     HeroBlock,
     {
-      headingLevel: "h3",
-      kind: "section",
-      iconSize: "sm",
+      headingLevel,
+      kind,
+      iconSize,
       iconBackground: "glass",
       icon,
+      eyebrow: renderedEyebrow,
       title,
       subtitle,
       rightContent: headerRight,
@@ -1049,6 +1067,13 @@ function SectionCard({
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { variant, className, children: [
+    accentGradient && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: `h-1.5 w-full bg-gradient-to-r ${accentGradient}`
+      }
+    ),
     collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1056,10 +1081,12 @@ function SectionCard({
         onClick: () => setOpen(!isOpen),
         "aria-expanded": isOpen,
         "aria-controls": bodyId,
-        className: `block w-full cursor-pointer px-4 sm:px-6 py-4 text-left transition-colors hover:bg-white/30 dark:hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-inset ${isOpen ? "border-b liquid-divider" : ""}`,
+        className: `block w-full cursor-pointer text-left transition-colors hover:bg-white/30 dark:hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-inset ${headerPadCls} ${isOpen ? "border-b liquid-divider" : ""}`,
         children: headerContent
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 py-4 border-b liquid-divider", children: headerContent }),
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${headerPadCls} border-b liquid-divider`, children: headerContent }),
+    toolbar && (!collapsible || isOpen) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${slotXCls} pt-5`, children: toolbar }),
+    badges && (!collapsible || isOpen) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${slotXCls} pt-4 flex flex-wrap items-center gap-2`, children: badges }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1067,7 +1094,7 @@ function SectionCard({
         role: collapsible ? "region" : void 0,
         "aria-labelledby": collapsible ? headingId : void 0,
         hidden: collapsible && !isOpen,
-        className: padded ? "p-4 sm:p-6" : "",
+        className: padded ? bodyPadCls : "",
         children
       }
     )
@@ -1602,7 +1629,7 @@ function WheelPicker({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "absolute inset-x-4 z-0 rounded-lg bg-gray-100 dark:bg-gray-800",
+            className: "absolute inset-x-4 z-0 rounded-lg bg-white/55 dark:bg-white/[0.08] border border-white/40 dark:border-white/10 backdrop-blur-md shadow-[inset_0_1px_1.5px_rgba(255,255,255,0.45)]",
             style: {
               top: (containerHeight - itemHeight) / 2,
               height: itemHeight
@@ -3665,48 +3692,35 @@ function HeroSection({
   labelExtra,
   children
 }) {
+  const subtitleIsString = typeof subtitle === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    SectionCard,
     {
-      role: "banner",
-      "data-testid": "hero-section",
-      className: "liquid-surface overflow-hidden rounded-2xl",
+      kind: "banner",
+      headingLevel: "h1",
+      variant: "default",
+      padded: true,
+      accentGradient: gradient,
+      actions,
+      toolbar,
+      badges,
+      eyebrowExtra: labelExtra,
+      header: {
+        icon,
+        eyebrow: label,
+        title,
+        subtitle: subtitleIsString ? subtitle : void 0
+      },
       children: [
-        gradient && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        !subtitleIsString && subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
           {
-            "aria-hidden": "true",
-            className: `h-1.5 w-full bg-gradient-to-r ${gradient}`
+            "data-testid": "hero-subtitle",
+            className: "max-w-xl text-sm text-slate-600 dark:text-white/75 sm:text-lg",
+            children: subtitle
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 sm:p-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            HeroBlock,
-            {
-              headingLevel: "h1",
-              kind: "banner",
-              eyebrow: label,
-              title,
-              subtitle: typeof subtitle === "string" ? subtitle : void 0,
-              icon,
-              iconBackground: "glass",
-              iconSize: "md",
-              rightContent: actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: actions }) : void 0
-            }
-          ),
-          typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              "data-testid": "hero-subtitle",
-              className: "mt-2 max-w-xl text-sm text-slate-600 dark:text-white/75 sm:mt-3 sm:text-lg",
-              children: subtitle
-            }
-          ),
-          labelExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-slate-500", children: labelExtra }),
-          toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "hero-toolbar", className: "mt-4", children: toolbar }),
-          badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4", children: badges }),
-          children
-        ] })
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: !subtitleIsString && subtitle ? "mt-5" : "", children })
       ]
     }
   );
@@ -3714,9 +3728,14 @@ function HeroSection({
 var DEFAULT_STYLE_CONFIG = {
   default: {
     icon: HeroIcons.MapIcon,
-    className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+    className: "bg-slate-500/15 text-slate-700 dark:text-slate-200"
   }
 };
+var CRYSTAL_STYLE = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+};
 function ActiveFilterChips({
   filters,
   onRemoveFilter,
@@ -3733,19 +3752,23 @@ function ActiveFilterChips({
         animate: { opacity: 1, scale: 1 },
         exit: { opacity: 0, scale: 0.8 },
         layout: true,
-        className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium ${colorClass}`,
+        style: CRYSTAL_STYLE,
+        className: `inline-flex items-center gap-1.5 rounded-full border border-current/20 px-3 py-1 text-xs font-semibold ${colorClass}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-3.5 w-3.5", "aria-hidden": true }),
           filter.label,
           onRemoveFilter ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              onClick: () => {
+              type: "button",
+              "aria-label": `remover ${filter.label}`,
+              onClick: (event) => {
+                event.stopPropagation();
                 chunkUZ3CMNUJ_js.triggerHaptic("light");
                 onRemoveFilter(filter);
               },
-              className: "ml-1 rounded-full p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10",
-              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-3.5 w-3.5" })
+              className: "ml-0.5 inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70",
+              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-3 w-3" })
             }
           ) : null
         ]
@@ -4575,8 +4598,8 @@ function SegmentedControl({
       "data-testid": "segmented-control",
       onKeyDown: handleKeyDown,
       className: `
-        relative inline-flex items-center rounded-xl
-        bg-white/40 dark:bg-white/[0.08]
+        liquid-surface relative inline-flex items-center rounded-xl
+        focus-within:ring-2 focus-within:ring-indigo-500/70 focus-within:ring-offset-1
         ${styles2.container}
         ${fullWidth ? "w-full" : ""}
         ${disabled ? "opacity-50 pointer-events-none" : ""}
@@ -4585,7 +4608,13 @@ function SegmentedControl({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "absolute top-1 bottom-1 rounded-lg bg-white/75 dark:bg-white/[0.12] shadow-sm backdrop-blur-sm",
+            "aria-hidden": true,
+            className: "absolute top-1 bottom-1 rounded-lg bg-white/75 dark:bg-white/[0.14] border border-white/60 dark:border-white/15",
+            style: {
+              backdropFilter: "blur(12px) saturate(1.5)",
+              WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+              boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.55), 0 1px 3px -1px rgba(15,23,42,0.12)"
+            },
             initial: false,
             animate: {
               left: indicatorStyle.left,
@@ -4608,10 +4637,11 @@ function SegmentedControl({
               onClick: () => handleSelect(segment.value),
               className: `
               relative z-10 flex items-center justify-center gap-1.5
-              font-medium rounded-lg transition-colors duration-150
+              font-semibold rounded-lg transition-colors duration-150
+              focus:outline-none
               ${styles2.segment}
               ${fullWidth ? "flex-1" : ""}
-              ${isSelected ? "text-slate-900 dark:text-white" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"}
+              ${isSelected ? "text-slate-950 dark:text-white" : "text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}
             `,
               children: [
                 segment.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: segment.icon }),
@@ -7396,12 +7426,12 @@ function ContextMenu({
       "div",
       {
         ref: menuRef,
-        className: `fixed z-[9999] ${minWidthClass} rounded-xl border border-gray-200 bg-white/90 py-1 shadow-lg backdrop-blur-xl dark:border-gray-700 dark:bg-gray-800/90`,
+        className: `liquid-surface-strong fixed z-[9999] ${minWidthClass} rounded-xl py-1 shadow-lg`,
         style: { left: position.x, top: position.y },
         "data-testid": testId,
         children: entries.map((entry) => {
           if (entry.type === "divider") {
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-gray-200 dark:border-gray-700" }, entry.key);
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t liquid-divider" }, entry.key);
           }
           const IconComponent = entry.icon;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7410,7 +7440,7 @@ function ContextMenu({
               type: "button",
               onClick: entry.onClick,
               disabled: entry.disabled,
-              className: `flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors duration-150 ${entry.disabled ? "cursor-not-allowed text-gray-400 dark:text-gray-600" : entry.danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10" : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700/50"}`,
+              className: `flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors duration-150 focus:outline-none focus-visible:bg-indigo-500/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-indigo-500/40 ${entry.disabled ? "cursor-not-allowed text-slate-400 dark:text-slate-600" : entry.danger ? "text-red-600 hover:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/15" : "text-slate-700 hover:bg-white/45 dark:text-slate-200 dark:hover:bg-white/[0.07]"}`,
               "data-testid": entry.testId,
               children: [
                 IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4" }) : null,
@@ -7786,7 +7816,7 @@ function TimePicker({
       "button",
       {
         type: "button",
-        className: `flex items-center gap-2 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-xl px-4 h-[44px] text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/60 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 transition-colors duration-200 shadow-sm ${className}`,
+        className: `liquid-surface flex items-center gap-2 text-sm rounded-xl px-4 h-[44px] text-slate-900 dark:text-white hover:bg-white/30 dark:hover:bg-white/[0.06] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 transition-colors duration-200 ${className}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ClockIcon, { className: "h-4 w-4 text-indigo-500" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-mono", children: displayText })
@@ -7796,18 +7826,18 @@ function TimePicker({
     /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       Popover__namespace.Content,
       {
-        className: "z-50 w-[220px] rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 p-5 shadow-xl animate-in fade-in-0 zoom-in-95",
+        className: "liquid-surface-strong z-50 w-[220px] rounded-2xl p-5 shadow-xl animate-in fade-in-0 zoom-in-95",
         sideOffset: 8,
         align: "start",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-3 text-center uppercase tracking-wide", children: t("setTime") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-slate-600 dark:text-slate-300 mb-3 text-center uppercase tracking-wide", children: t("setTime") }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "label",
                 {
                   htmlFor: "time-picker-hours",
-                  className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mb-1 uppercase",
+                  className: "text-[10px] font-medium text-slate-500 dark:text-slate-400 mb-1 uppercase",
                   children: t("hours")
                 }
               ),
@@ -7823,17 +7853,17 @@ function TimePicker({
                   onChange: handleHoursChange,
                   onKeyDown: handleKeyDown,
                   "aria-label": t("hours"),
-                  className: "w-14 h-14 text-center text-2xl font-semibold rounded-xl bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 transition-colors duration-200"
+                  className: "w-14 h-14 text-center text-2xl font-semibold rounded-xl bg-white/60 dark:bg-white/[0.08] text-slate-900 dark:text-white border border-white/40 dark:border-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 transition-colors duration-200 backdrop-blur-md"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold text-gray-400 dark:text-gray-500 mt-4", children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold text-slate-400 dark:text-slate-500 mt-4", children: ":" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "label",
                 {
                   htmlFor: "time-picker-minutes",
-                  className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mb-1 uppercase",
+                  className: "text-[10px] font-medium text-slate-500 dark:text-slate-400 mb-1 uppercase",
                   children: t("minutes")
                 }
               ),
@@ -7848,7 +7878,7 @@ function TimePicker({
                   onChange: handleMinutesChange,
                   onKeyDown: handleKeyDown,
                   "aria-label": t("minutes"),
-                  className: "w-14 h-14 text-center text-2xl font-semibold rounded-xl bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 transition-colors duration-200"
+                  className: "w-14 h-14 text-center text-2xl font-semibold rounded-xl bg-white/60 dark:bg-white/[0.08] text-slate-900 dark:text-white border border-white/40 dark:border-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 transition-colors duration-200 backdrop-blur-md"
                 }
               )
             ] })
@@ -7861,8 +7891,8 @@ function TimePicker({
               disabled: isFuture,
               onClick: handleConfirm,
               className: `
-              mt-4 w-full flex items-center justify-center gap-2 h-10 rounded-xl text-sm font-medium transition-colors duration-200
-              ${isFuture ? "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed" : "bg-indigo-500 text-white hover:bg-indigo-600 active:bg-indigo-700"}
+              mt-4 w-full flex items-center justify-center gap-2 h-10 rounded-xl text-sm font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1
+              ${isFuture ? "bg-white/40 dark:bg-white/[0.06] text-slate-400 dark:text-slate-500 cursor-not-allowed border border-white/30 dark:border-white/10" : "bg-indigo-500 text-white hover:bg-indigo-600 active:bg-indigo-700 shadow-[inset_0_1px_1.5px_rgba(255,255,255,0.4)]"}
             `,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckIcon, { className: "h-4 w-4" }),
@@ -7870,7 +7900,7 @@ function TimePicker({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/70 dark:fill-gray-800/70" })
+          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/85 dark:fill-slate-900/85" })
         ]
       }
     ) })
@@ -8425,11 +8455,11 @@ function DetailsPopover({
     /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       Popover__namespace.Content,
       {
-        className: "z-50 w-80 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl animate-in fade-in-0 zoom-in-95 dark:border-gray-700 dark:bg-gray-800",
+        className: "liquid-surface-strong z-50 w-80 overflow-hidden rounded-xl shadow-xl animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         align: "center",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border-b border-gray-100 bg-gradient-to-r px-4 py-3 dark:border-gray-700 ${headerClassName}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border-b liquid-divider bg-gradient-to-r px-4 py-3 ${headerClassName}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             headerIcon,
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: headerTitle })
           ] }) }),
@@ -8437,40 +8467,40 @@ function DetailsPopover({
             actor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-sm font-bold text-white shadow-xs", children: actor.avatarText }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: actor.primaryText }),
-                actor.secondaryText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: actor.secondaryText }) : null
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-slate-900 dark:text-white", children: actor.primaryText }),
+                actor.secondaryText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: actor.secondaryText }) : null
               ] })
             ] }) : null,
             timestamp ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
               timestampIcon,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 dark:text-gray-300", children: timestamp })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-600 dark:text-slate-300", children: timestamp })
             ] }) : null,
-            comparison ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-100 pt-2 dark:border-gray-700", children: [
+            comparison ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t liquid-divider pt-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
                 comparison.icon,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-amber-600 dark:text-amber-400", children: comparison.label })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: comparison.fromLabel }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-400 line-through", children: comparison.fromValue })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: comparison.fromLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-slate-400 line-through", children: comparison.fromValue })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-gray-300 dark:text-gray-600", children: "\u2192" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-slate-300 dark:text-slate-600", children: "\u2192" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: comparison.toLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: comparison.toLabel }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-bold text-emerald-600 dark:text-emerald-400", children: comparison.toValue })
                 ] })
               ] })
             ] }) : null,
-            note ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 pt-2 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            note ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t liquid-divider pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
               note.icon,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: note.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300", children: note.value })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-xs font-medium text-slate-500 dark:text-slate-400", children: note.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-700 dark:text-slate-300", children: note.value })
               ] })
             ] }) }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white dark:fill-gray-800" })
+          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/85 dark:fill-slate-900/85" })
         ]
       }
     ) })
@@ -10052,7 +10082,7 @@ var sizes3 = {
   md: { container: "px-3 py-1 text-sm gap-1.5", icon: "h-4 w-4", remove: "h-4 w-4 -mr-1" },
   lg: { container: "px-3.5 py-1.5 text-sm gap-2", icon: "h-4 w-4", remove: "h-4 w-4 -mr-1" }
 };
-var CRYSTAL_STYLE = {
+var CRYSTAL_STYLE2 = {
   backdropFilter: "blur(12px) saturate(1.5)",
   WebkitBackdropFilter: "blur(12px) saturate(1.5)",
   boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
@@ -10087,7 +10117,7 @@ function Badge({
         type: "button",
         "data-testid": "badge",
         onClick,
-        style: CRYSTAL_STYLE,
+        style: CRYSTAL_STYLE2,
         ...liveProps,
         className: clsx__default.default(
           base,
@@ -10108,7 +10138,7 @@ function Badge({
         "data-testid": "badge",
         ...props,
         ...liveProps,
-        style: CRYSTAL_STYLE,
+        style: CRYSTAL_STYLE2,
         className: clsx__default.default(base, "pr-1"),
         children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
@@ -10134,7 +10164,7 @@ function Badge({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "badge", ...props, ...liveProps, style: CRYSTAL_STYLE, className: base, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "badge", ...props, ...liveProps, style: CRYSTAL_STYLE2, className: base, children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx__default.default("shrink-0", sz.icon), "aria-hidden": true, children: icon }),
     children
   ] });
@@ -10737,7 +10767,7 @@ function MonthPicker({
       "button",
       {
         type: "button",
-        className: `${noBorder ? "flex items-center justify-center gap-2 text-sm bg-transparent px-4 h-full min-h-[52px] text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden transition-all duration-200 active:scale-[0.985]" : "flex items-center justify-center gap-2 text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-xl px-4 h-[52px] text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 transition-all duration-200 active:scale-[0.985] shadow-xs"} ${triggerClassName}`.trim(),
+        className: `${noBorder ? "flex items-center justify-center gap-2 text-sm bg-transparent px-4 h-full min-h-[52px] text-slate-900 dark:text-white hover:bg-white/30 dark:hover:bg-white/[0.06] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 transition-all duration-200 active:scale-[0.985]" : "liquid-surface flex items-center justify-center gap-2 text-sm rounded-xl px-4 h-[52px] text-slate-900 dark:text-white hover:bg-white/30 dark:hover:bg-white/[0.06] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 transition-all duration-200 active:scale-[0.985]"} ${triggerClassName}`.trim(),
         children: triggerContent ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4 text-indigo-500" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize whitespace-nowrap", children: displayValue })
@@ -10747,7 +10777,7 @@ function MonthPicker({
     /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       Popover__namespace.Content,
       {
-        className: `z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-xl animate-in fade-in-0 zoom-in-95 ${contentClassName}`.trim(),
+        className: `liquid-surface-strong z-50 w-64 rounded-xl p-4 shadow-xl animate-in fade-in-0 zoom-in-95 ${contentClassName}`.trim(),
         sideOffset: 5,
         side,
         avoidCollisions,
@@ -10760,19 +10790,19 @@ function MonthPicker({
                 type: "button",
                 onClick: () => setViewYear((y) => y - 1),
                 disabled: !canGoPrev,
-                className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.08] disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-900 dark:text-white text-lg", children: viewYear }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-slate-900 dark:text-white text-lg", children: viewYear }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: () => setViewYear((y) => y + 1),
                 disabled: !canGoNext,
-                className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.08] disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
               }
             )
           ] }),
@@ -10787,28 +10817,28 @@ function MonthPicker({
                 onClick: () => isAvailable && handleSelectMonth(index),
                 disabled: !isAvailable,
                 className: `
-                    px-2 py-2.5 text-sm rounded-lg transition-all duration-200 capitalize font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500 active:scale-[0.98]
-                    ${isSelected ? "bg-indigo-500 text-white" : isAvailable ? "text-gray-700 dark:text-gray-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"}
+                    px-2 py-2.5 text-sm rounded-lg transition-all duration-200 capitalize font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-indigo-500/70 active:scale-[0.98]
+                    ${isSelected ? "bg-indigo-500 text-white shadow-[inset_0_1px_1.5px_rgba(255,255,255,0.45)]" : isAvailable ? "text-slate-700 dark:text-slate-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-slate-300 dark:text-slate-600 cursor-not-allowed"}
                   `,
                 children: month
               },
               month
             );
           }) }),
-          availableYears.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 pt-3 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: availableYears.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+          availableYears.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 pt-3 liquid-divider", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: availableYears.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: () => setViewYear(year),
               className: `
-                      px-2 py-1 text-xs rounded-lg transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500
-                      ${viewYear === year ? "bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 font-medium" : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}
+                      px-2 py-1 text-xs rounded-lg transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-indigo-500/70
+                      ${viewYear === year ? "bg-indigo-500/15 dark:bg-indigo-400/20 text-indigo-700 dark:text-indigo-300 font-medium" : "text-slate-500 dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/[0.08]"}
                     `,
               children: year
             },
             year
           )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white dark:fill-gray-800" })
+          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/85 dark:fill-slate-900/85" })
         ]
       }
     ) })
@@ -21608,5 +21638,5 @@ exports.useSocialProviders = useSocialProviders;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-FSBR4RCK.js.map
-//# sourceMappingURL=chunk-FSBR4RCK.js.map
+//# sourceMappingURL=chunk-K4M4B6ME.js.map
+//# sourceMappingURL=chunk-K4M4B6ME.js.map