{
  "name": "DateRangePicker",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DateRangePicker.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "date-range-picker",
  "elName": "DateRangePicker",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#date-range-picker",
  "hasLiveDemo": false,
  "description": "Date-range picker with a preset rail + two-month calendar.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "DateRangePicker",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DEFAULT_DATE_RANGE_PRESETS",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DateRangePickerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "DateRange",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DateRangePreset",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { DateRangePicker } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "DateRange",
      "doc": "Currently selected range."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: DateRange) => void",
      "doc": "Fires whenever the range changes (start picked, end picked, preset clicked)."
    },
    {
      "name": "presets",
      "optional": true,
      "type": "DateRangePreset[]",
      "doc": "Preset list shown in the left rail. Defaults to a 6-preset set."
    },
    {
      "name": "minDate",
      "optional": true,
      "type": "Date",
      "doc": "Earliest selectable date."
    },
    {
      "name": "maxDate",
      "optional": true,
      "type": "Date",
      "doc": "Latest selectable date."
    },
    {
      "name": "align",
      "optional": true,
      "type": "\"start\" | \"end\"",
      "doc": "Where the popover aligns relative to the trigger. Default `\"start\"`."
    },
    {
      "name": "locale",
      "optional": true,
      "type": "string",
      "doc": "Locale for the date and month formatting."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Trigger placeholder when no range is selected. Default `\"Select range\"`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the trigger."
    },
    {
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
      "doc": "Optional aria-label for the trigger button."
    }
  ],
  "classesUsed": [
    "date-picker-placeholder",
    "date-picker-trigger",
    "date-picker-trigger-ic",
    "date-range-calendars",
    "date-range-picker",
    "date-range-popover",
    "date-range-preset",
    "date-range-preset-active",
    "date-range-presets",
    "input",
    "popover"
  ],
  "examples": {
    "react": "const [range, setRange] = useState<DateRange>({ from: null, to: null });\n  <DateRangePicker value={range} onChange={setRange} />",
    "html": "<div class=\"date-range-picker\">\n  <button type=\"button\" class=\"date-picker-trigger input\" aria-haspopup=\"dialog\" aria-expanded=\"false\">\n    <span class=\"date-picker-placeholder\">Select range</span>\n    <span aria-hidden=\"true\" class=\"date-picker-trigger-ic\">▾</span>\n  </button>\n</div>",
    "css": ".date-picker-placeholder { color: var(--fg-faint); }\n\n.date-picker-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n  cursor: pointer;\n  background: var(--bg-paper);\n  text-align: left;\n  min-width: 200px;\n}\n\n.date-picker-trigger-ic {\n  font-size: 13px;  /* was 10px — too small to read as a disclosure glyph */\n  color: var(--fg-faint);\n}\n\n.date-range-calendars {\n  display: flex;\n  gap: var(--s-4);\n  padding: var(--s-3);\n}\n\n.date-range-picker {\n  display: inline-flex;\n  flex-direction: column;\n  font-family: var(--f-body);\n}\n\n.date-range-popover {\n  display: flex;\n  align-items: stretch;\n  padding: 0;\n  /* The base `.popover` is pinned `width: 320px` — fine for the single\n     <DatePicker>, but the range popover holds a presets rail plus TWO\n     calendars, so its content overflowed the 320px box and the second\n     month clipped. Size to content instead. */\n  width: max-content;\n  max-width: calc(100vw - var(--s-6));\n}\n\n.date-range-preset {\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  text-align: left;\n  padding: var(--s-2) var(--s-3);\n  border-radius: var(--r-sm);\n  font: 500 13px/1.2 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n}\n\n.date-range-preset-active {\n  background: var(--accent-soft);\n  color: var(--accent-text);\n}\n\n.date-range-presets {\n  display: flex;\n  flex-direction: column;\n  padding: var(--s-3);\n  gap: 2px;\n  border-right: 1px solid var(--hair);\n  min-width: 160px;\n}\n\n.input {\n  display: block; width: 100%;\n  font: 400 14.5px/1.4 var(--f-body);\n  color: var(--fg);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  padding: 10px 14px;\n  transition: border-color var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n  appearance: none; -webkit-appearance: none; -moz-appearance: none;\n}\n\n.popover {\n  position: relative;\n  width: 320px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4);\n  box-shadow: var(--sh-3);\n}"
  }
}