Radio

{
  "state": {
    "selected": { "type": "string", "initial": "option1" }
  },
  "actions": [
    { "name": "selectOption1", "steps": [{ "do": "set", "target": "selected", "value": { "expr": "lit", "value": "option1" } }] },
    { "name": "selectOption2", "steps": [{ "do": "set", "target": "selected", "value": { "expr": "lit", "value": "option2" } }] }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": {
      "role": { "expr": "lit", "value": "radiogroup" },
      "class": { "expr": "lit", "value": "flex flex-col gap-2" }
    },
    "children": [
      {
        "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": "radio" },
              "aria-checked": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "selected" }, "right": { "expr": "lit", "value": "option1" } },
              "class": {
                "expr": "cond",
                "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "selected" }, "right": { "expr": "lit", "value": "option1" } },
                "then": { "expr": "lit", "value": "h-4 w-4 rounded-full border-4 border-primary" },
                "else": { "expr": "lit", "value": "h-4 w-4 rounded-full border-2 border-muted-foreground" }
              },
              "onClick": { "action": "selectOption1" }
            }
          },
          {
            "kind": "element",
            "tag": "span",
            "props": { "class": { "expr": "lit", "value": "text-sm" } },
            "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Option 1" } }]
          }
        ]
      },
      {
        "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": "radio" },
              "aria-checked": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "selected" }, "right": { "expr": "lit", "value": "option2" } },
              "class": {
                "expr": "cond",
                "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "selected" }, "right": { "expr": "lit", "value": "option2" } },
                "then": { "expr": "lit", "value": "h-4 w-4 rounded-full border-4 border-primary" },
                "else": { "expr": "lit", "value": "h-4 w-4 rounded-full border-2 border-muted-foreground" }
              },
              "onClick": { "action": "selectOption2" }
            }
          },
          {
            "kind": "element",
            "tag": "span",
            "props": { "class": { "expr": "lit", "value": "text-sm" } },
            "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Option 2" } }]
          }
        ]
      }
    ]
  }
}