@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-RSQMPCCR.js

@@ -0,0 +1,141 @@
+import {
+  calculateTooltipPosition,
+  getElementBounds
+} from "./chunk-NYZO3JNB.js";
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+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
+  };
+};
+
+export {
+  useTutorialOverlay
+};
+//# sourceMappingURL=chunk-RSQMPCCR.js.map

package/dist/chunk-RSQMPCCR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { calculateTooltipPosition, getElementBounds } from './TutorialOverlay.geometry';\nimport type { TutorialOverlayProps } from './TutorialOverlay.types';\n\n// Tracks the highlighted element's box, re-measuring on resize and scroll. Scroll\n// is captured (third argument true) so it fires for any scrolling ancestor, not\n// just the window.\nconst useTargetBounds = ({\n  active,\n  target,\n}: {\n  active: boolean;\n  target?: string;\n}) => {\n  const [targetBounds, setTargetBounds] = useState<globalThis.DOMRect | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    if (!active || !target) return;\n\n    const updateBounds = () => {\n      const bounds = getElementBounds(target);\n      setTargetBounds(bounds);\n      setIsVisible(Boolean(bounds));\n    };\n\n    updateBounds();\n\n    window.addEventListener('resize', updateBounds);\n    window.addEventListener('scroll', updateBounds, true);\n\n    return () => {\n      window.removeEventListener('resize', updateBounds);\n      window.removeEventListener('scroll', updateBounds, true);\n    };\n  }, [active, target]);\n\n  return { targetBounds, isVisible };\n};\n\n// Places the tooltip against the measured target once both boxes are known.\nconst useTooltipPlacement = ({\n  targetBounds,\n  isVisible,\n  preferredPosition,\n}: {\n  targetBounds: globalThis.DOMRect | null;\n  isVisible: boolean;\n  preferredPosition?: string;\n}) => {\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });\n  const [actualPlacement, setActualPlacement] = useState<string>('bottom');\n\n  useEffect(() => {\n    if (!targetBounds || !tooltipRef.current || !isVisible) return;\n\n    const { position, placement } = calculateTooltipPosition(\n      targetBounds,\n      tooltipRef.current.getBoundingClientRect(),\n      preferredPosition || 'auto',\n    );\n\n    setTooltipPosition(position);\n    setActualPlacement(placement);\n  }, [targetBounds, isVisible, preferredPosition]);\n\n  return { tooltipRef, tooltipPosition, actualPlacement };\n};\n\n// Arrow keys step through the tour, Escape skips it.\nconst useTutorialKeyboard = ({\n  enabled,\n  onNext,\n  onPrev,\n  onSkip,\n}: {\n  enabled: boolean;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n}) => {\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleKeyPress = (e: globalThis.KeyboardEvent) => {\n      switch (e.key) {\n        case 'ArrowLeft':\n          onPrev();\n          break;\n        case 'ArrowRight':\n          onNext();\n          break;\n        case 'Escape':\n          onSkip();\n          break;\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyPress);\n    return () => window.removeEventListener('keydown', handleKeyPress);\n  }, [enabled, onNext, onPrev, onSkip]);\n};\n\nexport const useTutorialOverlay = ({\n  steps,\n  initialStep,\n  active,\n  allowKeyboardNavigation,\n  onComplete,\n  onSkip,\n  onStepComplete,\n}: {\n  steps: TutorialOverlayProps['steps'];\n  initialStep: number;\n  active: boolean;\n  allowKeyboardNavigation: boolean;\n  onComplete?: () => void;\n  onSkip?: () => void;\n  onStepComplete?: (stepId: string) => void;\n}) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n\n  const currentStepData = steps[currentStep];\n  const isLastStep = currentStep === steps.length - 1;\n\n  const { targetBounds, isVisible } = useTargetBounds({\n    active,\n    target: currentStepData?.target,\n  });\n\n  const { tooltipRef, tooltipPosition, actualPlacement } = useTooltipPlacement({\n    targetBounds,\n    isVisible,\n    preferredPosition: currentStepData?.position,\n  });\n\n  const handleNext = useCallback(() => {\n    const currentStepId = steps[currentStep]?.id;\n    if (currentStepId) onStepComplete?.(currentStepId);\n\n    if (currentStep < steps.length - 1) {\n      setCurrentStep(currentStep + 1);\n      return;\n    }\n\n    onComplete?.();\n  }, [currentStep, steps, onComplete, onStepComplete]);\n\n  const handlePrev = useCallback(() => {\n    setCurrentStep((step) => Math.max(step - 1, 0));\n  }, []);\n\n  const handleSkip = useCallback(() => {\n    onSkip?.();\n  }, [onSkip]);\n\n  const handleRestart = useCallback(() => {\n    setCurrentStep(0);\n  }, []);\n\n  useTutorialKeyboard({\n    enabled: allowKeyboardNavigation && active,\n    onNext: handleNext,\n    onPrev: handlePrev,\n    onSkip: handleSkip,\n  });\n\n  return {\n    currentStep,\n    currentStepData,\n    isLastStep,\n    isVisible,\n    targetBounds,\n    tooltipRef,\n    tooltipPosition,\n    actualPlacement,\n    progress: ((currentStep + 1) / steps.length) * 100,\n    handleNext,\n    handlePrev,\n    handleSkip,\n    handleRestart,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-RTIOXLGI.js

@@ -0,0 +1,317 @@
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  accentFor,
+  muiSize
+} from "./chunk-OZCEKQIX.js";
+
+// src/components/data-display/Carousel/Carousel.parts.tsx
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { alpha, Box, IconButton, Typography, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var activateOnKey = (onSelect) => (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    onSelect();
+  }
+};
+var INDICATOR_POSITIONS = (theme) => ({
+  top: { top: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
+  bottom: { bottom: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
+  left: {
+    left: theme.spacing(2),
+    top: "50%",
+    transform: "translateY(-50%)",
+    flexDirection: "column"
+  },
+  right: {
+    right: theme.spacing(2),
+    top: "50%",
+    transform: "translateY(-50%)",
+    flexDirection: "column"
+  }
+});
+var indicatorAttrs = (index, isActive) => ({
+  "aria-label": `Go to slide ${index + 1}`,
+  "data-testid": `carousel-indicator-${index}`,
+  "data-active": isActive
+});
+var LineIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "button",
+      tabIndex: 0,
+      ...indicatorAttrs(index, isActive),
+      sx: {
+        width: isActive ? 30 : 20,
+        height: 3,
+        backgroundColor: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
+        borderRadius: 1.5,
+        transition: theme.transitions.create(["width", "background-color"]),
+        cursor: "pointer"
+      },
+      onClick: onSelect,
+      onKeyDown: activateOnKey(onSelect)
+    }
+  );
+};
+var NumberIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "button",
+      tabIndex: 0,
+      ...indicatorAttrs(index, isActive),
+      sx: {
+        width: 24,
+        height: 24,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        backgroundColor: isActive ? accentFor(theme, color).main : "transparent",
+        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,
+        border: `1px solid ${accentFor(theme, color).main}`,
+        fontSize: "0.75rem",
+        fontWeight: isActive ? "bold" : "normal",
+        cursor: "pointer",
+        transition: theme.transitions.create(["all"])
+      },
+      onClick: onSelect,
+      onKeyDown: activateOnKey(onSelect),
+      children: index + 1
+    }
+  );
+};
+var DotIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      ...indicatorAttrs(index, isActive),
+      onClick: onSelect,
+      sx: {
+        p: 0.5,
+        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
+        transform: isActive ? "scale(1.2)" : "scale(1)",
+        transition: theme.transitions.create(["transform", "color"])
+      },
+      children: /* @__PURE__ */ jsx(FiberManualRecordIcon, { fontSize: "small" })
+    }
+  );
+};
+var INDICATORS = {
+  lines: LineIndicator,
+  numbers: NumberIndicator,
+  dots: DotIndicator
+};
+var INDICATORS_DEFAULTS = {
+  position: "bottom",
+  color: "primary",
+  variant: "dots"
+};
+var CarouselIndicators = (props) => {
+  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(
+    props,
+    INDICATORS_DEFAULTS
+  );
+  const theme = useTheme();
+  const Indicator = INDICATORS[variant] ?? DotIndicator;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": "carousel-indicators",
+      sx: {
+        position: "absolute",
+        display: "flex",
+        gap: 1,
+        zIndex: 2,
+        ...INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom,
+        ...style
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        Indicator,
+        {
+          index,
+          isActive: index === activeIndex,
+          color,
+          onSelect: () => onSelect(index)
+        },
+        index
+      ))
+    }
+  );
+};
+var ARROWS_DEFAULTS = {
+  position: "overlay",
+  disabled: false,
+  disablePrev: false,
+  disableNext: false,
+  color: "primary",
+  size: "md"
+};
+var arrowSx = (theme, color, isOverlay) => ({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: 3,
+  backgroundColor: alpha(theme.palette.background.paper, 0.8),
+  color: accentFor(theme, color).main,
+  "&:disabled": { opacity: 0.3 },
+  ...isOverlay ? {
+    opacity: 0.7,
+    "&:hover": { backgroundColor: theme.palette.background.paper, opacity: 1 }
+  } : { "&:hover": { backgroundColor: theme.palette.background.paper } }
+});
+var CarouselArrows = (props) => {
+  const {
+    copy,
+    onPrev,
+    onNext,
+    position,
+    disabled,
+    disablePrev,
+    disableNext,
+    color,
+    size,
+    className,
+    style
+  } = withDefaults(props, ARROWS_DEFAULTS);
+  const theme = useTheme();
+  const sx = arrowSx(theme, color, position === "overlay");
+  const offset = position === "outside" ? -40 : 8;
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "carousel-navigation", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: disabled || disablePrev,
+        size: muiSize(size),
+        className,
+        "aria-label": copy.previous,
+        "data-testid": "carousel-prev-button",
+        sx: { ...sx, left: offset, ...style },
+        children: /* @__PURE__ */ jsx(ArrowBackIosIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: disabled || disableNext,
+        "aria-label": copy.next,
+        size: muiSize(size),
+        className,
+        "data-testid": "carousel-next-button",
+        sx: { ...sx, right: offset, ...style },
+        children: /* @__PURE__ */ jsx(ArrowForwardIosIcon, {})
+      }
+    )
+  ] });
+};
+var THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 };
+var DEFAULT_THUMBNAIL_SIZE = 60;
+var Thumbnail = ({ item, index, isActive, side, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      onClick: onSelect,
+      "data-testid": `carousel-thumbnail-${index}`,
+      "data-active": isActive,
+      sx: {
+        width: side,
+        height: side,
+        border: `2px solid ${isActive ? theme.palette.primary.main : "transparent"}`,
+        borderRadius: 1,
+        overflow: "hidden",
+        cursor: "pointer",
+        opacity: isActive ? 1 : 0.6,
+        transition: theme.transitions.create(["opacity", "border-color"]),
+        "&:hover": { opacity: 1 }
+      },
+      children: item.image ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "img",
+          src: item.image,
+          alt: item.alt || item.title,
+          sx: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      ) : (
+        // No image to show, so the slide's number stands in for it.
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: "100%",
+              height: "100%",
+              backgroundColor: theme.palette.grey[300],
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: index + 1 })
+          }
+        )
+      )
+    }
+  );
+};
+var CarouselThumbnails = ({
+  items,
+  activeIndex,
+  onSelect,
+  size = "sm",
+  className,
+  style
+}) => {
+  const theme = useTheme();
+  const side = THUMBNAIL_SIZES[size] ?? DEFAULT_THUMBNAIL_SIZE;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": "carousel-thumbnails",
+      sx: {
+        position: "absolute",
+        // Hung below the frame, clear of its own height plus a gap.
+        bottom: -side - 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        gap: 1,
+        p: 1,
+        backgroundColor: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: 1,
+        ...style
+      },
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          item,
+          index,
+          isActive: index === activeIndex,
+          side,
+          onSelect: () => onSelect(index)
+        },
+        item.id
+      ))
+    }
+  );
+};
+
+export {
+  CarouselIndicators,
+  CarouselArrows,
+  CarouselThumbnails
+};
+//# sourceMappingURL=chunk-RTIOXLGI.js.map

package/dist/chunk-RTIOXLGI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.parts.tsx"],"sourcesContent":["import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\nimport { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { accentFor, muiSize } from '../../../tokens/scales';\n\nimport type {\n  CarouselArrowsProps,\n  CarouselIndicatorsProps,\n  CarouselItem,\n  CarouselThumbnailsProps,\n} from './Carousel.types';\n\ntype IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;\ntype IndicatorVariant = NonNullable<CarouselIndicatorsProps['variant']>;\ntype Color = NonNullable<CarouselIndicatorsProps['color']>;\n\n/** Fires `onSelect` for the keys a native button would treat as activation. */\nconst activateOnKey = (onSelect: () => void) => (e: React.KeyboardEvent) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    onSelect();\n  }\n};\n\nconst INDICATOR_POSITIONS = (theme: Theme): Record<IndicatorPosition, CSSObject> => ({\n  top: { top: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  bottom: { bottom: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  left: {\n    left: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n  right: {\n    right: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n});\n\ninterface IndicatorProps {\n  index: number;\n  isActive: boolean;\n  color: Color;\n  onSelect: () => void;\n}\n\n/** Attributes every indicator variant carries, whatever it draws. */\nconst indicatorAttrs = (index: number, isActive: boolean) => ({\n  'aria-label': `Go to slide ${index + 1}`,\n  'data-testid': `carousel-indicator-${index}`,\n  'data-active': isActive,\n});\n\nconst LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: isActive ? 30 : 20,\n        height: 3,\n        backgroundColor: isActive\n          ? accentFor(theme, color).main\n          : alpha(accentFor(theme, color).main, 0.3),\n        borderRadius: 1.5,\n        transition: theme.transitions.create(['width', 'background-color']),\n        cursor: 'pointer',\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    />\n  );\n};\n\nconst NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: 24,\n        height: 24,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '50%',\n        backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',\n        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,\n        border: `1px solid ${accentFor(theme, color).main}`,\n        fontSize: '0.75rem',\n        fontWeight: isActive ? 'bold' : 'normal',\n        cursor: 'pointer',\n        transition: theme.transitions.create(['all']),\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    >\n      {index + 1}\n    </Box>\n  );\n};\n\nconst DotIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <IconButton\n      size=\"small\"\n      {...indicatorAttrs(index, isActive)}\n      onClick={onSelect}\n      sx={{\n        p: 0.5,\n        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),\n        transform: isActive ? 'scale(1.2)' : 'scale(1)',\n        transition: theme.transitions.create(['transform', 'color']),\n      }}\n    >\n      <FiberManualRecordIcon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n\nconst INDICATORS: Record<IndicatorVariant, React.FC<IndicatorProps>> = {\n  lines: LineIndicator,\n  numbers: NumberIndicator,\n  dots: DotIndicator,\n};\n\nconst INDICATORS_DEFAULTS = {\n  position: 'bottom',\n  color: 'primary',\n  variant: 'dots',\n} satisfies Partial<CarouselIndicatorsProps>;\n\nexport const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) => {\n  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(\n    props,\n    INDICATORS_DEFAULTS,\n  ) as CarouselIndicatorsProps & Required<Pick<CarouselIndicatorsProps, keyof typeof INDICATORS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const Indicator = INDICATORS[variant] ?? DotIndicator;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-indicators\"\n      sx={{\n        position: 'absolute',\n        display: 'flex',\n        gap: 1,\n        zIndex: 2,\n        ...(INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom),\n        ...style,\n      }}\n    >\n      {Array.from({ length: count }).map((_, index) => (\n        <Indicator\n          key={index}\n          index={index}\n          isActive={index === activeIndex}\n          color={color}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst ARROWS_DEFAULTS = {\n  position: 'overlay',\n  disabled: false,\n  disablePrev: false,\n  disableNext: false,\n  color: 'primary',\n  size: 'md',\n} satisfies Partial<CarouselArrowsProps>;\n\n/**\n * All three positions place the arrow the same way; only `overlay` fades it back\n * until hovered, and only `outside` sits it clear of the frame.\n */\nconst arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => ({\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  zIndex: 3,\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  color: accentFor(theme, color).main,\n  '&:disabled': { opacity: 0.3 },\n  ...(isOverlay\n    ? {\n        opacity: 0.7,\n        '&:hover': { backgroundColor: theme.palette.background.paper, opacity: 1 },\n      }\n    : { '&:hover': { backgroundColor: theme.palette.background.paper } }),\n});\n\nexport const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {\n  const {\n    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,\n    style,\n  } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &\n    Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const sx = arrowSx(theme, color, position === 'overlay');\n  const offset = position === 'outside' ? -40 : 8;\n\n  return (\n    <Box data-testid=\"carousel-navigation\">\n      <IconButton\n        onClick={onPrev}\n        disabled={disabled || disablePrev}\n        size={muiSize(size)}\n        className={className}\n        aria-label={copy.previous}\n        data-testid=\"carousel-prev-button\"\n        sx={{ ...sx, left: offset, ...style }}\n      >\n        <ArrowBackIosIcon />\n      </IconButton>\n\n      <IconButton\n        onClick={onNext}\n        disabled={disabled || disableNext}\n        aria-label={copy.next}\n        size={muiSize(size)}\n        className={className}\n        data-testid=\"carousel-next-button\"\n        sx={{ ...sx, right: offset, ...style }}\n      >\n        <ArrowForwardIosIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\nconst THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;\nconst DEFAULT_THUMBNAIL_SIZE = 60;\n\nconst Thumbnail: React.FC<{\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  side: number;\n  onSelect: () => void;\n}> = ({ item, index, isActive, side, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      onClick={onSelect}\n      data-testid={`carousel-thumbnail-${index}`}\n      data-active={isActive}\n      sx={{\n        width: side,\n        height: side,\n        border: `2px solid ${isActive ? theme.palette.primary.main : 'transparent'}`,\n        borderRadius: 1,\n        overflow: 'hidden',\n        cursor: 'pointer',\n        opacity: isActive ? 1 : 0.6,\n        transition: theme.transitions.create(['opacity', 'border-color']),\n        '&:hover': { opacity: 1 },\n      }}\n    >\n      {item.image ? (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover' }}\n        />\n      ) : (\n        // No image to show, so the slide's number stands in for it.\n        <Box\n          sx={{\n            width: '100%',\n            height: '100%',\n            backgroundColor: theme.palette.grey[300],\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <Typography variant=\"caption\">{index + 1}</Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nexport const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({\n  items,\n  activeIndex,\n  onSelect,\n  size = 'sm',\n  className,\n  style,\n}) => {\n  const theme = useTheme();\n  const side = THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? DEFAULT_THUMBNAIL_SIZE;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-thumbnails\"\n      sx={{\n        position: 'absolute',\n        // Hung below the frame, clear of its own height plus a gap.\n        bottom: -side - 16,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        display: 'flex',\n        gap: 1,\n        p: 1,\n        backgroundColor: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: 1,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <Thumbnail\n          key={item.id}\n          item={item}\n          index={index}\n          isActive={index === activeIndex}\n          side={side}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-RUIV5TVA.js

@@ -0,0 +1,61 @@
+// src/components/data-display/Carousel/Carousel.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var stepIndex = (current, step, count, loop) => {
+  const next = current + step;
+  if (next >= count) return loop ? 0 : current;
+  if (next < 0) return loop ? count - 1 : 0;
+  return next;
+};
+var useCarouselNavigation = ({
+  count,
+  loop,
+  autoPlay,
+  autoPlayInterval,
+  pauseOnHover,
+  disabled,
+  onChange
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+  const intervalRef = useRef(null);
+  const goBy = useCallback(
+    (step) => {
+      setActiveIndex((prev) => {
+        const next = stepIndex(prev, step, count, loop);
+        if (next !== prev) {
+          onChange?.(next);
+        }
+        return next;
+      });
+    },
+    [count, loop, onChange]
+  );
+  const handleNext = useCallback(() => goBy(1), [goBy]);
+  const handlePrev = useCallback(() => goBy(-1), [goBy]);
+  const handleSelect = useCallback(
+    (index) => {
+      setActiveIndex(index);
+      onChange?.(index);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    if (!autoPlay || isHovered || disabled) return;
+    intervalRef.current = window.setInterval(handleNext, autoPlayInterval);
+    return () => {
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval, isHovered, disabled, handleNext]);
+  const hoverProps = {
+    onMouseEnter: () => pauseOnHover && setIsHovered(true),
+    onMouseLeave: () => pauseOnHover && setIsHovered(false)
+  };
+  return { activeIndex, handleNext, handlePrev, handleSelect, hoverProps };
+};
+
+export {
+  useCarouselNavigation
+};
+//# sourceMappingURL=chunk-RUIV5TVA.js.map

package/dist/chunk-RUIV5TVA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface CarouselNavigationInput {\n  count: number;\n  loop: boolean;\n  autoPlay: boolean;\n  autoPlayInterval: number;\n  pauseOnHover: boolean;\n  disabled: boolean;\n  onChange?: (index: number) => void;\n}\n\n/**\n * Steps `current` by `step`, wrapping when `loop` allows it and stopping at the\n * end when it does not. Returns the same index it was given when there is\n * nowhere to go, which is what lets the caller skip a no-op `onChange`.\n */\nconst stepIndex = (current: number, step: number, count: number, loop: boolean) => {\n  const next = current + step;\n\n  if (next >= count) return loop ? 0 : current;\n  if (next < 0) return loop ? count - 1 : 0;\n  return next;\n};\n\n/**\n * Which slide is showing and everything that changes it: the arrows, an\n * indicator click, and the autoplay timer.\n *\n * Hover is tracked here rather than in the component because its only job is to\n * pause that timer.\n */\nexport const useCarouselNavigation = ({\n  count,\n  loop,\n  autoPlay,\n  autoPlayInterval,\n  pauseOnHover,\n  disabled,\n  onChange,\n}: CarouselNavigationInput) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isHovered, setIsHovered] = useState(false);\n  const intervalRef = useRef<number | null>(null);\n\n  const goBy = useCallback(\n    (step: number) => {\n      setActiveIndex((prev) => {\n        const next = stepIndex(prev, step, count, loop);\n        if (next !== prev) {\n          onChange?.(next);\n        }\n        return next;\n      });\n    },\n    [count, loop, onChange],\n  );\n\n  const handleNext = useCallback(() => goBy(1), [goBy]);\n  const handlePrev = useCallback(() => goBy(-1), [goBy]);\n\n  const handleSelect = useCallback(\n    (index: number) => {\n      setActiveIndex(index);\n      onChange?.(index);\n    },\n    [onChange],\n  );\n\n  useEffect(() => {\n    if (!autoPlay || isHovered || disabled) return;\n\n    intervalRef.current = window.setInterval(handleNext, autoPlayInterval);\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current);\n      }\n    };\n  }, [autoPlay, autoPlayInterval, isHovered, disabled, handleNext]);\n\n  const hoverProps = {\n    onMouseEnter: () => pauseOnHover && setIsHovered(true),\n    onMouseLeave: () => pauseOnHover && setIsHovered(false),\n  };\n\n  return { activeIndex, handleNext, handlePrev, handleSelect, hoverProps };\n};\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAiBzD,IAAM,YAAY,CAAC,SAAiB,MAAc,OAAe,SAAkB;AACjF,QAAM,OAAO,UAAU;AAEvB,MAAI,QAAQ,MAAO,QAAO,OAAO,IAAI;AACrC,MAAI,OAAO,EAAG,QAAO,OAAO,QAAQ,IAAI;AACxC,SAAO;AACT;AASO,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,cAAc,OAAsB,IAAI;AAE9C,QAAM,OAAO;AAAA,IACX,CAAC,SAAiB;AAChB,qBAAe,CAAC,SAAS;AACvB,cAAM,OAAO,UAAU,MAAM,MAAM,OAAO,IAAI;AAC9C,YAAI,SAAS,MAAM;AACjB,qBAAW,IAAI;AAAA,QACjB;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO,MAAM,QAAQ;AAAA,EACxB;AAEA,QAAM,aAAa,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpD,QAAM,aAAa,YAAY,MAAM,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC;AAErD,QAAM,eAAe;AAAA,IACnB,CAAC,UAAkB;AACjB,qBAAe,KAAK;AACpB,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,aAAa,SAAU;AAExC,gBAAY,UAAU,OAAO,YAAY,YAAY,gBAAgB;AAErE,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,eAAO,cAAc,YAAY,OAAO;AAAA,MAC1C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,kBAAkB,WAAW,UAAU,UAAU,CAAC;AAEhE,QAAM,aAAa;AAAA,IACjB,cAAc,MAAM,gBAAgB,aAAa,IAAI;AAAA,IACrD,cAAc,MAAM,gBAAgB,aAAa,KAAK;AAAA,EACxD;AAEA,SAAO,EAAE,aAAa,YAAY,YAAY,cAAc,WAAW;AACzE;","names":[]}