@patternmode/status 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { easings } from "@howells/motion";
 import { getSizeVariableStyle, joinClassNames } from "@patternmode/system";
 import { useEffect, useReducer, useRef } from "react";
 import { LazyMotion, domMax, m, useReducedMotion } from "motion/react";
@@ -83,21 +84,11 @@ const getTransition = (motion, reducedMotion) => {
 	if (motion === false || motion === "reduced" || reducedMotion) return { duration: .01 };
 	if (motion === "snap") return {
 		duration: .16,
-		ease: [
-			.22,
-			1,
-			.36,
-			1
-		]
+		ease: easings.snappy
 	};
 	return {
 		duration: .28,
-		ease: [
-			.4,
-			0,
-			.2,
-			1
-		]
+		ease: easings.smooth
 	};
 };
 const getFillMotionDuration = (motion, reducedMotion) => {

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 { 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 !== 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.\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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"}

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

@@ -1 +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;AAyO7B,eAAO,MAAM,UAAU,GAAI,sGAaxB,eAAe,gCAgCjB,CAAC"}
+{"version":3,"file":"status-mark.d.ts","sourceRoot":"","sources":["../src/status-mark.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAIV,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAyO7B,eAAO,MAAM,UAAU,GAAI,sGAaxB,eAAe,gCAgCjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternmode/status",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Animated discrete status marks for Patternmode interfaces.",
   "keywords": [
@@ -43,7 +43,8 @@
   },
   "dependencies": {
     "motion": "^12.40.0",
-    "@patternmode/system": "0.2.3"
+    "@howells/motion": "0.1.0",
+    "@patternmode/system": "0.3.0"
   },
   "devDependencies": {
     "@howells/lint": "^0.5.0",