@persona/design-system 0.1.5-pre.4

package/dist/components/ProgressBar/index.cjs

@@ -0,0 +1,177 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_mixins_text = require("../../mixins/text.cjs");
+const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria = require("react-aria");
+let _persona_icons_CircleAlertIcon = require("@persona/icons/CircleAlertIcon");
+_persona_icons_CircleAlertIcon = require_chunk.__toESM(_persona_icons_CircleAlertIcon);
+let _persona_icons_CircleCheckFillIcon = require("@persona/icons/CircleCheckFillIcon");
+_persona_icons_CircleCheckFillIcon = require_chunk.__toESM(_persona_icons_CircleCheckFillIcon);
+//#region components/ProgressBar/ProgressBar.tsx
+const STATUS_FILL_COLORS = {
+	default: _persona_design_tokens.Color.BorderInputActive,
+	exception: _persona_design_tokens.Color.BorderInputDanger,
+	success: _persona_design_tokens.Color.BorderIconSuccess
+};
+const STATUS_ICON_COLORS = {
+	exception: _persona_design_tokens.Color.BorderInputDanger,
+	success: _persona_design_tokens.Color.BorderIconSuccess
+};
+const TRACK_HEIGHT = {
+	sm: "4px",
+	md: "8px"
+};
+const BAR_ROW_HEIGHT = "20px";
+const indeterminateScan = styled_components.keyframes`
+  0%   { left: -40%; width: 40%; }
+  60%  { left: 100%; width: 40%; }
+  100% { left: 100%; width: 40%; }
+`;
+const Container = styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const LabelText = styled_components.default.span`
+  ${require_mixins_text.paragraphMixins.md}
+  color: ${_persona_design_tokens.Color.TextPrimary};
+`;
+const BarRow = styled_components.default.div`
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  align-items: center;
+  min-height: ${BAR_ROW_HEIGHT};
+  width: 100%;
+`;
+const Track = styled_components.default.div`
+  flex: 1;
+  height: ${({ $size }) => TRACK_HEIGHT[$size]};
+  background-color: ${({ $railColor }) => $railColor ?? _persona_design_tokens.Color.BorderDivider};
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+`;
+const Fill = styled_components.default.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${({ $left }) => `${$left}%`};
+  width: ${({ $percent }) => `${$percent}%`};
+  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};
+  border-radius: ${({ $hasSuccessBefore }) => $hasSuccessBefore ? "0 4px 4px 0" : "4px"};
+  transition: width 0.3s ease, left 0.3s ease;
+`;
+const SuccessFill = styled_components.default.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: ${({ $percent }) => `${$percent}%`};
+  background-color: ${STATUS_FILL_COLORS.success};
+  border-radius: ${({ $hasInProgressAfter }) => $hasInProgressAfter ? "4px 0 0 4px" : "4px"};
+  transition: width 0.3s ease;
+`;
+const IndeterminateFill = styled_components.default.div`
+  position: absolute;
+  inset: 0 auto 0 auto;
+  height: 100%;
+  /* Same neutral as Spinner (Color.BorderIconPrimary) */
+  background-color: ${_persona_design_tokens.Color.BorderIconPrimary};
+  border-radius: 4px;
+  animation: ${indeterminateScan} 2.5s ease-in-out infinite;
+`;
+const SuffixRow = styled_components.default.div`
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  align-items: center;
+  flex-shrink: 0;
+`;
+const PercentText = styled_components.default.span`
+  ${require_mixins_text.paragraphMixins.md}
+  color: ${_persona_design_tokens.Color.TextPrimary};
+  white-space: nowrap;
+`;
+const IconWrapper = styled_components.default.span`
+  display: flex;
+  flex-shrink: 0;
+  line-height: 0;
+  color: ${({ $color }) => $color};
+`;
+/**
+* ProgressBar shows the completion status of an operation as a filled bar.
+*
+* @example
+* ```tsx
+* <ProgressBar
+*   percent={60}
+*   size="md"
+*   label="Uploading"
+*   showInfo
+* />
+* ```
+*/
+const ProgressBar = ({ percent = 0, size = "sm", status = "default", type = "determinate", label, showInfo, fillColor, railColor, format, successPercent, tooltip, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) => {
+	const labelId = (0, react_aria.useId)();
+	const clampedPercent = Math.min(100, Math.max(0, percent));
+	const clampedSuccessPercent = successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;
+	const inProgressPercent = clampedPercent - clampedSuccessPercent;
+	const hasSuccessSegment = clampedSuccessPercent > 0;
+	const hasInProgressSegment = inProgressPercent > 0;
+	const effectiveStatus = clampedPercent >= 100 && status !== "exception" ? "success" : status;
+	const effectiveShowInfo = showInfo ?? successPercent != null;
+	const isTerminal = effectiveStatus === "exception" || effectiveStatus === "success";
+	const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;
+	const isIndeterminate = type === "indeterminate";
+	const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(" ") : ariaLabelledBy;
+	const track = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Track, {
+		$size: size,
+		$railColor: railColor,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": isIndeterminate ? void 0 : clampedPercent,
+		"aria-valuetext": isIndeterminate ? void 0 : formattedPercent,
+		"aria-labelledby": labelledBy || void 0,
+		"aria-label": labelledBy ? void 0 : ariaLabel ?? "Progress",
+		children: isIndeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndeterminateFill, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hasSuccessSegment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuccessFill, {
+			$percent: clampedSuccessPercent,
+			$hasInProgressAfter: hasInProgressSegment
+		}), hasInProgressSegment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fill, {
+			$percent: inProgressPercent,
+			$left: clampedSuccessPercent,
+			$status: effectiveStatus,
+			$fillColor: fillColor,
+			$hasSuccessBefore: hasSuccessSegment
+		})] })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		...props,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelText, {
+			id: labelId,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BarRow, { children: [tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+			trigger: track,
+			side: "top",
+			contentAlignment: "center",
+			children: tooltip
+		}) : track, effectiveShowInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuffixRow, { children: isTerminal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper, {
+			$color: STATUS_ICON_COLORS[effectiveStatus],
+			children: effectiveStatus === "exception" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_CircleAlertIcon.default, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_CircleCheckFillIcon.default, { size: 16 })
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PercentText, { children: formattedPercent }) })] })]
+	});
+};
+//#endregion
+//#region components/ProgressBar/index.ts
+var ProgressBar_default = ProgressBar;
+//#endregion
+exports.ProgressBar = ProgressBar;
+exports.default = ProgressBar_default;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/ProgressBar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Color","paragraphMixins","Spacing","Tooltip","CircleAlertIcon","CircleCheckFillIcon"],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ $railColor }) => $railColor ?? Color.BorderDivider};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${STATUS_FILL_COLORS.success};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${Color.BorderIconPrimary};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/ProgressBar/index.d.cts

@@ -0,0 +1,2 @@
+import { ProgressBar, ProgressBarProps, ProgressBarSize, ProgressBarStatus, ProgressBarType } from "../../ProgressBar.cjs";
+export { ProgressBar, ProgressBar as default, type ProgressBarProps, type ProgressBarSize, type ProgressBarStatus, type ProgressBarType };

package/dist/components/ProgressBar/index.d.mts

@@ -0,0 +1,2 @@
+import { ProgressBar, ProgressBarProps, ProgressBarSize, ProgressBarStatus, ProgressBarType } from "../../ProgressBar.mjs";
+export { ProgressBar, ProgressBar as default, type ProgressBarProps, type ProgressBarSize, type ProgressBarStatus, type ProgressBarType };

package/dist/components/ProgressBar/index.mjs

@@ -0,0 +1,168 @@
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { a as Tooltip } from "../../Tooltip-T7RQpy_a.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { keyframes } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react-aria";
+import CircleAlertIcon from "@persona/icons/CircleAlertIcon";
+import CircleCheckFillIcon from "@persona/icons/CircleCheckFillIcon";
+//#region components/ProgressBar/ProgressBar.tsx
+const STATUS_FILL_COLORS = {
+	default: Color.BorderInputActive,
+	exception: Color.BorderInputDanger,
+	success: Color.BorderIconSuccess
+};
+const STATUS_ICON_COLORS = {
+	exception: Color.BorderInputDanger,
+	success: Color.BorderIconSuccess
+};
+const TRACK_HEIGHT = {
+	sm: "4px",
+	md: "8px"
+};
+const BAR_ROW_HEIGHT = "20px";
+const indeterminateScan = keyframes`
+  0%   { left: -40%; width: 40%; }
+  60%  { left: 100%; width: 40%; }
+  100% { left: 100%; width: 40%; }
+`;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const LabelText = styled.span`
+  ${paragraphMixins.md}
+  color: ${Color.TextPrimary};
+`;
+const BarRow = styled.div`
+  display: flex;
+  gap: ${Spacing[2]};
+  align-items: center;
+  min-height: ${BAR_ROW_HEIGHT};
+  width: 100%;
+`;
+const Track = styled.div`
+  flex: 1;
+  height: ${({ $size }) => TRACK_HEIGHT[$size]};
+  background-color: ${({ $railColor }) => $railColor ?? Color.BorderDivider};
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+`;
+const Fill = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${({ $left }) => `${$left}%`};
+  width: ${({ $percent }) => `${$percent}%`};
+  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};
+  border-radius: ${({ $hasSuccessBefore }) => $hasSuccessBefore ? "0 4px 4px 0" : "4px"};
+  transition: width 0.3s ease, left 0.3s ease;
+`;
+const SuccessFill = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: ${({ $percent }) => `${$percent}%`};
+  background-color: ${STATUS_FILL_COLORS.success};
+  border-radius: ${({ $hasInProgressAfter }) => $hasInProgressAfter ? "4px 0 0 4px" : "4px"};
+  transition: width 0.3s ease;
+`;
+const IndeterminateFill = styled.div`
+  position: absolute;
+  inset: 0 auto 0 auto;
+  height: 100%;
+  /* Same neutral as Spinner (Color.BorderIconPrimary) */
+  background-color: ${Color.BorderIconPrimary};
+  border-radius: 4px;
+  animation: ${indeterminateScan} 2.5s ease-in-out infinite;
+`;
+const SuffixRow = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+  align-items: center;
+  flex-shrink: 0;
+`;
+const PercentText = styled.span`
+  ${paragraphMixins.md}
+  color: ${Color.TextPrimary};
+  white-space: nowrap;
+`;
+const IconWrapper = styled.span`
+  display: flex;
+  flex-shrink: 0;
+  line-height: 0;
+  color: ${({ $color }) => $color};
+`;
+/**
+* ProgressBar shows the completion status of an operation as a filled bar.
+*
+* @example
+* ```tsx
+* <ProgressBar
+*   percent={60}
+*   size="md"
+*   label="Uploading"
+*   showInfo
+* />
+* ```
+*/
+const ProgressBar = ({ percent = 0, size = "sm", status = "default", type = "determinate", label, showInfo, fillColor, railColor, format, successPercent, tooltip, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) => {
+	const labelId = useId();
+	const clampedPercent = Math.min(100, Math.max(0, percent));
+	const clampedSuccessPercent = successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;
+	const inProgressPercent = clampedPercent - clampedSuccessPercent;
+	const hasSuccessSegment = clampedSuccessPercent > 0;
+	const hasInProgressSegment = inProgressPercent > 0;
+	const effectiveStatus = clampedPercent >= 100 && status !== "exception" ? "success" : status;
+	const effectiveShowInfo = showInfo ?? successPercent != null;
+	const isTerminal = effectiveStatus === "exception" || effectiveStatus === "success";
+	const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;
+	const isIndeterminate = type === "indeterminate";
+	const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(" ") : ariaLabelledBy;
+	const track = /* @__PURE__ */ jsx(Track, {
+		$size: size,
+		$railColor: railColor,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": isIndeterminate ? void 0 : clampedPercent,
+		"aria-valuetext": isIndeterminate ? void 0 : formattedPercent,
+		"aria-labelledby": labelledBy || void 0,
+		"aria-label": labelledBy ? void 0 : ariaLabel ?? "Progress",
+		children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateFill, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [hasSuccessSegment && /* @__PURE__ */ jsx(SuccessFill, {
+			$percent: clampedSuccessPercent,
+			$hasInProgressAfter: hasInProgressSegment
+		}), hasInProgressSegment && /* @__PURE__ */ jsx(Fill, {
+			$percent: inProgressPercent,
+			$left: clampedSuccessPercent,
+			$status: effectiveStatus,
+			$fillColor: fillColor,
+			$hasSuccessBefore: hasSuccessSegment
+		})] })
+	});
+	return /* @__PURE__ */ jsxs(Container, {
+		...props,
+		children: [label && /* @__PURE__ */ jsx(LabelText, {
+			id: labelId,
+			children: label
+		}), /* @__PURE__ */ jsxs(BarRow, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			trigger: track,
+			side: "top",
+			contentAlignment: "center",
+			children: tooltip
+		}) : track, effectiveShowInfo && /* @__PURE__ */ jsx(SuffixRow, { children: isTerminal ? /* @__PURE__ */ jsx(IconWrapper, {
+			$color: STATUS_ICON_COLORS[effectiveStatus],
+			children: effectiveStatus === "exception" ? /* @__PURE__ */ jsx(CircleAlertIcon, { size: 16 }) : /* @__PURE__ */ jsx(CircleCheckFillIcon, { size: 16 })
+		}) : /* @__PURE__ */ jsx(PercentText, { children: formattedPercent }) })] })]
+	});
+};
+//#endregion
+//#region components/ProgressBar/index.ts
+var ProgressBar_default = ProgressBar;
+//#endregion
+export { ProgressBar, ProgressBar_default as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/ProgressBar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleAlertIcon from '@persona/icons/CircleAlertIcon';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ $railColor }) => $railColor ?? Color.BorderDivider};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${STATUS_FILL_COLORS.success};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${Color.BorderIconPrimary};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleAlertIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/ProgressIndicator/index.cjs

@@ -0,0 +1,185 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_mixins_focus = require("../../mixins/focus.cjs");
+const require_mixins_text = require("../../mixins/text.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _persona_icons = require("@persona/icons");
+//#region components/ProgressIndicator/ProgressIndicator.tsx
+/**
+* Completed and error steps can be navigated back to.
+* The current step (first uncompleted) is also clickable so the user can
+* return to it after navigating back to an earlier step.
+* Active and upcoming steps (beyond the current) are not clickable.
+*/
+function resolveClickable(status, isActive, isDisabled, isCurrent) {
+	if (isDisabled || isActive) return false;
+	return status === "completed" || status === "error" || isCurrent;
+}
+function resolveIcon(status, isCurrent) {
+	if (status === "completed") return _persona_icons.CircleCheckFillIcon;
+	if (status === "error") return _persona_icons.CircleAlertIcon;
+	if (isCurrent) return _persona_icons.CircleFillIcon;
+	return _persona_icons.CircleNullIcon;
+}
+function resolveIconColor(status, isActive, isDisabled) {
+	if (isDisabled) return _persona_design_tokens.Color.BorderIconDisabled;
+	if (status === "completed") return _persona_design_tokens.Color.BorderIconSuccess;
+	if (status === "error") return _persona_design_tokens.Color.BorderIconWarning;
+	return isActive ? _persona_design_tokens.Color.BorderIconActive : _persona_design_tokens.Color.BorderIconSecondary;
+}
+function resolveTextColor(status, isActive, isDisabled) {
+	if (isDisabled) return _persona_design_tokens.Color.TextDisabled;
+	if (isActive) return _persona_design_tokens.Color.TextActive;
+	if (status === "uncompleted") return _persona_design_tokens.Color.TextSecondary;
+	return _persona_design_tokens.Color.TextPrimary;
+}
+const StepList = styled_components.default.ol`
+  display: flex;
+  flex-direction: ${({ $layout }) => $layout === "horizontal" ? "row" : "column"};
+  gap: ${({ $layout }) => $layout === "horizontal" ? _persona_design_tokens.Spacing[2] : "0px"};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StepItem = styled_components.default.li`
+  display: flex;
+  align-items: center;
+
+  ${({ $layout }) => $layout === "horizontal" && styled_components.css`
+      width: fit-content;
+      white-space: nowrap;
+    `}
+`;
+const StepContent = styled_components.default.button`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  width: 100%;
+  padding: ${_persona_design_tokens.Spacing[2]};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  outline: none;
+  cursor: ${({ $isClickable, $interactive }) => $interactive && $isClickable ? "pointer" : "default"};
+
+  ${({ $isActive, $isClickable, $interactive }) => {
+	if ($isActive) return styled_components.css`background-color: ${_persona_design_tokens.Color.BackgroundInteractiveActive};`;
+	if ($interactive && $isClickable) return styled_components.css`
+        background-color: ${_persona_design_tokens.Color.BackgroundInteractiveDefault};
+        &:hover {
+          background-color: ${_persona_design_tokens.Color.BackgroundInteractiveHover};
+        }
+      `;
+	return styled_components.css`
+      background-color: transparent;
+    `;
+}}
+
+  ${require_mixins_focus.focusOutline}
+
+  &:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+`;
+const IconWrapper = styled_components.default.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: ${({ $color }) => $color};
+  line-height: 0;
+`;
+const StepLabel = styled_components.default.span`
+  ${({ $isActive }) => $isActive ? require_mixins_text.paragraphMixins.mdBold : require_mixins_text.paragraphMixins.md};
+  color: ${({ $color }) => $color};
+`;
+const Step = ({ step, isActive, isCurrent, layout, onStepClick }) => {
+	const { id, label, status = "uncompleted", disabled = false } = step;
+	const interactive = Boolean(onStepClick);
+	const isClickable = resolveClickable(status, isActive, disabled, isCurrent);
+	const isInteractionDisabled = disabled || !isActive && !isCurrent && status === "uncompleted";
+	const iconColor = resolveIconColor(status, isActive, disabled);
+	const textColor = resolveTextColor(status, isActive, disabled);
+	const Icon = resolveIcon(status, isCurrent);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepItem, {
+		$layout: layout,
+		"aria-current": !interactive && isActive ? "step" : void 0,
+		"aria-disabled": !interactive && isInteractionDisabled ? true : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StepContent, {
+			...interactive && isClickable ? {
+				type: "button",
+				onClick: () => onStepClick?.(id)
+			} : { as: "div" },
+			"aria-current": interactive && isActive ? "step" : void 0,
+			"aria-disabled": interactive && isInteractionDisabled ? true : void 0,
+			$isActive: isActive,
+			$isClickable: isClickable,
+			$interactive: interactive,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper, {
+				$color: iconColor,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, {
+				$isActive: isActive,
+				$color: textColor,
+				children: label
+			})]
+		})
+	});
+};
+/**
+* ProgressIndicator guides users through a sequence of steps.
+*
+* Interaction rules:
+* - **Completed / error** steps are clickable — navigate back to review or fix.
+* - **Active** step is not clickable — the user is already there.
+* - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
+*
+* Navigation does not clear later steps. If a change on an earlier step
+* invalidates later data, the affected steps should be flagged and require
+* re-confirmation before submission — this logic lives in the consuming component.
+*
+* @example
+* ```tsx
+* <ProgressIndicator
+*   steps={[
+*     { id: 'identity', label: 'Identity', status: 'completed' },
+*     { id: 'address',  label: 'Address',  status: 'uncompleted' },
+*     { id: 'review',   label: 'Review',   status: 'uncompleted' },
+*   ]}
+*   activeStepId="address"
+*   onStepClick={(id) => navigate(id)}
+* />
+* ```
+*/
+const ProgressIndicator = ({ steps, activeStepId, layout = "vertical", onStepClick, "aria-label": ariaLabel = "Progress", ...rest }) => {
+	const currentStepId = steps.find(({ status = "uncompleted" }) => status !== "completed")?.id;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepList, {
+		$layout: layout,
+		role: "list",
+		"aria-label": ariaLabel,
+		...rest,
+		children: steps.map((step) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Step, {
+			step,
+			isActive: step.id === activeStepId,
+			isCurrent: step.id === currentStepId,
+			layout,
+			onStepClick
+		}, step.id))
+	});
+};
+//#endregion
+exports.ProgressIndicator = ProgressIndicator;
+exports.default = ProgressIndicator;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/ProgressIndicator/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["CircleCheckFillIcon","CircleAlertIcon","CircleFillIcon","CircleNullIcon","Color","Spacing","BorderRadius","focusOutline","paragraphMixins"],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import { focusOutline } from '@persona/design-system/mixins/focus';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  CircleAlertIcon,\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport type StepStatus = 'uncompleted' | 'completed' | 'error';\n\nexport interface ProgressIndicatorStep {\n  id: string;\n  label: string;\n  /** @default 'uncompleted' */\n  status?: StepStatus;\n  disabled?: boolean;\n}\n\nexport interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {\n  steps: ProgressIndicatorStep[];\n  /** id of the step that should receive the active visual state */\n  activeStepId?: string;\n  /** @default 'vertical' */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Called when a clickable step is activated via click or keyboard.\n   *\n   * Clickability rules:\n   * - `completed` and `error` steps are clickable (navigate back to review/edit)\n   * - The active step is not clickable (user is already there)\n   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)\n   */\n  onStepClick?: (stepId: string) => void;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/**\n * Completed and error steps can be navigated back to.\n * The current step (first uncompleted) is also clickable so the user can\n * return to it after navigating back to an earlier step.\n * Active and upcoming steps (beyond the current) are not clickable.\n */\nfunction resolveClickable(\n  status: StepStatus,\n  isActive: boolean,\n  isDisabled: boolean,\n  isCurrent: boolean,\n): boolean {\n  if (isDisabled || isActive) {\n    return false;\n  }\n  return status === 'completed' || status === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'error') {\n    return CircleAlertIcon;\n  }\n  if (isCurrent) {\n    return CircleFillIcon;\n  }\n  return CircleNullIcon;\n}\n\nfunction resolveIconColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n  if (isDisabled) {\n    return Color.BorderIconDisabled;\n  }\n  if (status === 'completed') {\n    return Color.BorderIconSuccess;\n  }\n  if (status === 'error') {\n    return Color.BorderIconWarning;\n  }\n  return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;\n}\n\nfunction resolveTextColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n  if (isDisabled) {\n    return Color.TextDisabled;\n  }\n  if (isActive) {\n    return Color.TextActive;\n  }\n  if (status === 'uncompleted') {\n    return Color.TextSecondary;\n  }\n  return Color.TextPrimary;\n}\n\n// ─── Styled components ────────────────────────────────────────────────────────\n\nconst StepList = styled.ol<{ $layout: 'vertical' | 'horizontal' }>`\n  display: flex;\n  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ $layout }) => ($layout === 'horizontal' ? Spacing[2] : '0px')};\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nconst StepItem = styled.li<{ $layout: 'vertical' | 'horizontal' }>`\n  display: flex;\n  align-items: center;\n\n  ${({ $layout }) =>\n    $layout === 'horizontal' &&\n    css`\n      width: fit-content;\n      white-space: nowrap;\n    `}\n`;\n\nconst StepContent = styled.button<{\n  $isActive: boolean;\n  $isClickable: boolean;\n  $interactive: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  width: 100%;\n  padding: ${Spacing[2]};\n  border-radius: ${BorderRadius.Md};\n  border: none;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  outline: none;\n  cursor: ${({ $isClickable, $interactive }) => ($interactive && $isClickable ? 'pointer' : 'default')};\n\n  ${({ $isActive, $isClickable, $interactive }) => {\n    if ($isActive) {\n      return css`background-color: ${Color.BackgroundInteractiveActive};`;\n    }\n    if ($interactive && $isClickable) {\n      return css`\n        background-color: ${Color.BackgroundInteractiveDefault};\n        &:hover {\n          background-color: ${Color.BackgroundInteractiveHover};\n        }\n      `;\n    }\n    return css`\n      background-color: transparent;\n    `;\n  }}\n\n  ${focusOutline}\n\n  &:focus-visible {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: inline-flex;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  color: ${({ $color }) => $color};\n  line-height: 0;\n`;\n\nconst StepLabel = styled.span<{ $isActive: boolean; $color: Color }>`\n  ${({ $isActive }) => ($isActive ? paragraphMixins.mdBold : paragraphMixins.md)};\n  color: ${({ $color }) => $color};\n`;\n\n// ─── Step ─────────────────────────────────────────────────────────────────────\n\ninterface StepProps {\n  step: ProgressIndicatorStep;\n  isActive: boolean;\n  isCurrent: boolean;\n  layout: 'vertical' | 'horizontal';\n  onStepClick?: (stepId: string) => void;\n}\n\nconst Step = ({ step, isActive, isCurrent, layout, onStepClick }: StepProps) => {\n  const { id, label, status = 'uncompleted', disabled = false } = step;\n\n  const interactive = Boolean(onStepClick);\n  const isClickable = resolveClickable(status, isActive, disabled, isCurrent);\n  const isInteractionDisabled = disabled || (!isActive && !isCurrent && status === 'uncompleted');\n  const iconColor = resolveIconColor(status, isActive, disabled);\n  const textColor = resolveTextColor(status, isActive, disabled);\n\n  const Icon = resolveIcon(status, isCurrent);\n\n  return (\n    <StepItem\n      $layout={layout}\n      aria-current={!interactive && isActive ? 'step' : undefined}\n      aria-disabled={!interactive && isInteractionDisabled ? true : undefined}\n    >\n      <StepContent\n        {...(interactive && isClickable\n          ? { type: 'button' as const, onClick: () => onStepClick?.(id) }\n          : { as: 'div' as const })}\n        aria-current={interactive && isActive ? 'step' : undefined}\n        aria-disabled={interactive && isInteractionDisabled ? true : undefined}\n        $isActive={isActive}\n        $isClickable={isClickable}\n        $interactive={interactive}\n      >\n        <IconWrapper $color={iconColor} aria-hidden='true'>\n          <Icon />\n        </IconWrapper>\n        <StepLabel $isActive={isActive} $color={textColor}>\n          {label}\n        </StepLabel>\n      </StepContent>\n    </StepItem>\n  );\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * ProgressIndicator guides users through a sequence of steps.\n *\n * Interaction rules:\n * - **Completed / error** steps are clickable — navigate back to review or fix.\n * - **Active** step is not clickable — the user is already there.\n * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.\n *\n * Navigation does not clear later steps. If a change on an earlier step\n * invalidates later data, the affected steps should be flagged and require\n * re-confirmation before submission — this logic lives in the consuming component.\n *\n * @example\n * ```tsx\n * <ProgressIndicator\n *   steps={[\n *     { id: 'identity', label: 'Identity', status: 'completed' },\n *     { id: 'address',  label: 'Address',  status: 'uncompleted' },\n *     { id: 'review',   label: 'Review',   status: 'uncompleted' },\n *   ]}\n *   activeStepId=\"address\"\n *   onStepClick={(id) => navigate(id)}\n * />\n * ```\n */\nexport const ProgressIndicator = ({\n  steps,\n  activeStepId,\n  layout = 'vertical',\n  onStepClick,\n  'aria-label': ariaLabel = 'Progress',\n  ...rest\n}: ProgressIndicatorProps) => {\n  // The \"current\" step is the first uncompleted step — where the user should work next.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.id;\n\n  return (\n    <StepList $layout={layout} role='list' aria-label={ariaLabel} {...rest}>\n      {steps.map((step) => (\n        <Step\n          key={step.id}\n          step={step}\n          isActive={step.id === activeStepId}\n          isCurrent={step.id === currentStepId}\n          layout={layout}\n          onStepClick={onStepClick}\n        />\n      ))}\n    </StepList>\n  );\n};\n\nexport default ProgressIndicator;\n"],"mappings":"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"}

package/dist/components/ProgressIndicator/index.d.cts

@@ -0,0 +1,2 @@
+import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus } from "../../ProgressIndicator.cjs";
+export { ProgressIndicator, ProgressIndicator as default, type ProgressIndicatorProps, type ProgressIndicatorStep, type StepStatus };

package/dist/components/ProgressIndicator/index.d.mts

@@ -0,0 +1,2 @@
+import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus } from "../../ProgressIndicator.mjs";
+export { ProgressIndicator, ProgressIndicator as default, type ProgressIndicatorProps, type ProgressIndicatorStep, type StepStatus };