Check Mark

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import "./check-mark.css";
6 
7export type CheckMarkVariant = "square" | "circle";
8export type CheckMarkSize = "sm" | "md" | "lg";
9 
10export interface CheckMarkProps
11  extends Omit<React.ComponentProps<"span">, "children"> {
12  variant?: CheckMarkVariant;
13  size?: CheckMarkSize;
14  /** Accessible label. Omit for a decorative mark. */
15  label?: string;
16  strokeWidth?: number;
17}
18 
19const sizeClassNames: Record<CheckMarkSize, string> = {
20  sm: "size-5",
21  md: "size-6",
22  lg: "size-10",
23};
24 
25const DEFAULT_STROKE_WIDTH = 2;
26const VECTOR_EFFECT = "non-scaling-stroke";
27const SQUARE_PATH = "M 50,11.5 L 88.5,11.5 L 88.5,88.5 L 11.5,88.5 L 11.5,11.5 Z";
28const CIRCLE_PATH =
29  "M 88.5,50 C 88.5,71.26 71.26,88.5 50,88.5 C 28.74,88.5 11.5,71.26 11.5,50 C 11.5,28.74 28.74,11.5 50,11.5 C 71.26,11.5 88.5,28.74 88.5,50 Z";
30const CHECK_PATH = "M 32.3,51 L 44,62.9 L 68.75,36.5";
31 
32const shapePaths: Record<CheckMarkVariant, string> = {
33  square: SQUARE_PATH,
34  circle: CIRCLE_PATH,
35};
36 
37export function CheckMark({
38  variant = "square",
39  size,
40  label,
41  strokeWidth = DEFAULT_STROKE_WIDTH,
42  "aria-label": ariaLabel,
43  "aria-hidden": ariaHidden,
44  className,
45  ...props
46}: CheckMarkProps) {
47  const accessibleLabel = label ?? ariaLabel;
48 
49  return (
50    <span
51      data-slot="check-mark"
52      data-variant={variant}
53      role={accessibleLabel ? "img" : undefined}
54      aria-label={accessibleLabel}
55      aria-hidden={accessibleLabel ? undefined : (ariaHidden ?? true)}
56      className={cn(
57        "check-mark inline-flex shrink-0 items-center justify-center text-foreground",
58        size ? sizeClassNames[size] : "w-full max-w-80",
59        className,
60      )}
61      {...props}
62    >
63      <svg
64        viewBox="0 0 100 100"
65        aria-hidden="true"
66        className={size ? "size-full" : "h-auto w-full"}
67      >
68        <path
69          className="check-mark-shape"
70          d={shapePaths[variant]}
71          fill="none"
72          stroke="currentColor"
73          strokeWidth={strokeWidth}
74          strokeLinecap="round"
75          strokeLinejoin="round"
76          vectorEffect={VECTOR_EFFECT}
77          pathLength="100"
78          strokeDasharray="100 100"
79          strokeDashoffset="100"
80        />
81        <path
82          className="check-mark-checkmark"
83          d={CHECK_PATH}
84          fill="none"
85          stroke="currentColor"
86          strokeWidth={strokeWidth}
87          strokeLinecap="round"
88          strokeLinejoin="round"
89// … truncated