@baseline-ui/mcp 3.1.0 → 3.2.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 CHANGED
@@ -1,5 +1,7 @@
1
1
  # @baseline-ui/mcp
2
2
 
3
+ ## 3.2.0
4
+
3
5
  ## 3.1.0
4
6
 
5
7
  ## 3.0.1
@@ -13912,7 +13912,8 @@ console.log(greet('Markdown Maverick'));
13912
13912
  | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
13913
13913
  | Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
13914
13914
  | Row 3, Col 1 | Row 3, Col 2 | Row 3, Col 3 |
13915
- \`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
13915
+ \`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:`import { ActionButton, Avatar, Box, Menu } from "@baseline-ui/core";
13916
+ import { CheckmarkIcon } from "@baseline-ui/icons/16";`,description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
13916
13917
 
13917
13918
  1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
13918
13919
  2. Selection options: The component can be configured to allow single, multiple, or no selection.
@@ -13924,6 +13925,7 @@ console.log(greet('Markdown Maverick'));
13924
13925
  8. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.
13925
13926
  9. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.
13926
13927
  10. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.
13928
+ 11. Per-item customization: Options can take a class, an inline style, or a completely custom body.
13927
13929
 
13928
13930
  Pass the list of options via \`items\` and a \`triggerLabel\` for the default
13929
13931
  \`ActionButton\` trigger. \`Menu\` renders its own trigger and popover \u2014 it does not
@@ -13948,7 +13950,8 @@ you need on/off state rather than a command list, use \`ToggleButton\`; to pick
13948
13950
  value from a set with an always-visible field, use \`Select\`.
13949
13951
 
13950
13952
  Each option accepts an optional leading \`icon\` (a \`@baseline-ui/icons\` component)
13951
- and a \`keyboardShortcut\` string rendered at the trailing edge of the item.
13953
+ and a \`keyboardShortcut\` string rendered at the trailing edge of the item. An
13954
+ option with a submenu spends that slot on its chevron instead.
13952
13955
 
13953
13956
  \`\`\`jsx
13954
13957
  import { CopyIcon, TrashIcon } from "@baseline-ui/icons/16";
@@ -13959,6 +13962,110 @@ const items = [
13959
13962
  ];
13960
13963
  \`\`\`
13961
13964
 
13965
+ \`optionClassName\`, \`optionStyle\` and \`renderOption\` are props on \`Menu\`, not
13966
+ fields on an item. \`optionClassName\` and \`optionStyle\` take either a plain value
13967
+ or a function of the option and its current state; \`renderOption\` is always such
13968
+ a function. One row is styled by branching inside that function rather than by
13969
+ annotating the item.
13970
+
13971
+ \`renderOption\` replaces an option's contents outright, which is how an item
13972
+ holds a badge, an avatar, or a two-line body. Keyboard navigation and selection
13973
+ behavior are unchanged, but the row's own presentation is not: the hover, focus
13974
+ and disabled styling and the trailing \`keyboardShortcut\` all live in the default
13975
+ body you are replacing, so draw whatever of them you need from the render state.
13976
+ Keep a text label in the output \u2014 it is what names the option to a screen
13977
+ reader.
13978
+
13979
+ An assignee picker is the shape that needs all of this at once: each row carries
13980
+ an avatar and a trailing presence label the default body has no slot for, offline
13981
+ people are muted, and the row redraws the focus ring and the selection check
13982
+ that came with the body \`renderOption\` replaced, while \`optionStyle\` carries the
13983
+ row-level background and text colour. Anything an
13984
+ option needs beyond \`label\` rides along in its \`data\`.
13985
+
13986
+ \`\`\`jsx
13987
+ import { Avatar, Box } from "@baseline-ui/core";
13988
+ import { CheckmarkIcon } from "@baseline-ui/icons/16";
13989
+ import { themeVars } from "@baseline-ui/tokens";
13990
+
13991
+ const assignees = [
13992
+ { id: "ana", label: "Ana Silva", data: { status: "Online" } },
13993
+ { id: "sam", label: "Sam Ortiz", data: { status: "Offline" } },
13994
+ ];
13995
+
13996
+ const PRESENCE_COLOR = {
13997
+ Online: themeVars.color.support.success.medium,
13998
+ Away: themeVars.color.support.warning.medium,
13999
+ Offline: themeVars.color.icon.secondary,
14000
+ };
14001
+
14002
+ <Menu
14003
+ items={assignees}
14004
+ triggerLabel="Assign to"
14005
+ selectionMode="single"
14006
+ defaultSelectedKeys={["ana"]}
14007
+ optionClassName="MyApp-AssigneeOption"
14008
+ optionStyle={(item, { isHovered }) => ({
14009
+ backgroundColor: isHovered
14010
+ ? themeVars.color.background.primary.medium
14011
+ : themeVars.color.background.primary.subtle,
14012
+ color:
14013
+ item.data?.status === "Offline"
14014
+ ? themeVars.color.text.secondary
14015
+ : themeVars.color.text.primary,
14016
+ })}
14017
+ renderOption={(item, { isSelected, isFocusVisible }) => (
14018
+ <Box
14019
+ display="flex"
14020
+ alignItems="center"
14021
+ gap="lg"
14022
+ width="full"
14023
+ paddingX="lg"
14024
+ style={{ height: 36 }}
14025
+ outlineColor={isFocusVisible ? "focused.default" : "transparent"}
14026
+ outlineWidth={2}
14027
+ outlineStyle="solid"
14028
+ outlineOffset={-2}
14029
+ >
14030
+ <Box aria-hidden={true} display="flex">
14031
+ <Avatar name={item.label} size="sm" showInitials={true} />
14032
+ </Box>
14033
+ <Box flex={1}>{item.label}</Box>
14034
+ <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
14035
+ <Box
14036
+ aria-hidden={true}
14037
+ style={{
14038
+ width: 8,
14039
+ height: 8,
14040
+ borderRadius: "50%",
14041
+ backgroundColor: PRESENCE_COLOR[item.data?.status],
14042
+ }}
14043
+ />
14044
+ <Box color="text.secondary">{item.data?.status}</Box>
14045
+ </Box>
14046
+ <Box display="flex" style={{ width: 16 }}>
14047
+ {isSelected ? <CheckmarkIcon size={16} /> : null}
14048
+ </Box>
14049
+ </Box>
14050
+ )}
14051
+ />;
14052
+ \`\`\`
14053
+
14054
+ The avatar and the presence dot are \`aria-hidden\` because each only restates
14055
+ something already beside it; the status word is not, because it is what carries
14056
+ presence to a screen reader. Colour is never the only cue.
14057
+
14058
+ \`renderOption\` replaces the row's contents \u2014 the default selection indicator and a
14059
+ submenu option's chevron included \u2014 so draw your own from the \`isSelected\` and
14060
+ \`hasSubmenu\` render state when you need them, as the check above does. A submenu
14061
+ chevron has to mirror itself under RTL; the built-in one already does. A function
14062
+ given to any of these three props is compared by identity, so an inline one can
14063
+ rebuild cached options on each render; memoize it for long or sectioned menus.
14064
+
14065
+ \`itemClassName\` is the older string-only form of \`optionClassName\` and is
14066
+ deprecated. It applies to the item element, and both classes are added when both
14067
+ are set, but prefer \`optionClassName\`.
14068
+
13962
14069
  The \`Menu\` component can be configured to allow single, multiple, or no selection. The default is no selection. To allow single selection, set the \`selectionMode\` prop to \`single\`. To allow multiple selection, set the \`selectionMode\` prop to \`multiple\`.
13963
14070
  Use \`defaultSelectedKeys\` to provide a default set of selected items (uncontrolled) and \`selectedKeys\` to set the selected items (controlled).
13964
14071
  The value of the selected keys must match the \`id\` prop of the items.
@@ -14089,6 +14196,39 @@ onOpenChange?: (isOpen: boolean) => void
14089
14196
  * @default 'press'
14090
14197
  */
14091
14198
  trigger?: 'press' | 'longPress'
14199
+ /**
14200
+ * The custom render function for the collection's options.
14201
+ *
14202
+ * Replaces the option's entire contents, the default selection indicator
14203
+ * included, so render your own affordance from \`options\` when you need one.
14204
+ * The hover, focus and disabled styling lives in that default body too \u2014
14205
+ * only selection and keyboard behavior are unaffected. Keep a text label in
14206
+ * the output; it is what names the option to a screen reader.
14207
+ *
14208
+ * Reading component state here works, at the cost of rebuilding every cached option and
14209
+ * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
14210
+ * for when that cost applies.
14211
+ */
14212
+ renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
14213
+ /**
14214
+ * A CSS class name added to the option's built-in classes.
14215
+ *
14216
+ * Compared by identity, so an inline function or an unmemoized value rebuilds every
14217
+ * cached option and section on each render. A plain string is compared by value.
14218
+ */
14219
+ optionClassName?: | string
14220
+ | ((item: TOption, renderProps: TRenderProps) => string | undefined)
14221
+ /**
14222
+ * The style of the option.
14223
+ *
14224
+ * Compared by identity, so an inline function or object literal rebuilds every cached
14225
+ * option and section on each render \u2014 memoize it to avoid that.
14226
+ */
14227
+ optionStyle?: | React.CSSProperties
14228
+ | ((
14229
+ item: TOption,
14230
+ renderProps: TRenderProps,
14231
+ ) => React.CSSProperties | undefined)
14092
14232
  /**
14093
14233
  * The \`className\` property assigned to the root element of the component.
14094
14234
  */
@@ -14099,6 +14239,9 @@ className?: string
14099
14239
  contentClassName?: string
14100
14240
  /**
14101
14241
  * The \`className\` property assigned to the item element of the component.
14242
+ *
14243
+ * @deprecated Use \`optionClassName\`, which also accepts a function of the item
14244
+ * and its render state. Both are applied when set.
14102
14245
  */
14103
14246
  itemClassName?: string
14104
14247
  /**
@@ -14217,14 +14360,68 @@ placement?: any
14217
14360
  if (meta) setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
14218
14361
  }} />
14219
14362
  );
14220
- };`}],implementation:`import React from "react";
14363
+ };`},{id:"core-collections-menu--with-custom-options",name:"With Custom Options",snippet:`const WithCustomOptions = () => <Menu
14364
+ triggerLabel="Menu Trigger"
14365
+ items={assigneeItems}
14366
+ defaultOpen
14367
+ selectionMode="single"
14368
+ defaultSelectedKeys={["jo"]}
14369
+ optionStyle={(item, { isHovered }) => ({
14370
+ backgroundColor: isHovered
14371
+ ? themeVars.color.background.primary.medium
14372
+ : themeVars.color.background.primary.subtle,
14373
+ color:
14374
+ item.data?.status === "Offline"
14375
+ ? themeVars.color.text.secondary
14376
+ : themeVars.color.text.primary,
14377
+ })}
14378
+ renderOption={(item, { isSelected, isFocusVisible }) => (
14379
+ <Box
14380
+ display="flex"
14381
+ alignItems="center"
14382
+ gap="lg"
14383
+ width="full"
14384
+ paddingX="lg"
14385
+ style={{ height: 36 }}
14386
+ outlineColor={isFocusVisible ? "focused.default" : "transparent"}
14387
+ outlineWidth={2}
14388
+ outlineStyle="solid"
14389
+ outlineOffset={-2}
14390
+ >
14391
+ <Box aria-hidden={true} display="flex">
14392
+ <Avatar name={item.label} size="sm" showInitials={true} />
14393
+ </Box>
14394
+ <Box flex={1} typography="body.md.regular">
14395
+ {item.label}
14396
+ </Box>
14397
+ <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
14398
+ <Box
14399
+ aria-hidden={true}
14400
+ style={{
14401
+ width: 8,
14402
+ height: 8,
14403
+ borderRadius: "50%",
14404
+ backgroundColor: PRESENCE_COLOR[item.data?.status ?? "Offline"],
14405
+ }}
14406
+ />
14407
+ <Box color="text.secondary" typography="label.sm.regular">
14408
+ {item.data?.status}
14409
+ </Box>
14410
+ </Box>
14411
+ <Box display="flex" style={{ width: 16 }}>
14412
+ {isSelected ? <CheckmarkIcon size={16} /> : null}
14413
+ </Box>
14414
+ </Box>
14415
+ )} />;`}],implementation:`import React from "react";
14221
14416
 
14417
+ import { ActionButton } from "../../ActionButton/ActionButton";
14222
14418
  import { I18nProvider } from "../../I18nProvider/I18nProvider";
14223
14419
  import { Menu } from "../Menu";
14224
14420
  import { items, itemsWithSections, itemsWithSubmenu } from "./data";
14225
14421
 
14226
- import type { MenuProps } from "../Menu.types";
14422
+ import type { MenuOption, MenuProps } from "../Menu.types";
14227
14423
  import type { Key } from "react-aria";
14424
+ import type { MenuItemRenderProps } from "react-aria-components";
14228
14425
  import type { Selection } from "react-stately";
14229
14426
 
14230
14427
  export const MenuExample: React.FC<
@@ -14429,6 +14626,78 @@ export const MenuPartialSectionSelectionExample: React.FC<{
14429
14626
  <div data-testid="menu-partial-action">{action}</div>
14430
14627
  </>
14431
14628
  );
14629
+ };
14630
+
14631
+ const optionClassNames = {
14632
+ perItem: (item: MenuOption) => \`option-\${item.id}\`,
14633
+ perRenderState: (item: MenuOption, { isFocusVisible }: MenuItemRenderProps) =>
14634
+ isFocusVisible ? \`option-\${item.id} focus-visible\` : \`option-\${item.id}\`,
14635
+ };
14636
+
14637
+ const renderCustomOption = (
14638
+ item: MenuOption,
14639
+ { hasSubmenu, isSelected }: MenuItemRenderProps,
14640
+ ) => (
14641
+ <span data-testid={\`custom-\${item.id}\`} data-selected={isSelected}>
14642
+ {item.label}
14643
+ {hasSubmenu ? " (submenu)" : ""}
14644
+ </span>
14645
+ );
14646
+
14647
+ // Callbacks can't cross the CT mount boundary, so they are selected by name.
14648
+ export const MenuOptionCustomisationExample: React.FC<{
14649
+ label: string;
14650
+ items?: MenuProps["items"];
14651
+ itemClassName?: string;
14652
+ optionClassName?: keyof typeof optionClassNames;
14653
+ withRenderOption?: boolean;
14654
+ selectionMode?: "single" | "multiple";
14655
+ }> = ({
14656
+ label,
14657
+ items: menuItems = items,
14658
+ itemClassName,
14659
+ optionClassName = "perItem",
14660
+ withRenderOption = false,
14661
+ selectionMode,
14662
+ }) => (
14663
+ <Menu
14664
+ items={menuItems}
14665
+ triggerLabel={label}
14666
+ defaultOpen={true}
14667
+ selectionMode={selectionMode}
14668
+ itemClassName={itemClassName}
14669
+ optionClassName={optionClassNames[optionClassName]}
14670
+ renderOption={withRenderOption ? renderCustomOption : undefined}
14671
+ />
14672
+ );
14673
+
14674
+ export const MenuSectionOptionClassToggleExample: React.FC<{
14675
+ label: string;
14676
+ }> = ({ label }) => {
14677
+ const [flagged, setFlagged] = React.useState(false);
14678
+ const optionClassName = React.useCallback(
14679
+ () => (flagged ? "flagged" : "unflagged"),
14680
+ [flagged],
14681
+ );
14682
+
14683
+ return (
14684
+ <>
14685
+ <ActionButton
14686
+ label="Toggle"
14687
+ onPress={() => {
14688
+ setFlagged((v) => !v);
14689
+ }}
14690
+ />
14691
+ <Menu
14692
+ items={itemsWithSections}
14693
+ triggerLabel={label}
14694
+ // Keep the menu mounted while the outside toggle changes the callback.
14695
+ isOpen={true}
14696
+ isNonModal={true}
14697
+ optionClassName={optionClassName}
14698
+ />
14699
+ </>
14700
+ );
14432
14701
  };`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nPassing `id` and `defaultMessage` as separate props leaves `defaultMessage` easy to omit, and an `id` nothing answers for renders as itself. Declaring the message with `defineMessages` and spreading the descriptor keeps the two together, so there is no way to pass one without the other \u2014 and the same descriptor is what the extraction pipeline reads:\n\n```jsx\nimport { defineMessages, MessageFormat } from "@baseline-ui/core";\n\nconst messages = defineMessages({\n hello: {\n id: "myApp.hello",\n defaultMessage: "Hello, {name}!",\n description: "Greeting shown at the top of the dashboard.",\n },\n});\n\n<MessageFormat {...messages.hello} values={{ name: "Ada" }} />;\n```\n\n`description` is translator context; it is ignored at render time and never reaches the DOM.\n\nWrite every `defaultMessage` as a literal, whether it comes from a descriptor or the prop. Each distinct template is compiled once and cached, so a message built per render \u2014 interpolating a file name or a row into the template itself rather than passing it through `values` \u2014 churns that cache and recompiles the templates it displaces.\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\nconst messages = defineMessages({\n pageXofY: {\n id: "myApp.pageXofY",\n defaultMessage: "Page {current} of {total}",\n description:\n "Pagination status. `current` is the current page, `total` the last.",\n },\n});\n\n<MessageFormat {...messages.pageXofY} values={{ current: 2, total: 10 }} />;\n// \u2192 "Page 2 of 10"\n```\n\nSpreading the descriptor is what makes that true on its own. With a bare\n`id`, the same line renders `"Page 2 of 10"` only where a supplied catalog\ncovers the active locale, and the id itself everywhere else.',props:`interface MessageFormatProps {
14433
14702
  /**
14434
14703
  * By default \`<MessageFormat>\` will render the formatted string into a
@@ -28889,23 +29158,19 @@ className?: string
28889
29158
  */
28890
29159
  style?: React.CSSProperties
28891
29160
  /**
28892
- * The custom render function for the listbox options.
29161
+ * The custom render function for the collection's options.
28893
29162
  *
28894
- * Replaces the option's entire contents, including the default selection
28895
- * indicator \u2014 render your own affordance from \`options.isSelected\` if you
28896
- * need one. Selection and keyboard behavior are unaffected.
29163
+ * Replaces the option's entire contents, the default selection indicator
29164
+ * included, so render your own affordance from \`options\` when you need one.
29165
+ * The hover, focus and disabled styling lives in that default body too \u2014
29166
+ * only selection and keyboard behavior are unaffected. Keep a text label in
29167
+ * the output; it is what names the option to a screen reader.
28897
29168
  *
28898
29169
  * Reading component state here works, at the cost of rebuilding every cached option and
28899
29170
  * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
28900
29171
  * for when that cost applies.
28901
- *
28902
- * @param item ListOption
28903
- * @param options ListBoxItemRenderProps
28904
29172
  */
28905
- renderOption?: (
28906
- item: ListOption,
28907
- options: ListBoxItemRenderProps,
28908
- ) => React.ReactNode
29173
+ renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
28909
29174
  /**
28910
29175
  * A CSS class name added to the option's built-in classes.
28911
29176
  *
@@ -28913,10 +29178,7 @@ renderOption?: (
28913
29178
  * cached option and section on each render. A plain string is compared by value.
28914
29179
  */
28915
29180
  optionClassName?: | string
28916
- | ((
28917
- item: ListOption,
28918
- renderProps: ListBoxItemRenderProps,
28919
- ) => string | undefined)
29181
+ | ((item: TOption, renderProps: TRenderProps) => string | undefined)
28920
29182
  /**
28921
29183
  * The style of the option.
28922
29184
  *
@@ -28925,8 +29187,8 @@ optionClassName?: | string
28925
29187
  */
28926
29188
  optionStyle?: | React.CSSProperties
28927
29189
  | ((
28928
- item: ListOption,
28929
- renderProps: ListBoxItemRenderProps,
29190
+ item: TOption,
29191
+ renderProps: TRenderProps,
28930
29192
  ) => React.CSSProperties | undefined)
28931
29193
  /**
28932
29194
  * The custom render function for the listbox sections.
@@ -37271,7 +37533,7 @@ padding={[null, "lg", "xl"]}
37271
37533
 
37272
37534
  * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
37273
37535
  * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
37274
- * [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:"3.1.0"};var u=`
37536
+ * [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:"3.2.0"};var u=`
37275
37537
  # Baseline UI MCP Server Guidelines
37276
37538
 
37277
37539
  This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  #!/usr/bin/env node
2
- import {a}from'./chunk-MDOP4NRY.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';(async()=>await a().connect(new StdioServerTransport))();
2
+ import {a}from'./chunk-QT5OM7ZY.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';(async()=>await a().connect(new StdioServerTransport))();
package/dist/server.cjs CHANGED
@@ -13912,7 +13912,8 @@ console.log(greet('Markdown Maverick'));
13912
13912
  | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
13913
13913
  | Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
13914
13914
  | Row 3, Col 1 | Row 3, Col 2 | Row 3, Col 3 |
13915
- \`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
13915
+ \`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:`import { ActionButton, Avatar, Box, Menu } from "@baseline-ui/core";
13916
+ import { CheckmarkIcon } from "@baseline-ui/icons/16";`,description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
13916
13917
 
13917
13918
  1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
13918
13919
  2. Selection options: The component can be configured to allow single, multiple, or no selection.
@@ -13924,6 +13925,7 @@ console.log(greet('Markdown Maverick'));
13924
13925
  8. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.
13925
13926
  9. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.
13926
13927
  10. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.
13928
+ 11. Per-item customization: Options can take a class, an inline style, or a completely custom body.
13927
13929
 
13928
13930
  Pass the list of options via \`items\` and a \`triggerLabel\` for the default
13929
13931
  \`ActionButton\` trigger. \`Menu\` renders its own trigger and popover \u2014 it does not
@@ -13948,7 +13950,8 @@ you need on/off state rather than a command list, use \`ToggleButton\`; to pick
13948
13950
  value from a set with an always-visible field, use \`Select\`.
13949
13951
 
13950
13952
  Each option accepts an optional leading \`icon\` (a \`@baseline-ui/icons\` component)
13951
- and a \`keyboardShortcut\` string rendered at the trailing edge of the item.
13953
+ and a \`keyboardShortcut\` string rendered at the trailing edge of the item. An
13954
+ option with a submenu spends that slot on its chevron instead.
13952
13955
 
13953
13956
  \`\`\`jsx
13954
13957
  import { CopyIcon, TrashIcon } from "@baseline-ui/icons/16";
@@ -13959,6 +13962,110 @@ const items = [
13959
13962
  ];
13960
13963
  \`\`\`
13961
13964
 
13965
+ \`optionClassName\`, \`optionStyle\` and \`renderOption\` are props on \`Menu\`, not
13966
+ fields on an item. \`optionClassName\` and \`optionStyle\` take either a plain value
13967
+ or a function of the option and its current state; \`renderOption\` is always such
13968
+ a function. One row is styled by branching inside that function rather than by
13969
+ annotating the item.
13970
+
13971
+ \`renderOption\` replaces an option's contents outright, which is how an item
13972
+ holds a badge, an avatar, or a two-line body. Keyboard navigation and selection
13973
+ behavior are unchanged, but the row's own presentation is not: the hover, focus
13974
+ and disabled styling and the trailing \`keyboardShortcut\` all live in the default
13975
+ body you are replacing, so draw whatever of them you need from the render state.
13976
+ Keep a text label in the output \u2014 it is what names the option to a screen
13977
+ reader.
13978
+
13979
+ An assignee picker is the shape that needs all of this at once: each row carries
13980
+ an avatar and a trailing presence label the default body has no slot for, offline
13981
+ people are muted, and the row redraws the focus ring and the selection check
13982
+ that came with the body \`renderOption\` replaced, while \`optionStyle\` carries the
13983
+ row-level background and text colour. Anything an
13984
+ option needs beyond \`label\` rides along in its \`data\`.
13985
+
13986
+ \`\`\`jsx
13987
+ import { Avatar, Box } from "@baseline-ui/core";
13988
+ import { CheckmarkIcon } from "@baseline-ui/icons/16";
13989
+ import { themeVars } from "@baseline-ui/tokens";
13990
+
13991
+ const assignees = [
13992
+ { id: "ana", label: "Ana Silva", data: { status: "Online" } },
13993
+ { id: "sam", label: "Sam Ortiz", data: { status: "Offline" } },
13994
+ ];
13995
+
13996
+ const PRESENCE_COLOR = {
13997
+ Online: themeVars.color.support.success.medium,
13998
+ Away: themeVars.color.support.warning.medium,
13999
+ Offline: themeVars.color.icon.secondary,
14000
+ };
14001
+
14002
+ <Menu
14003
+ items={assignees}
14004
+ triggerLabel="Assign to"
14005
+ selectionMode="single"
14006
+ defaultSelectedKeys={["ana"]}
14007
+ optionClassName="MyApp-AssigneeOption"
14008
+ optionStyle={(item, { isHovered }) => ({
14009
+ backgroundColor: isHovered
14010
+ ? themeVars.color.background.primary.medium
14011
+ : themeVars.color.background.primary.subtle,
14012
+ color:
14013
+ item.data?.status === "Offline"
14014
+ ? themeVars.color.text.secondary
14015
+ : themeVars.color.text.primary,
14016
+ })}
14017
+ renderOption={(item, { isSelected, isFocusVisible }) => (
14018
+ <Box
14019
+ display="flex"
14020
+ alignItems="center"
14021
+ gap="lg"
14022
+ width="full"
14023
+ paddingX="lg"
14024
+ style={{ height: 36 }}
14025
+ outlineColor={isFocusVisible ? "focused.default" : "transparent"}
14026
+ outlineWidth={2}
14027
+ outlineStyle="solid"
14028
+ outlineOffset={-2}
14029
+ >
14030
+ <Box aria-hidden={true} display="flex">
14031
+ <Avatar name={item.label} size="sm" showInitials={true} />
14032
+ </Box>
14033
+ <Box flex={1}>{item.label}</Box>
14034
+ <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
14035
+ <Box
14036
+ aria-hidden={true}
14037
+ style={{
14038
+ width: 8,
14039
+ height: 8,
14040
+ borderRadius: "50%",
14041
+ backgroundColor: PRESENCE_COLOR[item.data?.status],
14042
+ }}
14043
+ />
14044
+ <Box color="text.secondary">{item.data?.status}</Box>
14045
+ </Box>
14046
+ <Box display="flex" style={{ width: 16 }}>
14047
+ {isSelected ? <CheckmarkIcon size={16} /> : null}
14048
+ </Box>
14049
+ </Box>
14050
+ )}
14051
+ />;
14052
+ \`\`\`
14053
+
14054
+ The avatar and the presence dot are \`aria-hidden\` because each only restates
14055
+ something already beside it; the status word is not, because it is what carries
14056
+ presence to a screen reader. Colour is never the only cue.
14057
+
14058
+ \`renderOption\` replaces the row's contents \u2014 the default selection indicator and a
14059
+ submenu option's chevron included \u2014 so draw your own from the \`isSelected\` and
14060
+ \`hasSubmenu\` render state when you need them, as the check above does. A submenu
14061
+ chevron has to mirror itself under RTL; the built-in one already does. A function
14062
+ given to any of these three props is compared by identity, so an inline one can
14063
+ rebuild cached options on each render; memoize it for long or sectioned menus.
14064
+
14065
+ \`itemClassName\` is the older string-only form of \`optionClassName\` and is
14066
+ deprecated. It applies to the item element, and both classes are added when both
14067
+ are set, but prefer \`optionClassName\`.
14068
+
13962
14069
  The \`Menu\` component can be configured to allow single, multiple, or no selection. The default is no selection. To allow single selection, set the \`selectionMode\` prop to \`single\`. To allow multiple selection, set the \`selectionMode\` prop to \`multiple\`.
13963
14070
  Use \`defaultSelectedKeys\` to provide a default set of selected items (uncontrolled) and \`selectedKeys\` to set the selected items (controlled).
13964
14071
  The value of the selected keys must match the \`id\` prop of the items.
@@ -14089,6 +14196,39 @@ onOpenChange?: (isOpen: boolean) => void
14089
14196
  * @default 'press'
14090
14197
  */
14091
14198
  trigger?: 'press' | 'longPress'
14199
+ /**
14200
+ * The custom render function for the collection's options.
14201
+ *
14202
+ * Replaces the option's entire contents, the default selection indicator
14203
+ * included, so render your own affordance from \`options\` when you need one.
14204
+ * The hover, focus and disabled styling lives in that default body too \u2014
14205
+ * only selection and keyboard behavior are unaffected. Keep a text label in
14206
+ * the output; it is what names the option to a screen reader.
14207
+ *
14208
+ * Reading component state here works, at the cost of rebuilding every cached option and
14209
+ * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
14210
+ * for when that cost applies.
14211
+ */
14212
+ renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
14213
+ /**
14214
+ * A CSS class name added to the option's built-in classes.
14215
+ *
14216
+ * Compared by identity, so an inline function or an unmemoized value rebuilds every
14217
+ * cached option and section on each render. A plain string is compared by value.
14218
+ */
14219
+ optionClassName?: | string
14220
+ | ((item: TOption, renderProps: TRenderProps) => string | undefined)
14221
+ /**
14222
+ * The style of the option.
14223
+ *
14224
+ * Compared by identity, so an inline function or object literal rebuilds every cached
14225
+ * option and section on each render \u2014 memoize it to avoid that.
14226
+ */
14227
+ optionStyle?: | React.CSSProperties
14228
+ | ((
14229
+ item: TOption,
14230
+ renderProps: TRenderProps,
14231
+ ) => React.CSSProperties | undefined)
14092
14232
  /**
14093
14233
  * The \`className\` property assigned to the root element of the component.
14094
14234
  */
@@ -14099,6 +14239,9 @@ className?: string
14099
14239
  contentClassName?: string
14100
14240
  /**
14101
14241
  * The \`className\` property assigned to the item element of the component.
14242
+ *
14243
+ * @deprecated Use \`optionClassName\`, which also accepts a function of the item
14244
+ * and its render state. Both are applied when set.
14102
14245
  */
14103
14246
  itemClassName?: string
14104
14247
  /**
@@ -14217,14 +14360,68 @@ placement?: any
14217
14360
  if (meta) setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
14218
14361
  }} />
14219
14362
  );
14220
- };`}],implementation:`import React from "react";
14363
+ };`},{id:"core-collections-menu--with-custom-options",name:"With Custom Options",snippet:`const WithCustomOptions = () => <Menu
14364
+ triggerLabel="Menu Trigger"
14365
+ items={assigneeItems}
14366
+ defaultOpen
14367
+ selectionMode="single"
14368
+ defaultSelectedKeys={["jo"]}
14369
+ optionStyle={(item, { isHovered }) => ({
14370
+ backgroundColor: isHovered
14371
+ ? themeVars.color.background.primary.medium
14372
+ : themeVars.color.background.primary.subtle,
14373
+ color:
14374
+ item.data?.status === "Offline"
14375
+ ? themeVars.color.text.secondary
14376
+ : themeVars.color.text.primary,
14377
+ })}
14378
+ renderOption={(item, { isSelected, isFocusVisible }) => (
14379
+ <Box
14380
+ display="flex"
14381
+ alignItems="center"
14382
+ gap="lg"
14383
+ width="full"
14384
+ paddingX="lg"
14385
+ style={{ height: 36 }}
14386
+ outlineColor={isFocusVisible ? "focused.default" : "transparent"}
14387
+ outlineWidth={2}
14388
+ outlineStyle="solid"
14389
+ outlineOffset={-2}
14390
+ >
14391
+ <Box aria-hidden={true} display="flex">
14392
+ <Avatar name={item.label} size="sm" showInitials={true} />
14393
+ </Box>
14394
+ <Box flex={1} typography="body.md.regular">
14395
+ {item.label}
14396
+ </Box>
14397
+ <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
14398
+ <Box
14399
+ aria-hidden={true}
14400
+ style={{
14401
+ width: 8,
14402
+ height: 8,
14403
+ borderRadius: "50%",
14404
+ backgroundColor: PRESENCE_COLOR[item.data?.status ?? "Offline"],
14405
+ }}
14406
+ />
14407
+ <Box color="text.secondary" typography="label.sm.regular">
14408
+ {item.data?.status}
14409
+ </Box>
14410
+ </Box>
14411
+ <Box display="flex" style={{ width: 16 }}>
14412
+ {isSelected ? <CheckmarkIcon size={16} /> : null}
14413
+ </Box>
14414
+ </Box>
14415
+ )} />;`}],implementation:`import React from "react";
14221
14416
 
14417
+ import { ActionButton } from "../../ActionButton/ActionButton";
14222
14418
  import { I18nProvider } from "../../I18nProvider/I18nProvider";
14223
14419
  import { Menu } from "../Menu";
14224
14420
  import { items, itemsWithSections, itemsWithSubmenu } from "./data";
14225
14421
 
14226
- import type { MenuProps } from "../Menu.types";
14422
+ import type { MenuOption, MenuProps } from "../Menu.types";
14227
14423
  import type { Key } from "react-aria";
14424
+ import type { MenuItemRenderProps } from "react-aria-components";
14228
14425
  import type { Selection } from "react-stately";
14229
14426
 
14230
14427
  export const MenuExample: React.FC<
@@ -14429,6 +14626,78 @@ export const MenuPartialSectionSelectionExample: React.FC<{
14429
14626
  <div data-testid="menu-partial-action">{action}</div>
14430
14627
  </>
14431
14628
  );
14629
+ };
14630
+
14631
+ const optionClassNames = {
14632
+ perItem: (item: MenuOption) => \`option-\${item.id}\`,
14633
+ perRenderState: (item: MenuOption, { isFocusVisible }: MenuItemRenderProps) =>
14634
+ isFocusVisible ? \`option-\${item.id} focus-visible\` : \`option-\${item.id}\`,
14635
+ };
14636
+
14637
+ const renderCustomOption = (
14638
+ item: MenuOption,
14639
+ { hasSubmenu, isSelected }: MenuItemRenderProps,
14640
+ ) => (
14641
+ <span data-testid={\`custom-\${item.id}\`} data-selected={isSelected}>
14642
+ {item.label}
14643
+ {hasSubmenu ? " (submenu)" : ""}
14644
+ </span>
14645
+ );
14646
+
14647
+ // Callbacks can't cross the CT mount boundary, so they are selected by name.
14648
+ export const MenuOptionCustomisationExample: React.FC<{
14649
+ label: string;
14650
+ items?: MenuProps["items"];
14651
+ itemClassName?: string;
14652
+ optionClassName?: keyof typeof optionClassNames;
14653
+ withRenderOption?: boolean;
14654
+ selectionMode?: "single" | "multiple";
14655
+ }> = ({
14656
+ label,
14657
+ items: menuItems = items,
14658
+ itemClassName,
14659
+ optionClassName = "perItem",
14660
+ withRenderOption = false,
14661
+ selectionMode,
14662
+ }) => (
14663
+ <Menu
14664
+ items={menuItems}
14665
+ triggerLabel={label}
14666
+ defaultOpen={true}
14667
+ selectionMode={selectionMode}
14668
+ itemClassName={itemClassName}
14669
+ optionClassName={optionClassNames[optionClassName]}
14670
+ renderOption={withRenderOption ? renderCustomOption : undefined}
14671
+ />
14672
+ );
14673
+
14674
+ export const MenuSectionOptionClassToggleExample: React.FC<{
14675
+ label: string;
14676
+ }> = ({ label }) => {
14677
+ const [flagged, setFlagged] = React.useState(false);
14678
+ const optionClassName = React.useCallback(
14679
+ () => (flagged ? "flagged" : "unflagged"),
14680
+ [flagged],
14681
+ );
14682
+
14683
+ return (
14684
+ <>
14685
+ <ActionButton
14686
+ label="Toggle"
14687
+ onPress={() => {
14688
+ setFlagged((v) => !v);
14689
+ }}
14690
+ />
14691
+ <Menu
14692
+ items={itemsWithSections}
14693
+ triggerLabel={label}
14694
+ // Keep the menu mounted while the outside toggle changes the callback.
14695
+ isOpen={true}
14696
+ isNonModal={true}
14697
+ optionClassName={optionClassName}
14698
+ />
14699
+ </>
14700
+ );
14432
14701
  };`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nPassing `id` and `defaultMessage` as separate props leaves `defaultMessage` easy to omit, and an `id` nothing answers for renders as itself. Declaring the message with `defineMessages` and spreading the descriptor keeps the two together, so there is no way to pass one without the other \u2014 and the same descriptor is what the extraction pipeline reads:\n\n```jsx\nimport { defineMessages, MessageFormat } from "@baseline-ui/core";\n\nconst messages = defineMessages({\n hello: {\n id: "myApp.hello",\n defaultMessage: "Hello, {name}!",\n description: "Greeting shown at the top of the dashboard.",\n },\n});\n\n<MessageFormat {...messages.hello} values={{ name: "Ada" }} />;\n```\n\n`description` is translator context; it is ignored at render time and never reaches the DOM.\n\nWrite every `defaultMessage` as a literal, whether it comes from a descriptor or the prop. Each distinct template is compiled once and cached, so a message built per render \u2014 interpolating a file name or a row into the template itself rather than passing it through `values` \u2014 churns that cache and recompiles the templates it displaces.\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\nconst messages = defineMessages({\n pageXofY: {\n id: "myApp.pageXofY",\n defaultMessage: "Page {current} of {total}",\n description:\n "Pagination status. `current` is the current page, `total` the last.",\n },\n});\n\n<MessageFormat {...messages.pageXofY} values={{ current: 2, total: 10 }} />;\n// \u2192 "Page 2 of 10"\n```\n\nSpreading the descriptor is what makes that true on its own. With a bare\n`id`, the same line renders `"Page 2 of 10"` only where a supplied catalog\ncovers the active locale, and the id itself everywhere else.',props:`interface MessageFormatProps {
14433
14702
  /**
14434
14703
  * By default \`<MessageFormat>\` will render the formatted string into a
@@ -28889,23 +29158,19 @@ className?: string
28889
29158
  */
28890
29159
  style?: React.CSSProperties
28891
29160
  /**
28892
- * The custom render function for the listbox options.
29161
+ * The custom render function for the collection's options.
28893
29162
  *
28894
- * Replaces the option's entire contents, including the default selection
28895
- * indicator \u2014 render your own affordance from \`options.isSelected\` if you
28896
- * need one. Selection and keyboard behavior are unaffected.
29163
+ * Replaces the option's entire contents, the default selection indicator
29164
+ * included, so render your own affordance from \`options\` when you need one.
29165
+ * The hover, focus and disabled styling lives in that default body too \u2014
29166
+ * only selection and keyboard behavior are unaffected. Keep a text label in
29167
+ * the output; it is what names the option to a screen reader.
28897
29168
  *
28898
29169
  * Reading component state here works, at the cost of rebuilding every cached option and
28899
29170
  * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
28900
29171
  * for when that cost applies.
28901
- *
28902
- * @param item ListOption
28903
- * @param options ListBoxItemRenderProps
28904
29172
  */
28905
- renderOption?: (
28906
- item: ListOption,
28907
- options: ListBoxItemRenderProps,
28908
- ) => React.ReactNode
29173
+ renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
28909
29174
  /**
28910
29175
  * A CSS class name added to the option's built-in classes.
28911
29176
  *
@@ -28913,10 +29178,7 @@ renderOption?: (
28913
29178
  * cached option and section on each render. A plain string is compared by value.
28914
29179
  */
28915
29180
  optionClassName?: | string
28916
- | ((
28917
- item: ListOption,
28918
- renderProps: ListBoxItemRenderProps,
28919
- ) => string | undefined)
29181
+ | ((item: TOption, renderProps: TRenderProps) => string | undefined)
28920
29182
  /**
28921
29183
  * The style of the option.
28922
29184
  *
@@ -28925,8 +29187,8 @@ optionClassName?: | string
28925
29187
  */
28926
29188
  optionStyle?: | React.CSSProperties
28927
29189
  | ((
28928
- item: ListOption,
28929
- renderProps: ListBoxItemRenderProps,
29190
+ item: TOption,
29191
+ renderProps: TRenderProps,
28930
29192
  ) => React.CSSProperties | undefined)
28931
29193
  /**
28932
29194
  * The custom render function for the listbox sections.
@@ -37271,7 +37533,7 @@ padding={[null, "lg", "xl"]}
37271
37533
 
37272
37534
  * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
37273
37535
  * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
37274
- * [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:"3.1.0"};var u=`
37536
+ * [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:"3.2.0"};var u=`
37275
37537
  # Baseline UI MCP Server Guidelines
37276
37538
 
37277
37539
  This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
package/dist/server.js CHANGED
@@ -1 +1 @@
1
- export{a as createServer}from'./chunk-MDOP4NRY.js';
1
+ export{a as createServer}from'./chunk-QT5OM7ZY.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@baseline-ui/mcp",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "description": "MCP server for Baseline UI design system documentation",
5
5
  "type": "module",
6
6
  "exports": {
package/sbom.json CHANGED
@@ -2,10 +2,10 @@
2
2
  "$schema": "http://cyclonedx.org/schema/bom-1.6.schema.json",
3
3
  "bomFormat": "CycloneDX",
4
4
  "specVersion": "1.6",
5
- "serialNumber": "urn:uuid:d6919b01-3233-40c9-bb76-aec15f57267c",
5
+ "serialNumber": "urn:uuid:12d2e2a8-b47d-448f-ae6b-e85da4bc36be",
6
6
  "version": 1,
7
7
  "metadata": {
8
- "timestamp": "2026-09-08T17:26:09.690Z",
8
+ "timestamp": "2026-09-24T06:10:25.902Z",
9
9
  "lifecycles": [
10
10
  {
11
11
  "phase": "pre-build"
@@ -23,9 +23,9 @@
23
23
  "component": {
24
24
  "type": "library",
25
25
  "name": "@baseline-ui/mcp",
26
- "version": "3.1.0",
27
- "purl": "pkg:npm/@baseline-ui/mcp@3.1.0",
28
- "bom-ref": "pkg:npm/@baseline-ui/mcp@3.1.0",
26
+ "version": "3.2.0",
27
+ "purl": "pkg:npm/@baseline-ui/mcp@3.2.0",
28
+ "bom-ref": "pkg:npm/@baseline-ui/mcp@3.2.0",
29
29
  "licenses": [
30
30
  {
31
31
  "license": {
@@ -2134,7 +2134,7 @@
2134
2134
  ],
2135
2135
  "dependencies": [
2136
2136
  {
2137
- "ref": "pkg:npm/@baseline-ui/mcp@3.1.0",
2137
+ "ref": "pkg:npm/@baseline-ui/mcp@3.2.0",
2138
2138
  "dependsOn": [
2139
2139
  "pkg:npm/%40modelcontextprotocol/sdk@1.29.0",
2140
2140
  "pkg:npm/fast-glob@3.3.3",