@box/blueprint-web 6.9.3 → 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/search-input/index.d.ts

@@ -1,22 +1,9 @@
 /// <reference types="react" />
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
-    className?: string | undefined;
-    defaultValue?: string | undefined;
-    disabled?: boolean | undefined;
-    onChange?: ((searchInputValue: string) => void) | undefined;
-    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
-    onSubmit?: ((searchInputValue: string) => void) | undefined;
-    searchIconAriaLabel: string;
-    searchInputAriaLabel: string;
-    searchInputClearAriaLabel: string;
-    type?: "search" | undefined;
-    variant?: "in-context" | "global" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<import("./types").SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
     /**
      * Styled wrapper over an icon button.
      */
     ActionButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Controlled: import("react").ForwardRefExoticComponent<Omit<import("./search-input-controlled").SearchInputControlledProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 export type { SearchInputActionButtonProps, SearchInputProps } from './types';

package/lib-esm/search-input/index.js

@@ -1,11 +1,13 @@
 import { SearchInput as SearchInput$1 } from './search-input.js';
 import { SearchInputActionButton } from './search-input-action-button.js';
+import { SearchInputControlled } from './search-input-controlled/search-input-controlled.js';
 
 const SearchInput = Object.assign(SearchInput$1, {
   /**
    * Styled wrapper over an icon button.
    */
-  ActionButton: SearchInputActionButton
+  ActionButton: SearchInputActionButton,
+  Controlled: SearchInputControlled
 });
 
 export { SearchInput };

package/lib-esm/search-input/search-input-controlled/index.d.ts

@@ -0,0 +1,2 @@
+export * from './search-input-controlled';
+export * from './types';

package/lib-esm/search-input/search-input-controlled/search-input-controlled.d.ts

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

package/lib-esm/search-input/search-input-controlled/search-input-controlled.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Search } from '@box/blueprint-web-assets/icons/Fill';
+import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, Children } from 'react';
+import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { switchCase } from '../../utils/switchCase.js';
+import { AccessibleXMarkGlobal, AccessibleXMark } from '../search-input.js';
+import styles from '../search.module.js';
+
+const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    disabled = false,
+    onChange,
+    onClearInput,
+    onKeyDown,
+    onSubmit,
+    placeholder = '',
+    searchIconAriaLabel,
+    searchInputAriaLabel,
+    searchInputClearAriaLabel,
+    value,
+    variant,
+    ...rest
+  } = props;
+  const onSearchInputKeyDown = e => {
+    if (disabled) {
+      return;
+    }
+    switchCase({
+      Enter: () => {
+        e.preventDefault();
+        onSubmit?.(value);
+      },
+      Escape: () => {
+        e.preventDefault();
+        onClearInput();
+      }
+    })(e.key)?.();
+    onKeyDown?.(e);
+  };
+  const isGlobal = variant === 'global';
+  const showActionButton = Children.count(children) > 0;
+  return jsxs("div", {
+    className: clsx(styles.search, className),
+    children: [jsx(Search, {
+      "aria-label": searchIconAriaLabel,
+      className: clsx(styles.searchIcon, isGlobal && styles.global),
+      color: IconIconOnLightSecondary
+    }), jsx("input", {
+      ...rest,
+      ref: forwardedRef,
+      "aria-label": searchInputAriaLabel,
+      className: clsx(styles.searchInput, isGlobal && styles.global, {
+        [styles.withoutActionButton]: isGlobal && !showActionButton
+      }),
+      disabled: disabled,
+      onChange: onChange,
+      onKeyDown: onSearchInputKeyDown,
+      onSubmit: e => {
+        onSubmit?.(value);
+      },
+      placeholder: placeholder,
+      type: "search",
+      value: value
+    }), !!value && jsx(IconButton, {
+      "aria-label": searchInputClearAriaLabel,
+      className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
+      color: IconCtaIcon,
+      icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
+      onClick: onClearInput,
+      size: "x-small"
+    }), isGlobal && showActionButton && children]
+  });
+});
+
+export { SearchInputControlled };

package/lib-esm/search-input/search-input-controlled/types.d.ts

@@ -0,0 +1,17 @@
+import { type ChangeEvent } from 'react';
+import { type SearchInputProps } from '../types';
+export interface SearchInputControlledProps extends Omit<SearchInputProps, 'defaultValue' | 'onChange'> {
+    /**
+     * Handler that is called when the search value is changed.
+     */
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handler that is called when clear button is clicked or escape key is pressed when input is focused
+     */
+    onClearInput: () => void;
+    /**
+     *  Value for controlled search input.
+     *
+     */
+    value: string;
+}

package/lib-esm/search-input/search-input.d.ts

@@ -1,16 +1,5 @@
 /// <reference types="react" />
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
-    className?: string | undefined;
-    defaultValue?: string | undefined;
-    disabled?: boolean | undefined;
-    onChange?: ((searchInputValue: string) => void) | undefined;
-    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
-    onSubmit?: ((searchInputValue: string) => void) | undefined;
-    searchIconAriaLabel: string;
-    searchInputAriaLabel: string;
-    searchInputClearAriaLabel: string;
-    type?: "search" | undefined;
-    variant?: "in-context" | "global" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { type SearchInputProps } from './types';
+export declare const AccessibleXMark: () => JSX.Element;
+export declare const AccessibleXMarkGlobal: () => JSX.Element;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/search-input/search-input.js

@@ -15,6 +15,9 @@ const AccessibleXMarkGlobal = () => jsx(XMark, {
   role: "presentation",
   width: "1.25rem"
 });
+// WARNING: this uncontrolled version of SearchInput is deprecated
+// The logic of SearchInput will be replaced with the logic that is currently in SearchInput.Controlled.
+// This is planned by EO Q1. For more information, please contact the Home Web Team.
 const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -92,4 +95,4 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 
-export { SearchInput };
+export { AccessibleXMark, AccessibleXMarkGlobal, SearchInput };

package/lib-esm/search-input/types.d.ts

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { type IconButtonProps } from '../primitives/icon-button';
-import { type Modify } from '../types/modify';
-export type SearchInputProps = Modify<React.ComponentPropsWithRef<'input'>, {
+export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'onSubmit'> {
     className?: string;
     /**
      * Default value for search input.
@@ -49,5 +48,5 @@ export type SearchInputProps = Modify<React.ComponentPropsWithRef<'input'>, {
      * @default "in-context"
      */
     variant?: 'in-context' | 'global';
-}>;
+}
 export type SearchInputActionButtonProps = IconButtonProps;

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.9.3",
+    "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": "a9179078ea86d2c0c0c983451cc6b64270f011ec",
+    "gitHead": "efa215e8d6bd57e23276f66c3f9b6ff60ed77271",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {