@ttoss/fsl-ui 0.2.4

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -0,0 +1,125 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+/** Formal semantic identity — ToggleButton root (Action entity, toggle). */
+var toggleButtonMeta = {
+  displayName: "ToggleButton",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* Background cascade: disabled ▸ transient press (`active`) ▸ persistent
+* toggle (`pressed`) ▸ hover ▸ default. The `active` level dominates
+* `pressed` so a click on an engaged toggle still gives press feedback.
+*/
+var resolveToggleBackground = (bg, {
+  isDisabled,
+  isPressed,
+  isSelected,
+  isHovered
+}) => {
+  if (isDisabled) return bg.disabled;
+  if (isPressed) return bg.active;
+  if (isSelected) return bg.pressed;
+  if (isHovered) return bg.hover;
+  return bg.default;
+};
+/** Text cascade — same order, with `?? default` since not every voice defines every state. */
+var resolveToggleText = (text, {
+  isDisabled,
+  isPressed,
+  isSelected,
+  isHovered
+}) => {
+  if (isDisabled) return text.disabled;
+  if (isPressed) return text.active ?? text.default;
+  if (isSelected) return text.pressed ?? text.default;
+  if (isHovered) return text.hover ?? text.default;
+  return text.default;
+};
+/** Border cascade: focus ring wins ▸ disabled ▸ toggle-on ▸ default. */
+var resolveToggleBorder = (border, {
+  isFocusVisible,
+  isDisabled,
+  isSelected
+}) => {
+  if (isFocusVisible) return border.focused;
+  if (isDisabled) return border.disabled;
+  if (isSelected) return border.pressed ?? border.default;
+  return border.default;
+};
+/**
+* A two-state toggle button (Action entity). Unlike `Button`, its selection
+* is persistent: the engaged state renders the `pressed` color (not the
+* transient `active`), and React Aria exposes it via `aria-pressed`.
+*
+* Use for toolbar toggles ("Bold", "Italic") and single on/off controls that
+* read as buttons. For a set of mutually-related toggles, wrap them in
+* `ToggleButtonGroup`.
+*
+* @example
+* ```tsx
+* <ToggleButton>Bold</ToggleButton>
+* <ToggleButton defaultSelected>Grid view</ToggleButton>
+* ```
+*/
+var ToggleButton = ({
+  evaluation = "primary",
+  ...props
+}) => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.action[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ToggleButton, {
+    ...props,
+    "data-scope": "toggle-button",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: ({
+      isHovered,
+      isPressed,
+      isSelected,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      const flags = {
+        isHovered,
+        isPressed,
+        isSelected,
+        isDisabled
+      };
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+        borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+        borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.lg,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        transitionProperty: "background-color, border-color, color",
+        backgroundColor: colors?.background ? resolveToggleBackground(colors.background, flags) : void 0,
+        borderColor: colors?.border ? resolveToggleBorder(colors.border, {
+          isFocusVisible,
+          isDisabled,
+          isSelected
+        }) : void 0,
+        color: colors?.text ? resolveToggleText(colors.text, flags) : void 0,
+        outline: require_focusRing.focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+ToggleButton.displayName = toggleButtonMeta.displayName;
+
+//#endregion
+exports.ToggleButton = ToggleButton;
+exports.toggleButtonMeta = toggleButtonMeta;

package/dist/components/ToggleButton/ToggleButton.d.cts

@@ -0,0 +1,43 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import { ToggleButtonProps } from "react-aria-components";
+
+//#region src/components/ToggleButton/ToggleButton.d.ts
+/** Formal semantic identity — ToggleButton root (Action entity, toggle). */
+declare const toggleButtonMeta: {
+  readonly displayName: "ToggleButton";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/** Props for the ToggleButton component. */
+interface ToggleButtonProps$1 extends Omit<ToggleButtonProps, 'style'> {
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof toggleButtonMeta)['entity']>;
+}
+/**
+ * A two-state toggle button (Action entity). Unlike `Button`, its selection
+ * is persistent: the engaged state renders the `pressed` color (not the
+ * transient `active`), and React Aria exposes it via `aria-pressed`.
+ *
+ * Use for toolbar toggles ("Bold", "Italic") and single on/off controls that
+ * read as buttons. For a set of mutually-related toggles, wrap them in
+ * `ToggleButtonGroup`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButton>Bold</ToggleButton>
+ * <ToggleButton defaultSelected>Grid view</ToggleButton>
+ * ```
+ */
+declare const ToggleButton: {
+  ({
+    evaluation,
+    ...props
+  }: ToggleButtonProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToggleButton";
+};
+//#endregion
+export { ToggleButton, ToggleButtonProps$1 as ToggleButtonProps, toggleButtonMeta };

package/dist/components/ToggleButton/ToggleButton.d.mts

@@ -0,0 +1,43 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { ToggleButtonProps } from "react-aria-components";
+
+//#region src/components/ToggleButton/ToggleButton.d.ts
+/** Formal semantic identity — ToggleButton root (Action entity, toggle). */
+declare const toggleButtonMeta: {
+  readonly displayName: "ToggleButton";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/** Props for the ToggleButton component. */
+interface ToggleButtonProps$1 extends Omit<ToggleButtonProps, 'style'> {
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof toggleButtonMeta)['entity']>;
+}
+/**
+ * A two-state toggle button (Action entity). Unlike `Button`, its selection
+ * is persistent: the engaged state renders the `pressed` color (not the
+ * transient `active`), and React Aria exposes it via `aria-pressed`.
+ *
+ * Use for toolbar toggles ("Bold", "Italic") and single on/off controls that
+ * read as buttons. For a set of mutually-related toggles, wrap them in
+ * `ToggleButtonGroup`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButton>Bold</ToggleButton>
+ * <ToggleButton defaultSelected>Grid view</ToggleButton>
+ * ```
+ */
+declare const ToggleButton$1: {
+  ({
+    evaluation,
+    ...props
+  }: ToggleButtonProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToggleButton";
+};
+//#endregion
+export { ToggleButton$1 as ToggleButton, ToggleButtonProps$1 as ToggleButtonProps, toggleButtonMeta };

package/dist/components/ToggleButton/ToggleButton.mjs

@@ -0,0 +1,124 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { ToggleButton } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+/** Formal semantic identity — ToggleButton root (Action entity, toggle). */
+var toggleButtonMeta = {
+  displayName: "ToggleButton",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* Background cascade: disabled ▸ transient press (`active`) ▸ persistent
+* toggle (`pressed`) ▸ hover ▸ default. The `active` level dominates
+* `pressed` so a click on an engaged toggle still gives press feedback.
+*/
+var resolveToggleBackground = (bg, {
+  isDisabled,
+  isPressed,
+  isSelected,
+  isHovered
+}) => {
+  if (isDisabled) return bg.disabled;
+  if (isPressed) return bg.active;
+  if (isSelected) return bg.pressed;
+  if (isHovered) return bg.hover;
+  return bg.default;
+};
+/** Text cascade — same order, with `?? default` since not every voice defines every state. */
+var resolveToggleText = (text, {
+  isDisabled,
+  isPressed,
+  isSelected,
+  isHovered
+}) => {
+  if (isDisabled) return text.disabled;
+  if (isPressed) return text.active ?? text.default;
+  if (isSelected) return text.pressed ?? text.default;
+  if (isHovered) return text.hover ?? text.default;
+  return text.default;
+};
+/** Border cascade: focus ring wins ▸ disabled ▸ toggle-on ▸ default. */
+var resolveToggleBorder = (border, {
+  isFocusVisible,
+  isDisabled,
+  isSelected
+}) => {
+  if (isFocusVisible) return border.focused;
+  if (isDisabled) return border.disabled;
+  if (isSelected) return border.pressed ?? border.default;
+  return border.default;
+};
+/**
+* A two-state toggle button (Action entity). Unlike `Button`, its selection
+* is persistent: the engaged state renders the `pressed` color (not the
+* transient `active`), and React Aria exposes it via `aria-pressed`.
+*
+* Use for toolbar toggles ("Bold", "Italic") and single on/off controls that
+* read as buttons. For a set of mutually-related toggles, wrap them in
+* `ToggleButtonGroup`.
+*
+* @example
+* ```tsx
+* <ToggleButton>Bold</ToggleButton>
+* <ToggleButton defaultSelected>Grid view</ToggleButton>
+* ```
+*/
+var ToggleButton$1 = ({
+  evaluation = "primary",
+  ...props
+}) => {
+  const colors = vars.colors.action[evaluation];
+  return /* @__PURE__ */jsx(ToggleButton, {
+    ...props,
+    "data-scope": "toggle-button",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: ({
+      isHovered,
+      isPressed,
+      isSelected,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      const flags = {
+        isHovered,
+        isPressed,
+        isSelected,
+        isDisabled
+      };
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        borderRadius: vars.radii.control,
+        borderWidth: vars.border.outline.control.width,
+        borderStyle: vars.border.outline.control.style,
+        minHeight: vars.sizing.hit.base,
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.lg,
+        ...vars.text.label.md,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "background-color, border-color, color",
+        backgroundColor: colors?.background ? resolveToggleBackground(colors.background, flags) : void 0,
+        borderColor: colors?.border ? resolveToggleBorder(colors.border, {
+          isFocusVisible,
+          isDisabled,
+          isSelected
+        }) : void 0,
+        color: colors?.text ? resolveToggleText(colors.text, flags) : void 0,
+        outline: focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+ToggleButton$1.displayName = toggleButtonMeta.displayName;
+
+//#endregion
+export { ToggleButton$1 as ToggleButton, toggleButtonMeta };

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.cjs

@@ -0,0 +1,48 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+/** Formal semantic identity — ToggleButtonGroup root (Selection entity). */
+var toggleButtonGroupMeta = {
+  displayName: "ToggleButtonGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/**
+* Groups related `ToggleButton`s into a single selectable set (Selection
+* entity). React Aria manages selection (`selectionMode` `single` | `multiple`)
+* and arrow-key navigation between the toggles; each child is a `ToggleButton`
+* with an `id`.
+*
+* @example
+* ```tsx
+* <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['grid']}>
+*   <ToggleButton id="grid">Grid</ToggleButton>
+*   <ToggleButton id="list">List</ToggleButton>
+* </ToggleButtonGroup>
+* ```
+*/
+var ToggleButtonGroup = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ToggleButtonGroup, {
+    ...props,
+    orientation,
+    "data-scope": "toggle-button-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm
+    }
+  });
+};
+ToggleButtonGroup.displayName = toggleButtonGroupMeta.displayName;
+
+//#endregion
+exports.ToggleButtonGroup = ToggleButtonGroup;
+exports.toggleButtonGroupMeta = toggleButtonGroupMeta;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.cts

@@ -0,0 +1,41 @@
+
+import { ToggleButtonGroupProps } from "react-aria-components";
+
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.d.ts
+/** Formal semantic identity — ToggleButtonGroup root (Selection entity). */
+declare const toggleButtonGroupMeta: {
+  readonly displayName: "ToggleButtonGroup";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/** Props for the ToggleButtonGroup component. */
+interface ToggleButtonGroupProps$1 extends Omit<ToggleButtonGroupProps, 'style'> {
+  /**
+   * Layout direction of the toggles.
+   * @default 'horizontal'
+   */
+  orientation?: ToggleButtonGroupProps['orientation'];
+}
+/**
+ * Groups related `ToggleButton`s into a single selectable set (Selection
+ * entity). React Aria manages selection (`selectionMode` `single` | `multiple`)
+ * and arrow-key navigation between the toggles; each child is a `ToggleButton`
+ * with an `id`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['grid']}>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ *   <ToggleButton id="list">List</ToggleButton>
+ * </ToggleButtonGroup>
+ * ```
+ */
+declare const ToggleButtonGroup: {
+  ({
+    orientation,
+    ...props
+  }: ToggleButtonGroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToggleButtonGroup";
+};
+//#endregion
+export { ToggleButtonGroup, ToggleButtonGroupProps$1 as ToggleButtonGroupProps, toggleButtonGroupMeta };

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.mts

@@ -0,0 +1,41 @@
+
+import { ToggleButtonGroupProps } from "react-aria-components";
+
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.d.ts
+/** Formal semantic identity — ToggleButtonGroup root (Selection entity). */
+declare const toggleButtonGroupMeta: {
+  readonly displayName: "ToggleButtonGroup";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/** Props for the ToggleButtonGroup component. */
+interface ToggleButtonGroupProps$1 extends Omit<ToggleButtonGroupProps, 'style'> {
+  /**
+   * Layout direction of the toggles.
+   * @default 'horizontal'
+   */
+  orientation?: ToggleButtonGroupProps['orientation'];
+}
+/**
+ * Groups related `ToggleButton`s into a single selectable set (Selection
+ * entity). React Aria manages selection (`selectionMode` `single` | `multiple`)
+ * and arrow-key navigation between the toggles; each child is a `ToggleButton`
+ * with an `id`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['grid']}>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ *   <ToggleButton id="list">List</ToggleButton>
+ * </ToggleButtonGroup>
+ * ```
+ */
+declare const ToggleButtonGroup$1: {
+  ({
+    orientation,
+    ...props
+  }: ToggleButtonGroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToggleButtonGroup";
+};
+//#endregion
+export { ToggleButtonGroup$1 as ToggleButtonGroup, ToggleButtonGroupProps$1 as ToggleButtonGroupProps, toggleButtonGroupMeta };

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -0,0 +1,47 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { ToggleButtonGroup } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+/** Formal semantic identity — ToggleButtonGroup root (Selection entity). */
+var toggleButtonGroupMeta = {
+  displayName: "ToggleButtonGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/**
+* Groups related `ToggleButton`s into a single selectable set (Selection
+* entity). React Aria manages selection (`selectionMode` `single` | `multiple`)
+* and arrow-key navigation between the toggles; each child is a `ToggleButton`
+* with an `id`.
+*
+* @example
+* ```tsx
+* <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['grid']}>
+*   <ToggleButton id="grid">Grid</ToggleButton>
+*   <ToggleButton id="list">List</ToggleButton>
+* </ToggleButtonGroup>
+* ```
+*/
+var ToggleButtonGroup$1 = ({
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(ToggleButtonGroup, {
+    ...props,
+    orientation,
+    "data-scope": "toggle-button-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      gap: vars.spacing.gap.inline.sm
+    }
+  });
+};
+ToggleButtonGroup$1.displayName = toggleButtonGroupMeta.displayName;
+
+//#endregion
+export { ToggleButtonGroup$1 as ToggleButtonGroup, toggleButtonGroupMeta };

package/dist/components/Toolbar/Toolbar.cjs

@@ -0,0 +1,67 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Toolbar/Toolbar.tsx
+/** Formal semantic identity — Toolbar root (Structure entity, actions bar). */
+var toolbarMeta = {
+  displayName: "Toolbar",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic toolbar built on React Aria's `Toolbar` (`role="toolbar"`).
+*
+* Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+* the bar surface and border, `vars.radii.surface` for the corner, and
+* `vars.spacing.inset.surface` for padding. Groups related actions (a text
+* formatting bar, a view-mode switch, a set of table controls) under one
+* region with arrow-key navigation. Non-interactive itself — hover/press
+* chrome belongs to the `Button` / `ToggleButton` children.
+*
+* @example
+* ```tsx
+* <Toolbar aria-label="Text formatting">
+*   <ToggleButton aria-label="Bold">B</ToggleButton>
+*   <ToggleButton aria-label="Italic">I</ToggleButton>
+*   <Separator orientation="vertical" />
+*   <Button aria-label="Link">Link</Button>
+* </Toolbar>
+* ```
+*/
+var Toolbar = ({
+  orientation = "horizontal",
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.informational[evaluation];
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Toolbar, {
+    ...props,
+    orientation,
+    "data-scope": "toolbar",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      flexDirection: isVertical ? "column" : "row",
+      alignItems: "center",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+      padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+      borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+      borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+      borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+      borderColor: c?.border?.default ?? "transparent",
+      backgroundColor: c?.background?.default
+    },
+    children
+  });
+};
+Toolbar.displayName = toolbarMeta.displayName;
+
+//#endregion
+exports.Toolbar = Toolbar;
+exports.toolbarMeta = toolbarMeta;

package/dist/components/Toolbar/Toolbar.d.cts

@@ -0,0 +1,60 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { ToolbarProps } from "react-aria-components";
+
+//#region src/components/Toolbar/Toolbar.d.ts
+/** Formal semantic identity — Toolbar root (Structure entity, actions bar). */
+declare const toolbarMeta: {
+  readonly displayName: "Toolbar";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Toolbar component. */
+interface ToolbarProps$1 extends Omit<ToolbarProps, 'style' | 'className' | 'children'> {
+  /**
+   * Layout + roving-focus axis. `horizontal` uses Left/Right arrows;
+   * `vertical` uses Up/Down.
+   * @default 'horizontal'
+   */
+  orientation?: ToolbarProps['orientation'];
+  /**
+   * Authorial emphasis of the bar surface. `primary` is the standard toolbar
+   * chrome; `muted` is a subdued variant for dense or secondary bars.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof toolbarMeta)['entity']>;
+  /** The interactive controls to lay out in the bar. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic toolbar built on React Aria's `Toolbar` (`role="toolbar"`).
+ *
+ * Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+ * the bar surface and border, `vars.radii.surface` for the corner, and
+ * `vars.spacing.inset.surface` for padding. Groups related actions (a text
+ * formatting bar, a view-mode switch, a set of table controls) under one
+ * region with arrow-key navigation. Non-interactive itself — hover/press
+ * chrome belongs to the `Button` / `ToggleButton` children.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <ToggleButton aria-label="Bold">B</ToggleButton>
+ *   <ToggleButton aria-label="Italic">I</ToggleButton>
+ *   <Separator orientation="vertical" />
+ *   <Button aria-label="Link">Link</Button>
+ * </Toolbar>
+ * ```
+ */
+declare const Toolbar: {
+  ({
+    orientation,
+    evaluation,
+    children,
+    ...props
+  }: ToolbarProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Toolbar";
+};
+//#endregion
+export { Toolbar, ToolbarProps$1 as ToolbarProps, toolbarMeta };