@baseline-ui/mcp 0.61.0 → 0.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/index.cjs +512 -80
- package/dist/index.js +512 -80
- package/package.json +1 -1
- package/sbom.json +1 -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:"
|
|
6699
|
+
};`},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:"`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\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 {
|
|
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
|
|
@@ -8243,7 +8241,7 @@ export const PopoverWithFrameBoundaryExample: React.FC<{
|
|
|
8243
8241
|
</FrameProvider>
|
|
8244
8242
|
</Box>
|
|
8245
8243
|
);
|
|
8246
|
-
};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"
|
|
8244
|
+
};`},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
8245
|
|
|
8248
8246
|
* Draw on the canvas with your mouse or pointer
|
|
8249
8247
|
* Undo and redo your drawings via keyboard shortcuts
|
|
@@ -8609,7 +8607,7 @@ export const TrackedControlledFreehandCanvas = ({
|
|
|
8609
8607
|
}}
|
|
8610
8608
|
/>
|
|
8611
8609
|
);
|
|
8612
|
-
};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"
|
|
8610
|
+
};`},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
8611
|
|
|
8614
8612
|
* **Item Selection**: Single or multiple selections with optional checkboxes.
|
|
8615
8613
|
* **Interactive Children**: Supports buttons, checkboxes, and menus within list items.
|
|
@@ -9060,7 +9058,7 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
|
|
|
9060
9058
|
</button>
|
|
9061
9059
|
</>
|
|
9062
9060
|
);
|
|
9063
|
-
};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"
|
|
9061
|
+
};`},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
9062
|
/**
|
|
9065
9063
|
* The unique identifier for the block. This is used to identify the block in
|
|
9066
9064
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -9203,7 +9201,7 @@ export const LocaleStringExample: React.FC<{
|
|
|
9203
9201
|
{formatter.formatMessage("greeting", { name })}
|
|
9204
9202
|
</div>
|
|
9205
9203
|
);
|
|
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
|
|
9204
|
+
};`},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
9205
|
|
|
9208
9206
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
9209
9207
|
* Labeling support for screen readers (aria-describedby)
|
|
@@ -9448,7 +9446,7 @@ accept?: any
|
|
|
9448
9446
|
ImageGalleryExample,
|
|
9449
9447
|
Text,
|
|
9450
9448
|
Virtualizer,
|
|
9451
|
-
} from "@baseline-ui/core";`,description:"
|
|
9449
|
+
} 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
9450
|
|
|
9453
9451
|
* An interactive, feature-rich display platform for image content
|
|
9454
9452
|
* Mouse, touch, and keyboard interaction support
|
|
@@ -10094,7 +10092,7 @@ export function RTLImageGalleryExample(
|
|
|
10094
10092
|
<ImageGallery {...props} />
|
|
10095
10093
|
</I18nProvider>
|
|
10096
10094
|
);
|
|
10097
|
-
}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert`
|
|
10095
|
+
}`},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
10096
|
|
|
10099
10097
|
* Exposed to assistive technology with \`role="alert"\`.
|
|
10100
10098
|
* Supports semantic variants for success, warning, error, and informational messages.
|
|
@@ -10879,7 +10877,7 @@ elementProps?: {
|
|
|
10879
10877
|
</div>
|
|
10880
10878
|
</div>
|
|
10881
10879
|
);
|
|
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:"
|
|
10880
|
+
};`}],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
10881
|
|
|
10884
10882
|
* Automatically detects the current selection and opens in the correct position
|
|
10885
10883
|
* Supports keyboard navigation
|
|
@@ -11081,7 +11079,7 @@ export const InlineToolbarExample = ({
|
|
|
11081
11079
|
)}
|
|
11082
11080
|
</InlineToolbar>
|
|
11083
11081
|
);
|
|
11084
|
-
};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"
|
|
11082
|
+
};`},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
11083
|
|
|
11086
11084
|
* Keycap-styled visual appearance
|
|
11087
11085
|
* OS-aware shortcut conversion (Ctrl becomes Cmd on Mac)
|
|
@@ -11158,7 +11156,7 @@ shouldUseSymbol?: boolean
|
|
|
11158
11156
|
<Kbd>Ctrl+Alt+Shift+Enter</Kbd>
|
|
11159
11157
|
</Box>
|
|
11160
11158
|
</Box>
|
|
11161
|
-
);`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"
|
|
11159
|
+
);`}],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
11160
|
/**
|
|
11163
11161
|
* Whether the link is disabled.
|
|
11164
11162
|
*/
|
|
@@ -11267,7 +11265,7 @@ role?: AriaRole
|
|
|
11267
11265
|
onPress={() => {
|
|
11268
11266
|
alert("Client side action");
|
|
11269
11267
|
}}
|
|
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 {
|
|
11268
|
+
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
11269
|
/**
|
|
11272
11270
|
* The unique identifier for the block. This is used to identify the block in
|
|
11273
11271
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -11916,7 +11914,7 @@ export const DynamicListBoxExample: React.FC<
|
|
|
11916
11914
|
) : null}
|
|
11917
11915
|
</Box>
|
|
11918
11916
|
);
|
|
11919
|
-
};`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"
|
|
11917
|
+
};`},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
11918
|
|
|
11921
11919
|
\`\`\`jsx
|
|
11922
11920
|
import { Markdown } from "@storybook/addon-docs/blocks";
|
|
@@ -12030,7 +12028,7 @@ console.log(greet('Markdown Maverick'));
|
|
|
12030
12028
|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
|
|
12031
12029
|
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
|
|
12032
12030
|
| 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:"
|
|
12031
|
+
\`}</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
12032
|
|
|
12035
12033
|
1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
|
|
12036
12034
|
2. Selection options: The component can be configured to allow single, multiple, or no selection.
|
|
@@ -12252,7 +12250,7 @@ id: string
|
|
|
12252
12250
|
* The default message to use if the message id is not found.
|
|
12253
12251
|
*/
|
|
12254
12252
|
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:"
|
|
12253
|
+
}`,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
12254
|
|
|
12257
12255
|
* The content outside the modal is hidden from screen readers.
|
|
12258
12256
|
* The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.
|
|
@@ -12799,7 +12797,7 @@ value: number
|
|
|
12799
12797
|
<strong>Formatted number</strong>: <NumberFormat value={0.35} style="percent" minimumFractionDigits={2} />
|
|
12800
12798
|
</div>
|
|
12801
12799
|
);
|
|
12802
|
-
};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"
|
|
12800
|
+
};`}],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
12801
|
/**
|
|
12804
12802
|
* The unique identifier for the block. This is used to identify the block in
|
|
12805
12803
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -13127,9 +13125,7 @@ errorMessage?: string
|
|
|
13127
13125
|
label="Label"
|
|
13128
13126
|
labelPosition="start"
|
|
13129
13127
|
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.
|
|
13128
|
+
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
13129
|
|
|
13134
13130
|
* Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units
|
|
13135
13131
|
* Automatically detects the numbering system used and supports parsing numbers not in the default numbering system for the locale
|
|
@@ -13354,7 +13350,7 @@ defaultValue?: any
|
|
|
13354
13350
|
PanelNestedExample,
|
|
13355
13351
|
PanelPersistentExample,
|
|
13356
13352
|
PanelVerticalExample,
|
|
13357
|
-
} from "@baseline-ui/core";`,description:"`PanelGroup`, `Panel`, and `PanelResizeHandle`
|
|
13353
|
+
} 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
13354
|
|
|
13359
13355
|
* Horizontal and vertical resizable layouts
|
|
13360
13356
|
* Supports nested layouts (horizontal inside vertical and vice versa)
|
|
@@ -14018,7 +14014,7 @@ export const PanelMaxSizeExample: FC<Omit<PanelGroupProps, "children">> = (
|
|
|
14018
14014
|
</PanelGroup>
|
|
14019
14015
|
</div>
|
|
14020
14016
|
);
|
|
14021
|
-
};`},similarTo:[],figmaUrl:null},PointPicker:{id:"core-content-pointpicker",breadcrumb:"Core/Content/PointPicker",importStatement:'import { Box, PointPicker, RichContentExample } from "@baseline-ui/core";',description:"
|
|
14017
|
+
};`},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
14018
|
|
|
14023
14019
|
\`\`\`tsx
|
|
14024
14020
|
import {
|
|
@@ -14698,7 +14694,7 @@ export const TrailingElementExample = () => {
|
|
|
14698
14694
|
PopoverWithScrollableViewportExample,
|
|
14699
14695
|
Tooltip,
|
|
14700
14696
|
VariantViewer,
|
|
14701
|
-
} from "@baseline-ui/core";`,description:"
|
|
14697
|
+
} 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
14698
|
|
|
14703
14699
|
* 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
14700
|
* 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.
|
|
@@ -15994,7 +15990,7 @@ className?: string
|
|
|
15994
15990
|
* The style applied to the root element of the component.
|
|
15995
15991
|
*/
|
|
15996
15992
|
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:"
|
|
15993
|
+
}`,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
15994
|
|
|
15999
15995
|
* Supports SVG, images and text
|
|
16000
15996
|
* Supports custom action buttons to interact with the preview
|
|
@@ -16214,7 +16210,7 @@ accent?: "theme" | "positive"
|
|
|
16214
16210
|
deleteAriaLabel="Delete"
|
|
16215
16211
|
addAriaLabel="Add"
|
|
16216
16212
|
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:"
|
|
16213
|
+
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
16214
|
/**
|
|
16219
16215
|
* The unique identifier for the block. This is used to identify the block in
|
|
16220
16216
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -16336,7 +16332,7 @@ errorMessage?: string
|
|
|
16336
16332
|
label="Label"
|
|
16337
16333
|
value={50}
|
|
16338
16334
|
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:"
|
|
16335
|
+
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
16336
|
/**
|
|
16341
16337
|
* The unique identifier for the block. This is used to identify the block in
|
|
16342
16338
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -16412,7 +16408,7 @@ variant?: "active" | "inactive" | "success" | "error"
|
|
|
16412
16408
|
],
|
|
16413
16409
|
}}
|
|
16414
16410
|
/>
|
|
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:
|
|
16411
|
+
);`},{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
16412
|
|
|
16417
16413
|
* Accessible \u2014 exposes \`role="radiogroup"\` and \`role="radio"\` with full ARIA attribute support (\`aria-checked\`, \`aria-disabled\`, \`aria-labelledby\`, \`aria-orientation\`).
|
|
16418
16414
|
* Keyboard navigation \u2014 arrow keys move focus and selection between options; supports both vertical (default) and horizontal orientations.
|
|
@@ -16667,7 +16663,7 @@ export const CustomRenderItem: React.FC<Omit<RadioGroupProps, "items">> = (
|
|
|
16667
16663
|
return (
|
|
16668
16664
|
<RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />
|
|
16669
16665
|
);
|
|
16670
|
-
};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"
|
|
16666
|
+
};`},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
16667
|
|
|
16672
16668
|
* It is exposed as a input checkbox via ARIA
|
|
16673
16669
|
* It has mouse, keyboard, and touch support
|
|
@@ -16794,7 +16790,7 @@ icon?: React.FC<IconProps>
|
|
|
16794
16790
|
ScrollControlButton,
|
|
16795
16791
|
ScrollControlButtonExample,
|
|
16796
16792
|
ScrollControlButtonReversedExample,
|
|
16797
|
-
} from "@baseline-ui/core";`,description:"
|
|
16793
|
+
} 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
16794
|
|
|
16799
16795
|
* Can be used to scroll to the bottom or top of a container
|
|
16800
16796
|
* Exposed to assistive technologies via aria attributes
|
|
@@ -17080,7 +17076,7 @@ export const ScrollControlButtonReversedExample: React.FC<
|
|
|
17080
17076
|
</div>
|
|
17081
17077
|
</>
|
|
17082
17078
|
);
|
|
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
|
|
17079
|
+
};`},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
17080
|
/**
|
|
17085
17081
|
* The unique identifier for the block. This is used to identify the block in
|
|
17086
17082
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -17158,7 +17154,7 @@ isClearFocusable?: boolean
|
|
|
17158
17154
|
placeholder="Search"
|
|
17159
17155
|
aria-label="Search"
|
|
17160
17156
|
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:"
|
|
17157
|
+
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
17158
|
|
|
17163
17159
|
* Exposed to assistive technology as a button with a listbox popup using ARIA (combined with useListBox)
|
|
17164
17160
|
* Support for selecting a single option or multiple options
|
|
@@ -17914,7 +17910,7 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
|
|
|
17914
17910
|
</Autocomplete>
|
|
17915
17911
|
</Virtualizer>
|
|
17916
17912
|
);
|
|
17917
|
-
};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"
|
|
17913
|
+
};`},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
17914
|
|
|
17919
17915
|
\`\`\`jsx
|
|
17920
17916
|
import { Separator } from "../../utils";
|
|
@@ -17991,7 +17987,31 @@ variant?: "primary" | "secondary"
|
|
|
17991
17987
|
*/
|
|
17992
17988
|
UNSAFE_omitRole?: boolean
|
|
17993
17989
|
}`,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:"
|
|
17990
|
+
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.
|
|
17991
|
+
|
|
17992
|
+
\`\`\`jsx
|
|
17993
|
+
import { Skeleton } from "@baseline-ui/core";
|
|
17994
|
+
|
|
17995
|
+
<Skeleton style={{ width: 200, height: 16, borderRadius: 9999 }} />;
|
|
17996
|
+
\`\`\`
|
|
17997
|
+
|
|
17998
|
+
Use \`clipPath\` or \`borderRadius\` to create any shape \u2014 stars, hearts, hexagons, chat bubbles, and more.
|
|
17999
|
+
|
|
18000
|
+
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:
|
|
18001
|
+
|
|
18002
|
+
\`\`\`jsx
|
|
18003
|
+
<div aria-busy={isLoading}>
|
|
18004
|
+
{isLoading ? (
|
|
18005
|
+
<Skeleton style={{ width: "100%", height: 200, borderRadius: 8 }} />
|
|
18006
|
+
) : (
|
|
18007
|
+
<RealContent />
|
|
18008
|
+
)}
|
|
18009
|
+
</div>
|
|
18010
|
+
\`\`\`
|
|
18011
|
+
|
|
18012
|
+
| Selector | Description |
|
|
18013
|
+
| ---------------------- | --------------------------------- |
|
|
18014
|
+
| \`.BaselineUI-Skeleton\` | The root element of the skeleton. |`,props:`interface SkeletonProps {
|
|
17995
18015
|
/**
|
|
17996
18016
|
* The className applied to the root element of the component.
|
|
17997
18017
|
*/
|
|
@@ -18170,7 +18190,7 @@ style?: React.CSSProperties
|
|
|
18170
18190
|
</Box>
|
|
18171
18191
|
</Box>
|
|
18172
18192
|
</Box>
|
|
18173
|
-
);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"
|
|
18193
|
+
);`}],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
18194
|
/**
|
|
18175
18195
|
* The unique identifier for the block. This is used to identify the block in
|
|
18176
18196
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -18241,7 +18261,7 @@ numberInputStyle?: NumberInputProps["style"]
|
|
|
18241
18261
|
numberFormatOptions={{
|
|
18242
18262
|
style: "percent",
|
|
18243
18263
|
}} />;`},{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:"
|
|
18264
|
+
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
18265
|
|
|
18246
18266
|
* Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`denied\`, and \`success\`
|
|
18247
18267
|
* Tinted variants available for a lighter, more subtle appearance
|
|
@@ -18659,7 +18679,422 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
|
|
|
18659
18679
|
)}
|
|
18660
18680
|
/>
|
|
18661
18681
|
);
|
|
18662
|
-
};`},similarTo:[],figmaUrl:null},
|
|
18682
|
+
};`},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 {
|
|
18683
|
+
/**
|
|
18684
|
+
* The unique identifier for the block. This is used to identify the block in
|
|
18685
|
+
* the DOM and in the block map. It is added as a data attribute
|
|
18686
|
+
* \`data-block-id\` to the root element of the block if a DOM node is
|
|
18687
|
+
* rendered.
|
|
18688
|
+
*/
|
|
18689
|
+
data-block-id?: string
|
|
18690
|
+
/**
|
|
18691
|
+
* Represents a data block group. This is similar to \`data-block-id\` but it
|
|
18692
|
+
* doesn't have to be unique just like \`class\`. This is used to group blocks
|
|
18693
|
+
* together in the DOM and in the block map. It is added as a data attribute
|
|
18694
|
+
* \`data-block-class\` to the root element of the block if a DOM node is
|
|
18695
|
+
* rendered.
|
|
18696
|
+
*/
|
|
18697
|
+
data-block-class?: string
|
|
18698
|
+
/**
|
|
18699
|
+
* The className applied to the root element of the component.
|
|
18700
|
+
*/
|
|
18701
|
+
className?: string
|
|
18702
|
+
/**
|
|
18703
|
+
* The style applied to the root element of the component.
|
|
18704
|
+
*/
|
|
18705
|
+
style?: React.CSSProperties
|
|
18706
|
+
/**
|
|
18707
|
+
* The steps to render.
|
|
18708
|
+
*/
|
|
18709
|
+
items: StepperItem[]
|
|
18710
|
+
/**
|
|
18711
|
+
* Layout variant.
|
|
18712
|
+
*
|
|
18713
|
+
* - \`condensed\` \u2014 indicator only, short connector between steps.
|
|
18714
|
+
* - \`expanded\` \u2014 indicator with title and optional description, connector fills the gap.
|
|
18715
|
+
*
|
|
18716
|
+
* @default "expanded"
|
|
18717
|
+
*/
|
|
18718
|
+
variant?: "condensed" | "expanded"
|
|
18719
|
+
/**
|
|
18720
|
+
* Size of the indicator circle and accompanying text.
|
|
18721
|
+
*
|
|
18722
|
+
* @default "md"
|
|
18723
|
+
*/
|
|
18724
|
+
size?: "sm" | "md"
|
|
18725
|
+
/**
|
|
18726
|
+
* Currently selected step key (controlled).
|
|
18727
|
+
*/
|
|
18728
|
+
selectedStep?: Key
|
|
18729
|
+
/**
|
|
18730
|
+
* Initially selected step key (uncontrolled).
|
|
18731
|
+
*/
|
|
18732
|
+
defaultSelectedStep?: Key
|
|
18733
|
+
/**
|
|
18734
|
+
* Called when the selected step changes.
|
|
18735
|
+
*/
|
|
18736
|
+
onSelectionChange?: (key: Key) => void
|
|
18737
|
+
/**
|
|
18738
|
+
* Last completed step \u2014 the progress frontier (controlled).
|
|
18739
|
+
*/
|
|
18740
|
+
lastCompletedStep?: Key
|
|
18741
|
+
/**
|
|
18742
|
+
* Initial last completed step (uncontrolled).
|
|
18743
|
+
*/
|
|
18744
|
+
defaultLastCompletedStep?: Key
|
|
18745
|
+
/**
|
|
18746
|
+
* Called when the last completed step changes.
|
|
18747
|
+
*/
|
|
18748
|
+
onLastCompletedStepChange?: (key: Key | null) => void
|
|
18749
|
+
/**
|
|
18750
|
+
* Disable the whole stepper.
|
|
18751
|
+
*/
|
|
18752
|
+
isDisabled?: boolean
|
|
18753
|
+
/**
|
|
18754
|
+
* Accessibility label for the stepper. Falls back to a localized
|
|
18755
|
+
* "Progress" string if omitted; prefer supplying a flow-specific label
|
|
18756
|
+
* (e.g. "Checkout").
|
|
18757
|
+
*/
|
|
18758
|
+
aria-label?: string
|
|
18759
|
+
}`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
|
|
18760
|
+
items={items}
|
|
18761
|
+
aria-label="Checkout"
|
|
18762
|
+
defaultSelectedStep="shipping"
|
|
18763
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--condensed",name:"Condensed",snippet:`const Condensed = () => <Stepper
|
|
18764
|
+
items={items}
|
|
18765
|
+
aria-label="Checkout"
|
|
18766
|
+
defaultSelectedStep="shipping"
|
|
18767
|
+
defaultLastCompletedStep="cart"
|
|
18768
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--size-small-expanded",name:"Size Small Expanded",snippet:`const SizeSmallExpanded = () => <Stepper
|
|
18769
|
+
items={items}
|
|
18770
|
+
aria-label="Checkout"
|
|
18771
|
+
defaultSelectedStep="shipping"
|
|
18772
|
+
defaultLastCompletedStep="cart"
|
|
18773
|
+
size="sm"
|
|
18774
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--size-small-condensed",name:"Size Small Condensed",snippet:`const SizeSmallCondensed = () => <Stepper
|
|
18775
|
+
items={items}
|
|
18776
|
+
aria-label="Checkout"
|
|
18777
|
+
defaultSelectedStep="shipping"
|
|
18778
|
+
defaultLastCompletedStep="cart"
|
|
18779
|
+
size="sm"
|
|
18780
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--all-states",name:"All States",snippet:`const AllStates = () => (
|
|
18781
|
+
<Box display="flex" flexDirection="column" gap="3xl">
|
|
18782
|
+
{(["sm", "md"] as const).map((size) =>
|
|
18783
|
+
(["condensed", "expanded"] as const).map((variant) => (
|
|
18784
|
+
<Box
|
|
18785
|
+
key={\`\${size}-\${variant}\`}
|
|
18786
|
+
display="flex"
|
|
18787
|
+
flexDirection="column"
|
|
18788
|
+
gap="md"
|
|
18789
|
+
>
|
|
18790
|
+
<Text type="label" size="sm" color="text.secondary">
|
|
18791
|
+
size={size} \xB7 variant={variant}
|
|
18792
|
+
</Text>
|
|
18793
|
+
<Stepper
|
|
18794
|
+
items={items}
|
|
18795
|
+
size={size}
|
|
18796
|
+
variant={variant}
|
|
18797
|
+
defaultSelectedStep="shipping"
|
|
18798
|
+
defaultLastCompletedStep="cart"
|
|
18799
|
+
aria-label="Checkout"
|
|
18800
|
+
/>
|
|
18801
|
+
</Box>
|
|
18802
|
+
)),
|
|
18803
|
+
)}
|
|
18804
|
+
</Box>
|
|
18805
|
+
);`},{id:"core-navigation-stepper--with-disabled-step",name:"With Disabled Step",snippet:`const WithDisabledStep = () => <Stepper
|
|
18806
|
+
items={[
|
|
18807
|
+
{ key: "a", title: "A", description: "First" },
|
|
18808
|
+
{
|
|
18809
|
+
key: "b",
|
|
18810
|
+
title: "B",
|
|
18811
|
+
description: "Second (disabled)",
|
|
18812
|
+
isDisabled: true,
|
|
18813
|
+
},
|
|
18814
|
+
{ key: "c", title: "C", description: "Third" },
|
|
18815
|
+
]}
|
|
18816
|
+
aria-label="Checkout"
|
|
18817
|
+
defaultSelectedStep="a"
|
|
18818
|
+
defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
|
|
18819
|
+
items={items.map((i) => ({ key: i.key }))}
|
|
18820
|
+
aria-label="Checkout"
|
|
18821
|
+
defaultSelectedStep="shipping"
|
|
18822
|
+
defaultLastCompletedStep="cart"
|
|
18823
|
+
variant="condensed" />;`},{id:"core-navigation-stepper--is-disabled",name:"Is Disabled",snippet:`const IsDisabled = () => <Stepper
|
|
18824
|
+
items={items}
|
|
18825
|
+
aria-label="Checkout"
|
|
18826
|
+
defaultSelectedStep="shipping"
|
|
18827
|
+
defaultLastCompletedStep="cart"
|
|
18828
|
+
isDisabled />;`},{id:"core-navigation-stepper--expanded-without-descriptions",name:"Expanded Without Descriptions",snippet:`const ExpandedWithoutDescriptions = () => <Stepper
|
|
18829
|
+
items={items.map(({ key, title }) => ({ key, title }))}
|
|
18830
|
+
aria-label="Checkout"
|
|
18831
|
+
defaultSelectedStep="shipping"
|
|
18832
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--long-title-and-description",name:"Long Title And Description",snippet:`const LongTitleAndDescription = () => <Stepper
|
|
18833
|
+
items={[
|
|
18834
|
+
{
|
|
18835
|
+
key: "cart",
|
|
18836
|
+
title: "Review your shopping cart and apply any promo codes",
|
|
18837
|
+
description:
|
|
18838
|
+
"Make sure quantities and shipping options are correct before continuing to the next step.",
|
|
18839
|
+
},
|
|
18840
|
+
{
|
|
18841
|
+
key: "shipping",
|
|
18842
|
+
title: "Confirm shipping address and delivery method",
|
|
18843
|
+
description:
|
|
18844
|
+
"We will use this address for delivery and any required customs documentation.",
|
|
18845
|
+
},
|
|
18846
|
+
{
|
|
18847
|
+
key: "payment",
|
|
18848
|
+
title: "Choose a payment method and complete checkout",
|
|
18849
|
+
description:
|
|
18850
|
+
"Your payment is processed securely; we never store full card details.",
|
|
18851
|
+
},
|
|
18852
|
+
]}
|
|
18853
|
+
aria-label="Checkout"
|
|
18854
|
+
defaultSelectedStep="shipping"
|
|
18855
|
+
defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--two-steps",name:"Two Steps",snippet:`const TwoSteps = () => <Stepper
|
|
18856
|
+
items={[
|
|
18857
|
+
{ key: "first", title: "First", description: "Start here" },
|
|
18858
|
+
{ key: "second", title: "Second", description: "Finish here" },
|
|
18859
|
+
]}
|
|
18860
|
+
aria-label="Checkout"
|
|
18861
|
+
defaultSelectedStep="second"
|
|
18862
|
+
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
|
|
18863
|
+
items={items}
|
|
18864
|
+
aria-label="Checkout"
|
|
18865
|
+
defaultSelectedStep="payment"
|
|
18866
|
+
defaultLastCompletedStep="payment" />;`},{id:"core-navigation-stepper--frontier-ahead-of-selection",name:"Frontier Ahead Of Selection",snippet:`const FrontierAheadOfSelection = () => <Stepper
|
|
18867
|
+
items={items}
|
|
18868
|
+
aria-label="Checkout"
|
|
18869
|
+
defaultSelectedStep="cart"
|
|
18870
|
+
defaultLastCompletedStep="shipping" />;`},{id:"core-navigation-stepper--single-item",name:"Single Item",snippet:`const SingleItem = () => <Stepper
|
|
18871
|
+
items={[{ key: "only", title: "Only step", description: "Just one step" }]}
|
|
18872
|
+
aria-label="Checkout"
|
|
18873
|
+
defaultSelectedStep="only"
|
|
18874
|
+
defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only-expanded",name:"Indicator Only Expanded",snippet:`const IndicatorOnlyExpanded = () => <Stepper
|
|
18875
|
+
items={items.map((i) => ({ key: i.key }))}
|
|
18876
|
+
aria-label="Checkout"
|
|
18877
|
+
defaultSelectedStep="shipping"
|
|
18878
|
+
defaultLastCompletedStep="cart"
|
|
18879
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--mixed-indicator-and-titled-items",name:"Mixed Indicator And Titled Items",snippet:`const MixedIndicatorAndTitledItems = () => <Stepper
|
|
18880
|
+
items={[
|
|
18881
|
+
{ key: "cart", title: "Cart", description: "Review items" },
|
|
18882
|
+
{ key: "shipping", "aria-label": "Shipping address" },
|
|
18883
|
+
{ key: "payment", title: "Payment", description: "Pay securely" },
|
|
18884
|
+
]}
|
|
18885
|
+
aria-label="Checkout"
|
|
18886
|
+
defaultSelectedStep="shipping"
|
|
18887
|
+
defaultLastCompletedStep="cart"
|
|
18888
|
+
variant="expanded" />;`},{id:"core-navigation-stepper--per-item-aria-label-overrides-title",name:"Per Item Aria Label Overrides Title",snippet:`const PerItemAriaLabelOverridesTitle = () => <Stepper
|
|
18889
|
+
items={[
|
|
18890
|
+
{
|
|
18891
|
+
key: "cart",
|
|
18892
|
+
title: "Cart",
|
|
18893
|
+
description: "Review items",
|
|
18894
|
+
"aria-label": "Cart \u2014 3 items, total $42",
|
|
18895
|
+
},
|
|
18896
|
+
{
|
|
18897
|
+
key: "shipping",
|
|
18898
|
+
title: "Shipping",
|
|
18899
|
+
description: "Enter address",
|
|
18900
|
+
"aria-label": "Shipping \u2014 express delivery",
|
|
18901
|
+
},
|
|
18902
|
+
{
|
|
18903
|
+
key: "payment",
|
|
18904
|
+
title: "Payment",
|
|
18905
|
+
description: "Pay securely",
|
|
18906
|
+
"aria-label": "Payment \u2014 Visa ending in 1234",
|
|
18907
|
+
},
|
|
18908
|
+
]}
|
|
18909
|
+
aria-label="Checkout"
|
|
18910
|
+
defaultSelectedStep="shipping"
|
|
18911
|
+
defaultLastCompletedStep="cart"
|
|
18912
|
+
variant="expanded" />;`}],implementation:`import React from "react";
|
|
18913
|
+
|
|
18914
|
+
import { ActionButton } from "../../ActionButton";
|
|
18915
|
+
import { Box } from "../../Box";
|
|
18916
|
+
import { Code } from "../../Code";
|
|
18917
|
+
import { Text } from "../../Text";
|
|
18918
|
+
import { Stepper } from "../Stepper";
|
|
18919
|
+
|
|
18920
|
+
import type { StepperItem } from "../Stepper.types";
|
|
18921
|
+
import type { Key } from "react-aria";
|
|
18922
|
+
|
|
18923
|
+
export const checkoutItems: StepperItem[] = [
|
|
18924
|
+
{ key: "cart", title: "Cart", description: "Review items" },
|
|
18925
|
+
{ key: "shipping", title: "Shipping", description: "Enter address" },
|
|
18926
|
+
{ key: "payment", title: "Payment", description: "Pay securely" },
|
|
18927
|
+
];
|
|
18928
|
+
|
|
18929
|
+
const defaultItems = checkoutItems;
|
|
18930
|
+
|
|
18931
|
+
export interface ControlledStepperProps {
|
|
18932
|
+
items?: StepperItem[];
|
|
18933
|
+
initialSelected?: Key;
|
|
18934
|
+
initialLastCompleted?: Key | null;
|
|
18935
|
+
onSelectionChange?: (key: Key) => void;
|
|
18936
|
+
onLastCompletedStepChange?: (key: Key | null) => void;
|
|
18937
|
+
}
|
|
18938
|
+
|
|
18939
|
+
export function ControlledStepper({
|
|
18940
|
+
items = defaultItems,
|
|
18941
|
+
initialSelected = "shipping",
|
|
18942
|
+
initialLastCompleted = "cart",
|
|
18943
|
+
onSelectionChange,
|
|
18944
|
+
onLastCompletedStepChange,
|
|
18945
|
+
}: ControlledStepperProps) {
|
|
18946
|
+
const [selected, setSelected] = React.useState<Key>(initialSelected);
|
|
18947
|
+
const [lastCompleted, setLastCompleted] = React.useState<Key | null>(
|
|
18948
|
+
initialLastCompleted,
|
|
18949
|
+
);
|
|
18950
|
+
|
|
18951
|
+
const advance = () => {
|
|
18952
|
+
const idx = items.findIndex((i) => i.key === selected);
|
|
18953
|
+
const next = items[idx + 1];
|
|
18954
|
+
if (next) setSelected(next.key);
|
|
18955
|
+
};
|
|
18956
|
+
|
|
18957
|
+
return (
|
|
18958
|
+
<div>
|
|
18959
|
+
<Stepper
|
|
18960
|
+
items={items}
|
|
18961
|
+
selectedStep={selected}
|
|
18962
|
+
lastCompletedStep={lastCompleted ?? undefined}
|
|
18963
|
+
onSelectionChange={(key) => {
|
|
18964
|
+
setSelected(key);
|
|
18965
|
+
onSelectionChange?.(key);
|
|
18966
|
+
}}
|
|
18967
|
+
onLastCompletedStepChange={(key) => {
|
|
18968
|
+
setLastCompleted(key);
|
|
18969
|
+
onLastCompletedStepChange?.(key);
|
|
18970
|
+
}}
|
|
18971
|
+
aria-label="Checkout"
|
|
18972
|
+
/>
|
|
18973
|
+
<button type="button" onClick={advance}>
|
|
18974
|
+
Next
|
|
18975
|
+
</button>
|
|
18976
|
+
</div>
|
|
18977
|
+
);
|
|
18978
|
+
}
|
|
18979
|
+
|
|
18980
|
+
export interface CheckoutWizardProps {
|
|
18981
|
+
items?: StepperItem[];
|
|
18982
|
+
initialSelectedStep?: Key;
|
|
18983
|
+
}
|
|
18984
|
+
|
|
18985
|
+
/**
|
|
18986
|
+
* Wizard-style controlled Stepper with Back/Continue buttons, a step-content
|
|
18987
|
+
* panel, and an external state readout. Shared by the Storybook \`Controlled\`
|
|
18988
|
+
* story and Playwright spec.
|
|
18989
|
+
*/
|
|
18990
|
+
export function CheckoutWizard({
|
|
18991
|
+
items = defaultItems,
|
|
18992
|
+
initialSelectedStep,
|
|
18993
|
+
}: CheckoutWizardProps) {
|
|
18994
|
+
const [selected, setSelected] = React.useState<Key>(
|
|
18995
|
+
initialSelectedStep ?? items[0].key,
|
|
18996
|
+
);
|
|
18997
|
+
const [lastCompleted, setLastCompleted] = React.useState<Key | null>(null);
|
|
18998
|
+
|
|
18999
|
+
const selectedIndex = items.findIndex((item) => item.key === selected);
|
|
19000
|
+
const currentItem = items[selectedIndex];
|
|
19001
|
+
const isFirst = selectedIndex <= 0;
|
|
19002
|
+
const isLast = selectedIndex === items.length - 1;
|
|
19003
|
+
|
|
19004
|
+
const handleBack = () => {
|
|
19005
|
+
if (!isFirst) setSelected(items[selectedIndex - 1].key);
|
|
19006
|
+
};
|
|
19007
|
+
|
|
19008
|
+
const handleNext = () => {
|
|
19009
|
+
if (isLast) return;
|
|
19010
|
+
setSelected(items[selectedIndex + 1].key);
|
|
19011
|
+
};
|
|
19012
|
+
|
|
19013
|
+
return (
|
|
19014
|
+
<Box display="flex" flexDirection="column" gap="lg">
|
|
19015
|
+
<Box
|
|
19016
|
+
display="flex"
|
|
19017
|
+
flexDirection="column"
|
|
19018
|
+
gap="2xl"
|
|
19019
|
+
padding="2xl"
|
|
19020
|
+
backgroundColor="background.primary.subtle"
|
|
19021
|
+
borderRadius="lg"
|
|
19022
|
+
borderWidth={1}
|
|
19023
|
+
borderStyle="solid"
|
|
19024
|
+
borderColor="border.subtle"
|
|
19025
|
+
>
|
|
19026
|
+
<Stepper
|
|
19027
|
+
items={items}
|
|
19028
|
+
selectedStep={selected}
|
|
19029
|
+
onSelectionChange={setSelected}
|
|
19030
|
+
onLastCompletedStepChange={setLastCompleted}
|
|
19031
|
+
aria-label="Checkout"
|
|
19032
|
+
/>
|
|
19033
|
+
|
|
19034
|
+
<Box
|
|
19035
|
+
display="flex"
|
|
19036
|
+
flexDirection="column"
|
|
19037
|
+
gap="sm"
|
|
19038
|
+
paddingY="lg"
|
|
19039
|
+
style={{ minHeight: 140 }}
|
|
19040
|
+
>
|
|
19041
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19042
|
+
Step {selectedIndex + 1} of {items.length}
|
|
19043
|
+
</Text>
|
|
19044
|
+
<Text type="title" size="lg" elementType="h3">
|
|
19045
|
+
{currentItem.title}
|
|
19046
|
+
</Text>
|
|
19047
|
+
{currentItem.description ? (
|
|
19048
|
+
<Text type="body" size="md" color="text.secondary">
|
|
19049
|
+
{currentItem.description}
|
|
19050
|
+
</Text>
|
|
19051
|
+
) : null}
|
|
19052
|
+
</Box>
|
|
19053
|
+
|
|
19054
|
+
<Box
|
|
19055
|
+
display="flex"
|
|
19056
|
+
justifyContent="space-between"
|
|
19057
|
+
alignItems="center"
|
|
19058
|
+
gap="sm"
|
|
19059
|
+
>
|
|
19060
|
+
<ActionButton
|
|
19061
|
+
variant="tertiary"
|
|
19062
|
+
label="Back"
|
|
19063
|
+
onPress={handleBack}
|
|
19064
|
+
isDisabled={isFirst}
|
|
19065
|
+
/>
|
|
19066
|
+
<ActionButton
|
|
19067
|
+
variant="primary"
|
|
19068
|
+
label={isLast ? "Finish" : "Continue"}
|
|
19069
|
+
onPress={handleNext}
|
|
19070
|
+
isDisabled={isLast}
|
|
19071
|
+
/>
|
|
19072
|
+
</Box>
|
|
19073
|
+
</Box>
|
|
19074
|
+
|
|
19075
|
+
<Box
|
|
19076
|
+
display="flex"
|
|
19077
|
+
gap="lg"
|
|
19078
|
+
paddingX="md"
|
|
19079
|
+
alignItems="center"
|
|
19080
|
+
justifyContent="center"
|
|
19081
|
+
>
|
|
19082
|
+
<Box display="flex" gap="xs" alignItems="center">
|
|
19083
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19084
|
+
selected
|
|
19085
|
+
</Text>
|
|
19086
|
+
<Code>{String(selected)}</Code>
|
|
19087
|
+
</Box>
|
|
19088
|
+
<Box display="flex" gap="xs" alignItems="center">
|
|
19089
|
+
<Text type="label" size="sm" color="text.tertiary">
|
|
19090
|
+
lastCompleted
|
|
19091
|
+
</Text>
|
|
19092
|
+
<Code>{lastCompleted === null ? "null" : String(lastCompleted)}</Code>
|
|
19093
|
+
</Box>
|
|
19094
|
+
</Box>
|
|
19095
|
+
</Box>
|
|
19096
|
+
);
|
|
19097
|
+
}`},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
19098
|
|
|
18664
19099
|
* This component is built on top of the native \`input[type=checkbox]\` element.
|
|
18665
19100
|
* Full support for browser features like form autofill
|
|
@@ -18852,7 +19287,7 @@ statusLabel?: {
|
|
|
18852
19287
|
Toolbar,
|
|
18853
19288
|
Virtualizer,
|
|
18854
19289
|
VisuallyHidden,
|
|
18855
|
-
} from "@baseline-ui/core";`,description:"
|
|
19290
|
+
} 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
19291
|
|
|
18857
19292
|
* Column sorting with visual sort indicator
|
|
18858
19293
|
* Row selection (single and multiple) with checkbox support
|
|
@@ -20793,8 +21228,7 @@ export const TagAndMenuTableExample: React.FC = () => (
|
|
|
20793
21228
|
})}
|
|
20794
21229
|
</TableBody>
|
|
20795
21230
|
</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.
|
|
21231
|
+
);`},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
21232
|
|
|
20799
21233
|
* Full support for mouse, keyboard, and touch interactions
|
|
20800
21234
|
* Supports disabled tabs
|
|
@@ -21106,7 +21540,7 @@ export const AddButtonExample = () => {
|
|
|
21106
21540
|
))}
|
|
21107
21541
|
</Tabs>
|
|
21108
21542
|
);
|
|
21109
|
-
};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a
|
|
21543
|
+
};`},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
21544
|
/**
|
|
21111
21545
|
* The unique identifier for the block. This is used to identify the block in
|
|
21112
21546
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -21167,7 +21601,7 @@ isSelected?: boolean
|
|
|
21167
21601
|
* is rendered.
|
|
21168
21602
|
*/
|
|
21169
21603
|
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
|
|
21604
|
+
}`,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
21605
|
|
|
21172
21606
|
* The component is exposed to assistive technology as a grid using ARIA
|
|
21173
21607
|
* Keyboard navigation supports arrow keys, home, end, page up, page down, space and enter
|
|
@@ -21448,7 +21882,7 @@ export const RemovableTagGroup: React.FC<
|
|
|
21448
21882
|
}}
|
|
21449
21883
|
/>
|
|
21450
21884
|
);
|
|
21451
|
-
};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"
|
|
21885
|
+
};`},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
21886
|
|
|
21453
21887
|
* Supports both string and number tags.
|
|
21454
21888
|
* Keyboard handling of next and previous buttons.
|
|
@@ -21648,7 +22082,7 @@ export const TaggedPaginationExample: React.FC<
|
|
|
21648
22082
|
{...props}
|
|
21649
22083
|
/>
|
|
21650
22084
|
);
|
|
21651
|
-
};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"
|
|
22085
|
+
};`},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
22086
|
/**
|
|
21653
22087
|
* The unique identifier for the block. This is used to identify the block in
|
|
21654
22088
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -21750,7 +22184,7 @@ export function TextWithRef() {
|
|
|
21750
22184
|
<span data-testid="tag-name">{tag}</span>
|
|
21751
22185
|
</>
|
|
21752
22186
|
);
|
|
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
|
|
22187
|
+
}`},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
22188
|
/**
|
|
21755
22189
|
* The unique identifier for the block. This is used to identify the block in
|
|
21756
22190
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -22057,7 +22491,7 @@ labelPosition?: any
|
|
|
22057
22491
|
label="Label"
|
|
22058
22492
|
name="text-input"
|
|
22059
22493
|
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:"
|
|
22494
|
+
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
22495
|
/**
|
|
22062
22496
|
* The unique identifier for the block. This is used to identify the block in
|
|
22063
22497
|
* the DOM and in the block map. It is added as a data attribute
|
|
@@ -22224,7 +22658,7 @@ export const ThemeChangeTestComponent: React.FC = () => {
|
|
|
22224
22658
|
<div data-testid="changed-to">{changedTo}</div>
|
|
22225
22659
|
</>
|
|
22226
22660
|
);
|
|
22227
|
-
};`},similarTo:[],figmaUrl:null},TimeField:{id:"core-forms-timefield",breadcrumb:"Core/Forms/TimeField",importStatement:'import { TimeField, VariantViewer } from "@baseline-ui/core";',description:"
|
|
22661
|
+
};`},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
22662
|
|
|
22229
22663
|
* Support for locale-specific formatting, number systems, hour cycles, and right-to-left layout.
|
|
22230
22664
|
* Times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
|
|
@@ -22604,9 +23038,7 @@ export const TimeFieldExample: React.FC<
|
|
|
22604
23038
|
ToastExample,
|
|
22605
23039
|
ToastWithAction,
|
|
22606
23040
|
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.
|
|
23041
|
+
} 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
23042
|
|
|
22611
23043
|
* Automatically shifts focus to the next toast when a toast is closed.
|
|
22612
23044
|
* 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 +23410,7 @@ export const VariantsExample = ({
|
|
|
22978
23410
|
</Box>
|
|
22979
23411
|
</>
|
|
22980
23412
|
);
|
|
22981
|
-
};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:'import { Box, ToggleButton, VariantViewer } from "@baseline-ui/core";',description:"
|
|
23413
|
+
};`},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
23414
|
|
|
22983
23415
|
* Native HTML \`<button>\` support
|
|
22984
23416
|
* Exposed as a toggle button via ARIA
|
|
@@ -23077,7 +23509,7 @@ elementType?: any
|
|
|
23077
23509
|
);`},{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
23510
|
<ToggleButton label="Toggle me" isDisabled />
|
|
23079
23511
|
<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:"
|
|
23512
|
+
</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
23513
|
/**
|
|
23082
23514
|
* The button's class name.
|
|
23083
23515
|
*/
|
|
@@ -23416,7 +23848,7 @@ export const StateSpecificIcon: React.FC<
|
|
|
23416
23848
|
Toolbar,
|
|
23417
23849
|
ToolbarChildren,
|
|
23418
23850
|
WithInput,
|
|
23419
|
-
} from "@baseline-ui/core";`,description:"
|
|
23851
|
+
} 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
23852
|
|
|
23421
23853
|
* The component is exposed to assistive technology as a \`toolbar\` element.
|
|
23422
23854
|
* The component is keyboard accessible. It supports arrow key navigation.
|
|
@@ -23764,7 +24196,7 @@ export const WithInput = () => {
|
|
|
23764
24196
|
<ActionButton label="Last" />
|
|
23765
24197
|
</Toolbar>
|
|
23766
24198
|
);
|
|
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
|
|
24199
|
+
};`},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
24200
|
|
|
23769
24201
|
* Automatic handling of Keyboard focus management and cross browser normalization
|
|
23770
24202
|
* Automatic Hover management and cross browser normalization
|
|
@@ -24071,7 +24503,7 @@ export const CustomElementTooltip = () => (
|
|
|
24071
24503
|
VirtualizedTreeViewWithDescriptionsExample,
|
|
24072
24504
|
VirtualizedTreeViewWithExpandControlExample,
|
|
24073
24505
|
VirtualizedTreeViewWithRenameExample,
|
|
24074
|
-
} from "@baseline-ui/core";`,description:"
|
|
24506
|
+
} 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
24507
|
|
|
24076
24508
|
* Support for mouse, touch, and keyboard interaction
|
|
24077
24509
|
* Accessible via React Aria with full keyboard navigation
|
|
@@ -24720,7 +25152,7 @@ export const VirtualizedTreeViewWithRenameExample: React.FC<
|
|
|
24720
25152
|
VirtualListBoxGridLayoutExample,
|
|
24721
25153
|
VirtualListBoxListLayoutExample,
|
|
24722
25154
|
VirtualListBoxWithSectionsExample,
|
|
24723
|
-
} from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level
|
|
25155
|
+
} 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
25156
|
|
|
24725
25157
|
> **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
25158
|
|
|
@@ -31850,7 +32282,7 @@ padding={[null, "lg", "xl"]}
|
|
|
31850
32282
|
|
|
31851
32283
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
31852
32284
|
* [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=`
|
|
32285
|
+
* [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.62.0"};var u=`
|
|
31854
32286
|
# Baseline UI MCP Server Guidelines
|
|
31855
32287
|
|
|
31856
32288
|
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 +32442,8 @@ Use this tool to:
|
|
|
32010
32442
|
| --- | --- | --- |
|
|
32011
32443
|
${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
|
|
32012
32444
|
`)}
|
|
32013
|
-
`,
|
|
32445
|
+
`,S=Object.entries(c).map(([n,t])=>`${n}
|
|
32014
32446
|
|
|
32015
32447
|
${t.map(e=>"- "+e).join(`
|
|
32016
32448
|
`)}`).join(`
|
|
32017
|
-
`);async function
|
|
32449
|
+
`);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())();
|