UI kit: Checkbox (#145)

frontend/uikit-gallery/src/Checkbox/1. Default.fixture.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Checkbox } from "@liquity2/uikit";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+const options = ["Option 1", "Option 2", "Option 3"];
+
+export default function CheckboxFixture() {
+  return (
+    <div>
+      {options.map((label, index) => (
+        <CheckboxField
+          key={index}
+          label={label}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CheckboxField({ label }: { label: string }) {
+  const [checked, setChecked] = useState(false);
+  const toggle = () => setChecked((c) => !c);
+  return (
+    <Label>
+      <Checkbox
+        checked={checked}
+        onChange={toggle}
+      />
+      {label}
+    </Label>
+  );
+}
+
+function Label({ children }: { children: ReactNode }) {
+  return (
+    <label
+      style={{
+        display: "flex",
+        alignItems: "center",
+        height: 32,
+        gap: 8,
+        cursor: "pointer",
+        userSelect: "none",
+      }}
+    >
+      {children}
+    </label>
+  );
+}

frontend/uikit-gallery/src/Checkbox/2. Disabled.fixture.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Checkbox } from "@liquity2/uikit";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+const options = ["Option 1", "Option 2", "Option 3"];
+
+export default function CheckboxFixture() {
+  return (
+    <div>
+      {options.map((label, index) => (
+        <CheckboxField
+          key={index}
+          label={label}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CheckboxField({ label }: { label: string }) {
+  const [checked, setChecked] = useState(false);
+  const toggle = () => setChecked((c) => !c);
+  return (
+    <Label>
+      <Checkbox
+        disabled={true}
+        checked={checked}
+        onChange={toggle}
+      />
+      {label}
+    </Label>
+  );
+}
+
+function Label({ children }: { children: ReactNode }) {
+  return (
+    <label
+      style={{
+        display: "flex",
+        alignItems: "center",
+        height: 32,
+        gap: 8,
+        cursor: "pointer",
+        userSelect: "none",
+      }}
+    >
+      {children}
+    </label>
+  );
+}

frontend/uikit/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { Radio } from "../Radio/Radio";
+
+type RadioProps = ComponentPropsWithoutRef<typeof Radio>;
+
+export function Checkbox({
+  appearance = "checkbox",
+  ...props
+}:
+  & Omit<RadioProps, "onChange">
+  & {
+    checked: NonNullable<RadioProps["checked"]>;
+    onChange: NonNullable<RadioProps["onChange"]>;
+  })
+{
+  return (
+    <Radio
+      appearance={appearance}
+      {...props}
+    />
+  );
+}