@box/blueprint-web 9.0.2 → 9.1.0

package/lib-esm/index.css

@@ -6797,7 +6797,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarRoot--dcc11{
+.bp_toolbar_module_toolbarRoot--b843f{
   align-items:center;
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
@@ -6808,19 +6808,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding:calc(var(--space-1) - var(--border-1));
 }
 
-.bp_toolbar_module_separator--dcc11{
+.bp_toolbar_module_separator--b843f{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
   height:var(--size-6);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--dcc11{
+.bp_toolbar_module_toggleGroup--b843f{
   display:flex;
   gap:var(--space-1);
 }
 
-.bp_toolbar_module_toolbarItem--dcc11{
+.bp_toolbar_module_toolbarItem--b843f{
   --toolbar-item-hover-opacity:0.3;
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
@@ -6838,48 +6838,84 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--dcc11[data-disabled]{
+.bp_toolbar_module_toolbarItem--b843f[data-disabled]{
   background:var(--surface-toggle-surface);
   opacity:var(--toolbar-item-hover-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--dcc11:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--b843f:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_toolbar_module_toolbarItem--dcc11:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--b843f:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
   border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
 }
 
-.bp_toolbar_module_toolbarToggle--dcc11[data-state=on]{
+.bp_toolbar_module_toolbarToggle--b843f[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.bp_toolbar_module_toolbarToggle--dcc11[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--b843f[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.bp_toolbar_module_toolbarToggle--dcc11[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--b843f[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);
 }
 
-.bp_toolbar_module_dropdownIndicator--dcc11.bp_toolbar_module_invertCaret--dcc11{
+.bp_toolbar_module_dropdownIndicator--b843f.bp_toolbar_module_invertCaret--b843f{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--dcc11{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b843f{
   --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--dcc11[data-state=on] .bp_toolbar_module_dropdownIndicator--dcc11 path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b843f[data-state=on] .bp_toolbar_module_dropdownIndicator--b843f path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--dcc11[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b843f[data-state=on]:hover{
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--dcc11{
+.bp_toolbar_module_toolbarIcon--b843f{
   align-items:center;
   display:flex;
   height:var(--size-5);
   justify-content:center;
   width:var(--size-5);
+}
+
+.bp_toolbar_module_toolbarTextToggleItem--b843f{
+  border:var(--border-1) solid var(--border-toggletext-border-off);
+  color:var(--text-text-on-light);
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  padding-inline:var(--space-2);
+  text-decoration:none;
+  text-indent:unset;
+  text-transform:none;
+  white-space:nowrap;
+}
+.bp_toolbar_module_toolbarTextToggleItem--b843f:hover{
+  background:var(--surface-toggle-surface-off-hover);
+  border-color:var(--border-toggletext-border-off-hover);
+}
+.bp_toolbar_module_toolbarTextToggleItem--b843f:active{
+  background:var(--surface-toggle-surface-off-pressed);
+  border-color:var(--border-toggletext-border-off-pressed);
+}
+.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]{
+  background:var(--surface-toggletext-surface-on);
+  border:var(--border-1) solid var(--border-toggletext-border-on);
+  color:var(--text-toggletext-text);
+}
+.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]:hover{
+  background:var(--surface-toggletext-surface-on-hover);
+  border-color:var(--border-toggletext-border-on-hover);
+}
+.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]:active{
+  background:var(--surface-toggletext-surface-on-pressed);
+  border-color:var(--border-toggletext-border-on-pressed);
 }

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

@@ -1,4 +1,4 @@
-export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, } from './types';
+export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
  * @example
@@ -28,6 +28,10 @@ export declare const Toolbar: {
      * Two-state button that can be toggled on or off.
      */
     ToggleItem: import("react").ForwardRefExoticComponent<import("./types").ToolbarToggleItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * Two-state text button that can be toggled on or off.
+     */
+    TextToggleItem: import("react").ForwardRefExoticComponent<import("./types").ToolbarTextToggleItemProps & import("react").RefAttributes<HTMLButtonElement>>;
     /**
      * Parent for a set of `Toolbar.ToggleItem` subcomponents.
      */

package/lib-esm/toolbar/index.js

@@ -6,6 +6,7 @@ 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';
+import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
 
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
@@ -36,6 +37,10 @@ const Toolbar = {
    * Two-state button that can be toggled on or off.
    */
   ToggleItem: ToolbarToggleItem,
+  /**
+   * Two-state text button that can be toggled on or off.
+   */
+  TextToggleItem: ToolbarTextToggleItem,
   /**
    * Parent for a set of `Toolbar.ToggleItem` subcomponents.
    */

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

@@ -0,0 +1,2 @@
+import { type ToolbarTextToggleItemProps } from './types';
+export declare const ToolbarTextToggleItem: import("react").ForwardRefExoticComponent<ToolbarTextToggleItemProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/toolbar/toolbar-text-toggle-item.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 ToolbarTextToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(ToolbarPrimitive.ToggleItem, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.toolbarItem, styles.toolbarTextToggleItem),
+    children: children
+  });
+});
+
+export { ToolbarTextToggleItem };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--dcc11","separator":"bp_toolbar_module_separator--dcc11","toggleGroup":"bp_toolbar_module_toggleGroup--dcc11","toolbarItem":"bp_toolbar_module_toolbarItem--dcc11","toolbarToggle":"bp_toolbar_module_toolbarToggle--dcc11","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--dcc11","invertCaret":"bp_toolbar_module_invertCaret--dcc11","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--dcc11","toolbarIcon":"bp_toolbar_module_toolbarIcon--dcc11"};
+var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--b843f","separator":"bp_toolbar_module_separator--b843f","toggleGroup":"bp_toolbar_module_toggleGroup--b843f","toolbarItem":"bp_toolbar_module_toolbarItem--b843f","toolbarToggle":"bp_toolbar_module_toolbarToggle--b843f","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--b843f","invertCaret":"bp_toolbar_module_invertCaret--b843f","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--b843f","toolbarIcon":"bp_toolbar_module_toolbarIcon--b843f","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--b843f"};
 
 export { styles as default };

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

@@ -22,6 +22,10 @@ export interface ToolbarToggleItemProps extends ToolbarPrimitiveToggleItemProps
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
     'aria-label': NonNullable<HTMLAttributes<HTMLButtonElement>['aria-label']>;
 }
+export interface ToolbarTextToggleItemProps extends ToolbarPrimitiveToggleItemProps {
+    children: string;
+    'aria-label': NonNullable<HTMLAttributes<HTMLButtonElement>['aria-label']>;
+}
 export interface ToolbarIconProps {
     /** Color of rendered icon. */
     color?: React.SVGProps<SVGSVGElement>['color'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.0.2",
+    "version": "9.1.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "3336acc51ee37751c34b425b05337b5effd16b72",
+    "gitHead": "9813a49e438da2e6375398b9c80065816680c67e",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {