@wow-two-beta/ui 0.0.56 → 0.0.58

package/dist/{chunk-LLNJ3GD2.js → chunk-EX4AOJCN.js}

@@ -1,10 +1,10 @@
-import { Spinner } from './chunk-T6ZDMPHL.js';
-import { Backdrop } from './chunk-BLXE2RCC.js';
-import { useReducedMotion, useControlled } from './chunk-NUMFGKPY.js';
-import { Icon } from './chunk-F227LKWK.js';
-import { tv, surfaceVariants } from './chunk-RDDIOVK4.js';
-import { Portal, Announce } from './chunk-BMABNEZX.js';
-import { cn } from './chunk-LDRFQG44.js';
+import { Spinner } from './chunk-NR5DYKSJ.js';
+import { Backdrop } from './chunk-DJJOQWOG.js';
+import { useReducedMotion, useControlled } from './chunk-V267IMBH.js';
+import { Icon } from './chunk-MVMDDGW7.js';
+import { tv, surfaceVariants } from './chunk-JYGC5SRP.js';
+import { Portal, Announce } from './chunk-TTSJZEL7.js';
+import { cn } from './chunk-X2MYOHOB.js';
 import { forwardRef, createContext, useState, Children, isValidElement, useEffect, useMemo, useRef, useContext, useId, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { X, Check, TrendingUp, TrendingDown, Minus, ChevronDown, Bell } from 'lucide-react';
@@ -483,7 +483,7 @@ var TONE = {
   neutral: "bg-muted-foreground"
 };
 var StatusIndicator = forwardRef(
-  ({ tone = "success", label, description, pulse, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ({ tone = "success", label, description, hasPulse, className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -492,7 +492,7 @@ var StatusIndicator = forwardRef(
       children: [
         /* @__PURE__ */ jsxs("span", { className: "relative mt-1 inline-flex", children: [
           /* @__PURE__ */ jsx("span", { className: cn("inline-block h-2.5 w-2.5 rounded-full", TONE[tone]) }),
-          pulse && /* @__PURE__ */ jsx(
+          hasPulse && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
@@ -555,9 +555,9 @@ var SIZE_ICON = {
   md: 16
 };
 var TrendIndicator = forwardRef(
-  ({ value, format, inverse, label, size = "sm", className, ...props }, ref) => {
+  ({ value, format, isInverse, label, size = "sm", className, ...props }, ref) => {
     const direction = value > 0 ? "up" : value < 0 ? "down" : "flat";
-    const positive = direction === "flat" ? false : direction === "up" !== Boolean(inverse);
+    const positive = direction === "flat" ? false : direction === "up" !== Boolean(isInverse);
     const tone = direction === "flat" ? "text-muted-foreground" : positive ? "text-success" : "text-destructive";
     const arrow = direction === "up" ? TrendingUp : direction === "down" ? TrendingDown : Minus;
     const display = format ? format(value) : `${value > 0 ? "+" : ""}${value}%`;
@@ -632,7 +632,7 @@ function Toaster({
   position = "bottom-right",
   max = 5,
   defaultDuration = 5e3,
-  pauseOnHover = true,
+  canPauseOnHover = true,
   gap = 8,
   className
 }) {
@@ -669,6 +669,7 @@ function Toaster({
       }, remaining);
       timersRef.current.set(v.id, handle);
       startRef.current.set(v.id, Date.now());
+      remainingRef.current.set(v.id, remaining);
     }
   }, [items, max, defaultDuration, paused]);
   useEffect(() => {
@@ -679,7 +680,7 @@ function Toaster({
     };
   }, []);
   const handlePause = () => {
-    if (!pauseOnHover || paused) return;
+    if (!canPauseOnHover || paused) return;
     setPaused(true);
     for (const [id, h] of timersRef.current) {
       window.clearTimeout(h);
@@ -691,7 +692,7 @@ function Toaster({
     timersRef.current.clear();
   };
   const handleResume = () => {
-    if (!pauseOnHover || !paused) return;
+    if (!canPauseOnHover || !paused) return;
     setPaused(false);
   };
   if (visible.length === 0) {
@@ -730,27 +731,26 @@ function Toaster({
 }
 var LoadingOverlay = forwardRef(
   function LoadingOverlay2({
-    open = true,
+    isOpen = true,
     label = "Loading\u2026",
-    inline = false,
-    blur,
+    isInline = false,
+    hasBlur,
     spinnerSize = "lg",
     spinnerTone = "brand",
     className,
     children,
     ...rest
   }, ref) {
-    if (!open) return null;
-    if (inline) {
+    if (!isOpen) return null;
+    if (isInline) {
       return /* @__PURE__ */ jsxs(
         "div",
         {
           ref,
-          role: "alert",
-          "aria-busy": "true",
+          role: "status",
           className: cn(
             "absolute inset-0 z-banner flex flex-col items-center justify-center gap-3 bg-background/70",
-            blur && "backdrop-blur-sm",
+            hasBlur && "backdrop-blur-sm",
             className
           ),
           ...rest,
@@ -763,13 +763,12 @@ var LoadingOverlay = forwardRef(
       );
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Backdrop, { open: true, blur, className: "bg-background/70" }),
+      /* @__PURE__ */ jsx(Backdrop, { open: true, isBlurred: hasBlur, className: "bg-background/70" }),
       /* @__PURE__ */ jsxs(
         "div",
         {
           ref,
-          role: "alert",
-          "aria-busy": "true",
+          role: "status",
           className: cn(
             "fixed inset-0 z-modal flex flex-col items-center justify-center gap-3 pointer-events-none",
             className
@@ -795,15 +794,15 @@ var POSITION = {
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
 };
 function UndoBar({
-  open,
+  isOpen,
   onOpenChange,
   message,
   onUndo,
   undoLabel = "Undo",
   duration = 5e3,
-  pauseOnHover = true,
+  canPauseOnHover = true,
   position = "bottom-center",
-  showCountdown = false,
+  hasCountdown = false,
   className
 }) {
   const [progress, setProgress] = useState(1);
@@ -812,7 +811,7 @@ function UndoBar({
   const remainingRef = useRef(duration);
   const rafRef = useRef(null);
   useEffect(() => {
-    if (!open) {
+    if (!isOpen) {
       remainingRef.current = duration;
       setProgress(1);
       return;
@@ -823,6 +822,16 @@ function UndoBar({
     }
     if (paused) return;
     startRef.current = performance.now();
+    if (!hasCountdown) {
+      const handle = window.setTimeout(() => {
+        onOpenChange?.(false);
+      }, remainingRef.current);
+      return () => {
+        window.clearTimeout(handle);
+        const elapsed = performance.now() - startRef.current;
+        remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+      };
+    }
     const tick = (now) => {
       const elapsed = now - startRef.current;
       const remaining = Math.max(0, remainingRef.current - elapsed);
@@ -839,17 +848,17 @@ function UndoBar({
       const elapsed = performance.now() - startRef.current;
       remainingRef.current = Math.max(0, remainingRef.current - elapsed);
     };
-  }, [open, duration, paused, onOpenChange]);
-  if (!open) return null;
+  }, [isOpen, duration, paused, hasCountdown, onOpenChange]);
+  if (!isOpen) return null;
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "status",
       "aria-live": "polite",
-      onMouseEnter: () => pauseOnHover && setPaused(true),
-      onMouseLeave: () => pauseOnHover && setPaused(false),
-      onFocus: () => pauseOnHover && setPaused(true),
-      onBlur: () => pauseOnHover && setPaused(false),
+      onMouseEnter: () => canPauseOnHover && setPaused(true),
+      onMouseLeave: () => canPauseOnHover && setPaused(false),
+      onFocus: () => canPauseOnHover && setPaused(true),
+      onBlur: () => canPauseOnHover && setPaused(false),
       className: cn(
         "fixed z-toast flex items-center gap-3 overflow-hidden text-sm animate-in fade-in-0 slide-in-from-bottom-2",
         surfaceVariants({ variant: "surface", radius: "md", padding: "sm", elevation: 3 }),
@@ -871,7 +880,7 @@ function UndoBar({
             children: undoLabel
           }
         ),
-        showCountdown && duration !== Infinity && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 h-0.5 w-full bg-border", children: /* @__PURE__ */ jsx(
+        hasCountdown && duration !== Infinity && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 h-0.5 w-full bg-border", children: /* @__PURE__ */ jsx(
           "div",
           {
             className: "h-full bg-primary transition-[width] duration-100 ease-linear",
@@ -887,7 +896,7 @@ var OnboardingChecklist = forwardRef(
   function OnboardingChecklist2({
     title = "Get started",
     defaultOpen = true,
-    dismissOnComplete = false,
+    canDismissOnComplete = false,
     dismissDelay = 2e3,
     onDismiss,
     className,
@@ -900,16 +909,16 @@ var OnboardingChecklist = forwardRef(
       (c) => isValidElement(c) && c.type.displayName === "OnboardingChecklistTask"
     );
     const total = tasks.length;
-    const done = tasks.filter((t) => t.props.done).length;
+    const done = tasks.filter((t) => t.props.isDone).length;
     const complete = total > 0 && done === total;
     useEffect(() => {
-      if (!dismissOnComplete || !complete || dismissed) return;
+      if (!canDismissOnComplete || !complete || dismissed) return;
       const handle = window.setTimeout(() => {
         setDismissed(true);
         onDismiss?.();
       }, dismissDelay);
       return () => window.clearTimeout(handle);
-    }, [complete, dismissOnComplete, dismissDelay, dismissed, onDismiss]);
+    }, [complete, canDismissOnComplete, dismissDelay, dismissed, onDismiss]);
     const ctx = useMemo(() => ({ open, setOpen }), [open]);
     if (dismissed) return null;
     return /* @__PURE__ */ jsx(OnboardingContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
@@ -966,15 +975,15 @@ var OnboardingChecklist = forwardRef(
     ) });
   }
 );
-var OnboardingChecklistTask = forwardRef(function OnboardingChecklistTask2({ label, description, done = false, action, className, ...rest }, ref) {
+var OnboardingChecklistTask = forwardRef(function OnboardingChecklistTask2({ label, description, isDone = false, action, className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs(
     "li",
     {
       ref,
-      "data-done": done || void 0,
+      "data-done": isDone || void 0,
       className: cn(
         "flex items-start gap-3 px-4 py-3 transition-colors",
-        done && "opacity-60",
+        isDone && "opacity-60",
         className
       ),
       ...rest,
@@ -985,16 +994,16 @@ var OnboardingChecklistTask = forwardRef(function OnboardingChecklistTask2({ lab
             "aria-hidden": "true",
             className: cn(
               "mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full border",
-              done ? "border-success bg-success text-success-foreground" : "border-border"
+              isDone ? "border-success bg-success text-success-foreground" : "border-border"
             ),
-            children: done && /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12 })
+            children: isDone && /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12 })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium text-foreground", done && "line-through"), children: label }),
+          /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium text-foreground", isDone && "line-through"), children: label }),
           description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
         ] }),
-        action && !done && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+        action && !isDone && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
       ]
     }
   );
@@ -1030,7 +1039,7 @@ function placementCoords(rect, placement, gap = 12) {
   }
 }
 function Tour({
-  open: openProp,
+  isOpen: openProp,
   defaultOpen = false,
   onOpenChange,
   steps,
@@ -1054,6 +1063,7 @@ function Tour({
   const [rect, setRect] = useState(null);
   const titleId = useId();
   const descId = useId();
+  const maskId = useId();
   const step = steps[currentStep];
   useEffect(() => {
     if (!open || !step) return;
@@ -1102,16 +1112,16 @@ function Tour({
   const tooltipCoords = rect ? placementCoords(rect, placement) : null;
   const cutoutPadding = padding;
   return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsxs(
+    rect && /* @__PURE__ */ jsxs(
       "svg",
       {
         "aria-hidden": "true",
         className: "pointer-events-auto fixed inset-0 z-modal h-full w-full",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: "tour-mask", children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
             /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
-            rect && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
               "rect",
               {
                 x: rect.left - cutoutPadding,
@@ -1129,7 +1139,7 @@ function Tour({
               width: "100%",
               height: "100%",
               fill: "rgba(0,0,0,0.55)",
-              mask: "url(#tour-mask)"
+              mask: `url(#${maskId})`
             }
           )
         ]
@@ -1146,11 +1156,10 @@ function Tour({
           position: "fixed",
           top: tooltipCoords.top,
           left: tooltipCoords.left,
-          transform: tooltipCoords.transform,
-          zIndex: 60
+          transform: tooltipCoords.transform
         },
         className: cn(
-          "w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none animate-in fade-in-0 zoom-in-95"
+          "z-popover w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none animate-in fade-in-0 zoom-in-95"
         ),
         children: [
           step.title && /* @__PURE__ */ jsx("div", { id: titleId, className: "text-sm font-semibold", children: step.title }),
@@ -1208,12 +1217,12 @@ var TONE2 = {
   foreground: "bg-foreground"
 };
 var TypingIndicator = forwardRef(
-  ({ who, size = "md", tone = "muted", subtle, className, ...props }, ref) => {
+  ({ who, size = "md", tone = "muted", isSubtle, className, ...props }, ref) => {
     const dot = cn(
       "inline-block rounded-full motion-safe:animate-bounce",
       SIZE2[size],
       TONE2[tone],
-      subtle && "motion-safe:opacity-60"
+      isSubtle && "motion-safe:opacity-60"
     );
     return /* @__PURE__ */ jsxs(
       "span",
@@ -1267,7 +1276,7 @@ var STATUS_LABEL = {
   invisible: "Invisible"
 };
 var PresenceIndicator = forwardRef(
-  ({ status = "online", size = "sm", pulse, position, label, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ status = "online", size = "sm", hasPulse, position, label, className, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
       ref,
@@ -1283,7 +1292,7 @@ var PresenceIndicator = forwardRef(
         className
       ),
       ...props,
-      children: pulse && status === "online" && /* @__PURE__ */ jsx(
+      children: hasPulse && status === "online" && /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": "true",
@@ -1303,15 +1312,15 @@ var LiveCursor = forwardRef(
     y,
     name,
     color = "var(--color-primary)",
-    smooth = true,
+    isSmooth = true,
     labelOffset,
-    pointerOnly,
+    isPointerOnly,
     className,
     style,
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const useTransition = smooth && !reducedMotion;
+    const useTransition = isSmooth && !reducedMotion;
     const lx = labelOffset?.x ?? 12;
     const ly = labelOffset?.y ?? 16;
     const wrapperStyle = {
@@ -1351,7 +1360,7 @@ var LiveCursor = forwardRef(
               )
             }
           ),
-          name && !pointerOnly && /* @__PURE__ */ jsx(
+          name && !isPointerOnly && /* @__PURE__ */ jsx(
             "span",
             {
               className: "absolute whitespace-nowrap rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none text-white shadow-sm",
@@ -1371,7 +1380,7 @@ var NotificationItem = forwardRef(
     title,
     description,
     timestamp,
-    unread,
+    isUnread,
     actions,
     onSelect,
     onDismiss,
@@ -1385,9 +1394,10 @@ var NotificationItem = forwardRef(
         ref,
         role: interactive ? "button" : void 0,
         tabIndex: interactive ? 0 : void 0,
-        "data-unread": unread ? "" : void 0,
+        "data-unread": isUnread ? "" : void 0,
         onClick: onSelect,
         onKeyDown: interactive ? (e) => {
+          if (e.target !== e.currentTarget) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             onSelect?.();
@@ -1396,12 +1406,12 @@ var NotificationItem = forwardRef(
         className: cn(
           "group/notif relative flex gap-3 rounded-md px-3 py-2.5 text-sm",
           interactive && "cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          unread && "bg-primary-soft/30",
+          isUnread && "bg-primary-soft/30",
           className
         ),
         ...props,
         children: [
-          unread && /* @__PURE__ */ jsx(
+          isUnread && /* @__PURE__ */ jsx(
             "span",
             {
               "aria-hidden": "true",
@@ -1416,7 +1426,7 @@ var NotificationItem = forwardRef(
                 {
                   className: cn(
                     "truncate text-foreground",
-                    unread ? "font-semibold" : "font-medium"
+                    isUnread ? "font-semibold" : "font-medium"
                   ),
                   children: title
                 }
@@ -1497,5 +1507,5 @@ var NotificationCenter = NotificationCenterInner;
 NotificationCenter.Item = NotificationItem;
 
 export { Alert, AlertSimple, Banner, BannerSimple, Callout, InlineSpinner, LiveCursor, LoadingOverlay, LoadingState, MeterBar, NotificationCenter, NotificationItem, OnboardingChecklist, OnboardingChecklistTask, PresenceIndicator, ProgressBar, ProgressCircle, ProgressSteps, Skeleton, StatusIndicator, Toast, ToastSimple, Toaster, Tour, TrendIndicator, TypingIndicator, UndoBar, alertSimpleVariants, bannerSimpleVariants, progressFillVariants, progressTrackVariants, skeletonVariants, toastSimpleVariants, toaster, useOnboardingChecklist, useToaster };
-//# sourceMappingURL=chunk-LLNJ3GD2.js.map
-//# sourceMappingURL=chunk-LLNJ3GD2.js.map
+//# sourceMappingURL=chunk-EX4AOJCN.js.map
+//# sourceMappingURL=chunk-EX4AOJCN.js.map