import * as React from "react"; import { cn } from "@/lib/utils"; import "./check-mark.css"; export type CheckMarkVariant = "square" | "circle"; export type CheckMarkSize = "sm" | "md" | "lg"; export interface CheckMarkProps extends Omit< React.ComponentProps<"span">, "children" > { variant?: CheckMarkVariant; size?: CheckMarkSize; /** Accessible label. Omit for a decorative mark. */ label?: string; strokeWidth?: number; } const sizeClassNames: Record = { sm: "size-5", md: "size-6", lg: "size-10", }; const DEFAULT_STROKE_WIDTH = 2; const VECTOR_EFFECT = "non-scaling-stroke"; const 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"; const CIRCLE_PATH = "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"; const CHECK_PATH = "M 32.3,51 L 44,62.9 L 68.75,36.5"; const shapePaths: Record = { square: SQUARE_PATH, circle: CIRCLE_PATH, }; export function CheckMark({ variant = "square", size, label, strokeWidth = DEFAULT_STROKE_WIDTH, "aria-label": ariaLabel, "aria-hidden": ariaHidden, className, ...props }: CheckMarkProps) { const accessibleLabel = label ?? ariaLabel; return ( ); }