feat: add keroma

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Check, Minus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked?: boolean | 'indeterminate'
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+    const isChecked = checked === true
+    const isIndeterminate = checked === 'indeterminate'
+    return (
+      <button
+        type="button"
+        role="checkbox"
+        ref={ref}
+        aria-checked={isIndeterminate ? 'mixed' : isChecked}
+        disabled={disabled}
+        className={cn(
+          'peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          isChecked || isIndeterminate ? 'bg-primary text-primary-foreground' : 'bg-background',
+          className
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (disabled) return
+          onCheckedChange?.(!isChecked)
+        }}
+        {...props}
+      >
+        {isIndeterminate ? <Minus className="size-2.5" /> : isChecked ? <Check className="size-2.5" /> : null}
+      </button>
+    )
+  }
+)
+Checkbox.displayName = 'Checkbox'
+
+export { Checkbox }