@stratakit/structures/dist/Toolbar.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface ToolbarGroupProps extends BaseProps {
    /** Must be set to `"solid"` for now. */
    variant: "solid";
    /**
     * The orientation of the toolbar.
     * @default "horizontal"
     */
    orientation?: "horizontal" | "vertical";
}
/**
 * A toolbar for grouping related interactive elements.
 *
 * Follows the [ARIA Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) for reducing the number of tab stops.
 *
 * Example:
 * ```jsx
 * <Toolbar.Group variant="solid">
 *   <Toolbar.Item render={…} />
 *   <Toolbar.Item render={…} />
 *   <Toolbar.Item render={…} />
 * </Toolbar.Group>
 * ```
 *
 * A divider can be displayed between items by rendering the [`Divider`](https://stratakit.bentley.com/docs/components/divider/) component.
 *
 * ```jsx
 * <Toolbar.Group variant="solid">
 *   <Toolbar.Item render={…} />
 *   <Divider orientation="vertical" />
 *   <Toolbar.Item render={…} />
 *   <Toolbar.Item render={…} />
 * </Toolbar.Group>
 * ```
 */
declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface ToolbarItemProps extends Omit<BaseProps<"button">, "render">, Required<Pick<BaseProps, "render">> {
}
/**
 * An item within the toolbar.
 * Should be used with the `render` prop.
 *
 * Use the [`IconButton`](https://stratakit.bentley.com/docs/components/iconbutton/) component for actions.
 * Use the [`ToggleButton`](https://stratakit.bentley.com/docs/components/togglebutton/) component to toggle between two state.
 *
 * If rendering an icon, be sure to append `#icon-large` to the icon URL.
 *
 * Example:
 * ```jsx
 * <Toolbar.Item
 *   render={
 *     <IconButton label="…">
 *       <Icon href={`${placeholderIcon}#icon-large`} size="large" />
 *     </IconButton>
 *    }
 * />
 * ```
 */
declare const ToolbarItem: React.ForwardRefExoticComponent<ToolbarItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
export { ToolbarGroup as Group, ToolbarItem as Item };