{
  "name": "SessionRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SessionList.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "session-list",
  "elName": "Active sessions",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#session-list",
  "hasLiveDemo": false,
  "description": "A single session row inside `<SessionList>`. Renders device + (optional)\nlocation + last-active timestamp on the left, with a per-session Revoke\nbutton on the right. The current session is marked with `.is-current`,\nan accent-soft background, and a \"Current session\" pill — and never\nshows a Revoke button.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SessionList",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SessionListProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SessionRowProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SessionRow } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "btn",
    "btn-ghost",
    "btn-sm",
    "session-list",
    "session-row",
    "session-row-current-pill",
    "session-row-device",
    "session-row-icon",
    "session-row-meta",
    "session-row-revoke",
    "session-row-text"
  ],
  "examples": {
    "react": "<SessionList aria-label=\"Active sessions\">\n  <SessionRow\n    device=\"MacBook Pro · Chrome\"\n    location=\"Sydney, AU\"\n    lastActive=\"Active now\"\n    current\n  />\n  <SessionRow\n    device=\"iPhone 15 · Safari\"\n    location=\"Sydney, AU\"\n    lastActive=\"2 hours ago\"\n    onRevoke={() => revokeSession(\"iphone\")}\n  />\n</SessionList>",
    "html": "<ul class=\"session-list\" aria-label=\"Active sessions\" style=\"max-width:600px;\">\n  <li class=\"session-row is-current\">\n    <div class=\"session-row-text\">\n      <div class=\"session-row-device\">MacBook Pro · Chrome<span class=\"session-row-current-pill\">Current session</span></div>\n      <div class=\"session-row-meta\"><span>Sydney, AU</span><span>Active now</span></div>\n    </div>\n  </li>\n  <li class=\"session-row\">\n    <div class=\"session-row-text\">\n      <div class=\"session-row-device\">iPhone 15 · Safari</div>\n      <div class=\"session-row-meta\"><span>Sydney, AU</span><span>2 hours ago</span></div>\n    </div>\n    <button type=\"button\" class=\"btn btn-ghost btn-sm session-row-revoke\">Revoke</button>\n  </li>\n  <li class=\"session-row\">\n    <div class=\"session-row-text\">\n      <div class=\"session-row-device\">Windows · Edge</div>\n      <div class=\"session-row-meta\"><span>Melbourne, AU</span><span>3 days ago</span></div>\n    </div>\n    <button type=\"button\" class=\"btn btn-ghost btn-sm session-row-revoke\">Revoke</button>\n  </li>\n</ul>",
    "css": ".btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-ghost {\n  background: transparent;\n  color: var(--fg);\n  border-color: transparent;\n}\n\n.btn-sm { padding: 7px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }\n\n.session-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.session-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n}\n\n.session-row-current-pill {\n  font: 500 10px/1 var(--f-mono);\n  padding: 2px 6px;\n  background: var(--accent);\n  color: var(--paper);\n  border-radius: var(--r-pill);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.session-row-device {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n  flex-wrap: wrap;\n}\n\n.session-row-icon {\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--bg-sunk);\n  border-radius: var(--r-sm);\n  color: var(--fg-dim);\n  flex-shrink: 0;\n}\n\n.session-row-meta {\n  display: flex;\n  gap: var(--s-3);\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-dim);\n}\n\n.session-row-revoke {\n  color: var(--error-text);\n  flex-shrink: 0;\n}\n\n.session-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}"
  }
}