ionbase-ui 0.73.0 → 0.75.0

package/dist/figma-map.json

@@ -1,8 +1,8 @@
 {
   "package": "ionbase-ui",
-  "version": "0.73.0",
+  "version": "0.75.0",
   "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
-  "figmaExported": "2026-09-24",
+  "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.",
   "generated": "by scripts/verify-figma-map.mjs — do not edit",
   "byNodeId": {
@@ -2089,6 +2089,48 @@
           "prop": "title"
         }
       }
+    },
+    "1432:282": {
+      "figmaComponent": "Chart Tooltip",
+      "figmaNodeId": "1432:282",
+      "figmaPage": "Chart",
+      "component": "ChartTooltip",
+      "import": "import { ChartTooltip } from 'ionbase-ui';",
+      "docs": "components/chart-tooltip/index.html.md",
+      "props": {
+        "Title#1432:18": {
+          "prop": "title"
+        },
+        "Show Row 2#1432:19": {
+          "prop": "rows",
+          "note": "true draws a second entry in rows; the row count is the length of the array"
+        },
+        "Show Row 3#1432:20": {
+          "prop": "rows",
+          "note": "true draws a third entry in rows"
+        }
+      }
+    },
+    "1432:369": {
+      "figmaComponent": "Chart Legend",
+      "figmaNodeId": "1432:369",
+      "figmaPage": "Chart",
+      "component": "ChartLegend",
+      "import": "import { ChartLegend } from 'ionbase-ui';",
+      "docs": "components/chart-legend/index.html.md",
+      "props": {
+        "Shape": {
+          "prop": "shape",
+          "values": {
+            "Square": "square",
+            "Line": "line"
+          }
+        },
+        "Show Item 3#1432:38": {
+          "prop": "items",
+          "note": "true draws a third entry in items; the entry count is the length of the array"
+        }
+      }
     }
   },
   "byFigmaName": {
@@ -4175,12 +4217,56 @@
           "prop": "title"
         }
       }
+    },
+    "Chart Tooltip": {
+      "figmaComponent": "Chart Tooltip",
+      "figmaNodeId": "1432:282",
+      "figmaPage": "Chart",
+      "component": "ChartTooltip",
+      "import": "import { ChartTooltip } from 'ionbase-ui';",
+      "docs": "components/chart-tooltip/index.html.md",
+      "props": {
+        "Title#1432:18": {
+          "prop": "title"
+        },
+        "Show Row 2#1432:19": {
+          "prop": "rows",
+          "note": "true draws a second entry in rows; the row count is the length of the array"
+        },
+        "Show Row 3#1432:20": {
+          "prop": "rows",
+          "note": "true draws a third entry in rows"
+        }
+      }
+    },
+    "Chart Legend": {
+      "figmaComponent": "Chart Legend",
+      "figmaNodeId": "1432:369",
+      "figmaPage": "Chart",
+      "component": "ChartLegend",
+      "import": "import { ChartLegend } from 'ionbase-ui';",
+      "docs": "components/chart-legend/index.html.md",
+      "props": {
+        "Shape": {
+          "prop": "shape",
+          "values": {
+            "Square": "square",
+            "Line": "line"
+          }
+        },
+        "Show Item 3#1432:38": {
+          "prop": "items",
+          "note": "true draws a third entry in items; the entry count is the length of the array"
+        }
+      }
     }
   },
   "unmapped": {
     ".Status Indicator": "The dot Avatar draws in its corners. Avatar owns both instances — Top is Intent=Primary with the check glyph, Bottom is Intent=Success with Show Icon off — and exposes them as `topIndicator` / `bottomIndicator`.\n\nThe leading dot in the name is Figma's own marker for a private component: it is excluded from the published library, so a designer cannot place one on a canvas even if they wanted to. That settles a question this entry used to argue: it is internal by the file's own declaration, not merely by our reading of it. The same call Line, Progress and Progress Heading get for being internal to ScrollProgress — with better evidence.\n\nMap it only if the dot is ever removed.",
     "Calendar": "The open calendar both pickers render internally — Calendar and CalendarPopover are not exported, because a grid with no field to own its value is not a control a caller should mount. Mode=Single is DatePicker’s, Mode=Range is DateRangePicker’s; Months=Two is `visibleMonths={2}`, Show Presets is `presets` and Show Clear is `isClearable`, all on DateRangePicker. Drawn separately because a frame cannot both hug a field and overlay a grid on it — the same reason Combobox Menu is its own frame.",
     "Calendar Day": "A day cell inside Calendar — internal to it the way Pagination Item is internal to Pagination. A caller never places one; `isDateUnavailable`, `minValue` and `maxValue` on the pickers decide which state each day draws in.",
+    "Chart Legend Item": "One entry of Chart Legend — `items[n]` in code, `{ label, series }`. Its Shape follows the legend’s `shape`; Series picks chart/1…8. Internal to the legend.",
+    "Chart Tooltip Row": "One entry of Chart Tooltip — `rows[n]` in code, `{ label, value, series }`. Series picks the swatch from chart/1…8, exactly as `series` does. Internal to the tooltip the way Pagination Item is internal to Pagination.",
     "Combobox Menu": "The list Combobox opens. It is not a separate export: the React component renders its own menu, because the two are one control and splitting them would let a caller mount a listbox with no combobox to own it. Drawn separately in Figma because a frame cannot both hug a field and overlay a list on top of it.",
     "Form Field": "Label, helper text and error wiring are built into Input and Select rather than a separate wrapper — the wrapper is how Figma composes them, not how React does.",
     "Line": "An internal part of the Scroll Progress rail, not a component a caller composes.",

package/dist/meta/ChartLegend.json

@@ -0,0 +1,125 @@
+{
+  "name": "ChartLegend",
+  "source": "src/components/Chart.tsx",
+  "propsType": "ChartLegendProps",
+  "description": "ChartLegend — which colour is which series.\n\nColour alone never identifies a series (SC 1.4.1), so any chart with more\nthan one series needs this, or direct labels on the lines. The swatch reads\nthe same `--chart-<n>` as the series itself, through `chartSeriesClass`, so\nthe two cannot drift apart.",
+  "import": "import { ChartLegend } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.74.0",
+  "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.",
+  "useWhen": [
+    "a chart has more than one series",
+    "a single-series chart sits beside others and its colour needs naming"
+  ],
+  "useInstead": [
+    {
+      "when": "the lines are few and there is room to label each at its end",
+      "use": "direct labels in the SVG, with the series class on the text"
+    },
+    {
+      "when": "the scale is a magnitude ramp (a heatmap), not categories",
+      "use": "a Less-to-More row of .ion-chart__heat--0…5 cells"
+    }
+  ],
+  "composition": {
+    "note": "Items are listed in the order the series are drawn, with the same series numbers the chart uses. Place it above or below the plot inside the same .ion-chart figure.",
+    "example": "<ChartLegend shape=\"line\" items={[{ label: 'Production', series: 1 }, { label: 'Staging', series: 2 }]} />"
+  },
+  "variants": {
+    "shape": {
+      "square": {
+        "use": "the default — bars, areas and heatmap-like marks"
+      },
+      "line": {
+        "use": "line charts, so the key looks like the mark it names"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "a list, so a screen reader announces how many series there are",
+      "swatches are aria-hidden; every series is named in text"
+    ],
+    "requires": [
+      "series numbers matching the chart — the legend cannot see the chart"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a multi-series chart with no legend and no direct labels",
+      "why": "colour becomes the only way to tell series apart, which fails SC 1.4.1 and fails anyone who cannot tell blue from purple"
+    },
+    {
+      "dont": "listing series in a different order from the chart",
+      "why": "the reader matches legend to chart by position as much as by colour"
+    }
+  ],
+  "stylesheet": "src/styles/chart.css",
+  "tokens": [
+    "--border-default",
+    "--border-strong",
+    "--border-stronger",
+    "--border-subtle",
+    "--border-width-default",
+    "--chart-1",
+    "--chart-2",
+    "--chart-3",
+    "--chart-4",
+    "--chart-5",
+    "--chart-6",
+    "--chart-7",
+    "--chart-8",
+    "--chart-sequential-1",
+    "--chart-sequential-2",
+    "--chart-sequential-3",
+    "--chart-sequential-4",
+    "--chart-sequential-5",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-semibold",
+    "--ion-chart-series",
+    "--ion-shadow-shadow-lg",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-md",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-raised",
+    "--surface-sunken",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
+  ],
+  "props": {
+    "items": {
+      "type": "ChartLegendItem[]",
+      "required": true,
+      "origin": "own",
+      "description": "One per series, in the order the series are drawn."
+    },
+    "shape": {
+      "type": "ChartLegendShape | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "`square` for bars and areas, `line` for line charts.",
+      "values": [
+        "square",
+        "line"
+      ]
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/ChartTooltip.json

@@ -0,0 +1,126 @@
+{
+  "name": "ChartTooltip",
+  "source": "src/components/Chart.tsx",
+  "propsType": "ChartTooltipProps",
+  "description": "ChartTooltip — the panel that shows the values under the pointer.\n\nPut it inside visx's Tooltip with `chartTooltipProps`, so visx places it and\nthis draws it: raised, rimmed and shadowed like Popover and Toast.\n\nIT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard\nor screen-reader user never sees it. Every chart still needs a text summary\nand the values in a table (visually hidden is fine) — the tooltip is a\nconvenience for pointer users, never the only route to a number.",
+  "import": "import { ChartTooltip } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.74.0",
+  "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.",
+  "useWhen": [
+    "a chart drawn with visx shows exact values on hover",
+    "several series share an x value and the reader compares them at a point"
+  ],
+  "useInstead": [
+    {
+      "when": "it explains a control rather than a data point",
+      "use": "Tooltip"
+    },
+    {
+      "when": "it holds interactive content",
+      "use": "Popover"
+    },
+    {
+      "when": "the reader needs every value, or needs them without a pointer",
+      "use": "Table"
+    }
+  ],
+  "composition": {
+    "note": "Render it inside visx's Tooltip, TooltipWithBounds or TooltipInPortal with {...chartTooltipProps}, which turns off visx's own box so this one is the only panel. Axes take {...chartAxisProps} and gridlines {...chartGridProps}; a series takes className={chartSeriesClass(n)} plus ion-chart__line, __area, __bar or __point.",
+    "example": "<TooltipWithBounds top={top} left={left} {...chartTooltipProps}><ChartTooltip title=\"12 Sep\" rows={[{ label: 'Success rate', value: '96.2%', series: 1 }]} /></TooltipWithBounds>"
+  },
+  "a11y": {
+    "guarantees": [
+      "rows are a <dl>, so each value is announced with its label",
+      "the series swatch is aria-hidden; the label carries the name"
+    ],
+    "requires": [
+      "a text summary and the values in a table (visually hidden is fine) — the tooltip appears on hover, so keyboard and screen-reader users never reach it",
+      "`value` already formatted — the tooltip cannot know the unit or precision"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "making the tooltip the only way to read a value",
+      "why": "it exists only under a mouse pointer; without a table the data is invisible to keyboard and screen-reader users"
+    },
+    {
+      "dont": "leaving visx's default tooltip styles on",
+      "why": "it draws a second white box with a hardcoded shadow around this one, and that box does not theme"
+    },
+    {
+      "dont": "a swatch colour that does not match the series",
+      "why": "pass the same `series` number the line or bar uses — the swatch reads the same token only if it is told the same index"
+    }
+  ],
+  "stylesheet": "src/styles/chart.css",
+  "tokens": [
+    "--border-default",
+    "--border-strong",
+    "--border-stronger",
+    "--border-subtle",
+    "--border-width-default",
+    "--chart-1",
+    "--chart-2",
+    "--chart-3",
+    "--chart-4",
+    "--chart-5",
+    "--chart-6",
+    "--chart-7",
+    "--chart-8",
+    "--chart-sequential-1",
+    "--chart-sequential-2",
+    "--chart-sequential-3",
+    "--chart-sequential-4",
+    "--chart-sequential-5",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-semibold",
+    "--ion-chart-series",
+    "--ion-shadow-shadow-lg",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-md",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-raised",
+    "--surface-sunken",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
+  ],
+  "props": {
+    "title": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "What the pointer is over — usually the x value, e.g. a date."
+    },
+    "rows": {
+      "type": "ChartTooltipRow[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "One row per series at that point."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Free content after the rows, for anything that is not label/value."
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/components.json

@@ -1,10 +1,23 @@
 {
   "package": "ionbase-ui",
-  "version": "0.73.0",
+  "version": "0.75.0",
   "generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json",
   "hooks": [
+    "useAgentRun",
     "useToast"
   ],
+  "helpers": [
+    "agentRunFrom",
+    "agentRunHasEnded",
+    "agentRunLog",
+    "agentRunReducer",
+    "chartAxisProps",
+    "chartGridProps",
+    "chartSeriesClass",
+    "chartTooltipProps",
+    "initialAgentRunState",
+    "replayAgentRun"
+  ],
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -2652,6 +2665,257 @@
         "other": 0
       }
     },
+    "ChartLegend": {
+      "name": "ChartLegend",
+      "source": "src/components/Chart.tsx",
+      "propsType": "ChartLegendProps",
+      "description": "ChartLegend — which colour is which series.\n\nColour alone never identifies a series (SC 1.4.1), so any chart with more\nthan one series needs this, or direct labels on the lines. The swatch reads\nthe same `--chart-<n>` as the series itself, through `chartSeriesClass`, so\nthe two cannot drift apart.",
+      "import": "import { ChartLegend } from 'ionbase-ui';",
+      "status": "stable",
+      "since": "0.74.0",
+      "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.",
+      "useWhen": [
+        "a chart has more than one series",
+        "a single-series chart sits beside others and its colour needs naming"
+      ],
+      "useInstead": [
+        {
+          "when": "the lines are few and there is room to label each at its end",
+          "use": "direct labels in the SVG, with the series class on the text"
+        },
+        {
+          "when": "the scale is a magnitude ramp (a heatmap), not categories",
+          "use": "a Less-to-More row of .ion-chart__heat--0…5 cells"
+        }
+      ],
+      "composition": {
+        "note": "Items are listed in the order the series are drawn, with the same series numbers the chart uses. Place it above or below the plot inside the same .ion-chart figure.",
+        "example": "<ChartLegend shape=\"line\" items={[{ label: 'Production', series: 1 }, { label: 'Staging', series: 2 }]} />"
+      },
+      "variants": {
+        "shape": {
+          "square": {
+            "use": "the default — bars, areas and heatmap-like marks"
+          },
+          "line": {
+            "use": "line charts, so the key looks like the mark it names"
+          }
+        }
+      },
+      "a11y": {
+        "guarantees": [
+          "a list, so a screen reader announces how many series there are",
+          "swatches are aria-hidden; every series is named in text"
+        ],
+        "requires": [
+          "series numbers matching the chart — the legend cannot see the chart"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "a multi-series chart with no legend and no direct labels",
+          "why": "colour becomes the only way to tell series apart, which fails SC 1.4.1 and fails anyone who cannot tell blue from purple"
+        },
+        {
+          "dont": "listing series in a different order from the chart",
+          "why": "the reader matches legend to chart by position as much as by colour"
+        }
+      ],
+      "stylesheet": "src/styles/chart.css",
+      "tokens": [
+        "--border-default",
+        "--border-strong",
+        "--border-stronger",
+        "--border-subtle",
+        "--border-width-default",
+        "--chart-1",
+        "--chart-2",
+        "--chart-3",
+        "--chart-4",
+        "--chart-5",
+        "--chart-6",
+        "--chart-7",
+        "--chart-8",
+        "--chart-sequential-1",
+        "--chart-sequential-2",
+        "--chart-sequential-3",
+        "--chart-sequential-4",
+        "--chart-sequential-5",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--ion-chart-series",
+        "--ion-shadow-shadow-lg",
+        "--radius-2xs",
+        "--radius-full",
+        "--radius-md",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-4",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-raised",
+        "--surface-sunken",
+        "--text-default",
+        "--text-secondary",
+        "--text-tertiary",
+        "--type-body-sm",
+        "--type-body-sm-line-height",
+        "--type-caption",
+        "--type-caption-line-height"
+      ],
+      "props": {
+        "items": {
+          "type": "ChartLegendItem[]",
+          "required": true,
+          "origin": "own",
+          "description": "One per series, in the order the series are drawn."
+        },
+        "shape": {
+          "type": "ChartLegendShape | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "`square` for bars and areas, `line` for line charts.",
+          "values": [
+            "square",
+            "line"
+          ]
+        }
+      },
+      "propCounts": {
+        "own": 2,
+        "aria": 0,
+        "dom": 277,
+        "other": 0
+      }
+    },
+    "ChartTooltip": {
+      "name": "ChartTooltip",
+      "source": "src/components/Chart.tsx",
+      "propsType": "ChartTooltipProps",
+      "description": "ChartTooltip — the panel that shows the values under the pointer.\n\nPut it inside visx's Tooltip with `chartTooltipProps`, so visx places it and\nthis draws it: raised, rimmed and shadowed like Popover and Toast.\n\nIT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard\nor screen-reader user never sees it. Every chart still needs a text summary\nand the values in a table (visually hidden is fine) — the tooltip is a\nconvenience for pointer users, never the only route to a number.",
+      "import": "import { ChartTooltip } from 'ionbase-ui';",
+      "status": "stable",
+      "since": "0.74.0",
+      "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.",
+      "useWhen": [
+        "a chart drawn with visx shows exact values on hover",
+        "several series share an x value and the reader compares them at a point"
+      ],
+      "useInstead": [
+        {
+          "when": "it explains a control rather than a data point",
+          "use": "Tooltip"
+        },
+        {
+          "when": "it holds interactive content",
+          "use": "Popover"
+        },
+        {
+          "when": "the reader needs every value, or needs them without a pointer",
+          "use": "Table"
+        }
+      ],
+      "composition": {
+        "note": "Render it inside visx's Tooltip, TooltipWithBounds or TooltipInPortal with {...chartTooltipProps}, which turns off visx's own box so this one is the only panel. Axes take {...chartAxisProps} and gridlines {...chartGridProps}; a series takes className={chartSeriesClass(n)} plus ion-chart__line, __area, __bar or __point.",
+        "example": "<TooltipWithBounds top={top} left={left} {...chartTooltipProps}><ChartTooltip title=\"12 Sep\" rows={[{ label: 'Success rate', value: '96.2%', series: 1 }]} /></TooltipWithBounds>"
+      },
+      "a11y": {
+        "guarantees": [
+          "rows are a <dl>, so each value is announced with its label",
+          "the series swatch is aria-hidden; the label carries the name"
+        ],
+        "requires": [
+          "a text summary and the values in a table (visually hidden is fine) — the tooltip appears on hover, so keyboard and screen-reader users never reach it",
+          "`value` already formatted — the tooltip cannot know the unit or precision"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "making the tooltip the only way to read a value",
+          "why": "it exists only under a mouse pointer; without a table the data is invisible to keyboard and screen-reader users"
+        },
+        {
+          "dont": "leaving visx's default tooltip styles on",
+          "why": "it draws a second white box with a hardcoded shadow around this one, and that box does not theme"
+        },
+        {
+          "dont": "a swatch colour that does not match the series",
+          "why": "pass the same `series` number the line or bar uses — the swatch reads the same token only if it is told the same index"
+        }
+      ],
+      "stylesheet": "src/styles/chart.css",
+      "tokens": [
+        "--border-default",
+        "--border-strong",
+        "--border-stronger",
+        "--border-subtle",
+        "--border-width-default",
+        "--chart-1",
+        "--chart-2",
+        "--chart-3",
+        "--chart-4",
+        "--chart-5",
+        "--chart-6",
+        "--chart-7",
+        "--chart-8",
+        "--chart-sequential-1",
+        "--chart-sequential-2",
+        "--chart-sequential-3",
+        "--chart-sequential-4",
+        "--chart-sequential-5",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--ion-chart-series",
+        "--ion-shadow-shadow-lg",
+        "--radius-2xs",
+        "--radius-full",
+        "--radius-md",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-4",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-raised",
+        "--surface-sunken",
+        "--text-default",
+        "--text-secondary",
+        "--text-tertiary",
+        "--type-body-sm",
+        "--type-body-sm-line-height",
+        "--type-caption",
+        "--type-caption-line-height"
+      ],
+      "props": {
+        "title": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "What the pointer is over — usually the x value, e.g. a date."
+        },
+        "rows": {
+          "type": "ChartTooltipRow[] | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "One row per series at that point."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Free content after the rows, for anything that is not label/value."
+        }
+      },
+      "propCounts": {
+        "own": 3,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
     "Checkbox": {
       "name": "Checkbox",
       "source": "src/components/Checkbox.tsx",