ionbase-ui 0.76.0 → 0.81.1

package/dist/figma-map.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.76.0",
+  "version": "0.81.1",
   "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
   "figmaExported": "2026-09-25",
   "usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
@@ -672,6 +672,31 @@
         }
       }
     },
+    "1453:805": {
+      "figmaComponent": "Time Field",
+      "figmaNodeId": "1453:805",
+      "figmaPage": "Date Picker",
+      "component": "TimeField",
+      "import": "import { TimeField } from 'ionbase-ui';",
+      "docs": "components/time-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader’s own format; the prop is 24-hour HH:MM"
+        }
+      }
+    },
     "1365:2404": {
       "figmaComponent": "Drawer",
       "figmaNodeId": "1365:2404",
@@ -798,6 +823,49 @@
         }
       }
     },
+    "1441:294": {
+      "figmaComponent": "Card",
+      "figmaNodeId": "1441:294",
+      "figmaPage": "Card",
+      "component": "Card",
+      "import": "import { Card } from 'ionbase-ui';",
+      "docs": "components/card/index.html.md",
+      "props": {
+        "Intent": {
+          "prop": "intent",
+          "values": {
+            "Default": "default",
+            "Danger": "danger"
+          }
+        },
+        "Title#1441:0": {
+          "prop": "title"
+        },
+        "Show Header#1441:6": {
+          "prop": "title",
+          "note": "false hides the whole title row. In code, omit title: the card renders a <div> rather than a named <section>, and description goes with it"
+        },
+        "Description#1441:3": {
+          "prop": "description"
+        },
+        "Show Description#1441:9": {
+          "prop": "description",
+          "note": "false means description is omitted"
+        },
+        "Action#1441:15": {
+          "prop": "action",
+          "note": "a standalone Link in the design; a small Button also fits. One control only"
+        },
+        "Show Action#1441:12": {
+          "prop": "action",
+          "note": "false means action is omitted"
+        },
+        "Show Body#1441:18": {
+          "prop": "children",
+          "note": "the body frame is a placeholder; in code the card’s children follow the title row"
+        }
+      }
+    },
     "592:857": {
       "figmaComponent": "Full Card",
       "figmaNodeId": "592:857",
@@ -1840,6 +1908,73 @@
         }
       }
     },
+    "1444:761": {
+      "figmaComponent": "Table Sort Indicator",
+      "figmaNodeId": "1444:761",
+      "figmaPage": "Table",
+      "component": "TableCell",
+      "import": "import { TableCell } from 'ionbase-ui';",
+      "docs": "components/table-cell/index.html.md",
+      "props": {
+        "Direction": {
+          "prop": "sortDirection",
+          "values": {
+            "None": "none",
+            "Ascending": "ascending",
+            "Descending": "descending"
+          },
+          "note": "drawn in a header Cell Text’s Trailing Icon slot; in code the header cell draws it and the label is a button. Set sortDirection on every sortable header and wire onSort, or use useTableSort’s sortProps(column)"
+        }
+      }
+    },
+    "1448:290": {
+      "figmaComponent": "Tag",
+      "figmaNodeId": "1448:290",
+      "figmaPage": "Tag",
+      "component": "Tag",
+      "import": "import { Tag } from 'ionbase-ui';",
+      "docs": "components/tag/index.html.md",
+      "note": "Tag is a collection item and takes no props of its own. Size and removability are set once on the parent TagGroup, so every tag in a group matches.",
+      "example": "<Tag key=\"team:finance\">Team: Finance</Tag>",
+      "props": {
+        "Label#1448:0": {
+          "ignore": "Tag’s label is its children, a collection prop the TypeScript checker cannot see — see Tag’s contract."
+        },
+        "Show Remove#1448:9": {
+          "ignore": "removability is TagGroup’s onRemove: pass it and every tag in the group shows the button, leave it out and none do"
+        },
+        "Size": {
+          "ignore": "set once on the parent TagGroup, not per tag"
+        },
+        "State": {
+          "ignore": "Hover is CSS and Focus is :focus-visible; Disabled is disabledKeys on TagGroup"
+        }
+      }
+    },
+    "1448:333": {
+      "figmaComponent": "Tag Group",
+      "figmaNodeId": "1448:333",
+      "figmaPage": "Tag",
+      "component": "TagGroup",
+      "import": "import { TagGroup } from 'ionbase-ui';",
+      "docs": "components/tag-group/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md"
+          }
+        },
+        "Label#1448:18": {
+          "prop": "label"
+        },
+        "Show Label#1448:21": {
+          "prop": "label",
+          "note": "false means no visible label — pass aria-label instead, the group still needs a name"
+        }
+      }
+    },
     "157:126": {
       "figmaComponent": "Tabs",
       "figmaNodeId": "157:126",
@@ -2135,6 +2270,41 @@
           "note": "true draws a third entry in items; the entry count is the length of the array"
         }
       }
+    },
+    "1458:368": {
+      "figmaComponent": "Command Palette",
+      "figmaNodeId": "1458:368",
+      "figmaPage": "Command Palette",
+      "component": "CommandPalette",
+      "import": "import { CommandPalette } from 'ionbase-ui';",
+      "docs": "components/command-palette/index.html.md",
+      "example": "<CommandPalette\n  commands={[\n    { id: 'new-agent', label: 'Create agent', section: 'Actions' },\n    { id: 'go-runs', label: 'Go to Runs', section: 'Navigation' },\n  ]}\n  onAction={(id) => run(id)}\n/>",
+      "props": {
+        "Placeholder#1458:0": {
+          "prop": "placeholder"
+        },
+        "Show Footer#1458:3": {
+          "ignore": "the key hints are always rendered and hidden by CSS below 40rem, where there are no arrow keys to hint at — a viewport's answer, not a prop"
+        },
+        "State": {
+          "ignore": "Results and Empty are what the query produces against `commands`; the empty text is `emptyLabel`"
+        }
+      }
+    },
+    "1457:242": {
+      "figmaComponent": "Kbd",
+      "figmaNodeId": "1457:242",
+      "figmaPage": "Command Palette",
+      "component": "Kbd",
+      "import": "import { Kbd } from 'ionbase-ui';",
+      "docs": "components/kbd/index.html.md",
+      "example": "<Kbd shortcut=\"mod+k\" />",
+      "props": {
+        "Key#1457:0": {
+          "prop": "children",
+          "note": "one Figma Kbd is one key. For a shortcut, use `shortcut=\"mod+k\"` on a single Kbd rather than several: it draws each platform's own keys and names them for a screen reader"
+        }
+      }
     }
   },
   "byFigmaName": {
@@ -2804,6 +2974,31 @@
         }
       }
     },
+    "Time Field": {
+      "figmaComponent": "Time Field",
+      "figmaNodeId": "1453:805",
+      "figmaPage": "Date Picker",
+      "component": "TimeField",
+      "import": "import { TimeField } from 'ionbase-ui';",
+      "docs": "components/time-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader’s own format; the prop is 24-hour HH:MM"
+        }
+      }
+    },
     "Drawer": {
       "figmaComponent": "Drawer",
       "figmaNodeId": "1365:2404",
@@ -2930,6 +3125,49 @@
         }
       }
     },
+    "Card": {
+      "figmaComponent": "Card",
+      "figmaNodeId": "1441:294",
+      "figmaPage": "Card",
+      "component": "Card",
+      "import": "import { Card } from 'ionbase-ui';",
+      "docs": "components/card/index.html.md",
+      "props": {
+        "Intent": {
+          "prop": "intent",
+          "values": {
+            "Default": "default",
+            "Danger": "danger"
+          }
+        },
+        "Title#1441:0": {
+          "prop": "title"
+        },
+        "Show Header#1441:6": {
+          "prop": "title",
+          "note": "false hides the whole title row. In code, omit title: the card renders a <div> rather than a named <section>, and description goes with it"
+        },
+        "Description#1441:3": {
+          "prop": "description"
+        },
+        "Show Description#1441:9": {
+          "prop": "description",
+          "note": "false means description is omitted"
+        },
+        "Action#1441:15": {
+          "prop": "action",
+          "note": "a standalone Link in the design; a small Button also fits. One control only"
+        },
+        "Show Action#1441:12": {
+          "prop": "action",
+          "note": "false means action is omitted"
+        },
+        "Show Body#1441:18": {
+          "prop": "children",
+          "note": "the body frame is a placeholder; in code the card’s children follow the title row"
+        }
+      }
+    },
     "Full Card": {
       "figmaComponent": "Full Card",
       "figmaNodeId": "592:857",
@@ -3972,6 +4210,73 @@
         }
       }
     },
+    "Table Sort Indicator": {
+      "figmaComponent": "Table Sort Indicator",
+      "figmaNodeId": "1444:761",
+      "figmaPage": "Table",
+      "component": "TableCell",
+      "import": "import { TableCell } from 'ionbase-ui';",
+      "docs": "components/table-cell/index.html.md",
+      "props": {
+        "Direction": {
+          "prop": "sortDirection",
+          "values": {
+            "None": "none",
+            "Ascending": "ascending",
+            "Descending": "descending"
+          },
+          "note": "drawn in a header Cell Text’s Trailing Icon slot; in code the header cell draws it and the label is a button. Set sortDirection on every sortable header and wire onSort, or use useTableSort’s sortProps(column)"
+        }
+      }
+    },
+    "Tag": {
+      "figmaComponent": "Tag",
+      "figmaNodeId": "1448:290",
+      "figmaPage": "Tag",
+      "component": "Tag",
+      "import": "import { Tag } from 'ionbase-ui';",
+      "docs": "components/tag/index.html.md",
+      "note": "Tag is a collection item and takes no props of its own. Size and removability are set once on the parent TagGroup, so every tag in a group matches.",
+      "example": "<Tag key=\"team:finance\">Team: Finance</Tag>",
+      "props": {
+        "Label#1448:0": {
+          "ignore": "Tag’s label is its children, a collection prop the TypeScript checker cannot see — see Tag’s contract."
+        },
+        "Show Remove#1448:9": {
+          "ignore": "removability is TagGroup’s onRemove: pass it and every tag in the group shows the button, leave it out and none do"
+        },
+        "Size": {
+          "ignore": "set once on the parent TagGroup, not per tag"
+        },
+        "State": {
+          "ignore": "Hover is CSS and Focus is :focus-visible; Disabled is disabledKeys on TagGroup"
+        }
+      }
+    },
+    "Tag Group": {
+      "figmaComponent": "Tag Group",
+      "figmaNodeId": "1448:333",
+      "figmaPage": "Tag",
+      "component": "TagGroup",
+      "import": "import { TagGroup } from 'ionbase-ui';",
+      "docs": "components/tag-group/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md"
+          }
+        },
+        "Label#1448:18": {
+          "prop": "label"
+        },
+        "Show Label#1448:21": {
+          "prop": "label",
+          "note": "false means no visible label — pass aria-label instead, the group still needs a name"
+        }
+      }
+    },
     "Tabs": {
       "figmaComponent": "Tabs",
       "figmaNodeId": "157:126",
@@ -4267,6 +4572,41 @@
           "note": "true draws a third entry in items; the entry count is the length of the array"
         }
       }
+    },
+    "Command Palette": {
+      "figmaComponent": "Command Palette",
+      "figmaNodeId": "1458:368",
+      "figmaPage": "Command Palette",
+      "component": "CommandPalette",
+      "import": "import { CommandPalette } from 'ionbase-ui';",
+      "docs": "components/command-palette/index.html.md",
+      "example": "<CommandPalette\n  commands={[\n    { id: 'new-agent', label: 'Create agent', section: 'Actions' },\n    { id: 'go-runs', label: 'Go to Runs', section: 'Navigation' },\n  ]}\n  onAction={(id) => run(id)}\n/>",
+      "props": {
+        "Placeholder#1458:0": {
+          "prop": "placeholder"
+        },
+        "Show Footer#1458:3": {
+          "ignore": "the key hints are always rendered and hidden by CSS below 40rem, where there are no arrow keys to hint at — a viewport's answer, not a prop"
+        },
+        "State": {
+          "ignore": "Results and Empty are what the query produces against `commands`; the empty text is `emptyLabel`"
+        }
+      }
+    },
+    "Kbd": {
+      "figmaComponent": "Kbd",
+      "figmaNodeId": "1457:242",
+      "figmaPage": "Command Palette",
+      "component": "Kbd",
+      "import": "import { Kbd } from 'ionbase-ui';",
+      "docs": "components/kbd/index.html.md",
+      "example": "<Kbd shortcut=\"mod+k\" />",
+      "props": {
+        "Key#1457:0": {
+          "prop": "children",
+          "note": "one Figma Kbd is one key. For a shortcut, use `shortcut=\"mod+k\"` on a single Kbd rather than several: it draws each platform's own keys and names them for a screen reader"
+        }
+      }
     }
   },
   "unmapped": {
@@ -4283,7 +4623,8 @@
     "Progress": "As Line — internal to ScrollProgress.",
     "Progress Heading": "As Line — internal to ScrollProgress.",
     "Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
-    "Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract."
+    "Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract.",
+    "Command Palette Item": "One row of the palette, drawn so Active and Disabled can be seen. There is no code export behind it and there should not be: rows are built from the palette's `commands` array, where the Label, Description, Icon and shortcut are fields of one command — `label`, `description`, `icon`, `shortcut` — and Active is the keyboard's position, not a prop. The same call Combobox Menu gets."
   },
   "codeUnmapped": {
     "DateRangePicker": "Drawn, but not as a set of its own: its field is Date Picker Type=Range and its calendar is Calendar Mode=Range. A Figma set maps to exactly one code component, and splitting one field into two sets to satisfy that would draw the same box twice. Read Date Picker’s Type note for the handoff.",

package/dist/meta/Card.json

@@ -0,0 +1,153 @@
+{
+  "name": "Card",
+  "source": "src/components/Card.tsx",
+  "propsType": "CardProps",
+  "description": "Card — a bordered surface that groups one part of a page.\n\nPromoted from the demo app, where the same surface was hand-written as\n`.demo-panel` in nine screens: a settings group, a chart panel, a runs log,\nthe danger zone. For a feature row with media use FullCard; for one\nheadline figure use StatTile.\n\nTHE TITLE DECIDES THE ELEMENT\n\nA titled card is a `<section aria-labelledby>` — a named region, so a\nscreen reader user can jump between cards the way a sighted one scans\nthem. An untitled card is a `<div>`: a `<section>` with no name is not a\nlandmark at all, and pretending otherwise only adds noise.\n\nNo `'use client'`: `useId` resolves on the server, and nothing here is\ninteractive. Interactive parts arrive through `action` and `children`.",
+  "import": "import { Card } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.77.0",
+  "summary": "A bordered surface that groups one part of a page, with an optional title row. A titled card is a named region; an untitled one is a plain surface.",
+  "useWhen": [
+    "a page is several distinct groups — settings sections, dashboard panels, a log beside a chart",
+    "a group needs a title, a one-line description or a single action like \"All runs\"",
+    "a loading placeholder needs the same frame as the content it stands in for"
+  ],
+  "useInstead": [
+    {
+      "when": "it is a feature row with a headline, text and a media panel",
+      "use": "FullCard"
+    },
+    {
+      "when": "it is one headline figure and how it moved",
+      "use": "StatTile"
+    },
+    {
+      "when": "the content is a list of settings, each with a label and a control",
+      "use": "SettingRow"
+    },
+    {
+      "when": "the message needs the user's attention now rather than a place on the page",
+      "use": "Alert"
+    }
+  ],
+  "composition": {
+    "note": "The title row is built from props — `title`, `description`, `action` — so every card lays it out the same way. The body is `children`, spaced 12 apart by the card's grid.",
+    "example": "<Card title=\"Recent runs\" action={<Link variant=\"standalone\" href=\"/runs\">All runs</Link>}><Table aria-label=\"Recent runs\">…</Table></Card>"
+  },
+  "variants": {
+    "intent": {
+      "default": {
+        "use": "every card that is not a danger zone"
+      },
+      "danger": {
+        "use": "a card of irreversible actions — delete the workspace, transfer ownership. The rule turns red; the title must still say what is at stake"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "a titled card renders a <section> named by its heading, so it is a landmark a screen reader can jump to",
+      "an untitled card renders a <div>, never an unnamed <section>",
+      "the danger intent is a border colour only, so the meaning stays in the words"
+    ],
+    "requires": [
+      "the right `headingLevel` for where the card sits in the page outline",
+      "`isRegion={false}` when the card's only content is a landmark named by the same words, such as a Table labelled by the card's title"
+    ],
+    "notes": [
+      "`headingLevel` takes 2-6 and defaults to 2. It is a number rather than a variant because it is an outline decision, not a visual one: the title looks the same at every level.",
+      "`description` renders only under a `title`. An untitled card has no title row to put it in."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a heading passed in `children` instead of `title`",
+      "why": "the card does not become a named region, and the title row loses its layout for `description` and `action`"
+    },
+    {
+      "dont": "several buttons in `action`",
+      "why": "the title row wraps and the card reads as a toolbar; `action` is for one control — put the rest in the body"
+    },
+    {
+      "dont": "relying on `intent=\"danger\"` alone to warn",
+      "why": "a red border is not read aloud and is easy to miss; the title and the button labels must say what cannot be undone"
+    },
+    {
+      "dont": "cards nested inside cards",
+      "why": "border inside border reads as a mistake; group the inner content with a heading or a Divider instead"
+    }
+  ],
+  "stylesheet": "src/styles/card.css",
+  "tokens": [
+    "--border-error-subtle",
+    "--border-subtle",
+    "--border-width-default",
+    "--font-family-sans",
+    "--font-weight-semibold",
+    "--radius-lg",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-2",
+    "--spacing-8",
+    "--surface-default",
+    "--text-default",
+    "--text-secondary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-h6",
+    "--type-h6-line-height"
+  ],
+  "props": {
+    "title": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "The card's heading. With a title the card is a `<section>` named by it;\nwithout one it is a plain surface — a `<div>`, for skeletons and for\ncontent that already has its own heading."
+    },
+    "headingLevel": {
+      "type": "CardHeadingLevel | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Heading element for the title. Defaults to `h2`: most cards are the\nfirst level of section under the page's `h1`. The outline is the page's\ndecision, so it is a prop, not a constant."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "One line under the title — what the card holds or when changes apply."
+    },
+    "action": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "One control at the end of the title row: a standalone Link (\"All runs\")\nor a small Button. More than one belongs in the body."
+    },
+    "intent": {
+      "type": "CardIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "`danger` for a card of irreversible actions — the danger zone.",
+      "values": [
+        "default",
+        "danger"
+      ]
+    },
+    "isRegion": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether a titled card is a landmark. Defaults to `true`. Set `false`\nwhen the card's only content is itself a landmark named by the same\nwords — a Table's scroll region — or the page gets two regions with one\nname. The heading still renders; only the `<section>` becomes a `<div>`."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 7,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/Checkbox.json

@@ -158,8 +158,8 @@
       "description": "Matches the Figma `Color` variant: Brand, Neutral, Danger.",
       "values": [
         "neutral",
-        "brand",
-        "danger"
+        "danger",
+        "brand"
       ],
       "default": "brand"
     },