チェックリストCheckListExperimental

import * as React from "react";
import { IconAlertTriangle, IconCheck } from "@tabler/icons-react";
import { Badge, CheckList, type CheckListItem } from "@gunjo/ui";

const requiredDocs = [
  { id: "id", label: "本人確認書類（運転免許証等）" },
  { id: "former", label: "転出証明書", description: "前住所地の市区町村が発行" },
  { id: "mynumber", label: "マイナンバーカード / 通知カード" },
  { id: "seal", label: "印鑑（世帯主分）", disabledReason: "オンライン申請では印鑑確認を省略します。" },
];

export function RequiredDocumentCheckList() {
  const [checked, setChecked] = React.useState<Record<string, boolean>>({ id: true });
  const items: CheckListItem[] = requiredDocs.map((doc) => ({
    ...doc,
    checked: Boolean(checked[doc.id]),
    disabled: doc.id === "seal",
    disabledReason: doc.id === "seal" ? doc.disabledReason : undefined,
    trailing: checked[doc.id] ? (
      <Badge variant="success" icon={<IconCheck />}>確認済</Badge>
    ) : (
      <Badge variant="warning" icon={<IconAlertTriangle />}>未確認</Badge>
    ),
  }));
  const done = requiredDocs.filter((doc) => checked[doc.id]).length;

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <CheckList
        items={items}
        onCheckedChange={(id, value) => setChecked((current) => ({ ...current, [id]: value }))}
      />
      <p className="text-xs text-muted-foreground" aria-live="polite">
        必要書類: {done} / {requiredDocs.length} 確認済
      </p>
    </div>
  );
}