@caffeinebounce/ui 0.62.2

package/dist/chunk-YSLD2HLP.mjs

@@ -0,0 +1,346 @@
+import { useLocalStorage, useDebounce } from './chunk-KB7UXIQZ.mjs';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-YKZEKJMZ.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { useErrorLoggerSafe } from '@caffeinebounce/logger/client';
+import { Check } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function FormWizard({
+  steps,
+  currentStep,
+  onStepChange,
+  getStepStatus,
+  getStepTooltip,
+  enableKeyboardNavigation = true,
+  scopeToDialog = true,
+  onCancel,
+  onSubmit,
+  onReset,
+  autoFocusSelector,
+  persistKey,
+  formData,
+  onDataRestored,
+  children,
+  className
+}) {
+  const totalSteps = steps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const { logError } = useErrorLoggerSafe();
+  const [storedValue, setStoredValue, , isLoaded] = useLocalStorage(
+    persistKey,
+    null
+  );
+  const debouncedData = useDebounce(formData, 500);
+  const [hasRestored, setHasRestored] = useState(false);
+  const isRestoring = useRef(false);
+  const formDataRef = useRef(formData);
+  const restoredDataRef = useRef(null);
+  useEffect(() => {
+    formDataRef.current = formData;
+  }, [formData]);
+  const hasRestoredDataPropagated = useCallback(() => {
+    if (!restoredDataRef.current) return true;
+    const restored = restoredDataRef.current;
+    const current = debouncedData;
+    for (const key of Object.keys(restored)) {
+      const restoredVal = restored[key];
+      const currentVal = current?.[key];
+      if (!restoredVal || restoredVal === "") continue;
+      if (Array.isArray(restoredVal) && restoredVal.length === 0) continue;
+      const isObjectLike = typeof restoredVal === "object" && restoredVal !== null;
+      const valuesMatch = isObjectLike ? JSON.stringify(currentVal) === JSON.stringify(restoredVal) : currentVal === restoredVal;
+      if (!valuesMatch) {
+        return false;
+      }
+    }
+    restoredDataRef.current = null;
+    return true;
+  }, [debouncedData]);
+  useEffect(() => {
+    if (hasRestored && persistKey && debouncedData) {
+      if (isRestoring.current) {
+        return;
+      }
+      if (restoredDataRef.current && !hasRestoredDataPropagated()) {
+        return;
+      }
+      setStoredValue(debouncedData);
+    }
+  }, [
+    hasRestored,
+    persistKey,
+    debouncedData,
+    setStoredValue,
+    hasRestoredDataPropagated
+  ]);
+  useEffect(() => {
+    return () => {
+      if (hasRestored && persistKey && formDataRef.current) {
+        if (isRestoring.current) {
+          return;
+        }
+        if (restoredDataRef.current) {
+          return;
+        }
+        try {
+          window.localStorage.setItem(
+            persistKey,
+            JSON.stringify(formDataRef.current)
+          );
+        } catch (e) {
+          logError(e, {
+            component: "FormWizard",
+            action: "saveOnUnmount",
+            metadata: { persistKey }
+          });
+        }
+      }
+    };
+  }, [hasRestored, persistKey, logError]);
+  useEffect(() => {
+    if (!isLoaded) {
+      return;
+    }
+    if (persistKey && storedValue && !hasRestored && onDataRestored) {
+      restoredDataRef.current = storedValue;
+      onDataRestored(storedValue);
+      isRestoring.current = true;
+      setTimeout(() => {
+        isRestoring.current = false;
+      }, 600);
+      setHasRestored(true);
+    } else if (persistKey && !storedValue && !hasRestored) {
+      setHasRestored(true);
+    }
+  }, [isLoaded, persistKey, storedValue, hasRestored, onDataRestored]);
+  useEffect(() => {
+    if (!autoFocusSelector) return;
+    const timeoutId = setTimeout(() => {
+      const element = document.querySelector(autoFocusSelector);
+      element?.focus();
+    }, 0);
+    return () => clearTimeout(timeoutId);
+  }, [autoFocusSelector]);
+  const stepStatuses = useMemo(() => {
+    return steps.map((_, index) => getStepStatus(index));
+  }, [steps, getStepStatus]);
+  const handleStepClick = useCallback(
+    (stepIndex) => {
+      onStepChange(stepIndex);
+    },
+    [onStepChange]
+  );
+  const handleNext = useCallback(() => {
+    if (!isLastStep) {
+      onStepChange(currentStep + 1);
+    }
+  }, [currentStep, isLastStep, onStepChange]);
+  const handleBack = useCallback(() => {
+    if (!isFirstStep) {
+      onStepChange(currentStep - 1);
+    }
+  }, [currentStep, isFirstStep, onStepChange]);
+  useEffect(() => {
+    if (!enableKeyboardNavigation) return;
+    const handleKeyDown = (e) => {
+      if (scopeToDialog) {
+        const target = e.target;
+        const isInDialog = target.closest('[role="dialog"]');
+        if (!isInDialog) return;
+      }
+      if (e.key === "Escape" && onCancel) {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+        return;
+      }
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && onSubmit) {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmit();
+        return;
+      }
+      if ((e.key === "r" || e.key === "\xAE" || e.code === "KeyR") && e.altKey && !e.shiftKey && !e.metaKey && !e.ctrlKey && onReset) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (persistKey) {
+          try {
+            window.localStorage.removeItem(persistKey);
+            setStoredValue(null);
+          } catch (err) {
+            logError(err, {
+              component: "FormWizard",
+              action: "clearStorageOnReset",
+              metadata: { persistKey }
+            });
+          }
+        }
+        onReset();
+        return;
+      }
+      if (!e.altKey) return;
+      if (e.key === "ArrowLeft" && !isFirstStep) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleBack();
+      } else if (e.key === "ArrowRight" && !isLastStep) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleNext();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [
+    enableKeyboardNavigation,
+    scopeToDialog,
+    isFirstStep,
+    isLastStep,
+    handleBack,
+    handleNext,
+    onCancel,
+    onSubmit,
+    onReset,
+    persistKey,
+    setStoredValue,
+    logError
+  ]);
+  const getStatusStyles = useCallback(
+    (stepIndex) => {
+      const status = stepStatuses[stepIndex];
+      const isCurrent = stepIndex === currentStep;
+      const step = steps[stepIndex];
+      const Icon = step.icon;
+      const tooltip = getStepTooltip?.(stepIndex, status) ?? null;
+      switch (status) {
+        case "error":
+          return {
+            border: "border-destructive bg-destructive",
+            text: "text-destructive",
+            icon: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 text-white" }),
+            tooltip: tooltip || "This section has errors"
+          };
+        case "complete":
+          return {
+            border: "border-foreground bg-foreground text-background",
+            text: "text-foreground",
+            icon: /* @__PURE__ */ jsx(Check, { className: "w-5 h-5" }),
+            tooltip: null
+          };
+        case "incomplete":
+          return {
+            border: "border-yellow-500 bg-yellow-500 text-white",
+            text: "text-yellow-600 dark:text-yellow-500",
+            icon: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5" }),
+            tooltip: tooltip || "This section is incomplete"
+          };
+        case "in-progress":
+          return {
+            border: "border-primary bg-primary text-primary-foreground",
+            text: "text-primary",
+            icon: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5" }),
+            tooltip: null
+          };
+        default:
+          return {
+            border: isCurrent ? "border-muted-foreground bg-muted-foreground text-background dark:border-muted dark:bg-muted dark:text-foreground" : "border-transparent bg-background",
+            text: isCurrent ? "text-foreground" : "text-muted-foreground",
+            icon: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5" }),
+            tooltip: null
+          };
+      }
+    },
+    [stepStatuses, currentStep, steps, getStepTooltip]
+  );
+  const progressPercentage = useMemo(() => {
+    if (totalSteps <= 1) return 0;
+    return currentStep / (totalSteps - 1) * 100;
+  }, [currentStep, totalSteps]);
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute top-5 left-5 right-5 h-[2px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-border/60 rounded-full" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 left-0 bg-foreground rounded-full transition-all duration-500 ease-out",
+            style: { width: `${progressPercentage}%` }
+          }
+        )
+      ] }),
+      steps.map((step, index) => {
+        const styles = getStatusStyles(index);
+        const stepButton = /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleStepClick(index),
+            "aria-label": `Step ${index + 1}: ${step.label}`,
+            "aria-current": index === currentStep ? "step" : void 0,
+            className: cn(
+              "relative z-10 flex flex-col items-center gap-2 transition-colors cursor-pointer",
+              styles.text
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-10 h-10 rounded-full flex items-center justify-center border-2 transition-colors",
+                    styles.border
+                  ),
+                  children: styles.icon
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium hidden sm:block", children: step.label })
+            ]
+          },
+          step.id
+        );
+        if (styles.tooltip) {
+          return /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: stepButton }),
+            /* @__PURE__ */ jsx(TooltipContent, { className: "whitespace-pre-line", children: styles.tooltip })
+          ] }, step.id);
+        }
+        return stepButton;
+      })
+    ] }) }),
+    children
+  ] }) });
+}
+function useFormWizardNavigation(currentStep, totalSteps, onStepChange) {
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const goNext = useCallback(() => {
+    if (!isLastStep) {
+      onStepChange(currentStep + 1);
+    }
+  }, [currentStep, isLastStep, onStepChange]);
+  const goBack = useCallback(() => {
+    if (!isFirstStep) {
+      onStepChange(currentStep - 1);
+    }
+  }, [currentStep, isFirstStep, onStepChange]);
+  const goToStep = useCallback(
+    (index) => {
+      if (index >= 0 && index < totalSteps) {
+        onStepChange(index);
+      }
+    },
+    [totalSteps, onStepChange]
+  );
+  return {
+    goNext,
+    goBack,
+    goToStep,
+    isFirstStep,
+    isLastStep,
+    currentStep,
+    totalSteps
+  };
+}
+
+export { FormWizard, useFormWizardNavigation };

package/dist/chunk-ZFLZA7UP.mjs

@@ -0,0 +1,140 @@
+import { cx } from './chunk-T5R6HUDG.mjs';
+import { Button } from './chunk-VBD4Q5LL.mjs';
+import { Input } from './chunk-STEP6C4C.mjs';
+import { Check, Mail } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SHAKE_STYLE_ID = "newsletter-shake-keyframes";
+function injectShakeKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SHAKE_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SHAKE_STYLE_ID;
+  style.textContent = `
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+      20%, 40%, 60%, 80% { transform: translateX(4px); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+function NewsletterSignup({
+  className,
+  endpoint = "/api/newsletter/subscribe",
+  source,
+  placeholder = "Enter your email",
+  inputLabel = "Email address",
+  buttonLabel = "Subscribe",
+  submittingLabel = "Subscribing...",
+  successTitle = "You're subscribed!",
+  successDescription = "Check your email to confirm.",
+  errorMessage = "Something went wrong. Please try again.",
+  inputClassName,
+  buttonClassName,
+  successClassName
+}) {
+  const [email, setEmail] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  useEffect(() => {
+    injectShakeKeyframes();
+  }, []);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email) return;
+    setIsSubmitting(true);
+    setHasError(false);
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, source })
+      });
+      if (response.ok) {
+        setSubmitted(true);
+        setEmail("");
+      } else {
+        const data = await response.json();
+        toast.error(data.error || errorMessage);
+        setHasError(true);
+        setTimeout(() => setHasError(false), 500);
+      }
+    } catch {
+      toast.error(
+        "Unable to connect. Please check your connection and try again."
+      );
+      setHasError(true);
+      setTimeout(() => setHasError(false), 500);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  if (submitted) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "flex items-center justify-center gap-3 rounded-box border border-border px-4 py-3",
+          className,
+          successClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground animate-in zoom-in duration-300", children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: "h-4 w-4 animate-in fade-in duration-500 delay-150",
+              strokeWidth: 3
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "animate-in slide-in-from-left-2 fade-in duration-300 delay-100 text-left", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: successTitle }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: successDescription })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cx("flex", hasError && "animate-shake", className),
+      style: hasError ? { animation: "shake 0.5s ease-in-out" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": inputLabel,
+            type: "email",
+            placeholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            required: true,
+            className: cx(
+              "flex-1 rounded-r-none border-r-0 focus-visible:z-10",
+              inputClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "submit",
+            disabled: isSubmitting || !email,
+            className: cx("rounded-l-none", buttonClassName),
+            children: [
+              /* @__PURE__ */ jsx(Mail, { className: "mr-2 h-4 w-4" }),
+              isSubmitting ? submittingLabel : buttonLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { NewsletterSignup };

package/dist/chunk-ZKUIUE7W.mjs

@@ -0,0 +1,26 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { jsx } from 'react/jsx-runtime';
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };