@12-apps/ui 5.0.0 → 5.1.0

package/dist/data-display/Carousel.js

@@ -0,0 +1,764 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import {
+  accentFor,
+  muiColor,
+  muiSize
+} from "../chunk-OZCEKQIX.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/data-display/Carousel/Carousel.tsx
+import { Box as Box3, CircularProgress, Fade, Slide, useTheme as useTheme3, Zoom } from "@mui/material";
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+
+// 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 };
+};
+
+// 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 {
+    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": "Previous slide",
+        "data-testid": "carousel-prev-button",
+        sx: { ...sx, left: offset, ...style },
+        children: /* @__PURE__ */ jsx(ArrowBackIosIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: disabled || disableNext,
+        "aria-label": "Next slide",
+        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
+      ))
+    }
+  );
+};
+
+// src/components/data-display/Carousel/Carousel.chrome.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CarouselChrome = ({
+  items,
+  activeIndex,
+  loop,
+  disabled,
+  showArrows,
+  showIndicators,
+  showThumbnails,
+  arrowPosition,
+  indicatorPosition,
+  color,
+  size,
+  onPrev,
+  onNext,
+  onSelect
+}) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  showArrows && !disabled && /* @__PURE__ */ jsx2(
+    CarouselArrows,
+    {
+      onPrev,
+      onNext,
+      position: arrowPosition,
+      color,
+      disablePrev: !loop && activeIndex === 0,
+      disableNext: !loop && activeIndex === items.length - 1
+    }
+  ),
+  showIndicators && /* @__PURE__ */ jsx2(
+    CarouselIndicators,
+    {
+      count: items.length,
+      activeIndex,
+      onSelect,
+      position: indicatorPosition,
+      color
+    }
+  ),
+  showThumbnails && /* @__PURE__ */ jsx2(
+    CarouselThumbnails,
+    {
+      items,
+      activeIndex,
+      onSelect,
+      size
+    }
+  )
+] });
+
+// src/components/data-display/Carousel/Carousel.slide.tsx
+import { Box as Box2, Paper, Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SlideCaption = ({
+  title,
+  description,
+  content,
+  image
+}) => /* @__PURE__ */ jsxs3(Box2, { sx: { position: "relative", zIndex: 1, textAlign: "center", p: 3 }, children: [
+  title && /* @__PURE__ */ jsx3(
+    Typography2,
+    {
+      variant: "h5",
+      sx: {
+        color: image ? "white" : "text.primary",
+        textShadow: image ? "0 2px 4px rgba(0,0,0,0.5)" : "none",
+        mb: 1
+      },
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx3(
+    Typography2,
+    {
+      variant: "body1",
+      sx: {
+        color: image ? "white" : "text.secondary",
+        textShadow: image ? "0 1px 2px rgba(0,0,0,0.5)" : "none"
+      },
+      children: description
+    }
+  ),
+  content
+] });
+var CarouselSlide = ({
+  item,
+  index,
+  isActive,
+  variant,
+  clickable,
+  onSelect
+}) => {
+  const theme = useTheme2();
+  const content = /* @__PURE__ */ jsxs3(
+    Box2,
+    {
+      sx: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: clickable ? "pointer" : "default",
+        position: "relative"
+      },
+      onClick: () => onSelect(item, index),
+      children: [
+        item.image && /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            component: "img",
+            src: item.image,
+            alt: item.alt || item.title,
+            sx: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              position: "absolute",
+              top: 0,
+              left: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          SlideCaption,
+          {
+            title: item.title,
+            description: item.description,
+            content: item.content,
+            image: item.image
+          }
+        )
+      ]
+    }
+  );
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx3(
+      Paper,
+      {
+        elevation: isActive ? 8 : 2,
+        sx: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          transform: isActive ? "scale(1)" : "scale(0.9)",
+          transition: theme.transitions.create(["transform", "box-shadow"])
+        },
+        children: content
+      }
+    );
+  }
+  return content;
+};
+var CarouselTrack = ({
+  items,
+  activeIndex,
+  variant,
+  animation,
+  transition: Transition,
+  clickable,
+  onSelect
+}) => /* @__PURE__ */ jsx3(
+  Box2,
+  {
+    "data-testid": "carousel-track",
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx3(
+      Transition,
+      {
+        in: index === activeIndex,
+        timeout: 600,
+        ...animation === "flip" && { direction: "left" },
+        children: /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            "data-testid": `carousel-slide-${index}`,
+            "data-active": index === activeIndex,
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: index === activeIndex ? "block" : "none"
+            },
+            children: /* @__PURE__ */ jsx3(
+              CarouselSlide,
+              {
+                item,
+                index,
+                isActive: index === activeIndex,
+                variant,
+                clickable,
+                onSelect
+              }
+            )
+          }
+        )
+      },
+      item.id
+    ))
+  }
+);
+
+// src/components/data-display/Carousel/Carousel.styles.ts
+import { alpha as alpha2 } from "@mui/material";
+var SIZES = {
+  xs: { height: 200, fontSize: "0.75rem" },
+  sm: { height: 300, fontSize: "0.875rem" },
+  md: { height: 400, fontSize: "1rem" },
+  lg: { height: 500, fontSize: "1.125rem" },
+  xl: { height: 600, fontSize: "1.25rem" }
+};
+var sizeStyles = (size) => SIZES[size] ?? SIZES.md;
+var SURFACES = {
+  glass: ({ theme, color, glass }) => ({
+    backgroundColor: alpha2(theme.palette.background.paper, glass ? 0.1 : 0.9),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha2(accentFor(theme, color).main, 0.2)}`
+  }),
+  gradient: ({ theme, color, gradient }) => ({
+    background: gradient ? `linear-gradient(135deg, ${alpha2(accentFor(theme, color).light, 0.1)}, ${alpha2(accentFor(theme, color).dark, 0.1)})` : "transparent"
+  }),
+  elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),
+  minimal: () => ({ border: "none", boxShadow: "none" }),
+  cards: ({ theme }) => ({ padding: theme.spacing(2) }),
+  default: () => ({})
+};
+var containerStyles = (input) => {
+  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const accent = accentFor(theme, color).main;
+  return {
+    position: "relative",
+    width,
+    // A numeric height is taken literally; anything else falls back to the size
+    // preset, since a percentage cannot resolve against an unsized parent here.
+    height: typeof height === "number" ? height : sizeStyles(size).height,
+    overflow: "hidden",
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    ...glow && { boxShadow: `0 0 30px ${alpha2(accent, 0.4)}` },
+    ...pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { boxShadow: `0 0 0 0 ${alpha2(accent, 0.4)}` },
+        "70%": { boxShadow: `0 0 0 20px ${alpha2(accent, 0)}` },
+        "100%": { boxShadow: `0 0 0 0 ${alpha2(accent, 0)}` }
+      }
+    },
+    ...(SURFACES[variant] ?? SURFACES.default)(input)
+  };
+};
+
+// src/components/data-display/Carousel/Carousel.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  autoPlay: false,
+  autoPlayInterval: 3e3,
+  loop: true,
+  showIndicators: true,
+  showArrows: true,
+  showThumbnails: false,
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  height: 400,
+  width: "100%",
+  pauseOnHover: true,
+  indicatorPosition: "bottom",
+  arrowPosition: "overlay",
+  animation: "slide"
+};
+var TRANSITIONS = { fade: Fade, zoom: Zoom, flip: Slide, slide: Slide };
+var Carousel = (props) => {
+  const resolved = withDefaults(props, DEFAULTS);
+  const {
+    items,
+    variant,
+    size,
+    color,
+    autoPlay,
+    autoPlayInterval,
+    loop,
+    loading,
+    disabled,
+    className,
+    style,
+    height,
+    width,
+    pauseOnHover,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    animation,
+    glow,
+    pulse,
+    glass,
+    gradient
+  } = resolved;
+  const theme = useTheme3();
+  const containerRef = useRef2(null);
+  const { activeIndex, handleNext, handlePrev, handleSelect, hoverProps } = useCarouselNavigation({
+    count: items.length,
+    loop,
+    autoPlay,
+    autoPlayInterval,
+    pauseOnHover,
+    disabled,
+    onChange
+  });
+  const handleItemClick = useCallback2(
+    (item, index) => {
+      if (!disabled) {
+        onClick?.(item, index);
+      }
+    },
+    [disabled, onClick]
+  );
+  const frameSx = containerStyles({
+    theme,
+    variant,
+    size,
+    color,
+    height,
+    width,
+    glow,
+    pulse,
+    glass,
+    gradient
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx4(Box3, { sx: { ...frameSx, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx4(CircularProgress, { color: muiColor(color, "inherit") }) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    Box3,
+    {
+      ref: containerRef,
+      className,
+      "data-testid": "carousel-container",
+      sx: { ...frameSx, ...style },
+      onFocus,
+      onBlur,
+      ...hoverProps,
+      children: [
+        /* @__PURE__ */ jsx4(
+          CarouselTrack,
+          {
+            items,
+            activeIndex,
+            variant,
+            animation,
+            transition: TRANSITIONS[animation] ?? Slide,
+            clickable: Boolean(onClick),
+            onSelect: handleItemClick
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          CarouselChrome,
+          {
+            ...resolved,
+            activeIndex,
+            onPrev: handlePrev,
+            onNext: handleNext,
+            onSelect: handleSelect
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Carousel,
+  CarouselArrows,
+  CarouselIndicators,
+  CarouselThumbnails
+};
+//# sourceMappingURL=Carousel.js.map