@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
107 lines • 3.98 kB
TypeScript
import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
import * as React from "react";
/**
* Arranges related actions into a keyboard-accessible toolbar.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on Base UI Toolbar primitives
* - Supports roving focus and compound toolbar item composition
*
* @example
* ```tsx
* <Toolbar aria-label='Text formatting'>
* <ToolbarButton>Bold</ToolbarButton>
* <ToolbarButton>Italic</ToolbarButton>
* </Toolbar>
* ```
*
* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
*/
declare const Toolbar: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders an interactive button within a toolbar.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on Base UI Toolbar button behavior
* - Applies shared toolbar item spacing and focus styling
*
* @example
* ```tsx
* <ToolbarButton aria-label='Bold'>B</ToolbarButton>
* ```
*
* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
*/
declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Groups related toolbar controls into a single visual cluster.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on Base UI Toolbar grouping primitives
*
* @example
* ```tsx
* <ToolbarGroup>
* <ToolbarButton>Left</ToolbarButton>
* <ToolbarButton>Center</ToolbarButton>
* </ToolbarGroup>
* ```
*
* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
*/
declare const ToolbarGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a visual separator between toolbar items or groups.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on Base UI Toolbar separator primitives
*
* @example
* ```tsx
* <ToolbarSeparator />
* ```
*
* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
*/
declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a link that visually matches toolbar buttons.
*
* @remarks
* - Renders an `<a>` element by default
* - Built on Base UI Toolbar link primitives
*
* @example
* ```tsx
* <ToolbarLink href='/docs'>Docs</ToolbarLink>
* ```
*
* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
*/
declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
declare namespace Toolbar {
type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Root>;
type State = BaseToolbar.Root.State;
}
declare namespace ToolbarButton {
type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Button>;
type State = BaseToolbar.Button.State;
}
declare namespace ToolbarGroup {
type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Group>;
type State = BaseToolbar.Group.State;
}
declare namespace ToolbarSeparator {
type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Separator>;
type State = BaseToolbar.Separator.State;
}
declare namespace ToolbarLink {
type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Link>;
type State = BaseToolbar.Link.State;
}
export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator };
//# sourceMappingURL=toolbar.d.ts.map