@12-apps/ui 5.0.0 → 5.1.0

package/dist/feedback/StackedModal.js

@@ -0,0 +1,19 @@
+import {
+  ModalStackProvider,
+  StackedModal,
+  StackedModalActions,
+  StackedModalContent,
+  useModalStack
+} from "../chunk-XDP4HLQ3.js";
+import "../chunk-TSPG6TWK.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  ModalStackProvider,
+  StackedModal,
+  StackedModalActions,
+  StackedModalContent,
+  ModalStackProvider as StackedModalProvider,
+  useModalStack,
+  useModalStack as useStackedModal
+};
+//# sourceMappingURL=StackedModal.js.map

package/dist/feedback/StackedModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/feedback/Toast.js

@@ -0,0 +1,14 @@
+import {
+  Toast,
+  ToastContainer,
+  ToastProvider,
+  useToast
+} from "../chunk-5ETQ3NX5.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Toast,
+  ToastContainer,
+  ToastProvider,
+  useToast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/feedback/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/feedback/TutorialOverlay.js

@@ -0,0 +1,652 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.tsx
+import {
+  alpha as alpha2,
+  Box as Box2,
+  Fade,
+  keyframes,
+  LinearProgress,
+  Paper,
+  Portal,
+  styled as styled2
+} from "@mui/material";
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts
+var DEFAULT_PADDING = 16;
+var getElementBounds = (selector) => document.querySelector(selector)?.getBoundingClientRect() ?? null;
+var pickPlacement = (targetBounds) => {
+  const spaces = {
+    top: targetBounds.top,
+    bottom: window.innerHeight - targetBounds.bottom,
+    left: targetBounds.left,
+    right: window.innerWidth - targetBounds.right
+  };
+  return Object.entries(spaces).reduce((a, b) => b[1] > a[1] ? b : a)[0];
+};
+var offsetFor = (placement, targetBounds, tooltipBounds, padding) => {
+  const centredLeft = targetBounds.left + targetBounds.width / 2 - tooltipBounds.width / 2;
+  const centredTop = targetBounds.top + targetBounds.height / 2 - tooltipBounds.height / 2;
+  switch (placement) {
+    case "top":
+      return { top: targetBounds.top - tooltipBounds.height - padding, left: centredLeft };
+    case "bottom":
+      return { top: targetBounds.bottom + padding, left: centredLeft };
+    case "left":
+      return { top: centredTop, left: targetBounds.left - tooltipBounds.width - padding };
+    case "right":
+      return { top: centredTop, left: targetBounds.right + padding };
+    default:
+      return { top: 0, left: 0 };
+  }
+};
+var clampToViewport = (position, tooltipBounds, padding) => ({
+  top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),
+  left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding))
+});
+var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding = DEFAULT_PADDING) => {
+  const finalPlacement = placement === "auto" ? pickPlacement(targetBounds) : placement;
+  const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);
+  return {
+    position: clampToViewport(offset, tooltipBounds, padding),
+    placement: finalPlacement
+  };
+};
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts
+var useTargetBounds = ({
+  active,
+  target
+}) => {
+  const [targetBounds, setTargetBounds] = useState(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!active || !target) return;
+    const updateBounds = () => {
+      const bounds = getElementBounds(target);
+      setTargetBounds(bounds);
+      setIsVisible(Boolean(bounds));
+    };
+    updateBounds();
+    window.addEventListener("resize", updateBounds);
+    window.addEventListener("scroll", updateBounds, true);
+    return () => {
+      window.removeEventListener("resize", updateBounds);
+      window.removeEventListener("scroll", updateBounds, true);
+    };
+  }, [active, target]);
+  return { targetBounds, isVisible };
+};
+var useTooltipPlacement = ({
+  targetBounds,
+  isVisible,
+  preferredPosition
+}) => {
+  const tooltipRef = useRef(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const [actualPlacement, setActualPlacement] = useState("bottom");
+  useEffect(() => {
+    if (!targetBounds || !tooltipRef.current || !isVisible) return;
+    const { position, placement } = calculateTooltipPosition(
+      targetBounds,
+      tooltipRef.current.getBoundingClientRect(),
+      preferredPosition || "auto"
+    );
+    setTooltipPosition(position);
+    setActualPlacement(placement);
+  }, [targetBounds, isVisible, preferredPosition]);
+  return { tooltipRef, tooltipPosition, actualPlacement };
+};
+var useTutorialKeyboard = ({
+  enabled,
+  onNext,
+  onPrev,
+  onSkip
+}) => {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyPress = (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          onPrev();
+          break;
+        case "ArrowRight":
+          onNext();
+          break;
+        case "Escape":
+          onSkip();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [enabled, onNext, onPrev, onSkip]);
+};
+var useTutorialOverlay = ({
+  steps,
+  initialStep,
+  active,
+  allowKeyboardNavigation,
+  onComplete,
+  onSkip,
+  onStepComplete
+}) => {
+  const [currentStep, setCurrentStep] = useState(initialStep);
+  const currentStepData = steps[currentStep];
+  const isLastStep = currentStep === steps.length - 1;
+  const { targetBounds, isVisible } = useTargetBounds({
+    active,
+    target: currentStepData?.target
+  });
+  const { tooltipRef, tooltipPosition, actualPlacement } = useTooltipPlacement({
+    targetBounds,
+    isVisible,
+    preferredPosition: currentStepData?.position
+  });
+  const handleNext = useCallback(() => {
+    const currentStepId = steps[currentStep]?.id;
+    if (currentStepId) onStepComplete?.(currentStepId);
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+      return;
+    }
+    onComplete?.();
+  }, [currentStep, steps, onComplete, onStepComplete]);
+  const handlePrev = useCallback(() => {
+    setCurrentStep((step) => Math.max(step - 1, 0));
+  }, []);
+  const handleSkip = useCallback(() => {
+    onSkip?.();
+  }, [onSkip]);
+  const handleRestart = useCallback(() => {
+    setCurrentStep(0);
+  }, []);
+  useTutorialKeyboard({
+    enabled: allowKeyboardNavigation && active,
+    onNext: handleNext,
+    onPrev: handlePrev,
+    onSkip: handleSkip
+  });
+  return {
+    currentStep,
+    currentStepData,
+    isLastStep,
+    isVisible,
+    targetBounds,
+    tooltipRef,
+    tooltipPosition,
+    actualPlacement,
+    progress: (currentStep + 1) / steps.length * 100,
+    handleNext,
+    handlePrev,
+    handleSkip,
+    handleRestart
+  };
+};
+
+// src/components/feedback/TutorialOverlay/TutorialStepBody.tsx
+import CompleteIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import PrevIcon from "@mui/icons-material/NavigateBefore";
+import NextIcon from "@mui/icons-material/NavigateNext";
+import RestartIcon from "@mui/icons-material/Refresh";
+import {
+  alpha,
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  styled,
+  Typography
+} from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+var StepDot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed"
+})(({ theme, active, completed }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: completed ? theme.palette.success.main : active ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.3),
+  transition: "all 0.3s ease",
+  ...active && {
+    transform: "scale(1.5)"
+  }
+}));
+var TutorialStepNav = ({
+  currentStep,
+  stepCount,
+  isLastStep,
+  allowSkip,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    direction: "row",
+    spacing: 1,
+    justifyContent: "space-between",
+    "data-testid": "tutorial-navigation",
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        allowSkip && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onSkip, variant: "text", children: "Skip" }),
+        stepCount > 1 && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onRestart,
+            disabled: currentStep === 0,
+            title: "Restart",
+            children: /* @__PURE__ */ jsx(RestartIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        stepCount > 1 && currentStep > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(PrevIcon, {}),
+            onClick: onPrev,
+            disabled: currentStep === 0,
+            "data-testid": "tutorial-prev-button",
+            children: "Previous"
+          }
+        ),
+        !isLastStep ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(NextIcon, {}),
+            onClick: onNext,
+            disabled: requiresActionBeforeNext,
+            title: requiresActionBeforeNext ? "Complete the required action first" : "",
+            "data-testid": "tutorial-next-button",
+            children: "Next"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(CompleteIcon, {}),
+            onClick: onNext,
+            sx: {
+              background: "linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)"
+            },
+            "data-testid": "tutorial-finish-button",
+            children: stepCount === 1 ? "Complete" : "Finish"
+          }
+        )
+      ] })
+    ]
+  }
+);
+var StepDots = ({
+  currentStep,
+  stepCount
+}) => /* @__PURE__ */ jsx(StepIndicator, { "data-testid": "tutorial-step-indicators", children: Array.from({ length: stepCount }).map((_, index) => /* @__PURE__ */ jsx(
+  StepDot,
+  {
+    active: index === currentStep,
+    completed: index < currentStep,
+    "data-testid": `tutorial-indicator-${index}`
+  },
+  index
+)) });
+var TutorialStepHeader = ({ title, currentStep, allowSkip, onSkip }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: `tutorial-title-${currentStep}`,
+          variant: "h6",
+          fontWeight: "bold",
+          sx: { flex: 1 },
+          "data-testid": "tutorial-step-title",
+          children: title
+        }
+      ),
+      allowSkip && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onSkip,
+          sx: { ml: 1, mt: -1, mr: -1 },
+          "data-testid": "tutorial-close-button",
+          children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+        }
+      )
+    ]
+  }
+);
+var TutorialStepBody = ({
+  step,
+  currentStep,
+  stepCount,
+  progress: _progress,
+  isLastStep,
+  allowSkip,
+  showProgress,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  /* @__PURE__ */ jsx(
+    TutorialStepHeader,
+    {
+      title: step.title,
+      currentStep,
+      allowSkip,
+      onSkip
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: `tutorial-content-${currentStep}`,
+      variant: "body2",
+      color: "text.secondary",
+      "data-testid": "tutorial-step-content",
+      children: step.content
+    }
+  ),
+  showProgress && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", align: "center", children: [
+    currentStep + 1,
+    " of ",
+    stepCount
+  ] }),
+  step.action && /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "contained",
+      size: "small",
+      onClick: step.action.onClick,
+      sx: {
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        color: "white"
+      },
+      children: step.action.label
+    }
+  ),
+  /* @__PURE__ */ jsx(StepDots, { currentStep, stepCount }),
+  /* @__PURE__ */ jsx(
+    TutorialStepNav,
+    {
+      currentStep,
+      stepCount,
+      isLastStep,
+      allowSkip,
+      requiresActionBeforeNext,
+      onNext,
+      onPrev,
+      onSkip,
+      onRestart
+    }
+  )
+] });
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+`;
+var floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+`;
+var Overlay = styled2(Box2, {
+  shouldForwardProp: (prop) => prop !== "allowClickThrough"
+})(({ theme, allowClickThrough }) => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: theme.zIndex.modal + 100,
+  pointerEvents: allowClickThrough ? "none" : "auto",
+  transition: "opacity 0.3s ease"
+}));
+var Backdrop = styled2(Box2)(() => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: alpha2("#000", 0.7),
+  backdropFilter: "blur(2px)"
+}));
+var Spotlight = styled2(Box2, {
+  shouldForwardProp: (prop) => prop !== "bounds" && prop !== "padding"
+})(({ bounds, padding }) => ({
+  position: "absolute",
+  top: bounds.top - padding,
+  left: bounds.left - padding,
+  width: bounds.width + padding * 2,
+  height: bounds.height + padding * 2,
+  borderRadius: 8,
+  border: "2px solid rgba(255, 255, 255, 0.5)",
+  animation: `${pulseAnimation} 2s infinite`,
+  pointerEvents: "none",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    inset: -2,
+    borderRadius: 8,
+    background: "transparent",
+    boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.7)"
+  }
+}));
+var TooltipContainer = styled2(Paper, {
+  shouldForwardProp: (prop) => prop !== "placement"
+})(({ theme, placement }) => ({
+  position: "absolute",
+  maxWidth: 360,
+  padding: theme.spacing(3),
+  background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: `1px solid ${alpha2(theme.palette.divider, 0.18)}`,
+  boxShadow: theme.shadows[12],
+  animation: `${floatAnimation} 3s ease-in-out infinite`,
+  pointerEvents: "auto",
+  zIndex: theme.zIndex.modal + 101,
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    width: 12,
+    height: 12,
+    background: "inherit",
+    transform: "rotate(45deg)",
+    border: "inherit",
+    ...placement === "top" && {
+      bottom: -7,
+      left: "50%",
+      marginLeft: -6,
+      borderTop: "none",
+      borderLeft: "none"
+    },
+    ...placement === "bottom" && {
+      top: -7,
+      left: "50%",
+      marginLeft: -6,
+      borderBottom: "none",
+      borderRight: "none"
+    },
+    ...placement === "left" && {
+      right: -7,
+      top: "50%",
+      marginTop: -6,
+      borderLeft: "none",
+      borderBottom: "none"
+    },
+    ...placement === "right" && {
+      left: -7,
+      top: "50%",
+      marginTop: -6,
+      borderRight: "none",
+      borderTop: "none"
+    }
+  }
+}));
+var ProgressBar = styled2(LinearProgress)(({ theme }) => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 4,
+  zIndex: theme.zIndex.modal + 102,
+  "& .MuiLinearProgress-bar": {
+    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`
+  }
+}));
+var TUTORIAL_DEFAULTS = {
+  initialStep: 0,
+  active: true,
+  showProgress: true,
+  allowKeyboardNavigation: true,
+  allowClickThrough: false,
+  variant: "tooltip",
+  allowSkip: false,
+  animated: true
+};
+var resolveProps = (props) => ({
+  ...TUTORIAL_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var TutorialLayers = ({ variant, targetBounds, isVisible, spotlightPadding }) => {
+  const isSpotlight = variant === "spotlight" || variant === "highlight";
+  const dimmed = variant === "modal" || isSpotlight;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    dimmed && /* @__PURE__ */ jsx2(Backdrop, {}),
+    targetBounds && isVisible && isSpotlight && /* @__PURE__ */ jsx2(
+      Spotlight,
+      {
+        bounds: targetBounds,
+        padding: spotlightPadding || 8,
+        "data-testid": "tutorial-highlight"
+      }
+    )
+  ] });
+};
+var TutorialTooltip = ({ tutorial, steps, allowSkip, showProgress, animated, requiresActionBeforeNext }) => /* @__PURE__ */ jsx2(Fade, { in: tutorial.isVisible, timeout: 300, children: /* @__PURE__ */ jsx2(
+  TooltipContainer,
+  {
+    ref: tutorial.tooltipRef,
+    placement: tutorial.actualPlacement,
+    elevation: 12,
+    style: {
+      top: tutorial.tooltipPosition.top,
+      left: tutorial.tooltipPosition.left,
+      animation: animated ? void 0 : "none"
+    },
+    role: "dialog",
+    "aria-labelledby": `tutorial-title-${tutorial.currentStep}`,
+    "aria-describedby": `tutorial-content-${tutorial.currentStep}`,
+    "data-testid": `tutorial-step-${tutorial.currentStep}`,
+    children: /* @__PURE__ */ jsx2(
+      TutorialStepBody,
+      {
+        step: tutorial.currentStepData,
+        currentStep: tutorial.currentStep,
+        stepCount: steps.length,
+        progress: tutorial.progress,
+        isLastStep: tutorial.isLastStep,
+        allowSkip,
+        showProgress,
+        requiresActionBeforeNext,
+        onNext: tutorial.handleNext,
+        onPrev: tutorial.handlePrev,
+        onSkip: tutorial.handleSkip,
+        onRestart: tutorial.handleRestart
+      }
+    )
+  }
+) });
+var TutorialOverlay = (componentProps) => {
+  const {
+    steps,
+    onComplete,
+    onSkip,
+    onStepComplete,
+    initialStep,
+    active,
+    showProgress,
+    allowKeyboardNavigation,
+    allowClickThrough,
+    variant,
+    allowSkip,
+    animated
+  } = resolveProps(componentProps);
+  const tutorial = useTutorialOverlay({
+    steps,
+    initialStep,
+    active,
+    allowKeyboardNavigation,
+    onComplete,
+    onSkip,
+    onStepComplete
+  });
+  const { currentStepData, isLastStep, isVisible, targetBounds, progress } = tutorial;
+  const requiresActionBeforeNext = Boolean(currentStepData?.requiresAction) && !isLastStep;
+  if (!active || !currentStepData) return null;
+  if (steps.length === 0) return null;
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsxs2(Overlay, { allowClickThrough, "data-testid": "tutorial-overlay", children: [
+    showProgress && /* @__PURE__ */ jsx2(ProgressBar, { variant: "determinate", value: progress }),
+    /* @__PURE__ */ jsx2(
+      TutorialLayers,
+      {
+        variant,
+        targetBounds,
+        isVisible,
+        spotlightPadding: currentStepData.spotlightPadding
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      TutorialTooltip,
+      {
+        tutorial: { ...tutorial, currentStepData },
+        steps,
+        allowSkip,
+        showProgress,
+        animated,
+        requiresActionBeforeNext
+      }
+    )
+  ] }) });
+};
+export {
+  TutorialOverlay
+};
+//# sourceMappingURL=TutorialOverlay.js.map