@baseline-ui/mcp 0.61.0 → 0.63.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 +4 -0
- package/dist/index.cjs +873 -186
- package/dist/index.js +873 -186
- package/package.json +6 -4
- package/sbom.json +2730 -1
package/dist/index.cjs
CHANGED
|
@@ -702,7 +702,7 @@ export function ArabicLocaleLtrOverridePieChart() {
|
|
|
702
702
|
<PieChart data={data} dir="ltr" width={320} />
|
|
703
703
|
</I18nProvider>
|
|
704
704
|
);
|
|
705
|
-
}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a
|
|
705
|
+
}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a vertically stacked set of collapsible sections, each toggled by its header, that supports single or multiple simultaneous expansions. Use it to organize lengthy or secondary content into scannable groups that users can reveal on demand.",documentation:`\`Accordion\` is a vertically stacked set of collapsible sections, each toggled by its header, that supports single or multiple simultaneous expansions. Use it to organize lengthy or secondary content into scannable groups that users can reveal on demand.
|
|
706
706
|
|
|
707
707
|
* Full keyboard navigation
|
|
708
708
|
* It can expand one or multiple items
|
|
@@ -982,7 +982,7 @@ export const AccordionWithDisabledItemsExample: React.FC<
|
|
|
982
982
|
Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
|
|
983
983
|
> = (props) => {
|
|
984
984
|
return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
|
|
985
|
-
};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"ActionButton is a
|
|
985
|
+
};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.",documentation:'`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\nThere are nine variants of the button: `primary`, `secondary`, `tertiary`, `popover`, `toolbar`, `ghost`, `success`, `warning` and `error`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n```jsx\n<ActionButton label="Primary" />\n<ActionButton label="Secondary" variant="secondary" />\n<ActionButton label="Tertiary" variant="tertiary" />\n<ActionButton label={"Toolbar"} variant={"toolbar"} />\n<ActionButton label="Ghost" variant="ghost" />\n<ActionButton label="Popover" variant="popover" />\n<ActionButton label="Success" variant="success" />\n<ActionButton label="Warning" variant="warning" />\n<ActionButton label="Error" variant="error" />\n```\n\nActionButton supports three sizes: `sm` (default), `md`, and `lg`. You can change the size by passing the `size` prop.\n\n```jsx\n<ActionButton label="Small (default)" size="sm" />\n<ActionButton label="Medium" size="md" />\n<ActionButton label="Large" size="lg" />\n```\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions.\n\n```jsx\n<ActionButton label="Primary" isDisabled />\n<ActionButton label="Secondary" variant="secondary" isDisabled />\n<ActionButton label="Tertiary" variant="tertiary" isDisabled />\n<ActionButton label="Ghost" variant="ghost" isDisabled />\n<ActionButton label="Toolbar" variant="toolbar" isDisabled />\n<ActionButton label="Popover" variant="popover" isDisabled />\n<ActionButton label="Success" variant="success" isDisabled />\n<ActionButton label="Warning" variant="warning" isDisabled />\n<ActionButton label="Error" variant="error" isDisabled />\n```\n\nYou can place an icon before or after the label by passing the `iconStart` or `iconEnd` props. Choose the icon entrypoint that matches your button size: `@baseline-ui/icons/16` for `sm`, `@baseline-ui/icons/20` for `md`, and `@baseline-ui/icons/24` for `lg`.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<ActionButton label="Label" iconStart={EllipseIcon} />\n<ActionButton label="Label" iconEnd={EllipseIcon} />\n```\n\nYou can listen for events by passing the `onPress` prop. The `onPress` prop will fire when the button is activated by mouse, touch, or keyboard interactions.\n\n```jsx\n<ActionButton label="Click Me" onPress={() => alert("Hello World")} />\n```\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n\n| Key | Function |\n| ------- | --------------------- |\n| `Space` | Activates the button. |\n| `Enter` | Activates the button. |',props:`interface ActionButtonProps {
|
|
986
986
|
/**
|
|
987
987
|
* The button's class name.
|
|
988
988
|
*/
|
|
@@ -1262,7 +1262,7 @@ export function ButtonWithStyleFn(props: Omit<ActionButtonProps, "style">) {
|
|
|
1262
1262
|
})}
|
|
1263
1263
|
/>
|
|
1264
1264
|
);
|
|
1265
|
-
}`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"
|
|
1265
|
+
}`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"`ActionGroup` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.",documentation:`\`ActionGroup\` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.
|
|
1266
1266
|
|
|
1267
1267
|
* Groups related action buttons with consistent spacing and layout.
|
|
1268
1268
|
* Supports arrow key navigation between actions.
|
|
@@ -1552,7 +1552,7 @@ export const ActionGroupWithIconExample: React.FC<
|
|
|
1552
1552
|
Omit<ActionGroupProps, "items">
|
|
1553
1553
|
> = (props) => {
|
|
1554
1554
|
return <ActionGroupExample icon={TextIcon} {...props} />;
|
|
1555
|
-
};`},similarTo:[],figmaUrl:null},ActionIconButton:{id:"core-buttons-actioniconbutton",breadcrumb:"Core/Buttons/ActionIconButton",importStatement:'import { ActionIconButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"ActionIconButton is
|
|
1555
|
+
};`},similarTo:[],figmaUrl:null},ActionIconButton:{id:"core-buttons-actioniconbutton",breadcrumb:"Core/Buttons/ActionIconButton",importStatement:'import { ActionIconButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionIconButton` is an icon-only button that triggers an action when activated by mouse, touch, or keyboard. Use it for compact controls in toolbars, headers, or any context where space is limited and the icon's meaning is clear.",documentation:`\`ActionIconButton\` is an icon-only button that triggers an action when activated by mouse, touch, or keyboard. Use it for compact controls in toolbars, headers, or any context where space is limited and the icon's meaning is clear.
|
|
1556
1556
|
|
|
1557
1557
|
* Mouse and touch event handling, and press state management
|
|
1558
1558
|
* Keyboard focus management and cross browser normalization
|
|
@@ -1815,7 +1815,7 @@ export const IconButtonExample: React.FC<
|
|
|
1815
1815
|
ActionableWithDynamicChildStyling,
|
|
1816
1816
|
BasicActionable,
|
|
1817
1817
|
DisabledActionable,
|
|
1818
|
-
} from "@baseline-ui/core";`,description:"
|
|
1818
|
+
} from "@baseline-ui/core";`,description:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.",documentation:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.\n\n* Makes any React element clickable and interactive\n* Mouse, touch, and keyboard event handling with press state management\n* Keyboard focus management and cross-browser normalization\n* Support for Space and Enter keys\n* Dynamic styling based on UI state (hovered, focused, pressed, disabled)\n* Flexible element type support (button, div, etc.)\n* Separate styling for wrapper and child elements\n\nThe `Actionable` component wraps a single React element and makes it clickable. Here's a basic example wrapping a `Code` component:\n\nBy default, `Actionable` renders a `button` element. You can change this using the `elementType` prop. This example shows using a `div` element type:\n\nYou can disable interactions by passing the `isDisabled` prop:\n\nYou can style the child element based on the component's UI state using the `childClassName` and `childStyle` props. These accept either static values or functions that receive UI state options. This example demonstrates dynamic styling that responds to hover, focus, and press states:\n\nSimilarly, you can style the wrapper element based on UI state using the `className` and `style` props. This example shows how to style the button wrapper based on interaction states:\n\n`Actionable` works with any React element, including complex nested components. This example shows a clickable card with multiple nested components:\n\nThe `className`, `style`, `childClassName`, and `childStyle` props can accept functions that receive UI state options:\n\n```typescript\ntype UIStateOptions = {\n isHovered?: boolean; // Whether the element is hovered\n isFocused?: boolean; // Whether the element is focused\n isPressed?: boolean; // Whether the element is currently pressed\n isDisabled?: boolean; // Whether the element is disabled\n isFocusVisible?: boolean; // Whether the element has keyboard focus\n};\n```\n\nThe component adds data attributes to the wrapper element that you can use for styling:\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------------------------------- |\n| `[data-disabled]` | Whether the actionable is disabled. |\n| `[data-focused]` | Whether the actionable is focused, either via mouse or keyboard. |\n| `[data-hovered]` | Whether the actionable is currently hovered with a mouse. |\n| `[data-focus-visible]` | Whether the actionable has keyboard focus. |\n| `[data-pressed]` | Whether the actionable is currently pressed. |\n\nThe `Actionable` component provides full keyboard and screen reader support through React Aria's button hooks. It automatically handles:\n\n* Keyboard focus management\n* ARIA attributes for accessibility\n* Keyboard event handling (Space and Enter keys)\n* Focus ring visibility based on keyboard vs mouse interaction\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Space` | Activates the actionable element. |\n| `Enter` | Activates the actionable element. |",props:`interface ActionableProps {
|
|
1819
1819
|
/**
|
|
1820
1820
|
* The button's class name.
|
|
1821
1821
|
*/
|
|
@@ -2024,7 +2024,7 @@ export const ActionableWithComplexContent: React.FC<
|
|
|
2024
2024
|
</Box>
|
|
2025
2025
|
</Actionable>
|
|
2026
2026
|
);
|
|
2027
|
-
};`},similarTo:[],figmaUrl:null},AlertDialog:{id:"core-overlays-alertdialog",breadcrumb:"Core/Overlays/AlertDialog",importStatement:'import { AlertDialog, AlertDialogExample } from "@baseline-ui/core";',description:"
|
|
2027
|
+
};`},similarTo:[],figmaUrl:null},AlertDialog:{id:"core-overlays-alertdialog",breadcrumb:"Core/Overlays/AlertDialog",importStatement:'import { AlertDialog, AlertDialogExample } from "@baseline-ui/core";',description:"`AlertDialog` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.",documentation:`\`AlertDialog\` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.
|
|
2028
2028
|
|
|
2029
2029
|
<a href="?path=/story/core-overlays-alertdialog--basic">View story</a>
|
|
2030
2030
|
|
|
@@ -2309,7 +2309,7 @@ export const AlertDialogExample: React.FC<
|
|
|
2309
2309
|
</ModalContent>
|
|
2310
2310
|
</Modal>
|
|
2311
2311
|
);
|
|
2312
|
-
};`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"
|
|
2312
|
+
};`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"`AudioPlayer` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.",documentation:`\`AudioPlayer\` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.
|
|
2313
2313
|
|
|
2314
2314
|
* Play and pause audio files
|
|
2315
2315
|
* Seek through audio files
|
|
@@ -2384,7 +2384,7 @@ sources: {
|
|
|
2384
2384
|
* @default "lg"
|
|
2385
2385
|
*/
|
|
2386
2386
|
size?: "sm" | "lg"
|
|
2387
|
-
}`,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
|
|
2387
|
+
}`,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.
|
|
2388
2388
|
|
|
2389
2389
|
\`\`\`jsx
|
|
2390
2390
|
import { Avatar } from "../../utils";
|
|
@@ -2547,7 +2547,7 @@ hasNotifications?: boolean
|
|
|
2547
2547
|
}}
|
|
2548
2548
|
defaultProps={args}
|
|
2549
2549
|
/>
|
|
2550
|
-
);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:""},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"
|
|
2550
|
+
);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:""},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"`Box` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.",documentation:`\`Box\` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.
|
|
2551
2551
|
|
|
2552
2552
|
* Consistent API for layout, spacing, and styling via sprinkle props
|
|
2553
2553
|
* Theme-aware \u2014 automatically applies correct styling based on the active theme
|
|
@@ -2697,7 +2697,7 @@ children?: ReactNode
|
|
|
2697
2697
|
Nested Box
|
|
2698
2698
|
</Box>
|
|
2699
2699
|
</Box>
|
|
2700
|
-
);`}],implementation:""},similarTo:[],figmaUrl:null},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"
|
|
2700
|
+
);`}],implementation:""},similarTo:[],figmaUrl:null},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.",documentation:'`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.\n\n* Combines a button (toggle/action) with a select dropdown menu\n* Button can toggle current selection or trigger an action\n* Supports icons, optional labels, and tooltips for better UX\n* Configurable with different sizes, states (disabled/enabled), and behaviors\n* Full keyboard navigation and screen reader support\n* Customizable styling through `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` props\n* Individual button behaviour per option via `buttonBehaviour` function\n* Validation state support\n\n```jsx\nimport { ButtonSelect } from "@baseline-ui/core";\nimport { EllipseIcon, RectangleIcon, PolygonIcon } from "@baseline-ui/icons/24";\n\nconst items = [\n { id: "ellipse", icon: EllipseIcon, label: "Ellipse" },\n { id: "square", icon: RectangleIcon, label: "Square" },\n { id: "polygon", icon: PolygonIcon, label: "Polygon" },\n];\n\n<ButtonSelect items={items} aria-label="Shape Options" />;\n```\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" hideLabel />\n```\n\nBy default, ButtonSelect displays a tooltip on the dropdown trigger. When `hideLabel` is `true`, the main button also receives a tooltip showing the selected item\'s label. You can disable tooltips by setting `tooltipProps` with `isDisabled: true`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={{ isDisabled: true }}\n/>\n```\n\nYou can also pass `tooltipProps` as a function to customize tooltips per trigger:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={(trigger) => ({\n text: trigger === "button" ? "Toggle shape" : "More shapes",\n })}\n/>\n```\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n defaultSelectedKey="polygon"\n/>\n```\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" defaultSelected={true} />\n```\n\nYou can control the selected item by using the `selectedKey` prop. Use `isSelected` and `onButtonSelectionChange` to control the button toggle state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n selectedKey={selectedKey}\n onSelectionChange={setSelectedKey}\n isSelected={isSelected}\n onButtonSelectionChange={({ isSelected }) => setIsSelected(isSelected)}\n/>\n```\n\nYou can disable the entire component using the `isDisabled` prop. Use `disabledKeys` to disable individual options in the dropdown.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" isDisabled />\n```\n\nYou can disable specific options in the dropdown using `disabledKeys`. If the currently selected item\'s key is in `disabledKeys`, the main button is also disabled.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n disabledKeys={["square"]}\n/>\n```\n\nBy default, the button uses a `"toggle"` behavior, which means it can be toggled on/off. You can change it to `"action"` behavior, which means it will trigger an action when pressed but won\'t toggle a state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour="action"\n onPress={(e) => console.log("Button pressed", e)}\n/>\n```\n\nYou can also pass `buttonBehaviour` as a function to assign different behaviors per option:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour={(activeKey) =>\n activeKey === "ellipse" ? "action" : "toggle"\n }\n/>\n```\n\nButtonSelect provides several callbacks:\n\n* **`onPress`** \u2014 Called when the main button is pressed\n* **`onButtonAction`** \u2014 Called with `{ isSelected, selectedKey, buttonBehaviour }` when the button is pressed\n* **`onButtonSelectionChange`** \u2014 Called with `{ isSelected, selectedKey }` when toggle state changes\n* **`onSelectionChange`** \u2014 Called with the new key when a dropdown option is selected\n* **`onOptionPress`** \u2014 Called with `(pressEvent, key)` when any dropdown option is pressed\n\nUse `validationState` to indicate a validation state. Supported values are `"error"` and `"warning"`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n validationState="error"\n/>\n```\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" size="lg" />\n```\n\nUse `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` to customize the appearance. These accept either static values or functions for dynamic styling:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n optionClassName={(item, { isButton, isSelected }) =>\n isButton && isSelected ? "active-button" : ""\n }\n optionStyle={(item, { isButton }) => ({\n backgroundColor: isButton ? "lightblue" : undefined,\n })}\n triggerClassName="custom-trigger"\n/>\n```\n\n| Selector | Description |\n| ---------------------------------- | ----------------------------------------------------------- |\n| `.BaselineUI-ButtonSelect` | The root container element. |\n| `.BaselineUI-ButtonSelect-Button` | The main action/toggle button. |\n| `.BaselineUI-ButtonSelect-Trigger` | The dropdown trigger (caret) button. |\n| `.BaselineUI-ButtonSelect-Select` | The select/dropdown wrapper. |\n| `[data-hovered]` | Present when the component is hovered. |\n| `[data-selected]` | Present when the button is in the selected (toggled) state. |\n| `[data-disabled]` | Present when the component is disabled. |\n| `[data-expanded]` | Present when the dropdown is open. |\n| `[data-button-behaviour]` | The current button behaviour (`"toggle"` or `"action"`). |\n\n> **Note:** Boolean data attributes (`data-hovered`, `data-selected`, `data-disabled`, `data-expanded`) are only present in the DOM when `true`.\n\n| Key | Function |\n| ----------- | ------------------------------------------------------------------------ |\n| `Space` | Toggles the button if focused, or activates the selected dropdown option |\n| `Enter` | Toggles the button if focused, or activates the selected dropdown option |\n| `Tab` | Moves focus to the next focusable element |\n| `Shift+Tab` | Moves focus to the previous focusable element |\n| `ArrowDown` | Opens the dropdown if trigger is focused; navigates down within dropdown |\n| `ArrowUp` | Navigates up within the dropdown |\n| `Home` | Moves to the first option in the dropdown |\n| `End` | Moves to the last option in the dropdown |\n| `Escape` | Closes the dropdown if open |\n\n* **Select** \u2014 Use when you only need a dropdown without a primary action button.\n* **ToggleButton** \u2014 Use when you need a standalone toggle button without a dropdown.\n* **ActionButton** \u2014 Use when you need a standalone action button.\n* **ListBox** \u2014 The underlying list component used in the dropdown.',props:`interface ButtonSelectProps {
|
|
2701
2701
|
/**
|
|
2702
2702
|
* The unique identifier for the block. This is used to identify the block in
|
|
2703
2703
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -2948,7 +2948,7 @@ export const ButtonSelectWithOptionStyleFn: React.FC<
|
|
|
2948
2948
|
})}
|
|
2949
2949
|
/>
|
|
2950
2950
|
);
|
|
2951
|
-
};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"
|
|
2951
|
+
};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.",documentation:'`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
|
|
2952
2952
|
/**
|
|
2953
2953
|
* The unique identifier for the block. This is used to identify the block in
|
|
2954
2954
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -3148,7 +3148,7 @@ export const RangeCalendarExample: React.FC<
|
|
|
3148
3148
|
}
|
|
3149
3149
|
/>
|
|
3150
3150
|
);
|
|
3151
|
-
};`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"
|
|
3151
|
+
};`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"`RangeCalendar` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.",documentation:`\`RangeCalendar\` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.
|
|
3152
3152
|
|
|
3153
3153
|
* **Range selection** \u2013 Click to set start and end dates, with visual highlighting for the selected range
|
|
3154
3154
|
* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more
|
|
@@ -3550,7 +3550,7 @@ export const RangeCalendarExample: React.FC<
|
|
|
3550
3550
|
}
|
|
3551
3551
|
/>
|
|
3552
3552
|
);
|
|
3553
|
-
};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a
|
|
3553
|
+
};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.",documentation:'`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.\n\n* Built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html)\n* Full support for form autofill\n* Keyboard focus management and cross browser normalization\n* Labeling support for assistive technology via aria-\\* props\n* Indeterminate state support\n\n```jsx\nimport { Checkbox } from "@baseline-ui/core";\n\n<Checkbox label="Label" onChange={console.log} />;\n```\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n```jsx\n<Checkbox label="Label" defaultSelected onChange={console.log} />\n```\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n```jsx\n<Checkbox label="Label" isSelected onChange={console.log} />\n```\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n```jsx\n<Checkbox label="Label" isIndeterminate onChange={console.log} />\n```\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n```jsx\n<Checkbox label="Label" isReadOnly isSelected onChange={console.log} />\n```\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n```jsx\n<Checkbox label="Label" isDisabled onChange={console.log} />\n```\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n```jsx\n<Checkbox label="Label" name="name" value="value" onChange={console.log} />\n```\n\nThe `labelPosition` prop controls whether the label appears before or after the checkbox.\n\n```jsx\n<Checkbox label="Label" labelPosition="start" onChange={console.log} />\n```\n\nThe `isInvalid` prop marks the checkbox as having a validation error.\n\n```jsx\n<Checkbox label="Label" isInvalid onChange={console.log} />\n```\n\nThe `onChange` callback receives a `boolean` indicating the new checked state.\n\n```jsx\n<Checkbox\n label="Label"\n onChange={(isSelected) => {\n console.log("Checked:", isSelected);\n }}\n/>\n```\n\nWhen `isIndeterminate` is `true`, the checkbox displays a minus icon regardless of the `isSelected` state. Clicking an indeterminate checkbox will call `onChange` with `true`.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-selected] | Whether the component is selected. |\n| \\[data-readonly] | Whether the component is read-only. |\n| \\[data-pressed] | Whether the component is currently pressed. |\n| \\[data-indeterminate] | Whether the component is in an indeterminate state. |\n| \\[data-invalid] | Whether the component has a validation error. |\n\n| Key | Function |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |',props:`interface CheckboxProps {
|
|
3554
3554
|
/**
|
|
3555
3555
|
* The unique identifier for the block. This is used to identify the block in
|
|
3556
3556
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -3591,7 +3591,7 @@ labelPosition?: "start" | "end"
|
|
|
3591
3591
|
slot?: string | null
|
|
3592
3592
|
}`,stories:{usage:[{id:"core-forms-checkbox--primary",name:"Primary",snippet:'const Primary = () => <Checkbox aria-label="Label" />;'},{id:"core-forms-checkbox--checked",name:"Checked",snippet:'const Checked = () => <Checkbox aria-label="Label" defaultSelected />;'},{id:"core-forms-checkbox--indeterminate",name:"Indeterminate",snippet:'const Indeterminate = () => <Checkbox aria-label="Label" isIndeterminate />;'},{id:"core-forms-checkbox--with-error",name:"With Error",snippet:'const WithError = () => <Checkbox aria-label="Label" isInvalid />;'},{id:"core-forms-checkbox--with-label-at-end",name:"With Label At End",snippet:"const WithLabelAtEnd = () => <WithLabel />;"},{id:"core-forms-checkbox--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <div style={{ width: 150 }}>
|
|
3593
3593
|
<WithLabel labelPosition="start" />
|
|
3594
|
-
</div>;`}],implementation:""},similarTo:[],figmaUrl:null},Code:{id:"core-content-code",breadcrumb:"Core/Content/Code",importStatement:'import { Code } from "@baseline-ui/core";',description:"
|
|
3594
|
+
</div>;`}],implementation:""},similarTo:[],figmaUrl:null},Code:{id:"core-content-code",breadcrumb:"Core/Content/Code",importStatement:'import { Code } from "@baseline-ui/core";',description:"`Code` is a monospace container for displaying source snippets or configuration text inline with other UI. Use it when showing code samples, command output, or other technical strings that must preserve formatting.",documentation:`\`Code\` is a monospace container for displaying source snippets or configuration text inline with other UI. Use it when showing code samples, command output, or other technical strings that must preserve formatting.
|
|
3595
3595
|
|
|
3596
3596
|
* Monospace font family optimized for code readability
|
|
3597
3597
|
* Automatic horizontal and vertical scrolling for long code blocks
|
|
@@ -3640,7 +3640,7 @@ children: React.ReactNode
|
|
|
3640
3640
|
"test": "cross-env BABEL_ENV=test jest",
|
|
3641
3641
|
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
|
|
3642
3642
|
}
|
|
3643
|
-
}\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"
|
|
3643
|
+
}\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
|
|
3644
3644
|
/**
|
|
3645
3645
|
* Whether the overlay is open by default (controlled).
|
|
3646
3646
|
*/
|
|
@@ -3916,7 +3916,7 @@ export const IndeterminateWithCustomColorLabel: React.FC<ColorInputProps> = (
|
|
|
3916
3916
|
}
|
|
3917
3917
|
/>
|
|
3918
3918
|
);
|
|
3919
|
-
};`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:
|
|
3919
|
+
};`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
|
|
3920
3920
|
|
|
3921
3921
|
* Accessible color representation with screen reader support via aria-label
|
|
3922
3922
|
* Support for transparent colors with a checkered background pattern
|
|
@@ -4107,8 +4107,7 @@ indeterminateIcon?: React.FC<IconProps> | null
|
|
|
4107
4107
|
aria-label="Indeterminate"
|
|
4108
4108
|
tooltip
|
|
4109
4109
|
indeterminateIcon={null} />
|
|
4110
|
-
</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorSwatchPicker:{id:"core-forms-colorswatchpicker",breadcrumb:"Core/Forms/ColorSwatchPicker",importStatement:'import { ColorSwatchPicker } from "@baseline-ui/core";',description:"`ColorSwatchPicker` is a
|
|
4111
|
-
the \`ListBox\` component.
|
|
4110
|
+
</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorSwatchPicker:{id:"core-forms-colorswatchpicker",breadcrumb:"Core/Forms/ColorSwatchPicker",importStatement:'import { ColorSwatchPicker } from "@baseline-ui/core";',description:"`ColorSwatchPicker` is a keyboard-navigable grid of color swatches from which a user picks exactly one color. Use it when you want users to choose from a curated palette without the overhead of a full color picker.",documentation:`\`ColorSwatchPicker\` is a keyboard-navigable grid of color swatches from which a user picks exactly one color. Use it when you want users to choose from a curated palette without the overhead of a full color picker.
|
|
4112
4111
|
|
|
4113
4112
|
* Exposed to assistive technologies via ARIA attributes.
|
|
4114
4113
|
* Supports keyboard navigation.
|
|
@@ -4247,8 +4246,7 @@ labelPosition?: any
|
|
|
4247
4246
|
label: item.label,
|
|
4248
4247
|
}))}
|
|
4249
4248
|
aria-label="Color Swatch Picker"
|
|
4250
|
-
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox`
|
|
4251
|
-
an editable input box that can also be used to search and filter specific items from the dropdown list.
|
|
4249
|
+
isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.",documentation:`\`ComboBox\` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.
|
|
4252
4250
|
|
|
4253
4251
|
\`\`\`jsx
|
|
4254
4252
|
<ComboBox
|
|
@@ -4857,7 +4855,7 @@ export const SectionComboBoxExample: React.FC = () => {
|
|
|
4857
4855
|
<ComboBox items={itemsWithSections} aria-label="Combo box" />
|
|
4858
4856
|
</Box>
|
|
4859
4857
|
);
|
|
4860
|
-
};`},similarTo:[],figmaUrl:null},DateField:{id:"core-forms-datefield",breadcrumb:"Core/Forms/DateField",importStatement:'import { DateField, VariantViewer } from "@baseline-ui/core";',description:"
|
|
4858
|
+
};`},similarTo:[],figmaUrl:null},DateField:{id:"core-forms-datefield",breadcrumb:"Core/Forms/DateField",importStatement:'import { DateField, VariantViewer } from "@baseline-ui/core";',description:"`DateField` is a text input split into individually editable segments for day, month, year, and optional time parts. Use it when users need to type a precise date or time value directly, with or without an accompanying calendar picker.",documentation:`\`DateField\` is a text input split into individually editable segments for day, month, year, and optional time parts. Use it when users need to type a precise date or time value directly, with or without an accompanying calendar picker.
|
|
4861
4859
|
|
|
4862
4860
|
* **Dates and times** \u2013 Support for dates and times with configurable granularity
|
|
4863
4861
|
* **International** \u2013 Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more
|
|
@@ -5813,7 +5811,7 @@ export const TestComponent = ({
|
|
|
5813
5811
|
</DeviceProvider>
|
|
5814
5812
|
</div>
|
|
5815
5813
|
);
|
|
5816
|
-
};`},similarTo:[],figmaUrl:null},Dialog:{id:"core-overlays-dialog",breadcrumb:"Core/Overlays/Dialog",importStatement:'import { Dialog, DialogExample, DialogSizesExample } from "@baseline-ui/core";',description:"
|
|
5814
|
+
};`},similarTo:[],figmaUrl:null},Dialog:{id:"core-overlays-dialog",breadcrumb:"Core/Overlays/Dialog",importStatement:'import { Dialog, DialogExample, DialogSizesExample } from "@baseline-ui/core";',description:"`Dialog` is a modal overlay that interrupts the user's flow to present focused content or require a decision. Use it for tasks that must be completed or acknowledged before returning to the underlying view.",documentation:`\`Dialog\` is a modal overlay that interrupts the user's flow to present focused content or require a decision. Use it for tasks that must be completed or acknowledged before returning to the underlying view.
|
|
5817
5815
|
|
|
5818
5816
|
* Exposed to assistive technologies as a \`dialog\` using ARIA \`role="dialog"\`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.
|
|
5819
5817
|
* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.
|
|
@@ -6066,7 +6064,7 @@ export const DialogSizesExample = () => {
|
|
|
6066
6064
|
WithInteractiveContentDisclosure,
|
|
6067
6065
|
WithLongContentDisclosure,
|
|
6068
6066
|
WithoutDescriptionDisclosure,
|
|
6069
|
-
} from "@baseline-ui/core";`,description:"
|
|
6067
|
+
} from "@baseline-ui/core";`,description:"`Disclosure` is an expandable panel with a status header that toggles a region of secondary content open or closed. Use it to surface progress, logs, or supporting details for an ongoing task while keeping the default view compact.",documentation:`\`Disclosure\` is an expandable panel with a status header that toggles a region of secondary content open or closed. Use it to surface progress, logs, or supporting details for an ongoing task while keeping the default view compact.
|
|
6070
6068
|
|
|
6071
6069
|
* Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`success\`, and \`denied\`
|
|
6072
6070
|
* Default icons for each variant, with support for custom icons
|
|
@@ -6617,7 +6615,7 @@ export const TruncatedTitleDisclosure: React.FC = () => {
|
|
|
6617
6615
|
</Disclosure>
|
|
6618
6616
|
</div>
|
|
6619
6617
|
);
|
|
6620
|
-
};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"
|
|
6618
|
+
};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.",documentation:'`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.\n\n* Exposed to assistive technologies as a `dialog` using ARIA `role="dialog"`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.\n* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.\n\n```jsx\nimport { Drawer } from "../../utils";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
|
|
6621
6619
|
/**
|
|
6622
6620
|
* The unique identifier for the block. This is used to identify the block in
|
|
6623
6621
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -6698,7 +6696,7 @@ export const DrawerWithActionExample: React.FC<{
|
|
|
6698
6696
|
Drawer Content
|
|
6699
6697
|
</Drawer>
|
|
6700
6698
|
);
|
|
6701
|
-
};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { ActionButton, Box, Editor, EditorAutoFocusOnMount, NumberInput, Separator } from "@baseline-ui/core";',description:"The `Editor` component is a rich/plain text editor that allows users to create and edit content.",documentation:'The `Editor` component is a rich/plain text editor that allows users to create and edit content.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\n```jsx\nimport { Editor } from "../../utils";\n\nfunction MyComponent() {\n return <Editor />;\n}\n```\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nIn the right example, the `isInline` prop is used to set the editor to be inline.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props. This allows you to control the value of the editor from the parent component.\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing `mentionableUsers` prop. This prop should be an array of objects with `id` and `name` properties. The `id` should be unique for each user and the `name` should be the name of the user.\nThe mentions feature only works when `enableRichText` is set to `true`.\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop should be an array of objects with `aria-label`, `icon` and `onPress` properties.\n\n| Key | Function |\n| ------------------------------ | ----------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\n| Selector | Description |\n| ------------------------------------------- | ---------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |',props:`interface EditorProps {
|
|
6699
|
+
};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor-rich-text",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Box, Editor, EditorAutoFocusOnMount, Separator } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
|
|
6702
6700
|
/**
|
|
6703
6701
|
* The unique identifier for the block. This is used to identify the block in
|
|
6704
6702
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -6733,11 +6731,17 @@ onSave?: (value: string) => void
|
|
|
6733
6731
|
*/
|
|
6734
6732
|
onCancel?: () => void
|
|
6735
6733
|
/**
|
|
6736
|
-
* The
|
|
6734
|
+
* The initial value of the editor (uncontrolled). The editor manages its
|
|
6735
|
+
* own state afterwards; later changes to this prop are ignored.
|
|
6737
6736
|
*/
|
|
6738
6737
|
defaultValue?: string
|
|
6739
6738
|
/**
|
|
6740
|
-
* The value of the editor.
|
|
6739
|
+
* The value of the editor (controlled). Provide together with \`onChange\`;
|
|
6740
|
+
* later changes to this prop update the editor content.
|
|
6741
|
+
*
|
|
6742
|
+
* Backwards compatibility: in rich text mode, \`value\` without \`onChange\`
|
|
6743
|
+
* behaves like \`defaultValue\` (initial content only), matching the
|
|
6744
|
+
* behavior of earlier versions.
|
|
6741
6745
|
*/
|
|
6742
6746
|
value?: string
|
|
6743
6747
|
/**
|
|
@@ -6882,29 +6886,47 @@ autoFocus?: boolean | "start" | "end"
|
|
|
6882
6886
|
* @default false
|
|
6883
6887
|
*/
|
|
6884
6888
|
saveOnEnter?: boolean
|
|
6885
|
-
}`,stories:{usage:[{id:"core-miscellaneous-editor
|
|
6889
|
+
}`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
|
|
6890
|
+
placeholder="Placeholder"
|
|
6891
|
+
aria-label="Editor"
|
|
6892
|
+
enableRichText
|
|
6893
|
+
defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href='https://example.com'>Links</a> are also supported.</p><br/><p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>" />;`},{id:"core-miscellaneous-editor-rich-text--controlled",name:"Controlled",snippet:`const Controlled = () => {
|
|
6886
6894
|
const [value, setValue] = React.useState(args.value);
|
|
6887
6895
|
|
|
6888
6896
|
return (
|
|
6889
6897
|
<Editor
|
|
6890
6898
|
placeholder="Type something..."
|
|
6891
6899
|
aria-label="Editor"
|
|
6892
|
-
enableRichText
|
|
6893
|
-
spellCheck={false}
|
|
6900
|
+
enableRichText
|
|
6894
6901
|
value={value}
|
|
6895
6902
|
onChange={(newValue) => {
|
|
6896
6903
|
setValue(newValue);
|
|
6897
6904
|
}} />
|
|
6898
6905
|
);
|
|
6899
|
-
};`},{id:"core-miscellaneous-editor
|
|
6906
|
+
};`},{id:"core-miscellaneous-editor-rich-text--long-content",name:"Long Content",snippet:`const LongContent = () => <Editor
|
|
6907
|
+
placeholder="Placeholder"
|
|
6908
|
+
aria-label="Editor"
|
|
6909
|
+
enableRichText
|
|
6910
|
+
defaultValue={[
|
|
6911
|
+
"<p>This is a rich editor with a lot of content to exercise scrolling and overflow.</p>",
|
|
6912
|
+
"<p>It supports <b>bold</b>, <i>italic</i>, and <u>underline</u> formatting, as well as <a href='https://example.com'>links</a>.</p>",
|
|
6913
|
+
"<p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>",
|
|
6914
|
+
"<p>Supercalifragilisticexpialidociousantidisestablishmentarianismpneumonoultramicroscopicsilicovolcanoconiosis</p>",
|
|
6915
|
+
"<p><b>Bold</b> <i>italic</i> <u>underline</u> <b><i>bold italic</i></b> <b><u>bold underline</u></b> <i><u>italic underline</u></i> <b><i><u>all three</u></i></b>.</p>",
|
|
6916
|
+
"<p>Paragraph five with some more plain text content.</p>",
|
|
6917
|
+
"<p>Paragraph six with some more plain text content.</p>",
|
|
6918
|
+
"<p>Paragraph seven with some more plain text content.</p>",
|
|
6919
|
+
"<p>Paragraph eight with some more plain text content.</p>",
|
|
6920
|
+
"<p>Paragraph nine, the last paragraph of this long document.</p>",
|
|
6921
|
+
].join("")} />;`},{id:"core-miscellaneous-editor-rich-text--with-placeholder",name:"With Placeholder",snippet:'const WithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor-rich-text--variants",name:"Variants",snippet:`const Variants = () => <Box display="flex" gap="3xl" flexDirection="column">
|
|
6900
6922
|
<div style={{ width: 260 }}>
|
|
6901
6923
|
<Editor
|
|
6902
6924
|
placeholder="Type something..."
|
|
6903
6925
|
aria-label="Editor"
|
|
6904
|
-
enableRichText={false}
|
|
6905
6926
|
variant="minimal"
|
|
6906
6927
|
spellCheck={false}
|
|
6907
|
-
|
|
6928
|
+
enableRichText
|
|
6929
|
+
defaultValue="This is a rich editor"
|
|
6908
6930
|
isInline={false} />
|
|
6909
6931
|
</div>
|
|
6910
6932
|
<Separator />
|
|
@@ -6912,37 +6934,19 @@ saveOnEnter?: boolean
|
|
|
6912
6934
|
<Editor
|
|
6913
6935
|
placeholder="Type something..."
|
|
6914
6936
|
aria-label="Editor"
|
|
6915
|
-
enableRichText={false}
|
|
6916
6937
|
variant="minimal"
|
|
6917
6938
|
spellCheck={false}
|
|
6918
|
-
|
|
6939
|
+
enableRichText
|
|
6940
|
+
defaultValue="This is a rich editor" />
|
|
6919
6941
|
</div>
|
|
6920
|
-
</Box>;`},{id:"core-miscellaneous-editor--
|
|
6921
|
-
placeholder="Placeholder"
|
|
6922
|
-
aria-label="Editor"
|
|
6923
|
-
defaultValue="This is a minimal editor\\nwith multiple lines of text \\n\\nSome more text." />;`},{id:"core-miscellaneous-editor--plain-text-minimal-disabled",name:"Plain Text Minimal Disabled",snippet:'const PlainTextMinimalDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-minimal-save-disabled",name:"Plain Text Minimal Save Disabled",snippet:'const PlainTextMinimalSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--plain-text-variants",name:"Plain Text Variants",snippet:'const PlainTextVariants = () => <Editor placeholder="Placeholder" aria-label="Editor" variant={undefined} />;'},{id:"core-miscellaneous-editor--plain-text-disabled",name:"Plain Text Disabled",snippet:'const PlainTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-auto-focus",name:"Plain Text Auto Focus",snippet:'const PlainTextAutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor--rich-text",name:"Rich Text",snippet:`const RichText = () => <Editor
|
|
6924
|
-
placeholder="Placeholder"
|
|
6925
|
-
aria-label="Editor"
|
|
6926
|
-
enableRichText
|
|
6927
|
-
defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href='https://example.com'>Links</a> are also supported.</p><br/><p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>" />;`},{id:"core-miscellaneous-editor--rich-text-with-placeholder",name:"Rich Text With Placeholder",snippet:'const RichTextWithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor--rich-text-variants",name:"Rich Text Variants",snippet:`const RichTextVariants = () => <Editor
|
|
6928
|
-
placeholder="Placeholder"
|
|
6929
|
-
aria-label="Editor"
|
|
6930
|
-
enableRichText
|
|
6931
|
-
defaultValue="This is a rich editor" />;`},{id:"core-miscellaneous-editor--rich-text-disabled",name:"Rich Text Disabled",snippet:'const RichTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--rich-text-save-disabled",name:"Rich Text Save Disabled",snippet:'const RichTextSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--rich-text-auto-focus",name:"Rich Text Auto Focus",error:{name:"SyntaxError",message:`Expected render to be an arrow function or function expression
|
|
6932
|
-
172 |
|
|
6933
|
-
173 | export const RichTextAutoFocus: Story = {
|
|
6934
|
-
> 174 | render: PlainTextAutoFocus.render,
|
|
6935
|
-
| ^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
6936
|
-
175 | args: {
|
|
6937
|
-
176 | ...RichText.args,
|
|
6938
|
-
177 | autoFocus: true,`}},{id:"core-miscellaneous-editor--rich-text-mentions",name:"Rich Text Mentions",snippet:`const RichTextMentions = () => <Editor
|
|
6942
|
+
</Box>;`},{id:"core-miscellaneous-editor-rich-text--disabled",name:"Disabled",snippet:'const Disabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor-rich-text--save-disabled",name:"Save Disabled",snippet:'const SaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor-rich-text--auto-focus",name:"Auto Focus",snippet:'const AutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor-rich-text--mentions",name:"Mentions",snippet:`const Mentions = () => <Editor
|
|
6939
6943
|
placeholder="Placeholder"
|
|
6940
6944
|
aria-label="Editor"
|
|
6941
6945
|
defaultValue="Mentioning <span data-user-id='john-doe'>John Doe</span>."
|
|
6942
|
-
mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor
|
|
6946
|
+
mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor-rich-text--mentions-max-suggestions",name:"Mentions Max Suggestions",snippet:`const MentionsMaxSuggestions = () => <Editor
|
|
6943
6947
|
placeholder="Placeholder"
|
|
6944
6948
|
aria-label="Editor"
|
|
6945
|
-
maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
|
|
6949
|
+
maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor-rich-text--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
|
|
6946
6950
|
placeholder="Placeholder"
|
|
6947
6951
|
aria-label="Editor"
|
|
6948
6952
|
footerButtons={[
|
|
@@ -6956,104 +6960,50 @@ saveOnEnter?: boolean
|
|
|
6956
6960
|
},
|
|
6957
6961
|
},
|
|
6958
6962
|
},
|
|
6959
|
-
]} />;`},{id:"core-miscellaneous-editor--
|
|
6960
|
-
const editorHandleRef = React.useRef<EditorHandle>(null);
|
|
6961
|
-
|
|
6962
|
-
const [value, setValue] = React.useState(2);
|
|
6963
|
-
|
|
6964
|
-
return (
|
|
6965
|
-
<>
|
|
6966
|
-
<Box display="flex" gap="md" paddingBlockEnd="md">
|
|
6967
|
-
<NumberInput
|
|
6968
|
-
label="Caret position"
|
|
6969
|
-
minValue={0}
|
|
6970
|
-
maxValue={args.value?.length ?? 0}
|
|
6971
|
-
value={value}
|
|
6972
|
-
onChange={setValue} />
|
|
6973
|
-
<Box display="flex" alignItems="flex-end">
|
|
6974
|
-
<ActionButton
|
|
6975
|
-
label="Set caret"
|
|
6976
|
-
onPress={() => {
|
|
6977
|
-
editorHandleRef.current?.setCaretPosition(value);
|
|
6978
|
-
}} />
|
|
6979
|
-
</Box>
|
|
6980
|
-
</Box>
|
|
6981
|
-
<Editor
|
|
6982
|
-
editorHandle={editorHandleRef}
|
|
6983
|
-
placeholder="Type something..."
|
|
6984
|
-
aria-label="Editor"
|
|
6985
|
-
enableRichText={false}
|
|
6986
|
-
spellCheck={false}
|
|
6987
|
-
value="This is a some text" />
|
|
6988
|
-
</>
|
|
6989
|
-
);
|
|
6990
|
-
};`},{id:"core-miscellaneous-editor--auto-focus-at-start",name:"Auto Focus At Start",snippet:`const AutoFocusAtStart = () => <Editor
|
|
6991
|
-
placeholder="Placeholder"
|
|
6992
|
-
aria-label="Editor"
|
|
6993
|
-
autoFocus="start"
|
|
6994
|
-
defaultValue="Caret will be at the start"
|
|
6995
|
-
enableRichText={false} />;`},{id:"core-miscellaneous-editor--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
|
|
6996
|
-
placeholder="Placeholder"
|
|
6997
|
-
aria-label="Editor"
|
|
6998
|
-
autoFocus="end"
|
|
6999
|
-
defaultValue="Caret will be at the end"
|
|
7000
|
-
enableRichText={false} />;`},{id:"core-miscellaneous-editor--rich-text-auto-focus-at-end",name:"Rich Text Auto Focus At End",snippet:`const RichTextAutoFocusAtEnd = () => <Editor
|
|
6963
|
+
]} />;`},{id:"core-miscellaneous-editor-rich-text--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
|
|
7001
6964
|
placeholder="Placeholder"
|
|
7002
6965
|
aria-label="Editor"
|
|
7003
6966
|
autoFocus="end"
|
|
7004
6967
|
defaultValue="Caret will be at the end"
|
|
7005
|
-
enableRichText />;`},{id:"core-miscellaneous-editor
|
|
6968
|
+
enableRichText />;`},{id:"core-miscellaneous-editor-rich-text--with-cancel",name:"With Cancel",snippet:`const WithCancel = () => <Editor
|
|
7006
6969
|
placeholder="Placeholder"
|
|
7007
6970
|
aria-label="Editor"
|
|
7008
6971
|
onCancel={() => {}}
|
|
7009
|
-
defaultValue="Some text to cancel" />;`},{id:"core-miscellaneous-editor
|
|
7010
|
-
placeholder="Placeholder"
|
|
7011
|
-
aria-label="Editor"
|
|
7012
|
-
onCancel={() => {}}
|
|
7013
|
-
defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-clear-on-save",name:"Plain Text Clear On Save",snippet:`const PlainTextClearOnSave = () => <Editor
|
|
6972
|
+
defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-save",name:"Clear On Save",snippet:`const ClearOnSave = () => <Editor
|
|
7014
6973
|
placeholder="Placeholder"
|
|
7015
6974
|
aria-label="Editor"
|
|
7016
6975
|
clearOnSave
|
|
7017
|
-
defaultValue="Text that clears on save" />;`},{id:"core-miscellaneous-editor
|
|
6976
|
+
defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-cancel",name:"Clear On Cancel",snippet:`const ClearOnCancel = () => <Editor
|
|
7018
6977
|
placeholder="Placeholder"
|
|
7019
6978
|
aria-label="Editor"
|
|
7020
6979
|
clearOnCancel
|
|
7021
6980
|
onCancel={() => {}}
|
|
7022
|
-
defaultValue="Text that clears on cancel" />;`},{id:"core-miscellaneous-editor
|
|
7023
|
-
placeholder="Placeholder"
|
|
7024
|
-
aria-label="Editor"
|
|
7025
|
-
clearOnSave
|
|
7026
|
-
defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor--rich-text-clear-on-cancel",name:"Rich Text Clear On Cancel",snippet:`const RichTextClearOnCancel = () => <Editor
|
|
7027
|
-
placeholder="Placeholder"
|
|
7028
|
-
aria-label="Editor"
|
|
7029
|
-
clearOnCancel
|
|
7030
|
-
onCancel={() => {}}
|
|
7031
|
-
defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-save-on-enter",name:"Plain Text Save On Enter",snippet:`const PlainTextSaveOnEnter = () => <Editor
|
|
7032
|
-
placeholder="Placeholder"
|
|
7033
|
-
aria-label="Editor"
|
|
7034
|
-
saveOnEnter
|
|
7035
|
-
defaultValue="Press Enter to save" />;`},{id:"core-miscellaneous-editor--rich-text-save-on-enter",name:"Rich Text Save On Enter",snippet:`const RichTextSaveOnEnter = () => <Editor
|
|
6981
|
+
defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--save-on-enter",name:"Save On Enter",snippet:`const SaveOnEnter = () => <Editor
|
|
7036
6982
|
placeholder="Placeholder"
|
|
7037
6983
|
aria-label="Editor"
|
|
7038
6984
|
saveOnEnter
|
|
7039
|
-
defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor
|
|
6985
|
+
defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--not-inline",name:"Not Inline",snippet:`const NotInline = () => <Editor
|
|
7040
6986
|
placeholder="Placeholder"
|
|
7041
6987
|
aria-label="Editor"
|
|
7042
6988
|
isInline={false}
|
|
7043
|
-
defaultValue="Non-inline
|
|
7044
|
-
|
|
7045
|
-
aria-label="Editor"
|
|
7046
|
-
isInline={false}
|
|
7047
|
-
defaultValue="<p>Non-inline rich text editor</p>" />;`},{id:"core-miscellaneous-editor--plain-text-default-save-disabled",name:"Plain Text Default Save Disabled",snippet:`const PlainTextDefaultSaveDisabled = () => <Editor
|
|
7048
|
-
placeholder="Placeholder"
|
|
7049
|
-
aria-label="Editor"
|
|
7050
|
-
isSaveDisabled
|
|
7051
|
-
defaultValue="Save is disabled" />;`}],implementation:`import React from "react";
|
|
6989
|
+
defaultValue="<p>Non-inline rich text editor</p>" />;`}],implementation:`import { BoldIcon, ItalicIcon, UnderlineIcon } from "@baseline-ui/icons/16";
|
|
6990
|
+
import React from "react";
|
|
7052
6991
|
|
|
7053
6992
|
import { ActionButton } from "../../ActionButton";
|
|
7054
6993
|
import { Box } from "../../Box";
|
|
6994
|
+
import { ColorInput } from "../../ColorInput";
|
|
6995
|
+
import { Text } from "../../Text";
|
|
6996
|
+
import { ToggleIconButton } from "../../ToggleIconButton";
|
|
7055
6997
|
import { Editor } from "../Editor";
|
|
7056
|
-
|
|
6998
|
+
import {
|
|
6999
|
+
EditorProvider,
|
|
7000
|
+
useEditable,
|
|
7001
|
+
useEditor,
|
|
7002
|
+
useEditorContext,
|
|
7003
|
+
} from "../headless";
|
|
7004
|
+
|
|
7005
|
+
import type { ColorPreset } from "../../ColorInput";
|
|
7006
|
+
import type { MarkName } from "../core/commands";
|
|
7057
7007
|
import type { EditorHandle, EditorProps } from "../Editor.types";
|
|
7058
7008
|
|
|
7059
7009
|
export const EditorWithSetCaretButton = ({
|
|
@@ -7108,6 +7058,309 @@ export const EditorAutoFocusOnMount: React.FC<EditorProps> = (args) => {
|
|
|
7108
7058
|
);
|
|
7109
7059
|
};
|
|
7110
7060
|
|
|
7061
|
+
export const EditorControlledRichText = ({
|
|
7062
|
+
onChange,
|
|
7063
|
+
}: Pick<EditorProps, "onChange">) => {
|
|
7064
|
+
const [value, setValue] = React.useState("<p>First</p>");
|
|
7065
|
+
|
|
7066
|
+
return (
|
|
7067
|
+
<>
|
|
7068
|
+
<button
|
|
7069
|
+
onClick={() => {
|
|
7070
|
+
setValue("<p>Updated <b>externally</b></p>");
|
|
7071
|
+
}}
|
|
7072
|
+
data-testid="set-value"
|
|
7073
|
+
>
|
|
7074
|
+
Set value
|
|
7075
|
+
</button>
|
|
7076
|
+
<Editor
|
|
7077
|
+
enableRichText={true}
|
|
7078
|
+
value={value}
|
|
7079
|
+
onChange={(v) => {
|
|
7080
|
+
setValue(v);
|
|
7081
|
+
onChange?.(v);
|
|
7082
|
+
}}
|
|
7083
|
+
/>
|
|
7084
|
+
</>
|
|
7085
|
+
);
|
|
7086
|
+
};
|
|
7087
|
+
|
|
7088
|
+
export const EditorControlledRichTextRejectsEdits = ({
|
|
7089
|
+
onChange,
|
|
7090
|
+
}: Pick<EditorProps, "onChange">) => (
|
|
7091
|
+
<Editor enableRichText={true} value="<p>Locked</p>" onChange={onChange} />
|
|
7092
|
+
);
|
|
7093
|
+
|
|
7094
|
+
/**
|
|
7095
|
+
* Legacy usage: \`value\` WITHOUT \`onChange\` in rich text mode. Must behave
|
|
7096
|
+
* like \`defaultValue\` \u2014 later \`value\` updates are ignored (backwards
|
|
7097
|
+
* compatibility).
|
|
7098
|
+
*/
|
|
7099
|
+
export const EditorLegacyRichTextValue = () => {
|
|
7100
|
+
const [value, setValue] = React.useState("<p>First</p>");
|
|
7101
|
+
|
|
7102
|
+
return (
|
|
7103
|
+
<>
|
|
7104
|
+
<button
|
|
7105
|
+
onClick={() => {
|
|
7106
|
+
setValue("<p>Replaced</p>");
|
|
7107
|
+
}}
|
|
7108
|
+
data-testid="set-value"
|
|
7109
|
+
>
|
|
7110
|
+
Set value
|
|
7111
|
+
</button>
|
|
7112
|
+
<Editor enableRichText={true} value={value} />
|
|
7113
|
+
</>
|
|
7114
|
+
);
|
|
7115
|
+
};
|
|
7116
|
+
|
|
7117
|
+
/**
|
|
7118
|
+
* Demonstrates the headless API: a fully custom editor built from \`useEditor\`
|
|
7119
|
+
* + \`useEditable\` on a plain \`<div>\`, with a \`Box\`-laid-out toolbar of
|
|
7120
|
+
* \`ActionButton\`s reading the shared handle via \`useEditorContext\`. Rendered as
|
|
7121
|
+
* two independent instances to prove per-editor isolation (each
|
|
7122
|
+
* \`EditorProvider\` scopes its own handle).
|
|
7123
|
+
*/
|
|
7124
|
+
const HeadlessMarkButton: React.FC<{
|
|
7125
|
+
markName: MarkName;
|
|
7126
|
+
label: string;
|
|
7127
|
+
testId: string;
|
|
7128
|
+
}> = ({ markName, label, testId }) => {
|
|
7129
|
+
const editor = useEditorContext();
|
|
7130
|
+
const isActive = editor.isMarkActive(markName);
|
|
7131
|
+
|
|
7132
|
+
return (
|
|
7133
|
+
<ActionButton
|
|
7134
|
+
size="sm"
|
|
7135
|
+
variant={isActive ? "primary" : "secondary"}
|
|
7136
|
+
label={label}
|
|
7137
|
+
data-testid={testId}
|
|
7138
|
+
aria-pressed={isActive}
|
|
7139
|
+
// Keep the selection in the editable so the toggle applies to it.
|
|
7140
|
+
preventFocusOnPress={true}
|
|
7141
|
+
onPress={() => {
|
|
7142
|
+
editor.toggleMark(markName);
|
|
7143
|
+
editor.focus();
|
|
7144
|
+
}}
|
|
7145
|
+
/>
|
|
7146
|
+
);
|
|
7147
|
+
};
|
|
7148
|
+
|
|
7149
|
+
const HEADLESS_MARK_ITEMS = [
|
|
7150
|
+
{ id: "bold", label: "Bold", icon: BoldIcon },
|
|
7151
|
+
{ id: "italic", label: "Italic", icon: ItalicIcon },
|
|
7152
|
+
{ id: "underline", label: "Underline", icon: UnderlineIcon },
|
|
7153
|
+
] as const;
|
|
7154
|
+
|
|
7155
|
+
const HEADLESS_TEXT_COLOR = "#ac0000";
|
|
7156
|
+
const HEADLESS_BACKGROUND_COLOR = "#ffff00";
|
|
7157
|
+
|
|
7158
|
+
const HeadlessMarkButtons: React.FC<{ idPrefix: string }> = ({ idPrefix }) => {
|
|
7159
|
+
const editor = useEditorContext();
|
|
7160
|
+
|
|
7161
|
+
return (
|
|
7162
|
+
<Box display="flex" gap="xs">
|
|
7163
|
+
{HEADLESS_MARK_ITEMS.map(({ id, label, icon }) => (
|
|
7164
|
+
<ToggleIconButton
|
|
7165
|
+
key={id}
|
|
7166
|
+
size="sm"
|
|
7167
|
+
variant="toolbar"
|
|
7168
|
+
icon={icon}
|
|
7169
|
+
aria-label={label}
|
|
7170
|
+
data-testid={\`\${idPrefix}-\${id}\`}
|
|
7171
|
+
isSelected={editor.isMarkActive(id)}
|
|
7172
|
+
preventFocusOnPress={true}
|
|
7173
|
+
onChange={() => {
|
|
7174
|
+
editor.toggleMark(id);
|
|
7175
|
+
editor.focus();
|
|
7176
|
+
}}
|
|
7177
|
+
/>
|
|
7178
|
+
))}
|
|
7179
|
+
</Box>
|
|
7180
|
+
);
|
|
7181
|
+
};
|
|
7182
|
+
|
|
7183
|
+
const HEADLESS_TEXT_COLOR_PRESETS: ColorPreset[] = [
|
|
7184
|
+
{ label: "Crimson", color: HEADLESS_TEXT_COLOR },
|
|
7185
|
+
{ label: "Ink", color: "#1a1a2e" },
|
|
7186
|
+
{ label: "Ocean", color: "#0050c8" },
|
|
7187
|
+
];
|
|
7188
|
+
|
|
7189
|
+
const HEADLESS_BACKGROUND_COLOR_PRESETS: ColorPreset[] = [
|
|
7190
|
+
{ label: "Sunshine", color: HEADLESS_BACKGROUND_COLOR },
|
|
7191
|
+
{ label: "Mint", color: "#c8f5d2" },
|
|
7192
|
+
];
|
|
7193
|
+
|
|
7194
|
+
/**
|
|
7195
|
+
* A presets-only \`ColorInput\` wired into the headless editor. Mirrors the
|
|
7196
|
+
* built-in EditorToolbar's color handling: capture the selection before the
|
|
7197
|
+
* popover steals focus, then restore it (Firefox collapses the contenteditable
|
|
7198
|
+
* selection on refocus) before applying the mark. Reading the value back from
|
|
7199
|
+
* \`selectionState.marks\` keeps the trigger swatch in sync with the caret.
|
|
7200
|
+
*/
|
|
7201
|
+
const HeadlessColorInput: React.FC<{
|
|
7202
|
+
idPrefix: string;
|
|
7203
|
+
colorKey: "color" | "backgroundColor";
|
|
7204
|
+
label: string;
|
|
7205
|
+
presets: ColorPreset[];
|
|
7206
|
+
}> = ({ idPrefix, colorKey, label, presets }) => {
|
|
7207
|
+
const editor = useEditorContext();
|
|
7208
|
+
const color =
|
|
7209
|
+
colorKey === "color"
|
|
7210
|
+
? editor.selectionState.marks.color
|
|
7211
|
+
: editor.selectionState.marks.backgroundColor;
|
|
7212
|
+
const savedRangeRef = React.useRef<typeof editor.selectionState.range>(null);
|
|
7213
|
+
|
|
7214
|
+
return (
|
|
7215
|
+
<Box data-testid={\`\${idPrefix}-\${colorKey}\`}>
|
|
7216
|
+
<ColorInput
|
|
7217
|
+
aria-label={label}
|
|
7218
|
+
presets={presets}
|
|
7219
|
+
includePicker={false}
|
|
7220
|
+
allowRemoval={true}
|
|
7221
|
+
placement="bottom start"
|
|
7222
|
+
value={color ?? null}
|
|
7223
|
+
onTriggerPress={() => {
|
|
7224
|
+
savedRangeRef.current = editor.selectionState.range;
|
|
7225
|
+
}}
|
|
7226
|
+
onChange={(next) => {
|
|
7227
|
+
// Defer so the popover finishes closing, then restore the captured
|
|
7228
|
+
// selection before applying \u2014 focus alone is not enough on Firefox.
|
|
7229
|
+
setTimeout(() => {
|
|
7230
|
+
if (savedRangeRef.current) {
|
|
7231
|
+
editor.core.select(savedRangeRef.current);
|
|
7232
|
+
}
|
|
7233
|
+
editor.setMark(colorKey, next ? next.toString("rgba") : undefined);
|
|
7234
|
+
}, 0);
|
|
7235
|
+
}}
|
|
7236
|
+
/>
|
|
7237
|
+
</Box>
|
|
7238
|
+
);
|
|
7239
|
+
};
|
|
7240
|
+
|
|
7241
|
+
const HeadlessCustomEditorInstance: React.FC<{
|
|
7242
|
+
idPrefix: string;
|
|
7243
|
+
label: string;
|
|
7244
|
+
defaultValue?: string;
|
|
7245
|
+
}> = ({ idPrefix, label, defaultValue }) => {
|
|
7246
|
+
const editor = useEditor({ defaultValue });
|
|
7247
|
+
const { editableProps } = useEditable(editor);
|
|
7248
|
+
|
|
7249
|
+
return (
|
|
7250
|
+
<EditorProvider editor={editor}>
|
|
7251
|
+
<Box
|
|
7252
|
+
display="flex"
|
|
7253
|
+
flexDirection="column"
|
|
7254
|
+
gap="md"
|
|
7255
|
+
padding="lg"
|
|
7256
|
+
borderRadius="lg"
|
|
7257
|
+
backgroundColor="background.primary.subtle"
|
|
7258
|
+
style={{ width: 320 }}
|
|
7259
|
+
>
|
|
7260
|
+
<Text type="helper" size="sm" color="text.secondary">
|
|
7261
|
+
{label}
|
|
7262
|
+
</Text>
|
|
7263
|
+
<Box display="flex" gap="xs" alignItems="center">
|
|
7264
|
+
<HeadlessMarkButtons idPrefix={idPrefix} />
|
|
7265
|
+
<HeadlessColorInput
|
|
7266
|
+
idPrefix={idPrefix}
|
|
7267
|
+
colorKey="color"
|
|
7268
|
+
label="Text color"
|
|
7269
|
+
presets={HEADLESS_TEXT_COLOR_PRESETS}
|
|
7270
|
+
/>
|
|
7271
|
+
<HeadlessColorInput
|
|
7272
|
+
idPrefix={idPrefix}
|
|
7273
|
+
colorKey="backgroundColor"
|
|
7274
|
+
label="Background color"
|
|
7275
|
+
presets={HEADLESS_BACKGROUND_COLOR_PRESETS}
|
|
7276
|
+
/>
|
|
7277
|
+
</Box>
|
|
7278
|
+
<Box
|
|
7279
|
+
{...editableProps}
|
|
7280
|
+
data-testid={\`\${idPrefix}-editable\`}
|
|
7281
|
+
aria-label={\`\${idPrefix} editor\`}
|
|
7282
|
+
padding="lg"
|
|
7283
|
+
borderRadius="lg"
|
|
7284
|
+
backgroundColor="background.secondary.subtle"
|
|
7285
|
+
color="text.primary"
|
|
7286
|
+
typography="body.md.regular"
|
|
7287
|
+
// \`white-space: pre-wrap\` keeps significant whitespace (leading,
|
|
7288
|
+
// trailing, and runs of spaces) visible in the contenteditable \u2014 the
|
|
7289
|
+
// built-in <Editor> sets the same on its editing surface. Without it,
|
|
7290
|
+
// a trailing space collapses whenever the model re-renders (e.g. while
|
|
7291
|
+
// a color mark is active), so the space appears not to be inserted.
|
|
7292
|
+
style={{ minHeight: 100, whiteSpace: "pre-wrap" }}
|
|
7293
|
+
/>
|
|
7294
|
+
</Box>
|
|
7295
|
+
</EditorProvider>
|
|
7296
|
+
);
|
|
7297
|
+
};
|
|
7298
|
+
|
|
7299
|
+
export const HeadlessCustomEditor: React.FC = () => {
|
|
7300
|
+
return (
|
|
7301
|
+
<Box display="flex" gap="2xl" flexDirection="column">
|
|
7302
|
+
<HeadlessCustomEditorInstance
|
|
7303
|
+
idPrefix="headless-a"
|
|
7304
|
+
label="Unformatted rich text"
|
|
7305
|
+
defaultValue="<p>Unformatted rich text preview with no active marks.</p>"
|
|
7306
|
+
/>
|
|
7307
|
+
<HeadlessCustomEditorInstance
|
|
7308
|
+
idPrefix="headless-b"
|
|
7309
|
+
label="Formatted rich text"
|
|
7310
|
+
defaultValue={\`<p><b>Bold text</b>, <i>italic text</i>, <u>underlined text</u>, and <span style="color:\${HEADLESS_TEXT_COLOR};background-color:\${HEADLESS_BACKGROUND_COLOR}">colored text</span> are visible here.</p>\`}
|
|
7311
|
+
/>
|
|
7312
|
+
</Box>
|
|
7313
|
+
);
|
|
7314
|
+
};
|
|
7315
|
+
|
|
7316
|
+
/**
|
|
7317
|
+
* Headless editor with the built-in formatting/history shortcuts disabled
|
|
7318
|
+
* (\`keyboardShortcuts: false\`). Ctrl/Cmd+B should NOT toggle bold, but the
|
|
7319
|
+
* custom toolbar button still works.
|
|
7320
|
+
*/
|
|
7321
|
+
export const HeadlessEditorNoShortcuts: React.FC = () => {
|
|
7322
|
+
const editor = useEditor({
|
|
7323
|
+
defaultValue: "<p>No shortcuts</p>",
|
|
7324
|
+
keyboardShortcuts: false,
|
|
7325
|
+
});
|
|
7326
|
+
const { editableProps } = useEditable(editor);
|
|
7327
|
+
|
|
7328
|
+
return (
|
|
7329
|
+
<EditorProvider editor={editor}>
|
|
7330
|
+
<Box
|
|
7331
|
+
display="flex"
|
|
7332
|
+
flexDirection="column"
|
|
7333
|
+
gap="md"
|
|
7334
|
+
padding="lg"
|
|
7335
|
+
borderRadius="lg"
|
|
7336
|
+
backgroundColor="background.primary.subtle"
|
|
7337
|
+
borderWidth={1}
|
|
7338
|
+
borderStyle="solid"
|
|
7339
|
+
borderColor="border.medium"
|
|
7340
|
+
style={{ width: 320 }}
|
|
7341
|
+
>
|
|
7342
|
+
<HeadlessMarkButton
|
|
7343
|
+
markName="bold"
|
|
7344
|
+
label="Bold"
|
|
7345
|
+
testId="noshortcut-bold"
|
|
7346
|
+
/>
|
|
7347
|
+
<Box
|
|
7348
|
+
{...editableProps}
|
|
7349
|
+
data-testid="noshortcut-editable"
|
|
7350
|
+
aria-label="no shortcut editor"
|
|
7351
|
+
padding="md"
|
|
7352
|
+
borderRadius="md"
|
|
7353
|
+
backgroundColor="background.secondary.subtle"
|
|
7354
|
+
borderWidth={1}
|
|
7355
|
+
borderStyle="solid"
|
|
7356
|
+
borderColor="border.medium"
|
|
7357
|
+
style={{ minHeight: 72 }}
|
|
7358
|
+
/>
|
|
7359
|
+
</Box>
|
|
7360
|
+
</EditorProvider>
|
|
7361
|
+
);
|
|
7362
|
+
};
|
|
7363
|
+
|
|
7111
7364
|
export const EditorWithAutoFocusAndCaretAtEnd = ({
|
|
7112
7365
|
initialText,
|
|
7113
7366
|
onChange,
|
|
@@ -8243,7 +8496,7 @@ export const PopoverWithFrameBoundaryExample: React.FC<{
|
|
|
8243
8496
|
</FrameProvider>
|
|
8244
8497
|
</Box>
|
|
8245
8498
|
);
|
|
8246
|
-
};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"
|
|
8499
|
+
};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
|
|
8247
8500
|
|
|
8248
8501
|
* Draw on the canvas with your mouse or pointer
|
|
8249
8502
|
* Undo and redo your drawings via keyboard shortcuts
|
|
@@ -8609,7 +8862,7 @@ export const TrackedControlledFreehandCanvas = ({
|
|
|
8609
8862
|
}}
|
|
8610
8863
|
/>
|
|
8611
8864
|
);
|
|
8612
|
-
};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"
|
|
8865
|
+
};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
|
|
8613
8866
|
|
|
8614
8867
|
* **Item Selection**: Single or multiple selections with optional checkboxes.
|
|
8615
8868
|
* **Interactive Children**: Supports buttons, checkboxes, and menus within list items.
|
|
@@ -9060,7 +9313,7 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
|
|
|
9060
9313
|
</button>
|
|
9061
9314
|
</>
|
|
9062
9315
|
);
|
|
9063
|
-
};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"
|
|
9316
|
+
};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.",documentation:'`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.\n\n```jsx\nimport { Group, ActionButton } from "../../utils";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n```\n```',props:`interface GroupProps {
|
|
9064
9317
|
/**
|
|
9065
9318
|
* The unique identifier for the block. This is used to identify the block in
|
|
9066
9319
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -9203,7 +9456,7 @@ export const LocaleStringExample: React.FC<{
|
|
|
9203
9456
|
{formatter.formatMessage("greeting", { name })}
|
|
9204
9457
|
</div>
|
|
9205
9458
|
);
|
|
9206
|
-
};`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a
|
|
9459
|
+
};`},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.
|
|
9207
9460
|
|
|
9208
9461
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
9209
9462
|
* Labeling support for screen readers (aria-describedby)
|
|
@@ -9448,7 +9701,7 @@ accept?: any
|
|
|
9448
9701
|
ImageGalleryExample,
|
|
9449
9702
|
Text,
|
|
9450
9703
|
Virtualizer,
|
|
9451
|
-
} from "@baseline-ui/core";`,description:"
|
|
9704
|
+
} from "@baseline-ui/core";`,description:"`ImageGallery` renders a grid of selectable, reorderable thumbnails with single or multiple selection and optional deletion. Use it to manage an ordered collection of images, such as a photo album, page list, or asset picker.",documentation:`\`ImageGallery\` renders a grid of selectable, reorderable thumbnails with single or multiple selection and optional deletion. Use it to manage an ordered collection of images, such as a photo album, page list, or asset picker.
|
|
9452
9705
|
|
|
9453
9706
|
* An interactive, feature-rich display platform for image content
|
|
9454
9707
|
* Mouse, touch, and keyboard interaction support
|
|
@@ -10094,7 +10347,7 @@ export function RTLImageGalleryExample(
|
|
|
10094
10347
|
<ImageGallery {...props} />
|
|
10095
10348
|
</I18nProvider>
|
|
10096
10349
|
);
|
|
10097
|
-
}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert`
|
|
10350
|
+
}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.",documentation:`\`InlineAlert\` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.
|
|
10098
10351
|
|
|
10099
10352
|
* Exposed to assistive technology with \`role="alert"\`.
|
|
10100
10353
|
* Supports semantic variants for success, warning, error, and informational messages.
|
|
@@ -10879,7 +11132,7 @@ elementProps?: {
|
|
|
10879
11132
|
</div>
|
|
10880
11133
|
</div>
|
|
10881
11134
|
);
|
|
10882
|
-
};`}],implementation:""},similarTo:["Toast"],figmaUrl:null},InlineToolbar:{id:"core-overlays-inlinetoolbar",breadcrumb:"Core/Overlays/InlineToolbar",importStatement:'import { ActionButton, Box, InlineToolbar, Text } from "@baseline-ui/core";',description:"
|
|
11135
|
+
};`}],implementation:""},similarTo:["Toast"],figmaUrl:null},InlineToolbar:{id:"core-overlays-inlinetoolbar",breadcrumb:"Core/Overlays/InlineToolbar",importStatement:'import { ActionButton, Box, InlineToolbar, Text } from "@baseline-ui/core";',description:"`InlineToolbar` is a floating toolbar that appears next to the current text selection with contextual formatting actions. Use it to expose quick edits, such as bold, link, or delete, directly on selected content without leaving the editing surface.",documentation:`\`InlineToolbar\` is a floating toolbar that appears next to the current text selection with contextual formatting actions. Use it to expose quick edits, such as bold, link, or delete, directly on selected content without leaving the editing surface.
|
|
10883
11136
|
|
|
10884
11137
|
* Automatically detects the current selection and opens in the correct position
|
|
10885
11138
|
* Supports keyboard navigation
|
|
@@ -11081,7 +11334,7 @@ export const InlineToolbarExample = ({
|
|
|
11081
11334
|
)}
|
|
11082
11335
|
</InlineToolbar>
|
|
11083
11336
|
);
|
|
11084
|
-
};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"
|
|
11337
|
+
};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"`Kbd` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.",documentation:`\`Kbd\` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.
|
|
11085
11338
|
|
|
11086
11339
|
* Keycap-styled visual appearance
|
|
11087
11340
|
* OS-aware shortcut conversion (Ctrl becomes Cmd on Mac)
|
|
@@ -11158,7 +11411,7 @@ shouldUseSymbol?: boolean
|
|
|
11158
11411
|
<Kbd>Ctrl+Alt+Shift+Enter</Kbd>
|
|
11159
11412
|
</Box>
|
|
11160
11413
|
</Box>
|
|
11161
|
-
);`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"
|
|
11414
|
+
);`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.",documentation:'`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/">Nutrient</Link>;\n```\n\nThe `Link` component comes in three sizes: `small`, `medium`, and `large`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" size="small">\n Small link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="medium">\n Medium link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="large">\n Large link\n</Link>\n```\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/">Default link</Link>\n<Link href="https://www.nutrient.io/sdk/" variant="inline">\n Inline link\n</Link>\n```\n\nThe `Link` component can be disabled by setting the `isDisabled` prop to `true`. This will disable the link and prevent it from being clicked but will still allow keyboard navigation.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" isDisabled>\n Disabled link\n</Link>;\n```\n\nYou can also use press handlers to handle client-side actions. For example, you can use the `onPress` handler to handle a click event. In the example below, we use the `onPress` handler to create an alert. We use the `span` element instead of the `a` element to prevent the page from navigating. Proper ARIA attributes are added to the `span` element to make it accessible.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link onPress={() => alert("Link clicked")} elementType="span">\n Click me to see an alert\n</Link>;\n```\n\nThe `Link` component is rendered as an `<a>` element, so it\u2019s accessible by default. However, you can also use the `onPress` handler to handle client-side actions.\n\nSome of the accessibility features of the `Link` component are that it supports:\n\n* Mouse, keyboard, and touch interactions\n* Navigation links using `<a>` elements or client-side actions using custom handlers\n* The disabled state\n\n| Key | Function |\n| ----- | ------------------- |\n| Enter | Activates the link. |\n\n```\n```',props:`interface LinkProps {
|
|
11162
11415
|
/**
|
|
11163
11416
|
* Whether the link is disabled.
|
|
11164
11417
|
*/
|
|
@@ -11267,7 +11520,7 @@ role?: AriaRole
|
|
|
11267
11520
|
onPress={() => {
|
|
11268
11521
|
alert("Client side action");
|
|
11269
11522
|
}}
|
|
11270
|
-
elementType="span">Client side Link</Link>;`}],implementation:""},similarTo:[],figmaUrl:null},ListBox:{id:"core-collections-listbox",breadcrumb:"Core/Collections/ListBox",importStatement:'import { Box, DragAndDropListBoxExample, DynamicListBoxExample, ListBox, Text } from "@baseline-ui/core";',description:"",documentation:"",props:`interface ListBoxProps {
|
|
11523
|
+
elementType="span">Client side Link</Link>;`}],implementation:""},similarTo:[],figmaUrl:null},ListBox:{id:"core-collections-listbox",breadcrumb:"Core/Collections/ListBox",importStatement:'import { Box, DragAndDropListBoxExample, DynamicListBoxExample, ListBox, Text } from "@baseline-ui/core";',description:"`ListBox` presents a scrollable list of options that users can select with a pointer or keyboard. Use it when selection should happen inline rather than inside a dropdown, such as in a sidebar or settings panel.",documentation:"`ListBox` presents a scrollable list of options that users can select with a pointer or keyboard. Use it when selection should happen inline rather than inside a dropdown, such as in a sidebar or settings panel.",props:`interface ListBoxProps {
|
|
11271
11524
|
/**
|
|
11272
11525
|
* The unique identifier for the block. This is used to identify the block in
|
|
11273
11526
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -11916,7 +12169,7 @@ export const DynamicListBoxExample: React.FC<
|
|
|
11916
12169
|
) : null}
|
|
11917
12170
|
</Box>
|
|
11918
12171
|
);
|
|
11919
|
-
};`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"
|
|
12172
|
+
};`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"`Markdown` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.",documentation:`\`Markdown\` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.
|
|
11920
12173
|
|
|
11921
12174
|
\`\`\`jsx
|
|
11922
12175
|
import { Markdown } from "@storybook/addon-docs/blocks";
|
|
@@ -12030,7 +12283,7 @@ console.log(greet('Markdown Maverick'));
|
|
|
12030
12283
|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
|
|
12031
12284
|
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
|
|
12032
12285
|
| Row 3, Col 1 | Row 3, Col 2 | Row 3, Col 3 |
|
|
12033
|
-
\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"
|
|
12286
|
+
\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
|
|
12034
12287
|
|
|
12035
12288
|
1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
|
|
12036
12289
|
2. Selection options: The component can be configured to allow single, multiple, or no selection.
|
|
@@ -12252,7 +12505,7 @@ id: string
|
|
|
12252
12505
|
* The default message to use if the message id is not found.
|
|
12253
12506
|
*/
|
|
12254
12507
|
defaultMessage?: string
|
|
12255
|
-
}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="addSignature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"
|
|
12508
|
+
}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="addSignature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
|
|
12256
12509
|
|
|
12257
12510
|
* The content outside the modal is hidden from screen readers.
|
|
12258
12511
|
* The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.
|
|
@@ -12799,7 +13052,7 @@ value: number
|
|
|
12799
13052
|
<strong>Formatted number</strong>: <NumberFormat value={0.35} style="percent" minimumFractionDigits={2} />
|
|
12800
13053
|
</div>
|
|
12801
13054
|
);
|
|
12802
|
-
};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"
|
|
13055
|
+
};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.",documentation:'`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.\n\n* Formatting and parsing of internationalised numbers, such as decimals, percentages, currency values, and units\n* Automatically finds the numbering system being used and can parse numbers that are not in the default numbering system for the locale.\n* Checks the user\'s keystrokes as they type to make sure they are valid numbers according to the locale and numbering system.\n* Chooses an appropriate software keyboard for mobile based on the current platform and allowed values.\n* Supports rounding to a configurable number of fraction digits. Supports clamping the value between a configurable minimum and maximum and snapping to a step value.\n* Allows you to keep going up or down by pressing and holding the stepper buttons. - Allows you to go up or down by using the scroll wheel.\n* Exposed to assistive technology as a text field with a custom, locally-tailored role description using ARIA\n* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern. Gets around bugs in VoiceOver with the spinbutton role.\n* Uses an ARIA live region to make sure that value changes are announced.\n* Supports description and error message help text linked to the input via ARIA.\n\n```jsx\nimport { NumberInput } from "../../utils";\n\n<NumberInput placeholder="Placeholder" />;\n```\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n```jsx\n<NumberInput placeholder="Placeholder" variant="primary" />\n<NumberInput placeholder="Placeholder" variant="ghost" />\n```\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n```jsx\n<NumberInput placeholder="Placeholder" isReadOnly value={5} />\n```\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n```jsx\n<NumberInput placeholder="Placeholder" isDisabled value={5} />\n```\n\nThe `NumberInput` component supports the `value` prop to control the value of the input. The `onChange` event is triggered when the value changes. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.\n\n```jsx\n<NumberInput placeholder="Placeholder" value={5} onChange={console.log} />\n```\n\nTo clamp the value between a minimum and maximum value, the `minValue` and `maxValue` props are supported by the `NumberInput` component. If you provide either `maxValue` or `minValue` instead of both, you can make ranges open ended.\n\nIt is a good idea to give NumberField the valid range in advance so that it can optimise the experience. For example, on iOS, you can use a numeric keyboard instead of a full text keyboard (which requires you to enter a minus sign) when the minimum value is greater than or equal to zero.\n\n```jsx\n<NumberInput placeholder="Placeholder" minValue={0} maxValue={10} />\n```\n\nYou can use the `step` prop to snap the value to certain steps. If a `minValue` is set, the steps are worked out starting from the lowest value. For example, if `minValue` is set to 2 and step is set to 3, the valid step values are 2, 5, 8, 11, etc. If no `minValue` is set, the steps are calculated from zero in both directions if there is no `minValue`. To put it another way, so that the values are evenly divided by the step. If no step is set, any decimal value can be typed, but incrementing or decrementing the value changes it to a whole number.\n\nIf the user types a value that is between two steps and then blurs the input, the value will be snapped to the nearest step. When you increase or decrease a value, it jumps to the next step that is either higher or lower. When starting with an empty field and going up or down, the value starts at the `minValue` or `maxValue`, if they are set. If not, the number starts at 0.\n\n```jsx\n<NumberInput\n placeholder="Placeholder"\n step={3}\n defaultValue={2}\n minValue={2}\n formatOptions={{ style: "decimal", maximumFractionDigits: 1 }}\n/>\n```\n\nThe `NumberInput` component supports the `errorMessage` prop to display an error message below the input. The `isInvalid` prop can be used to indicate that the input is invalid. If the `isInvalid` prop is set to `true`, the input will be styled with an error state.\n\n```jsx\n<NumberInput placeholder="Placeholder" errorMessage="Error Message" isInvalid />\n```\n\n`NumberInput` automatically takes care of many parts of internationalisation, such as formatting and parsing numbers based on the current locale and numbering system. Also, the "increment" and "decrement" buttons have ARIA labels that are localised for each language.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-invalid] | Whether the component is invalid. |\n\n| Key | Function |\n| --------------- | ------------------------------------- |\n| <kbd>Up</kbd> | Increment the value by the step value |\n| <kbd>Down</kbd> | Decrement the value by the step value |\n\n```\n```',props:`interface NumberInputProps {
|
|
12803
13056
|
/**
|
|
12804
13057
|
* The unique identifier for the block. This is used to identify the block in
|
|
12805
13058
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -13127,9 +13380,7 @@ errorMessage?: string
|
|
|
13127
13380
|
label="Label"
|
|
13128
13381
|
labelPosition="start"
|
|
13129
13382
|
variant="ghost"
|
|
13130
|
-
placeholder="Placeholder" />;`}],implementation:""},similarTo:[],figmaUrl:null},Pagination:{id:"core-forms-pagination",breadcrumb:"Core/Forms/Pagination",importStatement:'import { I18nProvider, Pagination, VariantViewer } from "@baseline-ui/core";',description:"
|
|
13131
|
-
built on top of a number input component. It supports keyboard navigation and
|
|
13132
|
-
increment/decrement by clicking the up/down arrows.
|
|
13383
|
+
placeholder="Placeholder" />;`}],implementation:""},similarTo:[],figmaUrl:null},Pagination:{id:"core-forms-pagination",breadcrumb:"Core/Forms/Pagination",importStatement:'import { I18nProvider, Pagination, VariantViewer } from "@baseline-ui/core";',description:"`Pagination` lets users move through a numbered sequence of pages by typing a page number or stepping with arrow controls. Use it to navigate paginated content such as document pages, search results, or table rows.",documentation:`\`Pagination\` lets users move through a numbered sequence of pages by typing a page number or stepping with arrow controls. Use it to navigate paginated content such as document pages, search results, or table rows.
|
|
13133
13384
|
|
|
13134
13385
|
* Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units
|
|
13135
13386
|
* Automatically detects the numbering system used and supports parsing numbers not in the default numbering system for the locale
|
|
@@ -13354,7 +13605,7 @@ defaultValue?: any
|
|
|
13354
13605
|
PanelNestedExample,
|
|
13355
13606
|
PanelPersistentExample,
|
|
13356
13607
|
PanelVerticalExample,
|
|
13357
|
-
} from "@baseline-ui/core";`,description:"`PanelGroup`, `Panel`, and `PanelResizeHandle`
|
|
13608
|
+
} from "@baseline-ui/core";`,description:"`PanelGroup`, `Panel`, and `PanelResizeHandle` compose into resizable horizontal or vertical split layouts with draggable dividers. Use it when users need to adjust the proportions of adjacent regions, such as a sidebar next to a main content area.",documentation:`\`PanelGroup\`, \`Panel\`, and \`PanelResizeHandle\` compose into resizable horizontal or vertical split layouts with draggable dividers. Use it when users need to adjust the proportions of adjacent regions, such as a sidebar next to a main content area.
|
|
13358
13609
|
|
|
13359
13610
|
* Horizontal and vertical resizable layouts
|
|
13360
13611
|
* Supports nested layouts (horizontal inside vertical and vice versa)
|
|
@@ -14018,7 +14269,7 @@ export const PanelMaxSizeExample: FC<Omit<PanelGroupProps, "children">> = (
|
|
|
14018
14269
|
</PanelGroup>
|
|
14019
14270
|
</div>
|
|
14020
14271
|
);
|
|
14021
|
-
};`},similarTo:[],figmaUrl:null},PointPicker:{id:"core-content-pointpicker",breadcrumb:"Core/Content/PointPicker",importStatement:'import { Box, PointPicker, RichContentExample } from "@baseline-ui/core";',description:"
|
|
14272
|
+
};`},similarTo:[],figmaUrl:null},PointPicker:{id:"core-content-pointpicker",breadcrumb:"Core/Content/PointPicker",importStatement:'import { Box, PointPicker, RichContentExample } from "@baseline-ui/core";',description:"`PointPicker` lets users select an exact coordinate on a 2D surface with an optional magnifier for sub-pixel precision. Use it when picking a point on an image, canvas, or diagram where accuracy matters, such as choosing a color, anchor, or hotspot.",documentation:`\`PointPicker\` lets users select an exact coordinate on a 2D surface with an optional magnifier for sub-pixel precision. Use it when picking a point on an image, canvas, or diagram where accuracy matters, such as choosing a color, anchor, or hotspot.
|
|
14022
14273
|
|
|
14023
14274
|
\`\`\`tsx
|
|
14024
14275
|
import {
|
|
@@ -14698,7 +14949,7 @@ export const TrailingElementExample = () => {
|
|
|
14698
14949
|
PopoverWithScrollableViewportExample,
|
|
14699
14950
|
Tooltip,
|
|
14700
14951
|
VariantViewer,
|
|
14701
|
-
} from "@baseline-ui/core";`,description:"
|
|
14952
|
+
} from "@baseline-ui/core";`,description:"`Popover` is a floating overlay anchored to a trigger element that displays contextual content or actions. Use it for non-blocking surfaces like menus, form fields, or detail views that should dismiss on outside click or Escape.",documentation:`\`Popover\` is a floating overlay anchored to a trigger element that displays contextual content or actions. Use it for non-blocking surfaces like menus, form fields, or detail views that should dismiss on outside click or Escape.
|
|
14702
14953
|
|
|
14703
14954
|
* The component is accessible via keyboard. Users can open, close, and navigate through the popover using keyboard keys such as \`Tab\`, \`Enter\`, \`Escape\`, and arrow keys.
|
|
14704
14955
|
* When the popover is opened, the focus is moved to the content within the popover. When it is closed, the focus returns to the trigger element.
|
|
@@ -14873,7 +15124,7 @@ children: React.ReactNode
|
|
|
14873
15124
|
{ placement: "right top" },
|
|
14874
15125
|
],
|
|
14875
15126
|
}}
|
|
14876
|
-
defaultProps={args
|
|
15127
|
+
defaultProps={args}
|
|
14877
15128
|
/>
|
|
14878
15129
|
);`},{id:"core-overlays-popover--with-custom-target",name:"With Custom Target",snippet:`const WithCustomTarget = (args) => (
|
|
14879
15130
|
<PopoverCustomTargetExample
|
|
@@ -15994,7 +16245,7 @@ className?: string
|
|
|
15994
16245
|
* The style applied to the root element of the component.
|
|
15995
16246
|
*/
|
|
15996
16247
|
style?: React.CSSProperties
|
|
15997
|
-
}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"
|
|
16248
|
+
}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:`\`Preview\` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.
|
|
15998
16249
|
|
|
15999
16250
|
* Supports SVG, images and text
|
|
16000
16251
|
* Supports custom action buttons to interact with the preview
|
|
@@ -16214,7 +16465,7 @@ accent?: "theme" | "positive"
|
|
|
16214
16465
|
deleteAriaLabel="Delete"
|
|
16215
16466
|
addAriaLabel="Add"
|
|
16216
16467
|
isDisabled
|
|
16217
|
-
svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"
|
|
16468
|
+
svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.",documentation:'`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.\n\n* The component is exposed to the assistive technology as a progress bar.\n* It includes labels that improve accessibility and provide a visual indication of the progress.\n* It supports international number formatting of numbers.\n\n```jsx\nimport { ProgressBar } from "../../utils";\n\n<ProgressBar aria-label="Progress" value={50} />;\n```\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n```jsx\n<ProgressBar label="Label" value={50} />\n<ProgressBar label="Label" value={50} variant="success" />\n<ProgressBar label="Label" value={50} variant="error" />\n```\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\nYou can customize the number formatter by passing the `formatOptions` prop. In the example below, we are formatting the number as currency (USD).\n\nYou can customize the value label by passing the `valueLabel` prop. In the example below, we are using a custom value label that displays the value as "50 out of 100".',props:`interface ProgressBarProps {
|
|
16218
16469
|
/**
|
|
16219
16470
|
* The unique identifier for the block. This is used to identify the block in
|
|
16220
16471
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -16336,7 +16587,7 @@ errorMessage?: string
|
|
|
16336
16587
|
label="Label"
|
|
16337
16588
|
value={50}
|
|
16338
16589
|
formatOptions={{ style: "currency", currency: "USD" }}
|
|
16339
|
-
showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:""},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"
|
|
16590
|
+
showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:""},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can't report a meaningful percentage of completion.",documentation:'`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can\'t report a meaningful percentage of completion.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />;\n```\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />\n<ProgressSpinner aria-label={"Label"} variant={"inactive"} />\n<ProgressSpinner aria-label={"Label"} variant={"success"} />\n<ProgressSpinner aria-label={"Label"} variant={"error"} />\n```\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} size={"sm"} />\n<ProgressSpinner aria-label={"Label"} size={"md"} />\n```\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} label={"Label"} />;\n<ProgressSpinner aria-label={"Label"} label={"Label"} size={"sm"} />;\n```',props:`interface ProgressSpinnerProps {
|
|
16340
16591
|
/**
|
|
16341
16592
|
* The unique identifier for the block. This is used to identify the block in
|
|
16342
16593
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -16412,7 +16663,7 @@ variant?: "active" | "inactive" | "success" | "error"
|
|
|
16412
16663
|
],
|
|
16413
16664
|
}}
|
|
16414
16665
|
/>
|
|
16415
|
-
);`},{id:"core-status-progressspinner--success",name:"Success",snippet:'const Success = () => <ProgressSpinner label="Label" variant="success" />;'},{id:"core-status-progressspinner--error",name:"Error",snippet:'const Error = () => <ProgressSpinner label="Label" variant="error" />;'},{id:"core-status-progressspinner--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <ProgressSpinner aria-label="Loading" />;'}],implementation:""},similarTo:[],figmaUrl:null},RadioGroup:{id:"core-forms-radiogroup",breadcrumb:"Core/Forms/RadioGroup",importStatement:'import { RadioGroup } from "@baseline-ui/core";',description:
|
|
16666
|
+
);`},{id:"core-status-progressspinner--success",name:"Success",snippet:'const Success = () => <ProgressSpinner label="Label" variant="success" />;'},{id:"core-status-progressspinner--error",name:"Error",snippet:'const Error = () => <ProgressSpinner label="Label" variant="error" />;'},{id:"core-status-progressspinner--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <ProgressSpinner aria-label="Loading" />;'}],implementation:""},similarTo:[],figmaUrl:null},RadioGroup:{id:"core-forms-radiogroup",breadcrumb:"Core/Forms/RadioGroup",importStatement:'import { RadioGroup } from "@baseline-ui/core";',description:"`RadioGroup` lets users pick exactly one value from a small set of visible, mutually exclusive options. Use it when all choices should remain in view; for longer lists prefer a Select.",documentation:`\`RadioGroup\` lets users pick exactly one value from a small set of visible, mutually exclusive options. Use it when all choices should remain in view; for longer lists prefer a Select.
|
|
16416
16667
|
|
|
16417
16668
|
* Accessible \u2014 exposes \`role="radiogroup"\` and \`role="radio"\` with full ARIA attribute support (\`aria-checked\`, \`aria-disabled\`, \`aria-labelledby\`, \`aria-orientation\`).
|
|
16418
16669
|
* Keyboard navigation \u2014 arrow keys move focus and selection between options; supports both vertical (default) and horizontal orientations.
|
|
@@ -16667,7 +16918,7 @@ export const CustomRenderItem: React.FC<Omit<RadioGroupProps, "items">> = (
|
|
|
16667
16918
|
return (
|
|
16668
16919
|
<RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />
|
|
16669
16920
|
);
|
|
16670
|
-
};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"
|
|
16921
|
+
};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"`Reaction` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.",documentation:`\`Reaction\` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.
|
|
16671
16922
|
|
|
16672
16923
|
* It is exposed as a input checkbox via ARIA
|
|
16673
16924
|
* It has mouse, keyboard, and touch support
|
|
@@ -16794,7 +17045,7 @@ icon?: React.FC<IconProps>
|
|
|
16794
17045
|
ScrollControlButton,
|
|
16795
17046
|
ScrollControlButtonExample,
|
|
16796
17047
|
ScrollControlButtonReversedExample,
|
|
16797
|
-
} from "@baseline-ui/core";`,description:"
|
|
17048
|
+
} from "@baseline-ui/core";`,description:"`ScrollControlButton` is a floating button that jumps a scrollable container to its bottom (or top, when the container uses `flex-direction: column-reverse`). Use it for long, append-only content such as chat transcripts or activity feeds where users need a quick shortcut to the latest entries.",documentation:`\`ScrollControlButton\` is a floating button that jumps a scrollable container to its bottom (or top, when the container uses \`flex-direction: column-reverse\`). Use it for long, append-only content such as chat transcripts or activity feeds where users need a quick shortcut to the latest entries.
|
|
16798
17049
|
|
|
16799
17050
|
* Can be used to scroll to the bottom or top of a container
|
|
16800
17051
|
* Exposed to assistive technologies via aria attributes
|
|
@@ -17080,7 +17331,7 @@ export const ScrollControlButtonReversedExample: React.FC<
|
|
|
17080
17331
|
</div>
|
|
17081
17332
|
</>
|
|
17082
17333
|
);
|
|
17083
|
-
};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a
|
|
17334
|
+
};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.",documentation:'`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.\n\n* Built with a native `<input type="search">` element\n* Visual and ARIA labeling support\n* Custom clear button support with internationalized label for accessibility\n* Support for description and error message help text linked to the input via ARIA\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" variant="primary" />\n<SearchInput aria-label="Label" placeholder="Search" variant="ghost" />\n```\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" size="sm" />\n<SearchInput aria-label="Label" placeholder="Search" size="md" />\n<SearchInput aria-label="Label" placeholder="Search" size="lg" />\n```\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" isDisabled />;\n```\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc` | Clears the search query |',props:`interface SearchInputProps {
|
|
17084
17335
|
/**
|
|
17085
17336
|
* The unique identifier for the block. This is used to identify the block in
|
|
17086
17337
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -17158,7 +17409,7 @@ isClearFocusable?: boolean
|
|
|
17158
17409
|
placeholder="Search"
|
|
17159
17410
|
aria-label="Search"
|
|
17160
17411
|
isClearFocusable
|
|
17161
|
-
defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select-multiselect",breadcrumb:"Core/Forms/Select",importStatement:'import { Select } from "@baseline-ui/core";',description:"
|
|
17412
|
+
defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select-multiselect",breadcrumb:"Core/Forms/Select",importStatement:'import { Select } from "@baseline-ui/core";',description:"`Select` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.",documentation:`\`Select\` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.
|
|
17162
17413
|
|
|
17163
17414
|
* Exposed to assistive technology as a button with a listbox popup using ARIA (combined with useListBox)
|
|
17164
17415
|
* Support for selecting a single option or multiple options
|
|
@@ -17914,7 +18165,7 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
|
|
|
17914
18165
|
</Autocomplete>
|
|
17915
18166
|
</Virtualizer>
|
|
17916
18167
|
);
|
|
17917
|
-
};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"
|
|
18168
|
+
};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"`Separator` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.",documentation:`\`Separator\` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.
|
|
17918
18169
|
|
|
17919
18170
|
\`\`\`jsx
|
|
17920
18171
|
import { Separator } from "../../utils";
|
|
@@ -17991,7 +18242,31 @@ variant?: "primary" | "secondary"
|
|
|
17991
18242
|
*/
|
|
17992
18243
|
UNSAFE_omitRole?: boolean
|
|
17993
18244
|
}`,stories:{usage:[{id:"core-content-separator--basic",name:"Basic",snippet:"const Basic = () => <Separator />;"},{id:"core-content-separator--vertical",name:"Vertical",snippet:'const Vertical = () => <Separator orientation="vertical" />;'},{id:"core-content-separator--secondary",name:"Secondary",snippet:'const Secondary = () => <Separator variant="secondary" />;'},{id:"core-content-separator--secondary-vertical",name:"Secondary Vertical",snippet:'const SecondaryVertical = () => <Separator orientation="vertical" variant="secondary" />;'}],implementation:""},similarTo:[],figmaUrl:null},Skeleton:{id:"core-feedback-skeleton",breadcrumb:"Core/Feedback/Skeleton",importStatement:`import { Box, Separator, Skeleton } from "@baseline-ui/core";
|
|
17994
|
-
import { CaretLeftIcon, CaretRightIcon } from "@baseline-ui/icons/16";`,description:"
|
|
18245
|
+
import { CaretLeftIcon, CaretRightIcon } from "@baseline-ui/icons/16";`,description:"`Skeleton` is an animated placeholder block that stands in for content while it loads. Use it to preserve layout and signal progress in place of text, images, or other UI during data fetching.",documentation:`\`Skeleton\` is an animated placeholder block that stands in for content while it loads. Use it to preserve layout and signal progress in place of text, images, or other UI during data fetching.
|
|
18246
|
+
|
|
18247
|
+
\`\`\`jsx
|
|
18248
|
+
import { Skeleton } from "@baseline-ui/core";
|
|
18249
|
+
|
|
18250
|
+
<Skeleton style={{ width: 200, height: 16, borderRadius: 9999 }} />;
|
|
18251
|
+
\`\`\`
|
|
18252
|
+
|
|
18253
|
+
Use \`clipPath\` or \`borderRadius\` to create any shape \u2014 stars, hearts, hexagons, chat bubbles, and more.
|
|
18254
|
+
|
|
18255
|
+
Skeleton elements are purely decorative. When using them as loading placeholders, add \`aria-busy="true"\` to the container that will eventually hold the real content:
|
|
18256
|
+
|
|
18257
|
+
\`\`\`jsx
|
|
18258
|
+
<div aria-busy={isLoading}>
|
|
18259
|
+
{isLoading ? (
|
|
18260
|
+
<Skeleton style={{ width: "100%", height: 200, borderRadius: 8 }} />
|
|
18261
|
+
) : (
|
|
18262
|
+
<RealContent />
|
|
18263
|
+
)}
|
|
18264
|
+
</div>
|
|
18265
|
+
\`\`\`
|
|
18266
|
+
|
|
18267
|
+
| Selector | Description |
|
|
18268
|
+
| ---------------------- | --------------------------------- |
|
|
18269
|
+
| \`.BaselineUI-Skeleton\` | The root element of the skeleton. |`,props:`interface SkeletonProps {
|
|
17995
18270
|
/**
|
|
17996
18271
|
* The className applied to the root element of the component.
|
|
17997
18272
|
*/
|
|
@@ -18170,7 +18445,7 @@ style?: React.CSSProperties
|
|
|
18170
18445
|
</Box>
|
|
18171
18446
|
</Box>
|
|
18172
18447
|
</Box>
|
|
18173
|
-
);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"
|
|
18448
|
+
);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.",documentation:'`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
|
|
18174
18449
|
/**
|
|
18175
18450
|
* The unique identifier for the block. This is used to identify the block in
|
|
18176
18451
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -18241,7 +18516,7 @@ numberInputStyle?: NumberInputProps["style"]
|
|
|
18241
18516
|
numberFormatOptions={{
|
|
18242
18517
|
style: "percent",
|
|
18243
18518
|
}} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"}],implementation:""},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
|
|
18244
|
-
import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"
|
|
18519
|
+
import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.",documentation:`\`StatusCard\` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.
|
|
18245
18520
|
|
|
18246
18521
|
* Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`denied\`, and \`success\`
|
|
18247
18522
|
* Tinted variants available for a lighter, more subtle appearance
|
|
@@ -18659,7 +18934,422 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
|
|
|
18659
18934
|
)}
|
|
18660
18935
|
/>
|
|
18661
18936
|
);
|
|
18662
|
-
};`},similarTo:[],figmaUrl:null},
|
|
18937
|
+
};`},similarTo:[],figmaUrl:null},Stepper:{id:"core-navigation-stepper",breadcrumb:"Core/Navigation/Stepper",importStatement:'import { Box, CheckoutWizard, Stepper, Text } from "@baseline-ui/core";',description:"The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.",documentation:'The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.\n\n* Sequential progress model: only completed steps and the next-uncompleted step are selectable.\n* Active step is announced to assistive technology via `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label for screen readers.\n* Each selectable step is independently tabbable \u2014 no roving tabindex.\n* Controlled and uncontrolled APIs for both the selected step and the completion frontier.\n* Two layout variants (`condensed`, `expanded`) and two sizes (`sm`, `md`).\n* Supports indicator-only steps (omit `title`) and disabling individual steps or the whole stepper.\n\nYou can import the `Stepper` component like so:\n\n```jsx\nimport { Stepper } from "@baseline-ui/core";\n\nconst items = [\n { key: "cart", title: "Cart", description: "Review items" },\n { key: "shipping", title: "Shipping", description: "Enter address" },\n { key: "payment", title: "Payment", description: "Pay securely" },\n];\n\nexport default function Checkout() {\n return (\n <Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n />\n );\n}\n```\n\nIf you need parallel views without order or completion semantics, use\n[`Tabs`](?path=/docs/core-tabs--docs). For non-discrete or determinate progress,\nuse [`ProgressBar`](?path=/docs/core-progressbar--docs).\n\nThe `Stepper` supports two variants: `condensed` and `expanded`. The\n`expanded` variant is the default.\n\n* `condensed` \u2014 indicator-only layout with a short connector. Compact and ideal for narrow contexts.\n* `expanded` \u2014 indicator with title and description; the connector grows to fill the available width between steps.\n\n```jsx\n<Stepper items={items} variant="expanded" aria-label="Checkout" />\n<Stepper items={items} variant="condensed" aria-label="Checkout" />\n```\n\nThe `Stepper` supports two sizes: `sm` (20px indicator) and `md` (24px\nindicator). The `md` size is the default.\n\n```jsx\n<Stepper items={items} size="sm" aria-label="Checkout" />\n<Stepper items={items} size="md" aria-label="Checkout" />\n```\n\nEach step renders in one of three statuses, derived from the current selection\nand the completion frontier:\n\n* **complete** \u2014 step appears before `lastCompletedStep` (inclusive); shown with a checkmark.\n* **active** \u2014 step matches `selectedStep`; highlighted indicator with `aria-current="step"`.\n* **incomplete** \u2014 step appears after the active step; numbered indicator with muted styling.\n\nDisable individual steps by setting `isDisabled` on the item. Disabled steps\ncannot be selected and are removed from the tab sequence.\n\n```jsx\n<Stepper\n items={[\n { key: "a", title: "A" },\n { key: "b", title: "B", isDisabled: true },\n { key: "c", title: "C" },\n ]}\n aria-label="Checkout"\n/>\n```\n\nPass `isDisabled` on the `Stepper` itself to disable every step at once \u2014 useful\nwhile a flow is loading or otherwise temporarily inert.\n\n```jsx\n<Stepper items={items} isDisabled aria-label="Checkout" />\n```\n\nTwo independent ways to hide step text:\n\n* Set `variant="condensed"` on the stepper \u2014 hides title and description for every step regardless of whether they were provided.\n* Omit `title` on individual items in the default `expanded` variant \u2014 those specific steps render as indicator-only while others keep their text.\n\n```jsx\n<Stepper\n items={[{ key: "cart" }, { key: "shipping" }, { key: "payment" }]}\n variant="condensed"\n aria-label="Checkout"\n/>\n```\n\nThe `Stepper` can be used uncontrolled by providing `defaultSelectedStep` and\n`defaultLastCompletedStep`.\n\n```jsx\n<Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n/>\n```\n\nFor full control, supply `selectedStep` and `lastCompletedStep` together with\nthe `onSelectionChange` and `onLastCompletedStepChange` callbacks.\n`onLastCompletedStepChange` receives `null` when the frontier resets to "no\nsteps completed yet".\n\n```jsx\nconst [selected, setSelected] = useState("cart");\nconst [lastCompleted, setLastCompleted] = useState(null);\n\n<Stepper\n items={items}\n selectedStep={selected}\n lastCompletedStep={lastCompleted ?? undefined}\n onSelectionChange={setSelected}\n onLastCompletedStepChange={setLastCompleted}\n aria-label="Checkout"\n/>;\n```\n\n* Always supply an `aria-label` that names the flow (e.g. `"Checkout"`). A localized fallback ("Progress") is used if omitted, but a flow-specific label is strongly preferred.\n* The active step is marked with `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label so screen reader users hear the progress state.\n* Only completed steps and the next-uncompleted step are selectable; future steps are exposed with `aria-disabled="true"`.\n* Per-item `aria-label` has two roles. When set **without** `description`, the step renders in indicator-only mode and the label becomes the accessible name. When set **with** `description`, the step renders normally and the label overrides `title` for assistive technology \u2014 use it to expose a longer or more descriptive name to screen readers without changing the visible text.\n\n| Selector | Description |\n| --------------------------------- | ----------------------------------------------------------- |\n| `[data-variant]` | Layout variant: `condensed` or `expanded`. |\n| `[data-size]` | Size of the indicator: `sm` or `md`. |\n| `[data-status]` | Step status: `complete`, `active`, or `incomplete`. |\n| `[data-disabled]` | Whether the step is disabled. |\n| `[data-hovered]` | Whether the step is currently hovered. |\n| `[data-focused]` | Whether the step is focused (mouse or keyboard). |\n| `[data-focus-visible]` | Whether the step is keyboard focused. |\n| `[aria-current="step"]` | The currently active step. |\n| `[aria-disabled="true"]` | The step is not selectable (future or explicitly disabled). |\n| `.BaselineUI-Stepper` | Root `<ol>` element. |\n| `.BaselineUI-Stepper-Item` | Each step `<li>`. |\n| `.BaselineUI-Stepper-StepLink` | Interactive step `<a>` element. |\n| `.BaselineUI-Stepper-Indicator` | Indicator circle (number or checkmark). |\n| `.BaselineUI-Stepper-Text` | Wrapper around title and description. |\n| `.BaselineUI-Stepper-Title` | Step title text. |\n| `.BaselineUI-Stepper-Description` | Step description text. |\n| `.BaselineUI-Stepper-Connector` | Connector line between steps. |\n\nEach selectable step is a regular focusable link \u2014 the Stepper does not use a\nroving tabindex, so steps are reached individually via `Tab`.\n\n| Key | Function |\n| ------- | ------------------------------------------- |\n| `Tab` | Moves focus to the next selectable step. |\n| `Enter` | Activates the focused step (if selectable). |',props:`interface StepperProps {
|
|
18938
|
+
/**
|
|
18939
|
+
* The unique identifier for the block. This is used to identify the block in
|
|
18940
|
+
* the DOM and in the block map. It is added as a data attribute
|
|
18941
|
+
* \`data-block-id\` to the root element of the block if a DOM node is
|
|
18942
|
+
* rendered.
|
|
18943
|
+
*/
|
|
18944
|
+
data-block-id?: string
|
|
18945
|
+
/**
|
|
18946
|
+
* Represents a data block group. This is similar to \`data-block-id\` but it
|
|
18947
|
+
* doesn't have to be unique just like \`class\`. This is used to group blocks
|
|
18948
|
+
* together in the DOM and in the block map. It is added as a data attribute
|
|
18949
|
+
* \`data-block-class\` to the root element of the block if a DOM node is
|
|
18950
|
+
* rendered.
|
|
18951
|
+
*/
|
|
18952
|
+
data-block-class?: string
|
|
18953
|
+
/**
|
|
18954
|
+
* The className applied to the root element of the component.
|
|
18955
|
+
*/
|
|
18956
|
+
className?: string
|
|
18957
|
+
/**
|
|
18958
|
+
* The style applied to the root element of the component.
|
|
18959
|
+
*/
|
|
18960
|
+
style?: React.CSSProperties
|
|
18961
|
+
/**
|
|
18962
|
+
* The steps to render.
|
|
18963
|
+
*/
|
|
18964
|
+
items: StepperItem[]
|
|
18965
|
+
/**
|
|
18966
|
+
* Layout variant.
|
|
18967
|
+
*
|
|
18968
|
+
* - \`condensed\` \u2014 indicator only, short connector between steps.
|
|
18969
|
+
* - \`expanded\` \u2014 indicator with title and optional description, connector fills the gap.
|
|
18970
|
+
*
|
|
18971
|
+
* @default "expanded"
|
|
18972
|
+
*/
|
|
18973
|
+
variant?: "condensed" | "expanded"
|
|
18974
|
+
/**
|
|
18975
|
+
* Size of the indicator circle and accompanying text.
|
|
18976
|
+
*
|
|
18977
|
+
* @default "md"
|
|
18978
|
+
*/
|
|
18979
|
+
size?: "sm" | "md"
|
|
18980
|
+
/**
|
|
18981
|
+
* Currently selected step key (controlled).
|
|
18982
|
+
*/
|
|
18983
|
+
selectedStep?: Key
|
|
18984
|
+
/**
|
|
18985
|
+
* Initially selected step key (uncontrolled).
|
|
18986
|
+
*/
|
|
18987
|
+
defaultSelectedStep?: Key
|
|
18988
|
+
/**
|
|
18989
|
+
* Called when the selected step changes.
|
|
18990
|
+
*/
|
|
18991
|
+
onSelectionChange?: (key: Key) => void
|
|
18992
|
+
/**
|
|
18993
|
+
* Last completed step \u2014 the progress frontier (controlled).
|
|
18994
|
+
*/
|
|
18995
|
+
lastCompletedStep?: Key
|
|
18996
|
+
/**
|
|
18997
|
+
* Initial last completed step (uncontrolled).
|
|
18998
|
+
*/
|
|
18999
|
+
defaultLastCompletedStep?: Key
|
|
19000
|
+
/**
|
|
19001
|
+
* Called when the last completed step changes.
|
|
19002
|
+
*/
|
|
19003
|
+
onLastCompletedStepChange?: (key: Key | null) => void
|
|
19004
|
+
/**
|
|
19005
|
+
* Disable the whole stepper.
|
|
19006
|
+
*/
|
|
19007
|
+
isDisabled?: boolean
|
|
19008
|
+
/**
|
|
19009
|
+
* Accessibility label for the stepper. Falls back to a localized
|
|
19010
|
+
* "Progress" string if omitted; prefer supplying a flow-specific label
|
|
19011
|
+
* (e.g. "Checkout").
|
|
19012
|
+
*/
|
|
19013
|
+
aria-label?: string
|
|
19014
|
+
}`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
|
|
19015
|
+
items={items}
|
|
19016
|
+
aria-label="Checkout"
|
|
19017
|
+
defaultSelectedStep="shipping"
|
|
19018
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--condensed",name:"Condensed",snippet:`const Condensed = () => <Stepper
|
|
19019
|
+
items={items}
|
|
19020
|
+
aria-label="Checkout"
|
|
19021
|
+
defaultSelectedStep="shipping"
|
|
19022
|
+
defaultLastCompletedStep="cart"
|
|
19023
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--size-small-expanded",name:"Size Small Expanded",snippet:`const SizeSmallExpanded = () => <Stepper
|
|
19024
|
+
items={items}
|
|
19025
|
+
aria-label="Checkout"
|
|
19026
|
+
defaultSelectedStep="shipping"
|
|
19027
|
+
defaultLastCompletedStep="cart"
|
|
19028
|
+
size="sm"
|
|
19029
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--size-small-condensed",name:"Size Small Condensed",snippet:`const SizeSmallCondensed = () => <Stepper
|
|
19030
|
+
items={items}
|
|
19031
|
+
aria-label="Checkout"
|
|
19032
|
+
defaultSelectedStep="shipping"
|
|
19033
|
+
defaultLastCompletedStep="cart"
|
|
19034
|
+
size="sm"
|
|
19035
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--all-states",name:"All States",snippet:`const AllStates = () => (
|
|
19036
|
+
<Box display="flex" flexDirection="column" gap="3xl">
|
|
19037
|
+
{(["sm", "md"] as const).map((size) =>
|
|
19038
|
+
(["condensed", "expanded"] as const).map((variant) => (
|
|
19039
|
+
<Box
|
|
19040
|
+
key={\`\${size}-\${variant}\`}
|
|
19041
|
+
display="flex"
|
|
19042
|
+
flexDirection="column"
|
|
19043
|
+
gap="md"
|
|
19044
|
+
>
|
|
19045
|
+
<Text type="label" size="sm" color="text.secondary">
|
|
19046
|
+
size={size} \xB7 variant={variant}
|
|
19047
|
+
</Text>
|
|
19048
|
+
<Stepper
|
|
19049
|
+
items={items}
|
|
19050
|
+
size={size}
|
|
19051
|
+
variant={variant}
|
|
19052
|
+
defaultSelectedStep="shipping"
|
|
19053
|
+
defaultLastCompletedStep="cart"
|
|
19054
|
+
aria-label="Checkout"
|
|
19055
|
+
/>
|
|
19056
|
+
</Box>
|
|
19057
|
+
)),
|
|
19058
|
+
)}
|
|
19059
|
+
</Box>
|
|
19060
|
+
);`},{id:"core-navigation-stepper--with-disabled-step",name:"With Disabled Step",snippet:`const WithDisabledStep = () => <Stepper
|
|
19061
|
+
items={[
|
|
19062
|
+
{ key: "a", title: "A", description: "First" },
|
|
19063
|
+
{
|
|
19064
|
+
key: "b",
|
|
19065
|
+
title: "B",
|
|
19066
|
+
description: "Second (disabled)",
|
|
19067
|
+
isDisabled: true,
|
|
19068
|
+
},
|
|
19069
|
+
{ key: "c", title: "C", description: "Third" },
|
|
19070
|
+
]}
|
|
19071
|
+
aria-label="Checkout"
|
|
19072
|
+
defaultSelectedStep="a"
|
|
19073
|
+
defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
|
|
19074
|
+
items={items.map((i) => ({ key: i.key }))}
|
|
19075
|
+
aria-label="Checkout"
|
|
19076
|
+
defaultSelectedStep="shipping"
|
|
19077
|
+
defaultLastCompletedStep="cart"
|
|
19078
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--is-disabled",name:"Is Disabled",snippet:`const IsDisabled = () => <Stepper
|
|
19079
|
+
items={items}
|
|
19080
|
+
aria-label="Checkout"
|
|
19081
|
+
defaultSelectedStep="shipping"
|
|
19082
|
+
defaultLastCompletedStep="cart"
|
|
19083
|
+
isDisabled />;`},{id:"core-navigation-stepper--expanded-without-descriptions",name:"Expanded Without Descriptions",snippet:`const ExpandedWithoutDescriptions = () => <Stepper
|
|
19084
|
+
items={items.map(({ key, title }) => ({ key, title }))}
|
|
19085
|
+
aria-label="Checkout"
|
|
19086
|
+
defaultSelectedStep="shipping"
|
|
19087
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--long-title-and-description",name:"Long Title And Description",snippet:`const LongTitleAndDescription = () => <Stepper
|
|
19088
|
+
items={[
|
|
19089
|
+
{
|
|
19090
|
+
key: "cart",
|
|
19091
|
+
title: "Review your shopping cart and apply any promo codes",
|
|
19092
|
+
description:
|
|
19093
|
+
"Make sure quantities and shipping options are correct before continuing to the next step.",
|
|
19094
|
+
},
|
|
19095
|
+
{
|
|
19096
|
+
key: "shipping",
|
|
19097
|
+
title: "Confirm shipping address and delivery method",
|
|
19098
|
+
description:
|
|
19099
|
+
"We will use this address for delivery and any required customs documentation.",
|
|
19100
|
+
},
|
|
19101
|
+
{
|
|
19102
|
+
key: "payment",
|
|
19103
|
+
title: "Choose a payment method and complete checkout",
|
|
19104
|
+
description:
|
|
19105
|
+
"Your payment is processed securely; we never store full card details.",
|
|
19106
|
+
},
|
|
19107
|
+
]}
|
|
19108
|
+
aria-label="Checkout"
|
|
19109
|
+
defaultSelectedStep="shipping"
|
|
19110
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--two-steps",name:"Two Steps",snippet:`const TwoSteps = () => <Stepper
|
|
19111
|
+
items={[
|
|
19112
|
+
{ key: "first", title: "First", description: "Start here" },
|
|
19113
|
+
{ key: "second", title: "Second", description: "Finish here" },
|
|
19114
|
+
]}
|
|
19115
|
+
aria-label="Checkout"
|
|
19116
|
+
defaultSelectedStep="second"
|
|
19117
|
+
defaultLastCompletedStep="first" />;`},{id:"core-navigation-stepper--controlled",name:"Controlled",snippet:"const Controlled = () => <CheckoutWizard />;"},{id:"core-navigation-stepper--all-complete",name:"All Complete",snippet:`const AllComplete = () => <Stepper
|
|
19118
|
+
items={items}
|
|
19119
|
+
aria-label="Checkout"
|
|
19120
|
+
defaultSelectedStep="payment"
|
|
19121
|
+
defaultLastCompletedStep="payment" />;`},{id:"core-navigation-stepper--frontier-ahead-of-selection",name:"Frontier Ahead Of Selection",snippet:`const FrontierAheadOfSelection = () => <Stepper
|
|
19122
|
+
items={items}
|
|
19123
|
+
aria-label="Checkout"
|
|
19124
|
+
defaultSelectedStep="cart"
|
|
19125
|
+
defaultLastCompletedStep="shipping" />;`},{id:"core-navigation-stepper--single-item",name:"Single Item",snippet:`const SingleItem = () => <Stepper
|
|
19126
|
+
items={[{ key: "only", title: "Only step", description: "Just one step" }]}
|
|
19127
|
+
aria-label="Checkout"
|
|
19128
|
+
defaultSelectedStep="only"
|
|
19129
|
+
defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only-expanded",name:"Indicator Only Expanded",snippet:`const IndicatorOnlyExpanded = () => <Stepper
|
|
19130
|
+
items={items.map((i) => ({ key: i.key }))}
|
|
19131
|
+
aria-label="Checkout"
|
|
19132
|
+
defaultSelectedStep="shipping"
|
|
19133
|
+
defaultLastCompletedStep="cart"
|
|
19134
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--mixed-indicator-and-titled-items",name:"Mixed Indicator And Titled Items",snippet:`const MixedIndicatorAndTitledItems = () => <Stepper
|
|
19135
|
+
items={[
|
|
19136
|
+
{ key: "cart", title: "Cart", description: "Review items" },
|
|
19137
|
+
{ key: "shipping", "aria-label": "Shipping address" },
|
|
19138
|
+
{ key: "payment", title: "Payment", description: "Pay securely" },
|
|
19139
|
+
]}
|
|
19140
|
+
aria-label="Checkout"
|
|
19141
|
+
defaultSelectedStep="shipping"
|
|
19142
|
+
defaultLastCompletedStep="cart"
|
|
19143
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--per-item-aria-label-overrides-title",name:"Per Item Aria Label Overrides Title",snippet:`const PerItemAriaLabelOverridesTitle = () => <Stepper
|
|
19144
|
+
items={[
|
|
19145
|
+
{
|
|
19146
|
+
key: "cart",
|
|
19147
|
+
title: "Cart",
|
|
19148
|
+
description: "Review items",
|
|
19149
|
+
"aria-label": "Cart \u2014 3 items, total $42",
|
|
19150
|
+
},
|
|
19151
|
+
{
|
|
19152
|
+
key: "shipping",
|
|
19153
|
+
title: "Shipping",
|
|
19154
|
+
description: "Enter address",
|
|
19155
|
+
"aria-label": "Shipping \u2014 express delivery",
|
|
19156
|
+
},
|
|
19157
|
+
{
|
|
19158
|
+
key: "payment",
|
|
19159
|
+
title: "Payment",
|
|
19160
|
+
description: "Pay securely",
|
|
19161
|
+
"aria-label": "Payment \u2014 Visa ending in 1234",
|
|
19162
|
+
},
|
|
19163
|
+
]}
|
|
19164
|
+
aria-label="Checkout"
|
|
19165
|
+
defaultSelectedStep="shipping"
|
|
19166
|
+
defaultLastCompletedStep="cart"
|
|
19167
|
+
variant="expanded" />;`}],implementation:`import React from "react";
|
|
19168
|
+
|
|
19169
|
+
import { ActionButton } from "../../ActionButton";
|
|
19170
|
+
import { Box } from "../../Box";
|
|
19171
|
+
import { Code } from "../../Code";
|
|
19172
|
+
import { Text } from "../../Text";
|
|
19173
|
+
import { Stepper } from "../Stepper";
|
|
19174
|
+
|
|
19175
|
+
import type { StepperItem } from "../Stepper.types";
|
|
19176
|
+
import type { Key } from "react-aria";
|
|
19177
|
+
|
|
19178
|
+
export const checkoutItems: StepperItem[] = [
|
|
19179
|
+
{ key: "cart", title: "Cart", description: "Review items" },
|
|
19180
|
+
{ key: "shipping", title: "Shipping", description: "Enter address" },
|
|
19181
|
+
{ key: "payment", title: "Payment", description: "Pay securely" },
|
|
19182
|
+
];
|
|
19183
|
+
|
|
19184
|
+
const defaultItems = checkoutItems;
|
|
19185
|
+
|
|
19186
|
+
export interface ControlledStepperProps {
|
|
19187
|
+
items?: StepperItem[];
|
|
19188
|
+
initialSelected?: Key;
|
|
19189
|
+
initialLastCompleted?: Key | null;
|
|
19190
|
+
onSelectionChange?: (key: Key) => void;
|
|
19191
|
+
onLastCompletedStepChange?: (key: Key | null) => void;
|
|
19192
|
+
}
|
|
19193
|
+
|
|
19194
|
+
export function ControlledStepper({
|
|
19195
|
+
items = defaultItems,
|
|
19196
|
+
initialSelected = "shipping",
|
|
19197
|
+
initialLastCompleted = "cart",
|
|
19198
|
+
onSelectionChange,
|
|
19199
|
+
onLastCompletedStepChange,
|
|
19200
|
+
}: ControlledStepperProps) {
|
|
19201
|
+
const [selected, setSelected] = React.useState<Key>(initialSelected);
|
|
19202
|
+
const [lastCompleted, setLastCompleted] = React.useState<Key | null>(
|
|
19203
|
+
initialLastCompleted,
|
|
19204
|
+
);
|
|
19205
|
+
|
|
19206
|
+
const advance = () => {
|
|
19207
|
+
const idx = items.findIndex((i) => i.key === selected);
|
|
19208
|
+
const next = items[idx + 1];
|
|
19209
|
+
if (next) setSelected(next.key);
|
|
19210
|
+
};
|
|
19211
|
+
|
|
19212
|
+
return (
|
|
19213
|
+
<div>
|
|
19214
|
+
<Stepper
|
|
19215
|
+
items={items}
|
|
19216
|
+
selectedStep={selected}
|
|
19217
|
+
lastCompletedStep={lastCompleted ?? undefined}
|
|
19218
|
+
onSelectionChange={(key) => {
|
|
19219
|
+
setSelected(key);
|
|
19220
|
+
onSelectionChange?.(key);
|
|
19221
|
+
}}
|
|
19222
|
+
onLastCompletedStepChange={(key) => {
|
|
19223
|
+
setLastCompleted(key);
|
|
19224
|
+
onLastCompletedStepChange?.(key);
|
|
19225
|
+
}}
|
|
19226
|
+
aria-label="Checkout"
|
|
19227
|
+
/>
|
|
19228
|
+
<button type="button" onClick={advance}>
|
|
19229
|
+
Next
|
|
19230
|
+
</button>
|
|
19231
|
+
</div>
|
|
19232
|
+
);
|
|
19233
|
+
}
|
|
19234
|
+
|
|
19235
|
+
export interface CheckoutWizardProps {
|
|
19236
|
+
items?: StepperItem[];
|
|
19237
|
+
initialSelectedStep?: Key;
|
|
19238
|
+
}
|
|
19239
|
+
|
|
19240
|
+
/**
|
|
19241
|
+
* Wizard-style controlled Stepper with Back/Continue buttons, a step-content
|
|
19242
|
+
* panel, and an external state readout. Shared by the Storybook \`Controlled\`
|
|
19243
|
+
* story and Playwright spec.
|
|
19244
|
+
*/
|
|
19245
|
+
export function CheckoutWizard({
|
|
19246
|
+
items = defaultItems,
|
|
19247
|
+
initialSelectedStep,
|
|
19248
|
+
}: CheckoutWizardProps) {
|
|
19249
|
+
const [selected, setSelected] = React.useState<Key>(
|
|
19250
|
+
initialSelectedStep ?? items[0].key,
|
|
19251
|
+
);
|
|
19252
|
+
const [lastCompleted, setLastCompleted] = React.useState<Key | null>(null);
|
|
19253
|
+
|
|
19254
|
+
const selectedIndex = items.findIndex((item) => item.key === selected);
|
|
19255
|
+
const currentItem = items[selectedIndex];
|
|
19256
|
+
const isFirst = selectedIndex <= 0;
|
|
19257
|
+
const isLast = selectedIndex === items.length - 1;
|
|
19258
|
+
|
|
19259
|
+
const handleBack = () => {
|
|
19260
|
+
if (!isFirst) setSelected(items[selectedIndex - 1].key);
|
|
19261
|
+
};
|
|
19262
|
+
|
|
19263
|
+
const handleNext = () => {
|
|
19264
|
+
if (isLast) return;
|
|
19265
|
+
setSelected(items[selectedIndex + 1].key);
|
|
19266
|
+
};
|
|
19267
|
+
|
|
19268
|
+
return (
|
|
19269
|
+
<Box display="flex" flexDirection="column" gap="lg">
|
|
19270
|
+
<Box
|
|
19271
|
+
display="flex"
|
|
19272
|
+
flexDirection="column"
|
|
19273
|
+
gap="2xl"
|
|
19274
|
+
padding="2xl"
|
|
19275
|
+
backgroundColor="background.primary.subtle"
|
|
19276
|
+
borderRadius="lg"
|
|
19277
|
+
borderWidth={1}
|
|
19278
|
+
borderStyle="solid"
|
|
19279
|
+
borderColor="border.subtle"
|
|
19280
|
+
>
|
|
19281
|
+
<Stepper
|
|
19282
|
+
items={items}
|
|
19283
|
+
selectedStep={selected}
|
|
19284
|
+
onSelectionChange={setSelected}
|
|
19285
|
+
onLastCompletedStepChange={setLastCompleted}
|
|
19286
|
+
aria-label="Checkout"
|
|
19287
|
+
/>
|
|
19288
|
+
|
|
19289
|
+
<Box
|
|
19290
|
+
display="flex"
|
|
19291
|
+
flexDirection="column"
|
|
19292
|
+
gap="sm"
|
|
19293
|
+
paddingY="lg"
|
|
19294
|
+
style={{ minHeight: 140 }}
|
|
19295
|
+
>
|
|
19296
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19297
|
+
Step {selectedIndex + 1} of {items.length}
|
|
19298
|
+
</Text>
|
|
19299
|
+
<Text type="title" size="lg" elementType="h3">
|
|
19300
|
+
{currentItem.title}
|
|
19301
|
+
</Text>
|
|
19302
|
+
{currentItem.description ? (
|
|
19303
|
+
<Text type="body" size="md" color="text.secondary">
|
|
19304
|
+
{currentItem.description}
|
|
19305
|
+
</Text>
|
|
19306
|
+
) : null}
|
|
19307
|
+
</Box>
|
|
19308
|
+
|
|
19309
|
+
<Box
|
|
19310
|
+
display="flex"
|
|
19311
|
+
justifyContent="space-between"
|
|
19312
|
+
alignItems="center"
|
|
19313
|
+
gap="sm"
|
|
19314
|
+
>
|
|
19315
|
+
<ActionButton
|
|
19316
|
+
variant="tertiary"
|
|
19317
|
+
label="Back"
|
|
19318
|
+
onPress={handleBack}
|
|
19319
|
+
isDisabled={isFirst}
|
|
19320
|
+
/>
|
|
19321
|
+
<ActionButton
|
|
19322
|
+
variant="primary"
|
|
19323
|
+
label={isLast ? "Finish" : "Continue"}
|
|
19324
|
+
onPress={handleNext}
|
|
19325
|
+
isDisabled={isLast}
|
|
19326
|
+
/>
|
|
19327
|
+
</Box>
|
|
19328
|
+
</Box>
|
|
19329
|
+
|
|
19330
|
+
<Box
|
|
19331
|
+
display="flex"
|
|
19332
|
+
gap="lg"
|
|
19333
|
+
paddingX="md"
|
|
19334
|
+
alignItems="center"
|
|
19335
|
+
justifyContent="center"
|
|
19336
|
+
>
|
|
19337
|
+
<Box display="flex" gap="xs" alignItems="center">
|
|
19338
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19339
|
+
selected
|
|
19340
|
+
</Text>
|
|
19341
|
+
<Code>{String(selected)}</Code>
|
|
19342
|
+
</Box>
|
|
19343
|
+
<Box display="flex" gap="xs" alignItems="center">
|
|
19344
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19345
|
+
lastCompleted
|
|
19346
|
+
</Text>
|
|
19347
|
+
<Code>{lastCompleted === null ? "null" : String(lastCompleted)}</Code>
|
|
19348
|
+
</Box>
|
|
19349
|
+
</Box>
|
|
19350
|
+
</Box>
|
|
19351
|
+
);
|
|
19352
|
+
}`},similarTo:[],figmaUrl:null},Switch:{id:"core-forms-switch",breadcrumb:"Core/Forms/Switch",importStatement:'import { Switch } from "@baseline-ui/core";',description:"`Switch` is a toggle control that flips a setting between on and off states. Use it for boolean preferences whose effect is applied immediately, such as enabling a feature or changing a mode.",documentation:`\`Switch\` is a toggle control that flips a setting between on and off states. Use it for boolean preferences whose effect is applied immediately, such as enabling a feature or changing a mode.
|
|
18663
19353
|
|
|
18664
19354
|
* This component is built on top of the native \`input[type=checkbox]\` element.
|
|
18665
19355
|
* Full support for browser features like form autofill
|
|
@@ -18852,7 +19542,7 @@ statusLabel?: {
|
|
|
18852
19542
|
Toolbar,
|
|
18853
19543
|
Virtualizer,
|
|
18854
19544
|
VisuallyHidden,
|
|
18855
|
-
} from "@baseline-ui/core";`,description:"
|
|
19545
|
+
} from "@baseline-ui/core";`,description:"`Table` renders tabular data in rows and columns with support for selection, sorting, drag-and-drop reordering, and optional virtualization via the `Virtualizer` wrapper. Use it to display structured datasets where users need to scan, compare, or act on multiple records.",documentation:`\`Table\` renders tabular data in rows and columns with support for selection, sorting, drag-and-drop reordering, and optional virtualization via the \`Virtualizer\` wrapper. Use it to display structured datasets where users need to scan, compare, or act on multiple records.
|
|
18856
19546
|
|
|
18857
19547
|
* Column sorting with visual sort indicator
|
|
18858
19548
|
* Row selection (single and multiple) with checkbox support
|
|
@@ -20793,8 +21483,7 @@ export const TagAndMenuTableExample: React.FC = () => (
|
|
|
20793
21483
|
})}
|
|
20794
21484
|
</TableBody>
|
|
20795
21485
|
</Table>
|
|
20796
|
-
);`},similarTo:[],figmaUrl:null},Tabs:{id:"core-navigation-tabs",breadcrumb:"Core/Navigation/Tabs",importStatement:'import { AddButtonExample, BasicExample, Tabs } from "@baseline-ui/core";',description:"
|
|
20797
|
-
a tab panel by wrapping a \`TabItem\` component in a \`Tabs\` component.
|
|
21486
|
+
);`},similarTo:[],figmaUrl:null},Tabs:{id:"core-navigation-tabs",breadcrumb:"Core/Navigation/Tabs",importStatement:'import { AddButtonExample, BasicExample, Tabs } from "@baseline-ui/core";',description:"`Tabs` is a horizontal row of labeled triggers that switches between mutually exclusive panels of content in the same view. Use it to organize related content into sections users can toggle without leaving the page.",documentation:`\`Tabs\` is a horizontal row of labeled triggers that switches between mutually exclusive panels of content in the same view. Use it to organize related content into sections users can toggle without leaving the page.
|
|
20798
21487
|
|
|
20799
21488
|
* Full support for mouse, keyboard, and touch interactions
|
|
20800
21489
|
* Supports disabled tabs
|
|
@@ -21106,7 +21795,7 @@ export const AddButtonExample = () => {
|
|
|
21106
21795
|
))}
|
|
21107
21796
|
</Tabs>
|
|
21108
21797
|
);
|
|
21109
|
-
};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a
|
|
21798
|
+
};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.",documentation:'`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.\n\n* Five visual variants: `neutral`, `red`, `green`, `blue`, and `high-contrast`\n* Two sizes: `md` (default) and `sm`\n* Optional leading icon (replaced by a checkmark when selected)\n* Optional remove button via `onRemove`\n* Selected and disabled states\n* Focus ring support\n* Works standalone or inside a `TagGroup` for collection behavior\n\n```jsx\nimport { Tag } from "@baseline-ui/core";\n\n<Tag>Label</Tag>;\n```\n\nFor collection behavior with keyboard navigation and selection, use `Tag` inside a `TagGroup`. See the <a href="?path=/docs/core-content-taggroup--docs">TagGroup documentation</a> for details.\n\n`Tag` supports five visual variants: `neutral`, `red`, `green`, `blue`, and\n`high-contrast`.\n\n```jsx\n<Tag>Neutral</Tag>\n<Tag variant="red">Red</Tag>\n<Tag variant="green">Green</Tag>\n<Tag variant="blue">Blue</Tag>\n<Tag variant="high-contrast">High Contrast</Tag>\n```\n\nPass an `icon` prop to display a leading icon. Use `@baseline-ui/icons/16` for `md` size and `@baseline-ui/icons/12` for `sm` size. When the tag is selected, the custom icon is replaced by a checkmark.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<Tag icon={EllipseIcon}>With Icon</Tag>;\n```\n\nPass `onRemove` to render a remove button. When the tag is disabled, the remove button is present but non-interactive.\n\n```jsx\n<Tag onRemove={() => console.log("removed")}>Removable</Tag>\n```\n\nWhen selected, the tag displays a checkmark icon and uses the interactive color scheme. If a custom `icon` is provided, the checkmark replaces it.\n\n```jsx\n<Tag isSelected>Selected</Tag>\n```\n\n```jsx\n<Tag isDisabled>Disabled</Tag>\n```\n\n```jsx\n<Tag size="sm">Small</Tag>\n```\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------- |\n| `.BaselineUI-Tag` | The root tag element. |\n| `.BaselineUI-Tag-Icon` | The icon element (custom icon or checkmark). |\n\nWhen the tag has a remove button:\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Tab` | Moves focus to the remove button. |\n| `Enter` | Activates the remove button. |\n| `Space` | Activates the remove button. |\n\n* <a href="?path=/docs/core-content-taggroup--docs">TagGroup</a> \u2014 Use for\n collections of tags with keyboard navigation, selection, and removal.\n* <a href="?path=/docs/core-content-badge--docs">Badge</a> \u2014 Use for numeric or\n status indicators that don\'t need interaction.',props:`interface TagProps {
|
|
21110
21799
|
/**
|
|
21111
21800
|
* The unique identifier for the block. This is used to identify the block in
|
|
21112
21801
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -21167,7 +21856,7 @@ isSelected?: boolean
|
|
|
21167
21856
|
* is rendered.
|
|
21168
21857
|
*/
|
|
21169
21858
|
onRemove?: () => void
|
|
21170
|
-
}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:""},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable
|
|
21859
|
+
}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:""},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable collection of `Tag` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.",documentation:`\`TagGroup\` is a focusable collection of \`Tag\` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.
|
|
21171
21860
|
|
|
21172
21861
|
* The component is exposed to assistive technology as a grid using ARIA
|
|
21173
21862
|
* Keyboard navigation supports arrow keys, home, end, page up, page down, space and enter
|
|
@@ -21448,7 +22137,7 @@ export const RemovableTagGroup: React.FC<
|
|
|
21448
22137
|
}}
|
|
21449
22138
|
/>
|
|
21450
22139
|
);
|
|
21451
|
-
};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"
|
|
22140
|
+
};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"`TaggedPagination` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.",documentation:`\`TaggedPagination\` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.
|
|
21452
22141
|
|
|
21453
22142
|
* Supports both string and number tags.
|
|
21454
22143
|
* Keyboard handling of next and previous buttons.
|
|
@@ -21648,7 +22337,7 @@ export const TaggedPaginationExample: React.FC<
|
|
|
21648
22337
|
{...props}
|
|
21649
22338
|
/>
|
|
21650
22339
|
);
|
|
21651
|
-
};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"
|
|
22340
|
+
};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.",documentation:'`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.\n\n```jsx\nimport { Text } from "@storybook/addon-docs/blocks";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `value` and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`. You can see all the variants [here](/story/core-text--variants)',props:`interface TextProps {
|
|
21652
22341
|
/**
|
|
21653
22342
|
* The unique identifier for the block. This is used to identify the block in
|
|
21654
22343
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -21750,7 +22439,7 @@ export function TextWithRef() {
|
|
|
21750
22439
|
<span data-testid="tag-name">{tag}</span>
|
|
21751
22440
|
</>
|
|
21752
22441
|
);
|
|
21753
|
-
}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a
|
|
22442
|
+
}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a single-line field for capturing short free-form text from the user. Use it for form values such as names, emails, or any other concise string entry.",documentation:'`TextInput` is a single-line field for capturing short free-form text from the user. Use it for form values such as names, emails, or any other concise string entry.\n\n* This component is built on top of the `input` element.\n* It provides visual and ARIA labels to the `input` element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to the assistive technology via ARIA.\n* It supports description and other state messages which are linked to the `input` element via ARIA.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" placeholder="Placeholder" />;\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" labelPosition="start" placeholder="Placeholder" />;\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" description="Description" placeholder="Placeholder" />;\n```\n\nYou can add an error to the `TextInput` by setting the `validationState` prop to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="error"\n placeholder="Placeholder"\n defaultValue="Error value"\n/>;\n```\n\nYou can add a warning to the `TextInput` by setting the `validationState` prop to\n`"warning"`. You can also pass `warningMessage` to provide additional\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="warning"\n placeholder="Placeholder"\n defaultValue="Warning value"\n/>;\n```\n\nYou can make the `TextInput` read only by passing a `isReadOnly` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isReadOnly\n placeholder="Placeholder"\n defaultValue="Read only value"\n/>;\n```\n\nYou can disable the `TextInput` by passing a `isDisabled` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isDisabled\n placeholder="Placeholder"\n defaultValue="Disabled value"\n description="Description"\n/>;\n```\n\nYou can control the `TextInput` by passing a `value` prop and a `onChange` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n value={"Controlled value"}\n onChange={(event) => setValue(event.target.value)}\n placeholder="Placeholder"\n description="Description"\n/>;\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying `<input>` element\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>;\n```',props:`interface TextInputProps {
|
|
21754
22443
|
/**
|
|
21755
22444
|
* The unique identifier for the block. This is used to identify the block in
|
|
21756
22445
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -22057,7 +22746,7 @@ labelPosition?: any
|
|
|
22057
22746
|
label="Label"
|
|
22058
22747
|
name="text-input"
|
|
22059
22748
|
placeholder="Placeholder"
|
|
22060
|
-
description="Description" />;`}],implementation:""},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"
|
|
22749
|
+
description="Description" />;`}],implementation:""},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.",documentation:'`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.\n\n```tsx\nimport { ThemeProvider, ActionButton } from "../../utils";\nimport { themes } from "@baseline-ui/tokens";\n\n<ThemeProvider theme={themes.base.light}>\n <ActionButton label="Click me" />\n</ThemeProvider>;\n```\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:',props:`interface ThemeProviderProps {
|
|
22061
22750
|
/**
|
|
22062
22751
|
* The unique identifier for the block. This is used to identify the block in
|
|
22063
22752
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -22224,7 +22913,7 @@ export const ThemeChangeTestComponent: React.FC = () => {
|
|
|
22224
22913
|
<div data-testid="changed-to">{changedTo}</div>
|
|
22225
22914
|
</>
|
|
22226
22915
|
);
|
|
22227
|
-
};`},similarTo:[],figmaUrl:null},TimeField:{id:"core-forms-timefield",breadcrumb:"Core/Forms/TimeField",importStatement:'import { TimeField, VariantViewer } from "@baseline-ui/core";',description:"
|
|
22916
|
+
};`},similarTo:[],figmaUrl:null},TimeField:{id:"core-forms-timefield",breadcrumb:"Core/Forms/TimeField",importStatement:'import { TimeField, VariantViewer } from "@baseline-ui/core";',description:"`TimeField` is an input that lets users enter and edit a time value as individually focusable segments (hours, minutes, seconds, period). Use it when collecting a precise time of day with locale-aware formatting and keyboard-friendly editing.",documentation:`\`TimeField\` is an input that lets users enter and edit a time value as individually focusable segments (hours, minutes, seconds, period). Use it when collecting a precise time of day with locale-aware formatting and keyboard-friendly editing.
|
|
22228
22917
|
|
|
22229
22918
|
* Support for locale-specific formatting, number systems, hour cycles, and right-to-left layout.
|
|
22230
22919
|
* Times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
|
|
@@ -22604,9 +23293,7 @@ export const TimeFieldExample: React.FC<
|
|
|
22604
23293
|
ToastExample,
|
|
22605
23294
|
ToastWithAction,
|
|
22606
23295
|
VariantsExample,
|
|
22607
|
-
} from "@baseline-ui/core";`,description:"
|
|
22608
|
-
|
|
22609
|
-
A toast region is an ARIA landmark region labeled "Notifications" by default. It contains one or more visible toasts, displayed in priority order. When the maximum number of visible toasts is reached, additional toasts are queued until a visible toast is dismissed. Each toast is an ARIA alert element that includes the notification content and a close button.
|
|
23296
|
+
} from "@baseline-ui/core";`,description:"`Toast` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.",documentation:`\`Toast\` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.
|
|
22610
23297
|
|
|
22611
23298
|
* Automatically shifts focus to the next toast when a toast is closed.
|
|
22612
23299
|
* Toasts follow the [ARIA alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
|
|
@@ -22978,7 +23665,7 @@ export const VariantsExample = ({
|
|
|
22978
23665
|
</Box>
|
|
22979
23666
|
</>
|
|
22980
23667
|
);
|
|
22981
|
-
};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:'import { Box, ToggleButton, VariantViewer } from "@baseline-ui/core";',description:"
|
|
23668
|
+
};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:'import { Box, ToggleButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleButton` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.",documentation:`\`ToggleButton\` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.
|
|
22982
23669
|
|
|
22983
23670
|
* Native HTML \`<button>\` support
|
|
22984
23671
|
* Exposed as a toggle button via ARIA
|
|
@@ -23077,7 +23764,7 @@ elementType?: any
|
|
|
23077
23764
|
);`},{id:"core-buttons-togglebutton--default-selected",name:"Default Selected",snippet:'const DefaultSelected = () => <ToggleButton label="Toggle me" defaultSelected />;'},{id:"core-buttons-togglebutton--controlled",name:"Controlled",snippet:'const Controlled = () => <ToggleButton label="Toggle me" isSelected />;'},{id:"core-buttons-togglebutton--with-icon",name:"With Icon",snippet:'const WithIcon = () => <ToggleButton label="Toggle me" iconStart={EllipseIcon} />;'},{id:"core-buttons-togglebutton--disabled",name:"Disabled",snippet:`const Disabled = () => <Box display="flex" flexDirection="column" gap="xl">
|
|
23078
23765
|
<ToggleButton label="Toggle me" isDisabled />
|
|
23079
23766
|
<ToggleButton label="Toggle me" isDisabled defaultSelected={true} />
|
|
23080
|
-
</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"
|
|
23767
|
+
</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.",documentation:'`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.\n\n* Native HTML `<button>` support\n* Exposed as a toggle button via ARIA\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for `Space` and `Enter` keys\n\n```jsx\nimport { ToggleIconButton } from "../../utils";\nimport { TrashIcon } from "@baseline-ui/icons/20";\n\n<ToggleIconButton size="md" variant="primary" icon={TrashIcon} />;\n```\n\nYou can control the state of the button by passing the `isSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} isSelected={true} />\n```\n\nYou can set the default selection state of the button by passing the `defaultSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} defaultSelected={true} />\n```\n\nYou can disable the button by passing the `isDisabled` prop.\n\n```jsx\n<ToggleButton label={"Label"} isDisabled={true} />\n```\n\nYou can set different icons for the selected and unselected states by passing an object to the `icon` prop with `selected` and `unselected` keys.\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n| \\[data-selected] | Whether the button is currently selected. |\n\n| Key | Function |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |',props:`interface ToggleIconButtonProps {
|
|
23081
23768
|
/**
|
|
23082
23769
|
* The button's class name.
|
|
23083
23770
|
*/
|
|
@@ -23416,7 +24103,7 @@ export const StateSpecificIcon: React.FC<
|
|
|
23416
24103
|
Toolbar,
|
|
23417
24104
|
ToolbarChildren,
|
|
23418
24105
|
WithInput,
|
|
23419
|
-
} from "@baseline-ui/core";`,description:"
|
|
24106
|
+
} from "@baseline-ui/core";`,description:"`Toolbar` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.",documentation:`\`Toolbar\` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.
|
|
23420
24107
|
|
|
23421
24108
|
* The component is exposed to assistive technology as a \`toolbar\` element.
|
|
23422
24109
|
* The component is keyboard accessible. It supports arrow key navigation.
|
|
@@ -23764,7 +24451,7 @@ export const WithInput = () => {
|
|
|
23764
24451
|
<ActionButton label="Last" />
|
|
23765
24452
|
</Toolbar>
|
|
23766
24453
|
);
|
|
23767
|
-
};`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a
|
|
24454
|
+
};`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.",documentation:`\`Tooltip\` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.
|
|
23768
24455
|
|
|
23769
24456
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
23770
24457
|
* Automatic Hover management and cross browser normalization
|
|
@@ -24071,7 +24758,7 @@ export const CustomElementTooltip = () => (
|
|
|
24071
24758
|
VirtualizedTreeViewWithDescriptionsExample,
|
|
24072
24759
|
VirtualizedTreeViewWithExpandControlExample,
|
|
24073
24760
|
VirtualizedTreeViewWithRenameExample,
|
|
24074
|
-
} from "@baseline-ui/core";`,description:"
|
|
24761
|
+
} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:`\`TreeView\` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.
|
|
24075
24762
|
|
|
24076
24763
|
* Support for mouse, touch, and keyboard interaction
|
|
24077
24764
|
* Accessible via React Aria with full keyboard navigation
|
|
@@ -24720,7 +25407,7 @@ export const VirtualizedTreeViewWithRenameExample: React.FC<
|
|
|
24720
25407
|
VirtualListBoxGridLayoutExample,
|
|
24721
25408
|
VirtualListBoxListLayoutExample,
|
|
24722
25409
|
VirtualListBoxWithSectionsExample,
|
|
24723
|
-
} from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level
|
|
25410
|
+
} from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.",documentation:`\`UNSAFE_ListBox\` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.
|
|
24724
25411
|
|
|
24725
25412
|
> **Note:** The \`UNSAFE_\` prefix indicates that the component's API may change between minor versions. Use it with caution in production code and pin your dependency version.
|
|
24726
25413
|
|
|
@@ -31850,7 +32537,7 @@ padding={[null, "lg", "xl"]}
|
|
|
31850
32537
|
|
|
31851
32538
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
31852
32539
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
31853
|
-
* [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:"0.61.0"};var u=`
|
|
32540
|
+
* [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:"0.63.0"};var u=`
|
|
31854
32541
|
# Baseline UI MCP Server Guidelines
|
|
31855
32542
|
|
|
31856
32543
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -32010,8 +32697,8 @@ Use this tool to:
|
|
|
32010
32697
|
| --- | --- | --- |
|
|
32011
32698
|
${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
|
|
32012
32699
|
`)}
|
|
32013
|
-
`,
|
|
32700
|
+
`,S=Object.entries(c).map(([n,t])=>`${n}
|
|
32014
32701
|
|
|
32015
32702
|
${t.map(e=>"- "+e).join(`
|
|
32016
32703
|
`)}`).join(`
|
|
32017
|
-
`);async function
|
|
32704
|
+
`);async function P(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:S}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]}));let t=new stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await P())();
|