@baseline-ui/mcp 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/index.cjs +324 -21
- package/dist/index.js +324 -21
- package/package.json +1 -1
- package/sbom.json +13 -13
package/CHANGELOG.md
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -3085,7 +3085,11 @@ headerVariant?: | "title"
|
|
|
3085
3085
|
size="sm"
|
|
3086
3086
|
aria-label="Event date"
|
|
3087
3087
|
headerVariant="selectMonthAndYear"
|
|
3088
|
-
title="Date" />;`},{id:"core-forms-calendar--select-month-and-year-extra-small",name:"Select Month And Year Extra Small",snippet:'const SelectMonthAndYearExtraSmall = () => <Calendar size="xs" aria-label="Event date" headerVariant="selectMonthAndYear" />;'},{id:"core-forms-calendar--
|
|
3088
|
+
title="Date" />;`},{id:"core-forms-calendar--select-month-and-year-extra-small",name:"Select Month And Year Extra Small",snippet:'const SelectMonthAndYearExtraSmall = () => <Calendar size="xs" aria-label="Event date" headerVariant="selectMonthAndYear" />;'},{id:"core-forms-calendar--fixed-weeks",name:"Fixed Weeks",snippet:`const FixedWeeks = () => <Calendar
|
|
3089
|
+
size="sm"
|
|
3090
|
+
aria-label="Event date"
|
|
3091
|
+
defaultValue={parseDate("2024-09-15")}
|
|
3092
|
+
weeksInMonth={6} />;`},{id:"core-forms-calendar--international-calendar",name:"International Calendar",snippet:`const InternationalCalendar = () => {
|
|
3089
3093
|
const [locale, setLocale] = React.useState("th-TH");
|
|
3090
3094
|
|
|
3091
3095
|
return (
|
|
@@ -3141,6 +3145,23 @@ export const MinMaxCalendarExample: React.FC<
|
|
|
3141
3145
|
);
|
|
3142
3146
|
};
|
|
3143
3147
|
|
|
3148
|
+
export const HeaderCalendarExample: React.FC<
|
|
3149
|
+
Omit<CalendarProps, "defaultValue" | "value" | "minValue" | "maxValue"> & {
|
|
3150
|
+
defaultValue?: string;
|
|
3151
|
+
minValue?: string;
|
|
3152
|
+
maxValue?: string;
|
|
3153
|
+
}
|
|
3154
|
+
> = ({ defaultValue, minValue, maxValue, ...rest }) => {
|
|
3155
|
+
return (
|
|
3156
|
+
<Calendar
|
|
3157
|
+
{...rest}
|
|
3158
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
3159
|
+
minValue={minValue ? parseDate(minValue) : undefined}
|
|
3160
|
+
maxValue={maxValue ? parseDate(maxValue) : undefined}
|
|
3161
|
+
/>
|
|
3162
|
+
);
|
|
3163
|
+
};
|
|
3164
|
+
|
|
3144
3165
|
export const UnavailableCalendarExample: React.FC<
|
|
3145
3166
|
Omit<CalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
3146
3167
|
defaultValue?: string;
|
|
@@ -3194,6 +3215,32 @@ export const InternationalRangeCalendarExample: React.FC<
|
|
|
3194
3215
|
);
|
|
3195
3216
|
};
|
|
3196
3217
|
|
|
3218
|
+
export const AnchorDateRangeCalendarExample: React.FC<
|
|
3219
|
+
Omit<RangeCalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
3220
|
+
defaultValue?: { start: string; end: string };
|
|
3221
|
+
}
|
|
3222
|
+
> = ({ defaultValue, ...rest }) => {
|
|
3223
|
+
return (
|
|
3224
|
+
<RangeCalendar
|
|
3225
|
+
{...rest}
|
|
3226
|
+
defaultValue={
|
|
3227
|
+
defaultValue
|
|
3228
|
+
? {
|
|
3229
|
+
start: parseDate(defaultValue.start),
|
|
3230
|
+
end: parseDate(defaultValue.end),
|
|
3231
|
+
}
|
|
3232
|
+
: undefined
|
|
3233
|
+
}
|
|
3234
|
+
// Marks dates more than a week from the in-progress selection anchor as
|
|
3235
|
+
// unavailable. \`anchorDate\` is null until a start date is picked, so this
|
|
3236
|
+
// exercises the second argument react-aria passes to \`isDateUnavailable\`.
|
|
3237
|
+
isDateUnavailable={(date, anchorDate) =>
|
|
3238
|
+
anchorDate ? Math.abs(date.compare(anchorDate)) > 7 : false
|
|
3239
|
+
}
|
|
3240
|
+
/>
|
|
3241
|
+
);
|
|
3242
|
+
};
|
|
3243
|
+
|
|
3197
3244
|
export const RangeCalendarExample: React.FC<
|
|
3198
3245
|
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
3199
3246
|
defaultValue?: { start: string; end: string };
|
|
@@ -3476,7 +3523,14 @@ headerVariant?: | "title"
|
|
|
3476
3523
|
size="sm"
|
|
3477
3524
|
aria-label="Trip dates"
|
|
3478
3525
|
minValue={today(getLocalTimeZone())}
|
|
3479
|
-
maxValue={today(getLocalTimeZone()).add({ months: 1 })} />;`},{id:"core-forms-rangecalendar--
|
|
3526
|
+
maxValue={today(getLocalTimeZone()).add({ months: 1 })} />;`},{id:"core-forms-rangecalendar--fixed-weeks",name:"Fixed Weeks",snippet:`const FixedWeeks = () => <RangeCalendar
|
|
3527
|
+
size="sm"
|
|
3528
|
+
aria-label="Trip dates"
|
|
3529
|
+
defaultValue={{
|
|
3530
|
+
start: parseDate("2024-09-02"),
|
|
3531
|
+
end: parseDate("2024-09-11"),
|
|
3532
|
+
}}
|
|
3533
|
+
weeksInMonth={6} />;`},{id:"core-forms-rangecalendar--unavailable-dates",name:"Unavailable Dates",snippet:`const UnavailableDates = () => <RangeCalendar
|
|
3480
3534
|
size="sm"
|
|
3481
3535
|
aria-label="Trip dates"
|
|
3482
3536
|
defaultValue={{
|
|
@@ -3553,6 +3607,23 @@ export const MinMaxCalendarExample: React.FC<
|
|
|
3553
3607
|
);
|
|
3554
3608
|
};
|
|
3555
3609
|
|
|
3610
|
+
export const HeaderCalendarExample: React.FC<
|
|
3611
|
+
Omit<CalendarProps, "defaultValue" | "value" | "minValue" | "maxValue"> & {
|
|
3612
|
+
defaultValue?: string;
|
|
3613
|
+
minValue?: string;
|
|
3614
|
+
maxValue?: string;
|
|
3615
|
+
}
|
|
3616
|
+
> = ({ defaultValue, minValue, maxValue, ...rest }) => {
|
|
3617
|
+
return (
|
|
3618
|
+
<Calendar
|
|
3619
|
+
{...rest}
|
|
3620
|
+
defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
|
|
3621
|
+
minValue={minValue ? parseDate(minValue) : undefined}
|
|
3622
|
+
maxValue={maxValue ? parseDate(maxValue) : undefined}
|
|
3623
|
+
/>
|
|
3624
|
+
);
|
|
3625
|
+
};
|
|
3626
|
+
|
|
3556
3627
|
export const UnavailableCalendarExample: React.FC<
|
|
3557
3628
|
Omit<CalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
3558
3629
|
defaultValue?: string;
|
|
@@ -3606,6 +3677,32 @@ export const InternationalRangeCalendarExample: React.FC<
|
|
|
3606
3677
|
);
|
|
3607
3678
|
};
|
|
3608
3679
|
|
|
3680
|
+
export const AnchorDateRangeCalendarExample: React.FC<
|
|
3681
|
+
Omit<RangeCalendarProps, "defaultValue" | "value" | "isDateUnavailable"> & {
|
|
3682
|
+
defaultValue?: { start: string; end: string };
|
|
3683
|
+
}
|
|
3684
|
+
> = ({ defaultValue, ...rest }) => {
|
|
3685
|
+
return (
|
|
3686
|
+
<RangeCalendar
|
|
3687
|
+
{...rest}
|
|
3688
|
+
defaultValue={
|
|
3689
|
+
defaultValue
|
|
3690
|
+
? {
|
|
3691
|
+
start: parseDate(defaultValue.start),
|
|
3692
|
+
end: parseDate(defaultValue.end),
|
|
3693
|
+
}
|
|
3694
|
+
: undefined
|
|
3695
|
+
}
|
|
3696
|
+
// Marks dates more than a week from the in-progress selection anchor as
|
|
3697
|
+
// unavailable. \`anchorDate\` is null until a start date is picked, so this
|
|
3698
|
+
// exercises the second argument react-aria passes to \`isDateUnavailable\`.
|
|
3699
|
+
isDateUnavailable={(date, anchorDate) =>
|
|
3700
|
+
anchorDate ? Math.abs(date.compare(anchorDate)) > 7 : false
|
|
3701
|
+
}
|
|
3702
|
+
/>
|
|
3703
|
+
);
|
|
3704
|
+
};
|
|
3705
|
+
|
|
3609
3706
|
export const RangeCalendarExample: React.FC<
|
|
3610
3707
|
Omit<RangeCalendarProps, "defaultValue" | "value"> & {
|
|
3611
3708
|
defaultValue?: { start: string; end: string };
|
|
@@ -6006,6 +6103,7 @@ By default, the \`Dialog\` component traps focus within the dialog. This means t
|
|
|
6006
6103
|
| <kbd>Tab</kbd> | Move focus to the next focusable element in the dialog. If focus is on the last element, move focus to the first focusable element. |`,props:`interface DialogProps {
|
|
6007
6104
|
/**
|
|
6008
6105
|
* The accessibility role for the dialog.
|
|
6106
|
+
*
|
|
6009
6107
|
* @default 'dialog'
|
|
6010
6108
|
*/
|
|
6011
6109
|
role?: 'dialog' | 'alertdialog'
|
|
@@ -6811,6 +6909,7 @@ className?: string
|
|
|
6811
6909
|
style?: React.CSSProperties
|
|
6812
6910
|
/**
|
|
6813
6911
|
* The accessibility role for the dialog.
|
|
6912
|
+
*
|
|
6814
6913
|
* @default 'dialog'
|
|
6815
6914
|
*/
|
|
6816
6915
|
role?: 'dialog' | 'alertdialog'
|
|
@@ -9406,6 +9505,22 @@ export const GridListExample: React.FC<GridListExampleProps> = (props) => {
|
|
|
9406
9505
|
);
|
|
9407
9506
|
};
|
|
9408
9507
|
|
|
9508
|
+
// Renders a focusable element before the grid so a spec can Tab into the grid
|
|
9509
|
+
// from a known in-frame origin (reliable across normal/shadow/iframe DOM
|
|
9510
|
+
// modes), exercising the keyboard-entry behavior of \`UNSTABLE_focusOnEntry\`.
|
|
9511
|
+
export const GridListFocusOnEntryExample: React.FC<GridListExampleProps> = (
|
|
9512
|
+
props,
|
|
9513
|
+
) => {
|
|
9514
|
+
return (
|
|
9515
|
+
<>
|
|
9516
|
+
<button type="button" data-testid="before-grid">
|
|
9517
|
+
before
|
|
9518
|
+
</button>
|
|
9519
|
+
<GridListExample {...props} />
|
|
9520
|
+
</>
|
|
9521
|
+
);
|
|
9522
|
+
};
|
|
9523
|
+
|
|
9409
9524
|
export const GridListControlledExample: React.FC<GridListExampleProps> = (
|
|
9410
9525
|
props,
|
|
9411
9526
|
) => {
|
|
@@ -11862,6 +11977,7 @@ shouldUseSymbol?: boolean
|
|
|
11862
11977
|
isDisabled?: boolean
|
|
11863
11978
|
/**
|
|
11864
11979
|
* The HTML element used to render the link, e.g. 'a', or 'span'.
|
|
11980
|
+
*
|
|
11865
11981
|
* @default 'a'
|
|
11866
11982
|
*/
|
|
11867
11983
|
elementType?: string
|
|
@@ -12828,6 +12944,7 @@ defaultOpen?: boolean
|
|
|
12828
12944
|
onOpenChange?: (isOpen: boolean) => void
|
|
12829
12945
|
/**
|
|
12830
12946
|
* How the menu is triggered.
|
|
12947
|
+
*
|
|
12831
12948
|
* @default 'press'
|
|
12832
12949
|
*/
|
|
12833
12950
|
trigger?: 'press' | 'longPress'
|
|
@@ -12935,6 +13052,7 @@ placement?: any
|
|
|
12935
13052
|
)} />;`}],implementation:`import React from "react";
|
|
12936
13053
|
|
|
12937
13054
|
import { Menu } from "../Menu";
|
|
13055
|
+
import { items } from "./data";
|
|
12938
13056
|
|
|
12939
13057
|
import type { MenuProps } from "../Menu.types";
|
|
12940
13058
|
|
|
@@ -12944,6 +13062,28 @@ export const MenuExample: React.FC<
|
|
|
12944
13062
|
}
|
|
12945
13063
|
> = ({ label, ...props }) => {
|
|
12946
13064
|
return <Menu {...props} triggerLabel={label} />;
|
|
13065
|
+
};
|
|
13066
|
+
|
|
13067
|
+
// Renders the (key, value) pair react-aria now passes to \`onAction\` so a spec
|
|
13068
|
+
// can assert the activated item's value is forwarded alongside its key.
|
|
13069
|
+
export const MenuActionValueExample: React.FC<{ label: string }> = ({
|
|
13070
|
+
label,
|
|
13071
|
+
}) => {
|
|
13072
|
+
const [received, setReceived] = React.useState("");
|
|
13073
|
+
return (
|
|
13074
|
+
<>
|
|
13075
|
+
<Menu
|
|
13076
|
+
items={items}
|
|
13077
|
+
triggerLabel={label}
|
|
13078
|
+
onAction={(key, value) => {
|
|
13079
|
+
setReceived(
|
|
13080
|
+
\`\${String(key)}:\${value && "label" in value ? value.label : ""}\`,
|
|
13081
|
+
);
|
|
13082
|
+
}}
|
|
13083
|
+
/>
|
|
13084
|
+
<div data-testid="menu-action-value">{received}</div>
|
|
13085
|
+
</>
|
|
13086
|
+
);
|
|
12947
13087
|
};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).",documentation:`\`MessageFormat\` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).
|
|
12948
13088
|
|
|
12949
13089
|
\`\`\`jsx
|
|
@@ -15746,6 +15886,31 @@ export const PopoverExample: React.FC<{
|
|
|
15746
15886
|
);
|
|
15747
15887
|
};
|
|
15748
15888
|
|
|
15889
|
+
export const PopoverGetTargetRectExample: React.FC = () => {
|
|
15890
|
+
const [called, setCalled] = useState(false);
|
|
15891
|
+
|
|
15892
|
+
return (
|
|
15893
|
+
<Popover type="dialog" defaultOpen={true}>
|
|
15894
|
+
<PopoverTrigger>
|
|
15895
|
+
<ActionButton label="Open" />
|
|
15896
|
+
</PopoverTrigger>
|
|
15897
|
+
<PopoverContent
|
|
15898
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
15899
|
+
// recording that react-aria invoked the forwarded callback.
|
|
15900
|
+
getTargetRect={(target) => {
|
|
15901
|
+
setCalled(true);
|
|
15902
|
+
return target.getBoundingClientRect();
|
|
15903
|
+
}}
|
|
15904
|
+
>
|
|
15905
|
+
<Dialog size="content" aria-label="content">
|
|
15906
|
+
<Text type="label">getTargetRect content</Text>
|
|
15907
|
+
{called ? <span data-testid="popover-target-rect-called" /> : null}
|
|
15908
|
+
</Dialog>
|
|
15909
|
+
</PopoverContent>
|
|
15910
|
+
</Popover>
|
|
15911
|
+
);
|
|
15912
|
+
};
|
|
15913
|
+
|
|
15749
15914
|
export const PopoverWithScrollableContentExample: React.FC<{
|
|
15750
15915
|
popoverProps: Omit<PopoverProps, "children">;
|
|
15751
15916
|
popoverContentProps?: Omit<PopoverContentProps, "children">;
|
|
@@ -16794,6 +16959,7 @@ export const PopoverHorizontalBoundaryBehaviorDemo: React.FC<{
|
|
|
16794
16959
|
};`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:'import { Portal } from "@baseline-ui/core";',description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into an overlay container managed by React Aria\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
|
|
16795
16960
|
/**
|
|
16796
16961
|
* The container element in which the overlay portal will be placed.
|
|
16962
|
+
*
|
|
16797
16963
|
* @default document.body
|
|
16798
16964
|
*/
|
|
16799
16965
|
portalContainer?: Element
|
|
@@ -18779,6 +18945,28 @@ export const SelectExample: React.FC<
|
|
|
18779
18945
|
);
|
|
18780
18946
|
};
|
|
18781
18947
|
|
|
18948
|
+
export const SelectGetTargetRectExample: React.FC = () => {
|
|
18949
|
+
const [called, setCalled] = React.useState(false);
|
|
18950
|
+
|
|
18951
|
+
return (
|
|
18952
|
+
<>
|
|
18953
|
+
<Select
|
|
18954
|
+
aria-label="Choose an item"
|
|
18955
|
+
placeholder="Choose an item"
|
|
18956
|
+
items={items}
|
|
18957
|
+
defaultOpen={true}
|
|
18958
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
18959
|
+
// recording that the popover invoked the forwarded callback.
|
|
18960
|
+
getTargetRect={(target) => {
|
|
18961
|
+
setCalled(true);
|
|
18962
|
+
return target.getBoundingClientRect();
|
|
18963
|
+
}}
|
|
18964
|
+
/>
|
|
18965
|
+
{called ? <span data-testid="select-target-rect-called" /> : null}
|
|
18966
|
+
</>
|
|
18967
|
+
);
|
|
18968
|
+
};
|
|
18969
|
+
|
|
18782
18970
|
export const SelectCustomTriggerExample: React.FC<
|
|
18783
18971
|
Omit<React.ComponentProps<typeof Select>, "items">
|
|
18784
18972
|
> = (args) => {
|
|
@@ -18886,6 +19074,7 @@ import { Separator } from "../../utils";
|
|
|
18886
19074
|
| \\[data-orientation] | The orientation of the separator. It can be \`horizontal\` or \`vertical\`. |`,props:`interface SeparatorProps {
|
|
18887
19075
|
/**
|
|
18888
19076
|
* The orientation of the separator.
|
|
19077
|
+
*
|
|
18889
19078
|
* @default 'horizontal'
|
|
18890
19079
|
*/
|
|
18891
19080
|
orientation?: "horizontal" | "vertical"
|
|
@@ -20747,22 +20936,32 @@ Use the \`renderEmptyState\` prop on \`TableBody\` to display a message when the
|
|
|
20747
20936
|
*
|
|
20748
20937
|
* Requirements:
|
|
20749
20938
|
*
|
|
20750
|
-
*
|
|
20751
|
-
*
|
|
20752
|
-
*
|
|
20939
|
+
* - You must render the expected element type (e.g. if \`<button>\` is expected, you cannot render an
|
|
20940
|
+
* \`<a>\`).
|
|
20941
|
+
* - Only a single root DOM element can be rendered (no fragments).
|
|
20942
|
+
* - You must pass through props and ref to the underlying DOM element, merging with your own prop
|
|
20943
|
+
* as appropriate.
|
|
20753
20944
|
*/
|
|
20754
|
-
render?: (
|
|
20945
|
+
render?: (
|
|
20946
|
+
props: React.JSX.IntrinsicElements[E],
|
|
20947
|
+
renderProps: T
|
|
20948
|
+
) => ReactElement
|
|
20755
20949
|
/**
|
|
20756
|
-
* The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
|
|
20950
|
+
* The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
|
|
20951
|
+
* element. A function may be provided to compute the class based on component state.
|
|
20757
20952
|
*/
|
|
20758
|
-
className?:
|
|
20953
|
+
className?: | string
|
|
20954
|
+
| ((values: T & {defaultClassName: string | undefined}) => string)
|
|
20759
20955
|
/**
|
|
20760
|
-
* The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
|
|
20956
|
+
* The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
|
|
20957
|
+
* element. A function may be provided to compute the style based on component state.
|
|
20761
20958
|
*/
|
|
20762
|
-
style?:
|
|
20959
|
+
style?: | CSSProperties
|
|
20960
|
+
| ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined)
|
|
20763
20961
|
/**
|
|
20764
|
-
* A slot name for the component. Slots allow the component to receive props from a parent
|
|
20765
|
-
* An explicit \`null\` value indicates that the local props completely override all
|
|
20962
|
+
* A slot name for the component. Slots allow the component to receive props from a parent
|
|
20963
|
+
* component. An explicit \`null\` value indicates that the local props completely override all
|
|
20964
|
+
* props received from a parent.
|
|
20766
20965
|
*/
|
|
20767
20966
|
slot?: string | null
|
|
20768
20967
|
/**
|
|
@@ -20771,12 +20970,14 @@ slot?: string | null
|
|
|
20771
20970
|
children?: ReactNode
|
|
20772
20971
|
/**
|
|
20773
20972
|
* How multiple selection should behave in the collection.
|
|
20774
|
-
*
|
|
20973
|
+
*
|
|
20974
|
+
* @default 'toggle'
|
|
20775
20975
|
*/
|
|
20776
20976
|
selectionBehavior?: SelectionBehavior
|
|
20777
20977
|
/**
|
|
20778
20978
|
* Whether \`disabledKeys\` applies to all interactions, or only selection.
|
|
20779
|
-
*
|
|
20979
|
+
*
|
|
20980
|
+
* @default 'all'
|
|
20780
20981
|
*/
|
|
20781
20982
|
disabledBehavior?: DisabledBehavior
|
|
20782
20983
|
/**
|
|
@@ -20784,7 +20985,8 @@ disabledBehavior?: DisabledBehavior
|
|
|
20784
20985
|
*/
|
|
20785
20986
|
onRowAction?: (key: Key) => void
|
|
20786
20987
|
/**
|
|
20787
|
-
* The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for
|
|
20988
|
+
* The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for
|
|
20989
|
+
* the Table.
|
|
20788
20990
|
*/
|
|
20789
20991
|
dragAndDropHooks?: DragHooks<T> & DropHooks
|
|
20790
20992
|
}`,stories:{usage:[{id:"core-collections-table--default",name:"Default",snippet:"const Default = () => <BasicTableExample />;",description:"Basic table with columns and rows, no interactivity"},{id:"core-collections-table--single-selection",name:"Single Selection",snippet:"const SingleSelection = () => <SingleSelectionTableExample />;",description:"Single selection mode with controlled state"},{id:"core-collections-table--multiple-selection",name:"Multiple Selection",snippet:"const MultipleSelection = () => <MultipleSelectionTableExample />;",description:"Multiple selection mode with checkbox column and select-all header"},{id:"core-collections-table--sorting",name:"Sorting",snippet:"const Sorting = () => <SortableTableExample />;",description:"Sortable columns with sort descriptor and client-side sorting"},{id:"core-collections-table--empty",name:"Empty",snippet:"const Empty = () => <EmptyTableExample />;",description:"Empty table with no rows"},{id:"core-collections-table--row-action",name:"Row Action",snippet:`const RowAction = () => (
|
|
@@ -25761,22 +25963,28 @@ onOpenChange?: (isOpen: boolean) => void
|
|
|
25761
25963
|
*/
|
|
25762
25964
|
isDisabled?: boolean
|
|
25763
25965
|
/**
|
|
25764
|
-
* The delay time for the tooltip to show up. [See
|
|
25966
|
+
* The delay time for the tooltip to show up. [See
|
|
25967
|
+
* guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
|
|
25968
|
+
*
|
|
25765
25969
|
* @default 1500
|
|
25766
25970
|
*/
|
|
25767
25971
|
delay?: number
|
|
25768
25972
|
/**
|
|
25769
|
-
* The delay time for the tooltip to close. [See
|
|
25973
|
+
* The delay time for the tooltip to close. [See
|
|
25974
|
+
* guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
|
|
25975
|
+
*
|
|
25770
25976
|
* @default 500
|
|
25771
25977
|
*/
|
|
25772
25978
|
closeDelay?: number
|
|
25773
25979
|
/**
|
|
25774
25980
|
* By default, opens for both focus and hover. Can be made to open only for focus.
|
|
25981
|
+
*
|
|
25775
25982
|
* @default 'hover'
|
|
25776
25983
|
*/
|
|
25777
25984
|
trigger?: 'hover' | 'focus'
|
|
25778
25985
|
/**
|
|
25779
25986
|
* Whether the tooltip should close when the trigger is pressed.
|
|
25987
|
+
*
|
|
25780
25988
|
* @default true
|
|
25781
25989
|
*/
|
|
25782
25990
|
shouldCloseOnPress?: boolean
|
|
@@ -25897,9 +26105,10 @@ placement?: any
|
|
|
25897
26105
|
<Text>Tooltip is: {isOpen ? "open" : "closed"}</Text>
|
|
25898
26106
|
</div>
|
|
25899
26107
|
);
|
|
25900
|
-
};`}],implementation:`import {
|
|
26108
|
+
};`}],implementation:`import React, { useState } from "react";
|
|
25901
26109
|
|
|
25902
|
-
import
|
|
26110
|
+
import { ActionButton } from "../../ActionButton";
|
|
26111
|
+
import { Tooltip } from "../Tooltip";
|
|
25903
26112
|
|
|
25904
26113
|
export const CustomElementTooltip = () => (
|
|
25905
26114
|
<Tooltip text="Tooltip content" delay={0}>
|
|
@@ -25910,7 +26119,29 @@ export const CustomElementTooltip = () => (
|
|
|
25910
26119
|
/>
|
|
25911
26120
|
)}
|
|
25912
26121
|
</Tooltip>
|
|
25913
|
-
)
|
|
26122
|
+
);
|
|
26123
|
+
|
|
26124
|
+
export const TooltipGetTargetRectExample = () => {
|
|
26125
|
+
const [called, setCalled] = useState(false);
|
|
26126
|
+
|
|
26127
|
+
return (
|
|
26128
|
+
<>
|
|
26129
|
+
<Tooltip
|
|
26130
|
+
text="Tooltip content"
|
|
26131
|
+
delay={0}
|
|
26132
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
26133
|
+
// recording that react-aria invoked the forwarded callback.
|
|
26134
|
+
getTargetRect={(target) => {
|
|
26135
|
+
setCalled(true);
|
|
26136
|
+
return target.getBoundingClientRect();
|
|
26137
|
+
}}
|
|
26138
|
+
>
|
|
26139
|
+
<ActionButton label="Show Tooltip" />
|
|
26140
|
+
</Tooltip>
|
|
26141
|
+
{called ? <span data-testid="tooltip-target-rect-called" /> : null}
|
|
26142
|
+
</>
|
|
26143
|
+
);
|
|
26144
|
+
};`},similarTo:[],figmaUrl:null},TreeView:{id:"core-collections-treeview",breadcrumb:"Core/Collections/TreeView",importStatement:`import {
|
|
25914
26145
|
TreeView,
|
|
25915
26146
|
VirtualizedTreeViewExample,
|
|
25916
26147
|
VirtualizedTreeViewWithActionsExample,
|
|
@@ -30248,6 +30479,31 @@ export const PopoverExample: React.FC<{
|
|
|
30248
30479
|
);
|
|
30249
30480
|
};
|
|
30250
30481
|
|
|
30482
|
+
export const PopoverGetTargetRectExample: React.FC = () => {
|
|
30483
|
+
const [called, setCalled] = useState(false);
|
|
30484
|
+
|
|
30485
|
+
return (
|
|
30486
|
+
<Popover type="dialog" defaultOpen={true}>
|
|
30487
|
+
<PopoverTrigger>
|
|
30488
|
+
<ActionButton label="Open" />
|
|
30489
|
+
</PopoverTrigger>
|
|
30490
|
+
<PopoverContent
|
|
30491
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
30492
|
+
// recording that react-aria invoked the forwarded callback.
|
|
30493
|
+
getTargetRect={(target) => {
|
|
30494
|
+
setCalled(true);
|
|
30495
|
+
return target.getBoundingClientRect();
|
|
30496
|
+
}}
|
|
30497
|
+
>
|
|
30498
|
+
<Dialog size="content" aria-label="content">
|
|
30499
|
+
<Text type="label">getTargetRect content</Text>
|
|
30500
|
+
{called ? <span data-testid="popover-target-rect-called" /> : null}
|
|
30501
|
+
</Dialog>
|
|
30502
|
+
</PopoverContent>
|
|
30503
|
+
</Popover>
|
|
30504
|
+
);
|
|
30505
|
+
};
|
|
30506
|
+
|
|
30251
30507
|
export const PopoverWithScrollableContentExample: React.FC<{
|
|
30252
30508
|
popoverProps: Omit<PopoverProps, "children">;
|
|
30253
30509
|
popoverContentProps?: Omit<PopoverContentProps, "children">;
|
|
@@ -31383,6 +31639,31 @@ export const PopoverExample: React.FC<{
|
|
|
31383
31639
|
);
|
|
31384
31640
|
};
|
|
31385
31641
|
|
|
31642
|
+
export const PopoverGetTargetRectExample: React.FC = () => {
|
|
31643
|
+
const [called, setCalled] = useState(false);
|
|
31644
|
+
|
|
31645
|
+
return (
|
|
31646
|
+
<Popover type="dialog" defaultOpen={true}>
|
|
31647
|
+
<PopoverTrigger>
|
|
31648
|
+
<ActionButton label="Open" />
|
|
31649
|
+
</PopoverTrigger>
|
|
31650
|
+
<PopoverContent
|
|
31651
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
31652
|
+
// recording that react-aria invoked the forwarded callback.
|
|
31653
|
+
getTargetRect={(target) => {
|
|
31654
|
+
setCalled(true);
|
|
31655
|
+
return target.getBoundingClientRect();
|
|
31656
|
+
}}
|
|
31657
|
+
>
|
|
31658
|
+
<Dialog size="content" aria-label="content">
|
|
31659
|
+
<Text type="label">getTargetRect content</Text>
|
|
31660
|
+
{called ? <span data-testid="popover-target-rect-called" /> : null}
|
|
31661
|
+
</Dialog>
|
|
31662
|
+
</PopoverContent>
|
|
31663
|
+
</Popover>
|
|
31664
|
+
);
|
|
31665
|
+
};
|
|
31666
|
+
|
|
31386
31667
|
export const PopoverWithScrollableContentExample: React.FC<{
|
|
31387
31668
|
popoverProps: Omit<PopoverProps, "children">;
|
|
31388
31669
|
popoverContentProps?: Omit<PopoverContentProps, "children">;
|
|
@@ -32503,6 +32784,28 @@ export const SelectExample: React.FC<
|
|
|
32503
32784
|
);
|
|
32504
32785
|
};
|
|
32505
32786
|
|
|
32787
|
+
export const SelectGetTargetRectExample: React.FC = () => {
|
|
32788
|
+
const [called, setCalled] = React.useState(false);
|
|
32789
|
+
|
|
32790
|
+
return (
|
|
32791
|
+
<>
|
|
32792
|
+
<Select
|
|
32793
|
+
aria-label="Choose an item"
|
|
32794
|
+
placeholder="Choose an item"
|
|
32795
|
+
items={items}
|
|
32796
|
+
defaultOpen={true}
|
|
32797
|
+
// Returns the trigger's own rect (so positioning is unchanged) while
|
|
32798
|
+
// recording that the popover invoked the forwarded callback.
|
|
32799
|
+
getTargetRect={(target) => {
|
|
32800
|
+
setCalled(true);
|
|
32801
|
+
return target.getBoundingClientRect();
|
|
32802
|
+
}}
|
|
32803
|
+
/>
|
|
32804
|
+
{called ? <span data-testid="select-target-rect-called" /> : null}
|
|
32805
|
+
</>
|
|
32806
|
+
);
|
|
32807
|
+
};
|
|
32808
|
+
|
|
32506
32809
|
export const SelectCustomTriggerExample: React.FC<
|
|
32507
32810
|
Omit<React.ComponentProps<typeof Select>, "items">
|
|
32508
32811
|
> = (args) => {
|
|
@@ -33920,7 +34223,7 @@ padding={[null, "lg", "xl"]}
|
|
|
33920
34223
|
|
|
33921
34224
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
33922
34225
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
33923
|
-
* [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:"1.0.0"};var u=`
|
|
34226
|
+
* [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:"1.1.0"};var u=`
|
|
33924
34227
|
# Baseline UI MCP Server Guidelines
|
|
33925
34228
|
|
|
33926
34229
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|