@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-NRHQJEHB.js

@@ -0,0 +1,246 @@
+import {
+  progressLabelText,
+  resolveProgressProps
+} from "./chunk-5JEOLUWJ.js";
+import {
+  barEmphasisStyles,
+  barVariantStyles,
+  circularEmphasisStyles,
+  getColorFromTheme,
+  getSizeStyles,
+  pulseAnimation
+} from "./chunk-SJ625KN4.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Progress/Progress.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledLinearProgress = styled(LinearProgress, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    height: rem(theme, sizeStyles.heightPx),
+    borderRadius: rem(theme, sizeStyles.heightPx / 2),
+    backgroundColor: alpha(colorPalette.main, 0.1),
+    "& .MuiLinearProgress-bar": {
+      borderRadius: "inherit",
+      transition: "all 0.3s ease",
+      ...barVariantStyles(theme, customVariant, colorPalette),
+      ...barEmphasisStyles(theme, colorPalette, glow, pulse)
+    }
+  };
+});
+var StyledCircularProgress = styled(CircularProgress, {
+  shouldForwardProp: (prop) => !["customColor", "glow", "pulse"].includes(prop)
+})(({ theme, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    color: colorPalette.main,
+    ...circularEmphasisStyles(theme, colorPalette, glow, pulse)
+  };
+});
+var SegmentedProgress = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {
+  const theme = useTheme();
+  const colorPalette = getColorFromTheme(theme, color);
+  const sizeStyles = getSizeStyles(size);
+  const filledSegments = Math.floor(value / 100 * segments);
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, width: "100%" }, "data-testid": `${dataTestId}-segments-container`, children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `${dataTestId}-segment-${index}`,
+      sx: {
+        flex: 1,
+        height: rem(theme, sizeStyles.heightPx),
+        // In `sx` a numeric radius is a multiple of `shape.borderRadius` — relative already.
+        borderRadius: sizeStyles.heightPx / 2,
+        backgroundColor: index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),
+        transition: "all 0.3s ease",
+        ...glow && index < filledSegments && {
+          boxShadow: `${rems(theme, 0, 0, 6, 1)} ${alpha(colorPalette.main, 0.4)}`
+        },
+        ...pulse && index < filledSegments && {
+          animation: `${pulseAnimation} 2s infinite`
+        }
+      }
+    },
+    index
+  )) });
+};
+var ProgressLabel = ({
+  size,
+  label,
+  testId
+}) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "caption",
+    sx: {
+      display: "block",
+      textAlign: "center",
+      mt: 1,
+      fontSize: getSizeStyles(size).fontSize,
+      fontWeight: 600
+    },
+    "data-testid": testId,
+    children: label
+  }
+);
+var CircularView = React.forwardRef(
+  ({
+    size,
+    color,
+    glow,
+    pulse,
+    showLabel,
+    displayValue,
+    displayLabel,
+    value,
+    dataTestId,
+    thickness,
+    circularSize,
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const sizeStyles = getSizeStyles(size);
+    return /* @__PURE__ */ jsxs(Box, { ref, sx: { position: "relative", display: "inline-flex" }, "data-testid": dataTestId, children: [
+      /* @__PURE__ */ jsx(
+        StyledCircularProgress,
+        {
+          variant: value !== void 0 ? "determinate" : "indeterminate",
+          value: displayValue,
+          size: rem(theme, circularSize || sizeStyles.circularSizePx),
+          thickness,
+          customColor: color,
+          glow,
+          pulse,
+          "data-testid": `${dataTestId}-circular`,
+          ...props
+        }
+      ),
+      showLabel && value !== void 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "div",
+              color: "text.secondary",
+              sx: { fontSize: sizeStyles.fontSize, fontWeight: 600 },
+              "data-testid": `${dataTestId}-label`,
+              children: displayLabel
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+CircularView.displayName = "ProgressCircularView";
+var SegmentedView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, ...props, children: [
+    /* @__PURE__ */ jsx(
+      SegmentedProgress,
+      {
+        value: displayValue,
+        segments,
+        color,
+        size,
+        glow,
+        pulse,
+        dataTestId
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+SegmentedView.displayName = "ProgressSegmentedView";
+var LinearView = React.forwardRef(
+  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(
+      StyledLinearProgress,
+      {
+        variant: value !== void 0 ? "determinate" : "indeterminate",
+        value: displayValue,
+        customVariant: variant,
+        customSize: size,
+        customColor: color,
+        glow,
+        pulse,
+        "data-testid": `${dataTestId}-linear`,
+        ...props
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
+  ] })
+);
+LinearView.displayName = "ProgressLinearView";
+var Progress = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      label,
+      segments,
+      thickness,
+      circularSize,
+      value,
+      dataTestId,
+      testID,
+      ...props
+    } = resolveProgressProps(rawProps);
+    const displayValue = value || 0;
+    const shared = {
+      size,
+      color,
+      glow,
+      pulse,
+      showLabel,
+      displayValue,
+      displayLabel: progressLabelText(label, showLabel, displayValue),
+      value,
+      // `testID` is React Native's spelling of the same id and names the
+      // component too; `data-testid` is left in `props`, on its way to the
+      // element the caller means to address, where it has always landed.
+      dataTestId: testID ?? dataTestId,
+      ...props
+    };
+    if (variant === "circular") {
+      return /* @__PURE__ */ jsx(CircularView, { ref, ...shared, thickness, circularSize });
+    }
+    if (variant === "segmented") {
+      return /* @__PURE__ */ jsx(SegmentedView, { ref, ...shared, segments });
+    }
+    return /* @__PURE__ */ jsx(LinearView, { ref, ...shared, variant });
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  Progress
+};
+//# sourceMappingURL=chunk-NRHQJEHB.js.map

package/dist/chunk-NT73ZLBO.js

@@ -0,0 +1,114 @@
+import {
+  renderChartByType
+} from "./chunk-AYRMZC5F.js";
+import {
+  getSizeStyles,
+  getVariantStyles,
+  plotHeightPx
+} from "./chunk-FIMSPRKX.js";
+import {
+  ChartContainer
+} from "./chunk-RIRTW5EU.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.js";
+import {
+  uiInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/Chart.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function variantSx(theme, props) {
+  return getVariantStyles(theme, {
+    variant: props.variant ?? "default",
+    color: props.color ?? "primary",
+    glow: props.glow ?? false,
+    pulse: props.pulse ?? false,
+    glass: props.glass ?? false,
+    gradient: props.gradient ?? false,
+    disabled: props.disabled ?? false
+  });
+}
+function ChartHeader({ title, subtitle, neon, dataTestId }) {
+  if (!title && !subtitle) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, "data-testid": `${dataTestId}-header`, children: [
+    title && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        "data-testid": `${dataTestId}-title`,
+        sx: (theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : "text.primary", fontWeight: 600 }),
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        "data-testid": `${dataTestId}-subtitle`,
+        sx: (theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : "text.secondary" }),
+        children: subtitle
+      }
+    )
+  ] });
+}
+var Chart = (props) => {
+  const theme = useTheme();
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
+  const styles = variantSx(theme, props);
+  const dataTestId = props["data-testid"] ?? "chart";
+  if (props.loading) {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        "data-testid": `${dataTestId}-loading`,
+        sx: { ...styles, ...sizeStyles, display: "flex", justifyContent: "center", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(props.color ?? "primary", "inherit"), "data-testid": `${dataTestId}-loading-spinner` })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      "data-testid": dataTestId,
+      className: props.className,
+      sx: { p: 2, ...styles, ...props.style },
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          ChartHeader,
+          {
+            title: props.title,
+            subtitle: props.subtitle,
+            neon: props.variant === "neon",
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChartContainer,
+          {
+            responsive: props.responsive ?? true,
+            width: typeof props.width === "number" ? rem(theme, props.width) : props.width ?? "100%",
+            height: props.fillHeight === true ? "100%" : plotHeightPx(props.size, props.height),
+            "data-testid": `${dataTestId}-container`,
+            children: renderChartByType(props, theme)
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Chart
+};
+//# sourceMappingURL=chunk-NT73ZLBO.js.map

package/dist/chunk-NVXRV3PL.js

@@ -0,0 +1,280 @@
+import {
+  pulseAnimation,
+  rotateAnimation,
+  scaleInAnimation,
+  shimmerAnimation
+} from "./chunk-MTEQEPNY.js";
+import {
+  ACTIVE_SCALE,
+  AVATAR_SIZES,
+  AVATAR_TRANSITION_EASING,
+  AVATAR_TRANSITION_MS,
+  BORDER_HALO_ALPHA,
+  BORDER_WIDTH,
+  FADE_MS,
+  FOCUS_RING,
+  GLOW,
+  HOVER,
+  LOADING_OVERLAY,
+  PULSE,
+  ROUNDED_RADIUS_UNITS,
+  SCALE_IN_MS,
+  SHIMMER,
+  SPINNER,
+  STATUS_DOT
+} from "./chunk-6ZZGK5DT.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Avatar/Avatar.view.tsx
+import MuiAvatar from "@mui/material/Avatar/index.js";
+import Badge from "@mui/material/Badge/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import { alpha, useTheme, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  const neutral = controlNeutral(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    // `danger`, not `error`. This map was keyed on MUI's word while the prop
+    // took the house one, so `danger` matched nothing and fell through to
+    // primary — a red avatar rendering blue, silently.
+    danger: theme.palette.error,
+    neutral: { main: neutral.main, contrastText: neutral.contrastText }
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var boxPx = (size) => (AVATAR_SIZES[size] || AVATAR_SIZES.md).box;
+var boxStyles = (theme, size) => {
+  const side = rem(theme, boxPx(size));
+  return { width: side, height: side };
+};
+var glyphPx = (size) => (AVATAR_SIZES[size] || AVATAR_SIZES.md).fontSize;
+var getStatusColor = (status, theme) => {
+  const statusColorMap = {
+    online: theme.palette.success.main,
+    offline: neutralTones(theme).muted,
+    away: theme.palette.warning.main,
+    busy: theme.palette.error.main
+  };
+  return statusColorMap[status] || statusColorMap.offline;
+};
+var interactiveStyles = (theme, interactive, main) => interactive ? {
+  "&:hover": {
+    transform: `scale(${HOVER.scale}) translateY(${rem(theme, -HOVER.lift)})`,
+    boxShadow: `0 ${rems(theme, HOVER.shadowY, HOVER.shadowBlur)} ${alpha(main, HOVER.shadowAlpha)}`,
+    filter: `brightness(${HOVER.brightness})`,
+    zIndex: 10
+  },
+  "&:active": { transform: `scale(${ACTIVE_SCALE})` }
+} : {};
+var loadingStyles = (isLoading, main) => isLoading ? {
+  background: `linear-gradient(
+        90deg,
+        ${alpha(main, SHIMMER.fromAlpha)},
+        ${alpha(main, SHIMMER.toAlpha)},
+        ${alpha(main, SHIMMER.fromAlpha)}
+      )`,
+  backgroundSize: "200% 100%",
+  animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1e3}s ease-in-out infinite`
+} : {};
+var variantRadius = (variant, theme) => {
+  if (variant === "square") return { borderRadius: 0 };
+  if (variant === "rounded") return { borderRadius: theme.spacing(ROUNDED_RADIUS_UNITS) };
+  return { borderRadius: "50%" };
+};
+var borderedStyles = (bordered, theme) => bordered ? {
+  border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
+  boxShadow: `0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`
+} : {};
+var glowPulseStyles = (theme, glow, pulse, main) => {
+  const styles = {};
+  if (glow) {
+    styles.boxShadow = `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(main, GLOW.alpha)} !important`;
+    styles.filter = `brightness(${GLOW.brightness})`;
+  }
+  if (pulse) {
+    styles.position = "relative";
+    styles["&::after"] = {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      transform: "translate(-50%, -50%)",
+      backgroundColor: main,
+      opacity: PULSE.alpha,
+      animation: `${pulseAnimation(theme)} ${PULSE.durationMs / 1e3}s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    };
+  }
+  return styles;
+};
+var STYLED_AVATAR_PROPS = [
+  "customVariant",
+  "customSize",
+  "customColor",
+  "glow",
+  "pulse",
+  "bordered",
+  "isLoading",
+  "hasError",
+  "interactive"
+];
+var StyledAvatar = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop)
+})(
+  ({
+    theme,
+    customVariant,
+    customSize = "md",
+    customColor = "primary",
+    glow,
+    pulse,
+    bordered,
+    isLoading,
+    hasError,
+    interactive
+  }) => {
+    const palette = getColorFromTheme(theme, customColor);
+    return {
+      ...boxStyles(theme, customSize),
+      fontSize: rem(theme, glyphPx(customSize)),
+      transition: `all ${AVATAR_TRANSITION_MS / 1e3}s ${AVATAR_TRANSITION_EASING}`,
+      position: "relative",
+      overflow: "visible",
+      animation: `${scaleInAnimation} ${SCALE_IN_MS / 1e3}s ease-out`,
+      cursor: interactive ? "pointer" : "default",
+      backgroundColor: hasError ? theme.palette.error.main : palette.main,
+      color: hasError ? theme.palette.error.contrastText : palette.contrastText ?? absoluteInk(theme).white,
+      ...interactiveStyles(theme, interactive, palette.main),
+      ...loadingStyles(isLoading, palette.main),
+      ...variantRadius(customVariant, theme),
+      ...borderedStyles(bordered, theme),
+      ...glowPulseStyles(theme, glow, pulse, palette.main),
+      "&:focus-visible": {
+        outline: `${rem(theme, FOCUS_RING.width)} solid ${alpha(palette.main, FOCUS_RING.alpha)}`,
+        outlineOffset: rem(theme, FOCUS_RING.offset)
+      }
+    };
+  }
+);
+var LoadingOverlay = styled("div")(({ theme, size }) => {
+  const box = boxPx(size);
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    ...boxStyles(theme, size),
+    borderRadius: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),
+    backdropFilter: `blur(${rem(theme, LOADING_OVERLAY.blur)})`,
+    "& .loading-spinner": {
+      width: rem(theme, box * SPINNER.scale),
+      height: rem(theme, box * SPINNER.scale),
+      border: `${rem(theme, SPINNER.ringWidth)} solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,
+      borderTopColor: theme.palette.primary.main,
+      borderRadius: "50%",
+      animation: `${rotateAnimation} ${SPINNER.durationMs / 1e3}s linear infinite`
+    }
+  };
+});
+var StatusBadge = styled(Badge, {
+  shouldForwardProp: (prop) => !["statusColor", "avatarSize"].includes(prop)
+})(({ theme, statusColor, avatarSize = "md" }) => {
+  const badgeSize = rem(theme, Math.max(STATUS_DOT.min, boxPx(avatarSize) * STATUS_DOT.scale));
+  return {
+    "& .MuiBadge-badge": {
+      backgroundColor: statusColor || theme.palette.success.main,
+      color: statusColor || theme.palette.success.main,
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: "50%",
+      border: `${rem(theme, STATUS_DOT.borderWidth)} solid ${theme.palette.background.paper}`,
+      "&::after": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        content: '""'
+      }
+    }
+  };
+});
+function AvatarSurface(props) {
+  const { showSpinner, dataTestId, clickable } = props;
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsx(Fade, { in: props.mounted, timeout: FADE_MS, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledAvatar,
+      {
+        ref: props.forwardedRef,
+        className: props.className,
+        customVariant: props.variant,
+        customSize: props.size,
+        customColor: props.color,
+        glow: props.glow,
+        pulse: props.pulse,
+        bordered: props.bordered,
+        isLoading: showSpinner,
+        hasError: props.imageError,
+        interactive: clickable,
+        src: props.imgSrc,
+        alt: props.alt,
+        onClick: props.onClick,
+        tabIndex: clickable ? 0 : void 0,
+        role: clickable ? "button" : void 0,
+        "aria-label": props.ariaLabel,
+        "data-testid": dataTestId,
+        ...props.rest,
+        slotProps: { img: { onError: props.handleImageError, onLoad: props.handleImageLoad } },
+        children: showSpinner ? null : /* @__PURE__ */ jsx("span", { "data-testid": testId(props.contentType), children: props.content })
+      }
+    ),
+    showSpinner && /* @__PURE__ */ jsx(LoadingOverlay, { size: props.size, "data-testid": testId("loading"), children: /* @__PURE__ */ jsx("div", { className: "loading-spinner", "data-testid": testId("loading-spinner") }) })
+  ] }) });
+}
+function AvatarView(props) {
+  const theme = useTheme();
+  const surface = /* @__PURE__ */ jsx(AvatarSurface, { ...props });
+  if (props.variant === "status" && props.status) {
+    return /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        overlap: "circular",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        variant: "dot",
+        statusColor: getStatusColor(props.status, theme),
+        avatarSize: props.size,
+        "data-testid": props.dataTestId ? `${props.dataTestId}-badge` : void 0,
+        children: surface
+      }
+    );
+  }
+  return surface;
+}
+
+export {
+  AvatarView
+};
+//# sourceMappingURL=chunk-NVXRV3PL.js.map