@patternmode/status 0.2.1 → 0.3.0

package/README.md

@@ -27,3 +27,27 @@ 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.
+
+## Theming
+
+The mark reads its colours from the standard shadcn theme variables — `--ring`
+for `tone="accent"`, `--muted-foreground` for `tone="muted"` — and falls back to
+built-in defaults when the host defines neither.
+
+The inactive track is derived: it is the active colour tinted 12% toward the
+ground the mark sits on. That ground is `--patternmode-status-surface`, which
+resolves from `--background` and falls back to `white`.
+
+A themed UI therefore needs no wiring in either light or dark mode. Set the
+property yourself when the host has no `--background`, or when a mark sits on a
+raised surface rather than the canvas:
+
+```css
+.panel .patternmode-status-mark {
+  --patternmode-status-surface: var(--card);
+}
+```
+
+The track must stay quieter than the arc, so it has to be tinted toward the
+surface behind it — a track tinted toward white on a dark ground outshines the
+arc and every mark reads full. `trackColor` still overrides this per instance.

package/dist/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,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

@@ -1,3 +1,4 @@
+"use client";
 import { easings } from "@howells/motion";
 import { getSizeVariableStyle, joinClassNames } from "@patternmode/system";
 import { useEffect, useReducer, useRef } from "react";
@@ -46,7 +47,7 @@ const PROGRESS_STEP = {
 	75: "three-quarter"
 };
 const snapProgress = (value) => {
-	if (value === void 0 || Number.isNaN(value)) return 0;
+	if (value === void 0) return 0;
 	switch (Math.round(Math.min(100, Math.max(0, value)) / 25) * 25) {
 		case 25: return 25;
 		case 50: return 50;
@@ -65,6 +66,10 @@ const resolveStatusProgress = ({ status, value }) => {
 		progress: STEP_PROGRESS[status],
 		status
 	};
+	if (value !== void 0 && Number.isNaN(value)) return {
+		progress: null,
+		status: "null"
+	};
 	const progress = snapProgress(value);
 	return {
 		progress,

package/dist/index.mjs.map

@@ -1 +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  const snapped = Math.round(clamped / 25) * 25;\n\n  switch (snapped) {\n    case 25: {\n      return 25;\n    }\n    case 50: {\n      return 50;\n    }\n    case 75: {\n      return 75;\n    }\n    case 100: {\n      return 100;\n    }\n    default: {\n      return 0;\n    }\n  }\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 !== undefined) {\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 { easings } from \"@howells/motion\";\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: easings.snappy };\n  }\n\n  return { duration: 0.28, ease: easings.smooth };\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 !== undefined && color !== \"\") {\n    rootStyle[\"--patternmode-status-color\"] = color;\n  }\n\n  if (trackColor !== undefined && 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 cancelFillAnimation = () => {\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n    const duration = getFillMotionDuration(motion, hasReducedMotion);\n    const startProgress = renderedProgressRef.current;\n    const progressDelta = progress - startProgress;\n\n    cancelFillAnimation();\n\n    if (duration === 0 || progressDelta === 0) {\n      renderedProgressRef.current = progress;\n      setRenderedProgress(progress);\n      return cancelFillAnimation;\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 cancelFillAnimation;\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  const hasLabel = label !== undefined && label !== \"\";\n\n  return (\n    <span\n      {...props}\n      aria-hidden={hasLabel ? 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={hasLabel ? \"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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"}
+{"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. `NaN` is treated as\n   * unknown progress, the same as `status=\"null\"`.\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) {\n    return 0;\n  }\n\n  const clamped = Math.min(100, Math.max(0, value));\n  const snapped = Math.round(clamped / 25) * 25;\n\n  switch (snapped) {\n    case 25: {\n      return 25;\n    }\n    case 50: {\n      return 50;\n    }\n    case 75: {\n      return 75;\n    }\n    case 100: {\n      return 100;\n    }\n    default: {\n      return 0;\n    }\n  }\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 !== undefined) {\n    return {\n      progress: STEP_PROGRESS[status],\n      status,\n    };\n  }\n\n  if (value !== undefined && Number.isNaN(value)) {\n    return {\n      progress: null,\n      status: \"null\",\n    };\n  }\n\n  const progress = snapProgress(value);\n  return {\n    progress,\n    status: PROGRESS_STEP[progress],\n  };\n};\n","\"use client\";\n\nimport { easings } from \"@howells/motion\";\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: easings.snappy };\n  }\n\n  return { duration: 0.28, ease: easings.smooth };\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 !== undefined && color !== \"\") {\n    rootStyle[\"--patternmode-status-color\"] = color;\n  }\n\n  if (trackColor !== undefined && 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 cancelFillAnimation = () => {\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n    const duration = getFillMotionDuration(motion, hasReducedMotion);\n    const startProgress = renderedProgressRef.current;\n    const progressDelta = progress - startProgress;\n\n    cancelFillAnimation();\n\n    if (duration === 0 || progressDelta === 0) {\n      renderedProgressRef.current = progress;\n      setRenderedProgress(progress);\n      return cancelFillAnimation;\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 cancelFillAnimation;\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  const hasLabel = label !== undefined && label !== \"\";\n\n  return (\n    <span\n      {...props}\n      aria-hidden={hasLabel ? 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={hasLabel ? \"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

@@ -58,7 +58,8 @@ export interface StatusMarkProps extends Omit<HTMLAttributes<HTMLSpanElement>, "
     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.
+     * nearest discrete visual step: 0, 25, 50, 75, or 100. `NaN` is treated as
+     * unknown progress, the same as `status="null"`.
      */
     value?: number;
     /**

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

@@ -1 +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;AA6CD,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,GAAI,oBAGnC,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,OAAO,CAAC,KAAG,sBAoB9C,CAAC"}
+{"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;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AA6CD,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,GAAI,oBAGnC,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,OAAO,CAAC,KAAG,sBA2B9C,CAAC"}

package/dist/styles.css

@@ -1 +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)}}
+@layer components{.patternmode-status-mark{--patternmode-status-size:2rem;--patternmode-status-color:oklch(29% .018 92);--patternmode-status-surface:var(--background,white);--patternmode-status-track:color-mix(in oklch, var(--patternmode-status-color) 12%, var(--patternmode-status-surface));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(--ring,#315c4b)}.patternmode-status-mark[data-tone=muted]{--patternmode-status-color:var(--muted-foreground,#77756d)}.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

@@ -1,6 +1,6 @@
 {
   "name": "@patternmode/status",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": false,
   "description": "Animated discrete status marks for Patternmode interfaces.",
   "keywords": [
@@ -41,27 +41,41 @@
   "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-check .",
+    "lint:fix": "howells-fix .",
+    "prepack": "pnpm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
-    "motion": "^12.40.0",
-    "@howells/motion": "0.1.0",
-    "@patternmode/system": "0.3.0"
+    "@howells/motion": "workspace:*",
+    "@patternmode/system": "workspace:*",
+    "motion": "catalog:"
   },
   "devDependencies": {
-    "@howells/lint": "^0.5.0",
-    "@howells/typescript-config": "^0.1.6",
+    "@howells/lint": "catalog:",
+    "@howells/typescript-config": "catalog:",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "concurrently": "^9.2.1",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "tailwindcss": "^4.3.0",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:",
     "tsdown": "^0.22.0",
-    "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -69,18 +83,5 @@
   },
   "engines": {
     "node": ">=20"
-  },
-  "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-check .",
-    "lint:fix": "howells-fix .",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
   }
-}
+}