@baseline-ui/mcp 0.58.0 → 0.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/index.cjs +604 -5
- package/dist/index.js +604 -5
- package/package.json +1 -1
- package/sbom.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8,7 +8,606 @@
|
|
|
8
8
|
* This notice may not be removed from this file.
|
|
9
9
|
*
|
|
10
10
|
*/
|
|
11
|
-
var o={
|
|
11
|
+
var o={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
|
|
12
|
+
import { Box } from "@baseline-ui/core";`,description:"The `BarChart` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:`The \`BarChart\` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.
|
|
13
|
+
|
|
14
|
+
* Renders one or more bar series from a single dataset, keyed by \`xAxisDataKey\` and the per-bar \`dataKey\`.
|
|
15
|
+
* Themed axes, grid, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.
|
|
16
|
+
* Default bar colors cycle through theme support colors (\`info\`, \`success\`, \`warning\`, \`error\`); each bar can override with a custom \`color\`.
|
|
17
|
+
* Toggleable tooltip, legend, grid, and axes for compact layouts.
|
|
18
|
+
* Grouped bars by default, with an opt-in \`stacked\` variant. The topmost bar in each stack keeps its rounded corners; inner segments stay flat.
|
|
19
|
+
* Responsive by default \u2014 fills the parent container width while preserving the configured \`height\`.
|
|
20
|
+
* Built-in keyboard navigation across data points via Recharts' accessibility layer.
|
|
21
|
+
|
|
22
|
+
\`\`\`jsx
|
|
23
|
+
import { BarChart } from "@baseline-ui/charts";
|
|
24
|
+
|
|
25
|
+
const data = [
|
|
26
|
+
{ year: "2020", revenue: 14_000_000, expenses: 12_000_000 },
|
|
27
|
+
{ year: "2021", revenue: 24_000_000, expenses: 6_000_000 },
|
|
28
|
+
{ year: "2022", revenue: 26_000_000, expenses: 13_000_000 },
|
|
29
|
+
];
|
|
30
|
+
|
|
31
|
+
<BarChart
|
|
32
|
+
data={data}
|
|
33
|
+
xAxisDataKey="year"
|
|
34
|
+
bars={[
|
|
35
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
36
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
37
|
+
]}
|
|
38
|
+
/>;
|
|
39
|
+
\`\`\`
|
|
40
|
+
|
|
41
|
+
The default variant renders bar series side-by-side within each X-axis category. Use \`showLegend\` to also render a legend above the chart.
|
|
42
|
+
|
|
43
|
+
\`\`\`jsx
|
|
44
|
+
<BarChart
|
|
45
|
+
data={data}
|
|
46
|
+
xAxisDataKey="year"
|
|
47
|
+
bars={[
|
|
48
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
49
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
50
|
+
]}
|
|
51
|
+
showLegend
|
|
52
|
+
/>
|
|
53
|
+
\`\`\`
|
|
54
|
+
|
|
55
|
+
Set \`variant="stacked"\` to stack bars on top of each other within each category. The topmost bar keeps its rounded top corners; inner segments are flat so the stack reads as a single continuous bar.
|
|
56
|
+
|
|
57
|
+
\`\`\`jsx
|
|
58
|
+
<BarChart
|
|
59
|
+
variant="stacked"
|
|
60
|
+
data={data}
|
|
61
|
+
xAxisDataKey="year"
|
|
62
|
+
bars={[
|
|
63
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
64
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
65
|
+
]}
|
|
66
|
+
showLegend
|
|
67
|
+
/>
|
|
68
|
+
\`\`\`
|
|
69
|
+
|
|
70
|
+
For mixed grouped/stacked layouts, set a custom \`stackId\` per bar \u2014 bars sharing the same \`stackId\` are stacked together; bars with different (or no) \`stackId\` are grouped beside the stack.
|
|
71
|
+
|
|
72
|
+
Pass a single entry in \`bars\` to render a single-series chart.
|
|
73
|
+
|
|
74
|
+
\`\`\`jsx
|
|
75
|
+
<BarChart
|
|
76
|
+
data={data}
|
|
77
|
+
xAxisDataKey="year"
|
|
78
|
+
bars={[{ dataKey: "revenue", name: "Revenue" }]}
|
|
79
|
+
/>
|
|
80
|
+
\`\`\`
|
|
81
|
+
|
|
82
|
+
Default colors cycle through \`info\` \u2192 \`success\` \u2192 \`warning\` \u2192 \`error\` and wrap modulo four. Provide a \`color\` per bar to override the default.
|
|
83
|
+
|
|
84
|
+
\`\`\`jsx
|
|
85
|
+
<BarChart
|
|
86
|
+
data={data}
|
|
87
|
+
xAxisDataKey="year"
|
|
88
|
+
bars={[
|
|
89
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
90
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
91
|
+
{ dataKey: "profit", name: "Profit" },
|
|
92
|
+
{ dataKey: "tax", name: "Tax" },
|
|
93
|
+
{ dataKey: "fees", name: "Fees" },
|
|
94
|
+
]}
|
|
95
|
+
showLegend
|
|
96
|
+
/>
|
|
97
|
+
\`\`\`
|
|
98
|
+
|
|
99
|
+
Override the default theme colors by passing \`color\` per bar.
|
|
100
|
+
|
|
101
|
+
\`\`\`jsx
|
|
102
|
+
<BarChart
|
|
103
|
+
data={data}
|
|
104
|
+
xAxisDataKey="year"
|
|
105
|
+
bars={[
|
|
106
|
+
{ dataKey: "revenue", name: "Revenue", color: "#7c3aed" },
|
|
107
|
+
{ dataKey: "expenses", name: "Expenses", color: "#f59e0b" },
|
|
108
|
+
]}
|
|
109
|
+
showLegend
|
|
110
|
+
/>
|
|
111
|
+
\`\`\`
|
|
112
|
+
|
|
113
|
+
\`barSize\` controls the bar width in pixels (default \`12\`). \`barRadius\` controls the rounded top-corner radius in pixels (default \`2\`).
|
|
114
|
+
|
|
115
|
+
\`\`\`jsx
|
|
116
|
+
<BarChart
|
|
117
|
+
data={data}
|
|
118
|
+
xAxisDataKey="year"
|
|
119
|
+
bars={[...]}
|
|
120
|
+
barSize={24}
|
|
121
|
+
/>
|
|
122
|
+
\`\`\`
|
|
123
|
+
|
|
124
|
+
\`showTooltip\`, \`showGrid\`, \`showXAxis\`, and \`showYAxis\` toggle the corresponding chart chrome individually. They all default to \`true\`.
|
|
125
|
+
|
|
126
|
+
\`\`\`jsx
|
|
127
|
+
<BarChart
|
|
128
|
+
data={data}
|
|
129
|
+
xAxisDataKey="year"
|
|
130
|
+
bars={[...]}
|
|
131
|
+
showXAxis={false}
|
|
132
|
+
showYAxis={false}
|
|
133
|
+
showGrid={false}
|
|
134
|
+
/>
|
|
135
|
+
\`\`\`
|
|
136
|
+
|
|
137
|
+
The chart surface is keyboard-focusable. When focused via keyboard, the surface shows a focus ring and arrow keys move an indicator across data points, opening the tooltip at each step.
|
|
138
|
+
|
|
139
|
+
| Key | Function |
|
|
140
|
+
| ------------- | --------------------------------------------------------------------------- |
|
|
141
|
+
| \`Tab\` | Moves focus to the chart surface. |
|
|
142
|
+
| \`Arrow Right\` | Advances the active data point one step to the right and shows the tooltip. |
|
|
143
|
+
| \`Arrow Left\` | Advances the active data point one step to the left and shows the tooltip. |
|
|
144
|
+
| \`Escape\` | Dismisses the tooltip and clears the active data point. |
|
|
145
|
+
|
|
146
|
+
BarChart shares its legend, tooltip, and surface markup with every other chart in the package. The \`BaselineUI-Chart-*\` selectors are stable shared hooks; the kind-specific \`BaselineUI-BarChart\` class lets you scope styles to bar charts only. Internal Recharts class names are not part of the public API.
|
|
147
|
+
|
|
148
|
+
| Selector | Description |
|
|
149
|
+
| ---------------------------------------------- | ------------------------------------------------------------------- |
|
|
150
|
+
| \`.BaselineUI-BarChart\` | The bar-chart root identifier. |
|
|
151
|
+
| \`.BaselineUI-BarChart[data-variant="default"]\` | Targets only the default variant. |
|
|
152
|
+
| \`.BaselineUI-BarChart[data-variant="stacked"]\` | Targets only the stacked variant. |
|
|
153
|
+
| \`.BaselineUI-Chart-Surface\` | The chart drawing area that wraps the SVG. |
|
|
154
|
+
| \`.BaselineUI-Chart-Legend\` | The legend list element. Only rendered when \`showLegend\` is \`true\`. |
|
|
155
|
+
| \`.BaselineUI-Chart-LegendItem\` | A single legend entry \u2014 one per series. |
|
|
156
|
+
| \`.BaselineUI-Chart-LegendSwatch\` | The colored swatch in a legend entry. |
|
|
157
|
+
| \`.BaselineUI-Chart-Tooltip\` | The hover/focus tooltip container. |
|
|
158
|
+
| \`.BaselineUI-Chart-TooltipItem\` | A single series entry in the tooltip. |
|
|
159
|
+
| \`.BaselineUI-Chart-TooltipSwatch\` | The colored swatch in a tooltip entry. |`,props:`interface BarChartProps {
|
|
160
|
+
/**
|
|
161
|
+
* Additional class name for the chart root.
|
|
162
|
+
*/
|
|
163
|
+
className?: string
|
|
164
|
+
/**
|
|
165
|
+
* Additional inline styles for the chart root.
|
|
166
|
+
*/
|
|
167
|
+
style?: CSSProperties
|
|
168
|
+
/**
|
|
169
|
+
* Chart width. @default "100%"
|
|
170
|
+
*/
|
|
171
|
+
width?: number | \`\${number}%\`
|
|
172
|
+
/**
|
|
173
|
+
* Chart height. @default 300
|
|
174
|
+
*/
|
|
175
|
+
height?: number
|
|
176
|
+
/**
|
|
177
|
+
* Whether to show the tooltip on hover. @default true
|
|
178
|
+
*/
|
|
179
|
+
showTooltip?: boolean
|
|
180
|
+
/**
|
|
181
|
+
* Whether to show the legend.
|
|
182
|
+
*/
|
|
183
|
+
showLegend?: boolean
|
|
184
|
+
/**
|
|
185
|
+
* Whether to show the grid lines. @default true
|
|
186
|
+
*/
|
|
187
|
+
showGrid?: boolean
|
|
188
|
+
/**
|
|
189
|
+
* Whether to show the X axis. @default true
|
|
190
|
+
*/
|
|
191
|
+
showXAxis?: boolean
|
|
192
|
+
/**
|
|
193
|
+
* Whether to show the Y axis. @default true
|
|
194
|
+
*/
|
|
195
|
+
showYAxis?: boolean
|
|
196
|
+
/**
|
|
197
|
+
* The data array to render. Each item is an object keyed by \`xAxisDataKey\` and bar \`dataKey\` values.
|
|
198
|
+
*/
|
|
199
|
+
data: unknown
|
|
200
|
+
/**
|
|
201
|
+
* Configuration for each bar series to render.
|
|
202
|
+
*/
|
|
203
|
+
bars: unknown
|
|
204
|
+
/**
|
|
205
|
+
* The data key for the X axis.
|
|
206
|
+
*/
|
|
207
|
+
xAxisDataKey: string
|
|
208
|
+
/**
|
|
209
|
+
* Visual variant. \`"stacked"\` stacks every series on top of each other; the
|
|
210
|
+
* default groups them side-by-side. Per-bar \`stackId\` overrides the variant
|
|
211
|
+
* default for that bar.
|
|
212
|
+
* @default "default"
|
|
213
|
+
*/
|
|
214
|
+
variant?: "default" | "stacked"
|
|
215
|
+
/**
|
|
216
|
+
* Fixed width of each bar in pixels. @default 12
|
|
217
|
+
*/
|
|
218
|
+
barSize?: number
|
|
219
|
+
/**
|
|
220
|
+
* Maximum gap in pixels between adjacent bars within the same X-axis
|
|
221
|
+
* category. Falls back toward a 1px floor when there isn't enough room
|
|
222
|
+
* to fit every bar at the requested gap.
|
|
223
|
+
* @default 4
|
|
224
|
+
*/
|
|
225
|
+
barGap?: number
|
|
226
|
+
/**
|
|
227
|
+
* Border radius applied to the top of each bar in pixels. @default 2
|
|
228
|
+
*/
|
|
229
|
+
barRadius?: number
|
|
230
|
+
}`,stories:{usage:[{id:"charts-barchart--basic",name:"Basic",snippet:`const Basic = () => <BarChart
|
|
231
|
+
data={yearlyData}
|
|
232
|
+
xAxisDataKey="year"
|
|
233
|
+
bars={[
|
|
234
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
235
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
236
|
+
]}
|
|
237
|
+
height={320} />;`},{id:"charts-barchart--single-series",name:"Single Series",snippet:`const SingleSeries = () => <BarChart
|
|
238
|
+
data={yearlyData}
|
|
239
|
+
xAxisDataKey="year"
|
|
240
|
+
bars={[{ dataKey: "revenue", name: "Revenue" }]}
|
|
241
|
+
height={320} />;`},{id:"charts-barchart--with-legend",name:"With Legend",snippet:`const WithLegend = () => <BarChart
|
|
242
|
+
data={yearlyData}
|
|
243
|
+
xAxisDataKey="year"
|
|
244
|
+
bars={[
|
|
245
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
246
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
247
|
+
]}
|
|
248
|
+
height={320}
|
|
249
|
+
showLegend />;`},{id:"charts-barchart--stacked",name:"Stacked",snippet:`const Stacked = () => <BarChart
|
|
250
|
+
data={yearlyData}
|
|
251
|
+
xAxisDataKey="year"
|
|
252
|
+
bars={[
|
|
253
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
254
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
255
|
+
]}
|
|
256
|
+
height={320}
|
|
257
|
+
variant="stacked"
|
|
258
|
+
showLegend />;`},{id:"charts-barchart--stacked-with-three-series",name:"Stacked With Three Series",snippet:`const StackedWithThreeSeries = () => <BarChart
|
|
259
|
+
data={yearlyData.map((row) => ({
|
|
260
|
+
...row,
|
|
261
|
+
profit: row.revenue - row.expenses,
|
|
262
|
+
}))}
|
|
263
|
+
xAxisDataKey="year"
|
|
264
|
+
bars={[
|
|
265
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
266
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
267
|
+
{ dataKey: "profit", name: "Profit" },
|
|
268
|
+
]}
|
|
269
|
+
height={320}
|
|
270
|
+
variant="stacked"
|
|
271
|
+
showLegend />;`},{id:"charts-barchart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <BarChart
|
|
272
|
+
data={yearlyData}
|
|
273
|
+
xAxisDataKey="year"
|
|
274
|
+
bars={[
|
|
275
|
+
{ dataKey: "revenue", name: "Revenue", color: "#7c3aed" },
|
|
276
|
+
{ dataKey: "expenses", name: "Expenses", color: "#f59e0b" },
|
|
277
|
+
]}
|
|
278
|
+
height={320}
|
|
279
|
+
showLegend />;`},{id:"charts-barchart--many-series",name:"Many Series",snippet:`const ManySeries = () => <BarChart
|
|
280
|
+
data={yearlyData.map((row) => ({
|
|
281
|
+
...row,
|
|
282
|
+
profit: row.revenue - row.expenses,
|
|
283
|
+
tax: Math.round(row.revenue * 0.18),
|
|
284
|
+
fees: Math.round(row.revenue * 0.05),
|
|
285
|
+
}))}
|
|
286
|
+
xAxisDataKey="year"
|
|
287
|
+
bars={[
|
|
288
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
289
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
290
|
+
{ dataKey: "profit", name: "Profit" },
|
|
291
|
+
{ dataKey: "tax", name: "Tax" },
|
|
292
|
+
{ dataKey: "fees", name: "Fees" },
|
|
293
|
+
]}
|
|
294
|
+
height={320}
|
|
295
|
+
showLegend />;`},{id:"charts-barchart--thicker-bars",name:"Thicker Bars",snippet:`const ThickerBars = () => <BarChart
|
|
296
|
+
data={yearlyData}
|
|
297
|
+
xAxisDataKey="year"
|
|
298
|
+
bars={[
|
|
299
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
300
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
301
|
+
]}
|
|
302
|
+
height={320}
|
|
303
|
+
barSize={24} />;`},{id:"charts-barchart--mixed-stacking",name:"Mixed Stacking",snippet:`const MixedStacking = () => <BarChart
|
|
304
|
+
data={yearlyData.map((row) => ({
|
|
305
|
+
...row,
|
|
306
|
+
other: Math.round(row.revenue * 0.15),
|
|
307
|
+
}))}
|
|
308
|
+
xAxisDataKey="year"
|
|
309
|
+
bars={[
|
|
310
|
+
{ dataKey: "revenue", name: "Revenue", stackId: "income" },
|
|
311
|
+
{ dataKey: "other", name: "Other income", stackId: "income" },
|
|
312
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
313
|
+
]}
|
|
314
|
+
height={320}
|
|
315
|
+
showLegend />;`},{id:"charts-barchart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <BarChart
|
|
316
|
+
data={yearlyData}
|
|
317
|
+
xAxisDataKey="year"
|
|
318
|
+
bars={[
|
|
319
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
320
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
321
|
+
]}
|
|
322
|
+
height={320}
|
|
323
|
+
showXAxis={false}
|
|
324
|
+
showYAxis={false}
|
|
325
|
+
showGrid={false} />;`}],implementation:`import React from "react";
|
|
326
|
+
|
|
327
|
+
import { BarChart } from "../BarChart";
|
|
328
|
+
|
|
329
|
+
import type { BarChartProps } from "../BarChart.types";
|
|
330
|
+
|
|
331
|
+
const data = [
|
|
332
|
+
{ year: "2020", revenue: 14_000_000 },
|
|
333
|
+
{ year: "2021", revenue: 24_000_000 },
|
|
334
|
+
{ year: "2022", revenue: 26_000_000 },
|
|
335
|
+
];
|
|
336
|
+
|
|
337
|
+
const bars = [{ dataKey: "revenue", name: "Revenue" }];
|
|
338
|
+
|
|
339
|
+
/**
|
|
340
|
+
* Wraps BarChart in a sized parent so the default \`width: "100%"\` resolves
|
|
341
|
+
* to a measurable size for layout-dependent assertions.
|
|
342
|
+
*/
|
|
343
|
+
export function SizedBarChart(
|
|
344
|
+
props: Partial<Pick<BarChartProps, "className" | "style">>,
|
|
345
|
+
) {
|
|
346
|
+
return (
|
|
347
|
+
<div style={{ width: 480, height: 300 }}>
|
|
348
|
+
<BarChart data={data} bars={bars} xAxisDataKey="year" {...props} />
|
|
349
|
+
</div>
|
|
350
|
+
);
|
|
351
|
+
}`},similarTo:[],figmaUrl:null},LineChart:{id:"charts-linechart",breadcrumb:"Charts/LineChart",importStatement:`import { Box } from "@baseline-ui/core";
|
|
352
|
+
import { LineChart } from "@baseline-ui/charts";`,description:"The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:'The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.\n\n* Renders one or more lines from a single dataset, keyed by `xAxisDataKey` and the per-line `dataKey`.\n* Themed axes, grid, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.\n* Default line colors cycle through theme support colors (`info`, `success`, `warning`, `error`); each line can override with a custom `color`.\n* Toggleable tooltip, legend, grid, and axes for compact or sparkline-style charts.\n* Configurable curve interpolation (`monotone`, `linear`, etc.) and per-line stroke width.\n* Responsive by default \u2014 fills the parent container width while preserving the configured `height`.\n* Built-in keyboard navigation across data points via Recharts\' accessibility layer.\n\n```jsx\nimport { LineChart } from "@baseline-ui/charts";\n\nconst data = [\n { month: "Jan", revenue: 4000, expenses: 2400 },\n { month: "Feb", revenue: 3000, expenses: 1398 },\n { month: "Mar", revenue: 5000, expenses: 3200 },\n];\n\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n/>;\n```\n\nThe default variant renders a full-width line chart with grid, axes, and tooltip enabled. Use `showLegend` to also render a legend above the chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n showLegend\n/>\n```\n\nSet `variant="sparkline"` for a compact 40\xD720 inline trend indicator. Grid, axes, tooltip, and legend are hidden by default, the stroke is thinner, and chart margins are reduced to a 1px inset (just enough to prevent stroke clipping) so the line fills the box. Each chrome flag can still be re-enabled individually \u2014 for example, `showTooltip` re-enables the tooltip on a sparkline.\n\n```jsx\n<LineChart\n variant="sparkline"\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue" }]}\n/>\n```\n\nPass a single entry in `lines` to render a single-series chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue", name: "Revenue" }]}\n/>\n```\n\nDefault line colors cycle through `info` \u2192 `success` \u2192 `warning` \u2192 `error` and wrap modulo four. Provide a `color` per line to override the default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n { dataKey: "profit", name: "Profit" },\n { dataKey: "tax", name: "Tax" },\n { dataKey: "fees", name: "Fees" },\n ]}\n showLegend\n/>\n```\n\nSet `dot` to `true` on a line to render a marker at each data point.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", dot: true },\n { dataKey: "expenses", name: "Expenses", dot: true },\n ]}\n/>\n```\n\nThe `type` prop on each line controls the curve interpolation. The default is `monotone`; use `linear` for straight segments between points. Any [Recharts curve type](https://recharts.org/en-US/api/Line#type) is supported.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", type: "linear" },\n { dataKey: "expenses", name: "Expenses", type: "linear" },\n ]}\n/>\n```\n\nOverride the default theme colors by passing `color` and `strokeWidth` per line.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", color: "#7c3aed", strokeWidth: 3 },\n { dataKey: "expenses", name: "Expenses", color: "#f59e0b", strokeWidth: 3 },\n ]}\n showLegend\n/>\n```\n\n`showTooltip`, `showGrid`, `showXAxis`, and `showYAxis` toggle the corresponding chart chrome individually. They default to `true` for the default variant and `false` for the `sparkline` variant. Pass an explicit value to override the variant default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[...]}\n showXAxis={false}\n showYAxis={false}\n showGrid={false}\n/>\n```\n\nThe chart surface is keyboard-focusable on the default variant. When focused via keyboard, the surface shows a focus ring and arrow keys move an indicator across data points, opening the tooltip at each step. The `sparkline` variant disables the accessibility layer and is not focusable.\n\n| Key | Function |\n| ------------- | --------------------------------------------------------------------------- |\n| `Tab` | Moves focus to the chart surface (default variant only). |\n| `Arrow Right` | Advances the active data point one step to the right and shows the tooltip. |\n| `Arrow Left` | Advances the active data point one step to the left and shows the tooltip. |\n| `Escape` | Dismisses the tooltip and clears the active data point. |\n\nThe `sparkline` variant disables the accessibility layer and is not keyboard-navigable.\n\nLineChart shares its legend, tooltip, and surface markup with every other chart in the package. The `BaselineUI-Chart-*` selectors are stable shared hooks; the kind-specific `BaselineUI-LineChart` class lets you scope styles to line charts only. Internal Recharts class names are not part of the public API.\n\n| Selector | Description |\n| ------------------------------------------------- | ------------------------------------------------------------------- |\n| `.BaselineUI-LineChart` | The line-chart root identifier. |\n| `.BaselineUI-LineChart[data-variant="default"]` | Targets only the default variant. |\n| `.BaselineUI-LineChart[data-variant="sparkline"]` | Targets only the sparkline variant. |\n| `.BaselineUI-Chart-Surface` | The chart drawing area that wraps the SVG. |\n| `.BaselineUI-Chart-Legend` | The legend list element. Only rendered when `showLegend` is `true`. |\n| `.BaselineUI-Chart-LegendItem` | A single legend entry \u2014 one per series. |\n| `.BaselineUI-Chart-LegendSwatch` | The colored swatch in a legend entry. |\n| `.BaselineUI-Chart-Tooltip` | The hover/focus tooltip container. |\n| `.BaselineUI-Chart-TooltipItem` | A single series entry in the tooltip. |\n| `.BaselineUI-Chart-TooltipSwatch` | The colored swatch in a tooltip entry. |',props:`interface LineChartProps {
|
|
353
|
+
/**
|
|
354
|
+
* Additional class name for the chart root.
|
|
355
|
+
*/
|
|
356
|
+
className?: string
|
|
357
|
+
/**
|
|
358
|
+
* Additional inline styles for the chart root.
|
|
359
|
+
*/
|
|
360
|
+
style?: CSSProperties
|
|
361
|
+
/**
|
|
362
|
+
* Chart width. @default "100%"
|
|
363
|
+
*/
|
|
364
|
+
width?: number | \`\${number}%\`
|
|
365
|
+
/**
|
|
366
|
+
* Chart height. @default 300
|
|
367
|
+
*/
|
|
368
|
+
height?: number
|
|
369
|
+
/**
|
|
370
|
+
* Whether to show the tooltip on hover. @default true
|
|
371
|
+
*/
|
|
372
|
+
showTooltip?: boolean
|
|
373
|
+
/**
|
|
374
|
+
* Whether to show the legend.
|
|
375
|
+
*/
|
|
376
|
+
showLegend?: boolean
|
|
377
|
+
/**
|
|
378
|
+
* Whether to show the grid lines. @default true
|
|
379
|
+
*/
|
|
380
|
+
showGrid?: boolean
|
|
381
|
+
/**
|
|
382
|
+
* Whether to show the X axis. @default true
|
|
383
|
+
*/
|
|
384
|
+
showXAxis?: boolean
|
|
385
|
+
/**
|
|
386
|
+
* Whether to show the Y axis. @default true
|
|
387
|
+
*/
|
|
388
|
+
showYAxis?: boolean
|
|
389
|
+
/**
|
|
390
|
+
* The data array to render. Each item is an object keyed by \`xAxisDataKey\` and line \`dataKey\` values.
|
|
391
|
+
*/
|
|
392
|
+
data: unknown
|
|
393
|
+
/**
|
|
394
|
+
* Configuration for each line to render.
|
|
395
|
+
*/
|
|
396
|
+
lines: unknown
|
|
397
|
+
/**
|
|
398
|
+
* The data key for the X axis.
|
|
399
|
+
*/
|
|
400
|
+
xAxisDataKey: string
|
|
401
|
+
/**
|
|
402
|
+
* Visual variant. \`"sparkline"\` renders a compact 40\xD720 line with no axes,
|
|
403
|
+
* grid, tooltip, or legend \u2014 suitable for inline trend indicators.
|
|
404
|
+
* @default "default"
|
|
405
|
+
*/
|
|
406
|
+
variant?: "default" | "sparkline"
|
|
407
|
+
}`,stories:{usage:[{id:"charts-linechart--basic",name:"Basic",snippet:`const Basic = () => <LineChart
|
|
408
|
+
data={monthlyData}
|
|
409
|
+
xAxisDataKey="month"
|
|
410
|
+
lines={[
|
|
411
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
412
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
413
|
+
]}
|
|
414
|
+
height={320} />;`},{id:"charts-linechart--single-line",name:"Single Line",snippet:`const SingleLine = () => <LineChart
|
|
415
|
+
data={monthlyData}
|
|
416
|
+
xAxisDataKey="month"
|
|
417
|
+
lines={[{ dataKey: "revenue", name: "Revenue" }]}
|
|
418
|
+
height={320} />;`},{id:"charts-linechart--with-legend",name:"With Legend",snippet:`const WithLegend = () => <LineChart
|
|
419
|
+
data={monthlyData}
|
|
420
|
+
xAxisDataKey="month"
|
|
421
|
+
lines={[
|
|
422
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
423
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
424
|
+
]}
|
|
425
|
+
height={320}
|
|
426
|
+
showLegend />;`},{id:"charts-linechart--with-dots",name:"With Dots",snippet:`const WithDots = () => <LineChart
|
|
427
|
+
data={monthlyData}
|
|
428
|
+
xAxisDataKey="month"
|
|
429
|
+
lines={[
|
|
430
|
+
{ dataKey: "revenue", name: "Revenue", dot: true },
|
|
431
|
+
{ dataKey: "expenses", name: "Expenses", dot: true },
|
|
432
|
+
]}
|
|
433
|
+
height={320} />;`},{id:"charts-linechart--linear-curve",name:"Linear Curve",snippet:`const LinearCurve = () => <LineChart
|
|
434
|
+
data={monthlyData}
|
|
435
|
+
xAxisDataKey="month"
|
|
436
|
+
lines={[
|
|
437
|
+
{ dataKey: "revenue", name: "Revenue", type: "linear" },
|
|
438
|
+
{ dataKey: "expenses", name: "Expenses", type: "linear" },
|
|
439
|
+
]}
|
|
440
|
+
height={320} />;`},{id:"charts-linechart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <LineChart
|
|
441
|
+
data={monthlyData}
|
|
442
|
+
xAxisDataKey="month"
|
|
443
|
+
lines={[
|
|
444
|
+
{ dataKey: "revenue", name: "Revenue", color: "#7c3aed", strokeWidth: 3 },
|
|
445
|
+
{
|
|
446
|
+
dataKey: "expenses",
|
|
447
|
+
name: "Expenses",
|
|
448
|
+
color: "#f59e0b",
|
|
449
|
+
strokeWidth: 3,
|
|
450
|
+
},
|
|
451
|
+
]}
|
|
452
|
+
height={320}
|
|
453
|
+
showLegend />;`},{id:"charts-linechart--many-lines",name:"Many Lines",snippet:`const ManyLines = () => <LineChart
|
|
454
|
+
data={monthlyData.map((row) => ({
|
|
455
|
+
...row,
|
|
456
|
+
profit: row.revenue - row.expenses,
|
|
457
|
+
tax: Math.round(row.revenue * 0.18),
|
|
458
|
+
fees: Math.round(row.revenue * 0.05),
|
|
459
|
+
}))}
|
|
460
|
+
xAxisDataKey="month"
|
|
461
|
+
lines={[
|
|
462
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
463
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
464
|
+
{ dataKey: "profit", name: "Profit" },
|
|
465
|
+
{ dataKey: "tax", name: "Tax" },
|
|
466
|
+
{ dataKey: "fees", name: "Fees" },
|
|
467
|
+
]}
|
|
468
|
+
height={320}
|
|
469
|
+
showLegend />;`},{id:"charts-linechart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <LineChart
|
|
470
|
+
data={monthlyData}
|
|
471
|
+
xAxisDataKey="month"
|
|
472
|
+
lines={[
|
|
473
|
+
{ dataKey: "revenue", name: "Revenue" },
|
|
474
|
+
{ dataKey: "expenses", name: "Expenses" },
|
|
475
|
+
]}
|
|
476
|
+
height={320}
|
|
477
|
+
showXAxis={false}
|
|
478
|
+
showYAxis={false}
|
|
479
|
+
showGrid={false} />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
|
|
480
|
+
data={monthlyData}
|
|
481
|
+
xAxisDataKey="month"
|
|
482
|
+
lines={[{ dataKey: "revenue" }]}
|
|
483
|
+
height={64}
|
|
484
|
+
variant="sparkline"
|
|
485
|
+
width={320} />;`}],implementation:`import React from "react";
|
|
486
|
+
|
|
487
|
+
import { LineChart } from "../LineChart";
|
|
488
|
+
|
|
489
|
+
import type { LineChartProps } from "../LineChart.types";
|
|
490
|
+
|
|
491
|
+
const data = [
|
|
492
|
+
{ month: "Jan", revenue: 4000 },
|
|
493
|
+
{ month: "Feb", revenue: 3000 },
|
|
494
|
+
{ month: "Mar", revenue: 5000 },
|
|
495
|
+
];
|
|
496
|
+
|
|
497
|
+
const lines = [{ dataKey: "revenue", name: "Revenue" }];
|
|
498
|
+
|
|
499
|
+
/**
|
|
500
|
+
* Wraps LineChart in a sized parent so the default \`width: "100%"\` resolves
|
|
501
|
+
* to a measurable size for layout-dependent assertions.
|
|
502
|
+
*/
|
|
503
|
+
export function SizedLineChart(
|
|
504
|
+
props: Partial<Pick<LineChartProps, "className" | "style">>,
|
|
505
|
+
) {
|
|
506
|
+
return (
|
|
507
|
+
<div style={{ width: 480, height: 300 }}>
|
|
508
|
+
<LineChart data={data} lines={lines} xAxisDataKey="month" {...props} />
|
|
509
|
+
</div>
|
|
510
|
+
);
|
|
511
|
+
}`},similarTo:[],figmaUrl:null},PieChart:{id:"charts-piechart",breadcrumb:"Charts/PieChart",importStatement:`import { Box } from "@baseline-ui/core";
|
|
512
|
+
import { PieChart } from "@baseline-ui/charts";`,description:"The `PieChart` component renders a responsive pie chart for proportional data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:'The `PieChart` component renders a responsive pie chart for proportional data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.\n\n* Renders one wedge per slice, sized proportionally to its `value`.\n* Slices are sorted in descending value order \u2014 largest first, regardless of input order. Default colors are assigned by sorted index, so the largest slice always gets the first theme color.\n* Themed slices, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.\n* Default slice colors cycle through theme support colors (`info`, `success`, `error`, `warning`); each slice can override with a custom `color`.\n* Inline percentage labels rendered inside each slice, with small slices (under 5%) automatically suppressed.\n* Hover or focus highlights a slice with an enlarged outline rendered behind it; the highlighted slice is brought to the front so its outline isn\'t clipped by neighbors.\n* Donut variant via the `innerRadius` prop.\n* Toggleable tooltip, legend, and labels.\n* Responsive by default \u2014 fills the parent container width while preserving the configured `height`.\n* Built-in keyboard navigation across slices via Recharts\' accessibility layer.\n\n```jsx\nimport { PieChart } from "@baseline-ui/charts";\n\nconst data = [\n { name: "Water", value: 46 },\n { name: "Earth", value: 26 },\n { name: "Wind", value: 18 },\n { name: "Fire", value: 10 },\n];\n\n<PieChart data={data} />;\n```\n\nPass `innerRadius` to render a donut chart instead of a solid pie.\n\n```jsx\n<PieChart data={data} innerRadius={50} />\n```\n\nOverride the default theme colors by passing `color` per slice.\n\n```jsx\n<PieChart\n data={[\n { name: "Water", value: 46, color: "#0ea5e9" },\n { name: "Earth", value: 26, color: "#65a30d" },\n { name: "Wind", value: 18, color: "#a855f7" },\n { name: "Fire", value: 10, color: "#f97316" },\n ]}\n/>\n```\n\nDefault colors cycle through `info` \u2192 `success` \u2192 `error` \u2192 `warning` and wrap modulo four. Provide a `color` per slice to override.\n\nLong names wrap within legend entries.\n\nSlices contributing less than 5% of the total automatically have their inline label suppressed; their value is still visible via the tooltip and legend.\n\nWhen a slice is hovered with a pointer, focused via keyboard, or activated via the accessibility layer, an enlarged copy of the slice is rendered behind the original \u2014 visible as a thin outline that follows the slice\'s outer arc. The active slice is also reordered to render on top of its neighbors so the outline isn\'t clipped.\n\nThe chart surface is keyboard-focusable (single tab stop \u2014 only the SVG surface, not the inner pie group). When focused, arrow keys move an active indicator across slices and open the tooltip at each step.\n\n```jsx\n<PieChart data={data} showTooltip={false} />\n```\n\n```jsx\n<PieChart data={data} showLabels={false} />\n```\n\n```jsx\n<PieChart data={data} showLegend={false} />\n```\n\n| Key | Function |\n| ------------- | ------------------------------------------------------------------ |\n| `Tab` | Moves focus to the chart surface. |\n| `Arrow Right` | Advances the active slice clockwise and shows the tooltip. |\n| `Arrow Left` | Advances the active slice counter-clockwise and shows the tooltip. |\n| `Escape` | Dismisses the tooltip and clears the active slice. |\n\nPieChart shares its legend, tooltip, and surface markup with every other chart in the package. The `BaselineUI-Chart-*` selectors are stable shared hooks; the kind-specific `BaselineUI-PieChart` class lets you scope styles to pie charts only. Internal Recharts class names are not part of the public API.\n\n| Selector | Description |\n| --------------------------------- | ------------------------------------------------------------------- |\n| `.BaselineUI-PieChart` | The pie-chart root identifier. |\n| `.BaselineUI-Chart-Surface` | The chart drawing area that wraps the SVG. |\n| `.BaselineUI-Chart-Legend` | The legend list element. Only rendered when `showLegend` is `true`. |\n| `.BaselineUI-Chart-LegendItem` | A single legend entry \u2014 one per slice. |\n| `.BaselineUI-Chart-LegendSwatch` | The colored swatch in a legend entry. |\n| `.BaselineUI-Chart-Tooltip` | The hover/focus tooltip container. |\n| `.BaselineUI-Chart-TooltipItem` | A single slice entry in the tooltip. |\n| `.BaselineUI-Chart-TooltipSwatch` | The colored swatch in a tooltip entry. |',props:`interface PieChartProps {
|
|
513
|
+
/**
|
|
514
|
+
* Additional class name for the chart root.
|
|
515
|
+
*/
|
|
516
|
+
className?: string
|
|
517
|
+
/**
|
|
518
|
+
* Additional inline styles for the chart root.
|
|
519
|
+
*/
|
|
520
|
+
style?: CSSProperties
|
|
521
|
+
/**
|
|
522
|
+
* Chart width. @default "100%"
|
|
523
|
+
*/
|
|
524
|
+
width?: number | \`\${number}%\`
|
|
525
|
+
/**
|
|
526
|
+
* Chart height. @default 300
|
|
527
|
+
*/
|
|
528
|
+
height?: number
|
|
529
|
+
/**
|
|
530
|
+
* Whether to show the tooltip on hover. @default true
|
|
531
|
+
*/
|
|
532
|
+
showTooltip?: boolean
|
|
533
|
+
/**
|
|
534
|
+
* Whether to show the legend.
|
|
535
|
+
*/
|
|
536
|
+
showLegend?: boolean
|
|
537
|
+
/**
|
|
538
|
+
* The slices to render. Each slice contributes a wedge proportional to \`value\`.
|
|
539
|
+
*/
|
|
540
|
+
data: unknown
|
|
541
|
+
/**
|
|
542
|
+
* Inner radius in pixels. @default 0
|
|
543
|
+
*/
|
|
544
|
+
innerRadius?: number
|
|
545
|
+
/**
|
|
546
|
+
* Outer radius in pixels. When omitted, the chart fits the smaller of its
|
|
547
|
+
* width and height.
|
|
548
|
+
*/
|
|
549
|
+
outerRadius?: number
|
|
550
|
+
/**
|
|
551
|
+
* Whether to render percentage labels inside each slice. @default true
|
|
552
|
+
*/
|
|
553
|
+
showLabels?: boolean
|
|
554
|
+
}`,stories:{usage:[{id:"charts-piechart--basic",name:"Basic",snippet:"const Basic = () => <PieChart data={elementsData} height={257} />;"},{id:"charts-piechart--no-labels",name:"No Labels",snippet:"const NoLabels = () => <PieChart data={elementsData} height={257} showLabels={false} />;"},{id:"charts-piechart--no-legend",name:"No Legend",snippet:"const NoLegend = () => <PieChart data={elementsData} height={257} showLegend={false} />;"},{id:"charts-piechart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <PieChart
|
|
555
|
+
data={[
|
|
556
|
+
{ name: "Water", value: 46, color: "#0ea5e9" },
|
|
557
|
+
{ name: "Earth", value: 26, color: "#65a30d" },
|
|
558
|
+
{ name: "Wind", value: 18, color: "#a855f7" },
|
|
559
|
+
{ name: "Fire", value: 10, color: "#f97316" },
|
|
560
|
+
]}
|
|
561
|
+
height={257} />;`},{id:"charts-piechart--many-slices",name:"Many Slices",snippet:`const ManySlices = () => <PieChart
|
|
562
|
+
data={[
|
|
563
|
+
{ name: "Water", value: 30 },
|
|
564
|
+
{ name: "Earth", value: 22 },
|
|
565
|
+
{ name: "Wind", value: 16 },
|
|
566
|
+
{ name: "Fire", value: 12 },
|
|
567
|
+
{ name: "Aether", value: 10 },
|
|
568
|
+
{ name: "Void", value: 6 },
|
|
569
|
+
{ name: "Light", value: 4 },
|
|
570
|
+
]}
|
|
571
|
+
height={257} />;`},{id:"charts-piechart--donut",name:"Donut",snippet:"const Donut = () => <PieChart data={elementsData} height={257} innerRadius={50} />;"},{id:"charts-piechart--no-tooltip",name:"No Tooltip",snippet:"const NoTooltip = () => <PieChart data={elementsData} height={257} showTooltip={false} />;"},{id:"charts-piechart--long-legend-names",name:"Long Legend Names",snippet:`const LongLegendNames = () => <PieChart
|
|
572
|
+
data={[
|
|
573
|
+
{ name: "Atmospheric water vapor", value: 46 },
|
|
574
|
+
{ name: "Subterranean rock formations", value: 26 },
|
|
575
|
+
{ name: "High-altitude jet streams", value: 18 },
|
|
576
|
+
{ name: "Volcanic core temperatures", value: 10 },
|
|
577
|
+
]}
|
|
578
|
+
height={257} />;`},{id:"charts-piechart--small-slices-below-five-percent",name:"Small Slices Below Five Percent",snippet:`const SmallSlicesBelowFivePercent = () => <PieChart
|
|
579
|
+
data={[
|
|
580
|
+
{ name: "Major", value: 92 },
|
|
581
|
+
{ name: "Minor", value: 4 },
|
|
582
|
+
{ name: "Trace", value: 3 },
|
|
583
|
+
{ name: "Edge", value: 1 },
|
|
584
|
+
]}
|
|
585
|
+
height={257} />;`}],implementation:`import React from "react";
|
|
586
|
+
|
|
587
|
+
import { PieChart } from "../PieChart";
|
|
588
|
+
|
|
589
|
+
import type { PieChartProps } from "../PieChart.types";
|
|
590
|
+
|
|
591
|
+
const data = [
|
|
592
|
+
{ name: "Water", value: 46 },
|
|
593
|
+
{ name: "Earth", value: 26 },
|
|
594
|
+
{ name: "Wind", value: 18 },
|
|
595
|
+
{ name: "Fire", value: 10 },
|
|
596
|
+
];
|
|
597
|
+
|
|
598
|
+
/**
|
|
599
|
+
* Wraps PieChart in a sized parent so the default \`width: "100%"\` resolves
|
|
600
|
+
* to a measurable size for layout-dependent assertions.
|
|
601
|
+
*/
|
|
602
|
+
export function SizedPieChart(
|
|
603
|
+
props: Partial<Pick<PieChartProps, "className" | "style">>,
|
|
604
|
+
) {
|
|
605
|
+
return (
|
|
606
|
+
<div style={{ width: 320, height: 280 }}>
|
|
607
|
+
<PieChart data={data} {...props} />
|
|
608
|
+
</div>
|
|
609
|
+
);
|
|
610
|
+
}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
|
|
12
611
|
|
|
13
612
|
* Full keyboard navigation
|
|
14
613
|
* It can expand one or multiple items
|
|
@@ -30544,7 +31143,7 @@ padding={[null, "lg", "xl"]}
|
|
|
30544
31143
|
|
|
30545
31144
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
30546
31145
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
30547
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.58.0"};var u=`
|
|
31146
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.59.0"};var u=`
|
|
30548
31147
|
# Baseline UI MCP Server Guidelines
|
|
30549
31148
|
|
|
30550
31149
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -30651,7 +31250,7 @@ import { ComponentName } from "@baseline-ui/core";
|
|
|
30651
31250
|
Generate a live demo URL for a Baseline UI story. Use story IDs from the component info tool to view interactive examples. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how to customize it.
|
|
30652
31251
|
`,b=`
|
|
30653
31252
|
Get the Figma URL for a given component. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
|
|
30654
|
-
`,
|
|
31253
|
+
`,s=`
|
|
30655
31254
|
Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
|
|
30656
31255
|
|
|
30657
31256
|
## Usage
|
|
@@ -30659,7 +31258,7 @@ Best practices and guidelines for using Baseline UI components, styling, and des
|
|
|
30659
31258
|
Use this resource to:
|
|
30660
31259
|
- Understand best practices for using Baseline UI components
|
|
30661
31260
|
- Understand styling guidelines for using Baseline UI components
|
|
30662
|
-
`,
|
|
31261
|
+
`,l=`
|
|
30663
31262
|
A guide for implementing styling elements in Baseline UI components or applying styling to existing components. READ THIS BEFORE DOING ANYTHING.
|
|
30664
31263
|
`,g=`
|
|
30665
31264
|
List all 8 available resources in the Baseline UI MCP server with their descriptions and URIs. Use this tool to discover what information and documentation is available.
|
|
@@ -30708,4 +31307,4 @@ ${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description
|
|
|
30708
31307
|
|
|
30709
31308
|
${t.map(e=>"- "+e).join(`
|
|
30710
31309
|
`)}`).join(`
|
|
30711
|
-
`);async function S(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:
|
|
31310
|
+
`);async function S(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]}));let t=new stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await S())();
|