{
  "name": "AgendaList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AgendaList.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Time-grouped list — date bands + per-row content. Designed for\ncalendar / upcoming / agenda surfaces (\"Today\" + \"Tomorrow\" event\ngroups, booking slot listings, activity feeds bucketed by day).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "AgendaList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AgendaRow",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "AgendaTitle",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "AgendaMeta",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DateBand",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "AgendaListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AgendaGroup",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AgendaRowProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AgendaTitleProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AgendaMetaProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "DateBandProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { AgendaList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "time",
      "optional": true,
      "type": "ReactNode",
      "doc": "Time prefix rendered at the left (e.g. `\"9:30am\"`). Mono."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Children — typically `<AgendaTitle>` + `<AgendaMeta>`."
    },
    {
      "name": "to",
      "optional": true,
      "type": "string",
      "doc": "When set, the row renders as `<a href>`."
    },
    {
      "name": "onClick",
      "optional": true,
      "type": "MouseEventHandler<HTMLElement>",
      "doc": "When set (and `to` is not), the row renders as `<button>`."
    },
    {
      "name": "target",
      "optional": true,
      "type": "string",
      "doc": "Optional `target` for the anchor."
    },
    {
      "name": "rel",
      "optional": true,
      "type": "string",
      "doc": "Optional `rel` for the anchor."
    },
    {
      "name": "LinkComponent",
      "optional": true,
      "type": "ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>",
      "doc": "Custom Link component for SPA routing — see SectionCard.md / MiniCardLink.md."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Optional class on the row root."
    }
  ],
  "classesUsed": [
    "agenda-group",
    "agenda-group-head",
    "agenda-group-items",
    "agenda-group-label",
    "agenda-group-meta",
    "agenda-list",
    "agenda-list-empty",
    "agenda-list-item",
    "agenda-row",
    "agenda-row-body",
    "agenda-row-meta",
    "agenda-row-time",
    "agenda-row-title",
    "date-band",
    "date-band-label",
    "date-band-meta",
    "mono"
  ],
  "examples": {
    "react": "<AgendaList\n    groups={[\n      { label: \"Today\",    items: todayEvents },\n      { label: \"Tomorrow\", items: tomorrowEvents },\n    ]}\n    renderItem={(ev) => (\n      <AgendaRow time={fmtTime(ev.start)} to={meetUrl(ev)}>\n        <AgendaTitle>{ev.summary}</AgendaTitle>\n        <AgendaMeta>{ev.location}</AgendaMeta>\n      </AgendaRow>\n    )}\n  />",
    "html": null,
    "css": ".agenda-group {\n  display: flex;\n  flex-direction: column;\n}\n\n.agenda-group-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--s-3) var(--s-4);\n  background: var(--bg-warm);\n  border-top: 1px solid var(--hair-soft);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.agenda-group-items {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.agenda-group-label {\n  font: 600 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-dim);\n}\n\n.agenda-group-meta {\n  font: 400 11px/1 var(--f-mono);\n  color: var(--fg-faint);\n}\n\n.agenda-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.agenda-list-empty {\n  padding: var(--s-5);\n  text-align: center;\n  font-size: 13px;\n  color: var(--fg-dim);\n}\n\n.agenda-list-item {\n  border-top: 1px solid var(--hair-soft);\n}\n\n.agenda-row {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  text-decoration: none;\n  color: var(--fg);\n  background: transparent;\n  border: 0;\n  width: 100%;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  transition: background var(--dur-1) var(--ease);\n}\n\n.agenda-row-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n\n.agenda-row-meta {\n  font: 400 12px/1.3 var(--f-mono);\n  color: var(--fg-dim);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agenda-row-time {\n  font: 500 12px/1.3 var(--f-mono);\n  color: var(--fg-dim);\n  width: 64px;\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.agenda-row-title {\n  font: 500 13.5px/1.3 var(--f-body);\n  color: var(--fg);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-band {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--s-3) var(--s-4);\n  background: var(--bg-warm);\n  border-top: 1px solid var(--hair-soft);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.date-band-label {\n  font: 600 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-dim);\n}\n\n.date-band-meta {\n  font: 400 11px/1 var(--f-mono);\n  color: var(--fg-faint);\n}\n\n.mono { font-family: var(--f-mono); }"
  }
}