@box/blueprint-web 6.10.0 → 6.11.0

package/lib-esm/index.css

@@ -4859,6 +4859,69 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .switch_module_option--f1dbf.switch_module_disabled--f1dbf .switch_module_switch--f1dbf{
   opacity:60%;
 }
+
+.text_button_module_textButton--581e7{
+  align-items:center;
+  background:#0000;
+  border:none;
+  border-radius:calc(var(--radius-1)/2);
+  color:var(--text-cta-link);
+  cursor:pointer;
+  display:inline-flex;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:700;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  outline:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  -webkit-user-select:text;
+          user-select:text;
+}
+.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7{
+  border-radius:.125em;
+  font:inherit;
+}
+.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7.text_button_module_isIconButton--581e7{
+  gap:.25em;
+}
+.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 .125em var(--outline-focus-on-light);
+}
+.text_button_module_textButton--581e7 .text_button_module_scaleLoader--581e7 div{
+  border-radius:.375em;
+  height:.625em;
+  width:.125em;
+}
+.text_button_module_textButton--581e7 .text_button_module_icon--581e7{
+  align-items:center;
+  display:flex;
+}
+.text_button_module_textButton--581e7 .text_button_module_hideTextContent--581e7{
+  visibility:hidden;
+}
+.text_button_module_textButton--581e7.text_button_module_isIconButton--581e7{
+  gap:var(--space-1);
+}
+.text_button_module_textButton--581e7.text_button_module_visuallyHidden--581e7{
+  color:#0000;
+  pointer-events:none;
+  position:relative;
+}
+.text_button_module_textButton--581e7:disabled{
+  opacity:.3;
+}
+.text_button_module_textButton--581e7:not(:disabled):hover,.text_button_module_textButton--581e7:not(:disabled)[data-focus-visible]{
+  color:var(--text-cta-link-hover);
+}
+.text_button_module_textButton--581e7:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+}
+.text_button_module_textButton--581e7:not(:disabled):active{
+  color:var(--text-cta-link-pressed);
+}
 :root{
   --notification-default-paragraph-indent:0rem;
   --notification-default-paragraph-spacing:0;
@@ -5542,65 +5605,69 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.text_button_module_textButton--581e7{
-  align-items:center;
-  background:#0000;
-  border:none;
-  border-radius:calc(var(--radius-1)/2);
-  color:var(--text-cta-link);
-  cursor:pointer;
-  display:inline-flex;
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  font-weight:700;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  outline:0;
-  padding:0;
-  text-decoration:none;
-  text-transform:none;
-  -webkit-user-select:text;
-          user-select:text;
-}
-.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7{
-  border-radius:.125em;
-  font:inherit;
-}
-.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7.text_button_module_isIconButton--581e7{
-  gap:.25em;
+.toolbar_module_root--afeab{
+  background:var(--surface-surface);
+  border:var(--border-1) solid var(--border-card-border);
+  border-radius:var(--radius-4);
+  box-shadow:var(--dropshadow-3);
+  display:flex;
+  gap:var(--space-1);
+  padding:var(--space-1);
 }
-.text_button_module_textButton--581e7.text_button_module_isFontInherited--581e7:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 .125em var(--outline-focus-on-light);
+
+.toolbar_module_separator--afeab{
+  background-color:var(--border-divider-border);
+  border-radius:var(--radius-2);
+  width:1px;
 }
-.text_button_module_textButton--581e7 .text_button_module_scaleLoader--581e7 div{
-  border-radius:.375em;
-  height:.625em;
-  width:.125em;
+
+.toolbar_module_toggleGroup--afeab,.toolbar_module_toolbarItem--afeab{
+  display:flex;
+  gap:var(--space-1);
 }
-.text_button_module_textButton--581e7 .text_button_module_icon--581e7{
+
+.toolbar_module_toolbarItem--afeab{
   align-items:center;
-  display:flex;
+  background:var(--toolbar-button-color, --surface-toggle-surface);
+  border:var(--border-1) solid #0000;
+  border-radius:var(--radius-2);
+  cursor:pointer;
+  justify-content:center;
+  min-height:var(--size-8);
+  min-width:var(--size-8);
+  outline:none;
+  padding:calc(var(--space-1) - var(--border-1));
+  -webkit-user-select:none;
+          user-select:none;
 }
-.text_button_module_textButton--581e7 .text_button_module_hideTextContent--581e7{
-  visibility:hidden;
+.toolbar_module_toolbarItem--afeab[data-disabled]{
+  background:var(--surface-toggle-surface);
+  opacity:.3;
+  pointer-events:none;
 }
-.text_button_module_textButton--581e7.text_button_module_isIconButton--581e7{
-  gap:var(--space-1);
+.toolbar_module_toolbarItem--afeab:not([data-disabled]):focus{
+  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.text_button_module_textButton--581e7.text_button_module_visuallyHidden--581e7{
-  color:#0000;
-  pointer-events:none;
-  position:relative;
+.toolbar_module_toolbarItem--afeab:not([data-disabled]):hover{
+  background:var(--toolbar-button-color, --surface-toggle-surface-hover);
+  border:var(--border-1) solid var(--toolbar-button-color, --surface-toggle-surface-hover);
 }
-.text_button_module_textButton--581e7:disabled{
-  opacity:.3;
+
+.toolbar_module_toolbarToggle--afeab[data-state=on]{
+  background:var(--surface-toggle-surface-pressed);
 }
-.text_button_module_textButton--581e7:not(:disabled):hover,.text_button_module_textButton--581e7:not(:disabled)[data-focus-visible]{
-  color:var(--text-cta-link-hover);
+.toolbar_module_toolbarToggle--afeab[data-state=on] svg *{
+  fill:var(--icon-icon-on-dark);
 }
-.text_button_module_textButton--581e7:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+.toolbar_module_toolbarToggle--afeab[data-state=on]:not([data-disabled]):hover{
+  background:var(--surface-toggle-surface-on-hover);
+  border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
 }
-.text_button_module_textButton--581e7:not(:disabled):active{
-  color:var(--text-cta-link-pressed);
+
+.toolbar_module_invertDropdownIndicator--afeab{
+  transform:rotate(.5turn);
+}
+
+.toolbar_module_triggerButtonSelectedWithColor--afeab[data-state=on]:hover{
+  opacity:.7;
 }

package/lib-esm/index.d.ts

@@ -50,6 +50,7 @@ export * from './switch';
 export * from './text';
 export * from './text-area';
 export * from './text-button';
+export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';
 export * from './util-components/scrollable-container/scrollable-container';

package/lib-esm/index.js

@@ -62,6 +62,7 @@ export { Switch } from './switch/index.js';
 export { Text } from './text/text.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
+export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';
 export { ScrollContext, ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';

package/lib-esm/toolbar/index.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, } from './types';
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
+ * @example
+ *   <Toolbar.Root>
+ *       <Toolbar.ToggleGroup type="single">
+ *           <Toolbar.ToggleItem aria-label="draw" icon={Pencil} value="pencil" />
+ *           <Toolbar.ToggleItem aria-label="stop-drawing" icon={PencilCrossed} value="pencilCrossed" />
+ *       </Toolbar.ToggleGroup>
+ *       <Toolbar.Separator />
+ *
+ *       <Toolbar.Button>
+ *           share
+ *       </Toolbar.Button>
+ *       <Toolbar.Separator />
+ *
+ *       <Toolbar.Button aria-label="delete" >
+ *           Upload <Toolbar.DropdownIndicator direction="down" />
+ *       </Toolbar.Button>
+ *   </Toolbar.Root>
+ */
+export declare const Toolbar: {
+    /**
+     * Contains all parts of the toolbar component.
+     */
+    Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Two-state button that can be toggled on or off.
+     */
+    ToggleItem: import("react").ForwardRefExoticComponent<import("./types").ToolbarToggleItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * Parent for a set of `Toolbar.ToggleItem` subcomponents.
+     */
+    ToggleGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * A button that is used as a trigger for dropdown elements.
+     */
+    DropdownTriggerButton: import("react").ForwardRefExoticComponent<import("./types").ToolbarTriggerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * SVG element used to render icon in buttons.
+     */
+    Icon: import("react").ForwardRefExoticComponent<import("./types").ToolbarIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    /**
+     * A button item.
+     */
+    Button: import("react").ForwardRefExoticComponent<import("./types").ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * Component used to visually separate options in the Toolbar.
+     */
+    Separator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Caret icon indicating dropdown.
+     */
+    DropdownIndicator: import("react").ForwardRefExoticComponent<import("./types").ToolbarDropdownIndicatorProps & import("react").RefAttributes<SVGSVGElement>>;
+};

package/lib-esm/toolbar/index.js

@@ -0,0 +1,65 @@
+import { ToolbarButton } from './toolbar-button.js';
+import { ToolbarDropdownIndicator } from './toolbar-dropdown-indicator.js';
+import { ToolbarIcon } from './toolbar-icon.js';
+import { ToolbarRoot } from './toolbar-root.js';
+import { ToolbarSeparator } from './toolbar-separator.js';
+import { ToolbarToggleGroup } from './toolbar-toggle-group.js';
+import { ToolbarToggleItem } from './toolbar-toggle-item.js';
+import { ToolbarTriggerButton } from './toolbar-trigger-button.js';
+
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
+ * @example
+ *   <Toolbar.Root>
+ *       <Toolbar.ToggleGroup type="single">
+ *           <Toolbar.ToggleItem aria-label="draw" icon={Pencil} value="pencil" />
+ *           <Toolbar.ToggleItem aria-label="stop-drawing" icon={PencilCrossed} value="pencilCrossed" />
+ *       </Toolbar.ToggleGroup>
+ *       <Toolbar.Separator />
+ *
+ *       <Toolbar.Button>
+ *           share
+ *       </Toolbar.Button>
+ *       <Toolbar.Separator />
+ *
+ *       <Toolbar.Button aria-label="delete" >
+ *           Upload <Toolbar.DropdownIndicator direction="down" />
+ *       </Toolbar.Button>
+ *   </Toolbar.Root>
+ */
+const Toolbar = {
+  /**
+   * Contains all parts of the toolbar component.
+   */
+  Root: ToolbarRoot,
+  /**
+   * Two-state button that can be toggled on or off.
+   */
+  ToggleItem: ToolbarToggleItem,
+  /**
+   * Parent for a set of `Toolbar.ToggleItem` subcomponents.
+   */
+  ToggleGroup: ToolbarToggleGroup,
+  /**
+   * A button that is used as a trigger for dropdown elements.
+   */
+  DropdownTriggerButton: ToolbarTriggerButton,
+  /**
+   * SVG element used to render icon in buttons.
+   */
+  Icon: ToolbarIcon,
+  /**
+   * A button item.
+   */
+  Button: ToolbarButton,
+  /**
+   * Component used to visually separate options in the Toolbar.
+   */
+  Separator: ToolbarSeparator,
+  /**
+   * Caret icon indicating dropdown.
+   */
+  DropdownIndicator: ToolbarDropdownIndicator
+};
+
+export { Toolbar };

package/lib-esm/toolbar/toolbar-button.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ToolbarButtonProps } from './types';
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/toolbar/toolbar-button.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    style,
+    backgroundColor,
+    className,
+    ...rest
+  } = props;
+  return jsx(ToolbarPrimitive.Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.toolbarItem, className),
+    style: {
+      '--toolbar-button-color': backgroundColor,
+      ...style
+    },
+    children: children
+  });
+});
+
+export { ToolbarButton };

package/lib-esm/toolbar/toolbar-dropdown-indicator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ToolbarDropdownIndicatorProps } from './types';
+export declare const ToolbarDropdownIndicator: import("react").ForwardRefExoticComponent<ToolbarDropdownIndicatorProps & import("react").RefAttributes<SVGSVGElement>>;

package/lib-esm/toolbar/toolbar-dropdown-indicator.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { Caret } from '@box/blueprint-web-assets/icons/Fill';
+import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
+  direction = 'down',
+  className,
+  color
+}, forwardedRef) => {
+  return jsx(Caret, {
+    ref: forwardedRef,
+    className: clsx({
+      [styles.invertDropdownIndicator]: direction === 'up'
+    }, className),
+    color: color,
+    height: Size3,
+    role: "presentation",
+    width: Size3
+  });
+});
+
+export { ToolbarDropdownIndicator };

package/lib-esm/toolbar/toolbar-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ToolbarIconProps } from './types';
+export declare const ToolbarIcon: React.ForwardRefExoticComponent<ToolbarIconProps & React.RefAttributes<SVGSVGElement>>;

package/lib-esm/toolbar/toolbar-icon.js

@@ -0,0 +1,20 @@
+import { Size5, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import React__default, { forwardRef } from 'react';
+
+const ToolbarIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    className,
+    color = IconIconOnLight
+  } = props;
+  return /*#__PURE__*/React__default.createElement(icon, {
+    ref: forwardedRef,
+    width: Size5,
+    height: Size5,
+    role: 'presentation',
+    className,
+    color
+  });
+});
+
+export { ToolbarIcon };

package/lib-esm/toolbar/toolbar-root.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+export declare const ToolbarRoot: import("react").ForwardRefExoticComponent<ToolbarPrimitive.ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/toolbar/toolbar-root.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(ToolbarPrimitive.Root, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.root, className),
+    children: children
+  });
+});
+
+export { ToolbarRoot };

package/lib-esm/toolbar/toolbar-separator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+export declare const ToolbarSeparator: import("react").ForwardRefExoticComponent<ToolbarPrimitive.ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/toolbar/toolbar-separator.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarSeparator = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(ToolbarPrimitive.Separator, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.separator, className)
+  });
+});
+
+export { ToolbarSeparator };

package/lib-esm/toolbar/toolbar-toggle-group.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+export declare const ToolbarToggleGroup: import("react").ForwardRefExoticComponent<ToolbarPrimitive.ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/toolbar/toolbar-toggle-group.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarToggleGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(ToolbarPrimitive.ToggleGroup, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.toggleGroup, className),
+    children: children
+  });
+});
+
+export { ToolbarToggleGroup };

package/lib-esm/toolbar/toolbar-toggle-item.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ToolbarToggleItemProps } from './types';
+export declare const ToolbarToggleItem: import("react").ForwardRefExoticComponent<ToolbarToggleItemProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/toolbar/toolbar-toggle-item.js

@@ -0,0 +1,28 @@
+import { jsxs } from 'react/jsx-runtime';
+import { Size6, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import styles from './toolbar.module.js';
+
+const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    icon,
+    color = IconIconOnLight,
+    ...rest
+  } = props;
+  return jsxs(ToolbarPrimitive.ToggleItem, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.toolbarItem, styles.toolbarToggle),
+    children: [children, /*#__PURE__*/createElement(icon, {
+      height: Size6,
+      width: Size6,
+      role: 'presentation',
+      color
+    })]
+  });
+});
+
+export { ToolbarToggleItem };

package/lib-esm/toolbar/toolbar-trigger-button.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ToolbarTriggerButtonProps } from './types';
+export declare const ToolbarTriggerButton: import("react").ForwardRefExoticComponent<ToolbarTriggerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/toolbar/toolbar-trigger-button.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { ToolbarButton } from './toolbar-button.js';
+import styles from './toolbar.module.js';
+
+const ToolbarTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    selected = false,
+    className,
+    ...rest
+  } = props;
+  const selectionStateAttrs = {
+    'data-state': selected ? 'on' : 'off',
+    'aria-pressed': Boolean(selected)
+  };
+  return jsx(ToolbarButton, {
+    ...rest,
+    ...selectionStateAttrs,
+    ref: forwardedRef,
+    className: clsx(className, {
+      [styles.triggerButtonSelectedWithColor]: props.backgroundColor && selected
+    }),
+    children: children
+  });
+});
+
+export { ToolbarTriggerButton };

package/lib-esm/toolbar/toolbar.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"root":"toolbar_module_root--afeab","separator":"toolbar_module_separator--afeab","toggleGroup":"toolbar_module_toggleGroup--afeab","toolbarItem":"toolbar_module_toolbarItem--afeab","toolbarToggle":"toolbar_module_toolbarToggle--afeab","invertDropdownIndicator":"toolbar_module_invertDropdownIndicator--afeab","triggerButtonSelectedWithColor":"toolbar_module_triggerButtonSelectedWithColor--afeab"};
+
+export { styles as default };

package/lib-esm/toolbar/types.d.ts

@@ -0,0 +1,39 @@
+import { type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps, type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps } from '@radix-ui/react-toolbar';
+import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
+export type ToolbarProps = ToolbarPrimitiveProps;
+export type ToolbarSeparatorProps = ToolbarPrimitiveSeparatorProps;
+export type ToolbarToggleGroupProps = ToolbarToggleGroupPrimitiveProps;
+interface ToolbarButtonCSS extends CSSProperties {
+    '--toolbar-button-color'?: string;
+}
+export interface ToolbarButtonProps extends Omit<ToolbarPrimitiveButtonProps, 'style'> {
+    /** Sets background color of button element. */
+    backgroundColor?: CSSProperties['backgroundColor'];
+    style?: ToolbarButtonCSS;
+}
+export interface ToolbarTriggerButtonProps extends ToolbarButtonProps {
+    /** Selection state of group opened with button.
+     * @default false
+     */
+    selected?: boolean;
+}
+export interface ToolbarToggleItemProps extends ToolbarPrimitiveToggleItemProps {
+    /** Icon rendered by the component. */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    'aria-label': NonNullable<HTMLAttributes<HTMLButtonElement>['aria-label']>;
+}
+export type ToolbarIconProps = {
+    color?: React.SVGProps<SVGSVGElement>['color'];
+    className?: string;
+    /** Icon rendered by the component. */
+    icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
+};
+export type ToolbarDropdownIndicatorProps = {
+    /** Direction in which by indicator is pointing.
+     * @default 'down'
+     */
+    direction?: 'up' | 'down';
+    color?: React.SVGProps<SVGSVGElement>['color'];
+    className?: string;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.10.0",
+    "version": "6.11.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -45,6 +45,7 @@
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-toast": "1.1.4",
         "@radix-ui/react-toggle-group": "^1.0.4",
+        "@radix-ui/react-toolbar": "^1.0.4",
         "@radix-ui/react-tooltip": "1.0.6",
         "@radix-ui/react-visually-hidden": "^1.0.3",
         "clsx": "^1.2.1",
@@ -56,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "6dd474f7b770509844935c8eedd80bc2e61750bd",
+    "gitHead": "efa215e8d6bd57e23276f66c3f9b6ff60ed77271",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {