@box/blueprint-web 7.23.0 → 7.24.1

package/lib-esm/combobox/combobox.js

@@ -11,9 +11,9 @@ import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
-import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { ChipsGroup } from './chips-group.js';
 import styles from './combobox.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
@@ -236,15 +236,13 @@ const RootInner = ({
   const reference = useForkRef(inputRef, ref);
   const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
+  const Label = useLabelable(label, comboboxId);
   const inputComponent = isInput ? jsxs(Fragment, {
-    children: [jsx("label", {
+    children: [jsx(Label, {
       className: clsx(styles.label, {
         [styles.hiddenLabel]: hideLabel
       }),
-      htmlFor: comboboxId,
-      children: hideLabel ? jsx(VisuallyHidden, {
-        children: label
-      }) : label
+      hideLabel: hideLabel
     }), jsx(PopoverAnchor, {
       store: comboboxStore,
       children: jsxs("div", {

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

@@ -2,6 +2,7 @@
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
 import { type TextAreaProps } from '../text-area/types';
+import { type Labelable } from '../util-components/labelable/types';
 export type OptionValue = {
     value: string;
     disabled?: boolean;
@@ -9,11 +10,7 @@ export type OptionValue = {
 export type SingleSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string : T;
 export type MultiSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string[] : T[];
 export type ComboboxValue<Multiple, FreeInput, T> = Multiple extends true ? MultiSelectComboboxValue<FreeInput, T> : SingleSelectComboboxValue<FreeInput, T>;
-export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> {
-    /**
-     * The label for the combobox.
-     */
-    label: string;
+export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> extends Labelable {
     /**
      * The list of values for the combobox items.
      */

package/lib-esm/date-picker/date-picker.js

@@ -4,12 +4,13 @@ import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
-import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button } from 'react-aria-components';
+import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
 import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
 import '@internationalized/date';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import styles from './date-picker.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const XMarkIcon = label => () => jsx(XMark, {
   "aria-label": label,
@@ -23,6 +24,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onChange,
     value,
     defaultValue,
+    hideLabel = false,
     label,
     openCalendarDropdownAriaLabel,
     clearDatePickerAriaLabel,
@@ -108,6 +110,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }
   }, []);
   const displayValue = value !== undefined ? value : internalValue;
+  const Label = useLabelable(label, '');
   return jsx(RadixPopover.Root, {
     onOpenChange: setIsCalendarOpen,
     open: isCalendarOpen,
@@ -124,7 +127,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         className: clsx(styles.label, {
           [styles.disabled]: isDisabled
         }),
-        children: label
+        hideLabel: hideLabel
       }), jsx(RadixPopover.Anchor, {
         asChild: true,
         children: jsxs(Group, {

package/lib-esm/date-picker/types.d.ts

@@ -3,11 +3,14 @@ import { type DatePickerProps as RACDatePickerProps, type DateValue } from 'reac
 import { type CalendarBase } from '../primitives/calendar/types';
 import { type InputValueProps } from '../types/input-value-props';
 import { type Modify } from '../types/modify';
-interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'> {
+import { type Labelable } from '../util-components/labelable/types';
+interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'>, Labelable {
     /**
-     * Label displayed above date-picker input
+     * When `true`, label text is hidden.
+     *
+     * @default false
      */
-    label: string;
+    hideLabel?: boolean;
     /**
      * Aria label for button opening calendar in DatePicker
      */

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/base-text-input/base-text-input.js

@@ -2,9 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useMemo, cloneElement } from 'react';
 import { useUniqueId } from '../../utils/useUniqueId.js';
-import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
 import { InlineError } from '../inline-error/inline-error.js';
 import styles from './base-text-input.module.js';
+import { useLabelable } from '../../util-components/labelable/useLabelable.js';
 
 /**
  * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
@@ -34,20 +34,18 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const IconComponent = useMemo(() => icon && /*#__PURE__*/cloneElement(icon, {
     className: clsx(icon.props?.className, styles.iconShared)
   }), [icon]);
+  const Label = useLabelable(label, inputId);
   return jsxs(Fragment, {
     children: [jsxs("div", {
       className: clsx([styles.textInputContainer], {
         [styles.disabled]: disabled,
         [styles.error]: shouldMarkError
       }, className),
-      children: [jsx("label", {
+      children: [jsx(Label, {
         className: clsx([styles.label], {
           [styles.hidden]: hideLabel
         }),
-        htmlFor: inputId,
-        children: hideLabel ? jsx(VisuallyHidden, {
-          children: label
-        }) : label
+        hideLabel: hideLabel
       }), jsx("input", {
         ...rest,
         ...(hasError && {

package/lib-esm/primitives/base-text-input/types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & {
-    /** The label for text input */
-    label: string;
+import { type Labelable } from '../../util-components/labelable/types';
+export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelable & {
     /** Input type, defaults to 'text' */
     type?: 'text' | 'password';
     /** When true label text is hidden */

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/select/select.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Label } from '@radix-ui/react-label';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
@@ -8,6 +7,7 @@ import { forwardRef, useCallback } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './select.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -50,21 +50,19 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onValueChange,
     onOpenChange: handleOnChange
   };
+  const Label = useLabelable(label, selectId);
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
     children: [jsx(Label, {
       className: styles.label,
-      hidden: hideLabel,
-      htmlFor: selectId,
-      children: label
+      hideLabel: hideLabel
     }), jsxs(SelectPrimitive.Root, {
       ...selectProps,
       children: [jsxs(SelectPrimitive.Trigger, {
         ...triggerProps,
         ref: forwardedRef,
-        "aria-label": label,
         ...(hasError && {
           'aria-invalid': 'true'
         }),

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

@@ -1,11 +1,8 @@
 import { type SelectItemProps as RadixItemProps, type SelectContentProps as RadixSelectContentProps, type SelectProps as RadixSelectProps, type SelectTriggerProps as RadixSelectTriggerProps } from '@radix-ui/react-select';
 import { type ReactElement } from 'react';
 import { type Modify } from '../types/modify';
-export interface ExtraProps {
-    /**
-     * The label for the select.
-     */
-    label: string;
+import { type Labelable } from '../util-components/labelable/types';
+export interface ExtraProps extends Labelable {
     /**
      * The placeholder value displayed within the select trigger button when no values has been selected yet.
      */

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

@@ -1,8 +1,8 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 import { type StyledText } from '../utils/commonTypes';
 type TypographyVariant = 'titleMondo' | 'titleXLarge' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'subtitle' | 'bodyLargeBold' | 'bodyLarge' | 'bodyDefaultBold' | 'bodyDefaultSemibold' | 'bodyDefault' | 'caption' | 'labelBold' | 'label';
 type TypographyColors = 'textOnLightDefault' | 'textOnLightSecondary' | 'textOnLightLink' | 'textOnDarkDefault';
-type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend';
+type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend' | 'label';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
@@ -15,8 +15,11 @@ interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
 interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     as: 'legend';
 }
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    as: 'label';
+}
 /** Supported HTML elements for text */
-export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps;
+export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps | LabelProps;
 export type TextProps = {
     /** The HTML element type which will render */
     as: Element;

package/lib-esm/text-area/text-area.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
-    label: string;
+export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     error?: import("react").ReactNode;
-} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
-    label: string;
+} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;

package/lib-esm/text-area/text-area.js

@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
-import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { TextAreaAutosize } from './text-area-autosize/text-area-autosize.js';
 import styles from './text-area.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -22,19 +22,17 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const textAreaId = useUniqueId('text-area-');
   const hasError = !!error && !disabled;
+  const Label = useLabelable(label, textAreaId);
   return jsxs("div", {
     className: clsx([styles.textAreaContainer], {
       [styles.disabled]: disabled,
       [styles.error]: hasError
     }, className),
-    children: [jsx("label", {
+    children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel
       }),
-      htmlFor: textAreaId,
-      children: hideLabel ? jsx(VisuallyHidden, {
-        children: label
-      }) : label
+      hideLabel: hideLabel
     }), jsx(TextAreaAutosize, {
       ...rest,
       ref: forwardedRef,

package/lib-esm/text-area/types.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import { type RequireAllOrNone } from 'type-fest';
 import { type TextareaAutosizeProps } from './text-area-autosize/types';
+import { type Labelable } from '../util-components/labelable/types';
 export interface Loading {
     /** When `true` TextArea is rendered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
     loading?: boolean;
     /** The aria-label for the loading indicator. */
     loadingAriaLabel?: string;
 }
-export type TextAreaProps = Omit<TextareaAutosizeProps, 'hasError'> & {
-    /** The label for text area */
-    label: string;
+export type TextAreaProps = Labelable & Omit<TextareaAutosizeProps, 'hasError'> & {
     /** When true label text is hidden */
     hideLabel?: boolean;
     /** When true prevents user interaction with text area */

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/lib-esm/util-components/labelable/index.d.ts

@@ -0,0 +1 @@
+export * from './useLabelable';

package/lib-esm/util-components/labelable/types.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export type RenderProp<P = React.HTMLAttributes<never> & {
+    ref?: React.Ref<never>;
+}> = (props: P) => React.ReactElement;
+type HtmlForable = Pick<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
+export interface Labelable {
+    label: string | React.ReactElement<HtmlForable> | RenderProp<HtmlForable>;
+}
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hideLabel?: boolean;
+    ref: React.ForwardedRef<HTMLLabelElement>;
+    elementType?: 'span' | 'label';
+}
+export {};

package/lib-esm/util-components/labelable/useLabelable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type Labelable, type LabelProps } from './types';
+export declare const useLabelable: (label: Labelable['label'], inputId: string) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib-esm/util-components/labelable/useLabelable.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, forwardRef } from 'react';
+import { Role } from '@ariakit/react';
+import { useContextProps, LabelContext } from 'react-aria-components';
+import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
+
+const useLabelable = (label, inputId) => {
+  return useMemo(() => {
+    const Label = /*#__PURE__*/forwardRef((props, ref) => {
+      // If this component is rendered within LabelContext from RAC, we can have props like htmlFor, id, elementType.
+      [props, ref] = useContextProps(props, ref, LabelContext);
+      const {
+        hideLabel,
+        elementType = 'label',
+        ...rest
+      } = props;
+      const labelProps = {
+        ...rest,
+        htmlFor: inputId,
+        ref
+      };
+      if (!label) {
+        return null;
+      }
+      if (typeof label === 'string') {
+        if (elementType === 'label') {
+          return hideLabel ? jsx(VisuallyHidden, {
+            render: jsx(Role.label, {
+              ...labelProps,
+              children: label
+            })
+          }) : jsx(Role.label, {
+            ...labelProps,
+            children: label
+          });
+        }
+        return hideLabel ? jsx(VisuallyHidden, {
+          render: jsx(Role.span, {
+            ...rest,
+            ref: ref,
+            children: label
+          })
+        }) : jsx(Role.span, {
+          ...rest,
+          ref: ref,
+          children: label
+        });
+      }
+      return elementType === 'label' ? jsx(Role.label, {
+        ...labelProps,
+        // @ts-expect-error: Otherwise we have a conflict of HTMLAttributes and our Blueprint components props.
+        render: hideLabel ? jsx(VisuallyHidden, {
+          render: label
+        }) : label
+      }) : jsx(Role.span, {
+        ...rest,
+        ref: ref,
+        // @ts-expect-error: Otherwise we have a conflict of HTMLAttributes and our Blueprint components props.
+        render: hideLabel ? jsx(VisuallyHidden, {
+          render: label
+        }) : label
+      });
+    });
+    Label.displayName = 'Label';
+    return Label;
+  }, [label, inputId]);
+};
+
+export { useLabelable };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.23.0",
+    "version": "7.24.1",
     "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.5",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -32,7 +32,6 @@
         "@radix-ui/react-context-menu": "2.1.5",
         "@radix-ui/react-dialog": "1.0.5",
         "@radix-ui/react-dropdown-menu": "2.0.6",
-        "@radix-ui/react-label": "2.0.2",
         "@radix-ui/react-popover": "1.0.7",
         "@radix-ui/react-radio-group": "1.1.3",
         "@radix-ui/react-scroll-area": "1.0.5",
@@ -55,7 +54,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.5.2",
+        "@box/storybook-utils": "^0.6.1",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -63,7 +62,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "8482d88062723ffbf9d3edbdf5b2c62ce0447cdb",
+    "gitHead": "bb2a831c3e3b11c1af207a693263069f26f7076a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {