@openwarelabs/ui 0.3.0 → 0.4.0

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from "react";
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the toolbar for screen readers, e.g. "Formatting". Every toolbar needs a name, from this or aria-labelledby. */
+    "aria-label"?: string;
+    /** The id of a visible heading that names the toolbar, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Which way it runs. The arrow keys follow it: Left and Right across a horizontal toolbar, Up and Down a vertical one.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** `raised` is a bar of its own: a surface with a hairline border and a soft shadow. `plain` has no ground, for a
+     * toolbar in a card or panel header.
+     * @default "raised" */
+    variant?: "raised" | "plain";
+    /** The bar's padding and gaps, and the size its ToggleButtonGroups and separators take. Give its Buttons the same size.
+     * @default "md" */
+    size?: "sm" | "md";
+}
+export interface ToolbarSeparatorProps {
+    /** Extra classes for the line. */
+    className?: string;
+}
+interface ToolbarContextValue {
+    orientation: "horizontal" | "vertical";
+    size: "sm" | "md";
+}
+/** Lets what's inside a Toolbar follow its orientation and size, and leave the arrow keys to it. */
+export declare const ToolbarContext: import("react").Context<ToolbarContextValue | null>;
+/**
+ * A row of controls for one context: an editor's formatting bar, a table's actions. It's a single tab stop: the
+ * arrow keys move between every control inside it, ToggleButtonGroups' buttons included, and Tab leaves it, coming
+ * back to the control that was focused last.
+ */
+export declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A line between groups of controls in a Toolbar, across the toolbar's direction. */
+export declare function ToolbarSeparator({ className }: ToolbarSeparatorProps): import("react").JSX.Element;
+export {};