@wow-two-beta/ui 0.0.16 → 0.0.18

package/dist/{chunk-3IN5ULKY.js → chunk-45SFQEMP.js}

@@ -1,42 +1,13 @@
+import { Spinner } from './chunk-NKADHZMX.js';
 import { Backdrop } from './chunk-ASIHQQDQ.js';
 import { tv } from './chunk-BMBIZLO4.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
 import { Icon } from './chunk-TDX22OWF.js';
 import { Portal, Announce } from './chunk-NC2CBGX2.js';
 import { cn } from './chunk-KZ4VFY2T.js';
-import { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { X, Check, TrendingUp, TrendingDown, Minus } from 'lucide-react';
-
-// src/feedback/spinner/Spinner.variants.ts
-var spinnerVariants = tv({
-  base: "inline-block animate-spin rounded-full border-current border-b-transparent",
-  variants: {
-    size: {
-      xs: "h-3 w-3 border",
-      sm: "h-4 w-4 border-2",
-      md: "h-5 w-5 border-2",
-      lg: "h-8 w-8 border-2",
-      xl: "h-12 w-12 border-[3px]"
-    },
-    tone: {
-      default: "text-muted-foreground",
-      brand: "text-primary",
-      muted: "text-border",
-      current: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    tone: "default"
-  }
-});
-var Spinner = forwardRef(
-  ({ className, size, tone, label = "Loading", role = "status", ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, role, ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: cn(spinnerVariants({ size, tone }), className) }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
-  ] })
-);
-Spinner.displayName = "Spinner";
+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 } from 'lucide-react';
 
 // src/feedback/skeleton/Skeleton.variants.ts
 var skeletonVariants = tv({
@@ -798,7 +769,416 @@ var LoadingOverlay = forwardRef(
   }
 );
 LoadingOverlay.displayName = "LoadingOverlay";
+var POSITION = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+};
+function UndoBar({
+  open,
+  onOpenChange,
+  message,
+  onUndo,
+  undoLabel = "Undo",
+  duration = 5e3,
+  pauseOnHover = true,
+  position = "bottom-center",
+  showCountdown = false,
+  className
+}) {
+  const [progress, setProgress] = useState(1);
+  const [paused, setPaused] = useState(false);
+  const startRef = useRef(0);
+  const remainingRef = useRef(duration);
+  const rafRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      remainingRef.current = duration;
+      setProgress(1);
+      return;
+    }
+    if (duration === Infinity) {
+      setProgress(1);
+      return;
+    }
+    if (paused) return;
+    startRef.current = performance.now();
+    const tick = (now) => {
+      const elapsed = now - startRef.current;
+      const remaining = Math.max(0, remainingRef.current - elapsed);
+      setProgress(remaining / duration);
+      if (remaining <= 0) {
+        onOpenChange?.(false);
+        return;
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      const elapsed = performance.now() - startRef.current;
+      remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    };
+  }, [open, duration, paused, onOpenChange]);
+  if (!open) 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),
+      className: cn(
+        "fixed z-50 flex items-center gap-3 overflow-hidden rounded-md border border-border bg-popover px-4 py-2.5 text-sm text-popover-foreground shadow-lg animate-in fade-in-0 slide-in-from-bottom-2",
+        POSITION[position],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+        onUndo && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onUndo();
+              onOpenChange?.(false);
+            },
+            className: "font-medium text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1",
+            children: undoLabel
+          }
+        ),
+        showCountdown && 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",
+            style: { width: `${progress * 100}%` }
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+var OnboardingContext = createContext(null);
+var OnboardingChecklist = forwardRef(
+  function OnboardingChecklist2({
+    title = "Get started",
+    defaultOpen = true,
+    dismissOnComplete = false,
+    dismissDelay = 2e3,
+    onDismiss,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const [open, setOpen] = useState(defaultOpen);
+    const [dismissed, setDismissed] = useState(false);
+    const tasks = Children.toArray(children).filter(
+      (c) => isValidElement(c) && c.type.displayName === "OnboardingChecklistTask"
+    );
+    const total = tasks.length;
+    const done = tasks.filter((t) => t.props.done).length;
+    const complete = total > 0 && done === total;
+    useEffect(() => {
+      if (!dismissOnComplete || !complete || dismissed) return;
+      const handle = window.setTimeout(() => {
+        setDismissed(true);
+        onDismiss?.();
+      }, dismissDelay);
+      return () => window.clearTimeout(handle);
+    }, [complete, dismissOnComplete, dismissDelay, dismissed, onDismiss]);
+    const ctx = useMemo(() => ({ open, setOpen }), [open]);
+    if (dismissed) return null;
+    return /* @__PURE__ */ jsx(OnboardingContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open,
+              onClick: () => setOpen(!open),
+              className: "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+                    done,
+                    " of ",
+                    total,
+                    " tasks complete"
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-2 h-1.5 overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "h-full bg-primary transition-[width] duration-300",
+                        complete && "bg-success"
+                      ),
+                      style: { width: total ? `${done / total * 100}%` : "0%" }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: ChevronDown,
+                    size: 16,
+                    className: cn("text-muted-foreground transition-transform", open && "rotate-180")
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx("ul", { role: "list", className: "border-t border-border", children })
+        ]
+      }
+    ) });
+  }
+);
+var OnboardingChecklistTask = forwardRef(function OnboardingChecklistTask2({ label, description, done = false, action, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      "data-done": done || void 0,
+      className: cn(
+        "flex items-start gap-3 px-4 py-3 transition-colors",
+        done && "opacity-60",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "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"
+            ),
+            children: done && /* @__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 }),
+          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 })
+      ]
+    }
+  );
+});
+OnboardingChecklistTask.displayName = "OnboardingChecklistTask";
+OnboardingChecklist.Task = OnboardingChecklistTask;
+function useOnboardingChecklist() {
+  const ctx = useContext(OnboardingContext);
+  if (!ctx) throw new Error("useOnboardingChecklist must be used inside <OnboardingChecklist>");
+  return ctx;
+}
+function rectFromTarget(target) {
+  let el = null;
+  if (typeof target === "string") {
+    el = document.querySelector(target);
+  } else {
+    el = target.current;
+  }
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+function placementCoords(rect, placement, gap = 12) {
+  switch (placement) {
+    case "top":
+      return { top: rect.top - gap, left: rect.left + rect.width / 2, transform: "translate(-50%, -100%)" };
+    case "right":
+      return { top: rect.top + rect.height / 2, left: rect.left + rect.width + gap, transform: "translate(0, -50%)" };
+    case "bottom":
+      return { top: rect.top + rect.height + gap, left: rect.left + rect.width / 2, transform: "translate(-50%, 0)" };
+    case "left":
+      return { top: rect.top + rect.height / 2, left: rect.left - gap, transform: "translate(-100%, -50%)" };
+  }
+}
+function Tour({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  steps,
+  currentStep: currentStepProp,
+  defaultCurrentStep = 0,
+  onStepChange,
+  onComplete,
+  onSkip,
+  padding = 8
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [currentStep, setCurrentStep] = useControlled({
+    controlled: currentStepProp,
+    default: defaultCurrentStep,
+    onChange: onStepChange
+  });
+  const [rect, setRect] = useState(null);
+  const titleId = useId();
+  const descId = useId();
+  const step = steps[currentStep];
+  useEffect(() => {
+    if (!open || !step) return;
+    const update = () => {
+      const r = rectFromTarget(step.target);
+      setRect(r);
+    };
+    const handle = requestAnimationFrame(update);
+    window.addEventListener("resize", update, { passive: true });
+    window.addEventListener("scroll", update, { passive: true, capture: true });
+    return () => {
+      cancelAnimationFrame(handle);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, step]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        onSkip?.();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, setOpen, onSkip]);
+  const goNext = useCallback(() => {
+    if (currentStep >= steps.length - 1) {
+      setOpen(false);
+      onComplete?.();
+    } else {
+      setCurrentStep(currentStep + 1);
+    }
+  }, [currentStep, steps.length, setOpen, setCurrentStep, onComplete]);
+  const goPrev = useCallback(() => {
+    if (currentStep > 0) setCurrentStep(currentStep - 1);
+  }, [currentStep, setCurrentStep]);
+  const skip = useCallback(() => {
+    setOpen(false);
+    onSkip?.();
+  }, [setOpen, onSkip]);
+  if (!open || !step) return null;
+  const placement = step.placement ?? "bottom";
+  const tooltipCoords = rect ? placementCoords(rect, placement) : null;
+  const cutoutPadding = padding;
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-auto fixed inset-0 z-50 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("rect", { width: "100%", height: "100%", fill: "white" }),
+            rect && /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: rect.left - cutoutPadding,
+                y: rect.top - cutoutPadding,
+                width: rect.width + cutoutPadding * 2,
+                height: rect.height + cutoutPadding * 2,
+                rx: 6,
+                fill: "black"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "100%",
+              height: "100%",
+              fill: "rgba(0,0,0,0.55)",
+              mask: "url(#tour-mask)"
+            }
+          )
+        ]
+      }
+    ),
+    tooltipCoords && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": titleId,
+        "aria-describedby": descId,
+        style: {
+          position: "fixed",
+          top: tooltipCoords.top,
+          left: tooltipCoords.left,
+          transform: tooltipCoords.transform,
+          zIndex: 60
+        },
+        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"
+        ),
+        children: [
+          step.title && /* @__PURE__ */ jsx("div", { id: titleId, className: "text-sm font-semibold", children: step.title }),
+          step.body && /* @__PURE__ */ jsx("div", { id: descId, className: cn("text-sm text-muted-foreground", step.title && "mt-1.5"), children: step.body }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              currentStep + 1,
+              " / ",
+              steps.length
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: skip,
+                  className: "text-xs text-muted-foreground hover:text-foreground",
+                  children: "Skip"
+                }
+              ),
+              currentStep > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: goPrev,
+                  className: "inline-flex h-7 items-center rounded-md border border-border bg-background px-2.5 text-xs font-medium hover:bg-muted",
+                  children: "Back"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: goNext,
+                  className: "inline-flex h-7 items-center rounded-md bg-primary px-2.5 text-xs font-medium text-primary-foreground hover:bg-primary/90",
+                  children: currentStep >= steps.length - 1 ? "Done" : "Next"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Announce, { politeness: "polite", children: step.title ? `Step ${currentStep + 1} of ${steps.length}: ${typeof step.title === "string" ? step.title : ""}` : "" })
+  ] });
+}
 
-export { Alert, AlertSimple, Banner, BannerSimple, Callout, InlineSpinner, LoadingOverlay, LoadingState, MeterBar, ProgressBar, ProgressCircle, ProgressSteps, Skeleton, Spinner, StatusIndicator, Toast, ToastSimple, Toaster, TrendIndicator, alertSimpleVariants, bannerSimpleVariants, progressFillVariants, progressTrackVariants, skeletonVariants, spinnerVariants, toastSimpleVariants, toaster, useToaster };
-//# sourceMappingURL=chunk-3IN5ULKY.js.map
-//# sourceMappingURL=chunk-3IN5ULKY.js.map
+export { Alert, AlertSimple, Banner, BannerSimple, Callout, InlineSpinner, LoadingOverlay, LoadingState, MeterBar, OnboardingChecklist, OnboardingChecklistTask, ProgressBar, ProgressCircle, ProgressSteps, Skeleton, StatusIndicator, Toast, ToastSimple, Toaster, Tour, TrendIndicator, UndoBar, alertSimpleVariants, bannerSimpleVariants, progressFillVariants, progressTrackVariants, skeletonVariants, toastSimpleVariants, toaster, useOnboardingChecklist, useToaster };
+//# sourceMappingURL=chunk-45SFQEMP.js.map
+//# sourceMappingURL=chunk-45SFQEMP.js.map