Tabs

{
  "state": {
    "activeTab": { "type": "string", "initial": "tab1" }
  },
  "actions": [
    { "name": "setTab1", "steps": [{ "do": "set", "target": "activeTab", "value": { "expr": "lit", "value": "tab1" } }] },
    { "name": "setTab2", "steps": [{ "do": "set", "target": "activeTab", "value": { "expr": "lit", "value": "tab2" } }] }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": { "role": { "expr": "lit", "value": "tablist" }, "class": { "expr": "lit", "value": "border-b" } },
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "role": { "expr": "lit", "value": "tab" },
          "class": {
            "expr": "cond",
            "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "activeTab" }, "right": { "expr": "lit", "value": "tab1" } },
            "then": { "expr": "lit", "value": "border-b-2 border-primary px-4 py-2 text-sm font-medium" },
            "else": { "expr": "lit", "value": "px-4 py-2 text-sm text-muted-foreground" }
          },
          "onClick": { "action": "setTab1" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Tab 1" } }]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "role": { "expr": "lit", "value": "tab" },
          "class": {
            "expr": "cond",
            "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "activeTab" }, "right": { "expr": "lit", "value": "tab2" } },
            "then": { "expr": "lit", "value": "border-b-2 border-primary px-4 py-2 text-sm font-medium" },
            "else": { "expr": "lit", "value": "px-4 py-2 text-sm text-muted-foreground" }
          },
          "onClick": { "action": "setTab2" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Tab 2" } }]
      }
    ]
  }
}