@box/blueprint-web 7.21.0 → 7.22.0

package/lib-esm/icon-dual-state-button/icon-dual-state-button.d.ts

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

package/lib-esm/icon-dual-state-button/icon-dual-state-button.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import { IconIconBlue, IconIconOnLightSecondary, Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
+import { useControllableState } from '../utils/useControllableState.js';
+import styles from './icon-dual-state-button.module.js';
+
+const buttonSizeToIconSize = {
+  xsmall: Size4,
+  small: Size5,
+  medium: Size6
+};
+const renderIcon = (icon, size, color) => /*#__PURE__*/createElement(icon, {
+  width: size,
+  height: size,
+  color,
+  role: 'presentation'
+});
+const IconDualStateButton = /*#__PURE__*/forwardRef(({
+  onStateAriaLabel,
+  offStateAriaLabel,
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  disabled,
+  onClick,
+  iconOn,
+  iconOff,
+  size = 'medium',
+  ...rest
+}, ref) => {
+  const [pressed = false, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed
+  });
+  const iconSize = buttonSizeToIconSize[size];
+  return jsx(Button, {
+    ...rest,
+    ref: ref,
+    "aria-label": pressed ? onStateAriaLabel : offStateAriaLabel,
+    className: clsx(styles.iconDualStateButton, styles[`${size}Button`], {
+      [styles.pressed]: pressed
+    }),
+    "data-disabled": disabled ? '' : undefined,
+    "data-state": pressed ? 'on' : 'off',
+    disabled: disabled,
+    onClick: composeEventHandlers(onClick, () => {
+      if (!disabled) {
+        setPressed(!pressed);
+      }
+    }),
+    children: pressed ? renderIcon(iconOn, iconSize, IconIconBlue) : renderIcon(iconOff, iconSize, IconIconOnLightSecondary)
+  });
+});
+IconDualStateButton.displayName = 'IconDualStateButton';
+
+export { IconDualStateButton };

package/lib-esm/icon-dual-state-button/icon-dual-state-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--c18d4","pressed":"bp_icon_dual_state_button_module_pressed--c18d4","xsmallButton":"bp_icon_dual_state_button_module_xsmallButton--c18d4","smallButton":"bp_icon_dual_state_button_module_smallButton--c18d4"};
+
+export { styles as default };

package/lib-esm/icon-dual-state-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconDualStateButton } from './icon-dual-state-button';
+export type { IconDualStateButtonProps } from './types';

package/lib-esm/icon-dual-state-button/types.d.ts

@@ -0,0 +1,41 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+export declare const IconDualStateButtonSizes: readonly ["xsmall", "small", "medium"];
+export interface IconDualStateButtonProps extends AriakitButtonProps {
+    /**
+     * Size of the button.
+     *
+     * @default 'medium'
+     */
+    size?: (typeof IconDualStateButtonSizes)[number];
+    /**
+     * The aria-label for the button in the ON state (pressed).
+     */
+    onStateAriaLabel: string;
+    /**
+     * The aria-label for the button in the OFF state.
+     */
+    offStateAriaLabel: string;
+    /**
+     * The icon to show when the button is in the ON state (pressed).
+     */
+    iconOn: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * The icon to show when the button is in the OFF state.
+     */
+    iconOff: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * The uncontrolled pressed state of the dual state button when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the button.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The controlled state of the dual state button.
+     */
+    pressed?: boolean;
+    /**
+     * The callback that fires when the state of the button changes.
+     */
+    onPressedChange?(pressed: boolean): void;
+}

package/lib-esm/index.css

@@ -3398,6 +3398,72 @@
   margin-block-start:var(--space-5);
   width:100%;
 }
+
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4{
+  align-items:center;
+  background-color:initial;
+  border-radius:var(--radius-1);
+  border-style:none;
+  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;
+  height:var(--size-10);
+  justify-content:center;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  width:var(--size-10);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4:disabled{
+  opacity:.3;
+  pointer-events:none;
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4:hover{
+  background:var(--surface-toggle-surface-off-hover);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4:active{
+  background:var(--surface-toggle-surface-off-pressed);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4[data-focus-visible]{
+  background:var(--surface-toggle-surface-off-hover);
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4[data-focus-visible]:active{
+  background:var(--surface-toggle-surface-off-pressed);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4.bp_icon_dual_state_button_module_pressed--c18d4{
+  background:var(--surface-toggle-surface-on);
+  border:var(--border-1) solid var(--border-toggle-border-on);
+  color:var(--icon-icon-blue);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4.bp_icon_dual_state_button_module_pressed--c18d4:hover{
+  background:var(--surface-toggle-surface-on-hover);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4.bp_icon_dual_state_button_module_pressed--c18d4:active{
+  background:var(--surface-toggle-surface-on-pressed);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4.bp_icon_dual_state_button_module_pressed--c18d4[data-focus-visible]{
+  background:var(--surface-toggle-surface-on-hover);
+  border:var(--border-1) solid #fff;
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_icon_dual_state_button_module_iconDualStateButton--c18d4.bp_icon_dual_state_button_module_pressed--c18d4[data-focus-visible]:active{
+  background:var(--surface-toggle-surface-on-pressed);
+}
+
+.bp_icon_dual_state_button_module_xsmallButton--c18d4{
+  height:var(--size-6);
+  width:var(--size-6);
+}
+
+.bp_icon_dual_state_button_module_smallButton--c18d4{
+  height:var(--size-8);
+  width:var(--size-8);
+}
 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

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

package/lib-esm/index.js

@@ -22,6 +22,7 @@ export { Ghost } from './ghost/ghost.js';
 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 { InlineNotice } from './inline-notice/inline-notice.js';
 export { InlineTable } from './inline-table/inline-table.js';
 export { InputChip } from './input-chip/input-chip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.21.0",
+    "version": "7.22.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "0c47020a7d2b5b1d583f5541cf75442f9a60b148",
+    "gitHead": "31fd57a978e09716c6f7e46863c4fef7765130ce",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {