Checkbox

1"use client";
2
3import * as React from "react";
4import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
5
6import { cn } from "@/lib/utils";
7
8// strokeDasharray 22 matches this path's computed length (~20px, rounded up for a clean draw-on).
9function CheckmarkIcon({ className }: { className?: string }) {
10  return (
11    <svg
12      viewBox="0 0 24 24"
13      fill="none"
14      stroke="currentColor"
15      strokeWidth={2.5}
16      strokeLinecap="round"
17      strokeLinejoin="round"
18      className={cn(
19        // Crossfade: visible when checked (not indeterminate), hidden when indeterminate
20        "not-in-data-indeterminate:scale-100 not-in-data-indeterminate:opacity-100",
21        "scale-90 opacity-0",
22        "ease-out-expo transition-[opacity,filter,transform,scale] duration-200 motion-reduce:transition-none",
23        // Start hidden on mount for enter animation
24        "in-data-starting-style:scale-90 in-data-starting-style:opacity-0",
25        // Subtle blur during indeterminate crossfade
26        "in-data-indeterminate:blur-[2px]",
27        className,
28      )}
29    >
30      <path
31        d="M5 14L8.5 17.5L19 6.5"
32        style={{
33          strokeDasharray: 22,
34        }}
35        className="ease-out-expo transition-[stroke-dashoffset] duration-200 not-in-data-indeterminate:delay-15 not-in-data-indeterminate:[stroke-dashoffset:0] in-data-indeterminate:[stroke-dashoffset:22] in-data-starting-style:[stroke-dashoffset:22] motion-reduce:transition-none"
36      />
37    </svg>
38  );
39}
40
41// strokeDasharray 16 = exact length of the M20,12 L4,12 segment.
42function MinusIcon({ className }: { className?: string }) {
43  return (
44    <svg
45      viewBox="0 0 24 24"
46      fill="none"
47      stroke="currentColor"
48      strokeWidth={2.5}
49      strokeLinecap="round"
50      strokeLinejoin="round"
51      className={cn(
52        // Crossfade: visible when indeterminate, hidden when checked
53        "in-data-indeterminate:scale-100 in-data-indeterminate:opacity-100",
54        "scale-90 opacity-0",
55        "ease-out-expo transition-[opacity,filter,transform,scale] duration-200 motion-reduce:transition-none",
56        // Start hidden on mount for enter animation
57        "in-data-starting-style:scale-90 in-data-starting-style:opacity-0",
58        // Subtle blur when transitioning away from indeterminate
59        "not-in-data-indeterminate:blur-[2px]",
60        className,
61      )}
62    >
63      <path
64        d="M20 12L4 12"
65// … truncated