Checkbox

{
  "state": {
    "isChecked": { "type": "boolean", "initial": false }
  },
  "actions": [
    {
      "name": "toggle",
      "steps": [{ "do": "update", "target": "isChecked", "operation": "toggle" }]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "label",
    "props": {
      "class": { "expr": "lit", "value": "flex items-center gap-2 cursor-pointer" }
    },
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "role": { "expr": "lit", "value": "checkbox" },
          "aria-checked": { "expr": "state", "name": "isChecked" },
          "class": {
            "expr": "cond",
            "if": { "expr": "state", "name": "isChecked" },
            "then": { "expr": "lit", "value": "h-4 w-4 rounded border bg-primary flex items-center justify-center" },
            "else": { "expr": "lit", "value": "h-4 w-4 rounded border bg-background" }
          },
          "onClick": { "action": "toggle" }
        },
        "children": [
          {
            "kind": "if",
            "condition": { "expr": "state", "name": "isChecked" },
            "then": {
              "kind": "element",
              "tag": "span",
              "props": {
                "class": { "expr": "lit", "value": "text-primary-foreground text-xs" }
              },
              "children": [{ "kind": "text", "value": { "expr": "lit", "value": "✓" } }]
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "span",
        "props": {
          "class": { "expr": "lit", "value": "text-sm" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Accept terms" } }]
      }
    ]
  }
}