Switch

{
  "state": {
    "isEnabled": { "type": "boolean", "initial": false }
  },
  "actions": [
    {
      "name": "toggle",
      "steps": [{ "do": "update", "target": "isEnabled", "operation": "toggle" }]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "button",
    "props": {
      "role": { "expr": "lit", "value": "switch" },
      "aria-checked": { "expr": "state", "name": "isEnabled" },
      "class": {
        "expr": "cond",
        "if": { "expr": "state", "name": "isEnabled" },
        "then": { "expr": "lit", "value": "relative inline-flex h-6 w-11 items-center rounded-full bg-primary" },
        "else": { "expr": "lit", "value": "relative inline-flex h-6 w-11 items-center rounded-full bg-muted" }
      },
      "onClick": { "action": "toggle" }
    },
    "children": [
      {
        "kind": "element",
        "tag": "span",
        "props": {
          "class": {
            "expr": "cond",
            "if": { "expr": "state", "name": "isEnabled" },
            "then": { "expr": "lit", "value": "inline-block h-4 w-4 rounded-full bg-white translate-x-6" },
            "else": { "expr": "lit", "value": "inline-block h-4 w-4 rounded-full bg-white translate-x-1" }
          }
        }
      }
    ]
  }
}