@stratakit/structures 0.1.0 → 0.2.0

package/dist/ErrorRegion.js

@@ -0,0 +1,168 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Collection,
+  CollectionItem,
+  useCollectionStore
+} from "@ariakit/react/collection";
+import {
+  Dialog,
+  DialogDisclosure,
+  DialogProvider
+} from "@ariakit/react/dialog";
+import { Role } from "@ariakit/react/role";
+import { useStoreState } from "@ariakit/react/store";
+import { Button, Text, VisuallyHidden } from "@stratakit/bricks";
+import { IconButtonPresentation } from "@stratakit/bricks/secret-internals";
+import {
+  forwardRef,
+  useControlledState
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { ChevronDown, StatusIcon } from "./~utils.icons.js";
+const ErrorRegionRoot = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      label,
+      items,
+      open: openProp,
+      setOpen: setOpenProp,
+      ...rest
+    } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      openProp,
+      setOpenProp
+    );
+    const containerRef = React.useRef(null);
+    const pulse = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const id = "--\u{1F95D}error-region-pulse";
+      const animations = el.getAnimations({ subtree: true });
+      if (animations.find((animation) => animation.id === id)) return;
+      el.animate(
+        [
+          {
+            boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
+            opacity: 1
+          },
+          {
+            boxShadow: "0 0 15px 2px var(--ids-color-border-attention-base)",
+            opacity: 0.7,
+            offset: 0.5
+          },
+          {
+            boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
+            opacity: 1
+          }
+        ],
+        {
+          id,
+          duration: 600,
+          easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+          pseudoElement: "::before"
+        }
+      );
+    };
+    const store = useCollectionStore({
+      setItems: (newItems) => {
+        const prevItemsSet = new Set(prevItems.map((item) => item.id));
+        const addedItems = newItems.filter(
+          (item) => !prevItemsSet.has(item.id)
+        );
+        if (addedItems.length === 0) return;
+        pulse();
+        setLiveLabel(label);
+      }
+    });
+    const prevItems = useStoreState(store, "items");
+    const [liveLabel, setLiveLabel] = React.useState(label);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: liveLabel === label ? liveLabel : void 0 }),
+      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
+        Role.section,
+        {
+          ...rest,
+          "aria-labelledby": sectionLabelledBy,
+          className: cx("\u{1F95D}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", ref: containerRef, children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx(
+                  Collection,
+                  {
+                    store,
+                    className: "\u{1F95D}-error-region-items",
+                    role: "list",
+                    children: items
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+const ErrorRegionItem = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const {
+      message,
+      messageId = `${generatedId}-message`,
+      actions,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      CollectionItem,
+      {
+        ...rest,
+        role: "listitem",
+        className: cx("\u{1F95D}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};

package/dist/Table.d.ts

@@ -0,0 +1,172 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface HtmlTableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.HtmlTable` uses native HTML table elements for the table root *and its descendants*.
+ *
+ * E.g. `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>`.
+ *
+ * Related: `Table.CustomTable`
+ *
+ * Example:
+ * ```tsx
+ * <Table.HtmlTable> // <table>
+ *   <Table.Caption>Table Caption</Table.Caption> // <caption>
+ *
+ *   <Table.Header> // <thead>
+ * 	   <Table.Row> // <tr>
+ * 	     <Table.Cell>Header 1</Table.Cell> // <th>
+ * 	 	   <Table.Cell>Header 2</Table.Cell> // <th>
+ * 	   </Table.Row>
+ *   </Table.Header>
+ *
+ *   <Table.Body> // <tbody>
+ * 	   <Table.Row> // <tr>
+ * 		   <Table.Cell>Cell 1.1</Table.Cell> // <td>
+ * 		   <Table.Cell>Cell 1.2</Table.Cell> // <td>
+ * 	   </Table.Row>
+ * 	   <Table.Row> // <tr>
+ * 		   <Table.Cell>Cell 2.1</Table.Cell> // <td>
+ * 		   <Table.Cell>Cell 2.2</Table.Cell> // <td>
+ * 	   </Table.Row>
+ *   </Table.Body>
+ * </Table.HtmlTable>
+ * ```
+ */
+declare const HtmlTable: React.ForwardRefExoticComponent<HtmlTableProps & React.RefAttributes<HTMLElement | HTMLTableElement>>;
+interface CustomTableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.CustomTable` implements the [WAI-ARIA table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/) using
+ * divs + appropriate roles for the table root *and its descendants*.
+ *
+ * E.g. `<div role="table">`, `<div role="row">`, `<div role="columnheader">`, and `<div role="cell">`.
+ *
+ * Related: `Table.HtmlTable`
+ *
+ * Example:
+ * ```tsx
+ * <Table.CustomTable> // <div role="table">
+ *   <Table.Caption>Table Caption</Table.Caption> // <div role="caption">
+ *
+ *   <Table.Header> // <div role="rowgroup">
+ * 	   <Table.Row> // <div role="row">
+ * 	     <Table.Cell>Header 1</Table.Cell> // <div role="columnheader">
+ * 	 	   <Table.Cell>Header 2</Table.Cell> // <div role="columnheader">
+ * 	   </Table.Row>
+ *   </Table.Header>
+ *
+ *   <Table.Body>
+ * 	   <Table.Row> // <div role="row">
+ * 		   <Table.Cell>Cell 1.1</Table.Cell> // <div role="cell">
+ * 		   <Table.Cell>Cell 1.2</Table.Cell> // <div role="cell">
+ * 	   </Table.Row>
+ * 	   <Table.Row> // <div role="row">
+ * 		   <Table.Cell>Cell 2.1</Table.Cell> // <div role="cell">
+ * 		   <Table.Cell>Cell 2.2</Table.Cell> // <div role="cell">
+ * 	   </Table.Row>
+ *   </Table.Body>
+ * </Table.CustomTable>
+ * ```
+ */
+declare const CustomTable: React.ForwardRefExoticComponent<CustomTableProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TableHeaderProps extends BaseProps<"div"> {
+}
+/**
+ * `Table.Header` is a column component of cells that labels the columns of a table.
+ * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
+ *
+ * If within a `Table.HtmlTable`: it will render a `<thead>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="rowgroup">` element.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Header>
+ *		<Table.Row>
+ *			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Header>
+ * ```
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TableBodyProps extends BaseProps<"div"> {
+}
+/**
+ * `Table.Body` is a component that contains the rows of table data.
+ * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
+ *
+ * If within a `Table.HtmlTable`: it will render a `<tbody>` element.
+ * If within a `Table.CustomTable`: it will render a `<div>` element.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Body>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 1.1</Table.Cell>
+ *			<Table.Cell>Cell 1.2</Table.Cell>
+ *		</Table.Row>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 2.1</Table.Cell>
+ *			<Table.Cell>Cell 2.2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Body>
+ * ```
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TableRowProps extends BaseProps<"div"> {
+}
+/**
+ * `Table.Row` is a component that contains the cells of a table row.
+ *
+ * If within a `Table.HtmlTable`: it will render a `<tr>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="row">` element.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Row>
+ *		<Table.Cell>Cell 1.1</Table.Cell>
+ *		<Table.Cell>Cell 1.2</Table.Cell>
+ *	</Table.Row>
+ * ```
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TableCaptionProps extends BaseProps<"div"> {
+}
+/**
+ * `Table.Caption` is a component that contains the caption of a table.
+ *
+ * If within a `Table.HtmlTable`: it will render a `<caption>` element.
+ * If within a `Table.CustomTable`: it will render a `<div role="caption">` element.
+ *
+ * Example:
+ * ```tsx
+ * <Table.CustomTable> // Or <Table.HtmlTable>
+ * 	 <Table.Caption>Table Caption</Table.Caption>
+ * 	 …
+ * </Table.CustomTable> // Or </Table.HtmlTable>
+ * ```
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TableCellProps extends BaseProps<"div"> {
+}
+/**
+ * `Table.Cell` is a component that contains the data of a table cell.
+ *
+ * - If within a `Table.HtmlTable`: it will render a `<th>` element if also within a `Table.Header`, or a `<td>` element
+ * if also within a `Table.Body`.
+ * - If within a `Table.CustomTable`: it will render a `<div role="columnheader">` element if also within a
+ * `Table.Header`, or a `<div role="cell">` element if also within a `Table.Body`.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Cell>Cell 1.1</Table.Cell>
+ * ```
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export { HtmlTable, CustomTable, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };

package/dist/Table.js

@@ -0,0 +1,144 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import {
+  useMergedRefs,
+  useSafeContext
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+const TableContext = React.createContext(void 0);
+const TableHeaderContext = React.createContext(false);
+const HtmlTable = forwardRef((props, forwardedRef) => {
+  const tableContextValue = React.useMemo(
+    () => ({ mode: "html" }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+    Role,
+    {
+      render: /* @__PURE__ */ jsx("table", {}),
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table", props.className)
+    }
+  ) });
+});
+const CustomTable = forwardRef(
+  (props, forwardedRef) => {
+    const [captionId, setCaptionId] = React.useState();
+    const tableContextValue = React.useMemo(
+      () => ({ captionId, setCaptionId, mode: "aria" }),
+      [captionId]
+    );
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "table",
+        "aria-labelledby": captionId,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table", props.className)
+      }
+    ) });
+  }
+);
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    const { mode } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+    const role = mode === "aria" ? "rowgroup" : void 0;
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        render,
+        role,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table-header", props.className)
+      }
+    ) });
+  }
+);
+const TableBody = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role: void 0,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-body", props.className)
+    }
+  );
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-row", props.className)
+    }
+  );
+});
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, ...rest } = props;
+    const { mode, setCaptionId } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId?.(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        render,
+        ...rest,
+        id,
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        className: cx("\u{1F95D}-table-caption", props.className)
+      }
+    );
+  }
+);
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+  }, [isWithinTableHeader, mode]);
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-cell", props.className)
+    }
+  );
+});
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  CustomTable,
+  TableHeader as Header,
+  HtmlTable,
+  TableRow as Row
+};

package/dist/Tabs.d.ts

@@ -0,0 +1,81 @@
+import * as AkTab from "@ariakit/react/tab";
+import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
+interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+}
+/**
+ * A set of tabs that can be used to switch between different views.
+ *
+ * `Tabs` is a compound component with subcomponents exposed for different parts.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.Root>
+ *   <Tabs.TabList>
+ *     <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ *     <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
+ *     <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
+ *   </Tabs.TabList>
+ *
+ *   <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
+ *   <Tabs.TabPanel tabId="tab-2">Tab 2 content</Tabs.TabPanel>
+ *   <Tabs.TabPanel tabId="tab-3">Tab 3 content</Tabs.TabPanel>
+ * </Tabs.Root>
+ * ```
+ *
+ * The tabs and their panels are connected by matching the `id` prop on the `Tabs.Tab` component with
+ * the `tabId` prop on the `Tabs.TabPanel` component.
+ *
+ * The `Tabs` component automatically manages the selected tab state. The initially selected tab can be set using `defaultSelectedId`.
+ * To take full control the selected tab state, use the `selectedId` and `setSelectedId` props together.
+ *
+ * **Note**: `Tabs` should _not_ be used for navigation; it is only intended for switching smaller views within an existing page.
+ */
+declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Tabs {
+    var displayName: string;
+}
+interface TabListProps extends BaseProps {
+    /** @default "neutral" */
+    tone?: "neutral" | "accent";
+}
+/**
+ * A simple container for the tab buttons.
+ * Should be used as a child of `Tabs.Root` and consist of the individual `Tabs.Tab` components.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.TabList>
+ *   <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ *   <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
+ *   <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
+ * </Tabs.TabList>
+ * ```
+ */
+declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
+}
+/**
+ * An individual tab button that switches the selected tab panel when clicked.
+ *
+ * Should be used as a child of `Tabs.TabList` and be paired with a `Tabs.TabPanel`,
+ * connected using an id.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
+ * ```
+ */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
+}
+/**
+ * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.
+ * The `tabId` prop should match the `id` prop of the corresponding `Tabs.Tab` component.
+ *
+ * Example:
+ * ```tsx
+ * <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
+ * ```
+ */
+declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+export { Tabs as Root, TabList, Tab, TabPanel };

package/dist/Tabs.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import * as AkTab from "@ariakit/react/tab";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+function Tabs(props) {
+  const {
+    defaultSelectedId,
+    selectedId,
+    setSelectedId,
+    selectOnMove,
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabProvider,
+    {
+      defaultSelectedId,
+      selectedId,
+      setSelectedId,
+      selectOnMove,
+      children
+    }
+  );
+}
+const TabList = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabList,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      className: cx("\u{1F95D}-tab-list", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+const TabPanel = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.TabPanel,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tab-panel", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Tabs as Root,
+  Tab,
+  TabList,
+  TabPanel
+};

package/dist/Toolbar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface ToolbarProps extends BaseProps {
+    /** Must be set to `"solid"` for now. */
+    variant: "solid";
+}
+/**
+ * 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>
+ * ```
+ */
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarProps & 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.
+ *
+ * Example:
+ * ```jsx
+ * <Toolbar.Item
+ *   render={<IconButton variant="ghost" … />}
+ * />
+ * ```
+ */
+declare const ToolbarItem: React.ForwardRefExoticComponent<ToolbarItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { ToolbarGroup as Group, ToolbarItem as Item };

package/dist/Toolbar.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import * as Toolbar from "@ariakit/react/toolbar";
+import { IconButtonContext } from "@stratakit/bricks/secret-internals";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
+    Toolbar.Toolbar,
+    {
+      ...props,
+      className: cx("\u{1F95D}-toolbar", props.className),
+      ref: forwardedRef
+    }
+  ) });
+});
+const ToolbarItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
+  }
+);
+export {
+  ToolbarGroup as Group,
+  ToolbarItem as Item
+};