@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-OI333WMD.js

@@ -0,0 +1,171 @@
+import {
+  buildBadgeContent
+} from "./chunk-RIPALLQG.js";
+import {
+  badgeStyles,
+  getAnchorOrigin
+} from "./chunk-X3MT3H4W.js";
+import {
+  badgeContentOf,
+  definedAria,
+  formatCount,
+  resolveBadgeProps
+} from "./chunk-MMZAGB64.js";
+
+// src/components/data-display/Badge/Badge.tsx
+import { Badge as MuiBadge, Zoom } from "@mui/material";
+import { styled } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBadge = styled(MuiBadge, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customSize",
+    "customColor",
+    "glow",
+    "pulse",
+    "animate",
+    "shimmer",
+    "bounce",
+    "hasIcon"
+  ].includes(prop)
+})(({
+  theme,
+  customVariant,
+  customSize = "md",
+  customColor = "primary",
+  glow,
+  pulse,
+  animate,
+  shimmer,
+  bounce,
+  hasIcon
+}) => {
+  return badgeStyles({
+    theme,
+    customVariant,
+    customSize,
+    customColor,
+    glow,
+    pulse,
+    animate,
+    shimmer,
+    bounce,
+    hasIcon
+  });
+});
+var CLOSE_DELAY_MS = 300;
+var ANIMATION_MS = 1e3;
+var useMountAnimation = (enabled) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    setIsAnimating(true);
+    const timer = window.setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+    return () => window.clearTimeout(timer);
+  }, [enabled]);
+  return isAnimating;
+};
+var BadgeSurface = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {
+  const testId = p["data-testid"];
+  return /* @__PURE__ */ jsx(Zoom, { in: isVisible, timeout: CLOSE_DELAY_MS, children: /* @__PURE__ */ jsx(
+    StyledBadge,
+    {
+      ref: innerRef,
+      className: p.className,
+      customVariant: p.variant,
+      customSize: p.size,
+      customColor: p.color,
+      glow: p.glow,
+      pulse: p.pulse,
+      animate: p.animate,
+      shimmer: p.shimmer,
+      bounce: p.bounce && isAnimating,
+      hasIcon: Boolean(p.icon),
+      badgeContent: finalBadgeContent,
+      variant: p.variant === "dot" ? "dot" : "standard",
+      anchorOrigin: getAnchorOrigin(p.position),
+      invisible: shouldBeInvisible,
+      "data-testid": testId || "badge",
+      slotProps: {
+        badge: {
+          ...aria,
+          // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime
+          "data-testid": testId ? `${testId}-content-wrapper` : "badge-content-wrapper"
+        }
+      },
+      ...rest,
+      children: p.children
+    }
+  ) });
+};
+var Badge = React.forwardRef((componentProps, ref) => {
+  const resolved = resolveBadgeProps(componentProps);
+  const {
+    variant,
+    size,
+    color: _color,
+    glow: _glow,
+    pulse: _pulse,
+    animate,
+    shimmer: _shimmer,
+    bounce,
+    max,
+    showZero,
+    position: _position,
+    children: _children,
+    invisible,
+    closable,
+    onClose,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-live": ariaLive = "polite",
+    "aria-atomic": ariaAtomic = true,
+    "data-testid": dataTestId,
+    className: _className,
+    content: _content,
+    badgeContent: _badgeContent,
+    ...props
+  } = resolved;
+  const [isVisible, setIsVisible] = useState(true);
+  const isAnimating = useMountAnimation(animate || bounce);
+  const handleClose = (event) => {
+    event.stopPropagation();
+    setIsVisible(false);
+    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);
+  };
+  const rawContent = badgeContentOf(resolved);
+  const finalBadgeContent = buildBadgeContent({
+    variant,
+    size,
+    icon,
+    closable,
+    dataTestId,
+    baseContent: variant === "count" ? formatCount(rawContent, { max, showZero }) : rawContent,
+    onClose: handleClose
+  });
+  const shouldBeInvisible = invisible || variant === "count" && finalBadgeContent === null && !showZero || !isVisible;
+  return /* @__PURE__ */ jsx(
+    BadgeSurface,
+    {
+      ...resolved,
+      innerRef: ref,
+      isVisible,
+      isAnimating,
+      shouldBeInvisible,
+      finalBadgeContent,
+      aria: definedAria({
+        "aria-label": ariaLabel,
+        "aria-live": ariaLive,
+        "aria-atomic": ariaAtomic
+      }),
+      rest: props
+    }
+  );
+});
+Badge.displayName = "Badge";
+
+export {
+  Badge
+};
+//# sourceMappingURL=chunk-OI333WMD.js.map

package/dist/chunk-OI333WMD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.tsx"],"sourcesContent":["import { Badge as MuiBadge, Zoom } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { useEffect,useState } from 'react';\n\nimport {\n  badgeStyles,\n  getAnchorOrigin } from './Badge.styles';\nimport {\n  badgeContentOf,\n  definedAria,\n  formatCount,\n  resolveBadgeProps } from './Badge.helpers';\nimport type { ResolvedBadgeProps } from './Badge.helpers';\nimport { buildBadgeContent } from './BadgeContent';\nimport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge.types';\nexport type { BadgeProps } from './Badge.types';\n\n// Define pulse animation\nconst StyledBadge = styled(MuiBadge, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customSize',\n      'customColor',\n      'glow',\n      'pulse',\n      'animate',\n      'shimmer',\n      'bounce',\n      'hasIcon',\n    ].includes(prop as string) })<{\n  customVariant?: BadgeVariant;\n  customSize?: BadgeSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n  shimmer?: boolean;\n  bounce?: boolean;\n  hasIcon?: boolean;\n}>(({\n  theme,\n  customVariant,\n  customSize = 'md',\n  customColor = 'primary',\n  glow,\n  pulse,\n  animate,\n  shimmer,\n  bounce,\n  hasIcon }) => {\n  return badgeStyles({\n    theme,\n    customVariant,\n    customSize,\n    customColor,\n    glow,\n    pulse,\n    animate,\n    shimmer,\n    bounce,\n    hasIcon });\n});\n\nconst CLOSE_DELAY_MS = 300;\nconst ANIMATION_MS = 1000;\n\n// A one-shot flag so bounce/animate run on mount and then stop.\nconst useMountAnimation = (enabled: boolean) => {\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    setIsAnimating(true);\n    const timer = window.setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    return () => window.clearTimeout(timer);\n  }, [enabled]);\n\n  return isAnimating;\n};\n\n// The chip itself. Local because StyledBadge cannot cross a module boundary\n// (TS2742).\nconst BadgeSurface: React.FC<\n  ResolvedBadgeProps & {\n    innerRef: React.Ref<HTMLSpanElement>;\n    isVisible: boolean;\n    isAnimating: boolean;\n    shouldBeInvisible: boolean;\n    finalBadgeContent: React.ReactNode;\n    aria: Record<string, string | boolean>;\n    rest: Record<string, unknown>;\n  }\n> = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {\n  const testId = p['data-testid'];\n\n  return (\n    <Zoom in={isVisible} timeout={CLOSE_DELAY_MS}>\n      <StyledBadge\n        ref={innerRef}\n        className={p.className}\n        customVariant={p.variant}\n        customSize={p.size}\n        customColor={p.color}\n        glow={p.glow}\n        pulse={p.pulse}\n        animate={p.animate}\n        shimmer={p.shimmer}\n        bounce={p.bounce && isAnimating}\n        hasIcon={Boolean(p.icon)}\n        badgeContent={finalBadgeContent}\n        variant={p.variant === 'dot' ? 'dot' : 'standard'}\n        anchorOrigin={getAnchorOrigin(p.position)}\n        invisible={shouldBeInvisible}\n        data-testid={testId || 'badge'}\n        slotProps={{\n          badge: {\n            ...aria,\n            // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime\n            'data-testid': testId ? `${testId}-content-wrapper` : 'badge-content-wrapper' } }}\n        {...rest}\n      >\n        {p.children}\n      </StyledBadge>\n    </Zoom>\n  );\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((componentProps, ref) => {\n  const resolved = resolveBadgeProps(componentProps);\n  const {\n    variant,\n    size,\n    color: _color,\n    glow: _glow,\n    pulse: _pulse,\n    animate,\n    shimmer: _shimmer,\n    bounce,\n    max,\n    showZero,\n    position: _position,\n    children: _children,\n    invisible,\n    closable,\n    onClose,\n    icon,\n    'aria-label': ariaLabel,\n    'aria-live': ariaLive = 'polite',\n    'aria-atomic': ariaAtomic = true,\n    'data-testid': dataTestId,\n    className: _className,\n    content: _content,\n    badgeContent: _badgeContent,\n    ...props\n  } = resolved;\n\n  const [isVisible, setIsVisible] = useState(true);\n  const isAnimating = useMountAnimation(animate || bounce);\n\n  const handleClose = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    setIsVisible(false);\n    // Let the Zoom finish before telling the caller.\n    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);\n  };\n\n  const rawContent = badgeContentOf(resolved);\n  const finalBadgeContent = buildBadgeContent({\n    variant,\n    size,\n    icon,\n    closable,\n    dataTestId,\n    baseContent: variant === 'count' ? formatCount(rawContent, { max, showZero }) : rawContent,\n    onClose: handleClose });\n\n  // A count that formatted away leaves nothing worth showing.\n  const shouldBeInvisible =\n    invisible || (variant === 'count' && finalBadgeContent === null && !showZero) || !isVisible;\n\n  return (\n    <BadgeSurface\n      {...resolved}\n      innerRef={ref}\n      isVisible={isVisible}\n      isAnimating={isAnimating}\n      shouldBeInvisible={shouldBeInvisible}\n      finalBadgeContent={finalBadgeContent}\n      aria={definedAria({\n        'aria-label': ariaLabel,\n        'aria-live': ariaLive,\n        'aria-atomic': ariaAtomic })}\n      rest={props as unknown as Record<string, unknown>}\n    />\n  );\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"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","names":[]}

package/dist/chunk-OJSVHBQO.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-OJSVHBQO.js.map

package/dist/chunk-OJSVHBQO.js.map

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

package/dist/chunk-ONMSTW4B.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ONMSTW4B.js.map

package/dist/chunk-ONMSTW4B.js.map

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

package/dist/chunk-OOTIGGEN.js

@@ -0,0 +1,73 @@
+import {
+  getOverflowStyle,
+  getVariantStyles
+} from "./chunk-6S7RF73B.js";
+
+// src/components/layout/ScrollArea/ScrollViewport.tsx
+import { Box, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var ScrollViewport = ({
+  regionLabel,
+  children,
+  height,
+  maxHeight,
+  orientation,
+  scrollbarSize,
+  scrollbarColor,
+  scrollbarTrackColor,
+  contentPadding,
+  variant,
+  disabled,
+  loading,
+  smoothScroll,
+  shouldShowScrollbar,
+  setScrollRef,
+  onScroll
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: setScrollRef,
+      onScroll,
+      role: "region",
+      "aria-label": regionLabel,
+      "aria-busy": loading,
+      tabIndex: disabled ? -1 : 0,
+      sx: {
+        width: "100%",
+        height: "100%",
+        // Use an explicit maxHeight when height is 'auto', else inherit.
+        maxHeight: height === "auto" && maxHeight ? maxHeight : "100%",
+        padding: contentPadding,
+        opacity: loading ? 0.5 : 1,
+        pointerEvents: disabled || loading ? "none" : "auto",
+        transition: "opacity 0.3s ease",
+        "&:focus": {
+          outline: "none",
+          "&:focus-visible": {
+            outline: `2px solid ${theme.palette.primary.main}`,
+            outlineOffset: -2
+          }
+        },
+        ...getOverflowStyle({ disabled, orientation }),
+        ...getVariantStyles({
+          theme,
+          variant,
+          orientation,
+          scrollbarSize,
+          scrollbarColor,
+          scrollbarTrackColor,
+          shouldShowScrollbar
+        })
+      },
+      style: { scrollBehavior: smoothScroll ? "smooth" : "auto" },
+      children
+    }
+  );
+};
+
+export {
+  ScrollViewport
+};
+//# sourceMappingURL=chunk-OOTIGGEN.js.map

package/dist/chunk-OOTIGGEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollViewport.tsx"],"sourcesContent":["import { Box, useTheme } from '@mui/material';\nimport type { FC, ReactNode, UIEvent } from 'react';\nimport React from 'react';\n\nimport { getOverflowStyle, getVariantStyles } from './ScrollArea.styles';\nimport type { ResolvedScrollAreaProps } from './ScrollArea.helpers';\n\nexport interface ScrollViewportProps\n  extends Pick<\n    ResolvedScrollAreaProps,\n    | 'height'\n    | 'maxHeight'\n    | 'orientation'\n    | 'scrollbarSize'\n    | 'scrollbarColor'\n    | 'scrollbarTrackColor'\n    | 'contentPadding'\n    | 'variant'\n    | 'disabled'\n    | 'loading'\n    | 'smoothScroll'\n  > {\n  /** The scroll region's accessible name. REQUIRED. */\n  regionLabel: string;\n  children: ReactNode;\n  shouldShowScrollbar: boolean;\n  setScrollRef: (node: HTMLDivElement | null) => void;\n  onScroll: (event: UIEvent<HTMLDivElement>) => void;\n}\n\n// The element that actually scrolls: its own overflow and scrollbar styling,\n// plus the disabled and loading treatments.\nexport const ScrollViewport: FC<ScrollViewportProps> = ({\n  regionLabel,\n  children,\n  height,\n  maxHeight,\n  orientation,\n  scrollbarSize,\n  scrollbarColor,\n  scrollbarTrackColor,\n  contentPadding,\n  variant,\n  disabled,\n  loading,\n  smoothScroll,\n  shouldShowScrollbar,\n  setScrollRef,\n  onScroll,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      ref={setScrollRef}\n      onScroll={onScroll}\n      role=\"region\"\n      aria-label={regionLabel}\n      aria-busy={loading}\n      tabIndex={disabled ? -1 : 0}\n      sx={{\n        width: '100%',\n        height: '100%',\n        // Use an explicit maxHeight when height is 'auto', else inherit.\n        maxHeight: height === 'auto' && maxHeight ? maxHeight : '100%',\n        padding: contentPadding,\n        opacity: loading ? 0.5 : 1,\n        pointerEvents: disabled || loading ? 'none' : 'auto',\n        transition: 'opacity 0.3s ease',\n        '&:focus': {\n          outline: 'none',\n          '&:focus-visible': {\n            outline: `2px solid ${theme.palette.primary.main}`,\n            outlineOffset: -2,\n          },\n        },\n        ...getOverflowStyle({ disabled, orientation }),\n        ...getVariantStyles({\n          theme,\n          variant,\n          orientation,\n          scrollbarSize,\n          scrollbarColor,\n          scrollbarTrackColor,\n          shouldShowScrollbar,\n        }),\n      }}\n      style={{ scrollBehavior: smoothScroll ? 'smooth' : 'auto' }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAAA,SAAS,KAAK,gBAAgB;AAqD1B;AArBG,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,UAAU,WAAW,KAAK;AAAA,MAC1B,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,QAER,WAAW,WAAW,UAAU,YAAY,YAAY;AAAA,QACxD,SAAS;AAAA,QACT,SAAS,UAAU,MAAM;AAAA,QACzB,eAAe,YAAY,UAAU,SAAS;AAAA,QAC9C,YAAY;AAAA,QACZ,WAAW;AAAA,UACT,SAAS;AAAA,UACT,mBAAmB;AAAA,YACjB,SAAS,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,YAChD,eAAe;AAAA,UACjB;AAAA,QACF;AAAA,QACA,GAAG,iBAAiB,EAAE,UAAU,YAAY,CAAC;AAAA,QAC7C,GAAG,iBAAiB;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,OAAO,EAAE,gBAAgB,eAAe,WAAW,OAAO;AAAA,MAEzD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-OP3EGS6R.js

@@ -0,0 +1,127 @@
+// src/components/data-display/ErrorState/ErrorState.tsx
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;
+var paletteFor = (theme, severity) => severity === "error" ? theme.palette.error : theme.palette.warning;
+var ErrorIcon = ({ severity, icon, testId }) => {
+  const theme = useTheme();
+  const color = paletteFor(theme, severity);
+  const Fallback = severity === "error" ? ErrorOutlineIcon : WarningAmberIcon;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": testId,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 80,
+        height: 80,
+        borderRadius: "50%",
+        backgroundColor: color.light,
+        opacity: 0.9
+      },
+      children: icon || /* @__PURE__ */ jsx(Fallback, { sx: { fontSize: 48, color: color.main } })
+    }
+  );
+};
+var ErrorText = ({ title, message, titleId, testId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, alignItems: "center", children: [
+    title && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: titleId,
+        variant: "h6",
+        component: "h3",
+        "data-testid": testId("title"),
+        sx: {
+          fontWeight: theme.typography.fontWeightMedium,
+          color: theme.palette.text.primary
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: `${titleId}-message`,
+        variant: "body2",
+        color: "text.secondary",
+        "data-testid": testId("message"),
+        sx: {
+          maxWidth: 400,
+          lineHeight: 1.6
+        },
+        children: message
+      }
+    )
+  ] });
+};
+var ErrorState = React.memo(
+  ({
+    message,
+    title,
+    onRetry,
+    retryLabel = "Retry",
+    severity = "error",
+    icon,
+    className,
+    dataTestId
+  }) => {
+    const theme = useTheme();
+    const titleId = React.useId();
+    const testId = makeTestId(dataTestId);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "alert",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": `${titleId}-message`,
+        className,
+        "data-testid": dataTestId || "error-state",
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          padding: theme.spacing(6),
+          minHeight: 200,
+          gap: theme.spacing(2)
+        },
+        children: [
+          /* @__PURE__ */ jsx(ErrorIcon, { severity, icon, testId: testId("icon") }),
+          /* @__PURE__ */ jsx(ErrorText, { title, message, titleId, testId }),
+          onRetry && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              color: severity,
+              onClick: onRetry,
+              startIcon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+              "data-testid": testId("retry-button"),
+              sx: {
+                mt: theme.spacing(1),
+                minWidth: 120
+              },
+              children: retryLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ErrorState.displayName = "ErrorState";
+var ErrorState_default = ErrorState;
+
+export {
+  ErrorState,
+  ErrorState_default
+};
+//# sourceMappingURL=chunk-OP3EGS6R.js.map

package/dist/chunk-OP3EGS6R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.tsx"],"sourcesContent":["import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport { Box, Button, Stack, Typography, useTheme } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport React from 'react';\n\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\nconst paletteFor = (theme: Theme, severity: ErrorStateSeverity) =>\n  severity === 'error' ? theme.palette.error : theme.palette.warning;\n\nconst ErrorIcon: React.FC<{\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}> = ({ severity, icon, testId }) => {\n  const theme = useTheme();\n  const color = paletteFor(theme, severity);\n  const Fallback = severity === 'error' ? ErrorOutlineIcon : WarningAmberIcon;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: 80,\n        height: 80,\n        borderRadius: '50%',\n        backgroundColor: color.light,\n        opacity: 0.9,\n      }}\n    >\n      {icon || <Fallback sx={{ fontSize: 48, color: color.main }} />}\n    </Box>\n  );\n};\n\nconst ErrorText: React.FC<{\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}> = ({ title, message, titleId, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={1} alignItems=\"center\">\n      {title && (\n        <Typography\n          id={titleId}\n          variant=\"h6\"\n          component=\"h3\"\n          data-testid={testId('title')}\n          sx={{\n            fontWeight: theme.typography.fontWeightMedium,\n            color: theme.palette.text.primary,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n\n      <Typography\n        id={`${titleId}-message`}\n        variant=\"body2\"\n        color=\"text.secondary\"\n        data-testid={testId('message')}\n        sx={{\n          maxWidth: 400,\n          lineHeight: 1.6,\n        }}\n      >\n        {message}\n      </Typography>\n    </Stack>\n  );\n};\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(\n  ({\n    message,\n    title,\n    onRetry,\n    retryLabel = 'Retry',\n    severity = 'error',\n    icon,\n    className,\n    dataTestId,\n  }) => {\n    const theme = useTheme();\n    const titleId = React.useId();\n    const testId = makeTestId(dataTestId);\n\n    return (\n      <Box\n        role=\"alert\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={`${titleId}-message`}\n        className={className}\n        data-testid={dataTestId || 'error-state'}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          textAlign: 'center',\n          padding: theme.spacing(6),\n          minHeight: 200,\n          gap: theme.spacing(2),\n        }}\n      >\n        <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n        <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n        {onRetry && (\n          <Button\n            variant=\"outlined\"\n            color={severity}\n            onClick={onRetry}\n            startIcon={<RefreshIcon />}\n            data-testid={testId('retry-button')}\n            sx={{\n              mt: theme.spacing(1),\n              minWidth: 120,\n            }}\n          >\n            {retryLabel}\n          </Button>\n        )}\n      </Box>\n    );\n  },\n);\n\nErrorState.displayName = 'ErrorState';\n\nexport default ErrorState;\n"],"mappings":"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","names":[]}

package/dist/chunk-OPRYFHPL.js

@@ -0,0 +1,191 @@
+import {
+  Stepper
+} from "./chunk-2JM65A4D.js";
+import {
+  EmptyState
+} from "./chunk-KXF4RD5B.js";
+
+// src/components/data-display/SectionOnboarding/SectionOnboarding.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import { Box, Button, Collapse, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OnboardingSteps = ({ steps, activeStepId, completedStepIds, dataTestId }) => {
+  if (!steps || steps.length === 0) return null;
+  const activeId = activeStepId ?? steps[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%", overflowX: "auto", pb: 1 }, children: /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      steps,
+      activeId,
+      completed: new Set(completedStepIds ?? []),
+      size: "sm",
+      "data-testid": `${dataTestId}-steps`
+    }
+  ) });
+};
+var ConfiguredSummary = ({
+  configuredTitle,
+  title,
+  configuredSummary,
+  dataTestId,
+  expanded,
+  onToggle,
+  editLabel,
+  collapseLabel,
+  hasChildren
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: 2,
+      alignItems: { xs: "flex-start", sm: "center" },
+      "data-testid": `${dataTestId}-summary`,
+      children: [
+        /* @__PURE__ */ jsx(CheckCircle, { sx: { color: theme.palette.success.main }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "h3", fontWeight: "medium", children: configuredTitle ?? title }),
+          configuredSummary && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", children: configuredSummary })
+        ] }),
+        hasChildren && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: onToggle,
+            "aria-expanded": expanded,
+            "data-testid": `${dataTestId}-edit-toggle`,
+            children: expanded ? collapseLabel : editLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var ConfiguredView = ({
+  title,
+  configuredTitle,
+  configuredSummary,
+  editLabel,
+  collapseLabel,
+  defaultExpanded = false,
+  children,
+  className,
+  dataTestId = "section-onboarding"
+}) => {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      "data-status": "configured",
+      sx: { p: 2, borderRadius: 1, border: 1, borderColor: "divider" },
+      children: [
+        /* @__PURE__ */ jsx(
+          ConfiguredSummary,
+          {
+            configuredTitle,
+            title,
+            configuredSummary,
+            dataTestId,
+            expanded,
+            onToggle: () => setExpanded((prev) => !prev),
+            editLabel,
+            collapseLabel,
+            hasChildren: Boolean(children)
+          }
+        ),
+        children && /* @__PURE__ */ jsx(Collapse, { in: expanded, unmountOnExit: true, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 3 }, "data-testid": `${dataTestId}-content`, children }) })
+      ]
+    }
+  );
+};
+var InProgressView = ({
+  steps,
+  activeStepId,
+  completedStepIds,
+  children,
+  className,
+  statusAttr,
+  dataTestId = "section-onboarding"
+}) => /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": statusAttr, spacing: 3, children: [
+  /* @__PURE__ */ jsx(
+    OnboardingSteps,
+    {
+      steps,
+      activeStepId,
+      completedStepIds,
+      dataTestId
+    }
+  ),
+  children && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-content`, children })
+] });
+var HeroView = ({
+  title,
+  description,
+  illustration,
+  steps,
+  activeStepId,
+  completedStepIds,
+  primaryAction,
+  startLabel,
+  secondaryAction,
+  helpLink,
+  children,
+  className,
+  onStart,
+  dataTestId = "section-onboarding"
+}) => {
+  const heroPrimary = primaryAction ?? (children ? { label: startLabel, onClick: onStart } : void 0);
+  return /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": "unconfigured", spacing: 1, children: [
+    /* @__PURE__ */ jsx(
+      OnboardingSteps,
+      {
+        steps,
+        activeStepId,
+        completedStepIds,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: illustration ? "illustrated" : "action",
+        title,
+        description,
+        illustration,
+        primaryAction: heroPrimary,
+        secondaryAction,
+        helpLink,
+        dataTestId: `${dataTestId}-hero`
+      }
+    )
+  ] });
+};
+var SectionOnboarding = (props) => {
+  const [started, setStarted] = React.useState(false);
+  if (props.status === "configured") {
+    return /* @__PURE__ */ jsx(ConfiguredView, { ...props });
+  }
+  if (props.status === "in-progress" || started) {
+    return /* @__PURE__ */ jsx(
+      InProgressView,
+      {
+        ...props,
+        statusAttr: props.status === "in-progress" ? "in-progress" : "started"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(HeroView, { ...props, onStart: () => setStarted(true) });
+};
+SectionOnboarding.displayName = "SectionOnboarding";
+var SectionOnboarding_default = SectionOnboarding;
+
+export {
+  SectionOnboarding,
+  SectionOnboarding_default
+};
+//# sourceMappingURL=chunk-OPRYFHPL.js.map

package/dist/chunk-OPRYFHPL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/SectionOnboarding/SectionOnboarding.tsx"],"sourcesContent":["'use client';\n\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport { Box, Button, Collapse, Stack, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { EmptyState } from '../EmptyState/EmptyState';\nimport { Stepper } from '../Stepper/Stepper';\nimport type { SectionOnboardingProps } from './SectionOnboarding.types';\n\n/** The setup steps rendered above the hero / form. Returns null when omitted. */\nconst OnboardingSteps: React.FC<\n  Pick<SectionOnboardingProps, 'steps' | 'activeStepId' | 'completedStepIds'> & {\n    dataTestId: string;\n  }\n> = ({ steps, activeStepId, completedStepIds, dataTestId }) => {\n  if (!steps || steps.length === 0) return null;\n  // Preview mode (no active step): highlight the first so the flow reads L→R.\n  const activeId = activeStepId ?? steps[0]?.id ?? '';\n  return (\n    <Box sx={{ width: '100%', overflowX: 'auto', pb: 1 }}>\n      <Stepper\n        steps={steps}\n        activeId={activeId}\n        completed={new Set(completedStepIds ?? [])}\n        size=\"sm\"\n        data-testid={`${dataTestId}-steps`}\n      />\n    </Box>\n  );\n};\n\n/** The compact \"already connected\" header shown in the configured state. */\nconst ConfiguredSummary: React.FC<\n  Pick<SectionOnboardingProps, 'configuredTitle' | 'title' | 'configuredSummary'> & {\n    dataTestId: string;\n    expanded: boolean;\n    onToggle: () => void;\n    editLabel: string;\n    collapseLabel: string;\n    hasChildren: boolean;\n  }\n> = ({\n  configuredTitle,\n  title,\n  configuredSummary,\n  dataTestId,\n  expanded,\n  onToggle,\n  editLabel,\n  collapseLabel,\n  hasChildren,\n}) => {\n  const theme = useTheme();\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={2}\n      alignItems={{ xs: 'flex-start', sm: 'center' }}\n      data-testid={`${dataTestId}-summary`}\n    >\n      <CheckCircle sx={{ color: theme.palette.success.main }} aria-hidden />\n      <Box sx={{ minWidth: 0 }}>\n        <Typography variant=\"subtitle1\" component=\"h3\" fontWeight=\"medium\">\n          {configuredTitle ?? title}\n        </Typography>\n        {configuredSummary && (\n          <Typography variant=\"body2\" color=\"text.secondary\" component=\"div\">\n            {configuredSummary}\n          </Typography>\n        )}\n      </Box>\n      {hasChildren && (\n        <Button\n          variant=\"outlined\"\n          size=\"small\"\n          onClick={onToggle}\n          aria-expanded={expanded}\n          data-testid={`${dataTestId}-edit-toggle`}\n        >\n          {expanded ? collapseLabel : editLabel}\n        </Button>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * Per-section onboarding wrapper: the same config surface renders three ways\n * depending on `status`, so a first-time user meets a friendly hero + CTA\n * instead of a wall of empty fields, while a returning user sees a compact\n * \"it's connected\" summary with the form tucked behind an \"Editar\" toggle.\n *\n * Composes the existing {@link EmptyState} (the hero) and {@link Stepper} (the\n * progress preview) — drop it onto any settings/integration page and drive it\n * from whatever \"is this configured?\" signal the feature already has.\n */\n/** Configured state: compact success summary + the form behind an \"Editar\" toggle. */\nconst ConfiguredView: React.FC<SectionOnboardingProps> = ({\n  title,\n  configuredTitle,\n  configuredSummary,\n  editLabel,\n  collapseLabel,\n  defaultExpanded = false,\n  children,\n  className,\n  dataTestId = 'section-onboarding',\n}) => {\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      data-status=\"configured\"\n      sx={{ p: 2, borderRadius: 1, border: 1, borderColor: 'divider' }}\n    >\n      <ConfiguredSummary\n        configuredTitle={configuredTitle}\n        title={title}\n        configuredSummary={configuredSummary}\n        dataTestId={dataTestId}\n        expanded={expanded}\n        onToggle={() => setExpanded((prev) => !prev)}\n        editLabel={editLabel}\n        collapseLabel={collapseLabel}\n        hasChildren={Boolean(children)}\n      />\n      {children && (\n        <Collapse in={expanded} unmountOnExit>\n          <Box sx={{ mt: 3 }} data-testid={`${dataTestId}-content`}>\n            {children}\n          </Box>\n        </Collapse>\n      )}\n    </Box>\n  );\n};\n\n/** In-progress state (or a started hero): the live stepper + the form. */\nconst InProgressView: React.FC<SectionOnboardingProps & { statusAttr: string }> = ({\n  steps,\n  activeStepId,\n  completedStepIds,\n  children,\n  className,\n  statusAttr,\n  dataTestId = 'section-onboarding',\n}) => (\n  <Stack className={className} data-testid={dataTestId} data-status={statusAttr} spacing={3}>\n    <OnboardingSteps\n      steps={steps}\n      activeStepId={activeStepId}\n      completedStepIds={completedStepIds}\n      dataTestId={dataTestId}\n    />\n    {children && <Box data-testid={`${dataTestId}-content`}>{children}</Box>}\n  </Stack>\n);\n\n/** Unconfigured hero: optional step preview + the EmptyState hero + CTA. */\nconst HeroView: React.FC<SectionOnboardingProps & { onStart: () => void }> = ({\n  title,\n  description,\n  illustration,\n  steps,\n  activeStepId,\n  completedStepIds,\n  primaryAction,\n  startLabel,\n  secondaryAction,\n  helpLink,\n  children,\n  className,\n  onStart,\n  dataTestId = 'section-onboarding',\n}) => {\n  // With no custom primaryAction, offer a built-in CTA that reveals the form.\n  const heroPrimary =\n    primaryAction ?? (children ? { label: startLabel, onClick: onStart } : undefined);\n  return (\n    <Stack className={className} data-testid={dataTestId} data-status=\"unconfigured\" spacing={1}>\n      <OnboardingSteps\n        steps={steps}\n        activeStepId={activeStepId}\n        completedStepIds={completedStepIds}\n        dataTestId={dataTestId}\n      />\n      <EmptyState\n        variant={illustration ? 'illustrated' : 'action'}\n        title={title}\n        description={description}\n        illustration={illustration}\n        primaryAction={heroPrimary}\n        secondaryAction={secondaryAction}\n        helpLink={helpLink}\n        dataTestId={`${dataTestId}-hero`}\n      />\n    </Stack>\n  );\n};\n\nexport const SectionOnboarding: React.FC<SectionOnboardingProps> = (props) => {\n  // Lets the hero reveal the form in place, so a server page can adopt\n  // onboarding by passing `status` + children alone — no client wrapper.\n  const [started, setStarted] = React.useState(false);\n\n  if (props.status === 'configured') {\n    return <ConfiguredView {...props} />;\n  }\n  if (props.status === 'in-progress' || started) {\n    return (\n      <InProgressView\n        {...props}\n        statusAttr={props.status === 'in-progress' ? 'in-progress' : 'started'}\n      />\n    );\n  }\n  return <HeroView {...props} onStart={() => setStarted(true)} />;\n};\n\nSectionOnboarding.displayName = 'SectionOnboarding';\n\nexport default SectionOnboarding;\n"],"mappings":";;;;;;;;AAEA,OAAO,iBAAiB;AACxB,SAAS,KAAK,QAAQ,UAAU,OAAO,YAAY,gBAAgB;AACnE,OAAO,WAAW;AAiBZ,cAyCA,YAzCA;AAVN,IAAM,kBAIF,CAAC,EAAE,OAAO,cAAc,kBAAkB,WAAW,MAAM;AAC7D,MAAI,CAAC,SAAS,MAAM,WAAW,EAAG,QAAO;AAEzC,QAAM,WAAW,gBAAgB,MAAM,CAAC,GAAG,MAAM;AACjD,SACE,oBAAC,OAAI,IAAI,EAAE,OAAO,QAAQ,WAAW,QAAQ,IAAI,EAAE,GACjD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,IAAI,IAAI,oBAAoB,CAAC,CAAC;AAAA,MACzC,MAAK;AAAA,MACL,eAAa,GAAG,UAAU;AAAA;AAAA,EAC5B,GACF;AAEJ;AAGA,IAAM,oBASF,CAAC;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,EAAE,IAAI,UAAU,IAAI,MAAM;AAAA,MACrC,SAAS;AAAA,MACT,YAAY,EAAE,IAAI,cAAc,IAAI,SAAS;AAAA,MAC7C,eAAa,GAAG,UAAU;AAAA,MAE1B;AAAA,4BAAC,eAAY,IAAI,EAAE,OAAO,MAAM,QAAQ,QAAQ,KAAK,GAAG,eAAW,MAAC;AAAA,QACpE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA,8BAAC,cAAW,SAAQ,aAAY,WAAU,MAAK,YAAW,UACvD,6BAAmB,OACtB;AAAA,UACC,qBACC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAC1D,6BACH;AAAA,WAEJ;AAAA,QACC,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,iBAAe;AAAA,YACf,eAAa,GAAG,UAAU;AAAA,YAEzB,qBAAW,gBAAgB;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAaA,IAAM,iBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,eAAe;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,eAAY;AAAA,MACZ,IAAI,EAAE,GAAG,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,UAAU;AAAA,MAE/D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,YAC3C;AAAA,YACA;AAAA,YACA,aAAa,QAAQ,QAAQ;AAAA;AAAA,QAC/B;AAAA,QACC,YACC,oBAAC,YAAS,IAAI,UAAU,eAAa,MACnC,8BAAC,OAAI,IAAI,EAAE,IAAI,EAAE,GAAG,eAAa,GAAG,UAAU,YAC3C,UACH,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGA,IAAM,iBAA4E,CAAC;AAAA,EACjF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MACE,qBAAC,SAAM,WAAsB,eAAa,YAAY,eAAa,YAAY,SAAS,GACtF;AAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAAA,EACC,YAAY,oBAAC,OAAI,eAAa,GAAG,UAAU,YAAa,UAAS;AAAA,GACpE;AAIF,IAAM,WAAuE,CAAC;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAM;AAEJ,QAAM,cACJ,kBAAkB,WAAW,EAAE,OAAO,YAAY,SAAS,QAAQ,IAAI;AACzE,SACE,qBAAC,SAAM,WAAsB,eAAa,YAAY,eAAY,gBAAe,SAAS,GACxF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,eAAe,gBAAgB;AAAA,QACxC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA,YAAY,GAAG,UAAU;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEO,IAAM,oBAAsD,CAAC,UAAU;AAG5E,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,MAAI,MAAM,WAAW,cAAc;AACjC,WAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,EACpC;AACA,MAAI,MAAM,WAAW,iBAAiB,SAAS;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,YAAY,MAAM,WAAW,gBAAgB,gBAAgB;AAAA;AAAA,IAC/D;AAAA,EAEJ;AACA,SAAO,oBAAC,YAAU,GAAG,OAAO,SAAS,MAAM,WAAW,IAAI,GAAG;AAC/D;AAEA,kBAAkB,cAAc;AAEhC,IAAO,4BAAQ;","names":[]}