Feature 05 task 2: Core UI primitives (#34)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/ui/Checkbox.tsx

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import styles from './Checkbox.module.css'
+
+export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type'> & {
+  label: ReactNode
+}
+
+// Native checkbox, styled. The wrapping label is the hit area (at least
+// 44×44), so tapping the text toggles it too.
+export function Checkbox({ label, className, ...rest }: CheckboxProps) {
+  return (
+    <label className={[styles.root, className].filter(Boolean).join(' ')}>
+      <input type="checkbox" className={styles.input} {...rest} />
+      <span className={styles.label}>{label}</span>
+    </label>
+  )
+}