{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "check-mark",
  "title": "Check Mark",
  "description": "A pure SVG checkmark animation that draws a square or circle before the check.",
  "files": [
    {
      "path": "registry/base/ui/check-mark.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"./check-mark.css\";\n\nexport type CheckMarkVariant = \"square\" | \"circle\";\nexport type CheckMarkSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface CheckMarkProps\n  extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  variant?: CheckMarkVariant;\n  size?: CheckMarkSize;\n  /** Accessible label. Omit for a decorative mark. */\n  label?: string;\n  strokeWidth?: number;\n}\n\nconst sizeClassNames: Record<CheckMarkSize, string> = {\n  sm: \"size-5\",\n  md: \"size-6\",\n  lg: \"size-10\",\n};\n\nconst DEFAULT_STROKE_WIDTH = 2;\nconst VECTOR_EFFECT = \"non-scaling-stroke\";\nconst 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\";\nconst CIRCLE_PATH =\n  \"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\";\nconst CHECK_PATH = \"M 32.3,51 L 44,62.9 L 68.75,36.5\";\n\nconst shapePaths: Record<CheckMarkVariant, string> = {\n  square: SQUARE_PATH,\n  circle: CIRCLE_PATH,\n};\n\nexport function CheckMark({\n  variant = \"square\",\n  size,\n  label,\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n  \"aria-label\": ariaLabel,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: CheckMarkProps) {\n  const accessibleLabel = label ?? ariaLabel;\n\n  return (\n    <span\n      data-slot=\"check-mark\"\n      data-variant={variant}\n      role={accessibleLabel ? \"img\" : undefined}\n      aria-label={accessibleLabel}\n      aria-hidden={accessibleLabel ? undefined : (ariaHidden ?? true)}\n      className={cn(\n        \"check-mark inline-flex shrink-0 items-center justify-center text-foreground\",\n        size ? sizeClassNames[size] : \"w-full max-w-80\",\n        className,\n      )}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        className={size ? \"size-full\" : \"h-auto w-full\"}\n      >\n        <path\n          className=\"check-mark-shape\"\n          d={shapePaths[variant]}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          vectorEffect={VECTOR_EFFECT}\n          pathLength=\"100\"\n          strokeDasharray=\"100 100\"\n          strokeDashoffset=\"100\"\n        />\n        <path\n          className=\"check-mark-checkmark\"\n          d={CHECK_PATH}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          vectorEffect={VECTOR_EFFECT}\n          pathLength=\"100\"\n          strokeDasharray=\"100 100\"\n          strokeDashoffset=\"100\"\n        />\n      </svg>\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/check-mark.tsx"
    },
    {
      "path": "registry/base/ui/check-mark.css",
      "content": ".check-mark {\n  --check-mark-ease: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --check-mark-shape-duration: 600ms;\n  --check-mark-check-duration: 400ms;\n}\n\n.check-mark-shape {\n  animation: check-mark-draw var(--check-mark-shape-duration)\n    var(--check-mark-ease) forwards;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.check-mark-checkmark {\n  animation: check-mark-draw var(--check-mark-check-duration)\n    var(--check-mark-ease) var(--check-mark-shape-duration) forwards;\n}\n\n@keyframes check-mark-draw {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .check-mark-shape,\n  .check-mark-checkmark {\n    animation-duration: 1ms;\n    animation-delay: 0ms;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/ui/check-mark.css"
    }
  ],
  "meta": {
    "tags": [
      "svg",
      "svg-animation",
      "checkbox",
      "circle",
      "success",
      "checkmark",
      "completion",
      "feedback"
    ],
    "effects": [
      "svg-draw",
      "path-draw",
      "completion"
    ]
  },
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}