{
  "patterns": [
    {
      "id": "destructive-confirm",
      "intent": "Dialog confirming a destructive action",
      "match": [
        "delete confirmation",
        "are you sure",
        "destructive dialog",
        "confirm delete"
      ],
      "compose": {
        "component": "Dialog",
        "slots": {
          "title": [
            "{content:title}"
          ],
          "body": [
            "{content:consequence}"
          ],
          "footer": [
            {
              "component": "Button",
              "props": {
                "variant": "ghost",
                "size": "{param:size}"
              },
              "content": "cancel-label"
            },
            {
              "component": "Button",
              "props": {
                "variant": "danger",
                "size": "{param:size}"
              },
              "content": "confirm-label"
            }
          ]
        }
      },
      "parameters": [
        {
          "key": "size",
          "ask": "Button size?",
          "options": [
            32,
            40
          ],
          "default": 32
        }
      ],
      "content": {
        "title": "<Delete the object?>",
        "consequence": "<what is permanently lost>",
        "cancel-label": "Cancel",
        "confirm-label": "<verb the object>"
      },
      "gaps": [],
      "blocked": false,
      "preset": "<Dialog\n  footer={<>\n    <Button size={32} variant=\"ghost\">Cancel</Button>\n    <Button size={32} variant=\"danger\"><verb the object></Button>\n  </>}\n  title=\"<Delete the object?>\"\n>\n  <what is permanently lost>\n</Dialog>\n"
    },
    {
      "id": "filter-toolbar",
      "intent": "Toolbar of filter controls: search, category select, active-filter tags",
      "match": [
        "filter toolbar",
        "filter bar",
        "search and filter",
        "faceted filters"
      ],
      "compose": {
        "component": "Toolbar",
        "slots": {
          "body": [
            {
              "component": "Input"
            },
            {
              "component": "Select"
            },
            {
              "component": "Tag",
              "content": "example-filter"
            }
          ]
        }
      },
      "parameters": [],
      "content": {
        "example-filter": "<active filter>"
      },
      "gaps": [],
      "blocked": false,
      "preset": "<Toolbar>\n  <Input />\n  <Select />\n  <Tag><active filter></Tag>\n</Toolbar>\n"
    },
    {
      "id": "settings-form-row",
      "intent": "Labeled settings row: a self-labeled control with a group label and helper text",
      "match": [
        "settings row",
        "form row",
        "labeled switch",
        "preference toggle",
        "settings form"
      ],
      "compose": {
        "component": "Field",
        "props": {
          "group": true
        },
        "slots": {
          "label": [
            "{content:row-label}"
          ],
          "body": [
            {
              "component": "Switch",
              "content": "control-label"
            }
          ],
          "description": [
            "{content:row-description}"
          ]
        }
      },
      "parameters": [],
      "content": {
        "row-label": "<setting name>",
        "control-label": "<what turning it on does>",
        "row-description": "<one-line consequence of the setting>"
      },
      "gaps": [],
      "blocked": false,
      "preset": "<Field\n  description=\"<one-line consequence of the setting>\"\n  group={true}\n  label=\"<setting name>\"\n>\n  <Switch><what turning it on does></Switch>\n</Field>\n"
    }
  ]
}