@baseline-ui/mcp 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/{chunk-GTOFKGAS.js → chunk-ZSPBMEL5.js} +699 -17
- package/dist/index.js +1 -1
- package/dist/server.cjs +699 -17
- 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"
|
|
@@ -8244,6 +8619,27 @@ onRemove?: (id: string) => void
|
|
|
8244
8619
|
* button or keyboard.
|
|
8245
8620
|
*/
|
|
8246
8621
|
disabledKeys?: Iterable<string> | "all"
|
|
8622
|
+
/**
|
|
8623
|
+
* Overrides the accessible name of a file row while it is loading, and of
|
|
8624
|
+
* its spinner.
|
|
8625
|
+
*
|
|
8626
|
+
* Message id: \`bui.fileList.loading\`. Defaults to \`"Loading {fileName}"\`.
|
|
8627
|
+
* A string is used as-is, with no placeholder substitution. To include
|
|
8628
|
+
* \`fileName\`, pass a function \u2014 it receives \`{ fileName }\` and its return
|
|
8629
|
+
* value is used verbatim.
|
|
8630
|
+
*/
|
|
8631
|
+
loadingLabel?: string | ((values: { fileName: string }) => string)
|
|
8632
|
+
/**
|
|
8633
|
+
* Overrides the accessible name of a removable file row, telling keyboard
|
|
8634
|
+
* users how to delete it.
|
|
8635
|
+
*
|
|
8636
|
+
* Message id: \`bui.fileList.removeHint\`. Defaults to
|
|
8637
|
+
* \`"{fileName}, press Delete or Backspace to remove"\`. A string is used
|
|
8638
|
+
* as-is, with no placeholder substitution. To include \`fileName\`, pass a
|
|
8639
|
+
* function \u2014 it receives \`{ fileName }\` and its return value is used
|
|
8640
|
+
* verbatim.
|
|
8641
|
+
*/
|
|
8642
|
+
removeHintLabel?: string | ((values: { fileName: string }) => string)
|
|
8247
8643
|
}`,stories:{usage:[{id:"core-collections-filelist--basic",name:"Basic",snippet:`const Basic = () => {
|
|
8248
8644
|
const [items, setItems] = React.useState(args.items);
|
|
8249
8645
|
React.useEffect(() => {
|
|
@@ -8372,7 +8768,7 @@ disabledKeys?: Iterable<string> | "all"
|
|
|
8372
8768
|
import { ActionButton } from "../../ActionButton";
|
|
8373
8769
|
import { FileList } from "../FileList";
|
|
8374
8770
|
|
|
8375
|
-
import type { FileListItem } from "../FileList.types";
|
|
8771
|
+
import type { FileListItem, FileListProps } from "../FileList.types";
|
|
8376
8772
|
|
|
8377
8773
|
export const defaultItems: FileListItem[] = [
|
|
8378
8774
|
{ id: "1", name: "report.pdf" },
|
|
@@ -8453,11 +8849,16 @@ export const UploadingFileList: React.FC = () => {
|
|
|
8453
8849
|
interface BasicProps {
|
|
8454
8850
|
onRemove?: (id: string) => void;
|
|
8455
8851
|
disabledKeys?: Iterable<string> | "all";
|
|
8852
|
+
removeHintLabel?: FileListProps["removeHintLabel"];
|
|
8853
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
8854
|
+
useFunctionLabel?: boolean;
|
|
8456
8855
|
}
|
|
8457
8856
|
|
|
8458
8857
|
export const BasicFileList: React.FC<BasicProps> = ({
|
|
8459
8858
|
onRemove,
|
|
8460
8859
|
disabledKeys,
|
|
8860
|
+
removeHintLabel,
|
|
8861
|
+
useFunctionLabel,
|
|
8461
8862
|
}) => {
|
|
8462
8863
|
const [items, setItems] = React.useState<FileListItem[]>(defaultItems);
|
|
8463
8864
|
return (
|
|
@@ -8465,6 +8866,11 @@ export const BasicFileList: React.FC<BasicProps> = ({
|
|
|
8465
8866
|
aria-label="Uploaded files"
|
|
8466
8867
|
items={items}
|
|
8467
8868
|
disabledKeys={disabledKeys}
|
|
8869
|
+
removeHintLabel={
|
|
8870
|
+
useFunctionLabel
|
|
8871
|
+
? ({ fileName }) => \`Remove \${fileName}?\`
|
|
8872
|
+
: removeHintLabel
|
|
8873
|
+
}
|
|
8468
8874
|
onRemove={(id) => {
|
|
8469
8875
|
onRemove?.(id);
|
|
8470
8876
|
setItems((current) => current.filter((item) => item.id !== id));
|
|
@@ -8477,8 +8883,25 @@ export const EmptyFileList: React.FC = () => (
|
|
|
8477
8883
|
<FileList aria-label="Empty" items={[]} />
|
|
8478
8884
|
);
|
|
8479
8885
|
|
|
8480
|
-
|
|
8481
|
-
|
|
8886
|
+
interface LoadingProps {
|
|
8887
|
+
loadingLabel?: FileListProps["loadingLabel"];
|
|
8888
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
8889
|
+
useFunctionLabel?: boolean;
|
|
8890
|
+
}
|
|
8891
|
+
|
|
8892
|
+
export const LoadingFileList: React.FC<LoadingProps> = ({
|
|
8893
|
+
loadingLabel,
|
|
8894
|
+
useFunctionLabel,
|
|
8895
|
+
}) => (
|
|
8896
|
+
<FileList
|
|
8897
|
+
aria-label="Uploaded files"
|
|
8898
|
+
items={loadingItems}
|
|
8899
|
+
loadingLabel={
|
|
8900
|
+
useFunctionLabel
|
|
8901
|
+
? ({ fileName }) => \`Working on \${fileName}\`
|
|
8902
|
+
: loadingLabel
|
|
8903
|
+
}
|
|
8904
|
+
/>
|
|
8482
8905
|
);
|
|
8483
8906
|
|
|
8484
8907
|
export const ErrorFileList: React.FC = () => (
|
|
@@ -10257,6 +10680,8 @@ shouldLogMissingMessages?: boolean
|
|
|
10257
10680
|
import React from "react";
|
|
10258
10681
|
|
|
10259
10682
|
import { useI18n } from "../../../hooks";
|
|
10683
|
+
import { Pagination } from "../../Pagination";
|
|
10684
|
+
import { I18nProvider } from "../I18nProvider";
|
|
10260
10685
|
|
|
10261
10686
|
export const messages = {
|
|
10262
10687
|
en: { greeting: "Hello, {name} !" },
|
|
@@ -10308,7 +10733,23 @@ export const LocaleStringExample: React.FC<{
|
|
|
10308
10733
|
{formatter.formatMessage("greeting", { name })}
|
|
10309
10734
|
</div>
|
|
10310
10735
|
);
|
|
10311
|
-
}
|
|
10736
|
+
};
|
|
10737
|
+
|
|
10738
|
+
const paginationCatalog = {
|
|
10739
|
+
en: { "bui.pagination.pageXofY": "Catalog position" },
|
|
10740
|
+
};
|
|
10741
|
+
|
|
10742
|
+
/** The same ID resolved twice: from the catalog, and from an override prop. */
|
|
10743
|
+
export const OverridePrecedenceExample: React.FC = () => (
|
|
10744
|
+
<I18nProvider locale="en" messages={paginationCatalog}>
|
|
10745
|
+
<Pagination aria-label="from catalog" maxValue={10} />
|
|
10746
|
+
<Pagination
|
|
10747
|
+
aria-label="from prop"
|
|
10748
|
+
maxValue={10}
|
|
10749
|
+
pageXofYLabel="Prop position"
|
|
10750
|
+
/>
|
|
10751
|
+
</I18nProvider>
|
|
10752
|
+
);`},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
10753
|
|
|
10313
10754
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
10314
10755
|
* Labeling support for screen readers (aria-describedby)
|
|
@@ -10843,6 +11284,28 @@ layoutTransition?: Transition | boolean
|
|
|
10843
11284
|
* @default "Are you sure you want to delete this item?"
|
|
10844
11285
|
*/
|
|
10845
11286
|
deleteConfirmationTitle?: string | ((selectedKeys: Selection) => string)
|
|
11287
|
+
/**
|
|
11288
|
+
* Overrides the label of the button that permanently deletes the selected
|
|
11289
|
+
* image(s), and the accessible label of each image's individual delete
|
|
11290
|
+
* button.
|
|
11291
|
+
*
|
|
11292
|
+
* Message id: \`bui.imageGallery.delete\`. Defaults to \`"Delete"\`.
|
|
11293
|
+
*/
|
|
11294
|
+
deleteLabel?: string
|
|
11295
|
+
/**
|
|
11296
|
+
* Overrides the label of the button that dismisses the delete confirmation
|
|
11297
|
+
* modal without deleting anything.
|
|
11298
|
+
*
|
|
11299
|
+
* Message id: \`bui.imageGallery.cancel\`. Defaults to \`"Cancel"\`.
|
|
11300
|
+
*/
|
|
11301
|
+
cancelLabel?: string
|
|
11302
|
+
/**
|
|
11303
|
+
* Overrides the accessible label announced while an image is still
|
|
11304
|
+
* loading.
|
|
11305
|
+
*
|
|
11306
|
+
* Message id: \`bui.imageGallery.loading\`. Defaults to \`"Loading"\`.
|
|
11307
|
+
*/
|
|
11308
|
+
loadingLabel?: string
|
|
10846
11309
|
}`,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
11310
|
fit="cover"
|
|
10848
11311
|
aria-label="Image gallery"
|
|
@@ -11526,6 +11989,12 @@ onAction?: () => void
|
|
|
11526
11989
|
* close button will be rendered.
|
|
11527
11990
|
*/
|
|
11528
11991
|
onClose?: () => void
|
|
11992
|
+
/**
|
|
11993
|
+
* Overrides the accessible label of the close button.
|
|
11994
|
+
*
|
|
11995
|
+
* Message id: \`bui.inlineAlert.close\`. Defaults to \`"Close"\`.
|
|
11996
|
+
*/
|
|
11997
|
+
closeLabel?: string
|
|
11529
11998
|
/**
|
|
11530
11999
|
* The arrangement of the variable.
|
|
11531
12000
|
*
|
|
@@ -14948,6 +15417,18 @@ size?: "xs" | "sm" | "md" | "lg"
|
|
|
14948
15417
|
* Whether to hide the increment and decrement actions.
|
|
14949
15418
|
*/
|
|
14950
15419
|
hideActions?: boolean
|
|
15420
|
+
/**
|
|
15421
|
+
* Overrides the accessible name announcing the current position in the
|
|
15422
|
+
* document.
|
|
15423
|
+
*
|
|
15424
|
+
* Message id: \`bui.pagination.pageXofY\`. Defaults to
|
|
15425
|
+
* \`"Page {arg0} of {arg1}"\`, where \`arg0\` is the current page and \`arg1\`
|
|
15426
|
+
* the total page count. A string is used as-is, with no placeholder
|
|
15427
|
+
* substitution. To include the numbers, pass a function \u2014 it receives
|
|
15428
|
+
* \`{ page, totalPages }\` and its return value is used verbatim.
|
|
15429
|
+
*/
|
|
15430
|
+
pageXofYLabel?: | string
|
|
15431
|
+
| ((values: { page: number; totalPages: number }) => string)
|
|
14951
15432
|
minValue?: any
|
|
14952
15433
|
defaultValue?: any
|
|
14953
15434
|
}`,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 +15492,29 @@ defaultValue?: any
|
|
|
15011
15492
|
},
|
|
15012
15493
|
}}>
|
|
15013
15494
|
<Pagination maxValue={10} aria-label="Pagination" />
|
|
15014
|
-
</I18nProvider>;`}],implementation
|
|
15495
|
+
</I18nProvider>;`}],implementation:`import React from "react";
|
|
15496
|
+
|
|
15497
|
+
import { Pagination } from "../Pagination";
|
|
15498
|
+
|
|
15499
|
+
/**
|
|
15500
|
+
* Pagination whose \`pageXofYLabel\` is the callback form. Playwright cannot
|
|
15501
|
+
* serialize a function prop, so it is built here rather than in the spec.
|
|
15502
|
+
*
|
|
15503
|
+
* The label does arithmetic on \`page\` so the assertion fails if the callback
|
|
15504
|
+
* is ever handed the formatted string instead of the number.
|
|
15505
|
+
*/
|
|
15506
|
+
export function FunctionPageLabelPagination() {
|
|
15507
|
+
return (
|
|
15508
|
+
<Pagination
|
|
15509
|
+
aria-label="test"
|
|
15510
|
+
maxValue={100}
|
|
15511
|
+
defaultValue={5}
|
|
15512
|
+
pageXofYLabel={({ page, totalPages }) =>
|
|
15513
|
+
\`Currently \${page}/\${totalPages}, next is \${page + 1}\`
|
|
15514
|
+
}
|
|
15515
|
+
/>
|
|
15516
|
+
);
|
|
15517
|
+
}`},similarTo:[],figmaUrl:null},Panel:{id:"core-utilities-panel",breadcrumb:"Core/Utilities/Panel",importStatement:`import {
|
|
15015
15518
|
PanelCollapsibleStoryExample,
|
|
15016
15519
|
PanelConditionalExample,
|
|
15017
15520
|
PanelControlledExample,
|
|
@@ -19551,6 +20054,36 @@ hideSelectAll?: boolean
|
|
|
19551
20054
|
* @default false
|
|
19552
20055
|
*/
|
|
19553
20056
|
hideClear?: boolean
|
|
20057
|
+
/**
|
|
20058
|
+
* Overrides the label of the button that unticks every selected option.
|
|
20059
|
+
*
|
|
20060
|
+
* Message id: \`bui.select.clear\`. Defaults to \`"Clear"\`.
|
|
20061
|
+
*/
|
|
20062
|
+
clearLabel?: string
|
|
20063
|
+
/**
|
|
20064
|
+
* Overrides the placeholder and accessible name of the input that filters
|
|
20065
|
+
* the option list.
|
|
20066
|
+
*
|
|
20067
|
+
* Message id: \`bui.select.search\`. Defaults to \`"Search"\`.
|
|
20068
|
+
*/
|
|
20069
|
+
searchLabel?: string
|
|
20070
|
+
/**
|
|
20071
|
+
* Overrides the label of the button that ticks every option in a
|
|
20072
|
+
* multi-select list.
|
|
20073
|
+
*
|
|
20074
|
+
* Message id: \`bui.select.selectAll\`. Defaults to \`"Select All"\`.
|
|
20075
|
+
*/
|
|
20076
|
+
selectAllLabel?: string
|
|
20077
|
+
/**
|
|
20078
|
+
* Overrides the tag shown on the select trigger standing in for the
|
|
20079
|
+
* selected options that did not fit.
|
|
20080
|
+
*
|
|
20081
|
+
* Message id: \`bui.select.more\`. Defaults to \`"+{count} more"\`, where
|
|
20082
|
+
* \`count\` is the number of hidden options. A string is used as-is, with
|
|
20083
|
+
* no placeholder substitution. To include \`count\`, pass a function \u2014 it
|
|
20084
|
+
* receives \`{ count }\` and its return value is used verbatim.
|
|
20085
|
+
*/
|
|
20086
|
+
moreLabel?: string | ((values: { count: number }) => string)
|
|
19554
20087
|
}`,stories:{usage:[{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
|
|
19555
20088
|
32 | type Story = StoryObj<typeof meta>;
|
|
19556
20089
|
33 |
|
|
@@ -19772,13 +20305,19 @@ import type { IconSelectProps } from "../Select.types";
|
|
|
19772
20305
|
import type { Key } from "@react-types/shared";
|
|
19773
20306
|
|
|
19774
20307
|
export const SelectExample: React.FC<
|
|
19775
|
-
Omit<React.ComponentProps<typeof Select>, "items">
|
|
19776
|
-
|
|
20308
|
+
Omit<React.ComponentProps<typeof Select>, "items"> & {
|
|
20309
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
20310
|
+
useFunctionLabel?: boolean;
|
|
20311
|
+
}
|
|
20312
|
+
> = ({ useFunctionLabel, ...args }) => {
|
|
19777
20313
|
return (
|
|
19778
20314
|
<Select
|
|
19779
20315
|
placeholder="Choose an item"
|
|
19780
20316
|
optionClassName={(item) => item.label}
|
|
19781
20317
|
{...args}
|
|
20318
|
+
moreLabel={
|
|
20319
|
+
useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
|
|
20320
|
+
}
|
|
19782
20321
|
items={items}
|
|
19783
20322
|
/>
|
|
19784
20323
|
);
|
|
@@ -20906,6 +21445,23 @@ isDisabled?: boolean
|
|
|
20906
21445
|
* (e.g. "Checkout").
|
|
20907
21446
|
*/
|
|
20908
21447
|
aria-label?: string
|
|
21448
|
+
/**
|
|
21449
|
+
* Overrides the fallback accessible name of a step when the application
|
|
21450
|
+
* supplies no title.
|
|
21451
|
+
*
|
|
21452
|
+
* Message id: \`bui.stepper.step\`. Defaults to \`"Step {index}"\`, where
|
|
21453
|
+
* \`index\` is the step's 1-based position. A string is used as-is, with
|
|
21454
|
+
* no placeholder substitution. To include \`index\`, pass a function \u2014 it
|
|
21455
|
+
* receives \`{ index }\` and its return value is used verbatim.
|
|
21456
|
+
*/
|
|
21457
|
+
stepLabel?: string | ((values: { index: number }) => string)
|
|
21458
|
+
/**
|
|
21459
|
+
* Overrides the screen-reader-only suffix marking a step the reader has
|
|
21460
|
+
* finished.
|
|
21461
|
+
*
|
|
21462
|
+
* Message id: \`bui.stepper.completed\`. Defaults to \`"Completed"\`.
|
|
21463
|
+
*/
|
|
21464
|
+
completedLabel?: string
|
|
20909
21465
|
}`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
|
|
20910
21466
|
items={items}
|
|
20911
21467
|
aria-label="Checkout"
|
|
@@ -21078,6 +21634,22 @@ export const checkoutItems: StepperItem[] = [
|
|
|
21078
21634
|
|
|
21079
21635
|
const defaultItems = checkoutItems;
|
|
21080
21636
|
|
|
21637
|
+
/**
|
|
21638
|
+
* Condensed Stepper whose \`stepLabel\` is the callback form. Playwright cannot
|
|
21639
|
+
* serialize a function prop, so it is built here rather than in the spec.
|
|
21640
|
+
*/
|
|
21641
|
+
export function FunctionStepLabelStepper() {
|
|
21642
|
+
return (
|
|
21643
|
+
<Stepper
|
|
21644
|
+
items={defaultItems.map(({ key }) => ({ key }))}
|
|
21645
|
+
variant="condensed"
|
|
21646
|
+
defaultSelectedStep="cart"
|
|
21647
|
+
aria-label="Checkout"
|
|
21648
|
+
stepLabel={({ index }) => \`Phase \${index}\`}
|
|
21649
|
+
/>
|
|
21650
|
+
);
|
|
21651
|
+
}
|
|
21652
|
+
|
|
21081
21653
|
export interface ControlledStepperProps {
|
|
21082
21654
|
items?: StepperItem[];
|
|
21083
21655
|
initialSelected?: Key;
|
|
@@ -23041,6 +23613,7 @@ interface AsyncLoadingTableExampleProps {
|
|
|
23041
23613
|
totalCount?: number;
|
|
23042
23614
|
loadingDelay?: number;
|
|
23043
23615
|
scrollOffset?: number;
|
|
23616
|
+
loadingLabel?: string;
|
|
23044
23617
|
}
|
|
23045
23618
|
|
|
23046
23619
|
/** Virtualized table that loads more rows automatically near the end. */
|
|
@@ -23054,6 +23627,7 @@ export const AsyncLoadingTableExample: React.FC<
|
|
|
23054
23627
|
totalCount = 60,
|
|
23055
23628
|
loadingDelay = 50,
|
|
23056
23629
|
scrollOffset = 1,
|
|
23630
|
+
loadingLabel,
|
|
23057
23631
|
}) => {
|
|
23058
23632
|
const dataset = generateLargeDataset(totalCount);
|
|
23059
23633
|
const [visibleCount, setVisibleCount] = useState(initialCount);
|
|
@@ -23119,6 +23693,7 @@ export const AsyncLoadingTableExample: React.FC<
|
|
|
23119
23693
|
}
|
|
23120
23694
|
isLoading={isLoading}
|
|
23121
23695
|
scrollOffset={scrollOffset}
|
|
23696
|
+
loadingLabel={loadingLabel}
|
|
23122
23697
|
>
|
|
23123
23698
|
{(row) => {
|
|
23124
23699
|
const typedRow = row as ReturnType<typeof generateLargeDataset>[0];
|
|
@@ -26571,6 +27146,14 @@ onKeyDown?: KeyboardProps["onKeyDown"]
|
|
|
26571
27146
|
* @default true
|
|
26572
27147
|
*/
|
|
26573
27148
|
isSingleTabStop?: boolean
|
|
27149
|
+
/**
|
|
27150
|
+
* Overrides the accessible label of the overflow button that reveals the
|
|
27151
|
+
* toolbar items which did not fit in the available width. This prop is
|
|
27152
|
+
* only relevant when \`isCollapsible\` is true.
|
|
27153
|
+
*
|
|
27154
|
+
* Message id: \`bui.toolbar.more\`. Defaults to \`"More"\`.
|
|
27155
|
+
*/
|
|
27156
|
+
moreLabel?: string
|
|
26574
27157
|
}`,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
27158
|
orientation="vertical"
|
|
26576
27159
|
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 +27228,7 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26645
27228
|
onDisabledPress?: () => void;
|
|
26646
27229
|
maxWidth?: number;
|
|
26647
27230
|
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
27231
|
+
moreLabel?: string;
|
|
26648
27232
|
}> = ({
|
|
26649
27233
|
onPageAdd,
|
|
26650
27234
|
onPageRemove,
|
|
@@ -26653,6 +27237,7 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26653
27237
|
onDisabledPress,
|
|
26654
27238
|
maxWidth: _maxWidth,
|
|
26655
27239
|
onKeyDown,
|
|
27240
|
+
moreLabel,
|
|
26656
27241
|
}) => {
|
|
26657
27242
|
const [maxWidth, setMaxWidth] = useState(_maxWidth);
|
|
26658
27243
|
|
|
@@ -26682,7 +27267,11 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26682
27267
|
justifyContent: "center",
|
|
26683
27268
|
}}
|
|
26684
27269
|
onKeyDown={onKeyDown}
|
|
26685
|
-
|
|
27270
|
+
moreLabel={moreLabel}
|
|
27271
|
+
collapsibleMenuProps={
|
|
27272
|
+
moreLabel
|
|
27273
|
+
? undefined
|
|
27274
|
+
: {
|
|
26686
27275
|
renderTrigger: ({ buttonProps, ref }) => (
|
|
26687
27276
|
<ActionIconButton
|
|
26688
27277
|
{...buttonProps}
|
|
@@ -26694,7 +27283,8 @@ export const CollapsibleChildren: React.FC<{
|
|
|
26694
27283
|
tooltip={true}
|
|
26695
27284
|
/>
|
|
26696
27285
|
),
|
|
26697
|
-
}
|
|
27286
|
+
}
|
|
27287
|
+
}
|
|
26698
27288
|
>
|
|
26699
27289
|
<ActionButton
|
|
26700
27290
|
iconStart={EllipseIcon}
|
|
@@ -27418,11 +28008,32 @@ secondaryActionAriaLabel?: string | ((key: Key) => string)
|
|
|
27418
28008
|
* @default "start"
|
|
27419
28009
|
*/
|
|
27420
28010
|
actionsPosition?: "start" | "end"
|
|
28011
|
+
/**
|
|
28012
|
+
* Overrides the accessible label of the button that expands a tree item to
|
|
28013
|
+
* reveal its children.
|
|
28014
|
+
*
|
|
28015
|
+
* Message id: \`bui.treeView.expand\`. Defaults to \`"Expand"\`.
|
|
28016
|
+
*/
|
|
28017
|
+
expandLabel?: string
|
|
28018
|
+
/**
|
|
28019
|
+
* Overrides the accessible label of the button that collapses a tree item
|
|
28020
|
+
* to hide its children.
|
|
28021
|
+
*
|
|
28022
|
+
* Message id: \`bui.treeView.collapse\`. Defaults to \`"Collapse"\`.
|
|
28023
|
+
*/
|
|
28024
|
+
collapseLabel?: string
|
|
27421
28025
|
/**
|
|
27422
28026
|
* The callback function that is called when the item is renamed. The rename
|
|
27423
28027
|
* functionality is disabled if not provided.
|
|
27424
28028
|
*/
|
|
27425
28029
|
onRename?: (options: { key: Key; value: string }) => void
|
|
28030
|
+
/**
|
|
28031
|
+
* Overrides the accessible label of the input shown while an item is being
|
|
28032
|
+
* renamed.
|
|
28033
|
+
*
|
|
28034
|
+
* Message id: \`bui.treeView.rename\`. Defaults to \`"Rename"\`.
|
|
28035
|
+
*/
|
|
28036
|
+
renameLabel?: string
|
|
27426
28037
|
/**
|
|
27427
28038
|
* The callback function that is called when the item is clicked.
|
|
27428
28039
|
*/
|
|
@@ -27640,6 +28251,27 @@ export function TreeViewWithPrimaryActionAtEnd({
|
|
|
27640
28251
|
);
|
|
27641
28252
|
}
|
|
27642
28253
|
|
|
28254
|
+
export function TreeViewWithSwappableLabels(): React.JSX.Element {
|
|
28255
|
+
const [swapped, setSwapped] = useState(false);
|
|
28256
|
+
const items = useMemo(() => getTreeItems({}), []);
|
|
28257
|
+
|
|
28258
|
+
return (
|
|
28259
|
+
<Box display="flex" flexDirection="column" gap="md">
|
|
28260
|
+
<ActionButton
|
|
28261
|
+
label="Swap labels"
|
|
28262
|
+
onPress={() => {
|
|
28263
|
+
setSwapped(true);
|
|
28264
|
+
}}
|
|
28265
|
+
/>
|
|
28266
|
+
<TreeView
|
|
28267
|
+
items={items}
|
|
28268
|
+
defaultExpandedKeys={["documents"]}
|
|
28269
|
+
expandLabel={swapped ? "Aufklappen" : "Expand"}
|
|
28270
|
+
/>
|
|
28271
|
+
</Box>
|
|
28272
|
+
);
|
|
28273
|
+
}
|
|
28274
|
+
|
|
27643
28275
|
export function TreeViewWithCustomTitle(): React.JSX.Element {
|
|
27644
28276
|
return (
|
|
27645
28277
|
<TreeView
|
|
@@ -34114,13 +34746,19 @@ import type { IconSelectProps } from "../Select.types";
|
|
|
34114
34746
|
import type { Key } from "@react-types/shared";
|
|
34115
34747
|
|
|
34116
34748
|
export const SelectExample: React.FC<
|
|
34117
|
-
Omit<React.ComponentProps<typeof Select>, "items">
|
|
34118
|
-
|
|
34749
|
+
Omit<React.ComponentProps<typeof Select>, "items"> & {
|
|
34750
|
+
/** Playwright cannot serialize a function prop, so the callback form is built here. */
|
|
34751
|
+
useFunctionLabel?: boolean;
|
|
34752
|
+
}
|
|
34753
|
+
> = ({ useFunctionLabel, ...args }) => {
|
|
34119
34754
|
return (
|
|
34120
34755
|
<Select
|
|
34121
34756
|
placeholder="Choose an item"
|
|
34122
34757
|
optionClassName={(item) => item.label}
|
|
34123
34758
|
{...args}
|
|
34759
|
+
moreLabel={
|
|
34760
|
+
useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
|
|
34761
|
+
}
|
|
34124
34762
|
items={items}
|
|
34125
34763
|
/>
|
|
34126
34764
|
);
|
|
@@ -34945,9 +35583,10 @@ import { messageIds } from "@baseline-ui/core";
|
|
|
34945
35583
|
const uncovered = messageIds.filter((id) => !(id in ourCatalog.en));
|
|
34946
35584
|
\`\`\`
|
|
34947
35585
|
|
|
34948
|
-
Below is every ID with the English string it renders
|
|
34949
|
-
|
|
34950
|
-
|
|
35586
|
+
Below is every ID with the English string it renders, and the prop that overrides it on a
|
|
35587
|
+
single component instance (see [Overriding one instance](#overriding-one-instance)). For
|
|
35588
|
+
the translator context that goes with each one, read \`@baseline-ui/core/messages.json\` \u2014
|
|
35589
|
+
the extracted source messages keyed by ID.
|
|
34951
35590
|
|
|
34952
35591
|
### Translating them yourself
|
|
34953
35592
|
|
|
@@ -34987,6 +35626,49 @@ import de from "@baseline-ui/core/intl/de.json";
|
|
|
34987
35626
|
</I18nProvider>;
|
|
34988
35627
|
\`\`\`
|
|
34989
35628
|
|
|
35629
|
+
### Overriding one instance
|
|
35630
|
+
|
|
35631
|
+
\`I18nProvider.messages\` changes a string everywhere it renders. To change it for one
|
|
35632
|
+
component instance \u2014 two galleries on the same page whose delete buttons should read
|
|
35633
|
+
differently \u2014 pass the override prop from the [Message IDs](#translations-list) table
|
|
35634
|
+
instead:
|
|
35635
|
+
|
|
35636
|
+
\`\`\`jsx
|
|
35637
|
+
<ImageGallery deleteLabel="Remove page" />
|
|
35638
|
+
<ImageGallery deleteLabel="Remove signature" />
|
|
35639
|
+
\`\`\`
|
|
35640
|
+
|
|
35641
|
+
A prop wins over an \`I18nProvider\` catalog entry for the same ID, which in turn wins over
|
|
35642
|
+
the built-in English default. For most props an empty string is a real override:
|
|
35643
|
+
\`closeLabel=""\` renders an empty label rather than falling back to \`"Close"\`.
|
|
35644
|
+
|
|
35645
|
+
The props that pre-date this feature keep their existing behaviour and treat \`""\` as
|
|
35646
|
+
unset: \`aria-label\` on \`Pagination\` and \`Stepper\`, \`Pagination\`'s \`incrementAriaLabel\` and
|
|
35647
|
+
\`decrementAriaLabel\`, \`ButtonSelect\`'s \`moreAriaLabel\`, \`ColorInput\`'s
|
|
35648
|
+
\`addColorButtonLabel\`, \`removeColorButtonLabel\` and \`customColorsLabel\`, \`Editor\`'s
|
|
35649
|
+
\`submitButtonAriaLabel\` and \`cancelButtonAriaLabel\`, \`FreehandCanvas\`'s \`undoLabel\` and
|
|
35650
|
+
\`redoLabel\`, and \`ImageDropZone\`'s \`pickerButtonLabel\`.
|
|
35651
|
+
|
|
35652
|
+
Five IDs interpolate a value \u2014 \`bui.fileList.loading\`, \`bui.fileList.removeHint\`,
|
|
35653
|
+
\`bui.pagination.pageXofY\`, \`bui.select.more\`, and \`bui.stepper.step\`. Their props accept
|
|
35654
|
+
either form:
|
|
35655
|
+
|
|
35656
|
+
\`\`\`jsx
|
|
35657
|
+
{
|
|
35658
|
+
/* A string renders verbatim \u2014 placeholders are not substituted. */
|
|
35659
|
+
}
|
|
35660
|
+
<Stepper stepLabel="Current stage" />;
|
|
35661
|
+
|
|
35662
|
+
{
|
|
35663
|
+
/* A function receives the values and returns the finished string. */
|
|
35664
|
+
}
|
|
35665
|
+
<Stepper stepLabel={({ index }) => \`Phase \${index}\`} />;
|
|
35666
|
+
\`\`\`
|
|
35667
|
+
|
|
35668
|
+
The props only cover Baseline UI's own \`bui.*\` strings. Strings that come from the
|
|
35669
|
+
underlying accessibility layer \u2014 drag-and-drop announcements, calendar cell descriptions \u2014
|
|
35670
|
+
are not overridable this way.
|
|
35671
|
+
|
|
34990
35672
|
Each component's documentation lists its overridable keys and shows an example. See:
|
|
34991
35673
|
|
|
34992
35674
|
* [Pagination](?path=/docs/core-forms-pagination--docs#translations)
|
|
@@ -35939,7 +36621,7 @@ padding={[null, "lg", "xl"]}
|
|
|
35939
36621
|
|
|
35940
36622
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
35941
36623
|
* [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=`
|
|
36624
|
+
* [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.2.0"};var u=`
|
|
35943
36625
|
# Baseline UI MCP Server Guidelines
|
|
35944
36626
|
|
|
35945
36627
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|