@12-apps/ui 5.0.0 → 5.1.0

package/dist/data-display/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-display/Progress/Progress.tsx","../../src/components/data-display/Progress/Progress.helpers.ts","../../src/components/data-display/Progress/Progress.styles.ts"],"sourcesContent":["import {\n  alpha,\n  Box,\n  CircularProgress,\n  LinearProgress,\n  Typography,\n} from '@mui/material';\nimport { styled, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { resolveProgressProps } from './Progress.helpers';\nimport {\n  barEmphasisStyles,\n  barVariantStyles,\n  circularEmphasisStyles,\n  getColorFromTheme,\n  getSizeStyles,\n  pulseAnimation,\n} from './Progress.styles';\nimport type { ProgressProps, ProgressSize, ProgressVariant } from './Progress.types';\n\nconst StyledLinearProgress = styled(LinearProgress, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'customColor', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: ProgressVariant;\n  customSize?: ProgressSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    height: sizeStyles.height,\n    borderRadius: sizeStyles.height / 2,\n    backgroundColor: alpha(colorPalette.main, 0.1),\n\n    '& .MuiLinearProgress-bar': {\n      borderRadius: 'inherit',\n      transition: 'all 0.3s ease',\n      ...barVariantStyles(customVariant, colorPalette),\n      ...barEmphasisStyles(colorPalette, glow, pulse),\n    },\n  };\n});\n\nconst StyledCircularProgress = styled(CircularProgress, {\n  shouldForwardProp: (prop) => !['customColor', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    color: colorPalette.main,\n    ...circularEmphasisStyles(colorPalette, glow, pulse),\n  };\n});\n\nconst SegmentedProgress: React.FC<{\n  value?: number;\n  segments: number;\n  color: string;\n  size: ProgressSize;\n  glow: boolean;\n  pulse: boolean;\n  dataTestId?: string;\n}> = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {\n  const theme = useTheme();\n  const colorPalette = getColorFromTheme(theme, color);\n  const sizeStyles = getSizeStyles(size);\n  const filledSegments = Math.floor((value / 100) * segments);\n\n  return (\n    <Box sx={{ display: 'flex', gap: 0.5, width: '100%' }} data-testid={`${dataTestId}-segments-container`}>\n      {Array.from({ length: segments }, (_, index) => (\n        <Box\n          key={index}\n          data-testid={`${dataTestId}-segment-${index}`}\n          sx={{\n            flex: 1,\n            height: sizeStyles.height,\n            borderRadius: sizeStyles.height / 2,\n            backgroundColor:\n              index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),\n            transition: 'all 0.3s ease',\n            ...(glow &&\n              index < filledSegments && {\n                boxShadow: `0 0 6px 1px ${alpha(colorPalette.main, 0.4)}`,\n              }),\n            ...(pulse &&\n              index < filledSegments && {\n                animation: `${pulseAnimation} 2s infinite`,\n              }),\n          }}\n        />\n      ))}\n    </Box>\n  );\n};\n\ninterface ViewProps {\n  size: ProgressSize;\n  color: string;\n  glow: boolean;\n  pulse: boolean;\n  showLabel: boolean;\n  displayValue: number;\n  displayLabel: string;\n  /** Absent means indeterminate — the bar animates rather than reporting progress. */\n  value?: number;\n  dataTestId: string;\n}\n\nconst ProgressLabel: React.FC<{ size: ProgressSize; label: string; testId: string }> = ({\n  size,\n  label,\n  testId,\n}) => (\n  <Typography\n    variant=\"caption\"\n    sx={{\n      display: 'block',\n      textAlign: 'center',\n      mt: 1,\n      fontSize: getSizeStyles(size).fontSize,\n      fontWeight: 600,\n    }}\n    data-testid={testId}\n  >\n    {label}\n  </Typography>\n);\n\nconst CircularView = React.forwardRef<\n  HTMLDivElement,\n  ViewProps & { thickness: number; circularSize?: number }\n>(\n  (\n    {\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      displayValue,\n      displayLabel,\n      value,\n      dataTestId,\n      thickness,\n      circularSize,\n      ...props\n    },\n    ref,\n  ) => {\n    const sizeStyles = getSizeStyles(size);\n\n    return (\n      <Box ref={ref} sx={{ position: 'relative', display: 'inline-flex' }} data-testid={dataTestId}>\n        <StyledCircularProgress\n          variant={value !== undefined ? 'determinate' : 'indeterminate'}\n          value={displayValue}\n          size={circularSize || sizeStyles.circularSize}\n          thickness={thickness}\n          customColor={color}\n          glow={glow}\n          pulse={pulse}\n          data-testid={`${dataTestId}-circular`}\n          {...props}\n        />\n        {showLabel && value !== undefined && (\n          <Box\n            sx={{\n              top: 0,\n              left: 0,\n              bottom: 0,\n              right: 0,\n              position: 'absolute',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          >\n            <Typography\n              variant=\"caption\"\n              component=\"div\"\n              color=\"text.secondary\"\n              sx={{ fontSize: sizeStyles.fontSize, fontWeight: 600 }}\n              data-testid={`${dataTestId}-label`}\n            >\n              {displayLabel}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nCircularView.displayName = 'ProgressCircularView';\n\nconst SegmentedView = React.forwardRef<HTMLDivElement, ViewProps & { segments: number }>(\n  (\n    { size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props },\n    ref,\n  ) => (\n    <Box ref={ref} sx={{ width: '100%' }} data-testid={dataTestId} {...props}>\n      <SegmentedProgress\n        value={displayValue}\n        segments={segments}\n        color={color}\n        size={size}\n        glow={glow}\n        pulse={pulse}\n        dataTestId={dataTestId}\n      />\n      {showLabel && (\n        <ProgressLabel size={size} label={displayLabel} testId={`${dataTestId}-label`} />\n      )}\n    </Box>\n  ),\n);\n\nSegmentedView.displayName = 'ProgressSegmentedView';\n\nconst LinearView = React.forwardRef<HTMLDivElement, ViewProps & { variant: ProgressVariant }>(\n  (\n    { size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props },\n    ref,\n  ) => (\n    <Box ref={ref} sx={{ width: '100%' }} data-testid={dataTestId}>\n      <StyledLinearProgress\n        variant={value !== undefined ? 'determinate' : 'indeterminate'}\n        value={displayValue}\n        customVariant={variant}\n        customSize={size}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        data-testid={`${dataTestId}-linear`}\n        {...props}\n      />\n      {showLabel && (\n        <ProgressLabel size={size} label={displayLabel} testId={`${dataTestId}-label`} />\n      )}\n    </Box>\n  ),\n);\n\nLinearView.displayName = 'ProgressLinearView';\n\nexport const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      label,\n      segments,\n      thickness,\n      circularSize,\n      value,\n      dataTestId,\n      // LinearProgressProps carries a `ref` typed for its own element; the\n      // forwarded one below is the ref that matters.\n      ref: _ref,\n      ...props\n    } = resolveProgressProps(rawProps);\n    const displayValue = value || 0;\n    const shared = {\n      size,\n      color,\n      glow,\n      pulse,\n      showLabel,\n      displayValue,\n      displayLabel: label || (showLabel ? `${Math.round(displayValue)}%` : ''),\n      value,\n      dataTestId,\n      ...props,\n    };\n\n    if (variant === 'circular') {\n      return (\n        <CircularView ref={ref} {...shared} thickness={thickness} circularSize={circularSize} />\n      );\n    }\n\n    if (variant === 'segmented') {\n      return <SegmentedView ref={ref} {...shared} segments={segments} />;\n    }\n\n    return <LinearView ref={ref} {...shared} variant={variant} />;\n  },\n);\n\nProgress.displayName = 'Progress';\n","import type { ProgressProps } from './Progress.types';\n\ntype ProgressDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'color'\n  | 'glow'\n  | 'pulse'\n  | 'showLabel'\n  | 'segments'\n  | 'thickness'\n  | 'dataTestId';\n\ntype ResolvedProgressProps = ProgressProps &\n  Required<Pick<ProgressProps, ProgressDefaultedKeys>>;\n\nconst PROGRESS_DEFAULTS: Pick<ProgressProps, ProgressDefaultedKeys> = {\n  variant: 'linear',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  showLabel: false,\n  segments: 10,\n  thickness: 4,\n  dataTestId: 'progress',\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: ProgressProps): Partial<ProgressProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<ProgressProps>;\n\nexport const resolveProgressProps = (props: ProgressProps): ResolvedProgressProps =>\n  ({ ...PROGRESS_DEFAULTS, ...definedProps(props) }) as ResolvedProgressProps;\n","import type { PaletteColor } from '@mui/material';\nimport { alpha, keyframes } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nimport type { ProgressSize, ProgressVariant } from './Progress.types';\n\n// Define pulse animation\nexport const pulseAnimation = keyframes`\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const getColorFromTheme = (theme: Theme, color: string): PaletteColor => {\n  // Handle special case for neutral (grey) which is a Color, not PaletteColor\n  if (color === 'neutral') {\n    return {\n      light: theme.palette.grey[300],\n      main: theme.palette.grey[500],\n      dark: theme.palette.grey[700],\n      contrastText: theme.palette.getContrastText(theme.palette.grey[500]),\n    };\n  }\n\n  const colorMap: Record<string, PaletteColor> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    error: theme.palette.error,\n    info: theme.palette.info,\n    danger: theme.palette.error, // Add danger alias\n  };\n\n  // Ensure we always return a valid color object with main and dark properties\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: string }> = {\n  xs: { height: 2, circularSize: 24, fontSize: '0.625rem' },\n  sm: { height: 4, circularSize: 32, fontSize: '0.75rem' },\n  md: { height: 6, circularSize: 40, fontSize: '0.875rem' },\n  lg: { height: 8, circularSize: 48, fontSize: '1rem' },\n  xl: { height: 10, circularSize: 56, fontSize: '1.125rem' },\n};\n\nexport const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;\n\nexport const barVariantStyles = (\n  variant: ProgressVariant | undefined,\n  colorPalette: PaletteColor,\n): CSSObject => {\n  switch (variant) {\n    case 'linear':\n      return { backgroundColor: colorPalette.main };\n    case 'gradient':\n      return {\n        background: `linear-gradient(90deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(colorPalette.main, 0.8),\n        backdropFilter: 'blur(10px)',\n        border: `1px solid ${alpha(colorPalette.main, 0.3)}`,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nexport const barEmphasisStyles = (\n  colorPalette: PaletteColor,\n  glow?: boolean,\n  pulse?: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 10px 2px ${alpha(colorPalette.main, 0.4)}`,\n    filter: 'brightness(1.1)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nexport const circularEmphasisStyles = (\n  colorPalette: PaletteColor,\n  glow?: boolean,\n  pulse?: boolean,\n): CSSObject => ({\n  ...(glow && {\n    filter: `drop-shadow(0 0 8px ${alpha(colorPalette.main, 0.6)})`,\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n"],"mappings":"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","names":["alpha","alpha"]}

package/dist/data-display/SectionOnboarding.js

@@ -0,0 +1,191 @@
+import {
+  Stepper
+} from "../chunk-SQ5AV7IK.js";
+import {
+  EmptyState
+} from "../chunk-TLBCBVYY.js";
+import "../chunk-PZ5AY32C.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 = "Editar",
+  collapseLabel = "Ocultar",
+  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 = "Come\xE7ar",
+  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 as default
+};
+//# sourceMappingURL=SectionOnboarding.js.map

package/dist/data-display/SectionOnboarding.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 = 'Editar',\n  collapseLabel = 'Ocultar',\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 = 'Começar',\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":"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","names":[]}

package/dist/data-display/Sheet.js

@@ -0,0 +1,18 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay
+} from "../chunk-LGB6Z34C.js";
+import "../chunk-Y2JYDXL7.js";
+import "../chunk-OZCEKQIX.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay
+};
+//# sourceMappingURL=Sheet.js.map

package/dist/data-display/Sheet.js.map

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

package/dist/data-display/StatCard.js

@@ -0,0 +1,198 @@
+import {
+  Skeleton
+} from "../chunk-7XUYRPRQ.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: "1rem", color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 28,
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 16,
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+export {
+  StatCard
+};
+//# sourceMappingURL=StatCard.js.map

package/dist/data-display/StatCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport { Box, Stack, Typography, useTheme, type Theme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n  StatCardDelta,\n  StatCardDeltaDirection,\n  StatCardDeltaTone,\n  StatCardProps,\n} from './StatCard.types';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n  up: ArrowUpwardIcon,\n  down: ArrowDownwardIcon,\n  neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n  up: 'Increase of',\n  down: 'Decrease of',\n  neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n  up: 'positive',\n  down: 'negative',\n  neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n  if (tone === 'positive') return theme.palette.success.main;\n  if (tone === 'negative') return theme.palette.error.main;\n  return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n  if (delta.ariaLabel) return delta.ariaLabel;\n  const suffix = delta.label ? ` ${delta.label}` : '';\n  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n  const Icon = DIRECTION_ICON[delta.direction];\n  const color = toneColor(tone, theme);\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      data-testid={testId}\n      data-direction={delta.direction}\n      data-tone={tone}\n    >\n      {/* The arrow duplicates what the aria-label already says, so it is hidden\n          from assistive tech rather than read twice. */}\n      <Icon aria-hidden=\"true\" sx={{ fontSize: '1rem', color }} />\n      <Typography\n        variant=\"body2\"\n        component=\"span\"\n        aria-label={deltaAriaLabel(delta)}\n        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n      >\n        {delta.value}\n      </Typography>\n      {delta.label && (\n        <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n          {delta.label}\n        </Typography>\n      )}\n    </Stack>\n  );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n  label,\n  icon,\n  labelId,\n  testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n  labelId: string;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n      {icon && (\n        <Box\n          aria-hidden=\"true\"\n          data-testid={`${testId}-icon`}\n          sx={{ display: 'flex', color: theme.palette.text.secondary }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography\n        id={labelId}\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {label}\n      </Typography>\n    </Stack>\n  );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n  value,\n  loading,\n  testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={28}\n        width=\"60%\"\n        borderRadius={4}\n        data-testid={`${testId}-value-skeleton`}\n      />\n    );\n  }\n  return (\n    <Typography\n      variant=\"h6\"\n      component=\"p\"\n      data-testid={`${testId}-value`}\n      sx={{\n        fontWeight: theme.typography.fontWeightMedium,\n        color: theme.palette.text.primary,\n        overflowWrap: 'anywhere',\n      }}\n    >\n      {value}\n    </Typography>\n  );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n  delta,\n  loading,\n  testId,\n}: {\n  delta?: StatCardDelta;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  if (!delta) return null;\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={16}\n        width=\"40%\"\n        borderRadius={4}\n        data-testid={`${testId}-delta-skeleton`}\n      />\n    );\n  }\n  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n    const theme = useTheme();\n    const labelId = React.useId();\n    const testId = dataTestId || 'stat-card';\n\n    return (\n      <Box\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-busy={loading || undefined}\n        className={className}\n        data-testid={testId}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: theme.spacing(0.5),\n          padding: theme.spacing(2),\n          borderRadius: theme.shape.borderRadius / 4,\n          border: `1px solid ${theme.palette.divider}`,\n          backgroundColor: theme.palette.background.paper,\n          minWidth: 0,\n        }}\n      >\n        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n        <ValueRow value={value} loading={loading} testId={testId} />\n        <DeltaSlot delta={delta} loading={loading} testId={testId} />\n        {hint && (\n          <Typography\n            variant=\"caption\"\n            component=\"p\"\n            data-testid={`${testId}-hint`}\n            sx={{ color: theme.palette.text.secondary }}\n          >\n            {hint}\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}

package/dist/data-display/Stepper.js

@@ -0,0 +1,8 @@
+import {
+  Stepper
+} from "../chunk-SQ5AV7IK.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Stepper
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/data-display/Stepper.js.map

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