Checkbox

import * as React from "react";
import { Checkbox, Field } from "@/components/ui/layro-checkbox";

/* Checked, unchecked and indeterminate. The select-all row shows the
   third state when some invoices are picked, and each row's label is the
   click target. */

export default function CheckboxDemo() {
  const INVOICES = ["INV-2026-0914", "INV-2026-0814", "INV-2026-0714"];
  const [picked, setPicked] = React.useState<string[]>([INVOICES[0]]);
  const all = picked.length === INVOICES.length ? true : picked.length ? "indeterminate" : false;
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 360 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Download invoices</h2>
        <div className="mb-5" />
        <div className="grid gap-3">
          <Field label="Select all invoices" inline>
            <Checkbox checked={all} onCheckedChange={(v) => setPicked(v === true ? INVOICES : [])} />
          </Field>
          <div className="grid gap-3 border-l border-border pl-4">
            {INVOICES.map((n) => (
              <Field key={n} label={n} inline>
                <Checkbox checked={picked.includes(n)} onCheckedChange={(v) => setPicked((p) => (v === true ? [...p, n] : p.filter((x) => x !== n)))} />
              </Field>
            ))}
          </div>
          <Field label="Email me a copy" inline hint="Sent to the billing contact">
            <Checkbox defaultChecked />
          </Field>
        </div>
      </div>
    </div>
  );
}