@box/blueprint-web 7.22.0 → 7.24.0

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

@@ -1,7 +1,7 @@
 import { type BadgeProps } from './types';
 export interface IconBadgeProps extends BadgeProps {
     /** The variant of the icon badge. */
-    variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress';
+    variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'alert-error';
 }
-export declare const IconBadgeVariants: ("file-pdf" | "file-docs" | "file-sheets" | "file-image" | "file-canvas" | "file-pages" | "file-keynote" | "file-boxnote" | "file-video" | "folder-external" | "folder-shared" | "action-relay" | "action-mention" | "action-task" | "action-taskapproval" | "action-annotation" | "action-performed-completed" | "action-performed-rejected" | "collaborator-external" | "collaborator-admin" | "collaborator-coadmin" | "content-pin" | "content-collection" | "content-offline" | "content-progress")[];
+export declare const IconBadgeVariants: ("file-pdf" | "file-docs" | "file-sheets" | "file-image" | "file-canvas" | "file-pages" | "file-keynote" | "file-boxnote" | "file-video" | "folder-external" | "folder-shared" | "action-relay" | "action-mention" | "action-task" | "action-taskapproval" | "action-annotation" | "action-performed-completed" | "action-performed-rejected" | "collaborator-external" | "collaborator-admin" | "collaborator-coadmin" | "content-pin" | "content-collection" | "content-offline" | "content-progress" | "alert-error")[];
 export declare const IconBadge: (props: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader } from '@box/blueprint-web-assets/icons/Fill';
-import { SurfaceBadgePdfSurface, GrayWhite, SurfaceBadgeDocsSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeImageSurface, SurfaceBadgeCanvasSurface, SurfaceBadgePagesSurface, SurfaceBadgeKeynoteSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeVideoSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface } from '@box/blueprint-web-assets/tokens/tokens';
+import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader, Alert } from '@box/blueprint-web-assets/icons/Fill';
+import { SurfaceBadgePdfSurface, GrayWhite, SurfaceBadgeDocsSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeImageSurface, SurfaceBadgeCanvasSurface, SurfaceBadgePagesSurface, SurfaceBadgeKeynoteSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeVideoSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface, SurfaceBadgeErrorSurface } from '@box/blueprint-web-assets/tokens/tokens';
 import { createElement } from 'react';
 import { BaseBadge } from './base-badge.js';
 import styles from './base-badge.module.js';
@@ -134,6 +134,11 @@ const badgeVariantToIconProps = {
     backgroundColor: SurfaceBadgeProgressSurface,
     icon: Loader,
     iconColor: GrayWhite
+  },
+  'alert-error': {
+    backgroundColor: SurfaceBadgeErrorSurface,
+    icon: Alert,
+    iconColor: GrayWhite
   }
 };
 const badgeSizeToIconSize = {

package/lib-esm/icon-toggle-button/icon-toggle-button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type IconToggleButtonProps } from './types';
+export declare const iconSizeMap: Record<NonNullable<IconToggleButtonProps['size']>, string>;
+export declare const IconToggleButton: import("react").ForwardRefExoticComponent<Omit<IconToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/icon-toggle-button/icon-toggle-button.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
+import styles from './icon-toggle-button.module.js';
+
+const iconSizeMap = {
+  'x-small': Size4,
+  small: Size5,
+  medium: Size6
+};
+const IconToggleButton = /*#__PURE__*/forwardRef(({
+  className,
+  icon,
+  variant = 'default',
+  size = 'medium',
+  ...rest
+}, ref) => {
+  return jsx(BaseToggleButton, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.iconToggleButton, styles[variant], styles[size], className),
+    children: /*#__PURE__*/createElement(icon, {
+      className: styles.icon,
+      height: iconSizeMap[size],
+      width: iconSizeMap[size],
+      role: 'presentation'
+    })
+  });
+});
+IconToggleButton.displayName = 'IconToggleButton';
+
+export { IconToggleButton, iconSizeMap };

package/lib-esm/icon-toggle-button/icon-toggle-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"iconToggleButton":"bp_icon_toggle_button_module_iconToggleButton--bf96b","high-contrast":"bp_icon_toggle_button_module_high-contrast--bf96b","icon":"bp_icon_toggle_button_module_icon--bf96b","default":"bp_icon_toggle_button_module_default--bf96b","medium":"bp_icon_toggle_button_module_medium--bf96b","small":"bp_icon_toggle_button_module_small--bf96b","x-small":"bp_icon_toggle_button_module_x-small--bf96b"};
+
+export { styles as default };

package/lib-esm/icon-toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconToggleButton } from './icon-toggle-button';
+export type { IconToggleButtonProps } from './types';

package/lib-esm/icon-toggle-button/types.d.ts

@@ -0,0 +1,28 @@
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type BaseToggleButtonProps } from '../util-components/base-toggle-button/types';
+export declare const IconToggleButtonSizes: readonly ["x-small", "small", "medium"];
+export declare const IconButtonVariants: readonly ["default", "high-contrast"];
+export type IconToggleButtonSize = (typeof IconToggleButtonSizes)[number];
+export type IconButtonVariant = (typeof IconButtonVariants)[number];
+export interface IconToggleButtonProps extends Omit<BaseToggleButtonProps, 'children'> {
+    /**
+     * Size of the button.
+     *
+     * @default 'medium'
+     */
+    size?: IconToggleButtonSize;
+    /**
+     * The variant of the button.
+     *
+     * @default 'default'
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Accessible label for the button.
+     */
+    'aria-label': NonNullable<BaseToggleButtonProps['aria-label']>;
+    /**
+     * Icon that will be rendered.
+     */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}

package/lib-esm/index.css

@@ -3464,6 +3464,75 @@
   height:var(--size-8);
   width:var(--size-8);
 }
+
+.bp_icon_toggle_button_module_iconToggleButton--bf96b{
+  align-items:center;
+  background:#0000;
+  border:none;
+  border-radius:var(--radius-2);
+  color:var(--text-text-on-light);
+  cursor:pointer;
+  display:flex;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  justify-content:center;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  outline:0;
+  padding-inline:0;
+  text-decoration:none;
+  text-transform:none;
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b:disabled{
+  opacity:.3;
+  pointer-events:none;
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b:hover{
+  background-color:var(--surface-toggle-surface-off-hover);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[data-focus-visible]{
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b:active{
+  background-color:var(--surface-toggle-surface-off-pressed);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b.bp_icon_toggle_button_module_high-contrast--bf96b .bp_icon_toggle_button_module_icon--bf96b *{
+  fill:var(--icon-icon-on-light);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b.bp_icon_toggle_button_module_default--bf96b .bp_icon_toggle_button_module_icon--bf96b *{
+  fill:var(--icon-icon-on-light-secondary);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[aria-pressed=true]{
+  background:var(--surface-toggle-surface-on);
+  border:var(--border-1) solid var(--border-toggle-border-on);
+  color:var(--text-text-on-dark);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[aria-pressed=true] .bp_icon_toggle_button_module_icon--bf96b *{
+  fill:var(--icon-icon-blue);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[aria-pressed=true]:hover{
+  background-color:var(--surface-toggle-surface-on-hover);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[aria-pressed=true][data-focus-visible]{
+  border:var(--border-1) solid #fff;
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b[aria-pressed=true]:active{
+  background-color:var(--surface-toggle-surface-on-pressed);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b.bp_icon_toggle_button_module_medium--bf96b{
+  height:var(--size-10);
+  width:var(--size-10);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b.bp_icon_toggle_button_module_small--bf96b{
+  height:var(--size-8);
+  width:var(--size-8);
+}
+.bp_icon_toggle_button_module_iconToggleButton--bf96b.bp_icon_toggle_button_module_x-small--bf96b{
+  height:var(--size-6);
+  width:var(--size-6);
+}
 table.bp_inline_table_module_inlineTable--b023b{
   background:var(--gray-white);
   border:var(--border-1) solid var(--gray-10);

package/lib-esm/index.d.ts

@@ -19,6 +19,7 @@ export * from './ghost';
 export * from './grid-list-item';
 export * from './guided-tooltip';
 export * from './icon-dual-state-button';
+export * from './icon-toggle-button';
 export * from './inline-notice/inline-notice';
 export * from './inline-table/inline-table';
 export * from './input-chip';

package/lib-esm/index.js

@@ -23,6 +23,7 @@ export { GridList } from './grid-list-item/index.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';
 export { GuidedTooltipContext } from './guided-tooltip/utils/guided-tooltip-context.js';
 export { IconDualStateButton } from './icon-dual-state-button/icon-dual-state-button.js';
+export { IconToggleButton } from './icon-toggle-button/icon-toggle-button.js';
 export { InlineNotice } from './inline-notice/inline-notice.js';
 export { InlineTable } from './inline-table/inline-table.js';
 export { InputChip } from './input-chip/input-chip.js';

package/lib-esm/primitives/icon-button/icon-button.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<import("./types").IconButtonVariantsProps, "ref"> | Omit<import("./types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<import("./types").IconButtonVariantsProps, "ref"> | Omit<import("./types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/icon-button/icon-button.js

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef, useRef, createElement } from 'react';
-import { useForkRef } from '../../utils/useForkRef.js';
+import { forwardRef, createElement } from 'react';
 import styles from './icon-button.module.js';
 import { iconSizeMap } from './utils.js';
 
@@ -13,10 +12,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     icon,
     ...rest
   } = props;
-  const ref = useRef(null);
   return jsx(Button, {
     ...rest,
-    ref: useForkRef(ref, forwardedRef),
+    ref: forwardedRef,
     className: clsx(styles.iconButton, styles[variant], styles[size], props.className),
     children: /*#__PURE__*/createElement(icon, {
       className: styles.icon,

package/lib-esm/text-toggle-button/text-toggle-button.js

@@ -1,38 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { Button } from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { composeEventHandlers } from '../utils/composeEventHandlers.js';
-import { useControllableState } from '../utils/useControllableState.js';
+import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
 import styles from './text-toggle-button.module.js';
 
 const TextToggleButton = /*#__PURE__*/forwardRef(({
-  pressed: pressedProp,
-  defaultPressed = false,
-  onPressedChange,
-  disabled,
-  onClick,
   className,
   ...rest
 }, ref) => {
-  const [pressed = false, setPressed] = useControllableState({
-    prop: pressedProp,
-    onChange: onPressedChange,
-    defaultProp: defaultPressed
-  });
-  return jsx(Button, {
-    "aria-pressed": pressed,
-    "data-disabled": disabled ? '' : undefined,
-    "data-state": pressed ? 'on' : 'off',
+  return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
-    className: clsx(styles.textToggleButton, className),
-    disabled: disabled,
-    onClick: composeEventHandlers(onClick, () => {
-      if (!disabled) {
-        setPressed(!pressed);
-      }
-    })
+    className: clsx(styles.textToggleButton, className)
   });
 });
 TextToggleButton.displayName = 'TextToggleButton';

package/lib-esm/text-toggle-button/types.d.ts

@@ -1,21 +1,7 @@
-import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
-export interface TextToggleButtonProps extends AriakitButtonProps {
+import { type BaseToggleButtonProps } from '../util-components/base-toggle-button/types';
+export interface TextToggleButtonProps extends BaseToggleButtonProps {
     /**
      * The text content of the button.
      */
     children: string;
-    /**
-     * The controlled state of the toggle.
-     */
-    pressed?: boolean;
-    /**
-     * The state of the toggle when initially rendered. Use `defaultPressed`
-     * if you do not need to control the state of the toggle.
-     * @defaultValue false
-     */
-    defaultPressed?: boolean;
-    /**
-     * The callback that fires when the state of the toggle changes.
-     */
-    onPressedChange?(pressed: boolean): void;
 }

package/lib-esm/util-components/base-toggle-button/base-toggle-button.d.ts

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

package/lib-esm/util-components/base-toggle-button/base-toggle-button.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import { forwardRef } from 'react';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { useControllableState } from '../../utils/useControllableState.js';
+
+const BaseToggleButton = /*#__PURE__*/forwardRef(({
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  disabled,
+  onClick,
+  ...rest
+}, ref) => {
+  const [pressed = false, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed
+  });
+  return jsx(Button, {
+    ...rest,
+    ref: ref,
+    "aria-pressed": pressed,
+    "data-disabled": disabled ? '' : undefined,
+    "data-state": pressed ? 'on' : 'off',
+    disabled: disabled,
+    onClick: composeEventHandlers(onClick, () => {
+      if (!disabled) {
+        setPressed(!pressed);
+      }
+    })
+  });
+});
+BaseToggleButton.displayName = 'BaseToggleButton';
+
+export { BaseToggleButton };

package/lib-esm/util-components/base-toggle-button/types.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+export interface BaseToggleButtonProps extends AriakitButtonProps {
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?(pressed: boolean): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.22.0",
+    "version": "7.24.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -24,7 +24,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.5",
         "@ariakit/react-core": "0.4.5",
-        "@box/blueprint-web-assets": "^4.21.3",
+        "@box/blueprint-web-assets": "^4.21.4",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -55,7 +55,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.5.2",
+        "@box/storybook-utils": "^0.6.0",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "31fd57a978e09716c6f7e46863c4fef7765130ce",
+    "gitHead": "c45d13964d3b60b860c3606a0eb55fb86bc2e057",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {