@box/blueprint-web 7.4.0 → 7.4.3

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
+import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type TextAreaProps } from '../text-area/types';
 export type OptionValue = {
     value: string;
@@ -182,7 +183,7 @@ export type ConditionalComboboxProps = ComboboxTextArea | {
     as: 'input';
 };
 export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
-export interface ComboboxOptionProps {
+export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick'> {
     /**
      * The content to render for the combobox option.
      */

package/lib-esm/index.css

@@ -3697,6 +3697,109 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_page_section_module_pageSectionDivider--30452{
   width:100%;
 }
+
+.bp_password_input_module_passwordInput--e892b input[type=password],.bp_password_input_module_passwordInput--e892b input[type=text]{
+  padding-inline-end:2.375rem;
+}
+.bp_password_input_module_passwordInput--e892b .bp_password_input_module_iconButton--e892b{
+  inset-inline-end:.5rem;
+}
+.bp_password_input_module_passwordInput--e892b .bp_password_input_module_iconButton--e892b:active,.bp_password_input_module_passwordInput--e892b .bp_password_input_module_iconButton--e892b:hover{
+  background:none;
+}
+
+.bp_base_text_input_module_textInputContainer--6a02b{
+  display:flex;
+  flex-direction:column;
+  font-weight:400;
+  position:relative;
+}
+.bp_base_text_input_module_textInputContainer--6a02b,.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_label--6a02b{
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  text-decoration:none;
+  text-transform:none;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_label--6a02b{
+  color:#222;
+  flex:0 0 fit-content;
+  font-weight:700;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_label--6a02b:not(.bp_base_text_input_module_hidden--6a02b){
+  margin-block-end:var(--space-2);
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b{
+  background:#fff;
+  border:.0625rem solid #909090;
+  border-radius:.375rem;
+  box-shadow:inset 0 .125rem .25rem 0 #0000001a;
+  box-sizing:border-box;
+  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;
+  height:2.5rem;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  padding-block:0;
+  padding-inline:.75rem;
+  text-decoration:none;
+  text-transform:none;
+  width:unset;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:hover{
+  box-shadow:var(--innershadow-1);
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b::placeholder{
+  color:#6f6f6f;
+  opacity:1;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b.bp_base_text_input_module_error--6a02b{
+  background:#fff;
+  border:.125rem solid #ed3757;
+  outline:0;
+  padding-inline-start:.6875rem;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:disabled{
+  background:var(--surface-input-surface);
+  border-color:var(--border-input-border);
+  box-shadow:var(--innershadow-1);
+  color:var(--text-text-on-light);
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:disabled:hover{
+  border-color:var(--border-input-border);
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:focus-visible{
+  background:#fff;
+  border:.125rem solid #2486fc;
+  outline:0;
+  padding-inline-start:.6875rem;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:focus-visible:has(+ :not(.bp_base_text_input_module_iconShared--6a02b)){
+  padding-inline:.6875rem;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_textInput--6a02b:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--6a02b):hover{
+  background:#fff;
+  border:.0625rem solid #6f6f6f;
+}
+.bp_base_text_input_module_textInputContainer--6a02b .bp_base_text_input_module_iconShared--6a02b{
+  height:1.5rem;
+  inset-block-end:.375rem;
+  inset-inline-start:unset;
+  position:absolute;
+  width:1.5rem;
+}
+.bp_base_text_input_module_textInputContainer--6a02b.bp_base_text_input_module_disabled--6a02b{
+  opacity:60%;
+}
+
+.bp_base_text_input_module_inlineError--6a02b{
+  margin-block-start:var(--space-2);
+}
 .bp_chip_module_chip--34343{
   align-items:center;
   border:none;
@@ -5088,103 +5191,9 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   color:var(--text-cta-link-pressed);
 }
 
-.bp_text_input_module_textInputContainer--d93d3{
-  display:flex;
-  flex-direction:column;
-  font-weight:400;
-  position:relative;
-}
-.bp_text_input_module_textInputContainer--d93d3,.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_label--d93d3{
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  text-decoration:none;
-  text-transform:none;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_label--d93d3{
-  color:#222;
-  flex:0 0 fit-content;
-  font-weight:700;
-  width:-moz-fit-content;
-  width:fit-content;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_label--d93d3:not(.bp_text_input_module_hidden--d93d3){
-  margin-block-end:var(--space-2);
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3{
-  background:#fff;
-  border:.0625rem solid #909090;
-  border-radius:.375rem;
-  box-shadow:inset 0 .125rem .25rem 0 #0000001a;
-  box-sizing:border-box;
-  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;
-  height:2.5rem;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  padding-block:0;
-  padding-inline:.75rem;
-  text-decoration:none;
-  text-transform:none;
-  width:unset;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:hover{
-  box-shadow:var(--innershadow-1);
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3::placeholder{
-  color:#6f6f6f;
-  opacity:1;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3.bp_text_input_module_error--d93d3{
-  background:#fff;
-  border:.125rem solid #ed3757;
-  outline:0;
-  padding-inline-start:.6875rem;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:disabled{
-  background:var(--surface-input-surface);
-  border-color:var(--border-input-border);
-  box-shadow:var(--innershadow-1);
-  color:var(--text-text-on-light);
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:disabled:hover{
-  border-color:var(--border-input-border);
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:focus-visible{
-  background:#fff;
-  border:.125rem solid #2486fc;
-  outline:0;
-  padding-inline-start:.6875rem;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:focus-visible:not(.bp_text_input_module_loading--d93d3){
-  padding-inline:.6875rem;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3:not(:disabled):not(:focus-visible):not(.bp_text_input_module_error--d93d3):hover{
-  background:#fff;
-  border:.0625rem solid #6f6f6f;
-}
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_textInput--d93d3.bp_text_input_module_loading--d93d3{
+.bp_text_input_module_textInput--3c0cc input:has(+ .bp_text_input_module_iconLoading--3c0cc){
   padding-inline-end:1.875rem;
 }
-.bp_text_input_module_textInputContainer--d93d3 .bp_text_input_module_loadingIndicator--d93d3{
-  display:inline-block;
-  height:1.5rem;
-  inset-block-end:.375rem;
-  inset-inline-end:0;
-  inset-inline-start:unset;
-  position:absolute;
-  width:1.5rem;
-}
-.bp_text_input_module_textInputContainer--d93d3.bp_text_input_module_disabled--d93d3{
-  opacity:60%;
-}
-
-.bp_text_input_module_inlineError--d93d3{
-  margin-block-start:var(--space-2);
-}
 :root{
   --notification-default-paragraph-indent:0rem;
   --notification-default-paragraph-spacing:0;

package/lib-esm/index.d.ts

@@ -26,6 +26,7 @@ export * from './loading-indicator/loading-indicator';
 export * from './modal';
 export * from './navigation-menu';
 export * from './page-section';
+export * from './password-input';
 export * from './primitives/calendar';
 export * from './primitives/chips/filter-chip';
 export * from './primitives/context-menu';

package/lib-esm/index.js

@@ -28,6 +28,7 @@ export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
 export { Modal } from './modal/modal.js';
 export { NavigationMenu } from './navigation-menu/index.js';
 export { PageSection } from './page-section/index.js';
+export { PasswordInput } from './password-input/password-input.js';
 export { Calendar } from './primitives/calendar/calendar.js';
 export { CalendarDate, CalendarDateTime, DateFormatter, Time, ZonedDateTime } from './primitives/calendar/classes.util.js';
 export { fromAbsolute } from './primitives/calendar/from-absolute.util.js';

package/lib-esm/password-input/index.d.ts

@@ -0,0 +1,2 @@
+export { PasswordInput } from './password-input';
+export { type PasswordInputProps } from './types';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../text-input").TextInputProps, "type" | "icon" | "loading" | "loadingAriaLabel"> & {
+    showPasswordAriaLabel: string;
+    hidePasswordAriaLabel: string;
+    autoComplete: "current-password" | "new-password";
+} & Required<Pick<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref"> | Omit<Omit<import("../text-input").TextInputProps, "type" | "icon" | "loading" | "loadingAriaLabel"> & {
+    showPasswordAriaLabel: string;
+    hidePasswordAriaLabel: string;
+    autoComplete: "current-password" | "new-password";
+} & Partial<Record<keyof import("./types").ControlledComponentProps, never>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { Hidden, Visible } from '@box/blueprint-web-assets/icons/Line';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './password-input.module.js';
+import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
+
+const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    onPasswordVisibleChange,
+    passwordVisible,
+    showPasswordAriaLabel,
+    hidePasswordAriaLabel,
+    autoComplete: autocomplete,
+    ...rest
+  } = props;
+  const inputRef = useRef(null);
+  const inputId = useUniqueId('input-');
+  const isControlled = typeof passwordVisible === 'boolean';
+  const [passwordVisibleInternal, setPasswordVisibleInternal] = useState(isControlled ? passwordVisible : false);
+  const passwordVisibleFinal = isControlled ? passwordVisible : passwordVisibleInternal;
+  const toggleVisibility = useCallback(() => {
+    if (isControlled) {
+      onPasswordVisibleChange?.(!passwordVisibleFinal);
+    } else {
+      setPasswordVisibleInternal(!passwordVisibleFinal);
+    }
+  }, [isControlled, onPasswordVisibleChange, passwordVisibleFinal]);
+  const inputType = passwordVisibleFinal ? 'text' : 'password';
+  const iconButtonAriaLabel = passwordVisibleFinal ? hidePasswordAriaLabel : showPasswordAriaLabel;
+  return jsx(BaseTextInput, {
+    ...rest,
+    ref: useForkRef(inputRef, forwardedRef),
+    autoComplete: autocomplete,
+    className: clsx(styles.passwordInput, props.className),
+    icon: jsx(IconButton, {
+      "aria-controls": inputId,
+      "aria-label": iconButtonAriaLabel,
+      className: styles.iconButton,
+      disabled: props.disabled,
+      icon: passwordVisibleFinal ? Hidden : Visible,
+      onClick: toggleVisibility,
+      size: "small"
+    }),
+    id: inputId,
+    spellCheck: false,
+    type: inputType
+  });
+});
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput };

package/lib-esm/password-input/password-input.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"passwordInput":"bp_password_input_module_passwordInput--e892b","iconButton":"bp_password_input_module_iconButton--e892b"};
+
+export { styles as default };

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

@@ -0,0 +1,16 @@
+import { type RequireAllOrNone } from 'type-fest';
+import { type TextInputProps } from '../text-input';
+export interface ControlledComponentProps {
+    /** visibility state for the input */
+    passwordVisible: boolean;
+    /** callback for when visibility changes */
+    onPasswordVisibleChange: (isPasswordVisible: boolean) => void;
+}
+export type PasswordInputProps = Omit<TextInputProps, 'type' | 'icon' | 'loading' | 'loadingAriaLabel'> & {
+    /** label communicating that, when pressed button reveals the password */
+    showPasswordAriaLabel: string;
+    /** label communicating that, when pressed button hides the password */
+    hidePasswordAriaLabel: string;
+    /** autocompletion hint to the browser */
+    autoComplete: 'current-password' | 'new-password';
+} & RequireAllOrNone<ControlledComponentProps, keyof ControlledComponentProps>;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
+ *
+ * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ */
+export declare const BaseTextInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & {
+    label: string;
+    type?: "text" | "password" | undefined;
+    hideLabel?: boolean | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    error?: import("react").ReactNode;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/primitives/base-text-input/base-text-input.js

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
+import { forwardRef, useMemo, cloneElement } from 'react';
+import { useUniqueId } from '../../utils/useUniqueId.js';
+import styles from './base-text-input.module.js';
+import { InlineError } from '../inline-error/inline-error.js';
+
+/**
+ * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
+ *
+ * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ */
+const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    label,
+    type = 'text',
+    disabled,
+    invalid = false,
+    hideLabel,
+    error,
+    required = false,
+    icon,
+    id,
+    ...rest
+  } = props;
+  const uniqueId = useUniqueId('input-');
+  const inputId = id || uniqueId;
+  const inlineErrorId = useUniqueId('inline-error-');
+  const hasError = !!error && !disabled;
+  const shouldMarkError = (!!error || invalid) && !disabled;
+  const IconComponent = useMemo(() => icon && /*#__PURE__*/cloneElement(icon, {
+    className: clsx(icon.props?.className, styles.iconShared)
+  }), [icon]);
+  return jsxs(Fragment, {
+    children: [jsxs("div", {
+      className: clsx([styles.textInputContainer], {
+        [styles.disabled]: disabled,
+        [styles.error]: shouldMarkError
+      }, className),
+      children: [jsx("label", {
+        className: clsx([styles.label], {
+          [styles.hidden]: hideLabel
+        }),
+        htmlFor: inputId,
+        children: hideLabel ? jsx(VisuallyHidden, {
+          children: label
+        }) : label
+      }), jsx("input", {
+        ...rest,
+        ...(hasError && {
+          'aria-describedby': inlineErrorId
+        }),
+        ref: forwardedRef,
+        "aria-invalid": shouldMarkError,
+        "aria-required": required,
+        className: clsx([styles.textInput], {
+          [styles.error]: shouldMarkError
+        }),
+        disabled: disabled,
+        id: inputId,
+        required: required,
+        type: type
+      }), IconComponent]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      id: inlineErrorId,
+      children: error
+    })]
+  });
+});
+
+export { BaseTextInput };

package/lib-esm/primitives/base-text-input/base-text-input.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"textInputContainer":"bp_base_text_input_module_textInputContainer--6a02b","label":"bp_base_text_input_module_label--6a02b","hidden":"bp_base_text_input_module_hidden--6a02b","textInput":"bp_base_text_input_module_textInput--6a02b","error":"bp_base_text_input_module_error--6a02b","iconShared":"bp_base_text_input_module_iconShared--6a02b","disabled":"bp_base_text_input_module_disabled--6a02b","inlineError":"bp_base_text_input_module_inlineError--6a02b"};
+
+export { styles as default };

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

@@ -0,0 +1,2 @@
+export { BaseTextInput } from './base-text-input';
+export { type BaseTextInputProps } from './types';

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & {
+    /** The label for text input */
+    label: string;
+    /** Input type, defaults to 'text' */
+    type?: 'text' | 'password';
+    /** When true label text is hidden */
+    hideLabel?: boolean;
+    /**
+     * When true it enforces the error state, without error message.
+     * Developer is responsible for connecting the error message with TextInput using aria-describedby.
+     * This prop should not be used in conjunction with error prop.
+     * */
+    invalid?: boolean;
+    /** When true prevents user interaction with input */
+    disabled?: boolean;
+    /** When true it indicates input field must be filled out */
+    required?: boolean;
+    /** Content of error message */
+    error?: React.ReactNode;
+    /**
+     * Custom icon to be rendered after input
+     * When loading is true and input is not disabled prop value will be ignored
+     * */
+    icon?: React.ReactElement;
+};

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

@@ -1,28 +1,2 @@
 /// <reference types="react" />
-/**
- * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
- *
- * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
- *
- */
-export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-} & {
-    label: string;
-    type?: "text" | undefined;
-    hideLabel?: boolean | undefined;
-    invalid?: 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("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-} & {
-    label: string;
-    type?: "text" | undefined;
-    hideLabel?: boolean | undefined;
-    invalid?: boolean | undefined;
-    disabled?: boolean | undefined;
-    required?: boolean | undefined;
-    error?: import("react").ReactNode;
-} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../primitives/base-text-input").BaseTextInputProps, "icon"> & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("../primitives/base-text-input").BaseTextInputProps, "icon"> & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,82 +1,34 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useMemo } from 'react';
 import clsx from 'clsx';
-import { forwardRef, useRef, useCallback } from 'react';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
-import { InlineError } from '../primitives/inline-error/inline-error.js';
-import { useForkRef } from '../utils/useForkRef.js';
-import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './text-input.module.js';
+import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
+import { useForkRef } from '../utils/useForkRef.js';
 
-/**
- * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
- *
- * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
- *
- */
 const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
-    className,
-    label,
-    type = 'text',
-    disabled,
-    invalid = false,
-    hideLabel,
-    error,
     loading = false,
     loadingAriaLabel,
-    required = false,
     ...rest
   } = props;
   const inputRef = useRef(null);
-  const inputId = useUniqueId('input-');
-  const inlineErrorId = useUniqueId('inline-error-');
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
   }, []);
-  const hasError = !!error && !disabled;
-  const shouldMarkError = (!!error || invalid) && !disabled;
-  const isLoading = !disabled && loading && loadingAriaLabel;
-  return jsxs(Fragment, {
-    children: [jsxs("div", {
-      className: clsx([styles.textInputContainer], {
-        [styles.disabled]: disabled,
-        [styles.error]: shouldMarkError
-      }, className),
-      children: [jsx("label", {
-        className: clsx([styles.label], {
-          [styles.hidden]: hideLabel
-        }),
-        htmlFor: inputId,
-        children: hideLabel ? jsx(VisuallyHidden, {
-          children: label
-        }) : label
-      }), jsx("input", {
-        ...rest,
-        ...(hasError && {
-          'aria-describedby': inlineErrorId
-        }),
-        ref: useForkRef(inputRef, forwardedRef),
-        "aria-invalid": shouldMarkError,
-        "aria-required": required,
-        className: clsx([styles.textInput], {
-          [styles.error]: shouldMarkError,
-          [styles.loading]: isLoading
-        }),
-        disabled: disabled,
-        id: inputId,
-        required: required,
-        type: type
-      }), isLoading && jsx(LoadingIndicator, {
-        "aria-label": loadingAriaLabel,
-        className: styles.loadingIndicator,
-        onClick: focusInput
-      })]
-    }), jsx(InlineError, {
-      className: styles.inlineError,
-      id: inlineErrorId,
-      children: error
-    })]
+  const isLoading = !props.disabled && loading && loadingAriaLabel;
+  const icon = useMemo(() => isLoading && jsx(LoadingIndicator, {
+    "aria-label": loadingAriaLabel,
+    className: styles.iconLoading,
+    onClick: focusInput
+  }), [isLoading, loadingAriaLabel, focusInput]);
+  return jsx(BaseTextInput, {
+    ...rest,
+    ref: useForkRef(inputRef, forwardedRef),
+    className: clsx(styles.textInput, props.className),
+    ...(icon ? {
+      icon
+    } : {})
   });
 });
 TextInput.displayName = 'TextInput';

package/lib-esm/text-input/text-input.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textInputContainer":"bp_text_input_module_textInputContainer--d93d3","label":"bp_text_input_module_label--d93d3","hidden":"bp_text_input_module_hidden--d93d3","textInput":"bp_text_input_module_textInput--d93d3","error":"bp_text_input_module_error--d93d3","loading":"bp_text_input_module_loading--d93d3","loadingIndicator":"bp_text_input_module_loadingIndicator--d93d3","disabled":"bp_text_input_module_disabled--d93d3","inlineError":"bp_text_input_module_inlineError--d93d3"};
+var styles = {"textInput":"bp_text_input_module_textInput--3c0cc","iconLoading":"bp_text_input_module_iconLoading--3c0cc"};
 
 export { styles as default };

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

@@ -1,28 +1,9 @@
-/// <reference types="react" />
 import { type RequireAllOrNone } from 'type-fest';
+import { type BaseTextInputProps } from '../primitives/base-text-input';
 export interface Loading {
     /** When true input is renedered 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 TextInputProps = React.ComponentPropsWithRef<'input'> & {
-    /** The label for text input */
-    label: string;
-    /** Input type, defaults to 'text' */
-    type?: 'text';
-    /** When true label text is hidden */
-    hideLabel?: boolean;
-    /**
-     * When true it enforces the error state, without error message.
-     * Developer is responsible for connecting the error message with TextInput using aria-describedby.
-     * This prop should not be used in conjunction with error prop.
-     * */
-    invalid?: boolean;
-    /** When true prevents user interaction with input */
-    disabled?: boolean;
-    /** When true it indicates input field must be filled out */
-    required?: boolean;
-    /** Content of error message */
-    error?: React.ReactNode;
-} & RequireAllOrNone<Loading, keyof Loading>;
+export type TextInputProps = Omit<BaseTextInputProps, 'icon'> & RequireAllOrNone<Loading, keyof Loading>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.4.0",
+    "version": "7.4.3",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -55,10 +55,10 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.2.0",
+        "@box/storybook-utils": "^0.2.1",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "b47b6c859b0acae07254d87a87f916a26656367d",
+    "gitHead": "44cc28c706872e74392472870b4e7584d3a783e3",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {