@patternmode/status 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @patternmode/status
+
+Animated discrete progress marks for React.
+
+```tsx
+import { StatusMark } from "@patternmode/status";
+import "@patternmode/status/styles.css";
+
+export function Example() {
+  return (
+    <div>
+      <StatusMark value={75} label="Almost complete" color="#315c4b" trackColor="#edeae2" />
+      <StatusMark status="null" label="Not measured yet" />
+    </div>
+  );
+}
+```
+
+`StatusMark` is for compact, discrete progress communication: null, empty,
+quarter, half, three-quarter, and full. Numeric `value` props are clamped from
+`0` to `100` and snapped to the nearest quarter step.
+
+Use `status="null"` when progress is explicitly not yet known or measured. Null
+progress is distinct from `status="empty"` or `value={0}`, which represent known
+zero progress.
+
+The default `variant="fill"` renders a filled progress mark. Use
+`variant="border"` for an outline progress arc. `color` controls active progress,
+while `trackColor` controls inactive and placeholder structure.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { StatusMark } from "./status-mark";
+export { STATUS_MARK_MOTIONS, STATUS_MARK_PROGRESS_STEPS, STATUS_MARK_PROGRESS_VALUES, STATUS_MARK_STATUSES, STATUS_MARK_TONES, STATUS_MARK_VARIANTS, resolveStatusProgress, type ResolvedStatusProgress, type StatusMarkMotion, type StatusMarkProps, type StatusMarkProgressStep, type StatusMarkProgressValue, type StatusMarkStatus, type StatusMarkTone, type StatusMarkVariant, } from "./status-mark-types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC1B,2BAA2B,EAC3B,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,269 @@
+import { getSizeVariableStyle, joinClassNames } from "@patternmode/system";
+import { useEffect, useReducer, useRef } from "react";
+import { LazyMotion, domMax, m, useReducedMotion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/status-mark-types.ts
+const STATUS_MARK_PROGRESS_STEPS = [
+	"null",
+	"empty",
+	"quarter",
+	"half",
+	"three-quarter",
+	"full"
+];
+const STATUS_MARK_STATUSES = STATUS_MARK_PROGRESS_STEPS;
+const STATUS_MARK_PROGRESS_VALUES = [
+	0,
+	25,
+	50,
+	75,
+	100
+];
+const STATUS_MARK_TONES = [
+	"neutral",
+	"accent",
+	"muted"
+];
+const STATUS_MARK_VARIANTS = ["fill", "border"];
+const STATUS_MARK_MOTIONS = [
+	"smooth",
+	"snap",
+	"reduced"
+];
+const STEP_PROGRESS = {
+	empty: 0,
+	full: 100,
+	half: 50,
+	quarter: 25,
+	"three-quarter": 75
+};
+const PROGRESS_STEP = {
+	0: "empty",
+	100: "full",
+	25: "quarter",
+	50: "half",
+	75: "three-quarter"
+};
+const snapProgress = (value) => {
+	if (value === void 0 || Number.isNaN(value)) return 0;
+	return Math.round(Math.min(100, Math.max(0, value)) / 25) * 25;
+};
+/** Resolves named or numeric progress input into a discrete StatusMark step. */
+const resolveStatusProgress = ({ status, value }) => {
+	if (status === "null") return {
+		progress: null,
+		status
+	};
+	if (status) return {
+		progress: STEP_PROGRESS[status],
+		status
+	};
+	const progress = snapProgress(value);
+	return {
+		progress,
+		status: PROGRESS_STEP[progress]
+	};
+};
+//#endregion
+//#region src/status-mark.tsx
+const STATUS_MARK_RADIUS = 8;
+const BORDERLESS_STATUS_MARK_RADIUS = 8.9;
+const STATUS_MARK_CENTER = 12;
+const STATUS_MARK_START_ANGLE = -90;
+const STATUS_MARK_FULL_PROGRESS = 100;
+const STATUS_SNAP_DURATION_MS = 160;
+const STATUS_SMOOTH_DURATION_MS = 280;
+const getTransition = (motion, reducedMotion) => {
+	if (motion === false || motion === "reduced" || reducedMotion) return { duration: .01 };
+	if (motion === "snap") return {
+		duration: .16,
+		ease: [
+			.22,
+			1,
+			.36,
+			1
+		]
+	};
+	return {
+		duration: .28,
+		ease: [
+			.4,
+			0,
+			.2,
+			1
+		]
+	};
+};
+const getFillMotionDuration = (motion, reducedMotion) => {
+	if (motion === false || motion === "reduced" || reducedMotion) return 0;
+	return motion === "snap" ? STATUS_SNAP_DURATION_MS : STATUS_SMOOTH_DURATION_MS;
+};
+const easeFillProgress = (progress) => {
+	if (progress < .5) return 4 * progress * progress * progress;
+	return 1 - (-2 * progress + 2) ** 3 / 2;
+};
+const setProgress = (_current, next) => next;
+const getFillPath = (progress, radius) => {
+	if (progress <= 0) return `M${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER}`;
+	if (progress >= 99.9) {
+		const diameter = radius * 2;
+		return [
+			`M${STATUS_MARK_CENTER - radius} ${STATUS_MARK_CENTER}`,
+			`a${radius} ${radius} 0 1 0 ${diameter} 0`,
+			`a${radius} ${radius} 0 1 0 -${diameter} 0`
+		].join(" ");
+	}
+	const radians = (STATUS_MARK_START_ANGLE + 360 * progress / STATUS_MARK_FULL_PROGRESS) * Math.PI / 180;
+	const x = Number((STATUS_MARK_CENTER + radius * Math.cos(radians)).toFixed(3));
+	const y = Number((STATUS_MARK_CENTER + radius * Math.sin(radians)).toFixed(3));
+	const largeArcFlag = progress > 50 ? 1 : 0;
+	return [
+		`M${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER}`,
+		`L${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER - radius}`,
+		`A${radius} ${radius} 0 ${largeArcFlag} 1 ${x} ${y}`,
+		"Z"
+	].join(" ");
+};
+const getRootStyle = ({ color, size = "base", style, trackColor }) => {
+	const rootStyle = {
+		...getSizeVariableStyle(size, "--patternmode-status-size"),
+		...style
+	};
+	if (color) rootStyle["--patternmode-status-color"] = color;
+	if (trackColor) rootStyle["--patternmode-status-track"] = trackColor;
+	return rootStyle;
+};
+const StatusFillSweep = ({ hasReducedMotion, motion, progress, radius }) => {
+	const animationFrameRef = useRef(null);
+	const renderedProgressRef = useRef(progress);
+	const [renderedProgress, setRenderedProgress] = useReducer(setProgress, progress);
+	useEffect(() => {
+		const duration = getFillMotionDuration(motion, hasReducedMotion);
+		const startProgress = renderedProgressRef.current;
+		const progressDelta = progress - startProgress;
+		if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+		if (duration === 0 || progressDelta === 0) {
+			renderedProgressRef.current = progress;
+			setRenderedProgress(progress);
+			return;
+		}
+		const startTime = performance.now();
+		const tick = (now) => {
+			const elapsed = Math.min((now - startTime) / duration, 1);
+			const nextProgress = startProgress + progressDelta * easeFillProgress(elapsed);
+			renderedProgressRef.current = nextProgress;
+			setRenderedProgress(nextProgress);
+			if (elapsed < 1) {
+				animationFrameRef.current = requestAnimationFrame(tick);
+				return;
+			}
+			renderedProgressRef.current = progress;
+			animationFrameRef.current = null;
+		};
+		animationFrameRef.current = requestAnimationFrame(tick);
+		return () => {
+			if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+		};
+	}, [
+		hasReducedMotion,
+		motion,
+		progress
+	]);
+	return /* @__PURE__ */ jsx("path", {
+		className: "patternmode-status-mark__fill-sweep",
+		d: getFillPath(renderedProgress, radius),
+		"data-testid": "status-mark-fill-sweep"
+	});
+};
+const StatusArc = ({ hasReducedMotion, motion, progress }) => /* @__PURE__ */ jsx(m.circle, {
+	animate: {
+		opacity: progress > 0 ? 1 : 0,
+		pathLength: progress / 100
+	},
+	className: "patternmode-status-mark__arc",
+	cx: "12",
+	cy: "12",
+	initial: false,
+	pathLength: "1",
+	r: "8",
+	transition: getTransition(motion, hasReducedMotion)
+});
+const StatusMarkSvg = ({ hasReducedMotion, motion, state, variant }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	className: "patternmode-status-mark__svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	children: state.status === "null" ? /* @__PURE__ */ jsx("circle", {
+		className: "patternmode-status-mark__track patternmode-status-mark__track--null",
+		cx: "12",
+		cy: "12",
+		"data-testid": "status-mark-null",
+		r: STATUS_MARK_RADIUS
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+		variant === "fill" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+			className: "patternmode-status-mark__disc",
+			cx: "12",
+			cy: "12",
+			"data-testid": "status-mark-fill",
+			r: BORDERLESS_STATUS_MARK_RADIUS
+		}), /* @__PURE__ */ jsx(StatusFillSweep, {
+			hasReducedMotion,
+			motion,
+			progress: state.progress,
+			radius: BORDERLESS_STATUS_MARK_RADIUS
+		})] }) : null,
+		variant === "border" ? /* @__PURE__ */ jsx("circle", {
+			className: "patternmode-status-mark__track",
+			cx: "12",
+			cy: "12",
+			"data-testid": "status-mark-border",
+			r: STATUS_MARK_RADIUS
+		}) : null,
+		variant === "border" ? /* @__PURE__ */ jsx(StatusArc, {
+			hasReducedMotion,
+			motion,
+			progress: state.progress
+		}) : null
+	] })
+});
+const StatusMark = ({ className, color, label, motion = "smooth", size = "base", status, style, tone = "neutral", trackColor, value, variant = "fill", ...props }) => {
+	const reducedMotion = useReducedMotion();
+	const hasReducedMotion = Boolean(reducedMotion);
+	const state = resolveStatusProgress({
+		status,
+		value
+	});
+	const rootStyle = getRootStyle({
+		color,
+		size,
+		style,
+		trackColor
+	});
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": label ? void 0 : true,
+		"aria-label": label,
+		className: joinClassNames("patternmode-status-mark", className),
+		"data-motion": motion === false ? "false" : motion,
+		"data-progress": state.progress ?? "null",
+		"data-slot": "status-mark",
+		"data-status": state.status,
+		"data-tone": tone,
+		"data-variant": variant,
+		role: label ? "img" : void 0,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx(LazyMotion, {
+			features: domMax,
+			children: /* @__PURE__ */ jsx(StatusMarkSvg, {
+				hasReducedMotion,
+				motion,
+				state,
+				variant
+			})
+		})
+	});
+};
+//#endregion
+export { STATUS_MARK_MOTIONS, STATUS_MARK_PROGRESS_STEPS, STATUS_MARK_PROGRESS_VALUES, STATUS_MARK_STATUSES, STATUS_MARK_TONES, STATUS_MARK_VARIANTS, StatusMark, resolveStatusProgress };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/status-mark-types.ts","../src/status-mark.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nexport const STATUS_MARK_PROGRESS_STEPS = [\n  \"null\",\n  \"empty\",\n  \"quarter\",\n  \"half\",\n  \"three-quarter\",\n  \"full\",\n] as const;\n\nexport const STATUS_MARK_STATUSES = STATUS_MARK_PROGRESS_STEPS;\nexport const STATUS_MARK_PROGRESS_VALUES = [0, 25, 50, 75, 100] as const;\nexport const STATUS_MARK_TONES = [\"neutral\", \"accent\", \"muted\"] as const;\nexport const STATUS_MARK_VARIANTS = [\"fill\", \"border\"] as const;\nexport const STATUS_MARK_MOTIONS = [\"smooth\", \"snap\", \"reduced\"] as const;\n\nexport type StatusMarkMotion = (typeof STATUS_MARK_MOTIONS)[number] | false;\nexport type StatusMarkProgressStep = (typeof STATUS_MARK_PROGRESS_STEPS)[number];\nexport type StatusMarkProgressValue = (typeof STATUS_MARK_PROGRESS_VALUES)[number];\nexport type StatusMarkStatus = StatusMarkProgressStep;\nexport type StatusMarkTone = (typeof STATUS_MARK_TONES)[number];\nexport type StatusMarkVariant = (typeof STATUS_MARK_VARIANTS)[number];\n\nexport type ResolvedStatusProgress =\n  | {\n      progress: null;\n      status: \"null\";\n    }\n  | {\n      progress: StatusMarkProgressValue;\n      status: Exclude<StatusMarkProgressStep, \"null\">;\n    };\n\nexport interface StatusMarkProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /**\n   * Active progress color. Overrides the selected visual `tone` when supplied.\n   */\n  color?: string;\n  /**\n   * Accessible label for the visual state. Omit only when adjacent text already\n   * names the same progress and the mark should be decorative.\n   */\n  label?: string;\n  /**\n   * Transition preset for movement between progress steps.\n   *\n   * Default `\"smooth\"`.\n   */\n  motion?: StatusMarkMotion;\n  /**\n   * Named discrete progress step. Use `\"null\"` only when progress is explicitly\n   * not yet known or measured.\n   */\n  status?: StatusMarkProgressStep;\n  /**\n   * Size token used for the mark dimensions.\n   *\n   * Default `\"base\"`.\n   */\n  size?: \"2xl\" | \"2xs\" | \"3xl\" | \"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\";\n  /**\n   * Visual emphasis treatment. Tone changes color only; progress shape carries\n   * meaning.\n   *\n   * Default `\"neutral\"`.\n   */\n  tone?: StatusMarkTone;\n  /**\n   * Color used for inactive track or placeholder structure.\n   */\n  trackColor?: string;\n  /**\n   * Numeric progress input. Values are clamped from 0 to 100 and snapped to the\n   * nearest discrete visual step: 0, 25, 50, 75, or 100.\n   */\n  value?: number;\n  /**\n   * Visual treatment for known progress. Null progress renders the same dashed\n   * placeholder in every variant.\n   *\n   * Default `\"fill\"`.\n   */\n  variant?: StatusMarkVariant;\n}\n\nconst STEP_PROGRESS: Record<Exclude<StatusMarkProgressStep, \"null\">, StatusMarkProgressValue> = {\n  empty: 0,\n  full: 100,\n  half: 50,\n  quarter: 25,\n  \"three-quarter\": 75,\n};\n\nconst PROGRESS_STEP: Record<StatusMarkProgressValue, Exclude<StatusMarkProgressStep, \"null\">> = {\n  0: \"empty\",\n  100: \"full\",\n  25: \"quarter\",\n  50: \"half\",\n  75: \"three-quarter\",\n};\n\nconst snapProgress = (value: number | undefined): StatusMarkProgressValue => {\n  if (value === undefined || Number.isNaN(value)) {\n    return 0;\n  }\n\n  const clamped = Math.min(100, Math.max(0, value));\n  return (Math.round(clamped / 25) * 25) as StatusMarkProgressValue;\n};\n\n/** Resolves named or numeric progress input into a discrete StatusMark step. */\nexport const resolveStatusProgress = ({\n  status,\n  value,\n}: Pick<StatusMarkProps, \"status\" | \"value\">): ResolvedStatusProgress => {\n  if (status === \"null\") {\n    return {\n      progress: null,\n      status,\n    };\n  }\n\n  if (status) {\n    return {\n      progress: STEP_PROGRESS[status],\n      status,\n    };\n  }\n\n  const progress = snapProgress(value);\n  return {\n    progress,\n    status: PROGRESS_STEP[progress],\n  };\n};\n","\"use client\";\n\nimport { getSizeVariableStyle, joinClassNames } from \"@patternmode/system\";\nimport { useEffect, useReducer, useRef } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { domMax, LazyMotion, m, useReducedMotion } from \"motion/react\";\nimport type { Transition } from \"motion/react\";\n\nimport { resolveStatusProgress } from \"./status-mark-types\";\nimport type {\n  ResolvedStatusProgress,\n  StatusMarkMotion,\n  StatusMarkProgressValue,\n  StatusMarkProps,\n} from \"./status-mark-types\";\n\ntype StatusMarkStyle = CSSProperties & Record<`--${string}`, string | number | undefined>;\ninterface MotionPartProps {\n  hasReducedMotion: boolean;\n  motion: StatusMarkMotion;\n}\n\nconst STATUS_MARK_RADIUS = 8;\nconst STATUS_MARK_STROKE_WIDTH = 1.8;\nconst BORDERLESS_STATUS_MARK_RADIUS = STATUS_MARK_RADIUS + STATUS_MARK_STROKE_WIDTH / 2;\nconst STATUS_MARK_CENTER = 12;\nconst STATUS_MARK_START_ANGLE = -90;\nconst STATUS_MARK_FULL_PROGRESS = 100;\nconst STATUS_SNAP_DURATION_MS = 160;\nconst STATUS_SMOOTH_DURATION_MS = 280;\n\nconst getTransition = (motion: StatusMarkMotion, reducedMotion: boolean): Transition => {\n  if (motion === false || motion === \"reduced\" || reducedMotion) {\n    return { duration: 0.01 };\n  }\n\n  if (motion === \"snap\") {\n    return { duration: 0.16, ease: [0.22, 1, 0.36, 1] as const };\n  }\n\n  return { duration: 0.28, ease: [0.4, 0, 0.2, 1] as const };\n};\n\nconst getFillMotionDuration = (motion: StatusMarkMotion, reducedMotion: boolean) => {\n  if (motion === false || motion === \"reduced\" || reducedMotion) {\n    return 0;\n  }\n\n  return motion === \"snap\" ? STATUS_SNAP_DURATION_MS : STATUS_SMOOTH_DURATION_MS;\n};\n\nconst easeFillProgress = (progress: number) => {\n  if (progress < 0.5) {\n    return 4 * progress * progress * progress;\n  }\n\n  return 1 - (-2 * progress + 2) ** 3 / 2;\n};\n\nconst setProgress = (_current: number, next: number) => next;\n\nconst getFillPath = (progress: number, radius: number) => {\n  if (progress <= 0) {\n    return `M${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER}`;\n  }\n\n  if (progress >= 99.9) {\n    const diameter = radius * 2;\n\n    return [\n      `M${STATUS_MARK_CENTER - radius} ${STATUS_MARK_CENTER}`,\n      `a${radius} ${radius} 0 1 0 ${diameter} 0`,\n      `a${radius} ${radius} 0 1 0 -${diameter} 0`,\n    ].join(\" \");\n  }\n\n  const endAngle = STATUS_MARK_START_ANGLE + (360 * progress) / STATUS_MARK_FULL_PROGRESS;\n  const radians = (endAngle * Math.PI) / 180;\n  const x = Number((STATUS_MARK_CENTER + radius * Math.cos(radians)).toFixed(3));\n  const y = Number((STATUS_MARK_CENTER + radius * Math.sin(radians)).toFixed(3));\n  const largeArcFlag = progress > 50 ? 1 : 0;\n\n  return [\n    `M${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER}`,\n    `L${STATUS_MARK_CENTER} ${STATUS_MARK_CENTER - radius}`,\n    `A${radius} ${radius} 0 ${largeArcFlag} 1 ${x} ${y}`,\n    \"Z\",\n  ].join(\" \");\n};\n\nconst getRootStyle = ({\n  color,\n  size = \"base\",\n  style,\n  trackColor,\n}: Pick<StatusMarkProps, \"color\" | \"size\" | \"style\" | \"trackColor\">) => {\n  const rootStyle: StatusMarkStyle = {\n    ...getSizeVariableStyle(size, \"--patternmode-status-size\"),\n    ...style,\n  };\n\n  if (color) {\n    rootStyle[\"--patternmode-status-color\"] = color;\n  }\n\n  if (trackColor) {\n    rootStyle[\"--patternmode-status-track\"] = trackColor;\n  }\n\n  return rootStyle;\n};\n\nconst StatusFillSweep = ({\n  hasReducedMotion,\n  motion,\n  progress,\n  radius,\n}: MotionPartProps & { progress: StatusMarkProgressValue; radius: number }) => {\n  const animationFrameRef = useRef<number | null>(null);\n  const renderedProgressRef = useRef<number>(progress);\n  const [renderedProgress, setRenderedProgress] = useReducer(setProgress, progress);\n\n  useEffect(() => {\n    const duration = getFillMotionDuration(motion, hasReducedMotion);\n    const startProgress = renderedProgressRef.current;\n    const progressDelta = progress - startProgress;\n\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n\n    if (duration === 0 || progressDelta === 0) {\n      renderedProgressRef.current = progress;\n      setRenderedProgress(progress);\n      return;\n    }\n\n    const startTime = performance.now();\n\n    const tick = (now: number) => {\n      const elapsed = Math.min((now - startTime) / duration, 1);\n      const nextProgress = startProgress + progressDelta * easeFillProgress(elapsed);\n\n      renderedProgressRef.current = nextProgress;\n      setRenderedProgress(nextProgress);\n\n      if (elapsed < 1) {\n        animationFrameRef.current = requestAnimationFrame(tick);\n        return;\n      }\n\n      renderedProgressRef.current = progress;\n      animationFrameRef.current = null;\n    };\n\n    animationFrameRef.current = requestAnimationFrame(tick);\n\n    return () => {\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [hasReducedMotion, motion, progress]);\n\n  return (\n    <path\n      className=\"patternmode-status-mark__fill-sweep\"\n      d={getFillPath(renderedProgress, radius)}\n      data-testid=\"status-mark-fill-sweep\"\n    />\n  );\n};\n\nconst StatusArc = ({\n  hasReducedMotion,\n  motion,\n  progress,\n}: MotionPartProps & { progress: StatusMarkProgressValue }) => (\n  <m.circle\n    animate={{ opacity: progress > 0 ? 1 : 0, pathLength: progress / 100 }}\n    className=\"patternmode-status-mark__arc\"\n    cx=\"12\"\n    cy=\"12\"\n    initial={false}\n    pathLength=\"1\"\n    r=\"8\"\n    transition={getTransition(motion, hasReducedMotion)}\n  />\n);\n\nconst StatusMarkSvg = ({\n  hasReducedMotion,\n  motion,\n  state,\n  variant,\n}: MotionPartProps & {\n  state: ResolvedStatusProgress;\n  variant: NonNullable<StatusMarkProps[\"variant\"]>;\n}) => (\n  <svg aria-hidden=\"true\" className=\"patternmode-status-mark__svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n    {state.status === \"null\" ? (\n      <circle\n        className=\"patternmode-status-mark__track patternmode-status-mark__track--null\"\n        cx=\"12\"\n        cy=\"12\"\n        data-testid=\"status-mark-null\"\n        r={STATUS_MARK_RADIUS}\n      />\n    ) : (\n      <>\n        {variant === \"fill\" ? (\n          <>\n            <circle\n              className=\"patternmode-status-mark__disc\"\n              cx=\"12\"\n              cy=\"12\"\n              data-testid=\"status-mark-fill\"\n              r={BORDERLESS_STATUS_MARK_RADIUS}\n            />\n            <StatusFillSweep\n              hasReducedMotion={hasReducedMotion}\n              motion={motion}\n              progress={state.progress}\n              radius={BORDERLESS_STATUS_MARK_RADIUS}\n            />\n          </>\n        ) : null}\n        {variant === \"border\" ? (\n          <circle\n            className=\"patternmode-status-mark__track\"\n            cx=\"12\"\n            cy=\"12\"\n            data-testid=\"status-mark-border\"\n            r={STATUS_MARK_RADIUS}\n          />\n        ) : null}\n        {variant === \"border\" ? (\n          <StatusArc\n            hasReducedMotion={hasReducedMotion}\n            motion={motion}\n            progress={state.progress}\n          />\n        ) : null}\n      </>\n    )}\n  </svg>\n);\n\nexport const StatusMark = ({\n  className,\n  color,\n  label,\n  motion = \"smooth\",\n  size = \"base\",\n  status,\n  style,\n  tone = \"neutral\",\n  trackColor,\n  value,\n  variant = \"fill\",\n  ...props\n}: StatusMarkProps) => {\n  const reducedMotion = useReducedMotion();\n  const hasReducedMotion = Boolean(reducedMotion);\n  const state = resolveStatusProgress({ status, value });\n  const rootStyle = getRootStyle({ color, size, style, trackColor });\n\n  return (\n    <span\n      {...props}\n      aria-hidden={label ? undefined : true}\n      aria-label={label}\n      className={joinClassNames(\"patternmode-status-mark\", className)}\n      data-motion={motion === false ? \"false\" : motion}\n      data-progress={state.progress ?? \"null\"}\n      data-slot=\"status-mark\"\n      data-status={state.status}\n      data-tone={tone}\n      data-variant={variant}\n      role={label ? \"img\" : undefined}\n      style={rootStyle}\n    >\n      <LazyMotion features={domMax}>\n        <StatusMarkSvg\n          hasReducedMotion={hasReducedMotion}\n          motion={motion}\n          state={state}\n          variant={variant}\n        />\n      </LazyMotion>\n    </span>\n  );\n};\n"],"mappings":"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"}

package/dist/status-mark-types.d.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes } from "react";
+export declare const STATUS_MARK_PROGRESS_STEPS: readonly ["null", "empty", "quarter", "half", "three-quarter", "full"];
+export declare const STATUS_MARK_STATUSES: readonly ["null", "empty", "quarter", "half", "three-quarter", "full"];
+export declare const STATUS_MARK_PROGRESS_VALUES: readonly [0, 25, 50, 75, 100];
+export declare const STATUS_MARK_TONES: readonly ["neutral", "accent", "muted"];
+export declare const STATUS_MARK_VARIANTS: readonly ["fill", "border"];
+export declare const STATUS_MARK_MOTIONS: readonly ["smooth", "snap", "reduced"];
+export type StatusMarkMotion = (typeof STATUS_MARK_MOTIONS)[number] | false;
+export type StatusMarkProgressStep = (typeof STATUS_MARK_PROGRESS_STEPS)[number];
+export type StatusMarkProgressValue = (typeof STATUS_MARK_PROGRESS_VALUES)[number];
+export type StatusMarkStatus = StatusMarkProgressStep;
+export type StatusMarkTone = (typeof STATUS_MARK_TONES)[number];
+export type StatusMarkVariant = (typeof STATUS_MARK_VARIANTS)[number];
+export type ResolvedStatusProgress = {
+    progress: null;
+    status: "null";
+} | {
+    progress: StatusMarkProgressValue;
+    status: Exclude<StatusMarkProgressStep, "null">;
+};
+export interface StatusMarkProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Active progress color. Overrides the selected visual `tone` when supplied.
+     */
+    color?: string;
+    /**
+     * Accessible label for the visual state. Omit only when adjacent text already
+     * names the same progress and the mark should be decorative.
+     */
+    label?: string;
+    /**
+     * Transition preset for movement between progress steps.
+     *
+     * Default `"smooth"`.
+     */
+    motion?: StatusMarkMotion;
+    /**
+     * Named discrete progress step. Use `"null"` only when progress is explicitly
+     * not yet known or measured.
+     */
+    status?: StatusMarkProgressStep;
+    /**
+     * Size token used for the mark dimensions.
+     *
+     * Default `"base"`.
+     */
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs";
+    /**
+     * Visual emphasis treatment. Tone changes color only; progress shape carries
+     * meaning.
+     *
+     * Default `"neutral"`.
+     */
+    tone?: StatusMarkTone;
+    /**
+     * Color used for inactive track or placeholder structure.
+     */
+    trackColor?: string;
+    /**
+     * Numeric progress input. Values are clamped from 0 to 100 and snapped to the
+     * nearest discrete visual step: 0, 25, 50, 75, or 100.
+     */
+    value?: number;
+    /**
+     * Visual treatment for known progress. Null progress renders the same dashed
+     * placeholder in every variant.
+     *
+     * Default `"fill"`.
+     */
+    variant?: StatusMarkVariant;
+}
+/** Resolves named or numeric progress input into a discrete StatusMark step. */
+export declare const resolveStatusProgress: ({ status, value, }: Pick<StatusMarkProps, "status" | "value">) => ResolvedStatusProgress;
+//# sourceMappingURL=status-mark-types.d.ts.map

package/dist/status-mark-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-mark-types.d.ts","sourceRoot":"","sources":["../src/status-mark-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,0BAA0B,wEAO7B,CAAC;AAEX,eAAO,MAAM,oBAAoB,wEAA6B,CAAC;AAC/D,eAAO,MAAM,2BAA2B,+BAAgC,CAAC;AACzE,eAAO,MAAM,iBAAiB,yCAA0C,CAAC;AACzE,eAAO,MAAM,oBAAoB,6BAA8B,CAAC;AAChE,eAAO,MAAM,mBAAmB,wCAAyC,CAAC;AAE1E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;AAC5E,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AACjF,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,sBAAsB,GAC9B;IACE,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IACE,QAAQ,EAAE,uBAAuB,CAAC;IAClC,MAAM,EAAE,OAAO,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;CACjD,CAAC;AAEN,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACxF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAClE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AA2BD,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,GAAI,oBAGnC,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,OAAO,CAAC,KAAG,sBAoB9C,CAAC"}

package/dist/status-mark.d.ts

@@ -0,0 +1,3 @@
+import type { StatusMarkProps } from "./status-mark-types";
+export declare const StatusMark: ({ className, color, label, motion, size, status, style, tone, trackColor, value, variant, ...props }: StatusMarkProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=status-mark.d.ts.map

package/dist/status-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-mark.d.ts","sourceRoot":"","sources":["../src/status-mark.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAIV,eAAe,EAChB,MAAM,qBAAqB,CAAC;AA0O7B,eAAO,MAAM,UAAU,GAAI,sGAaxB,eAAe,4CA+BjB,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+@layer components{.patternmode-status-mark{--patternmode-status-size:2rem;--patternmode-status-color:oklch(29% .018 92);--patternmode-status-track:oklch(90% .012 88);color:var(--patternmode-status-color);height:var(--patternmode-status-size);vertical-align:middle;width:var(--patternmode-status-size);justify-content:center;align-items:center;line-height:0;display:inline-flex;position:relative}.patternmode-status-mark[data-tone=accent]{--patternmode-status-color:var(--accent,#315c4b);--patternmode-status-track:color-mix(in oklch, var(--patternmode-status-color) 12%, white)}.patternmode-status-mark[data-tone=muted]{--patternmode-status-color:var(--muted,#77756d);--patternmode-status-track:color-mix(in oklch, var(--patternmode-status-color) 12%, white)}.patternmode-status-mark__svg{width:100%;height:100%;display:block;overflow:visible}.patternmode-status-mark__track,.patternmode-status-mark__arc{stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px}.patternmode-status-mark__disc{fill:var(--patternmode-status-track)}.patternmode-status-mark__fill-sweep{fill:currentColor}.patternmode-status-mark__track{fill:none;stroke:var(--patternmode-status-track)}.patternmode-status-mark__track--null{stroke-dasharray:2 2.5}.patternmode-status-mark__arc{stroke:currentColor;transform-origin:12px 12px;transform:rotate(-90deg)}}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@patternmode/status",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Animated discrete status marks for Patternmode interfaces.",
+  "keywords": [
+    "animation",
+    "component",
+    "indicator",
+    "patternmode",
+    "progress",
+    "react",
+    "status"
+  ],
+  "homepage": "https://github.com/howells/patternmode/tree/main/packages/status#readme",
+  "bugs": {
+    "url": "https://github.com/howells/patternmode/issues"
+  },
+  "license": "MIT",
+  "author": "Daniel Howells",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/howells/patternmode.git",
+    "directory": "packages/status"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown && tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist --noEmit false && pnpm build:styles",
+    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "clean": "rm -rf dist .turbo",
+    "dev": "concurrently \"pnpm dev:js\" \"pnpm dev:types\" \"pnpm dev:styles\"",
+    "dev:js": "tsdown --watch",
+    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+    "dev:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist --noEmit false --watch --preserveWatchOutput",
+    "lint": "howells-ox-check .",
+    "lint:fix": "howells-ox-fix .",
+    "prepack": "pnpm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@patternmode/system": "workspace:*",
+    "motion": "^12.38.0"
+  },
+  "devDependencies": {
+    "@howells/lint": "^0.2.1",
+    "@howells/typescript-config": "^0.1.2",
+    "@tailwindcss/cli": "^4.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "concurrently": "^9.2.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.6"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}