@baseline-ui/mcp 2.0.0 → 2.1.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 +6 -0
- package/README.md +21 -4
- package/dist/chunk-GTOFKGAS.js +36107 -0
- package/dist/index.js +1 -35761
- package/dist/{index.cjs → server.cjs} +386 -41
- package/dist/server.d.cts +5 -0
- package/dist/server.d.ts +5 -0
- package/dist/server.js +1 -0
- package/package.json +15 -2
- package/sbom.json +6 -6
- package/dist/index.d.cts +0 -1
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
'use strict';var mcp_js=require('@modelcontextprotocol/sdk/server/mcp.js'),stdio_js=require('@modelcontextprotocol/sdk/server/stdio.js'),zod=require('zod');/**
|
|
3
|
-
* Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
|
|
4
|
-
*
|
|
5
|
-
* THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
|
|
6
|
-
* AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
|
|
7
|
-
* UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
|
|
8
|
-
* This notice may not be removed from this file.
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
var o={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
|
|
1
|
+
'use strict';var mcp_js=require('@modelcontextprotocol/sdk/server/mcp.js'),zod=require('zod');var t={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
|
|
12
2
|
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
3
|
|
|
14
4
|
* Renders one or more bar series from a single dataset, keyed by \`xAxisDataKey\` and the per-bar \`dataKey\`.
|
|
@@ -992,7 +982,7 @@ export const AccordionWithDisabledItemsExample: React.FC<
|
|
|
992
982
|
Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
|
|
993
983
|
> = (props) => {
|
|
994
984
|
return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
|
|
995
|
-
};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.",documentation:'`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\
|
|
985
|
+
};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.",documentation:'`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\nThe button has six neutral variants: `primary`, `secondary`, `tertiary`, `popover`, `toolbar` and `ghost`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n```jsx\n<ActionButton label="Primary" />\n<ActionButton label="Secondary" variant="secondary" />\n<ActionButton label="Tertiary" variant="tertiary" />\n<ActionButton label={"Toolbar"} variant={"toolbar"} />\n<ActionButton label="Ghost" variant="ghost" />\n<ActionButton label="Popover" variant="popover" />\n```\n\n`success`, `warning` and `error` carry a support colour for actions whose outcome matters \u2014 confirming, acknowledging a risk, or deleting. Each comes in the same three emphasis levels as the neutral variants, so a support-coloured button can sit at whatever weight the surrounding layout calls for:\n\n* `{name}` \u2014 filled, for the primary action in its context\n* `{name}-secondary` \u2014 tinted fill, for a lower-emphasis action\n* `{name}-tertiary` \u2014 outline that fills with the support colour on hover and on keyboard focus\n\nWhen disabled, all three levels drop the support colour and render in the neutral disabled treatment.\n\n```jsx\n<ActionButton label="Success" variant="success" />\n<ActionButton label="Success" variant="success-secondary" />\n<ActionButton label="Success" variant="success-tertiary" />\n<ActionButton label="Warning" variant="warning" />\n<ActionButton label="Warning" variant="warning-secondary" />\n<ActionButton label="Warning" variant="warning-tertiary" />\n<ActionButton label="Error" variant="error" />\n<ActionButton label="Error" variant="error-secondary" />\n<ActionButton label="Error" variant="error-tertiary" />\n```\n\nActionButton supports three sizes: `sm` (default), `md`, and `lg`. You can change the size by passing the `size` prop.\n\n```jsx\n<ActionButton label="Small (default)" size="sm" />\n<ActionButton label="Medium" size="md" />\n<ActionButton label="Large" size="lg" />\n```\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions. The `-secondary` and `-tertiary` support variants are omitted below because they render identically to disabled `secondary` and `tertiary`.\n\n```jsx\n<ActionButton label="Primary" isDisabled />\n<ActionButton label="Secondary" variant="secondary" isDisabled />\n<ActionButton label="Tertiary" variant="tertiary" isDisabled />\n<ActionButton label="Ghost" variant="ghost" isDisabled />\n<ActionButton label="Toolbar" variant="toolbar" isDisabled />\n<ActionButton label="Popover" variant="popover" isDisabled />\n<ActionButton label="Success" variant="success" isDisabled />\n<ActionButton label="Warning" variant="warning" isDisabled />\n<ActionButton label="Error" variant="error" isDisabled />\n```\n\nYou can place an icon before or after the label by passing the `iconStart` or `iconEnd` props. Choose the icon entrypoint that matches your button size: `@baseline-ui/icons/16` for `sm`, `@baseline-ui/icons/20` for `md`, and `@baseline-ui/icons/24` for `lg`.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<ActionButton label="Label" iconStart={EllipseIcon} />\n<ActionButton label="Label" iconEnd={EllipseIcon} />\n```\n\nYou can listen for events by passing the `onPress` prop. The `onPress` prop will fire when the button is activated by mouse, touch, or keyboard interactions.\n\n```jsx\n<ActionButton label="Click Me" onPress={() => alert("Hello World")} />\n```\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n\n| Key | Function |\n| ------- | --------------------- |\n| `Space` | Activates the button. |\n| `Enter` | Activates the button. |',props:`interface ActionButtonProps {
|
|
996
986
|
/**
|
|
997
987
|
* The button's class name.
|
|
998
988
|
*/
|
|
@@ -1010,6 +1000,13 @@ slot?: string | null
|
|
|
1010
1000
|
/**
|
|
1011
1001
|
* The button's variant.
|
|
1012
1002
|
*
|
|
1003
|
+
* The \`success\`, \`warning\` and \`error\` variants carry a support colour. Each
|
|
1004
|
+
* comes in three emphasis levels, mirroring \`primary\`/\`secondary\`/\`tertiary\`:
|
|
1005
|
+
* the bare name is the filled treatment, \`-secondary\` is a tinted fill and
|
|
1006
|
+
* \`-tertiary\` is an outline that fills with the support colour on hover and
|
|
1007
|
+
* on keyboard focus. When disabled, all three drop the support colour and
|
|
1008
|
+
* render in the neutral disabled treatment.
|
|
1009
|
+
*
|
|
1013
1010
|
* @default primary
|
|
1014
1011
|
*/
|
|
1015
1012
|
variant?: | "primary"
|
|
@@ -1019,8 +1016,14 @@ variant?: | "primary"
|
|
|
1019
1016
|
| "popover"
|
|
1020
1017
|
| "toolbar"
|
|
1021
1018
|
| "success"
|
|
1019
|
+
| "success-secondary"
|
|
1020
|
+
| "success-tertiary"
|
|
1022
1021
|
| "warning"
|
|
1022
|
+
| "warning-secondary"
|
|
1023
|
+
| "warning-tertiary"
|
|
1023
1024
|
| "error"
|
|
1025
|
+
| "error-secondary"
|
|
1026
|
+
| "error-tertiary"
|
|
1024
1027
|
/**
|
|
1025
1028
|
* The button's label.
|
|
1026
1029
|
*/
|
|
@@ -1207,6 +1210,114 @@ size?: "sm" | "md" | "lg"
|
|
|
1207
1210
|
{ variant: "error", size: "lg", iconStart: E24 },
|
|
1208
1211
|
{ variant: "error", size: "lg", iconEnd: E24 },
|
|
1209
1212
|
],
|
|
1213
|
+
"Success Secondary": [
|
|
1214
|
+
{ variant: "success-secondary" },
|
|
1215
|
+
{ variant: "success-secondary", isDisabled: true },
|
|
1216
|
+
{ variant: "success-secondary", iconStart: EllipseIcon },
|
|
1217
|
+
{ variant: "success-secondary", iconEnd: EllipseIcon },
|
|
1218
|
+
],
|
|
1219
|
+
"Success Secondary Medium": [
|
|
1220
|
+
{ variant: "success-secondary", size: "md" },
|
|
1221
|
+
{ variant: "success-secondary", size: "md", isDisabled: true },
|
|
1222
|
+
{ variant: "success-secondary", size: "md", iconStart: E20 },
|
|
1223
|
+
{ variant: "success-secondary", size: "md", iconEnd: E20 },
|
|
1224
|
+
],
|
|
1225
|
+
"Success Secondary Large": [
|
|
1226
|
+
{ variant: "success-secondary", size: "lg" },
|
|
1227
|
+
{ variant: "success-secondary", size: "lg", isDisabled: true },
|
|
1228
|
+
{ variant: "success-secondary", size: "lg", iconStart: E24 },
|
|
1229
|
+
{ variant: "success-secondary", size: "lg", iconEnd: E24 },
|
|
1230
|
+
],
|
|
1231
|
+
"Success Tertiary": [
|
|
1232
|
+
{ variant: "success-tertiary" },
|
|
1233
|
+
{ variant: "success-tertiary", isDisabled: true },
|
|
1234
|
+
{ variant: "success-tertiary", iconStart: EllipseIcon },
|
|
1235
|
+
{ variant: "success-tertiary", iconEnd: EllipseIcon },
|
|
1236
|
+
],
|
|
1237
|
+
"Success Tertiary Medium": [
|
|
1238
|
+
{ variant: "success-tertiary", size: "md" },
|
|
1239
|
+
{ variant: "success-tertiary", size: "md", isDisabled: true },
|
|
1240
|
+
{ variant: "success-tertiary", size: "md", iconStart: E20 },
|
|
1241
|
+
{ variant: "success-tertiary", size: "md", iconEnd: E20 },
|
|
1242
|
+
],
|
|
1243
|
+
"Success Tertiary Large": [
|
|
1244
|
+
{ variant: "success-tertiary", size: "lg" },
|
|
1245
|
+
{ variant: "success-tertiary", size: "lg", isDisabled: true },
|
|
1246
|
+
{ variant: "success-tertiary", size: "lg", iconStart: E24 },
|
|
1247
|
+
{ variant: "success-tertiary", size: "lg", iconEnd: E24 },
|
|
1248
|
+
],
|
|
1249
|
+
"Warning Secondary": [
|
|
1250
|
+
{ variant: "warning-secondary" },
|
|
1251
|
+
{ variant: "warning-secondary", isDisabled: true },
|
|
1252
|
+
{ variant: "warning-secondary", iconStart: EllipseIcon },
|
|
1253
|
+
{ variant: "warning-secondary", iconEnd: EllipseIcon },
|
|
1254
|
+
],
|
|
1255
|
+
"Warning Secondary Medium": [
|
|
1256
|
+
{ variant: "warning-secondary", size: "md" },
|
|
1257
|
+
{ variant: "warning-secondary", size: "md", isDisabled: true },
|
|
1258
|
+
{ variant: "warning-secondary", size: "md", iconStart: E20 },
|
|
1259
|
+
{ variant: "warning-secondary", size: "md", iconEnd: E20 },
|
|
1260
|
+
],
|
|
1261
|
+
"Warning Secondary Large": [
|
|
1262
|
+
{ variant: "warning-secondary", size: "lg" },
|
|
1263
|
+
{ variant: "warning-secondary", size: "lg", isDisabled: true },
|
|
1264
|
+
{ variant: "warning-secondary", size: "lg", iconStart: E24 },
|
|
1265
|
+
{ variant: "warning-secondary", size: "lg", iconEnd: E24 },
|
|
1266
|
+
],
|
|
1267
|
+
"Warning Tertiary": [
|
|
1268
|
+
{ variant: "warning-tertiary" },
|
|
1269
|
+
{ variant: "warning-tertiary", isDisabled: true },
|
|
1270
|
+
{ variant: "warning-tertiary", iconStart: EllipseIcon },
|
|
1271
|
+
{ variant: "warning-tertiary", iconEnd: EllipseIcon },
|
|
1272
|
+
],
|
|
1273
|
+
"Warning Tertiary Medium": [
|
|
1274
|
+
{ variant: "warning-tertiary", size: "md" },
|
|
1275
|
+
{ variant: "warning-tertiary", size: "md", isDisabled: true },
|
|
1276
|
+
{ variant: "warning-tertiary", size: "md", iconStart: E20 },
|
|
1277
|
+
{ variant: "warning-tertiary", size: "md", iconEnd: E20 },
|
|
1278
|
+
],
|
|
1279
|
+
"Warning Tertiary Large": [
|
|
1280
|
+
{ variant: "warning-tertiary", size: "lg" },
|
|
1281
|
+
{ variant: "warning-tertiary", size: "lg", isDisabled: true },
|
|
1282
|
+
{ variant: "warning-tertiary", size: "lg", iconStart: E24 },
|
|
1283
|
+
{ variant: "warning-tertiary", size: "lg", iconEnd: E24 },
|
|
1284
|
+
],
|
|
1285
|
+
"Error Secondary": [
|
|
1286
|
+
{ variant: "error-secondary" },
|
|
1287
|
+
{ variant: "error-secondary", isDisabled: true },
|
|
1288
|
+
{ variant: "error-secondary", iconStart: EllipseIcon },
|
|
1289
|
+
{ variant: "error-secondary", iconEnd: EllipseIcon },
|
|
1290
|
+
],
|
|
1291
|
+
"Error Secondary Medium": [
|
|
1292
|
+
{ variant: "error-secondary", size: "md" },
|
|
1293
|
+
{ variant: "error-secondary", size: "md", isDisabled: true },
|
|
1294
|
+
{ variant: "error-secondary", size: "md", iconStart: E20 },
|
|
1295
|
+
{ variant: "error-secondary", size: "md", iconEnd: E20 },
|
|
1296
|
+
],
|
|
1297
|
+
"Error Secondary Large": [
|
|
1298
|
+
{ variant: "error-secondary", size: "lg" },
|
|
1299
|
+
{ variant: "error-secondary", size: "lg", isDisabled: true },
|
|
1300
|
+
{ variant: "error-secondary", size: "lg", iconStart: E24 },
|
|
1301
|
+
{ variant: "error-secondary", size: "lg", iconEnd: E24 },
|
|
1302
|
+
],
|
|
1303
|
+
"Error Tertiary": [
|
|
1304
|
+
{ variant: "error-tertiary" },
|
|
1305
|
+
{ variant: "error-tertiary", isDisabled: true },
|
|
1306
|
+
{ variant: "error-tertiary", iconStart: EllipseIcon },
|
|
1307
|
+
{ variant: "error-tertiary", iconEnd: EllipseIcon },
|
|
1308
|
+
],
|
|
1309
|
+
"Error Tertiary Medium": [
|
|
1310
|
+
{ variant: "error-tertiary", size: "md" },
|
|
1311
|
+
{ variant: "error-tertiary", size: "md", isDisabled: true },
|
|
1312
|
+
{ variant: "error-tertiary", size: "md", iconStart: E20 },
|
|
1313
|
+
{ variant: "error-tertiary", size: "md", iconEnd: E20 },
|
|
1314
|
+
],
|
|
1315
|
+
"Error Tertiary Large": [
|
|
1316
|
+
{ variant: "error-tertiary", size: "lg" },
|
|
1317
|
+
{ variant: "error-tertiary", size: "lg", isDisabled: true },
|
|
1318
|
+
{ variant: "error-tertiary", size: "lg", iconStart: E24 },
|
|
1319
|
+
{ variant: "error-tertiary", size: "lg", iconEnd: E24 },
|
|
1320
|
+
],
|
|
1210
1321
|
}}
|
|
1211
1322
|
/>
|
|
1212
1323
|
);`},{id:"core-buttons-actionbutton--disabled",name:"Disabled",snippet:'const Disabled = () => <ActionButton onPress={fn()} label="Label" isDisabled />;'},{id:"core-buttons-actionbutton--with-icon",name:"With Icon",snippet:'const WithIcon = () => <ActionButton onPress={fn()} label="Label" iconStart={EllipseIcon} />;'},{id:"core-buttons-actionbutton--with-both-icons",name:"With Both Icons",snippet:`const WithBothIcons = () => <ActionButton
|
|
@@ -4576,6 +4687,28 @@ By default the ComboBox current value cannot be set to values not included in it
|
|
|
4576
4687
|
/>
|
|
4577
4688
|
\`\`\`
|
|
4578
4689
|
|
|
4690
|
+
\`renderOption\` replaces the entire contents of each option \u2014 including the default selection checkmark, so render your own affordance from \`isSelected\` if you need one. Selection and keyboard behavior are unchanged. \`optionClassName\` and \`optionStyle\` accept either a value or a function of the item and its render state, and apply to the option element itself.
|
|
4691
|
+
|
|
4692
|
+
Keep all three referentially stable. The collection caches its elements per option and rebuilds every one of them whenever one of these changes identity, so an inline arrow rebuilds the list on each render.
|
|
4693
|
+
|
|
4694
|
+
\`\`\`jsx
|
|
4695
|
+
const renderOption = React.useCallback(
|
|
4696
|
+
(item) => (
|
|
4697
|
+
<span>
|
|
4698
|
+
{item.label}
|
|
4699
|
+
<span style={{ color: color.text.secondary }}> \u2014 custom</span>
|
|
4700
|
+
</span>
|
|
4701
|
+
),
|
|
4702
|
+
[],
|
|
4703
|
+
);
|
|
4704
|
+
|
|
4705
|
+
<ComboBox
|
|
4706
|
+
label="Custom option rendering"
|
|
4707
|
+
items={items}
|
|
4708
|
+
renderOption={renderOption}
|
|
4709
|
+
/>;
|
|
4710
|
+
\`\`\`
|
|
4711
|
+
|
|
4579
4712
|
The \`ComboBox\` input field filters visible items in the list to show only the ones that match the typed text. By default, only items that contain that text are shown. A custom filter function can be provided to modify this behavior.
|
|
4580
4713
|
|
|
4581
4714
|
This example provides a filter that will only show items that match exactly the typed text, case sensitive.
|
|
@@ -5019,7 +5152,17 @@ onValueChange?: (option: { value?: string; key?: string | null }) => void
|
|
|
5019
5152
|
<AddItemDecorator>
|
|
5020
5153
|
{(items) => <ComboBox label="Select a fruit" {...args} items={items} />}
|
|
5021
5154
|
</AddItemDecorator>
|
|
5022
|
-
);`},{id:"core-forms-combobox--with-
|
|
5155
|
+
);`},{id:"core-forms-combobox--with-render-option",name:"With Render Option",snippet:`const WithRenderOption = () => <ComboBox
|
|
5156
|
+
items={items}
|
|
5157
|
+
aria-label="ComboBox"
|
|
5158
|
+
label="Custom option rendering"
|
|
5159
|
+
placeholder="Placeholder"
|
|
5160
|
+
renderOption={(item) => (
|
|
5161
|
+
<span style={{ ...typography.label.md.regular }}>
|
|
5162
|
+
{item.label}
|
|
5163
|
+
<span style={{ color: color.text.secondary }}> \u2014 custom</span>
|
|
5164
|
+
</span>
|
|
5165
|
+
)} />;`},{id:"core-forms-combobox--with-tooltip",name:"With Tooltip",snippet:`const WithTooltip = () => <ComboBox
|
|
5023
5166
|
items={items}
|
|
5024
5167
|
aria-label="This is aria-label"
|
|
5025
5168
|
tooltip
|
|
@@ -5090,11 +5233,36 @@ export const itemsWithSections = [
|
|
|
5090
5233
|
] as ListItem[];
|
|
5091
5234
|
|
|
5092
5235
|
export const ComboBoxExample: React.FC<
|
|
5093
|
-
Omit<React.ComponentProps<typeof ComboBox>, "items">
|
|
5094
|
-
|
|
5236
|
+
Omit<React.ComponentProps<typeof ComboBox>, "items"> & {
|
|
5237
|
+
items?: ListItem[];
|
|
5238
|
+
/** Must stay focusable \u2014 the outside-click test asserts focus lands on it. */
|
|
5239
|
+
withSiblingField?: boolean;
|
|
5240
|
+
onNonFocusingPress?: () => void;
|
|
5241
|
+
}
|
|
5242
|
+
> = ({
|
|
5243
|
+
items: comboBoxItems = items,
|
|
5244
|
+
withSiblingField,
|
|
5245
|
+
onNonFocusingPress,
|
|
5246
|
+
...args
|
|
5247
|
+
}) => {
|
|
5095
5248
|
return (
|
|
5096
5249
|
<Box style={{ width: "100%", height: 200 }}>
|
|
5097
|
-
|
|
5250
|
+
{/* Above the ComboBox: the popover opens downwards and would otherwise cover
|
|
5251
|
+
the spot a test means to click "outside" on. */}
|
|
5252
|
+
{withSiblingField ? <input aria-label="Sibling field" /> : null}
|
|
5253
|
+
{onNonFocusingPress ? (
|
|
5254
|
+
<button
|
|
5255
|
+
// Stands in for \`preventFocusOnPress\`: the press lands but the input
|
|
5256
|
+
// never blurs.
|
|
5257
|
+
onMouseDown={(e) => {
|
|
5258
|
+
e.preventDefault();
|
|
5259
|
+
}}
|
|
5260
|
+
onClick={onNonFocusingPress}
|
|
5261
|
+
>
|
|
5262
|
+
Toolbar action
|
|
5263
|
+
</button>
|
|
5264
|
+
) : null}
|
|
5265
|
+
<ComboBox items={comboBoxItems} aria-label="Combo box" {...args} />
|
|
5098
5266
|
</Box>
|
|
5099
5267
|
);
|
|
5100
5268
|
};
|
|
@@ -5227,6 +5395,47 @@ export const LabelledByComboBoxExample: React.FC<
|
|
|
5227
5395
|
);
|
|
5228
5396
|
};
|
|
5229
5397
|
|
|
5398
|
+
export const CustomOptionComboBoxExample: React.FC = () => {
|
|
5399
|
+
return (
|
|
5400
|
+
<ComboBoxExample
|
|
5401
|
+
renderOption={(item) => <span>{item.label} \u2014 custom</span>}
|
|
5402
|
+
optionClassName={(item) => \`custom-option-\${item.id}\`}
|
|
5403
|
+
optionStyle={(_item, { isSelected }) => ({
|
|
5404
|
+
outline: isSelected
|
|
5405
|
+
? "1px solid rgb(0, 128, 0)"
|
|
5406
|
+
: "1px solid rgb(255, 0, 0)",
|
|
5407
|
+
})}
|
|
5408
|
+
/>
|
|
5409
|
+
);
|
|
5410
|
+
};
|
|
5411
|
+
|
|
5412
|
+
export const CountingOptionComboBoxExample: React.FC<{
|
|
5413
|
+
withSections?: boolean;
|
|
5414
|
+
}> = ({ withSections = false }) => {
|
|
5415
|
+
const [count, setCount] = React.useState(0);
|
|
5416
|
+
|
|
5417
|
+
return (
|
|
5418
|
+
<>
|
|
5419
|
+
<button
|
|
5420
|
+
onClick={() => {
|
|
5421
|
+
setCount(count + 1);
|
|
5422
|
+
}}
|
|
5423
|
+
>
|
|
5424
|
+
Increment
|
|
5425
|
+
</button>
|
|
5426
|
+
<ComboBoxExample
|
|
5427
|
+
items={withSections ? itemsWithSections : items}
|
|
5428
|
+
renderOption={(item) => (
|
|
5429
|
+
<span>
|
|
5430
|
+
{item.label} #{count}
|
|
5431
|
+
</span>
|
|
5432
|
+
)}
|
|
5433
|
+
optionClassName={() => \`count-\${count}\`}
|
|
5434
|
+
/>
|
|
5435
|
+
</>
|
|
5436
|
+
);
|
|
5437
|
+
};
|
|
5438
|
+
|
|
5230
5439
|
export const SectionComboBoxExample: React.FC = () => {
|
|
5231
5440
|
return (
|
|
5232
5441
|
<Box style={{ width: "100%", height: 300 }}>
|
|
@@ -9998,9 +10207,9 @@ children: React.ReactNode
|
|
|
9998
10207
|
This example shows how to use \`I18nProvider\` to override the default locale.
|
|
9999
10208
|
|
|
10000
10209
|
\`\`\`jsx
|
|
10001
|
-
import { I18nProvider } from "@
|
|
10210
|
+
import { I18nProvider } from "@baseline-ui/core";
|
|
10002
10211
|
|
|
10003
|
-
export const
|
|
10212
|
+
export const Root = () => (
|
|
10004
10213
|
<I18nProvider locale="en">
|
|
10005
10214
|
<App />
|
|
10006
10215
|
</I18nProvider>
|
|
@@ -10011,14 +10220,18 @@ The \`App\` component will receive the new locale through \`useLocale\`.
|
|
|
10011
10220
|
|
|
10012
10221
|
\`\`\`jsx
|
|
10013
10222
|
// App.js
|
|
10014
|
-
import { useLocale } from "@
|
|
10223
|
+
import { useLocale } from "@baseline-ui/core";
|
|
10015
10224
|
|
|
10016
10225
|
const App = () => {
|
|
10017
|
-
const locale = useLocale();
|
|
10226
|
+
const { locale } = useLocale();
|
|
10018
10227
|
|
|
10019
10228
|
return <div>Current locale: {locale}</div>;
|
|
10020
10229
|
};
|
|
10021
|
-
|
|
10230
|
+
\`\`\`
|
|
10231
|
+
|
|
10232
|
+
\`locale\` only switches date, number and collation formatting and text direction. To
|
|
10233
|
+
translate the strings Baseline UI renders, pass a catalog through \`messages\` \u2014 see
|
|
10234
|
+
[Internationalization](/?path=/docs/internationalization--docs#loading-a-translation-catalog).`,props:`interface I18nProviderProps {
|
|
10022
10235
|
/**
|
|
10023
10236
|
* Contents that should have the locale applied.
|
|
10024
10237
|
*/
|
|
@@ -10790,6 +11003,10 @@ import { Box } from "../../Box";
|
|
|
10790
11003
|
import { I18nProvider } from "../../I18nProvider";
|
|
10791
11004
|
import { NumberInput } from "../../NumberInput";
|
|
10792
11005
|
import { Text } from "../../Text";
|
|
11006
|
+
import {
|
|
11007
|
+
VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
|
|
11008
|
+
Virtualizer,
|
|
11009
|
+
} from "../../Virtualizer";
|
|
10793
11010
|
import { ImageGallery, ImageSize } from "../ImageGallery";
|
|
10794
11011
|
import { items } from "./data";
|
|
10795
11012
|
|
|
@@ -11102,6 +11319,43 @@ export function RTLImageGalleryExample(
|
|
|
11102
11319
|
<ImageGallery {...props} />
|
|
11103
11320
|
</I18nProvider>
|
|
11104
11321
|
);
|
|
11322
|
+
}
|
|
11323
|
+
|
|
11324
|
+
/**
|
|
11325
|
+
* Driven by a window event rather than a button, because clicking anything would move focus
|
|
11326
|
+
* and end the keyboard drag by itself.
|
|
11327
|
+
*/
|
|
11328
|
+
export function RerenderOnDemandImageGalleryExample({
|
|
11329
|
+
isVirtualized = false,
|
|
11330
|
+
...props
|
|
11331
|
+
}: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete"> & {
|
|
11332
|
+
isVirtualized?: boolean;
|
|
11333
|
+
}) {
|
|
11334
|
+
const [, rerender] = React.useReducer((tick: number) => tick + 1, 0);
|
|
11335
|
+
|
|
11336
|
+
React.useEffect(() => {
|
|
11337
|
+
const onRerender = () => {
|
|
11338
|
+
rerender();
|
|
11339
|
+
};
|
|
11340
|
+
|
|
11341
|
+
window.addEventListener("repro:rerender", onRerender);
|
|
11342
|
+
|
|
11343
|
+
return () => {
|
|
11344
|
+
window.removeEventListener("repro:rerender", onRerender);
|
|
11345
|
+
};
|
|
11346
|
+
}, []);
|
|
11347
|
+
|
|
11348
|
+
const gallery = <ImageGallery defaultItems={items} {...props} />;
|
|
11349
|
+
|
|
11350
|
+
if (!isVirtualized) {
|
|
11351
|
+
return gallery;
|
|
11352
|
+
}
|
|
11353
|
+
|
|
11354
|
+
return (
|
|
11355
|
+
<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.IMAGE_GALLERY}>
|
|
11356
|
+
{gallery}
|
|
11357
|
+
</Virtualizer>
|
|
11358
|
+
);
|
|
11105
11359
|
}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.",documentation:`\`InlineAlert\` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.
|
|
11106
11360
|
|
|
11107
11361
|
* Exposed to assistive technology with \`role="alert"\`.
|
|
@@ -27785,6 +28039,10 @@ style?: React.CSSProperties
|
|
|
27785
28039
|
/**
|
|
27786
28040
|
* The custom render function for the listbox options.
|
|
27787
28041
|
*
|
|
28042
|
+
* Replaces the option's entire contents, including the default selection
|
|
28043
|
+
* indicator \u2014 render your own affordance from \`options.isSelected\` if you
|
|
28044
|
+
* need one. Selection and keyboard behavior are unaffected.
|
|
28045
|
+
*
|
|
27788
28046
|
* Reading component state here works, at the cost of rebuilding every cached option and
|
|
27789
28047
|
* section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
|
|
27790
28048
|
* for when that cost applies.
|
|
@@ -27797,7 +28055,7 @@ renderOption?: (
|
|
|
27797
28055
|
options: ListBoxItemRenderProps,
|
|
27798
28056
|
) => React.ReactNode
|
|
27799
28057
|
/**
|
|
27800
|
-
*
|
|
28058
|
+
* A CSS class name added to the option's built-in classes.
|
|
27801
28059
|
*
|
|
27802
28060
|
* Compared by identity, so an inline function or an unmemoized value rebuilds every
|
|
27803
28061
|
* cached option and section on each render. A plain string is compared by value.
|
|
@@ -28109,8 +28367,27 @@ export const ListBoxWithSectionsExample: React.FC<
|
|
|
28109
28367
|
export const DragAndDropListBoxExample: React.FC<
|
|
28110
28368
|
Omit<React.ComponentProps<typeof ListBox>, "items" | "onReorder"> & {
|
|
28111
28369
|
customPreview?: boolean;
|
|
28370
|
+
rerenderOnEvent?: boolean;
|
|
28371
|
+
}
|
|
28372
|
+
> = ({ orientation, layout, customPreview, rerenderOnEvent, ...rest }) => {
|
|
28373
|
+
const [, rerender] = React.useReducer((tick: number) => tick + 1, 0);
|
|
28374
|
+
|
|
28375
|
+
React.useEffect(() => {
|
|
28376
|
+
if (!rerenderOnEvent) {
|
|
28377
|
+
return;
|
|
28112
28378
|
}
|
|
28113
|
-
|
|
28379
|
+
|
|
28380
|
+
const onRerender = () => {
|
|
28381
|
+
rerender();
|
|
28382
|
+
};
|
|
28383
|
+
|
|
28384
|
+
window.addEventListener("repro:rerender", onRerender);
|
|
28385
|
+
|
|
28386
|
+
return () => {
|
|
28387
|
+
window.removeEventListener("repro:rerender", onRerender);
|
|
28388
|
+
};
|
|
28389
|
+
}, [rerenderOnEvent]);
|
|
28390
|
+
|
|
28114
28391
|
const list = useListData({
|
|
28115
28392
|
initialItems: Array.from({ length: 20 }).map((_, i) => ({
|
|
28116
28393
|
id: \`item-\${i}\`,
|
|
@@ -34178,7 +34455,7 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
|
|
|
34178
34455
|
formatValue={(value: number) => \`\${value} pt\`}
|
|
34179
34456
|
aria-label="Icon slider"
|
|
34180
34457
|
onTriggerPress={fn()}
|
|
34181
|
-
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var
|
|
34458
|
+
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var o={gettingStarted:`# Getting started
|
|
34182
34459
|
|
|
34183
34460
|
Install the packages required for using Baseline UI with the following command:
|
|
34184
34461
|
|
|
@@ -34497,7 +34774,7 @@ Localization is the process of translating your website into different languages
|
|
|
34497
34774
|
|
|
34498
34775
|
Baseline UI automatically detects a user\u2019s preferred language from the browser, and it uses that language for all localization. It\u2019s possible to override the language used for localization by providing a \`locale\` prop to the \`I18nProvider\` component.
|
|
34499
34776
|
|
|
34500
|
-
See [\`useMessageFormatter\`](https://react-spectrum.adobe.com/react-aria/useMessageFormatter.html), [\`DateFormat\`](/?path=/docs/utilities-dateformat--docs), [\`NumberFormat\`](/?path=/docs/utilities-numberformat--docs), and [\`useCollator\`](https://react-spectrum.adobe.com/react-aria/useCollator.html) for more information about using our internationalization hooks.
|
|
34777
|
+
See [\`useMessageFormatter\`](https://react-spectrum.adobe.com/react-aria/useMessageFormatter.html), [\`DateFormat\`](/?path=/docs/core-utilities-dateformat--docs), [\`NumberFormat\`](/?path=/docs/core-utilities-numberformat--docs), and [\`useCollator\`](https://react-spectrum.adobe.com/react-aria/useCollator.html) for more information about using our internationalization hooks.
|
|
34501
34778
|
|
|
34502
34779
|
### Example
|
|
34503
34780
|
|
|
@@ -34517,7 +34794,7 @@ function YourApp() {
|
|
|
34517
34794
|
}
|
|
34518
34795
|
\`\`\`
|
|
34519
34796
|
|
|
34520
|
-
You can also override the language used for localization with the [\`I18nProvider\`](/?path=/docs/utilities-i18nprovider--docs) component:
|
|
34797
|
+
You can also override the language used for localization with the [\`I18nProvider\`](/?path=/docs/core-utilities-i18nprovider--docs) component:
|
|
34521
34798
|
|
|
34522
34799
|
\`\`\`jsx
|
|
34523
34800
|
import { I18nProvider } from "@baseline-ui/core";
|
|
@@ -34556,6 +34833,10 @@ so \`{ de }\` answers for \`de\`, \`de-DE\` and \`de-AT\` alike, and \`{ de, "de
|
|
|
34556
34833
|
TypeScript needs \`resolveJsonModule\` enabled to import the files, and Node ESM needs a
|
|
34557
34834
|
\`with { type: "json" }\` import attribute.
|
|
34558
34835
|
|
|
34836
|
+
Key each catalog with a BCP 47 locale ID. An underscored key (\`de_DE\`) is read as its
|
|
34837
|
+
hyphenated form, so both spellings resolve \u2014 but supplying the same locale under both is
|
|
34838
|
+
reported once, and the hyphenated entry wins.
|
|
34839
|
+
|
|
34559
34840
|
To avoid shipping every language up front, put each catalog behind a dynamic \`import()\`
|
|
34560
34841
|
and load one when the user picks a language. Write the specifiers out in full \u2014 a
|
|
34561
34842
|
template literal over a bare package subpath is not statically analyzable, so bundlers
|
|
@@ -34583,8 +34864,70 @@ ship it. Outside production, each such ID is reported once in the console.
|
|
|
34583
34864
|
If you supply catalogs but none of them matches the active locale \u2014 \`{ de }\` while the
|
|
34584
34865
|
locale is \`ja-JP\`, say \u2014 every string falls back to English and that is reported once for
|
|
34585
34866
|
the locale rather than once per ID. It means the catalog keys and the locale disagree,
|
|
34586
|
-
which no per-ID warning can tell you.
|
|
34587
|
-
English
|
|
34867
|
+
which no per-ID warning can tell you. It stays quiet when the active locale is itself
|
|
34868
|
+
English, since falling back to English is then the intended result. Supplying no catalogs
|
|
34869
|
+
at all is the supported English-only mode and stays silent.
|
|
34870
|
+
|
|
34871
|
+
Only \`bui.*\` IDs are reported. An app that routes its own strings through
|
|
34872
|
+
[\`useI18n\`](#your-own-strings) is missing no translation Baseline UI can tell it how to add.
|
|
34873
|
+
|
|
34874
|
+
### Controlling the warnings
|
|
34875
|
+
|
|
34876
|
+
The warnings above \u2014 the missing-ID, no-matching-catalog, duplicate-locale-key and
|
|
34877
|
+
[bare-ID deprecation](#migrating-from-bare-ids) ones \u2014 are development guidance, so they
|
|
34878
|
+
are off when \`process.env.NODE_ENV === "production"\`. That keeps a consumer who never
|
|
34879
|
+
touched \`messages\` from logging Baseline UI's internal IDs to their end users. Set
|
|
34880
|
+
\`shouldLogMissingMessages\` to force them either way:
|
|
34881
|
+
|
|
34882
|
+
\`\`\`jsx
|
|
34883
|
+
// Surface them in a production build \u2014 e.g. a staging deploy checking catalog coverage.
|
|
34884
|
+
<I18nProvider locale="de-DE" messages={messages} shouldLogMissingMessages>
|
|
34885
|
+
<YourApp />
|
|
34886
|
+
</I18nProvider>;
|
|
34887
|
+
|
|
34888
|
+
// Or silence them in development, while a catalog is still being filled in.
|
|
34889
|
+
<I18nProvider
|
|
34890
|
+
locale="de-DE"
|
|
34891
|
+
messages={messages}
|
|
34892
|
+
shouldLogMissingMessages={false}
|
|
34893
|
+
>
|
|
34894
|
+
<YourApp />
|
|
34895
|
+
</I18nProvider>;
|
|
34896
|
+
\`\`\`
|
|
34897
|
+
|
|
34898
|
+
Each distinct warning is logged once and reset when the locale changes, so switching
|
|
34899
|
+
languages re-reports what the new locale is missing.
|
|
34900
|
+
|
|
34901
|
+
### Your own strings
|
|
34902
|
+
|
|
34903
|
+
\`useI18n\` is the same hook the components use, so you can put your application's strings
|
|
34904
|
+
through it and get one formatter for both:
|
|
34905
|
+
|
|
34906
|
+
\`\`\`tsx
|
|
34907
|
+
import { defineMessages, useI18n } from "@baseline-ui/core";
|
|
34908
|
+
|
|
34909
|
+
const messages = defineMessages({
|
|
34910
|
+
greeting: {
|
|
34911
|
+
id: "myApp.greeting",
|
|
34912
|
+
defaultMessage: "Hello, {name}",
|
|
34913
|
+
description:
|
|
34914
|
+
"Greeting on the dashboard header. {name} is the user's first name.",
|
|
34915
|
+
},
|
|
34916
|
+
});
|
|
34917
|
+
|
|
34918
|
+
// Hoisted for the same reason as the catalogs above.
|
|
34919
|
+
const catalogs = { de: { "myApp.greeting": "Hallo, {name}" } };
|
|
34920
|
+
|
|
34921
|
+
function Header({ name }) {
|
|
34922
|
+
const { formatMessage } = useI18n(catalogs);
|
|
34923
|
+
|
|
34924
|
+
return <h1>{formatMessage(messages.greeting, { name })}</h1>;
|
|
34925
|
+
}
|
|
34926
|
+
\`\`\`
|
|
34927
|
+
|
|
34928
|
+
The catalogs you pass to \`useI18n\` are merged per locale with the ones on \`I18nProvider\`,
|
|
34929
|
+
and the provider wins on a shared key \u2014 so an application can hold its own strings locally
|
|
34930
|
+
while a host app still overrides any \`bui.*\` string from above.
|
|
34588
34931
|
|
|
34589
34932
|
### Supported locales
|
|
34590
34933
|
|
|
@@ -34602,8 +34945,9 @@ import { messageIds } from "@baseline-ui/core";
|
|
|
34602
34945
|
const uncovered = messageIds.filter((id) => !(id in ourCatalog.en));
|
|
34603
34946
|
\`\`\`
|
|
34604
34947
|
|
|
34605
|
-
|
|
34606
|
-
read \`@baseline-ui/core/messages.json
|
|
34948
|
+
Below is every ID with the English string it renders. For the translator context that goes
|
|
34949
|
+
with each one, read \`@baseline-ui/core/messages.json\` \u2014 the extracted source messages keyed
|
|
34950
|
+
by ID.
|
|
34607
34951
|
|
|
34608
34952
|
### Translating them yourself
|
|
34609
34953
|
|
|
@@ -34645,11 +34989,11 @@ import de from "@baseline-ui/core/intl/de.json";
|
|
|
34645
34989
|
|
|
34646
34990
|
Each component's documentation lists its overridable keys and shows an example. See:
|
|
34647
34991
|
|
|
34648
|
-
* [Pagination](?path=/docs/
|
|
34649
|
-
* [ColorInput](?path=/docs/
|
|
34650
|
-
* [ImageDropZone](?path=/docs/
|
|
34651
|
-
* [FreehandCanvas](?path=/docs/
|
|
34652
|
-
* [InlineAlert](?path=/docs/
|
|
34992
|
+
* [Pagination](?path=/docs/core-forms-pagination--docs#translations)
|
|
34993
|
+
* [ColorInput](?path=/docs/core-forms-colorinput--docs#translations)
|
|
34994
|
+
* [ImageDropZone](?path=/docs/core-forms-imagedropzone--docs#translations)
|
|
34995
|
+
* [FreehandCanvas](?path=/docs/core-miscellaneous-freehandcanvas--docs#translations)
|
|
34996
|
+
* [InlineAlert](?path=/docs/core-status-inlinealert--docs#translations)
|
|
34653
34997
|
|
|
34654
34998
|
### Migrating from bare IDs
|
|
34655
34999
|
|
|
@@ -35595,7 +35939,7 @@ padding={[null, "lg", "xl"]}
|
|
|
35595
35939
|
|
|
35596
35940
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
35597
35941
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
35598
|
-
* [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:"2.0.0"};var u=`
|
|
35942
|
+
* [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:"2.1.0"};var u=`
|
|
35599
35943
|
# Baseline UI MCP Server Guidelines
|
|
35600
35944
|
|
|
35601
35945
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -35750,13 +36094,14 @@ Use this tool to:
|
|
|
35750
36094
|
- Consult **list_components** to find the right component for your needs
|
|
35751
36095
|
- Reference **theming** for custom design systems
|
|
35752
36096
|
- Check **styling** for CSS and design token guidance
|
|
35753
|
-
`;var
|
|
36097
|
+
`;var C=`# List of available components in Baseline UI design system
|
|
35754
36098
|
| Name | Description | Similar To |
|
|
35755
36099
|
| --- | --- | --- |
|
|
35756
|
-
${Object.entries(
|
|
36100
|
+
${Object.entries(t).toSorted(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:i}])=>`|${n}|${e}|${i?.join(", ")||""}|`).join(`
|
|
35757
36101
|
`)}
|
|
35758
|
-
`,
|
|
36102
|
+
`,T=Object.entries(c).map(([n,e])=>`${n}
|
|
35759
36103
|
|
|
35760
|
-
${
|
|
36104
|
+
${e.map(i=>"- "+i).join(`
|
|
35761
36105
|
`)}`).join(`
|
|
35762
|
-
`);
|
|
36106
|
+
`);function z(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:C}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:T}]})),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:o.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:o.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:o.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:o.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.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(t))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(t[e]).filter(([i])=>!["description","similarTo","figmaUrl"].includes(i))),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(t))}},({componentName:e})=>({content:[{type:"text",text:t[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)}]})),n}
|
|
36107
|
+
exports.createServer=z;
|