@echothink-ui/motion 0.1.0

package/src/components/DAGStatusTransition.tsx

@@ -0,0 +1,292 @@
+import * as React from "react";
+import type { DAGStatusTransitionProps, MotionFlowNode } from "./types";
+import { MotionStyles, statusColor, usePrefersReducedMotion } from "./motionUtils";
+
+export function DAGStatusTransition({
+  nodes,
+  previousNodes,
+  edges = [],
+  className,
+  ...props
+}: DAGStatusTransitionProps) {
+  const reduced = usePrefersReducedMotion();
+  const previousStatus = new Map(previousNodes?.map((node) => [node.id, node.status]) ?? []);
+  const positions = layoutDag(nodes, edges);
+  const frame = viewBoxFor(nodes, positions);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const markerBaseId = React.useId();
+  const changedCount = nodes.filter(
+    (node) => previousStatus.has(node.id) && previousStatus.get(node.id) !== node.status
+  ).length;
+
+  return (
+    <section
+      {...props}
+      className={`eth-motion-dag-status ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`}
+      data-eth-component="DAGStatusTransition"
+      aria-label="DAG status transition"
+    >
+      <MotionStyles />
+      <svg
+        className="eth-motion-dag-status__svg"
+        viewBox={frame.viewBox}
+        width={frame.width}
+        height={frame.height}
+        role="img"
+        aria-labelledby={`${titleId} ${descriptionId}`}
+      >
+        <title id={titleId}>DAG status transition</title>
+        <desc id={descriptionId}>
+          {`${nodes.length} nodes, ${edges.length} edges, ${changedCount} changed node statuses.`}
+        </desc>
+        <defs>
+          {edges.map((edge, index) => {
+            const to = positions.get(edge.to);
+            if (!to) return null;
+            const color = edgeColor(edge, nodes.find((node) => node.id === edge.to)?.status);
+            return (
+              <marker
+                key={`${edge.from}-${edge.to}-${index}`}
+                id={markerIdFromUseId(markerBaseId, index)}
+                markerWidth="8"
+                markerHeight="8"
+                refX="7"
+                refY="3"
+                orient="auto"
+                markerUnits="strokeWidth"
+              >
+                <path d="M0,0 L0,6 L7,3 z" fill={color} />
+              </marker>
+            );
+          })}
+        </defs>
+        {edges.map((edge, index) => {
+          const from = positions.get(edge.from);
+          const to = positions.get(edge.to);
+          if (!from || !to) return null;
+          const color = edgeColor(edge, nodes.find((node) => node.id === edge.to)?.status);
+          const active = edge.active && !reduced;
+          return (
+            <path
+              key={`${edge.from}-${edge.to}-${index}`}
+              className="eth-motion-dag-status__edge"
+              d={edgePath(from, to)}
+              fill="none"
+              stroke={color}
+              strokeWidth={active ? 2 : 1.25}
+              strokeDasharray={active ? "6 6" : undefined}
+              markerEnd={`url(#${markerIdFromUseId(markerBaseId, index)})`}
+              style={
+                active ? { animation: "eth-motion-flow-dash 900ms linear infinite" } : undefined
+              }
+            />
+          );
+        })}
+        {nodes.map((node) => {
+          const point = positions.get(node.id);
+          if (!point) return null;
+          const previous = previousStatus.get(node.id);
+          const changed = previous !== undefined && previous !== node.status;
+          const statusText = changed
+            ? `${compactLabelForStatus(previous)} -> ${compactLabelForStatus(node.status)}`
+            : labelForStatus(node.status);
+          return (
+            <g
+              key={node.id}
+              className={`eth-motion-dag-status__node ${changed ? "eth-motion-dag-status__node--changed" : ""}`}
+              transform={`translate(${point.x}, ${point.y})`}
+            >
+              {changed ? (
+                <rect
+                  className="eth-motion-dag-status__change-ring"
+                  x={-NODE_WIDTH / 2 - 4}
+                  y={-NODE_HEIGHT / 2 - 4}
+                  width={NODE_WIDTH + 8}
+                  height={NODE_HEIGHT + 8}
+                  rx={0}
+                  fill="none"
+                  stroke={statusColor(node.status)}
+                />
+              ) : null}
+              <rect
+                className="eth-motion-dag-status__card"
+                x={-NODE_WIDTH / 2}
+                y={-NODE_HEIGHT / 2}
+                width={NODE_WIDTH}
+                height={NODE_HEIGHT}
+                rx={0}
+                fill="var(--cds-layer-02, #ffffff)"
+                stroke="var(--cds-border-subtle, #e0e0e0)"
+              />
+              <rect
+                x={-NODE_WIDTH / 2}
+                y={-NODE_HEIGHT / 2}
+                width={4}
+                height={NODE_HEIGHT}
+                rx={0}
+                fill={statusColor(node.status)}
+              />
+              <circle cx={-NODE_WIDTH / 2 + 20} cy={-9} r={4.5} fill={statusColor(node.status)} />
+              <text className="eth-motion-dag-status__label" x={-NODE_WIDTH / 2 + 34} y={-7}>
+                {truncate(node.label, 18)}
+              </text>
+              <text className="eth-motion-dag-status__status" x={-NODE_WIDTH / 2 + 34} y={15}>
+                {truncate(statusText, 24)}
+              </text>
+              <title>
+                {changed && previous
+                  ? `${node.label}: ${labelForStatus(previous)} to ${labelForStatus(node.status)}`
+                  : `${node.label}: ${labelForStatus(node.status)}`}
+              </title>
+            </g>
+          );
+        })}
+      </svg>
+      <ol className="eth-motion-dag-status__fallback">
+        {nodes.map((node) => {
+          const previous = previousStatus.get(node.id);
+          const changed = previous !== undefined && previous !== node.status;
+          return (
+            <li key={node.id}>
+              {changed && previous
+                ? `${node.label}: ${labelForStatus(previous)} to ${labelForStatus(node.status)}`
+                : `${node.label}: ${labelForStatus(node.status)}`}
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}
+
+const NODE_WIDTH = 160;
+const NODE_HEIGHT = 64;
+const NODE_GAP_X = 190;
+const NODE_GAP_Y = 92;
+
+function layoutDag(
+  nodes: MotionFlowNode[],
+  edges: NonNullable<DAGStatusTransitionProps["edges"]> = []
+) {
+  const map = new Map<string, { x: number; y: number }>();
+  const ids = new Set(nodes.map((node) => node.id));
+  const ranks = new Map(nodes.map((node) => [node.id, 0]));
+  const validEdges = edges.filter((edge) => ids.has(edge.from) && ids.has(edge.to));
+
+  for (let pass = 0; pass < nodes.length; pass += 1) {
+    for (const edge of validEdges) {
+      const fromRank = ranks.get(edge.from) ?? 0;
+      const toRank = ranks.get(edge.to) ?? 0;
+      if (toRank < fromRank + 1) ranks.set(edge.to, fromRank + 1);
+    }
+  }
+
+  const groups = new Map<number, MotionFlowNode[]>();
+  for (const node of nodes) {
+    const rank = ranks.get(node.id) ?? 0;
+    groups.set(rank, [...(groups.get(rank) ?? []), node]);
+  }
+  const maxRows = Math.max(1, ...Array.from(groups.values()).map((group) => group.length));
+
+  nodes.forEach((node, index) => {
+    const rank = ranks.get(node.id) ?? index;
+    const group = groups.get(rank) ?? [node];
+    const rowIndex = Math.max(
+      0,
+      group.findIndex((candidate) => candidate.id === node.id)
+    );
+    const row = group.length === 1 && maxRows > 1 ? (maxRows - 1) / 2 : rowIndex;
+    map.set(node.id, {
+      x: node.x ?? 88 + rank * NODE_GAP_X,
+      y: node.y ?? 64 + row * NODE_GAP_Y
+    });
+  });
+  return map;
+}
+
+function viewBoxFor(nodes: MotionFlowNode[], positions: Map<string, { x: number; y: number }>) {
+  if (!nodes.length) {
+    return { viewBox: "0 0 320 120", width: 320, height: 120 };
+  }
+
+  const points = nodes
+    .map((node) => positions.get(node.id))
+    .filter((point): point is { x: number; y: number } => Boolean(point));
+  const minX = Math.floor(Math.min(...points.map((point) => point.x)) - NODE_WIDTH / 2 - 24);
+  const minY = Math.floor(Math.min(...points.map((point) => point.y)) - NODE_HEIGHT / 2 - 20);
+  const maxX = Math.ceil(Math.max(...points.map((point) => point.x)) + NODE_WIDTH / 2 + 30);
+  const maxY = Math.ceil(Math.max(...points.map((point) => point.y)) + NODE_HEIGHT / 2 + 20);
+  const width = maxX - minX;
+  const height = maxY - minY;
+  return { viewBox: `${minX} ${minY} ${width} ${height}`, width, height };
+}
+
+function edgePath(from: { x: number; y: number }, to: { x: number; y: number }) {
+  const horizontal = Math.abs(to.x - from.x) >= Math.abs(to.y - from.y);
+  if (horizontal) {
+    const direction = to.x >= from.x ? 1 : -1;
+    const start = { x: from.x + (NODE_WIDTH / 2) * direction, y: from.y };
+    const end = { x: to.x - (NODE_WIDTH / 2) * direction, y: to.y };
+    const controlOffset = Math.max(32, Math.abs(end.x - start.x) * 0.5);
+    return `M ${start.x} ${start.y} C ${start.x + controlOffset * direction} ${start.y}, ${end.x - controlOffset * direction} ${end.y}, ${end.x} ${end.y}`;
+  }
+
+  const direction = to.y >= from.y ? 1 : -1;
+  const start = { x: from.x, y: from.y + (NODE_HEIGHT / 2) * direction };
+  const end = { x: to.x, y: to.y - (NODE_HEIGHT / 2) * direction };
+  const controlOffset = Math.max(28, Math.abs(end.y - start.y) * 0.5);
+  return `M ${start.x} ${start.y} C ${start.x} ${start.y + controlOffset * direction}, ${end.x} ${end.y - controlOffset * direction}, ${end.x} ${end.y}`;
+}
+
+function edgeColor(
+  edge: NonNullable<DAGStatusTransitionProps["edges"]>[number],
+  toStatus?: MotionFlowNode["status"]
+) {
+  if (edge.status) return statusColor(edge.status);
+  if (edge.active) return "var(--cds-interactive, #0f62fe)";
+  if (toStatus === "failed" || toStatus === "blocked") return statusColor(toStatus);
+  return "var(--cds-border-strong, #8d8d8d)";
+}
+
+function markerIdFromUseId(id: string, index: number) {
+  return `eth-motion-dag-arrow-${id.replace(/[^a-zA-Z0-9_-]/g, "")}-${index}`;
+}
+
+function labelForStatus(status: MotionFlowNode["status"]) {
+  switch (status) {
+    case "approval-required":
+      return "Approval required";
+    case "pending-approval":
+      return "Pending approval";
+    case "in-progress":
+      return "In progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return status
+        .split("-")
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+  }
+}
+
+function compactLabelForStatus(status: MotionFlowNode["status"]) {
+  switch (status) {
+    case "approval-required":
+      return "Approval";
+    case "pending-approval":
+      return "Pending";
+    case "in-progress":
+      return "Progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return labelForStatus(status);
+  }
+}
+
+function truncate(value: string, maxLength: number) {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}

package/src/components/DocumentLockPulse.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import type { DocumentLockPulseProps } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+export function DocumentLockPulse({
+  lockedBy,
+  active = true,
+  className,
+  children,
+  role = "status",
+  style,
+  "aria-label": ariaLabel,
+  ...props
+}: DocumentLockPulseProps) {
+  const reduced = usePrefersReducedMotion();
+  const owner = children ?? lockedBy ?? "Document locked";
+  const ownerLabel = plainText(children ?? lockedBy);
+  const classes = [
+    "eth-motion-document-lock",
+    active ? "eth-motion-document-lock--active" : "eth-motion-document-lock--idle",
+    reduced ? "eth-motion-reduced" : undefined,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const defaultLabel = ownerLabel
+    ? `Document lock ${active ? "active" : "held"} by ${ownerLabel}`
+    : active
+      ? "Document lock active"
+      : "Document locked";
+
+  return (
+    <span
+      {...props}
+      aria-label={ariaLabel ?? defaultLabel}
+      className={classes}
+      data-eth-component="DocumentLockPulse"
+      role={role}
+      style={style}
+    >
+      <MotionStyles />
+      <span className="eth-motion-document-lock__indicator" aria-hidden="true">
+        <span className="eth-motion-document-lock__pulse" />
+        <LockGlyph className="eth-motion-document-lock__icon" />
+      </span>
+      <span className="eth-motion-document-lock__content">
+        <span className="eth-motion-document-lock__state">
+          {active ? "Active edit" : "Lock held"}
+        </span>
+        <span className="eth-motion-document-lock__owner">{owner}</span>
+      </span>
+    </span>
+  );
+}
+
+function LockGlyph(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} aria-hidden="true" focusable="false" viewBox="0 0 16 16">
+      <path
+        d="M5 7V5a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5a1.5 1.5 0 0 0-3 0v2Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function plainText(value: React.ReactNode): string | undefined {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  return undefined;
+}

package/src/components/PipelineFlowAnimation.tsx

@@ -0,0 +1,243 @@
+import * as React from "react";
+import type { MotionFlowEdge, MotionFlowNode, PipelineFlowAnimationProps } from "./types";
+import { MotionStyles, statusColor, usePrefersReducedMotion } from "./motionUtils";
+
+export function PipelineFlowAnimation({
+  nodes,
+  edges,
+  className,
+  "aria-label": ariaLabel = "Pipeline flow",
+  ...props
+}: PipelineFlowAnimationProps) {
+  const reduced = usePrefersReducedMotion();
+  const positions = layoutNodes(nodes);
+  const frame = viewBoxFor(nodes, positions);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const markerBaseId = React.useId();
+  const activeNodeIds = new Set(
+    edges
+      .filter((edge) => edge.active)
+      .flatMap((edge) => [edge.from, edge.to])
+      .concat(nodes.filter((node) => isActiveStatus(node.status)).map((node) => node.id))
+  );
+
+  return (
+    <section
+      {...props}
+      className={`eth-motion-pipeline-flow ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`}
+      data-eth-component="PipelineFlowAnimation"
+      aria-label={ariaLabel}
+    >
+      <MotionStyles />
+      <svg
+        className="eth-motion-pipeline-flow__svg"
+        viewBox={frame.viewBox}
+        width={frame.width}
+        height={frame.height}
+        role="img"
+        aria-labelledby={`${titleId} ${descriptionId}`}
+      >
+        <title id={titleId}>Pipeline flow</title>
+        <desc id={descriptionId}>
+          {nodes.length
+            ? `${nodes.length} stages and ${edges.length} handoffs. ${nodes
+                .map((node) => `${node.label}: ${labelForStatus(node.status)}`)
+                .join(", ")}.`
+            : "No pipeline stages."}
+        </desc>
+        <defs>
+          {edges.map((edge, index) => {
+            const toNode = nodes.find((node) => node.id === edge.to);
+            const color = edgeColor(edge, toNode?.status);
+            return (
+              <marker
+                key={`${edge.from}-${edge.to}-${index}`}
+                id={markerIdFromUseId(markerBaseId, index)}
+                markerWidth="7"
+                markerHeight="7"
+                refX="6"
+                refY="3.5"
+                orient="auto"
+                markerUnits="strokeWidth"
+              >
+                <path d="M0,0 L0,7 L7,3.5 z" fill={color} />
+              </marker>
+            );
+          })}
+        </defs>
+        {edges.map((edge, index) => {
+          const from = positions.get(edge.from);
+          const to = positions.get(edge.to);
+          if (!from || !to) return null;
+          const toNode = nodes.find((node) => node.id === edge.to);
+          const color = edgeColor(edge, toNode?.status);
+          const active = Boolean(edge.active);
+          return (
+            <path
+              key={`${edge.from}-${edge.to}-${index}`}
+              className="eth-motion-pipeline-flow__edge"
+              d={edgePath(from, to)}
+              fill="none"
+              markerEnd={`url(#${markerIdFromUseId(markerBaseId, index)})`}
+              stroke={color}
+              strokeWidth={active ? 2.5 : 1.5}
+              strokeDasharray={active ? "7 7" : undefined}
+              style={
+                active && !reduced
+                  ? { animation: "eth-motion-flow-dash 900ms linear infinite" }
+                  : undefined
+              }
+            />
+          );
+        })}
+        {!nodes.length ? (
+          <text className="eth-motion-pipeline-flow__empty" x="16" y="52">
+            No pipeline stages
+          </text>
+        ) : null}
+        {nodes.map((node) => {
+          const point = positions.get(node.id);
+          if (!point) return null;
+          const active = activeNodeIds.has(node.id);
+          const cardX = -NODE_WIDTH / 2;
+          const cardY = -NODE_HEIGHT / 2;
+          return (
+            <g
+              key={node.id}
+              className={`eth-motion-pipeline-flow__node ${active ? "eth-motion-pipeline-flow__node--active" : ""}`}
+              transform={`translate(${point.x}, ${point.y})`}
+            >
+              <rect
+                className="eth-motion-pipeline-flow__card"
+                x={cardX}
+                y={cardY}
+                width={NODE_WIDTH}
+                height={NODE_HEIGHT}
+                rx={0}
+              />
+              <rect
+                className="eth-motion-pipeline-flow__stripe"
+                x={cardX}
+                y={cardY}
+                width={4}
+                height={NODE_HEIGHT}
+                rx={0}
+                fill={statusColor(node.status)}
+              />
+              {active && !reduced ? (
+                <circle
+                  className="eth-motion-pipeline-flow__pulse"
+                  cx={cardX + 22}
+                  cy={cardY + 20}
+                  r={9}
+                  fill="none"
+                  stroke={statusColor(node.status)}
+                />
+              ) : null}
+              <circle
+                className="eth-motion-pipeline-flow__dot"
+                cx={cardX + 22}
+                cy={cardY + 20}
+                r={5}
+                fill={statusColor(node.status)}
+              />
+              <text className="eth-motion-pipeline-flow__label" x={cardX + 36} y={cardY + 24}>
+                {truncate(node.label, 15)}
+              </text>
+              <text className="eth-motion-pipeline-flow__status" x={cardX + 14} y={cardY + 48}>
+                {truncate(labelForStatus(node.status), 20)}
+              </text>
+              <title>{`${node.label}: ${labelForStatus(node.status)}`}</title>
+            </g>
+          );
+        })}
+      </svg>
+      <ol className="eth-motion-pipeline-flow__fallback">
+        {nodes.map((node) => (
+          <li key={node.id}>
+            {node.label}: {labelForStatus(node.status)}
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+const NODE_WIDTH = 144;
+const NODE_HEIGHT = 64;
+const NODE_GAP_X = 188;
+
+function layoutNodes(nodes: MotionFlowNode[]) {
+  const map = new Map<string, { x: number; y: number }>();
+  nodes.forEach((node, index) => {
+    map.set(node.id, {
+      x: node.x ?? NODE_WIDTH / 2 + 20 + NODE_GAP_X * index,
+      y: node.y ?? NODE_HEIGHT / 2 + 18
+    });
+  });
+  return map;
+}
+
+function viewBoxFor(nodes: MotionFlowNode[], positions: Map<string, { x: number; y: number }>) {
+  if (!nodes.length) {
+    return { viewBox: "0 0 320 96", width: 320, height: 96 };
+  }
+
+  const points = nodes
+    .map((node) => positions.get(node.id))
+    .filter((point): point is { x: number; y: number } => Boolean(point));
+  const minX = Math.floor(Math.min(...points.map((point) => point.x)) - NODE_WIDTH / 2 - 18);
+  const minY = Math.floor(Math.min(...points.map((point) => point.y)) - NODE_HEIGHT / 2 - 16);
+  const maxX = Math.ceil(Math.max(...points.map((point) => point.x)) + NODE_WIDTH / 2 + 26);
+  const maxY = Math.ceil(Math.max(...points.map((point) => point.y)) + NODE_HEIGHT / 2 + 16);
+  const width = maxX - minX;
+  const height = maxY - minY;
+  return { viewBox: `${minX} ${minY} ${width} ${height}`, width, height };
+}
+
+function edgePath(from: { x: number; y: number }, to: { x: number; y: number }) {
+  const direction = to.x >= from.x ? 1 : -1;
+  const start = { x: from.x + (NODE_WIDTH / 2) * direction, y: from.y };
+  const end = { x: to.x - (NODE_WIDTH / 2) * direction, y: to.y };
+  const controlOffset = Math.max(26, Math.abs(end.x - start.x) * 0.5);
+  return `M ${start.x} ${start.y} C ${start.x + controlOffset * direction} ${start.y}, ${end.x - controlOffset * direction} ${end.y}, ${end.x} ${end.y}`;
+}
+
+function edgeColor(edge: MotionFlowEdge, toStatus?: MotionFlowNode["status"]) {
+  if (edge.status) return statusColor(edge.status);
+  if (edge.active) return "var(--cds-interactive, #0f62fe)";
+  if (toStatus === "failed" || toStatus === "blocked") return statusColor(toStatus);
+  return "var(--cds-border-strong, #8d8d8d)";
+}
+
+function markerIdFromUseId(id: string, index: number) {
+  return `eth-motion-pipeline-arrow-${id.replace(/[^a-zA-Z0-9_-]/g, "")}-${index}`;
+}
+
+function isActiveStatus(status: MotionFlowNode["status"]) {
+  return status === "running" || status === "in-progress" || status === "active";
+}
+
+function labelForStatus(status: MotionFlowNode["status"]) {
+  switch (status) {
+    case "approval-required":
+      return "Approval required";
+    case "pending-approval":
+      return "Pending approval";
+    case "in-progress":
+      return "In progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return status
+        .split("-")
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+  }
+}
+
+function truncate(value: string, maxLength: number) {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}

package/src/components/ProgressTransition.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { ProgressTransitionProps } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+export function ProgressTransition({
+  from,
+  to,
+  durationMs = 320,
+  children,
+  className,
+  ...props
+}: ProgressTransitionProps) {
+  const reduced = usePrefersReducedMotion();
+  const [current, setCurrent] = React.useState(from ?? to);
+
+  React.useEffect(() => {
+    if (reduced || durationMs <= 0 || typeof window === "undefined") {
+      setCurrent(to);
+      return;
+    }
+    const startValue = from ?? current;
+    const delta = to - startValue;
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - startedAt) / durationMs);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCurrent(startValue + delta * eased);
+      if (progress < 1) frame = window.requestAnimationFrame(tick);
+    };
+    frame = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(frame);
+  }, [to, from, durationMs, reduced]);
+
+  return (
+    <section
+      {...props}
+      className={`eth-motion-progress-transition ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`}
+      data-eth-component="ProgressTransition"
+    >
+      <MotionStyles />
+      {children ? (
+        children(current)
+      ) : (
+        <progress value={current} max={100} aria-label="Progress">
+          {Math.round(current)}%
+        </progress>
+      )}
+    </section>
+  );
+}