{
  "name": "date-range-picker",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n    <header>\n      <h3>Select date range</h3>\n    </header>\n    <section>\n      <col-ui gap=\"3\">\n        <row-ui gap=\"2\" wrap>\n          <button-ui text=\"Today\" variant=\"ghost\" size=\"sm\"></button-ui>\n          <button-ui text=\"Last 7 days\" variant=\"outline\" size=\"sm\"></button-ui>\n          <button-ui text=\"Last 30 days\" variant=\"ghost\" size=\"sm\"></button-ui>\n          <button-ui text=\"This month\" variant=\"ghost\" size=\"sm\"></button-ui>\n          <button-ui text=\"This quarter\" variant=\"ghost\" size=\"sm\"></button-ui>\n        </row-ui>\n        <calendar-picker-ui></calendar-picker-ui>\n      </col-ui>\n    </section>\n    <footer>\n      <row-ui gap=\"2\" justify=\"flex-end\">\n        <button-ui text=\"Cancel\" variant=\"ghost\"></button-ui>\n        <button-ui text=\"Apply\" variant=\"primary\"></button-ui>\n      </row-ui>\n    </footer>\n  </card-ui>",
  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Date range picker with calendar, preset options like last 7 days and this month, and apply/cancel buttons.",
    "keywords": [
      "date",
      "range",
      "picker",
      "calendar",
      "preset",
      "options",
      "last",
      "7",
      "days",
      "this",
      "month",
      "date-range-picker",
      "preset-options",
      "date-picker",
      "calendar-picker",
      "apply",
      "cancel"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Select date range"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "size": "sm",
      "text": "Today",
      "variant": "ghost"
    },
    {
      "id": "button-2",
      "component": "Button",
      "size": "sm",
      "text": "Last 7 days",
      "variant": "outline"
    },
    {
      "id": "button-3",
      "component": "Button",
      "size": "sm",
      "text": "Last 30 days",
      "variant": "ghost"
    },
    {
      "id": "button-4",
      "component": "Button",
      "size": "sm",
      "text": "This month",
      "variant": "ghost"
    },
    {
      "id": "button-5",
      "component": "Button",
      "size": "sm",
      "text": "This quarter",
      "variant": "ghost"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "wrap": true,
      "children": [
        "button",
        "button-2",
        "button-3",
        "button-4",
        "button-5"
      ]
    },
    {
      "id": "calendar-picker",
      "component": "CalendarPicker"
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "row",
        "calendar-picker"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button-6",
      "component": "Button",
      "text": "Cancel",
      "variant": "ghost"
    },
    {
      "id": "button-7",
      "component": "Button",
      "text": "Apply",
      "variant": "primary"
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "justify": "flex-end",
      "children": [
        "button-6",
        "button-7"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row-2"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}