@jobber/components 7.10.0 → 7.11.0

package/dist/InputNumberExperimental-es.js

@@ -0,0 +1,763 @@
+import * as React from 'react';
+import React__default, { createContext, forwardRef, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
+import classnames from 'classnames';
+import { B as Button } from './Button-es.js';
+import { I as Icon } from './Icon-es.js';
+import { a as useStableCallback, c as useTimeout, t as transitionStatusMapping, d as useTransitionStatus, u as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
+import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, N as NumberFieldRoot, c as NumberFieldGroup, d as NumberFieldInput, e as NumberFieldIncrement, h as NumberFieldDecrement } from './NumberFieldInput-es.js';
+import { f as formatErrorMessage, b as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
+import { jsx } from 'react/jsx-runtime';
+import { u as useBaseUiId } from './useBaseUiId-es.js';
+
+const FieldsetRootContext = /*#__PURE__*/React.createContext({
+  legendId: undefined,
+  setLegendId: () => {},
+  disabled: undefined
+});
+if (process.env.NODE_ENV !== "production") FieldsetRootContext.displayName = "FieldsetRootContext";
+function useFieldsetRootContext(optional = false) {
+  const context = React.useContext(FieldsetRootContext);
+  if (!context && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.' : formatErrorMessage(86));
+  }
+  return context;
+}
+
+const LabelableProvider = function LabelableProvider(props) {
+  const defaultId = useBaseUiId();
+  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
+  const [controlId, setControlIdState] = React.useState(initialControlId);
+  const [labelId, setLabelId] = React.useState(props.labelId);
+  const [messageIds, setMessageIds] = React.useState([]);
+  const registrationsRef = useRefWithInit(() => new Map());
+  const {
+    messageIds: parentMessageIds
+  } = useLabelableContext();
+  const registerControlId = useStableCallback((source, nextId) => {
+    const registrations = registrationsRef.current;
+    if (nextId === undefined) {
+      registrations.delete(source);
+      return;
+    }
+    registrations.set(source, nextId);
+
+    // Only flush when registering, not when unregistering.
+    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
+    // The next registration will pick up the correct state.
+    setControlIdState(prev => {
+      if (registrations.size === 0) {
+        return undefined;
+      }
+      let nextControlId;
+      for (const id of registrations.values()) {
+        if (prev !== undefined && id === prev) {
+          return prev;
+        }
+        if (nextControlId === undefined) {
+          nextControlId = id;
+        }
+      }
+      return nextControlId;
+    });
+  });
+  const getDescriptionProps = React.useCallback(externalProps => {
+    return mergeProps({
+      'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
+    }, externalProps);
+  }, [parentMessageIds, messageIds]);
+  const contextValue = React.useMemo(() => ({
+    controlId,
+    registerControlId,
+    labelId,
+    setLabelId,
+    messageIds,
+    setMessageIds,
+    getDescriptionProps
+  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  return /*#__PURE__*/jsx(LabelableContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+if (process.env.NODE_ENV !== "production") LabelableProvider.displayName = "LabelableProvider";
+
+const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
+function isOnlyValueMissing(state) {
+  if (!state || state.valid || !state.valueMissing) {
+    return false;
+  }
+  let onlyValueMissing = false;
+  for (const key of validityKeys) {
+    if (key === 'valid') {
+      continue;
+    }
+    if (key === 'valueMissing') {
+      onlyValueMissing = state[key];
+    }
+    if (state[key]) {
+      onlyValueMissing = false;
+    }
+  }
+  return onlyValueMissing;
+}
+function useFieldValidation(params) {
+  const {
+    formRef,
+    clearErrors
+  } = useFormContext();
+  const {
+    setValidityData,
+    validate,
+    validityData,
+    validationDebounceTime,
+    invalid,
+    markedDirtyRef,
+    state,
+    name,
+    shouldValidateOnChange
+  } = params;
+  const {
+    controlId,
+    getDescriptionProps
+  } = useLabelableContext();
+  const timeout = useTimeout();
+  const inputRef = React.useRef(null);
+  const commit = useStableCallback(async (value, revalidate = false) => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+    if (revalidate) {
+      if (state.valid !== false) {
+        return;
+      }
+      const currentNativeValidity = element.validity;
+      if (!currentNativeValidity.valueMissing) {
+        // The 'valueMissing' (required) condition has been resolved by the user typing.
+        // Temporarily mark the field as valid for this onChange event.
+        // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
+        const nextValidityData = {
+          value,
+          state: {
+            ...DEFAULT_VALIDITY_STATE,
+            valid: true
+          },
+          error: '',
+          errors: [],
+          initialValue: validityData.initialValue
+        };
+        element.setCustomValidity('');
+        if (controlId) {
+          const currentFieldData = formRef.current.fields.get(controlId);
+          if (currentFieldData) {
+            formRef.current.fields.set(controlId, {
+              ...currentFieldData,
+              ...getCombinedFieldValidityData(nextValidityData, false) // invalid = false
+            });
+          }
+        }
+        setValidityData(nextValidityData);
+        return;
+      }
+
+      // Value is still missing, or other conditions apply.
+      // Let's use a representation of current validity for isOnlyValueMissing.
+      const currentNativeValidityObject = validityKeys.reduce((acc, key) => {
+        acc[key] = currentNativeValidity[key];
+        return acc;
+      }, {});
+
+      // If it's (still) natively invalid due to something other than just valueMissing,
+      // then bail from this revalidation on change to avoid "scolding" for other errors.
+      if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) {
+        return;
+      }
+
+      // If valueMissing is still true AND it's the only issue, or if the field is now natively valid,
+      // let it fall through to the main validation logic below.
+    }
+    function getState(el) {
+      const computedState = validityKeys.reduce((acc, key) => {
+        acc[key] = el.validity[key];
+        return acc;
+      }, {});
+      let hasOnlyValueMissingError = false;
+      for (const key of validityKeys) {
+        if (key === 'valid') {
+          continue;
+        }
+        if (key === 'valueMissing' && computedState[key]) {
+          hasOnlyValueMissingError = true;
+        } else if (computedState[key]) {
+          return computedState;
+        }
+      }
+
+      // Only make `valueMissing` mark the field invalid if it's been changed
+      // to reduce error noise.
+      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+        computedState.valid = true;
+        computedState.valueMissing = false;
+      }
+      return computedState;
+    }
+    timeout.clear();
+    let result = null;
+    let validationErrors = [];
+    const nextState = getState(element);
+    let defaultValidationMessage;
+    const validateOnChange = shouldValidateOnChange();
+    if (element.validationMessage && !validateOnChange) {
+      // not validating on change, if there is a `validationMessage` from
+      // native validity, set errors and skip calling the custom validate fn
+      defaultValidationMessage = element.validationMessage;
+      validationErrors = [element.validationMessage];
+    } else {
+      // call the validate function because either
+      // - validating on change, or
+      // - native constraint validations passed, custom validity check is next
+      const formValues = Array.from(formRef.current.fields.values()).reduce((acc, field) => {
+        if (field.name) {
+          acc[field.name] = field.getValue();
+        }
+        return acc;
+      }, {});
+      const resultOrPromise = validate(value, formValues);
+      if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        result = await resultOrPromise;
+      } else {
+        result = resultOrPromise;
+      }
+      if (result !== null) {
+        nextState.valid = false;
+        nextState.customError = true;
+        if (Array.isArray(result)) {
+          validationErrors = result;
+          element.setCustomValidity(result.join('\n'));
+        } else if (result) {
+          validationErrors = [result];
+          element.setCustomValidity(result);
+        }
+      } else if (validateOnChange) {
+        // validate function returned no errors, if validating on change
+        // we need to clear the custom validity state
+        element.setCustomValidity('');
+        nextState.customError = false;
+        if (element.validationMessage) {
+          defaultValidationMessage = element.validationMessage;
+          validationErrors = [element.validationMessage];
+        } else if (element.validity.valid && !nextState.valid) {
+          nextState.valid = true;
+        }
+      }
+    }
+    const nextValidityData = {
+      value,
+      state: nextState,
+      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
+      errors: validationErrors,
+      initialValue: validityData.initialValue
+    };
+    if (controlId) {
+      const currentFieldData = formRef.current.fields.get(controlId);
+      if (currentFieldData) {
+        formRef.current.fields.set(controlId, {
+          ...currentFieldData,
+          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
+          ...getCombinedFieldValidityData(nextValidityData, invalid)
+        });
+      }
+    }
+    setValidityData(nextValidityData);
+  });
+  const getValidationProps = React.useCallback((externalProps = {}) => mergeProps(getDescriptionProps, state.valid === false ? {
+    'aria-invalid': true
+  } : EMPTY_OBJECT, externalProps), [getDescriptionProps, state.valid]);
+  const getInputValidationProps = React.useCallback((externalProps = {}) => mergeProps({
+    onChange(event) {
+      // Workaround for https://github.com/facebook/react/issues/9023
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      clearErrors(name);
+      if (!shouldValidateOnChange()) {
+        commit(event.currentTarget.value, true);
+        return;
+      }
+
+      // When validating on change, run client-side validation even if
+      // externally invalid
+      const element = event.currentTarget;
+      if (element.value === '') {
+        // Ignore the debounce time for empty values.
+        commit(element.value);
+        return;
+      }
+      timeout.clear();
+      if (validationDebounceTime) {
+        timeout.start(validationDebounceTime, () => {
+          commit(element.value);
+        });
+      } else {
+        commit(element.value);
+      }
+    }
+  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
+  return React.useMemo(() => ({
+    getValidationProps,
+    getInputValidationProps,
+    inputRef,
+    commit
+  }), [getValidationProps, getInputValidationProps, commit]);
+}
+
+const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(componentProps, forwardedRef) {
+  const {
+    errors,
+    validationMode: formValidationMode,
+    submitAttemptedRef
+  } = useFormContext();
+  const {
+    render,
+    className,
+    validate: validateProp,
+    validationDebounceTime = 0,
+    validationMode = formValidationMode,
+    name,
+    disabled: disabledProp = false,
+    invalid: invalidProp,
+    dirty: dirtyProp,
+    touched: touchedProp,
+    actionsRef,
+    ...elementProps
+  } = componentProps;
+  const {
+    disabled: disabledFieldset
+  } = useFieldsetRootContext();
+  const validate = useStableCallback(validateProp || (() => null));
+  const disabled = disabledFieldset || disabledProp;
+  const [touchedState, setTouchedUnwrapped] = React.useState(false);
+  const [dirtyState, setDirtyUnwrapped] = React.useState(false);
+  const [filled, setFilled] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const dirty = dirtyProp ?? dirtyState;
+  const touched = touchedProp ?? touchedState;
+  const markedDirtyRef = React.useRef(false);
+  const setDirty = useStableCallback(value => {
+    if (dirtyProp !== undefined) {
+      return;
+    }
+    if (value) {
+      markedDirtyRef.current = true;
+    }
+    setDirtyUnwrapped(value);
+  });
+  const setTouched = useStableCallback(value => {
+    if (touchedProp !== undefined) {
+      return;
+    }
+    setTouchedUnwrapped(value);
+  });
+  const shouldValidateOnChange = useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
+  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
+  const invalid = invalidProp === true || hasFormError;
+  const [validityData, setValidityData] = React.useState({
+    state: DEFAULT_VALIDITY_STATE,
+    error: '',
+    errors: [],
+    value: null,
+    initialValue: null
+  });
+  const valid = !invalid && validityData.state.valid;
+  const state = React.useMemo(() => ({
+    disabled,
+    touched,
+    dirty,
+    valid,
+    filled,
+    focused
+  }), [disabled, touched, dirty, valid, filled, focused]);
+  const validation = useFieldValidation({
+    setValidityData,
+    validate,
+    validityData,
+    validationDebounceTime,
+    invalid,
+    markedDirtyRef,
+    state,
+    name,
+    shouldValidateOnChange
+  });
+  const handleImperativeValidate = React.useCallback(() => {
+    markedDirtyRef.current = true;
+    validation.commit(validityData.value);
+  }, [validation, validityData]);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
+  const contextValue = React.useMemo(() => ({
+    invalid,
+    name,
+    validityData,
+    setValidityData,
+    disabled,
+    touched,
+    setTouched,
+    dirty,
+    setDirty,
+    filled,
+    setFilled,
+    focused,
+    setFocused,
+    validate,
+    validationMode,
+    validationDebounceTime,
+    shouldValidateOnChange,
+    state,
+    markedDirtyRef,
+    validation
+  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, validation]);
+  const element = useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: elementProps,
+    stateAttributesMapping: fieldValidityMapping
+  });
+  return /*#__PURE__*/jsx(FieldRootContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+
+/**
+ * Groups all parts of the field.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+if (process.env.NODE_ENV !== "production") FieldRootInner.displayName = "FieldRootInner";
+const FieldRoot = /*#__PURE__*/React.forwardRef(function FieldRoot(componentProps, forwardedRef) {
+  return /*#__PURE__*/jsx(LabelableProvider, {
+    children: /*#__PURE__*/jsx(FieldRootInner, {
+      ...componentProps,
+      ref: forwardedRef
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") FieldRoot.displayName = "FieldRoot";
+
+const stateAttributesMapping = {
+  ...fieldValidityMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An error message displayed if the field control fails validation.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(componentProps, forwardedRef) {
+  const {
+    render,
+    id: idProp,
+    className,
+    match,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId(idProp);
+  const {
+    validityData,
+    state: fieldState,
+    name
+  } = useFieldRootContext(false);
+  const {
+    setMessageIds
+  } = useLabelableContext();
+  const {
+    errors
+  } = useFormContext();
+  const formError = name ? errors[name] : null;
+  let rendered = false;
+  if (formError || match === true) {
+    rendered = true;
+  } else if (match) {
+    rendered = Boolean(validityData.state[match]);
+  } else {
+    rendered = validityData.state.valid === false;
+  }
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(rendered);
+  useIsoLayoutEffect(() => {
+    if (!rendered || !id) {
+      return undefined;
+    }
+    setMessageIds(v => v.concat(id));
+    return () => {
+      setMessageIds(v => v.filter(item => item !== id));
+    };
+  }, [rendered, id, setMessageIds]);
+  const errorRef = React.useRef(null);
+  const [lastRenderedMessage, setLastRenderedMessage] = React.useState(null);
+  const [lastRenderedMessageKey, setLastRenderedMessageKey] = React.useState(null);
+  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/jsx("ul", {
+    children: validityData.errors.map(message => /*#__PURE__*/jsx("li", {
+      children: message
+    }, message))
+  }) : validityData.error);
+  let errorKey = validityData.error;
+  if (formError != null) {
+    errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;
+  } else if (validityData.errors.length > 1) {
+    errorKey = JSON.stringify(validityData.errors);
+  }
+  if (rendered && errorKey !== lastRenderedMessageKey) {
+    setLastRenderedMessageKey(errorKey);
+    setLastRenderedMessage(errorMessage);
+  }
+  useOpenChangeComplete({
+    open: rendered,
+    ref: errorRef,
+    onComplete() {
+      if (!rendered) {
+        setMounted(false);
+      }
+    }
+  });
+  const state = {
+    ...fieldState,
+    transitionStatus
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, errorRef],
+    state,
+    props: [{
+      id,
+      children: rendered ? errorMessage : lastRenderedMessage
+    }, elementProps],
+    stateAttributesMapping,
+    enabled: mounted
+  });
+  if (!mounted) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") FieldError.displayName = "FieldError";
+
+/**
+ * A paragraph with additional information about the field.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDescription(componentProps, forwardedRef) {
+  const {
+    render,
+    id: idProp,
+    className,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId(idProp);
+  const fieldRootContext = useFieldRootContext(false);
+  const {
+    setMessageIds
+  } = useLabelableContext();
+  useIsoLayoutEffect(() => {
+    if (!id) {
+      return undefined;
+    }
+    setMessageIds(v => v.concat(id));
+    return () => {
+      setMessageIds(v => v.filter(item => item !== id));
+    };
+  }, [id, setMessageIds]);
+  const element = useRenderElement('p', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [{
+      id
+    }, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
+
+var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
+
+/**
+ * Preserve user-typed decimals on blur. Without `maximumFractionDigits: 20`,
+ * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
+ */
+const DEFAULT_FORMAT = {
+    useGrouping: false,
+    maximumFractionDigits: 20,
+};
+const InputNumberExperimentalContext = createContext(null);
+function useInputNumberExperimentalContext(consumer) {
+    const context = useContext(InputNumberExperimentalContext);
+    if (context === null) {
+        throw new Error(`<InputNumberExperimental.${consumer}> must be used inside <InputNumberExperimental>.`);
+    }
+    return context;
+}
+function InputNumberExperimentalInternal(props, ref) {
+    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const generatedId = useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
+    const innerInputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = innerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: () => { var _a; return (_a = innerInputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+    }), []);
+    const handleValueCommitted = useCallback((newValue) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
+    }, [onChange]);
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.key === "Enter" &&
+            !event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey) {
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
+            // V1/V2 parity: commit on Enter. Base UI treats Enter as a
+            // navigation no-op, so round-trip focus to fire onValueCommitted
+            // via Base UI's onBlur and restore focus immediately after.
+            const target = event.currentTarget;
+            target.blur();
+            target.focus();
+        }
+    }, [onKeyDown, onEnter]);
+    const isUsingCompoundPattern = useMemo(() => React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
+        (child.type === InputNumberExperimentalInputCompound ||
+            child.type === InputNumberExperimentalAffixCompound ||
+            child.type === InputNumberExperimentalStepperCompound)), [children]);
+    const showStepper = !disabled && !readonly;
+    // `handleKeyDown` is a `useCallback` whose own deps include `onKeyDown` and
+    // `onEnter`, so listing it here transitively tracks both. Don't add `onEnter`
+    // or `onKeyDown` separately — they'd be redundant and an exhaustive-deps lint
+    // would flag the duplication.
+    const contextValue = useMemo(() => ({
+        autocomplete,
+        compoundLayout: isUsingCompoundPattern,
+        disabled,
+        id,
+        innerInputRef,
+        keyboard,
+        maxLength,
+        onBlur,
+        onFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp,
+        placeholder,
+        readonly,
+        showMiniLabel,
+        showStepper,
+        size,
+    }), [
+        autocomplete,
+        isUsingCompoundPattern,
+        disabled,
+        id,
+        keyboard,
+        maxLength,
+        onBlur,
+        onFocus,
+        handleKeyDown,
+        onKeyUp,
+        placeholder,
+        readonly,
+        showMiniLabel,
+        showStepper,
+        size,
+    ]);
+    const fieldInvalid = invalid || Boolean(error);
+    return (React__default.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
+        React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
+            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+                React__default.createElement(NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
+                    ? children
+                    : renderDefaultComposition({ prefix, suffix, size })))),
+        (description || error) && (React__default.createElement("div", { className: styles.belowField },
+            description && (React__default.createElement(FieldDescription, { className: styles.description }, description)),
+            error && (React__default.createElement(FieldError, { className: styles.fieldError, match: true, role: "alert" }, error))))));
+}
+function renderDefaultComposition({ prefix, suffix, size, }) {
+    return (React__default.createElement(React__default.Fragment, null,
+        (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React__default.createElement(AffixIconSlot, { variation: "prefix", icon: prefix.icon, size: size })),
+        (prefix === null || prefix === void 0 ? void 0 : prefix.label) && (React__default.createElement(AffixLabelSlot, { variation: "prefix", label: prefix.label })),
+        React__default.createElement(InputNumberExperimentalInputCompound, null),
+        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default.createElement(AffixLabelSlot, { variation: "suffix", label: suffix.label })),
+        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default.createElement(AffixIconSlot, { variation: "suffix", icon: suffix.icon, size: size, ariaLabel: suffix.ariaLabel, onClick: suffix.onClick }))));
+}
+function InputNumberExperimentalInputCompound(props = {}) {
+    var _a;
+    const ctx = useInputNumberExperimentalContext("Input");
+    const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
+    return (React__default.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
+        React__default.createElement(NumberFieldInput, { autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        labelText && (React__default.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
+        !ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null)));
+}
+function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
+    const ctx = useInputNumberExperimentalContext("Affix");
+    if (!icon && !label) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: classnames(styles.compoundAffix, variation === "suffix" && styles.suffix) },
+        icon && (React__default.createElement(AffixIconContent, { icon: icon, size: ctx.size, onClick: onClick, ariaLabel: ariaLabel })),
+        label && React__default.createElement("span", { className: styles.affixLabelText }, label)));
+}
+function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
+    var _a;
+    const ctx = useInputNumberExperimentalContext("Stepper");
+    if (!ctx.showStepper) {
+        return null;
+    }
+    const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";
+    const resolvedIncrementLabel = incrementLabel !== null && incrementLabel !== void 0 ? incrementLabel : `Increase ${labelTarget}`;
+    const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
+    return (React__default.createElement("div", { className: styles.stepper },
+        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
+        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
+}
+function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
+    return (React__default.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },
+        React__default.createElement(AffixIconContent, { icon: icon, size: size, onClick: onClick, ariaLabel: ariaLabel })));
+}
+function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
+    const iconSize = size === "small" ? "small" : "base";
+    if (onClick) {
+        return (React__default.createElement(Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Action", icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
+    }
+    return React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" });
+}
+function AffixLabelSlot({ variation, label }) {
+    return (React__default.createElement("div", { className: classnames(styles.affixLabel, variation === "prefix" && styles.prefix, variation === "suffix" && styles.suffix) }, label));
+}
+function resolveAutocomplete(autocomplete) {
+    if (autocomplete === false)
+        return "off";
+    if (autocomplete === true || autocomplete === undefined)
+        return undefined;
+    return autocomplete;
+}
+const InputNumberExperimentalBase = forwardRef(InputNumberExperimentalInternal);
+InputNumberExperimentalBase.displayName = "InputNumberExperimental";
+InputNumberExperimentalInputCompound.displayName =
+    "InputNumberExperimental.Input";
+InputNumberExperimentalAffixCompound.displayName =
+    "InputNumberExperimental.Affix";
+InputNumberExperimentalStepperCompound.displayName =
+    "InputNumberExperimental.Stepper";
+const InputNumberExperimental = Object.assign(InputNumberExperimentalBase, {
+    Input: InputNumberExperimentalInputCompound,
+    Affix: InputNumberExperimentalAffixCompound,
+    Stepper: InputNumberExperimentalStepperCompound,
+});
+
+export { InputNumberExperimental as I };