@baseline-ui/mcp 2.1.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/{chunk-GTOFKGAS.js → chunk-6CH7IMQH.js} +922 -28
- package/dist/index.js +1 -1
- package/dist/server.cjs +922 -28
- package/dist/server.js +1 -1
- package/package.json +1 -1
- package/sbom.json +6 -6
- package/dist/server.d.cts +0 -5
|
@@ -2348,6 +2348,14 @@ contentClassName?: string
|
|
|
2348
2348
|
* The class name for the close button.
|
|
2349
2349
|
*/
|
|
2350
2350
|
closeButtonClassName?: string
|
|
2351
|
+
/**
|
|
2352
|
+
* Overrides the accessible label of the close button (X) that dismisses
|
|
2353
|
+
* the dialog. This is distinct from \`cancelLabel\`, which is the visible
|
|
2354
|
+
* text of the footer cancel button.
|
|
2355
|
+
*
|
|
2356
|
+
* Message id: \`bui.alertDialog.close\`. Defaults to \`"Close"\`.
|
|
2357
|
+
*/
|
|
2358
|
+
closeLabel?: string
|
|
2351
2359
|
/**
|
|
2352
2360
|
* The class name for the button group wrapper.
|
|
2353
2361
|
*/
|
|
@@ -2535,6 +2543,40 @@ sources: {
|
|
|
2535
2543
|
* @default "lg"
|
|
2536
2544
|
*/
|
|
2537
2545
|
size?: "sm" | "lg"
|
|
2546
|
+
/**
|
|
2547
|
+
* Overrides the accessible name of the button that starts audio playback.
|
|
2548
|
+
*
|
|
2549
|
+
* Message id: \`bui.audioPlayer.play\`. Defaults to \`"Play"\`.
|
|
2550
|
+
*/
|
|
2551
|
+
playLabel?: string
|
|
2552
|
+
/**
|
|
2553
|
+
* Overrides the accessible name of the button that pauses audio playback.
|
|
2554
|
+
*
|
|
2555
|
+
* Message id: \`bui.audioPlayer.pause\`. Defaults to \`"Pause"\`.
|
|
2556
|
+
*/
|
|
2557
|
+
pauseLabel?: string
|
|
2558
|
+
/**
|
|
2559
|
+
* Overrides the accessible name of the slider used to seek through the
|
|
2560
|
+
* audio track.
|
|
2561
|
+
*
|
|
2562
|
+
* Message id: \`bui.audioPlayer.audioTimeline\`. Defaults to
|
|
2563
|
+
* \`"Audio timeline"\`.
|
|
2564
|
+
*/
|
|
2565
|
+
audioTimelineLabel?: string
|
|
2566
|
+
/**
|
|
2567
|
+
* Overrides the screen reader announcement made when audio playback
|
|
2568
|
+
* starts.
|
|
2569
|
+
*
|
|
2570
|
+
* Message id: \`bui.useMedia.playing\`. Defaults to \`"Playing"\`.
|
|
2571
|
+
*/
|
|
2572
|
+
playingLabel?: string
|
|
2573
|
+
/**
|
|
2574
|
+
* Overrides the screen reader announcement made when audio playback is
|
|
2575
|
+
* paused.
|
|
2576
|
+
*
|
|
2577
|
+
* Message id: \`bui.useMedia.paused\`. Defaults to \`"Paused"\`.
|
|
2578
|
+
*/
|
|
2579
|
+
pausedLabel?: string
|
|
2538
2580
|
}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:""},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.",documentation:`\`Avatar\` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.
|
|
2539
2581
|
|
|
2540
2582
|
\`\`\`jsx
|
|
@@ -3171,6 +3213,42 @@ title?: string
|
|
|
3171
3213
|
headerVariant?: | "title"
|
|
3172
3214
|
| "selectMonth"
|
|
3173
3215
|
| "selectMonthAndYear"
|
|
3216
|
+
/**
|
|
3217
|
+
* Overrides the accessible label of the button that moves the calendar forward one month.
|
|
3218
|
+
*
|
|
3219
|
+
* Message id: \`bui.calendar.nextMonth\`. Defaults to \`"Next month"\`.
|
|
3220
|
+
*/
|
|
3221
|
+
nextMonthLabel?: string
|
|
3222
|
+
/**
|
|
3223
|
+
* Overrides the accessible label of the button that moves the calendar back one month.
|
|
3224
|
+
*
|
|
3225
|
+
* Message id: \`bui.calendar.previousMonth\`. Defaults to \`"Previous month"\`.
|
|
3226
|
+
*/
|
|
3227
|
+
previousMonthLabel?: string
|
|
3228
|
+
/**
|
|
3229
|
+
* Overrides the accessible label of the button that moves the calendar forward one year.
|
|
3230
|
+
*
|
|
3231
|
+
* Message id: \`bui.calendar.nextYear\`. Defaults to \`"Next year"\`.
|
|
3232
|
+
*/
|
|
3233
|
+
nextYearLabel?: string
|
|
3234
|
+
/**
|
|
3235
|
+
* Overrides the accessible label of the button that moves the calendar back one year.
|
|
3236
|
+
*
|
|
3237
|
+
* Message id: \`bui.calendar.previousYear\`. Defaults to \`"Previous year"\`.
|
|
3238
|
+
*/
|
|
3239
|
+
previousYearLabel?: string
|
|
3240
|
+
/**
|
|
3241
|
+
* Overrides the accessible label of the dropdown that jumps the calendar to a chosen month.
|
|
3242
|
+
*
|
|
3243
|
+
* Message id: \`bui.calendar.selectMonth\`. Defaults to \`"Select month"\`.
|
|
3244
|
+
*/
|
|
3245
|
+
selectMonthLabel?: string
|
|
3246
|
+
/**
|
|
3247
|
+
* Overrides the accessible label of the dropdown that jumps the calendar to a chosen year.
|
|
3248
|
+
*
|
|
3249
|
+
* Message id: \`bui.calendar.selectYear\`. Defaults to \`"Select year"\`.
|
|
3250
|
+
*/
|
|
3251
|
+
selectYearLabel?: string
|
|
3174
3252
|
}`,stories:{usage:[{id:"core-forms-calendar--default",name:"Default",snippet:'const Default = () => <Calendar size="sm" aria-label="Event date" />;'},{id:"core-forms-calendar--with-title",name:"With Title",snippet:'const WithTitle = () => <Calendar size="sm" aria-label="Event date" title="Date" />;'},{id:"core-forms-calendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <Calendar
|
|
3175
3253
|
size="sm"
|
|
3176
3254
|
aria-label="Event date"
|
|
@@ -3609,6 +3687,42 @@ title?: string
|
|
|
3609
3687
|
headerVariant?: | "title"
|
|
3610
3688
|
| "selectMonth"
|
|
3611
3689
|
| "selectMonthAndYear"
|
|
3690
|
+
/**
|
|
3691
|
+
* Overrides the accessible label of the button that moves the calendar forward one month.
|
|
3692
|
+
*
|
|
3693
|
+
* Message id: \`bui.calendar.nextMonth\`. Defaults to \`"Next month"\`.
|
|
3694
|
+
*/
|
|
3695
|
+
nextMonthLabel?: string
|
|
3696
|
+
/**
|
|
3697
|
+
* Overrides the accessible label of the button that moves the calendar back one month.
|
|
3698
|
+
*
|
|
3699
|
+
* Message id: \`bui.calendar.previousMonth\`. Defaults to \`"Previous month"\`.
|
|
3700
|
+
*/
|
|
3701
|
+
previousMonthLabel?: string
|
|
3702
|
+
/**
|
|
3703
|
+
* Overrides the accessible label of the button that moves the calendar forward one year.
|
|
3704
|
+
*
|
|
3705
|
+
* Message id: \`bui.calendar.nextYear\`. Defaults to \`"Next year"\`.
|
|
3706
|
+
*/
|
|
3707
|
+
nextYearLabel?: string
|
|
3708
|
+
/**
|
|
3709
|
+
* Overrides the accessible label of the button that moves the calendar back one year.
|
|
3710
|
+
*
|
|
3711
|
+
* Message id: \`bui.calendar.previousYear\`. Defaults to \`"Previous year"\`.
|
|
3712
|
+
*/
|
|
3713
|
+
previousYearLabel?: string
|
|
3714
|
+
/**
|
|
3715
|
+
* Overrides the accessible label of the dropdown that jumps the calendar to a chosen month.
|
|
3716
|
+
*
|
|
3717
|
+
* Message id: \`bui.calendar.selectMonth\`. Defaults to \`"Select month"\`.
|
|
3718
|
+
*/
|
|
3719
|
+
selectMonthLabel?: string
|
|
3720
|
+
/**
|
|
3721
|
+
* Overrides the accessible label of the dropdown that jumps the calendar to a chosen year.
|
|
3722
|
+
*
|
|
3723
|
+
* Message id: \`bui.calendar.selectYear\`. Defaults to \`"Select year"\`.
|
|
3724
|
+
*/
|
|
3725
|
+
selectYearLabel?: string
|
|
3612
3726
|
}`,stories:{usage:[{id:"core-forms-rangecalendar--default",name:"Default",snippet:'const Default = () => <RangeCalendar size="sm" aria-label="Trip dates" />;'},{id:"core-forms-rangecalendar--with-title",name:"With Title",snippet:'const WithTitle = () => <RangeCalendar size="sm" aria-label="Trip dates" title="Date" />;'},{id:"core-forms-rangecalendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <RangeCalendar
|
|
3613
3727
|
size="sm"
|
|
3614
3728
|
aria-label="Trip dates"
|
|
@@ -4057,7 +4171,9 @@ pickerMode?: "active" | "lazy"
|
|
|
4057
4171
|
*/
|
|
4058
4172
|
storePickedColorKey?: string
|
|
4059
4173
|
/**
|
|
4060
|
-
* The label to show on the add color button
|
|
4174
|
+
* The label to show on the add color button that opens the color picker
|
|
4175
|
+
* for defining a new custom color. Not to be confused with \`addLabel\`,
|
|
4176
|
+
* which labels the "Add" confirmation button inside that picker.
|
|
4061
4177
|
*
|
|
4062
4178
|
* @default Add Color
|
|
4063
4179
|
*/
|
|
@@ -4074,6 +4190,52 @@ removeColorButtonLabel?: string
|
|
|
4074
4190
|
* @default Custom Colors
|
|
4075
4191
|
*/
|
|
4076
4192
|
customColorsLabel?: string
|
|
4193
|
+
/**
|
|
4194
|
+
* Overrides the label of the button that saves the custom color being
|
|
4195
|
+
* defined into the palette (shown inside the new-color picker in
|
|
4196
|
+
* \`pickerMode="lazy"\`). Not to be confused with \`addColorButtonLabel\`,
|
|
4197
|
+
* which labels the button that opens that picker.
|
|
4198
|
+
*
|
|
4199
|
+
* Message id: \`bui.colorInput.add\`. Defaults to \`"Add"\`.
|
|
4200
|
+
*/
|
|
4201
|
+
addLabel?: string
|
|
4202
|
+
/**
|
|
4203
|
+
* Overrides the label of the button that abandons the custom color being
|
|
4204
|
+
* defined (shown inside the new-color picker in \`pickerMode="lazy"\`).
|
|
4205
|
+
*
|
|
4206
|
+
* Message id: \`bui.colorInput.cancel\`. Defaults to \`"Cancel"\`.
|
|
4207
|
+
*/
|
|
4208
|
+
cancelLabel?: string
|
|
4209
|
+
/**
|
|
4210
|
+
* Overrides the accessible name of the dialog holding the color picker
|
|
4211
|
+
* used to define a new custom color, in \`pickerMode="lazy"\`.
|
|
4212
|
+
*
|
|
4213
|
+
* Message id: \`bui.colorInput.newColor\`. Defaults to \`"New Custom Color"\`.
|
|
4214
|
+
*/
|
|
4215
|
+
newColorLabel?: string
|
|
4216
|
+
/**
|
|
4217
|
+
* Overrides the accessible name of the control that switches the notation
|
|
4218
|
+
* a color is entered in (HEX, RGB).
|
|
4219
|
+
*
|
|
4220
|
+
* Message id: \`bui.colorInput.colorFormat\`. Defaults to \`"Color Format"\`.
|
|
4221
|
+
*/
|
|
4222
|
+
colorFormatLabel?: string
|
|
4223
|
+
/**
|
|
4224
|
+
* Overrides the accessible name of the group of predefined color swatches.
|
|
4225
|
+
*
|
|
4226
|
+
* Message id: \`bui.colorInput.colorPresets\`. Defaults to \`"Color Presets"\`.
|
|
4227
|
+
*/
|
|
4228
|
+
colorPresetsLabel?: string
|
|
4229
|
+
/**
|
|
4230
|
+
* Overrides the label of the swatch that clears the color selection, and the
|
|
4231
|
+
* accessible name of the trigger swatch while no color is set. Triggers that
|
|
4232
|
+
* render no swatch are unaffected; a custom \`renderTriggerButton\` must
|
|
4233
|
+
* forward the \`noneLabel\` it receives.
|
|
4234
|
+
*
|
|
4235
|
+
* Message ids: \`bui.colorInput.noColor\` (preset swatch),
|
|
4236
|
+
* \`bui.colorSwatch.none\` (trigger swatch). Both default to \`"None"\`.
|
|
4237
|
+
*/
|
|
4238
|
+
noColorLabel?: string
|
|
4077
4239
|
/**
|
|
4078
4240
|
* An optional function to render the custom trigger button.
|
|
4079
4241
|
*
|
|
@@ -4087,7 +4249,10 @@ renderTriggerButton?: (
|
|
|
4087
4249
|
colorName?: string | boolean;
|
|
4088
4250
|
triggerProps: AriaButtonProps<"button">;
|
|
4089
4251
|
labelId?: string;
|
|
4090
|
-
} & Pick<
|
|
4252
|
+
} & Pick<
|
|
4253
|
+
ColorSwatchProps,
|
|
4254
|
+
"isIndeterminate" | "indeterminateIcon" | "noneLabel"
|
|
4255
|
+
>,
|
|
4091
4256
|
) => React.JSX.Element
|
|
4092
4257
|
/**
|
|
4093
4258
|
* Handler that is called when the user stops dragging or clicking on the
|
|
@@ -4101,6 +4266,20 @@ onChangeEnd?: (color: Color | null) => void
|
|
|
4101
4266
|
* @default false
|
|
4102
4267
|
*/
|
|
4103
4268
|
isIndeterminate?: boolean
|
|
4269
|
+
/**
|
|
4270
|
+
* Overrides the accessible name of the color trigger when the current
|
|
4271
|
+
* selection spans several different colors (\`isIndeterminate\` is \`true\`).
|
|
4272
|
+
*
|
|
4273
|
+
* Message id: \`bui.colorInput.indeterminate\`. Defaults to \`"Indeterminate"\`.
|
|
4274
|
+
*/
|
|
4275
|
+
indeterminateLabel?: string
|
|
4276
|
+
/**
|
|
4277
|
+
* Overrides the label of the swatch representing a fully transparent
|
|
4278
|
+
* color.
|
|
4279
|
+
*
|
|
4280
|
+
* Message id: \`bui.colorInput.transparent\`. Defaults to \`"Transparent"\`.
|
|
4281
|
+
*/
|
|
4282
|
+
transparentLabel?: string
|
|
4104
4283
|
/**
|
|
4105
4284
|
* Handler that is called when the user presses the trigger button. This can
|
|
4106
4285
|
* be used to track events like clicks on the trigger button.
|
|
@@ -4373,6 +4552,13 @@ isIndeterminate?: boolean
|
|
|
4373
4552
|
* @default HelpIcon
|
|
4374
4553
|
*/
|
|
4375
4554
|
indeterminateIcon?: React.FC<IconProps> | null
|
|
4555
|
+
/**
|
|
4556
|
+
* Overrides the accessible label used when the swatch has no colour
|
|
4557
|
+
* applied.
|
|
4558
|
+
*
|
|
4559
|
+
* Message id: \`bui.colorSwatch.none\`. Defaults to \`"None"\`.
|
|
4560
|
+
*/
|
|
4561
|
+
noneLabel?: string
|
|
4376
4562
|
}`,stories:{usage:[{id:"core-content-colorswatch--basic",name:"Basic",snippet:'const Basic = () => <ColorSwatch color="#800800" />;'},{id:"core-content-colorswatch--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
4377
4563
|
<VariantViewer
|
|
4378
4564
|
header={["Enabled", "Focused", "Disabled"]}
|
|
@@ -5715,6 +5901,13 @@ warningMessage?: string
|
|
|
5715
5901
|
* @default "none"
|
|
5716
5902
|
*/
|
|
5717
5903
|
pickerType?: "none" | "presentation" | "calendar"
|
|
5904
|
+
/**
|
|
5905
|
+
* Overrides the accessible label of the button that opens the calendar
|
|
5906
|
+
* picker popover.
|
|
5907
|
+
*
|
|
5908
|
+
* Message id: \`bui.dateField.openCalendar\`. Defaults to \`"Open calendar"\`.
|
|
5909
|
+
*/
|
|
5910
|
+
openCalendarLabel?: string
|
|
5718
5911
|
}`,stories:{usage:[{id:"core-forms-datefield--basic",name:"Basic",snippet:'const Basic = () => <DateField onChange={fn()} aria-label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--with-label",name:"With Label",snippet:'const WithLabel = () => <DateField onChange={fn()} label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
5719
5912
|
<VariantViewer<React.ComponentProps<typeof DateField>>
|
|
5720
5913
|
cellStyle={{ minWidth: 300 }}
|
|
@@ -7303,6 +7496,12 @@ contentStyle?: React.CSSProperties
|
|
|
7303
7496
|
* The class name of the content container.
|
|
7304
7497
|
*/
|
|
7305
7498
|
contentClassName?: string
|
|
7499
|
+
/**
|
|
7500
|
+
* Overrides the accessible label of the close button.
|
|
7501
|
+
*
|
|
7502
|
+
* Message id: \`bui.drawer.close\`. Defaults to \`"Close"\`.
|
|
7503
|
+
*/
|
|
7504
|
+
closeLabel?: string
|
|
7306
7505
|
}`,stories:{usage:[{id:"core-overlays-drawer--basic",name:"Basic",snippet:'const Basic = () => <Drawer title=""><div style={{ height: 400 }} /></Drawer>;'},{id:"core-overlays-drawer--with-action",name:"With Action",snippet:`const WithAction = () => <Drawer
|
|
7307
7506
|
action={{
|
|
7308
7507
|
icon: EllipseIcon,
|
|
@@ -7534,6 +7733,182 @@ saveOnEnter?: boolean
|
|
|
7534
7733
|
* @default true
|
|
7535
7734
|
*/
|
|
7536
7735
|
autoLink?: boolean
|
|
7736
|
+
/**
|
|
7737
|
+
* Overrides the accessible name of the toolbar button that inserts an
|
|
7738
|
+
* @-mention, and the accessible name of the mention combobox it opens.
|
|
7739
|
+
*
|
|
7740
|
+
* Message id: \`bui.editor.mention\`. Defaults to \`"Mention"\`.
|
|
7741
|
+
*/
|
|
7742
|
+
mentionLabel?: string
|
|
7743
|
+
/**
|
|
7744
|
+
* Overrides the accessible name of the rich text toolbar's Bold toggle, and
|
|
7745
|
+
* the matching row in the keyboard shortcut dialog.
|
|
7746
|
+
*
|
|
7747
|
+
* Message id: \`bui.editor.bold\`. Defaults to \`"Bold"\`.
|
|
7748
|
+
*/
|
|
7749
|
+
boldLabel?: string
|
|
7750
|
+
/**
|
|
7751
|
+
* Overrides the accessible name of the rich text toolbar's Italic toggle,
|
|
7752
|
+
* and the matching row in the keyboard shortcut dialog.
|
|
7753
|
+
*
|
|
7754
|
+
* Message id: \`bui.editor.italic\`. Defaults to \`"Italic"\`.
|
|
7755
|
+
*/
|
|
7756
|
+
italicLabel?: string
|
|
7757
|
+
/**
|
|
7758
|
+
* Overrides the accessible name of the rich text toolbar's Underline
|
|
7759
|
+
* toggle, and the matching row in the keyboard shortcut dialog.
|
|
7760
|
+
*
|
|
7761
|
+
* Message id: \`bui.editor.underline\`. Defaults to \`"Underline"\`.
|
|
7762
|
+
*/
|
|
7763
|
+
underlineLabel?: string
|
|
7764
|
+
/**
|
|
7765
|
+
* Overrides the accessible name of the toolbar control that sets the
|
|
7766
|
+
* colour of the selected text.
|
|
7767
|
+
*
|
|
7768
|
+
* Message id: \`bui.editor.fontColor\`. Defaults to \`"Font color"\`.
|
|
7769
|
+
*/
|
|
7770
|
+
fontColorLabel?: string
|
|
7771
|
+
/**
|
|
7772
|
+
* Overrides the accessible name of the toolbar control that sets the
|
|
7773
|
+
* highlight colour drawn behind the selected text.
|
|
7774
|
+
*
|
|
7775
|
+
* Message id: \`bui.editor.backgroundColor\`. Defaults to \`"Background color"\`.
|
|
7776
|
+
*/
|
|
7777
|
+
backgroundColorLabel?: string
|
|
7778
|
+
/**
|
|
7779
|
+
* Overrides the title of the keyboard shortcut dialog, and the accessible
|
|
7780
|
+
* name of the toolbar button that opens it.
|
|
7781
|
+
*
|
|
7782
|
+
* Message id: \`bui.editor.help\`. Defaults to \`"Help"\`.
|
|
7783
|
+
*/
|
|
7784
|
+
helpLabel?: string
|
|
7785
|
+
/**
|
|
7786
|
+
* Overrides the accessible name of the icon button that dismisses the
|
|
7787
|
+
* keyboard shortcut dialog.
|
|
7788
|
+
*
|
|
7789
|
+
* Message id: \`bui.editor.close\`. Defaults to \`"Close"\`.
|
|
7790
|
+
*/
|
|
7791
|
+
closeLabel?: string
|
|
7792
|
+
/**
|
|
7793
|
+
* Overrides the "Action" column header of the keyboard shortcut dialog's
|
|
7794
|
+
* table.
|
|
7795
|
+
*
|
|
7796
|
+
* Message id: \`bui.editor.action\`. Defaults to \`"Action"\`.
|
|
7797
|
+
*/
|
|
7798
|
+
actionLabel?: string
|
|
7799
|
+
/**
|
|
7800
|
+
* Overrides the "Shortcut" column header of the keyboard shortcut dialog's
|
|
7801
|
+
* table.
|
|
7802
|
+
*
|
|
7803
|
+
* Message id: \`bui.editor.shortcut\`. Defaults to \`"Shortcut"\`.
|
|
7804
|
+
*/
|
|
7805
|
+
shortcutLabel?: string
|
|
7806
|
+
/**
|
|
7807
|
+
* Overrides the row label for the "move focus to the toolbar" command in
|
|
7808
|
+
* the keyboard shortcut dialog.
|
|
7809
|
+
*
|
|
7810
|
+
* Message id: \`bui.editor.toolbarFocus\`. Defaults to \`"Toolbar Focus"\`.
|
|
7811
|
+
*/
|
|
7812
|
+
toolbarFocusLabel?: string
|
|
7813
|
+
/**
|
|
7814
|
+
* Overrides the row label for the "select all" command in the keyboard
|
|
7815
|
+
* shortcut dialog.
|
|
7816
|
+
*
|
|
7817
|
+
* Message id: \`bui.editor.selectAll\`. Defaults to \`"Select All"\`.
|
|
7818
|
+
*/
|
|
7819
|
+
selectAllLabel?: string
|
|
7820
|
+
/**
|
|
7821
|
+
* Overrides the row label for the "cut" command in the keyboard shortcut
|
|
7822
|
+
* dialog.
|
|
7823
|
+
*
|
|
7824
|
+
* Message id: \`bui.editor.cut\`. Defaults to \`"Cut"\`.
|
|
7825
|
+
*/
|
|
7826
|
+
cutLabel?: string
|
|
7827
|
+
/**
|
|
7828
|
+
* Overrides the row label for the "copy" command in the keyboard shortcut
|
|
7829
|
+
* dialog.
|
|
7830
|
+
*
|
|
7831
|
+
* Message id: \`bui.editor.copy\`. Defaults to \`"Copy"\`.
|
|
7832
|
+
*/
|
|
7833
|
+
copyLabel?: string
|
|
7834
|
+
/**
|
|
7835
|
+
* Overrides the row label for the "paste" command in the keyboard shortcut
|
|
7836
|
+
* dialog.
|
|
7837
|
+
*
|
|
7838
|
+
* Message id: \`bui.editor.paste\`. Defaults to \`"Paste"\`.
|
|
7839
|
+
*/
|
|
7840
|
+
pasteLabel?: string
|
|
7841
|
+
/**
|
|
7842
|
+
* Overrides the row label for the "undo" command in the keyboard shortcut
|
|
7843
|
+
* dialog.
|
|
7844
|
+
*
|
|
7845
|
+
* Message id: \`bui.editor.undo\`. Defaults to \`"Undo"\`.
|
|
7846
|
+
*/
|
|
7847
|
+
undoLabel?: string
|
|
7848
|
+
/**
|
|
7849
|
+
* Overrides the row label for the "redo" command in the keyboard shortcut
|
|
7850
|
+
* dialog.
|
|
7851
|
+
*
|
|
7852
|
+
* Message id: \`bui.editor.redo\`. Defaults to \`"Redo"\`.
|
|
7853
|
+
*/
|
|
7854
|
+
redoLabel?: string
|
|
7855
|
+
/**
|
|
7856
|
+
* Overrides the row label for the "open help dialog" command in the
|
|
7857
|
+
* keyboard shortcut dialog.
|
|
7858
|
+
*
|
|
7859
|
+
* Message id: \`bui.editor.openHelpDialog\`. Defaults to \`"Open Help Dialog"\`.
|
|
7860
|
+
*/
|
|
7861
|
+
openHelpDialogLabel?: string
|
|
7862
|
+
/**
|
|
7863
|
+
* Overrides the row label for the "submit" command in the keyboard
|
|
7864
|
+
* shortcut dialog.
|
|
7865
|
+
*
|
|
7866
|
+
* Message id: \`bui.editor.submit\`. Defaults to \`"Submit"\`.
|
|
7867
|
+
*/
|
|
7868
|
+
submitLabel?: string
|
|
7869
|
+
/**
|
|
7870
|
+
* Overrides the accessible name of the link popover's toolbar trigger
|
|
7871
|
+
* button.
|
|
7872
|
+
*
|
|
7873
|
+
* Message id: \`bui.editor.addLink\`. Defaults to \`"Add Link"\`.
|
|
7874
|
+
*/
|
|
7875
|
+
addLinkLabel?: string
|
|
7876
|
+
/**
|
|
7877
|
+
* Overrides the label of the button that changes the URL of an existing
|
|
7878
|
+
* link, shown in the link popover.
|
|
7879
|
+
*
|
|
7880
|
+
* Message id: \`bui.editor.editLink\`. Defaults to \`"Edit Link"\`.
|
|
7881
|
+
*/
|
|
7882
|
+
editLinkLabel?: string
|
|
7883
|
+
/**
|
|
7884
|
+
* Overrides the label of the button that unlinks the selected text, shown
|
|
7885
|
+
* in the link popover.
|
|
7886
|
+
*
|
|
7887
|
+
* Message id: \`bui.editor.removeLink\`. Defaults to \`"Remove Link"\`.
|
|
7888
|
+
*/
|
|
7889
|
+
removeLinkLabel?: string
|
|
7890
|
+
/**
|
|
7891
|
+
* Overrides the label of the URL field in the link popover.
|
|
7892
|
+
*
|
|
7893
|
+
* Message id: \`bui.editor.linkAnnotation\`. Defaults to \`"Link"\`.
|
|
7894
|
+
*/
|
|
7895
|
+
linkAnnotationLabel?: string
|
|
7896
|
+
/**
|
|
7897
|
+
* Overrides the label of the Cancel button in the link popover's edit mode.
|
|
7898
|
+
* Distinct from \`cancelButtonAriaLabel\`, which labels the editor footer's
|
|
7899
|
+
* Cancel button.
|
|
7900
|
+
*
|
|
7901
|
+
* Message id: \`bui.editor.cancel\`. Defaults to \`"Cancel"\`.
|
|
7902
|
+
*/
|
|
7903
|
+
linkCancelLabel?: string
|
|
7904
|
+
/**
|
|
7905
|
+
* Overrides the label of the Save button in the link popover's edit mode.
|
|
7906
|
+
* Distinct from \`submitButtonAriaLabel\`, which labels the editor footer's
|
|
7907
|
+
* Save button.
|
|
7908
|
+
*
|
|
7909
|
+
* Message id: \`bui.editor.save\`. Defaults to \`"Save"\`.
|
|
7910
|
+
*/
|
|
7911
|
+
linkSaveLabel?: string
|
|
7537
7912
|
}`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
|
|
7538
7913
|
placeholder="Placeholder"
|
|
7539
7914
|
aria-label="Editor"
|
|
@@ -8033,6 +8408,36 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
|
|
|
8033
8408
|
editorHandle={editorHandleRef}
|
|
8034
8409
|
/>
|
|
8035
8410
|
);
|
|
8411
|
+
};
|
|
8412
|
+
|
|
8413
|
+
/**
|
|
8414
|
+
* The \`value\` is plain text, never the canonical HTML the editor serializes
|
|
8415
|
+
* back \u2014 canonicalizing it would stop reproducing the re-apply on every render.
|
|
8416
|
+
*/
|
|
8417
|
+
export const EditorControlledPlainValueBesideInput = () => {
|
|
8418
|
+
const [body, setBody] = React.useState("Hello there");
|
|
8419
|
+
const [name, setName] = React.useState("");
|
|
8420
|
+
|
|
8421
|
+
return (
|
|
8422
|
+
<>
|
|
8423
|
+
<input
|
|
8424
|
+
aria-label="Recipient name"
|
|
8425
|
+
value={name}
|
|
8426
|
+
onChange={(event) => {
|
|
8427
|
+
setName(event.currentTarget.value);
|
|
8428
|
+
}}
|
|
8429
|
+
/>
|
|
8430
|
+
<Editor
|
|
8431
|
+
enableRichText={true}
|
|
8432
|
+
value={body}
|
|
8433
|
+
// Inline on purpose: a stable handler would let Editor's React.memo
|
|
8434
|
+
// block the re-render this test needs.
|
|
8435
|
+
onChange={(next) => {
|
|
8436
|
+
setBody(next);
|
|
8437
|
+
}}
|
|
8438
|
+
/>
|
|
8439
|
+
</>
|
|
8440
|
+
);
|
|
8036
8441
|
};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
|
|
8037
8442
|
/**
|
|
8038
8443
|
* The description to display below the input.
|
|
@@ -8244,6 +8649,27 @@ onRemove?: (id: string) => void
|
|
|
8244
8649
|
* button or keyboard.
|
|
8245
8650
|
*/
|
|
8246
8651
|
disabledKeys?: Iterable<string> | "all"
|
|
8652
|
+
/**
|
|
8653
|
+
* Overrides the accessible name of a file row while it is loading, and of
|
|
8654
|
+
* its spinner.
|
|
8655
|
+
*
|
|
8656
|
+
* Message id: \`bui.fileList.loading\`. Defaults to \`"Loading {fileName}"\`.
|
|
8657
|
+
* A string is used as-is, with no placeholder substitution. To include
|
|
8658
|
+
* \`fileName\`, pass a function \u2014 it receives \`{ fileName }\` and its return
|
|
8659
|
+
* value is used verbatim.
|
|
8660
|
+
*/
|
|
8661
|
+
loadingLabel?: string | ((values: { fileName: string }) => string)
|
|
8662
|
+
/**
|
|
8663
|
+
* Overrides the accessible name of a removable file row, telling keyboard
|
|
8664
|
+
* users how to delete it.
|
|
8665
|
+
*
|
|
8666
|
+
* Message id: \`bui.fileList.removeHint\`. Defaults to
|
|
8667
|
+
* \`"{fileName}, press Delete or Backspace to remove"\`. A string is used
|
|
8668
|
+
* as-is, with no placeholder substitution. To include \`fileName\`, pass a
|
|
8669
|
+
* function \u2014 it receives \`{ fileName }\` and its return value is used
|
|
8670
|
+
* verbatim.
|
|
8671
|
+
*/
|
|
8672
|
+
removeHintLabel?: string | ((values: { fileName: string }) => string)
|
|
8247
8673
|
}`,stories:{usage:[{id:"core-collections-filelist--basic",name:"Basic",snippet:`const Basic = () => {
|
|
8248
8674
|
const [items, setItems] = React.useState(args.items);
|
|
8249
8675
|
React.useEffect(() => {
|
|
@@ -8372,7 +8798,7 @@ disabledKeys?: Iterable<string> | "all"
|
|
|
8372
8798
|
import { ActionButton } from "../../ActionButton";
|
|
8373
8799
|
import { FileList } from "../FileList";
|
|
8374
8800
|
|
|
8375
|
-
import type { FileListItem } from "../FileList.types";
|
|
8801
|
+
import type { FileListItem, FileListProps } from "../FileList.types";
|
|
8376
8802
|
|
|
8377
8803
|
export const defaultItems: FileListItem[] = [
|
|
8378
8804
|
{ id: "1", name: "report.pdf" },
|
|
@@ -8453,11 +8879,16 @@ export const UploadingFileList: React.FC = () => {
|
|
|
8453
8879
|
interface BasicProps {
|
|
8454
8880
|
onRemove?: (id: string) => void;
|
|
8455
8881
|
disabledKeys?: Iterable<string> | "all";
|
|
8882
|
+
removeHintLabel?: FileListProps["removeHintLabel"];
|
|
8883
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
8884
|
+
useFunctionLabel?: boolean;
|
|
8456
8885
|
}
|
|
8457
8886
|
|
|
8458
8887
|
export const BasicFileList: React.FC<BasicProps> = ({
|
|
8459
8888
|
onRemove,
|
|
8460
8889
|
disabledKeys,
|
|
8890
|
+
removeHintLabel,
|
|
8891
|
+
useFunctionLabel,
|
|
8461
8892
|
}) => {
|
|
8462
8893
|
const [items, setItems] = React.useState<FileListItem[]>(defaultItems);
|
|
8463
8894
|
return (
|
|
@@ -8465,6 +8896,11 @@ export const BasicFileList: React.FC<BasicProps> = ({
|
|
|
8465
8896
|
aria-label="Uploaded files"
|
|
8466
8897
|
items={items}
|
|
8467
8898
|
disabledKeys={disabledKeys}
|
|
8899
|
+
removeHintLabel={
|
|
8900
|
+
useFunctionLabel
|
|
8901
|
+
? ({ fileName }) => \`Remove \${fileName}?\`
|
|
8902
|
+
: removeHintLabel
|
|
8903
|
+
}
|
|
8468
8904
|
onRemove={(id) => {
|
|
8469
8905
|
onRemove?.(id);
|
|
8470
8906
|
setItems((current) => current.filter((item) => item.id !== id));
|
|
@@ -8477,8 +8913,25 @@ export const EmptyFileList: React.FC = () => (
|
|
|
8477
8913
|
<FileList aria-label="Empty" items={[]} />
|
|
8478
8914
|
);
|
|
8479
8915
|
|
|
8480
|
-
|
|
8481
|
-
|
|
8916
|
+
interface LoadingProps {
|
|
8917
|
+
loadingLabel?: FileListProps["loadingLabel"];
|
|
8918
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
8919
|
+
useFunctionLabel?: boolean;
|
|
8920
|
+
}
|
|
8921
|
+
|
|
8922
|
+
export const LoadingFileList: React.FC<LoadingProps> = ({
|
|
8923
|
+
loadingLabel,
|
|
8924
|
+
useFunctionLabel,
|
|
8925
|
+
}) => (
|
|
8926
|
+
<FileList
|
|
8927
|
+
aria-label="Uploaded files"
|
|
8928
|
+
items={loadingItems}
|
|
8929
|
+
loadingLabel={
|
|
8930
|
+
useFunctionLabel
|
|
8931
|
+
? ({ fileName }) => \`Working on \${fileName}\`
|
|
8932
|
+
: loadingLabel
|
|
8933
|
+
}
|
|
8934
|
+
/>
|
|
8482
8935
|
);
|
|
8483
8936
|
|
|
8484
8937
|
export const ErrorFileList: React.FC = () => (
|
|
@@ -10242,14 +10695,48 @@ children: React.ReactNode
|
|
|
10242
10695
|
locale?: string
|
|
10243
10696
|
messages?: LocalizedStrings
|
|
10244
10697
|
/**
|
|
10245
|
-
* Whether to \`console.warn\` about message
|
|
10246
|
-
*
|
|
10247
|
-
*
|
|
10248
|
-
* in
|
|
10698
|
+
* Whether to \`console.warn\` about message-resolution failures \u2014 see
|
|
10699
|
+
* {@link MessageIssueCode} for the kinds. These warnings are development
|
|
10700
|
+
* guidance, so they are off in production builds \u2014 pass \`true\` to opt back
|
|
10701
|
+
* in. Ignored when \`onMessageIssue\` is supplied.
|
|
10249
10702
|
*
|
|
10250
10703
|
* @default process.env.NODE_ENV !== "production"
|
|
10251
10704
|
*/
|
|
10252
10705
|
shouldLogMissingMessages?: boolean
|
|
10706
|
+
/**
|
|
10707
|
+
* Called for every message-resolution failure, with enough detail to tell an
|
|
10708
|
+
* unresolved id from a malformed message and route either into your own
|
|
10709
|
+
* diagnostics.
|
|
10710
|
+
*
|
|
10711
|
+
* Supplying a handler takes ownership of these failures: Baseline UI reports
|
|
10712
|
+
* to it instead of writing to the console, so \`shouldLogMissingMessages\` no
|
|
10713
|
+
* longer applies. Unlike the console warnings, the handler is also called in
|
|
10714
|
+
* production builds.
|
|
10715
|
+
*
|
|
10716
|
+
* Issues are deduplicated: after mount, each distinct failure is reported
|
|
10717
|
+
* once per locale rather than once per render, and changing the locale starts
|
|
10718
|
+
* a fresh set.
|
|
10719
|
+
*
|
|
10720
|
+
* Called **during render** \u2014 except \`locale-alias-collision\`, which is
|
|
10721
|
+
* reported from an effect \u2014 so it must not set state synchronously. Collect
|
|
10722
|
+
* into a ref, or defer with \`queueMicrotask\`, if a failure needs to reach the
|
|
10723
|
+
* UI. A handler that throws is caught and its own error logged, so a broken
|
|
10724
|
+
* handler cannot take the tree down.
|
|
10725
|
+
*
|
|
10726
|
+
* @example
|
|
10727
|
+
* \`\`\`tsx
|
|
10728
|
+
* <I18nProvider
|
|
10729
|
+
* messages={messages}
|
|
10730
|
+
* onMessageIssue={(issue) => {
|
|
10731
|
+
* if (issue.code === "missing-message") return;
|
|
10732
|
+
* telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
10733
|
+
* }}
|
|
10734
|
+
* >
|
|
10735
|
+
* {children}
|
|
10736
|
+
* </I18nProvider>
|
|
10737
|
+
* \`\`\`;
|
|
10738
|
+
*/
|
|
10739
|
+
onMessageIssue?: (issue: MessageIssue) => void
|
|
10253
10740
|
}`,stories:{usage:[{id:"core-utilities-i18nprovider--string-format",name:"String Format",snippet:`const StringFormat = ({ children }) => {
|
|
10254
10741
|
const { locale } = useLocale();
|
|
10255
10742
|
return <I18nProvider locale={locale}>{children}</I18nProvider>;
|
|
@@ -10257,6 +10744,8 @@ shouldLogMissingMessages?: boolean
|
|
|
10257
10744
|
import React from "react";
|
|
10258
10745
|
|
|
10259
10746
|
import { useI18n } from "../../../hooks";
|
|
10747
|
+
import { Pagination } from "../../Pagination";
|
|
10748
|
+
import { I18nProvider } from "../I18nProvider";
|
|
10260
10749
|
|
|
10261
10750
|
export const messages = {
|
|
10262
10751
|
en: { greeting: "Hello, {name} !" },
|
|
@@ -10308,7 +10797,23 @@ export const LocaleStringExample: React.FC<{
|
|
|
10308
10797
|
{formatter.formatMessage("greeting", { name })}
|
|
10309
10798
|
</div>
|
|
10310
10799
|
);
|
|
10311
|
-
}
|
|
10800
|
+
};
|
|
10801
|
+
|
|
10802
|
+
const paginationCatalog = {
|
|
10803
|
+
en: { "bui.pagination.pageXofY": "Catalog position" },
|
|
10804
|
+
};
|
|
10805
|
+
|
|
10806
|
+
/** The same ID resolved twice: from the catalog, and from an override prop. */
|
|
10807
|
+
export const OverridePrecedenceExample: React.FC = () => (
|
|
10808
|
+
<I18nProvider locale="en" messages={paginationCatalog}>
|
|
10809
|
+
<Pagination aria-label="from catalog" maxValue={10} />
|
|
10810
|
+
<Pagination
|
|
10811
|
+
aria-label="from prop"
|
|
10812
|
+
maxValue={10}
|
|
10813
|
+
pageXofYLabel="Prop position"
|
|
10814
|
+
/>
|
|
10815
|
+
</I18nProvider>
|
|
10816
|
+
);`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
|
|
10312
10817
|
|
|
10313
10818
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
10314
10819
|
* Labeling support for screen readers (aria-describedby)
|
|
@@ -10843,6 +11348,28 @@ layoutTransition?: Transition | boolean
|
|
|
10843
11348
|
* @default "Are you sure you want to delete this item?"
|
|
10844
11349
|
*/
|
|
10845
11350
|
deleteConfirmationTitle?: string | ((selectedKeys: Selection) => string)
|
|
11351
|
+
/**
|
|
11352
|
+
* Overrides the label of the button that permanently deletes the selected
|
|
11353
|
+
* image(s), and the accessible label of each image's individual delete
|
|
11354
|
+
* button.
|
|
11355
|
+
*
|
|
11356
|
+
* Message id: \`bui.imageGallery.delete\`. Defaults to \`"Delete"\`.
|
|
11357
|
+
*/
|
|
11358
|
+
deleteLabel?: string
|
|
11359
|
+
/**
|
|
11360
|
+
* Overrides the label of the button that dismisses the delete confirmation
|
|
11361
|
+
* modal without deleting anything.
|
|
11362
|
+
*
|
|
11363
|
+
* Message id: \`bui.imageGallery.cancel\`. Defaults to \`"Cancel"\`.
|
|
11364
|
+
*/
|
|
11365
|
+
cancelLabel?: string
|
|
11366
|
+
/**
|
|
11367
|
+
* Overrides the accessible label announced while an image is still
|
|
11368
|
+
* loading.
|
|
11369
|
+
*
|
|
11370
|
+
* Message id: \`bui.imageGallery.loading\`. Defaults to \`"Loading"\`.
|
|
11371
|
+
*/
|
|
11372
|
+
loadingLabel?: string
|
|
10846
11373
|
}`,stories:{usage:[{id:"core-collections-imagegallery--basic",name:"Basic",snippet:'const Basic = () => <ImageGallery fit="cover" aria-label="Image gallery" defaultItems={items.slice(0, 4)} />;'},{id:"core-collections-imagegallery--more-items",name:"More Items",snippet:'const MoreItems = () => <ImageGallery fit="cover" aria-label="Image gallery" defaultItems={items} />;'},{id:"core-collections-imagegallery--with-medium-size",name:"With Medium Size",snippet:`const WithMediumSize = () => <ImageGallery
|
|
10847
11374
|
fit="cover"
|
|
10848
11375
|
aria-label="Image gallery"
|
|
@@ -11526,6 +12053,12 @@ onAction?: () => void
|
|
|
11526
12053
|
* close button will be rendered.
|
|
11527
12054
|
*/
|
|
11528
12055
|
onClose?: () => void
|
|
12056
|
+
/**
|
|
12057
|
+
* Overrides the accessible label of the close button.
|
|
12058
|
+
*
|
|
12059
|
+
* Message id: \`bui.inlineAlert.close\`. Defaults to \`"Close"\`.
|
|
12060
|
+
*/
|
|
12061
|
+
closeLabel?: string
|
|
11529
12062
|
/**
|
|
11530
12063
|
* The arrangement of the variable.
|
|
11531
12064
|
*
|
|
@@ -13863,7 +14396,7 @@ export const MenuPartialSectionSelectionExample: React.FC<{
|
|
|
13863
14396
|
<div data-testid="menu-partial-action">{action}</div>
|
|
13864
14397
|
</>
|
|
13865
14398
|
);
|
|
13866
|
-
};`},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`.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.\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```',props:`interface MessageFormatProps {
|
|
14399
|
+
};`},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`.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.\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\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\n<MessageFormat id="bui.pagination.pageXofY" values={{ arg0: 2, arg1: 10 }} />\n// \u2192 "Page 2 of 10"\n```',props:`interface MessageFormatProps {
|
|
13867
14400
|
/**
|
|
13868
14401
|
* By default \`<MessageFormat>\` will render the formatted string into a
|
|
13869
14402
|
* \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
|
|
@@ -13879,6 +14412,11 @@ id: string
|
|
|
13879
14412
|
* The default message to use if the message id is not found.
|
|
13880
14413
|
*/
|
|
13881
14414
|
defaultMessage?: string
|
|
14415
|
+
/**
|
|
14416
|
+
* Values for the message's ICU placeholders, e.g. \`{ arg0: 2, arg1: 10 }\` for
|
|
14417
|
+
* \`"Page {arg0} of {arg1}"\`.
|
|
14418
|
+
*/
|
|
14419
|
+
values?: Record<string, any>
|
|
13882
14420
|
}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="myApp.addSignature" defaultMessage="Add signature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
|
|
13883
14421
|
|
|
13884
14422
|
* The content outside the modal is hidden from screen readers.
|
|
@@ -14948,6 +15486,18 @@ size?: "xs" | "sm" | "md" | "lg"
|
|
|
14948
15486
|
* Whether to hide the increment and decrement actions.
|
|
14949
15487
|
*/
|
|
14950
15488
|
hideActions?: boolean
|
|
15489
|
+
/**
|
|
15490
|
+
* Overrides the accessible name announcing the current position in the
|
|
15491
|
+
* document.
|
|
15492
|
+
*
|
|
15493
|
+
* Message id: \`bui.pagination.pageXofY\`. Defaults to
|
|
15494
|
+
* \`"Page {arg0} of {arg1}"\`, where \`arg0\` is the current page and \`arg1\`
|
|
15495
|
+
* the total page count. A string is used as-is, with no placeholder
|
|
15496
|
+
* substitution. To include the numbers, pass a function \u2014 it receives
|
|
15497
|
+
* \`{ page, totalPages }\` and its return value is used verbatim.
|
|
15498
|
+
*/
|
|
15499
|
+
pageXofYLabel?: | string
|
|
15500
|
+
| ((values: { page: number; totalPages: number }) => string)
|
|
14951
15501
|
minValue?: any
|
|
14952
15502
|
defaultValue?: any
|
|
14953
15503
|
}`,stories:{usage:[{id:"core-forms-pagination--primary",name:"Primary",snippet:'const Primary = () => <Pagination maxValue={10} aria-label="Pagination" />;'},{id:"core-forms-pagination--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
@@ -15011,7 +15561,29 @@ defaultValue?: any
|
|
|
15011
15561
|
},
|
|
15012
15562
|
}}>
|
|
15013
15563
|
<Pagination maxValue={10} aria-label="Pagination" />
|
|
15014
|
-
</I18nProvider>;`}],implementation
|
|
15564
|
+
</I18nProvider>;`}],implementation:`import React from "react";
|
|
15565
|
+
|
|
15566
|
+
import { Pagination } from "../Pagination";
|
|
15567
|
+
|
|
15568
|
+
/**
|
|
15569
|
+
* Pagination whose \`pageXofYLabel\` is the callback form. Playwright cannot
|
|
15570
|
+
* serialize a function prop, so it is built here rather than in the spec.
|
|
15571
|
+
*
|
|
15572
|
+
* The label does arithmetic on \`page\` so the assertion fails if the callback
|
|
15573
|
+
* is ever handed the formatted string instead of the number.
|
|
15574
|
+
*/
|
|
15575
|
+
export function FunctionPageLabelPagination() {
|
|
15576
|
+
return (
|
|
15577
|
+
<Pagination
|
|
15578
|
+
aria-label="test"
|
|
15579
|
+
maxValue={100}
|
|
15580
|
+
defaultValue={5}
|
|
15581
|
+
pageXofYLabel={({ page, totalPages }) =>
|
|
15582
|
+
\`Currently \${page}/\${totalPages}, next is \${page + 1}\`
|
|
15583
|
+
}
|
|
15584
|
+
/>
|
|
15585
|
+
);
|
|
15586
|
+
}`},similarTo:[],figmaUrl:null},Panel:{id:"core-utilities-panel",breadcrumb:"Core/Utilities/Panel",importStatement:`import {
|
|
15015
15587
|
PanelCollapsibleStoryExample,
|
|
15016
15588
|
PanelConditionalExample,
|
|
15017
15589
|
PanelControlledExample,
|
|
@@ -19551,6 +20123,36 @@ hideSelectAll?: boolean
|
|
|
19551
20123
|
* @default false
|
|
19552
20124
|
*/
|
|
19553
20125
|
hideClear?: boolean
|
|
20126
|
+
/**
|
|
20127
|
+
* Overrides the label of the button that unticks every selected option.
|
|
20128
|
+
*
|
|
20129
|
+
* Message id: \`bui.select.clear\`. Defaults to \`"Clear"\`.
|
|
20130
|
+
*/
|
|
20131
|
+
clearLabel?: string
|
|
20132
|
+
/**
|
|
20133
|
+
* Overrides the placeholder and accessible name of the input that filters
|
|
20134
|
+
* the option list.
|
|
20135
|
+
*
|
|
20136
|
+
* Message id: \`bui.select.search\`. Defaults to \`"Search"\`.
|
|
20137
|
+
*/
|
|
20138
|
+
searchLabel?: string
|
|
20139
|
+
/**
|
|
20140
|
+
* Overrides the label of the button that ticks every option in a
|
|
20141
|
+
* multi-select list.
|
|
20142
|
+
*
|
|
20143
|
+
* Message id: \`bui.select.selectAll\`. Defaults to \`"Select All"\`.
|
|
20144
|
+
*/
|
|
20145
|
+
selectAllLabel?: string
|
|
20146
|
+
/**
|
|
20147
|
+
* Overrides the tag shown on the select trigger standing in for the
|
|
20148
|
+
* selected options that did not fit.
|
|
20149
|
+
*
|
|
20150
|
+
* Message id: \`bui.select.more\`. Defaults to \`"+{count} more"\`, where
|
|
20151
|
+
* \`count\` is the number of hidden options. A string is used as-is, with
|
|
20152
|
+
* no placeholder substitution. To include \`count\`, pass a function \u2014 it
|
|
20153
|
+
* receives \`{ count }\` and its return value is used verbatim.
|
|
20154
|
+
*/
|
|
20155
|
+
moreLabel?: string | ((values: { count: number }) => string)
|
|
19554
20156
|
}`,stories:{usage:[{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
|
|
19555
20157
|
32 | type Story = StoryObj<typeof meta>;
|
|
19556
20158
|
33 |
|
|
@@ -19772,13 +20374,19 @@ import type { IconSelectProps } from "../Select.types";
|
|
|
19772
20374
|
import type { Key } from "@react-types/shared";
|
|
19773
20375
|
|
|
19774
20376
|
export const SelectExample: React.FC<
|
|
19775
|
-
Omit<React.ComponentProps<typeof Select>, "items">
|
|
19776
|
-
|
|
20377
|
+
Omit<React.ComponentProps<typeof Select>, "items"> & {
|
|
20378
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
20379
|
+
useFunctionLabel?: boolean;
|
|
20380
|
+
}
|
|
20381
|
+
> = ({ useFunctionLabel, ...args }) => {
|
|
19777
20382
|
return (
|
|
19778
20383
|
<Select
|
|
19779
20384
|
placeholder="Choose an item"
|
|
19780
20385
|
optionClassName={(item) => item.label}
|
|
19781
20386
|
{...args}
|
|
20387
|
+
moreLabel={
|
|
20388
|
+
useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
|
|
20389
|
+
}
|
|
19782
20390
|
items={items}
|
|
19783
20391
|
/>
|
|
19784
20392
|
);
|
|
@@ -20906,6 +21514,23 @@ isDisabled?: boolean
|
|
|
20906
21514
|
* (e.g. "Checkout").
|
|
20907
21515
|
*/
|
|
20908
21516
|
aria-label?: string
|
|
21517
|
+
/**
|
|
21518
|
+
* Overrides the fallback accessible name of a step when the application
|
|
21519
|
+
* supplies no title.
|
|
21520
|
+
*
|
|
21521
|
+
* Message id: \`bui.stepper.step\`. Defaults to \`"Step {index}"\`, where
|
|
21522
|
+
* \`index\` is the step's 1-based position. A string is used as-is, with
|
|
21523
|
+
* no placeholder substitution. To include \`index\`, pass a function \u2014 it
|
|
21524
|
+
* receives \`{ index }\` and its return value is used verbatim.
|
|
21525
|
+
*/
|
|
21526
|
+
stepLabel?: string | ((values: { index: number }) => string)
|
|
21527
|
+
/**
|
|
21528
|
+
* Overrides the screen-reader-only suffix marking a step the reader has
|
|
21529
|
+
* finished.
|
|
21530
|
+
*
|
|
21531
|
+
* Message id: \`bui.stepper.completed\`. Defaults to \`"Completed"\`.
|
|
21532
|
+
*/
|
|
21533
|
+
completedLabel?: string
|
|
20909
21534
|
}`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
|
|
20910
21535
|
items={items}
|
|
20911
21536
|
aria-label="Checkout"
|
|
@@ -21078,6 +21703,22 @@ export const checkoutItems: StepperItem[] = [
|
|
|
21078
21703
|
|
|
21079
21704
|
const defaultItems = checkoutItems;
|
|
21080
21705
|
|
|
21706
|
+
/**
|
|
21707
|
+
* Condensed Stepper whose \`stepLabel\` is the callback form. Playwright cannot
|
|
21708
|
+
* serialize a function prop, so it is built here rather than in the spec.
|
|
21709
|
+
*/
|
|
21710
|
+
export function FunctionStepLabelStepper() {
|
|
21711
|
+
return (
|
|
21712
|
+
<Stepper
|
|
21713
|
+
items={defaultItems.map(({ key }) => ({ key }))}
|
|
21714
|
+
variant="condensed"
|
|
21715
|
+
defaultSelectedStep="cart"
|
|
21716
|
+
aria-label="Checkout"
|
|
21717
|
+
stepLabel={({ index }) => \`Phase \${index}\`}
|
|
21718
|
+
/>
|
|
21719
|
+
);
|
|
21720
|
+
}
|
|
21721
|
+
|
|
21081
21722
|
export interface ControlledStepperProps {
|
|
21082
21723
|
items?: StepperItem[];
|
|
21083
21724
|
initialSelected?: Key;
|
|
@@ -23041,6 +23682,7 @@ interface AsyncLoadingTableExampleProps {
|
|
|
23041
23682
|
totalCount?: number;
|
|
23042
23683
|
loadingDelay?: number;
|
|
23043
23684
|
scrollOffset?: number;
|
|
23685
|
+
loadingLabel?: string;
|
|
23044
23686
|
}
|
|
23045
23687
|
|
|
23046
23688
|
/** Virtualized table that loads more rows automatically near the end. */
|
|
@@ -23054,6 +23696,7 @@ export const AsyncLoadingTableExample: React.FC<
|
|
|
23054
23696
|
totalCount = 60,
|
|
23055
23697
|
loadingDelay = 50,
|
|
23056
23698
|
scrollOffset = 1,
|
|
23699
|
+
loadingLabel,
|
|
23057
23700
|
}) => {
|
|
23058
23701
|
const dataset = generateLargeDataset(totalCount);
|
|
23059
23702
|
const [visibleCount, setVisibleCount] = useState(initialCount);
|
|
@@ -23119,6 +23762,7 @@ export const AsyncLoadingTableExample: React.FC<
|
|
|
23119
23762
|
}
|
|
23120
23763
|
isLoading={isLoading}
|
|
23121
23764
|
scrollOffset={scrollOffset}
|
|
23765
|
+
loadingLabel={loadingLabel}
|
|
23122
23766
|
>
|
|
23123
23767
|
{(row) => {
|
|
23124
23768
|
const typedRow = row as ReturnType<typeof generateLargeDataset>[0];
|
|
@@ -26571,6 +27215,14 @@ onKeyDown?: KeyboardProps["onKeyDown"]
|
|
|
26571
27215
|
* @default true
|
|
26572
27216
|
*/
|
|
26573
27217
|
isSingleTabStop?: boolean
|
|
27218
|
+
/**
|
|
27219
|
+
* Overrides the accessible label of the overflow button that reveals the
|
|
27220
|
+
* toolbar items which did not fit in the available width. This prop is
|
|
27221
|
+
* only relevant when \`isCollapsible\` is true.
|
|
27222
|
+
*
|
|
27223
|
+
* Message id: \`bui.toolbar.more\`. Defaults to \`"More"\`.
|
|
27224
|
+
*/
|
|
27225
|
+
moreLabel?: string
|
|
26574
27226
|
}`,stories:{usage:[{id:"core-miscellaneous-toolbar--basic",name:"Basic",snippet:'const Basic = () => <Toolbar style={{ display: "flex", flexDirection: "row", alignItems: "center" }}><ToolbarChildren /></Toolbar>;'},{id:"core-miscellaneous-toolbar--vertical",name:"Vertical",snippet:`const Vertical = () => <Toolbar
|
|
26575
27227
|
orientation="vertical"
|
|
26576
27228
|
style={{ display: "flex", flexDirection: "column", alignItems: "center" }} />;`},{id:"core-miscellaneous-toolbar--with-tooltip",name:"With Tooltip",snippet:"const WithTooltip = () => <Toolbar><ChildrenWithTooltip /></Toolbar>;"},{id:"core-miscellaneous-toolbar--with-over-flow",name:"With Over Flow",snippet:'const WithOverFlow = () => <Toolbar style={{ width: "max-content", display: "flex", alignItems: "center" }} />;'},{id:"core-miscellaneous-toolbar--with-tabbing-within",name:"With Tabbing Within",snippet:`const WithTabbingWithin = () => <Toolbar
|
|
@@ -26645,6 +27297,7 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26645
27297
|
onDisabledPress?: () => void;
|
|
26646
27298
|
maxWidth?: number;
|
|
26647
27299
|
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
27300
|
+
moreLabel?: string;
|
|
26648
27301
|
}> = ({
|
|
26649
27302
|
onPageAdd,
|
|
26650
27303
|
onPageRemove,
|
|
@@ -26653,6 +27306,7 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26653
27306
|
onDisabledPress,
|
|
26654
27307
|
maxWidth: _maxWidth,
|
|
26655
27308
|
onKeyDown,
|
|
27309
|
+
moreLabel,
|
|
26656
27310
|
}) => {
|
|
26657
27311
|
const [maxWidth, setMaxWidth] = useState(_maxWidth);
|
|
26658
27312
|
|
|
@@ -26682,7 +27336,11 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26682
27336
|
justifyContent: "center",
|
|
26683
27337
|
}}
|
|
26684
27338
|
onKeyDown={onKeyDown}
|
|
26685
|
-
|
|
27339
|
+
moreLabel={moreLabel}
|
|
27340
|
+
collapsibleMenuProps={
|
|
27341
|
+
moreLabel
|
|
27342
|
+
? undefined
|
|
27343
|
+
: {
|
|
26686
27344
|
renderTrigger: ({ buttonProps, ref }) => (
|
|
26687
27345
|
<ActionIconButton
|
|
26688
27346
|
{...buttonProps}
|
|
@@ -26694,7 +27352,8 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26694
27352
|
tooltip={true}
|
|
26695
27353
|
/>
|
|
26696
27354
|
),
|
|
26697
|
-
}
|
|
27355
|
+
}
|
|
27356
|
+
}
|
|
26698
27357
|
>
|
|
26699
27358
|
<ActionButton
|
|
26700
27359
|
iconStart={EllipseIcon}
|
|
@@ -27418,11 +28077,32 @@ secondaryActionAriaLabel?: string | ((key: Key) => string)
|
|
|
27418
28077
|
* @default "start"
|
|
27419
28078
|
*/
|
|
27420
28079
|
actionsPosition?: "start" | "end"
|
|
28080
|
+
/**
|
|
28081
|
+
* Overrides the accessible label of the button that expands a tree item to
|
|
28082
|
+
* reveal its children.
|
|
28083
|
+
*
|
|
28084
|
+
* Message id: \`bui.treeView.expand\`. Defaults to \`"Expand"\`.
|
|
28085
|
+
*/
|
|
28086
|
+
expandLabel?: string
|
|
28087
|
+
/**
|
|
28088
|
+
* Overrides the accessible label of the button that collapses a tree item
|
|
28089
|
+
* to hide its children.
|
|
28090
|
+
*
|
|
28091
|
+
* Message id: \`bui.treeView.collapse\`. Defaults to \`"Collapse"\`.
|
|
28092
|
+
*/
|
|
28093
|
+
collapseLabel?: string
|
|
27421
28094
|
/**
|
|
27422
28095
|
* The callback function that is called when the item is renamed. The rename
|
|
27423
28096
|
* functionality is disabled if not provided.
|
|
27424
28097
|
*/
|
|
27425
28098
|
onRename?: (options: { key: Key; value: string }) => void
|
|
28099
|
+
/**
|
|
28100
|
+
* Overrides the accessible label of the input shown while an item is being
|
|
28101
|
+
* renamed.
|
|
28102
|
+
*
|
|
28103
|
+
* Message id: \`bui.treeView.rename\`. Defaults to \`"Rename"\`.
|
|
28104
|
+
*/
|
|
28105
|
+
renameLabel?: string
|
|
27426
28106
|
/**
|
|
27427
28107
|
* The callback function that is called when the item is clicked.
|
|
27428
28108
|
*/
|
|
@@ -27640,6 +28320,27 @@ export function TreeViewWithPrimaryActionAtEnd({
|
|
|
27640
28320
|
);
|
|
27641
28321
|
}
|
|
27642
28322
|
|
|
28323
|
+
export function TreeViewWithSwappableLabels(): React.JSX.Element {
|
|
28324
|
+
const [swapped, setSwapped] = useState(false);
|
|
28325
|
+
const items = useMemo(() => getTreeItems({}), []);
|
|
28326
|
+
|
|
28327
|
+
return (
|
|
28328
|
+
<Box display="flex" flexDirection="column" gap="md">
|
|
28329
|
+
<ActionButton
|
|
28330
|
+
label="Swap labels"
|
|
28331
|
+
onPress={() => {
|
|
28332
|
+
setSwapped(true);
|
|
28333
|
+
}}
|
|
28334
|
+
/>
|
|
28335
|
+
<TreeView
|
|
28336
|
+
items={items}
|
|
28337
|
+
defaultExpandedKeys={["documents"]}
|
|
28338
|
+
expandLabel={swapped ? "Aufklappen" : "Expand"}
|
|
28339
|
+
/>
|
|
28340
|
+
</Box>
|
|
28341
|
+
);
|
|
28342
|
+
}
|
|
28343
|
+
|
|
27643
28344
|
export function TreeViewWithCustomTitle(): React.JSX.Element {
|
|
27644
28345
|
return (
|
|
27645
28346
|
<TreeView
|
|
@@ -34114,13 +34815,19 @@ import type { IconSelectProps } from "../Select.types";
|
|
|
34114
34815
|
import type { Key } from "@react-types/shared";
|
|
34115
34816
|
|
|
34116
34817
|
export const SelectExample: React.FC<
|
|
34117
|
-
Omit<React.ComponentProps<typeof Select>, "items">
|
|
34118
|
-
|
|
34818
|
+
Omit<React.ComponentProps<typeof Select>, "items"> & {
|
|
34819
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
34820
|
+
useFunctionLabel?: boolean;
|
|
34821
|
+
}
|
|
34822
|
+
> = ({ useFunctionLabel, ...args }) => {
|
|
34119
34823
|
return (
|
|
34120
34824
|
<Select
|
|
34121
34825
|
placeholder="Choose an item"
|
|
34122
34826
|
optionClassName={(item) => item.label}
|
|
34123
34827
|
{...args}
|
|
34828
|
+
moreLabel={
|
|
34829
|
+
useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
|
|
34830
|
+
}
|
|
34124
34831
|
items={items}
|
|
34125
34832
|
/>
|
|
34126
34833
|
);
|
|
@@ -34517,6 +35224,22 @@ Import the following files at the top of your stylesheet to use the Baseline UI
|
|
|
34517
35224
|
|
|
34518
35225
|
Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.
|
|
34519
35226
|
|
|
35227
|
+
## Bundle size
|
|
35228
|
+
|
|
35229
|
+
Components, hooks and utilities are tree shakeable. Importing from \`@baseline-ui/core\` bundles what you name and what it depends on, not the whole library \u2014 keep importing from the package root, there are no deep entry points to reach for:
|
|
35230
|
+
|
|
35231
|
+
\`\`\`jsx
|
|
35232
|
+
// Bundles Checkbox, not the rest of the library.
|
|
35233
|
+
import { Checkbox } from "@baseline-ui/core";
|
|
35234
|
+
|
|
35235
|
+
// Bundles the hook alone, not the components that also use it.
|
|
35236
|
+
import { useLocalStorage } from "@baseline-ui/core";
|
|
35237
|
+
\`\`\`
|
|
35238
|
+
|
|
35239
|
+
This applies to the ESM build, which bundlers pick up through the package's \`module\` field. The CommonJS build is a single file and cannot be split, so a CommonJS \`require\` still pulls in the whole library.
|
|
35240
|
+
|
|
35241
|
+
Styles aren't split: \`@baseline-ui/core/dist/index.css\` carries every component's CSS regardless of what you import.
|
|
35242
|
+
|
|
34520
35243
|
## Charts
|
|
34521
35244
|
|
|
34522
35245
|
Chart components live in a separate package so projects that don\u2019t need data visualizations don\u2019t pay the bundle cost. Install it alongside the core packages:
|
|
@@ -34866,14 +35589,19 @@ locale is \`ja-JP\`, say \u2014 every string falls back to English and that is r
|
|
|
34866
35589
|
the locale rather than once per ID. It means the catalog keys and the locale disagree,
|
|
34867
35590
|
which no per-ID warning can tell you. It stays quiet when the active locale is itself
|
|
34868
35591
|
English, since falling back to English is then the intended result. Supplying no catalogs
|
|
34869
|
-
at all is the supported English-only mode and
|
|
35592
|
+
at all is the supported English-only mode and reports nothing about coverage \u2014 a string
|
|
35593
|
+
that will not format is still reported, since that is a broken template rather than a
|
|
35594
|
+
missing translation.
|
|
34870
35595
|
|
|
34871
|
-
Only \`bui.*\` IDs are reported. An app that routes its own strings through
|
|
34872
|
-
[\`useI18n\`](#your-own-strings) is missing no translation Baseline UI can tell it how to
|
|
35596
|
+
Only missing \`bui.*\` IDs are reported. An app that routes its own strings through
|
|
35597
|
+
[\`useI18n\`](#your-own-strings) is missing no translation Baseline UI can tell it how to
|
|
35598
|
+
add. A string that will not format is reported whatever its ID, since whoever wrote the
|
|
35599
|
+
template can act on it.
|
|
34873
35600
|
|
|
34874
35601
|
### Controlling the warnings
|
|
34875
35602
|
|
|
34876
|
-
The warnings above \u2014 the missing-ID, no-matching-catalog,
|
|
35603
|
+
The warnings above \u2014 the missing-ID, malformed-template, no-matching-catalog,
|
|
35604
|
+
duplicate-locale-key and
|
|
34877
35605
|
[bare-ID deprecation](#migrating-from-bare-ids) ones \u2014 are development guidance, so they
|
|
34878
35606
|
are off when \`process.env.NODE_ENV === "production"\`. That keeps a consumer who never
|
|
34879
35607
|
touched \`messages\` from logging Baseline UI's internal IDs to their end users. Set
|
|
@@ -34895,8 +35623,53 @@ touched \`messages\` from logging Baseline UI's internal IDs to their end users.
|
|
|
34895
35623
|
</I18nProvider>;
|
|
34896
35624
|
\`\`\`
|
|
34897
35625
|
|
|
34898
|
-
|
|
34899
|
-
languages re-reports what the new locale is missing.
|
|
35626
|
+
After mount, each distinct warning is logged once and the set resets when the locale
|
|
35627
|
+
changes, so switching languages re-reports what the new locale is missing.
|
|
35628
|
+
|
|
35629
|
+
### Collecting the failures yourself
|
|
35630
|
+
|
|
35631
|
+
A console warning is hard to act on: you cannot tell the failure kinds apart, route them
|
|
35632
|
+
into your own diagnostics, or keep them out of the console of a product that embeds
|
|
35633
|
+
Baseline UI. Pass \`onMessageIssue\` to receive each one as an object instead:
|
|
35634
|
+
|
|
35635
|
+
\`\`\`tsx
|
|
35636
|
+
<I18nProvider
|
|
35637
|
+
locale="de-DE"
|
|
35638
|
+
messages={messages}
|
|
35639
|
+
onMessageIssue={(issue) => {
|
|
35640
|
+
// A translation you know is still being written \u2014 ignore it.
|
|
35641
|
+
if (issue.code === "missing-message") return;
|
|
35642
|
+
|
|
35643
|
+
telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
|
|
35644
|
+
}}
|
|
35645
|
+
>
|
|
35646
|
+
<YourApp />
|
|
35647
|
+
</I18nProvider>
|
|
35648
|
+
\`\`\`
|
|
35649
|
+
|
|
35650
|
+
Every issue carries a \`code\`, the \`locale\` it concerns, the \`message\` Baseline UI would
|
|
35651
|
+
otherwise have logged \u2014 whose wording is not part of the contract \u2014 and, for the codes
|
|
35652
|
+
that are about a single string, the \`id\`:
|
|
35653
|
+
|
|
35654
|
+
| \`code\` | What happened |
|
|
35655
|
+
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
|
35656
|
+
| \`missing-message\` | No supplied catalog answers for \`id\`; its \`defaultMessage\` renders instead. \`bui.*\` IDs only. |
|
|
35657
|
+
| \`malformed-message\` | A catalog entry or \`defaultMessage\` would not parse or format as ICU. \`source\` says which, \`error\` is the throw. Any \`id\`. |
|
|
35658
|
+
| \`deprecated-message-id\` | \`id\` resolved only through the [bare-ID fallback](#migrating-from-bare-ids). |
|
|
35659
|
+
| \`no-catalog-for-locale\` | Catalogs were supplied, but none covers the active locale. Not reported for English locales. |
|
|
35660
|
+
| \`locale-alias-collision\` | One locale supplied under two ID formats; the hyphenated entry wins. |
|
|
35661
|
+
|
|
35662
|
+
Supplying a handler takes ownership of these failures: Baseline UI reports to it instead
|
|
35663
|
+
of writing to the console, so \`shouldLogMissingMessages\` no longer applies. Unlike the
|
|
35664
|
+
warnings, the handler is also called in production builds \u2014 that is the point of routing
|
|
35665
|
+
them into your own diagnostics. Deduplication is unchanged, so you get one call per
|
|
35666
|
+
distinct failure per locale rather than one per render.
|
|
35667
|
+
|
|
35668
|
+
The handler is called during render \u2014 except \`locale-alias-collision\`, which is reported
|
|
35669
|
+
from an effect \u2014 so it must not set state synchronously. Collect into a ref, or defer
|
|
35670
|
+
with \`queueMicrotask\`, if a failure needs to reach the UI. Further
|
|
35671
|
+
\`code\` values may be added in a minor release: branch on the ones you care about and let
|
|
35672
|
+
the rest fall through to a default.
|
|
34900
35673
|
|
|
34901
35674
|
### Your own strings
|
|
34902
35675
|
|
|
@@ -34929,6 +35702,83 @@ The catalogs you pass to \`useI18n\` are merged per locale with the ones on \`I1
|
|
|
34929
35702
|
and the provider wins on a shared key \u2014 so an application can hold its own strings locally
|
|
34930
35703
|
while a host app still overrides any \`bui.*\` string from above.
|
|
34931
35704
|
|
|
35705
|
+
### Outside a render
|
|
35706
|
+
|
|
35707
|
+
Some strings are not composed while a component renders: an alert raised from an async
|
|
35708
|
+
task, a label built in a plain utility module, a value handed to a non-React API.
|
|
35709
|
+
\`createMessageFormatter\` gives you the same formatter without a component around it:
|
|
35710
|
+
|
|
35711
|
+
\`\`\`ts
|
|
35712
|
+
import { createMessageFormatter } from "@baseline-ui/core";
|
|
35713
|
+
import de from "@baseline-ui/core/intl/de.json";
|
|
35714
|
+
|
|
35715
|
+
const formatMessage = createMessageFormatter({
|
|
35716
|
+
locale: "de-DE",
|
|
35717
|
+
messages: { de },
|
|
35718
|
+
});
|
|
35719
|
+
|
|
35720
|
+
formatMessage("bui.editor.bold");
|
|
35721
|
+
formatMessage("bui.stepper.step", { index: 2 });
|
|
35722
|
+
\`\`\`
|
|
35723
|
+
|
|
35724
|
+
It runs on the same engine as \`useI18n\`, so for a given locale, catalog and set of values
|
|
35725
|
+
it returns exactly the string a component would render \u2014 the same catalog resolution, the
|
|
35726
|
+
same \`defaultMessage\` fallback, the same warnings.
|
|
35727
|
+
|
|
35728
|
+
What differs is where its inputs come from. There is no surrounding \`I18nProvider\`, so
|
|
35729
|
+
\`locale\` is required rather than inherited, and \`messages\` are the only catalogs consulted
|
|
35730
|
+
\u2014 nothing is merged in from a provider. \`shouldLogMissingMessages\` defaults the same way
|
|
35731
|
+
it does on \`I18nProvider\`: off in production builds, on everywhere else, and
|
|
35732
|
+
\`onMessageIssue\` takes the same ownership of failures when you pass one:
|
|
35733
|
+
|
|
35734
|
+
\`\`\`ts
|
|
35735
|
+
const formatMessage = createMessageFormatter({
|
|
35736
|
+
locale: "de-DE",
|
|
35737
|
+
messages: { de },
|
|
35738
|
+
onMessageIssue: (issue) => telemetry.report(issue.code, { id: issue.id }),
|
|
35739
|
+
});
|
|
35740
|
+
\`\`\`
|
|
35741
|
+
|
|
35742
|
+
Issues are deduplicated per formatter rather than per provider, since a formatter is bound
|
|
35743
|
+
to one locale and never resets. One is raised eagerly rather than on first use: supplying the same locale in two key formats
|
|
35744
|
+
(\`fr_CA\` and \`fr-CA\`) is reported when the formatter is built, so it also surfaces during
|
|
35745
|
+
server-side rendering.
|
|
35746
|
+
|
|
35747
|
+
An invalid \`locale\` throws \u2014 unlike the keys of \`messages\`, it must be a BCP 47 tag
|
|
35748
|
+
(\`fr-CA\`, not \`fr_CA\`).
|
|
35749
|
+
|
|
35750
|
+
Build the formatter once per locale and reuse it rather than calling this per message: it
|
|
35751
|
+
keeps each template it has compiled, and its own record of which warnings it has logged.
|
|
35752
|
+
|
|
35753
|
+
Inside a component, keep using \`useI18n\`: it follows the locale and catalogs of the
|
|
35754
|
+
provider above it, and re-formats when either changes.
|
|
35755
|
+
|
|
35756
|
+
### From a class component
|
|
35757
|
+
|
|
35758
|
+
\`useI18n\` is a hook, so a class component cannot call it. Render
|
|
35759
|
+
[\`MessageFormat\`](/?path=/docs/core-utilities-messageformat--docs) instead \u2014 it resolves
|
|
35760
|
+
the same IDs, against the same catalogs, under the same \`I18nProvider\`, so a class
|
|
35761
|
+
component localizes without being rewritten as a function component first:
|
|
35762
|
+
|
|
35763
|
+
\`\`\`jsx
|
|
35764
|
+
import { MessageFormat } from "@baseline-ui/core";
|
|
35765
|
+
|
|
35766
|
+
class Header extends React.Component {
|
|
35767
|
+
render() {
|
|
35768
|
+
return (
|
|
35769
|
+
<MessageFormat
|
|
35770
|
+
id="myApp.greeting"
|
|
35771
|
+
values={{ name: this.props.name }}
|
|
35772
|
+
elementType="h1"
|
|
35773
|
+
/>
|
|
35774
|
+
);
|
|
35775
|
+
}
|
|
35776
|
+
}
|
|
35777
|
+
\`\`\`
|
|
35778
|
+
|
|
35779
|
+
\`values\` fills the message's ICU placeholders, and \`elementType\` chooses what the string
|
|
35780
|
+
renders into (a fragment by default).
|
|
35781
|
+
|
|
34932
35782
|
### Supported locales
|
|
34933
35783
|
|
|
34934
35784
|
A catalog ships for each of these locales, with an entry for every message ID:
|
|
@@ -34945,9 +35795,10 @@ import { messageIds } from "@baseline-ui/core";
|
|
|
34945
35795
|
const uncovered = messageIds.filter((id) => !(id in ourCatalog.en));
|
|
34946
35796
|
\`\`\`
|
|
34947
35797
|
|
|
34948
|
-
Below is every ID with the English string it renders
|
|
34949
|
-
|
|
34950
|
-
|
|
35798
|
+
Below is every ID with the English string it renders, and the prop that overrides it on a
|
|
35799
|
+
single component instance (see [Overriding one instance](#overriding-one-instance)). For
|
|
35800
|
+
the translator context that goes with each one, read \`@baseline-ui/core/messages.json\` \u2014
|
|
35801
|
+
the extracted source messages keyed by ID.
|
|
34951
35802
|
|
|
34952
35803
|
### Translating them yourself
|
|
34953
35804
|
|
|
@@ -34987,6 +35838,49 @@ import de from "@baseline-ui/core/intl/de.json";
|
|
|
34987
35838
|
</I18nProvider>;
|
|
34988
35839
|
\`\`\`
|
|
34989
35840
|
|
|
35841
|
+
### Overriding one instance
|
|
35842
|
+
|
|
35843
|
+
\`I18nProvider.messages\` changes a string everywhere it renders. To change it for one
|
|
35844
|
+
component instance \u2014 two galleries on the same page whose delete buttons should read
|
|
35845
|
+
differently \u2014 pass the override prop from the [Message IDs](#translations-list) table
|
|
35846
|
+
instead:
|
|
35847
|
+
|
|
35848
|
+
\`\`\`jsx
|
|
35849
|
+
<ImageGallery deleteLabel="Remove page" />
|
|
35850
|
+
<ImageGallery deleteLabel="Remove signature" />
|
|
35851
|
+
\`\`\`
|
|
35852
|
+
|
|
35853
|
+
A prop wins over an \`I18nProvider\` catalog entry for the same ID, which in turn wins over
|
|
35854
|
+
the built-in English default. For most props an empty string is a real override:
|
|
35855
|
+
\`closeLabel=""\` renders an empty label rather than falling back to \`"Close"\`.
|
|
35856
|
+
|
|
35857
|
+
The props that pre-date this feature keep their existing behaviour and treat \`""\` as
|
|
35858
|
+
unset: \`aria-label\` on \`Pagination\` and \`Stepper\`, \`Pagination\`'s \`incrementAriaLabel\` and
|
|
35859
|
+
\`decrementAriaLabel\`, \`ButtonSelect\`'s \`moreAriaLabel\`, \`ColorInput\`'s
|
|
35860
|
+
\`addColorButtonLabel\`, \`removeColorButtonLabel\` and \`customColorsLabel\`, \`Editor\`'s
|
|
35861
|
+
\`submitButtonAriaLabel\` and \`cancelButtonAriaLabel\`, \`FreehandCanvas\`'s \`undoLabel\` and
|
|
35862
|
+
\`redoLabel\`, and \`ImageDropZone\`'s \`pickerButtonLabel\`.
|
|
35863
|
+
|
|
35864
|
+
Five IDs interpolate a value \u2014 \`bui.fileList.loading\`, \`bui.fileList.removeHint\`,
|
|
35865
|
+
\`bui.pagination.pageXofY\`, \`bui.select.more\`, and \`bui.stepper.step\`. Their props accept
|
|
35866
|
+
either form:
|
|
35867
|
+
|
|
35868
|
+
\`\`\`jsx
|
|
35869
|
+
{
|
|
35870
|
+
/* A string renders verbatim \u2014 placeholders are not substituted. */
|
|
35871
|
+
}
|
|
35872
|
+
<Stepper stepLabel="Current stage" />;
|
|
35873
|
+
|
|
35874
|
+
{
|
|
35875
|
+
/* A function receives the values and returns the finished string. */
|
|
35876
|
+
}
|
|
35877
|
+
<Stepper stepLabel={({ index }) => \`Phase \${index}\`} />;
|
|
35878
|
+
\`\`\`
|
|
35879
|
+
|
|
35880
|
+
The props only cover Baseline UI's own \`bui.*\` strings. Strings that come from the
|
|
35881
|
+
underlying accessibility layer \u2014 drag-and-drop announcements, calendar cell descriptions \u2014
|
|
35882
|
+
are not overridable this way.
|
|
35883
|
+
|
|
34990
35884
|
Each component's documentation lists its overridable keys and shows an example. See:
|
|
34991
35885
|
|
|
34992
35886
|
* [Pagination](?path=/docs/core-forms-pagination--docs#translations)
|
|
@@ -35939,7 +36833,7 @@ padding={[null, "lg", "xl"]}
|
|
|
35939
36833
|
|
|
35940
36834
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
35941
36835
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
35942
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.1.0"};var u=`
|
|
36836
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.4.0"};var u=`
|
|
35943
36837
|
# Baseline UI MCP Server Guidelines
|
|
35944
36838
|
|
|
35945
36839
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|