@hero-design/rn-work-uikit 1.1.0 → 1.2.0-alpha.1

package/lib/index.js

@@ -1,12 +1,21 @@
 'use strict';
 
-var rn = require('@hero-design/rn');
 var React = require('react');
+var reactNative = require('react-native');
+var rn = require('@hero-design/rn');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -15,6 +24,42 @@ function _defineProperty(e, r, t) {
     writable: !0
   }) : e[r] = t, e;
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -36,6 +81,29 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -50,17 +118,187 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var StyledContainer = rn.styled(reactNative.Pressable)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: '100%',
+    flexDirection: 'row',
+    paddingHorizontal: theme.__hd__.textInput.space.containerPadding,
+    minHeight: theme.__hd__.textInput.sizes.containerMinHeight,
+    marginTop: theme.__hd__.textInput.space.containerMarginTop
+  };
+});
+var StyledFloatingLabelContainer = rn.styled(reactNative.Animated.View)(function (_ref2) {
+  var themeVariant = _ref2.themeVariant;
+  return {
+    flexDirection: 'row',
+    flex: 1,
+    alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+    backgroundColor: 'transparent'
+  };
+});
+var StyledLabel = rn.styled(rn.Typography.Caption)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeState = _ref3.themeState;
+  return {
+    color: theme.__hd__.textInput.colors.labels[themeState]
+  };
+});
+var StyledErrorRow = rn.styled(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    flexGrow: 4
+  };
+});
+var StyledError = rn.styled(rn.Typography.Caption)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    color: theme.__hd__.textInput.colors.error,
+    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+  };
+});
+var StyledCharacterCount = rn.styled(rn.Typography.Caption)(function (_ref6) {
+  var theme = _ref6.theme,
+    themeState = _ref6.themeState;
+  return {
+    color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
+    flex: 1,
+    flexGrow: 1,
+    textAlign: 'right'
+  };
+});
+var StyledHelperText = rn.Typography.Caption;
+var StyledTextInput = rn.styled(reactNative.TextInput)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeVariant = _ref7.themeVariant;
+  return {
+    textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
+    fontSize: theme.__hd__.textInput.fontSizes.text,
+    flexGrow: 2,
+    paddingVertical: 0,
+    maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
+    minHeight: theme.__hd__.textInput.sizes.textInputMinHeight,
+    height: themeVariant === 'text' ? undefined : theme.__hd__.textInput.sizes.textareaHeight,
+    fontFamily: theme.__hd__.textInput.fonts.text
+  };
+});
+var StyledBorder = rn.styled(reactNative.View)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeFocused = _ref8.themeFocused,
+    themeState = _ref8.themeState;
+  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+    borderWidth: theme.__hd__.textInput.borderWidths.container.normal,
+    borderRadius: theme.__hd__.textInput.radii.container,
+    borderColor: themeFocused ? theme.__hd__.textInput.colors.borders.focused : theme.__hd__.textInput.colors.borders[themeState]
+  });
+});
+var StyledInputWrapper = rn.styled(reactNative.View)(function (_ref9) {
+  var theme = _ref9.theme;
+  return {
+    flexDirection: 'column',
+    flex: 1,
+    backgroundColor: 'transparent',
+    borderRadius: theme.__hd__.textInput.radii.container,
+    marginBottom: theme.__hd__.textInput.space.inputWrapperMarginVertical,
+    marginTop: theme.__hd__.textInput.space.inputWrapperMarginVertical,
+    overflow: 'hidden'
+  };
+});
+var StyledInputRow = rn.styled(reactNative.View)(function (_ref10) {
+  var theme = _ref10.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexGrow: 2,
+    flexShrink: 1,
+    gap: theme.__hd__.textInput.space.prefixAndInputContainerGap
+  };
+});
+rn.styled(reactNative.View)(function (_ref11) {
+  var theme = _ref11.theme;
+  return {
+    paddingHorizontal: theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
+    minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+    paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop
+  };
+});
+var StyledBottomContainer = rn.styled(reactNative.View)(function () {
+  return {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  };
+});
+var StyledSuffixContainer = rn.styled(reactNative.View)(function () {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  };
+});
 
 var getTextInputTheme = function getTextInputTheme(theme) {
   var baseTextInputTheme = theme.__hd__.textInput;
   // Override specific values here as needed
-  var colors = _objectSpread2({}, baseTextInputTheme.colors);
-  var space = _objectSpread2({}, baseTextInputTheme.space);
+  var colors = _objectSpread2(_objectSpread2({}, baseTextInputTheme.colors), {}, {
+    // Example: override specific colors
+    // text: theme.colors.customTextColor,
+    borders: {
+      "default": theme.colors.secondaryOutline,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.disabledOutline,
+      filled: theme.colors.secondaryOutline,
+      focused: theme.colors.primaryOutline
+    },
+    labels: {
+      "default": theme.colors.inactiveOnDefaultGlobalSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.inactiveOnDefaultGlobalSurface,
+      focused: theme.colors.onDefaultGlobalSurface
+    },
+    maxLengthLabels: {
+      "default": theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
+      focused: theme.colors.onDefaultGlobalSurface
+    }
+  });
+  var space = _objectSpread2(_objectSpread2({}, baseTextInputTheme.space), {}, {
+    // Example: override specific spacing
+    // containerPadding: theme.space.large,
+    inputWrapperMarginVertical: theme.space.small,
+    prefixAndInputContainerGap: theme.space.xsmall
+  });
   var fonts = _objectSpread2({}, baseTextInputTheme.fonts);
   var fontSizes = _objectSpread2({}, baseTextInputTheme.fontSizes);
-  var borderWidths = _objectSpread2({}, baseTextInputTheme.borderWidths);
+  var borderWidths = _objectSpread2(_objectSpread2({}, baseTextInputTheme.borderWidths), {}, {
+    container: _objectSpread2(_objectSpread2({}, baseTextInputTheme.borderWidths.container), {}, {
+      normal: theme.borderWidths.medium
+    })
+  });
   var radii = _objectSpread2({}, baseTextInputTheme.radii);
-  var sizes = _objectSpread2({}, baseTextInputTheme.sizes);
+  var sizes = _objectSpread2(_objectSpread2({}, baseTextInputTheme.sizes), {}, {
+    containerMinHeight: theme.sizes.xxxxlarge,
+    errorAndHelpTextContainerHeight: 0,
+    textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small
+  });
   var lineHeights = _objectSpread2({}, baseTextInputTheme.lineHeights);
   return {
     colors: colors,
@@ -128,6 +366,634 @@ var withWorkTheme = function withWorkTheme(C, themeName) {
 
 var defaultTheme = getTheme();
 
+/**
+ * ErrorOrHelpText Component
+ *
+ * Displays either error messages or help text below the TextInput.
+ * Shows error messages with a danger icon when present, otherwise displays help text.
+ *
+ * Key Features:
+ * - Conditional rendering: error takes priority over help text
+ * - Error messages include a danger icon for visual clarity
+ * - Uses styled components for consistent theming
+ * - Includes proper test IDs for testing
+ *
+ * Rendering Logic:
+ * 1. If error exists: Show error message with danger icon
+ * 2. If no error but helpText exists: Show help text
+ * 3. If neither exists: Render nothing
+ *
+ * @param props - The component props (see ErrorOrHelpTextProps interface for details)
+ */
+var ErrorOrHelpText = function ErrorOrHelpText(_ref) {
+  var error = _ref.error,
+    helpText = _ref.helpText;
+  return error ?
+  /*#__PURE__*/
+  // Error state: Show error message with danger icon
+  React__default.default.createElement(StyledErrorRow, null, /*#__PURE__*/React__default.default.createElement(rn.Icon, {
+    testID: "input-error-icon",
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger"
+  }), /*#__PURE__*/React__default.default.createElement(StyledError, {
+    testID: "input-error-message"
+  }, error)) :
+  // Help text state: Show help text if provided
+  !!helpText && /*#__PURE__*/React__default.default.createElement(StyledHelperText, null, helpText);
+};
+ErrorOrHelpText.displayName = 'ErrorOrHelpText';
+var ErrorOrHelpText$1 = /*#__PURE__*/React__default.default.memo(ErrorOrHelpText);
+
+/**
+ * SuffixComponent
+ *
+ * Renders suffix content (icons or custom elements) on the right side of the TextInput.
+ * Handles loading states and custom elements.
+ *
+ * Key Features:
+ * - Loading state handling: shows spinner when loading is true
+ * - Icon rendering: supports string icon names from the design system
+ * - Custom element support: can render any React element as suffix
+ * - State-aware styling: adjusts icon intent based on input state
+ * - Spinning animation: loading icons automatically spin
+ * - Proper test IDs for automated testing
+ *
+ * Rendering Priority:
+ * 1. Loading state: Shows 'loading' icon with spin animation
+ * 2. String icon name: Renders Icon component with state-based intent
+ * 3. Custom element: Renders the provided React element as-is
+ * 4. No suffix: Renders null
+ *
+ * Icon Intent Logic:
+ * - Disabled state: Uses 'disabled-text' intent
+ * - All other states: Uses 'text' intent
+ *
+ * @param props - The component props (see SuffixComponentProps interface for details)
+ */
+var SuffixComponent = function SuffixComponent(_ref) {
+  var state = _ref.state,
+    loading = _ref.loading,
+    suffix = _ref.suffix;
+  // Loading state overrides suffix
+  var actualSuffix = loading ? 'loading' : suffix;
+  if (typeof actualSuffix === 'string') {
+    // Render icon from design system
+    return /*#__PURE__*/React__default.default.createElement(rn.Icon, {
+      intent: state === 'disabled' ? 'disabled-text' : 'text',
+      testID: "input-suffix",
+      accessibilityLabel: "Suffix icon: ".concat(actualSuffix),
+      accessibilityRole: "image",
+      icon: actualSuffix,
+      spin: actualSuffix === 'loading' // Animate loading icon
+      ,
+      size: "medium"
+    });
+  }
+  if (actualSuffix) {
+    // Render custom element
+    return suffix;
+  }
+  return null;
+};
+SuffixComponent.displayName = 'SuffixComponent';
+var SuffixComponent$1 = /*#__PURE__*/React__default.default.memo(SuffixComponent);
+
+/**
+ * MaxLengthMessage Component
+ *
+ * Displays character count information for TextInput fields with maximum length restrictions.
+ * Shows current/max character count with state-aware styling.
+ *
+ * Key Features:
+ * - Character count display: Shows "currentLength/maxLength" format
+ * - Conditional rendering: Only shows when maxLength is set and not hidden
+ * - State-aware styling: Colors change based on input state (error, disabled, etc.)
+ * - Real-time updates: Updates as user types to show current progress
+ * - Hide capability: Can be hidden via hideCharacterCount prop
+ *
+ * Display Logic:
+ * - Shows only when: maxLength is defined AND hideCharacterCount is false
+ * - Format: "currentLength/maxLength" (e.g., "25/100")
+ * - Hidden when: maxLength is undefined OR hideCharacterCount is true
+ *
+ * State-based Styling:
+ * - Uses themeState to apply appropriate colors from theme
+ * - Error state: Shows error color to indicate validation issues
+ * - Disabled state: Shows muted color for disabled inputs
+ * - Normal states: Shows standard text colors
+ *
+ * Usage Example:
+ * - Input with 25 characters and 100 max: displays "25/100"
+ * - Input approaching limit: color may change based on theme
+ * - Input over limit: error state styling applied
+ *
+ * @param props - The component props (see MaxLengthMessageProps interface for details)
+ */
+var MaxLengthMessage = function MaxLengthMessage(_ref) {
+  var maxLength = _ref.maxLength,
+    state = _ref.state,
+    currentLength = _ref.currentLength,
+    hideCharacterCount = _ref.hideCharacterCount;
+  if (!maxLength || hideCharacterCount) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.default.createElement(StyledCharacterCount, {
+    themeState: state
+  }, currentLength, "/", maxLength);
+};
+MaxLengthMessage.displayName = 'MaxLengthMessage';
+var MaxLengthMessage$1 = /*#__PURE__*/React__default.default.memo(MaxLengthMessage);
+
+var LABEL_ANIMATION_DURATION = 150;
+
+/**
+ * FloatingLabel Component
+ *
+ * Handles the animated floating label behavior for TextInput.
+ * The label starts positioned over the input and animates to a smaller size above the input
+ * when the field is focused or has content.
+ *
+ * Key Features:
+ * - Smooth scale and translate animations using React Native Animated API
+ * - Responds to focus state and content presence
+ * - Automatically appends "(Optional)" text for non-required fields
+ * - Supports different variants (text/textarea) with appropriate positioning
+ * - Maintains accessibility features with proper IDs and test IDs
+ * - Self-contained animation management
+ *
+ * Animation Behavior:
+ * - Scale: 1.5 → 1 (label shrinks when floating)
+ * - TranslateY: Variable based on variant → 0 (moves up)
+ * - Uses bezier easing for smooth transitions
+ *
+ * @param props - The component props (see FloatingLabelProps for details)
+ */
+var FloatingLabel = function FloatingLabel(_ref) {
+  var label = _ref.label,
+    variant = _ref.variant,
+    state = _ref.state,
+    isFocused = _ref.isFocused,
+    required = _ref.required,
+    accessibilityLabelledBy = _ref.accessibilityLabelledBy,
+    isEmptyValue = _ref.isEmptyValue;
+  var theme = useWorkTheme();
+  var shouldFloat = isFocused || !isEmptyValue;
+  var focusAnimation = React.useRef(new reactNative.Animated.Value(shouldFloat ? 1 : 0)).current;
+  React.useEffect(function () {
+    reactNative.Animated.timing(focusAnimation, {
+      toValue: shouldFloat ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: reactNative.Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [shouldFloat, focusAnimation]);
+  return /*#__PURE__*/React__default.default.createElement(StyledFloatingLabelContainer, {
+    themeVariant: variant,
+    style: [{
+      transformOrigin: 'left center'
+    }, {
+      transform: [{
+        translateY: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [variant !== 'textarea' ? 12 : theme.space.small, 0]
+        })
+      }, {
+        scale: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1.333, 1]
+        })
+      }]
+    }]
+  }, /*#__PURE__*/React__default.default.createElement(reactNative.Animated.View, null, /*#__PURE__*/React__default.default.createElement(StyledLabel, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    themeState: state,
+    numberOfLines: 1,
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }, label, !required && ' (Optional)')));
+};
+FloatingLabel.displayName = 'FloatingLabel';
+var FloatingLabel$1 = /*#__PURE__*/React__default.default.memo(FloatingLabel);
+
+var _excluded$1 = ["state", "prefix"];
+/**
+ * PrefixComponent
+ *
+ * Renders prefix content (icons or custom elements) on the left side of the TextInput,
+ * before the user's input cursor.
+ *
+ * Key Features:
+ * - Icon rendering: supports string icon names from the design system
+ * - Custom element support: can render any React element as prefix
+ * - State-aware styling: adjusts icon intent based on input state
+ * - Consistent sizing: uses 'xsmall' size for visual balance
+ * - Proper test IDs for automated testing
+ *
+ * Rendering Logic:
+ * 1. String icon name: Renders Icon component with state-based intent
+ * 2. Custom element: Renders the provided React element as-is
+ * 3. No prefix: Renders null
+ *
+ * Icon Intent Logic:
+ * - Disabled state: Uses 'disabled-text' intent for muted appearance
+ * - All other states: Uses 'text' intent for normal appearance
+ *
+ * Visual Positioning:
+ * - Positioned before the text input cursor
+ * - Uses smaller 'xsmall' size to avoid overwhelming the input
+ * - Maintains proper spacing via parent container
+ *
+ * @param props - The component props (see PrefixComponentProps interface for details)
+ */
+var PrefixComponent = function PrefixComponent(_ref) {
+  var state = _ref.state,
+    prefix = _ref.prefix,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  var actualPrefix = typeof prefix === 'string' ? prefix : '';
+  if (typeof prefix === 'string' && actualPrefix) {
+    return /*#__PURE__*/React__default.default.createElement(reactNative.View, _extends({
+      testID: "input-prefix"
+    }, rest), /*#__PURE__*/React__default.default.createElement(rn.Icon, {
+      intent: state === 'disabled' ? 'disabled-text' : 'text',
+      icon: actualPrefix,
+      size: "xsmall",
+      testID: "input-prefix-icon",
+      accessibilityLabel: "Prefix icon: ".concat(actualPrefix),
+      accessibilityRole: "image"
+    }));
+  }
+  if (/*#__PURE__*/React__default.default.isValidElement(prefix)) {
+    return /*#__PURE__*/React__default.default.createElement(reactNative.View, _extends({
+      testID: "input-prefix"
+    }, rest), prefix);
+  }
+  return null;
+};
+PrefixComponent.displayName = 'PrefixComponent';
+var PrefixComponent$1 = /*#__PURE__*/React__default.default.memo(PrefixComponent);
+
+/**
+ * InputComponent
+ *
+ * Renders the actual text input element. Supports custom input rendering or uses the default StyledTextInput.
+ *
+ * Key Features:
+ * - Flexible rendering: supports custom input renderers via renderInputValue prop
+ * - Variant support: handles both 'text' and 'textarea' input types
+ * - Multiline handling: automatically enables multiline for textarea variant
+ * - Theme integration: applies theme colors for placeholder text
+ * - Ref forwarding: properly forwards refs to the underlying TextInput
+ *
+ * Rendering Logic:
+ * 1. If renderInputValue provided: Use custom renderer
+ * 2. Otherwise: Use default StyledTextInput with theme and variant support
+ *
+ * Multiline Behavior:
+ * - 'textarea' variant: Always multiline
+ * - 'text' variant: Single line unless explicitly set via nativeInputProps
+ *
+ * @param props - The component props (see InputComponentProps interface for details)
+ */
+var InputComponent = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var variant = _ref.variant,
+    nativeInputProps = _ref.nativeInputProps,
+    renderInputValue = _ref.renderInputValue;
+  var theme = useWorkTheme();
+  return renderInputValue ?
+  /*#__PURE__*/
+  // Custom input renderer provided
+  React__default.default.createElement(React__default.default.Fragment, null, renderInputValue(nativeInputProps)) :
+  /*#__PURE__*/
+  // Default styled input with theme and variant support
+  React__default.default.createElement(StyledTextInput, _extends({}, nativeInputProps, {
+    themeVariant: variant,
+    multiline: variant === 'textarea' || nativeInputProps.multiline,
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+  }));
+});
+InputComponent.displayName = 'InputComponent';
+var InputComponent$1 = /*#__PURE__*/React__default.default.memo(InputComponent);
+
+/**
+ * InputRow Component
+ *
+ * Layout Structure:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │                    StyledInputRow                       │
+ * │  ┌──────────┐  ┌─────────────────────────────────────┐  │
+ * │  │  Prefix  │  │           Input Field               │  │
+ * │  │ (Icon or │  │      (TextInput or Custom)          │  │
+ * │  │ Custom)  │  │          flex: 1                    │  │
+ * │  └──────────┘  └─────────────────────────────────────┘  │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * Rendering Behavior:
+ * - Components are always rendered but hidden with opacity in idle state
+ * - Uses accessibility props to hide components from screen readers when not visible
+ *
+ * Renders the main input row containing:
+ * 1. Conditionally visible prefix component (icon or custom element)
+ * 2. Conditionally visible input component (TextInput or custom rendered input)
+ */
+var InputRow = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var state = _ref.state,
+    isFocused = _ref.isFocused,
+    prefix = _ref.prefix,
+    variant = _ref.variant,
+    nativeInputProps = _ref.nativeInputProps,
+    renderInputValue = _ref.renderInputValue,
+    isEmptyValue = _ref.isEmptyValue;
+  var shouldShow = isFocused || !isEmptyValue;
+  var opacity = React.useRef(new reactNative.Animated.Value(shouldShow ? 1 : 0)).current;
+  React.useEffect(function () {
+    reactNative.Animated.timing(opacity, {
+      toValue: shouldShow ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      useNativeDriver: true
+    }).start();
+  }, [shouldShow, opacity]);
+  return /*#__PURE__*/React__default.default.createElement(StyledInputRow, null, /*#__PURE__*/React__default.default.createElement(reactNative.Animated.View, {
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/React__default.default.createElement(PrefixComponent$1, {
+    state: state,
+    prefix: prefix,
+    accessibilityElementsHidden: !shouldShow
+  })), /*#__PURE__*/React__default.default.createElement(reactNative.Animated.View, {
+    style: {
+      flex: 1,
+      opacity: opacity
+    },
+    testID: "input-row-input-wrapper",
+    accessibilityLabel: "Text input field",
+    accessibilityElementsHidden: !shouldShow
+  }, /*#__PURE__*/React__default.default.createElement(InputComponent$1, {
+    variant: variant,
+    nativeInputProps: nativeInputProps,
+    renderInputValue: renderInputValue,
+    ref: ref
+  })));
+});
+
+var _excluded = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var getState = function getState(_ref) {
+  var disabled = _ref.disabled,
+    error = _ref.error,
+    editable = _ref.editable,
+    loading = _ref.loading,
+    isEmptyValue = _ref.isEmptyValue;
+  if (disabled) {
+    return 'disabled';
+  }
+  if (error) {
+    return 'error';
+  }
+  if (!editable || loading) {
+    return 'readonly';
+  }
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+  return 'default';
+};
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+var EMPTY_PLACEHOLDER_VALUE = ' ';
+// Simplified style extraction functions
+var extractBackgroundColor = function extractBackgroundColor(style) {
+  var flattened = reactNative.StyleSheet.flatten(style);
+  return flattened === null || flattened === void 0 ? void 0 : flattened.backgroundColor;
+};
+var extractBorderStyles = function extractBorderStyles(style) {
+  var flattened = reactNative.StyleSheet.flatten(style);
+  if (!flattened) return {};
+  var borderKeys = Object.keys(flattened).filter(function (key) {
+    return key.startsWith('border');
+  });
+  var borderStyles = {};
+  borderKeys.forEach(function (key) {
+    borderStyles[key] = flattened[key];
+  });
+  return borderStyles;
+};
+/**
+ * TextInput Layout Structure:
+ *
+ * ┌─────────────────────────────────────────────────────────────────────────┐
+ * │                    StyledContainer (with StyledBorder overlay)          │
+ * │  ┌─────────────────────────────────────────────────────────┐             │
+ * │  │                StyledInputWrapper                       │             │
+ * │  │  ┌─────────────────────────────────────────────────┐    │             │
+ * │  │  │          FloatingLabel (Optional)               │    │             │
+ * │  │  │         "Label" or animated position            │    │  ┌──────┐   │
+ * │  │  └─────────────────────────────────────────────────┘    │  │Suffix│   │
+ * │  │                                                         │  │ Icon │   │
+ * │  │  ┌─────────────────────────────────────────────────┐    │  │ or   │   │
+ * │  │  │              InputRow Component                 │    │  │Custom│   │
+ * │  │  │  ┌──────────┐  ┌─────────────────────────────┐  │    │  │(V-   │   │
+ * │  │  │  │  Prefix  │  │       Input Field           │  │    │  │Center│   │
+ * │  │  │  │(Animated)│  │   (Animated TextInput)      │  │    │  │ ed)  │   │
+ * │  │  │  └──────────┘  └─────────────────────────────┘  │    │  └──────┘   │
+ * │  │  └─────────────────────────────────────────────────┘    │             │
+ * │  │                                                         │             │
+ * │  │  ┌─────────────────────────────────────────────────┐    │             │
+ * │  │  │            StyledBottomContainer                │    │             │
+ * │  │  │  ┌─────────────────┐  ┌─────────────────────┐   │    │             │
+ * │  │  │  │ Error/Help Text │  │   Character Count   │   │    │             │
+ * │  │  │  │   (flex: 4)     │  │     (flex: 1)       │   │    │             │
+ * │  │  │  └─────────────────┘  └─────────────────────┘   │    │             │
+ * │  │  └─────────────────────────────────────────────────┘    │             │
+ * │  └─────────────────────────────────────────────────────────┘             │
+ * └─────────────────────────────────────────────────────────────────────────┘
+ *
+ * Note: StyledBorder uses StyleSheet.absoluteFillObject to overlay the entire
+ * StyledContainer, providing the border and background styling.
+ */
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref3;
+  var label = _ref2.label,
+    prefix = _ref2.prefix,
+    suffix = _ref2.suffix,
+    style = _ref2.style,
+    textStyle = _ref2.textStyle,
+    testID = _ref2.testID,
+    accessibilityLabelledBy = _ref2.accessibilityLabelledBy,
+    error = _ref2.error,
+    required = _ref2.required,
+    _ref2$editable = _ref2.editable,
+    editable = _ref2$editable === void 0 ? true : _ref2$editable,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
+    maxLength = _ref2.maxLength,
+    _ref2$hideCharacterCo = _ref2.hideCharacterCount,
+    hideCharacterCount = _ref2$hideCharacterCo === void 0 ? false : _ref2$hideCharacterCo,
+    helpText = _ref2.helpText,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    renderInputValue = _ref2.renderInputValue,
+    _ref2$allowFontScalin = _ref2.allowFontScaling,
+    allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
+    nativeProps = _objectWithoutProperties(_ref2, _excluded);
+  // Inline the simple getDisplayText function
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+  var isEmptyValue = displayText.length === 0;
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var state = getState({
+    disabled: disabled,
+    error: error,
+    editable: editable,
+    loading: loading,
+    isEmptyValue: isEmptyValue
+  });
+  var theme = useWorkTheme();
+  var innerTextInput = React__default.default.useRef(null);
+  React__default.default.useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      focus: function focus() {
+        var _innerTextInput$curre;
+        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 || _innerTextInput$curre.focus();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre2;
+        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre4;
+        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+      },
+      blur: function blur() {
+        var _innerTextInput$curre5;
+        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+      }
+    };
+  }, [innerTextInput]);
+  // Simplified style extraction
+  var borderStyles = extractBorderStyles(textStyle);
+  var customBackgroundColor = extractBackgroundColor(style);
+  var backgroundColor = customBackgroundColor !== null && customBackgroundColor !== void 0 ? customBackgroundColor : theme.__hd__.textInput.colors.containerBackground;
+  // Simplified callback functions (removed unnecessary memoization for simple cases)
+  var handleFocus = React.useCallback(function (event) {
+    var _nativeProps$onFocus;
+    setIsFocused(true);
+    (_nativeProps$onFocus = nativeProps.onFocus) === null || _nativeProps$onFocus === void 0 || _nativeProps$onFocus.call(nativeProps, event);
+  }, [nativeProps]);
+  var handleBlur = React.useCallback(function (event) {
+    var _nativeProps$onBlur;
+    setIsFocused(false);
+    (_nativeProps$onBlur = nativeProps.onBlur) === null || _nativeProps$onBlur === void 0 || _nativeProps$onBlur.call(nativeProps, event);
+  }, [nativeProps]);
+  var handleChangeText = React.useCallback(function (text) {
+    var _nativeProps$onChange;
+    (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 || _nativeProps$onChange.call(nativeProps, text);
+  }, [nativeProps]);
+  // Simplified callbacks - these don't need memoization as they're stable
+  var handleContainerPress = function handleContainerPress() {
+    var _innerTextInput$curre6;
+    (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 || _innerTextInput$curre6.focus();
+  };
+  // Create text input style without border properties
+  var textInputStyle = textStyle ? _objectSpread2({}, reactNative.StyleSheet.flatten(textStyle)) : {};
+  Object.keys(borderStyles).forEach(function (key) {
+    delete textInputStyle[key];
+  });
+  var nativeInputProps = _objectSpread2(_objectSpread2({
+    style: reactNative.StyleSheet.flatten([{
+      backgroundColor: backgroundColor,
+      color: theme.__hd__.textInput.colors.text
+    }, textInputStyle]),
+    testID: 'text-input',
+    accessibilityState: {
+      disabled: state === 'disabled' || state === 'readonly'
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    allowFontScaling: allowFontScaling
+  }, nativeProps), {}, {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChangeText: handleChangeText,
+    editable: editable,
+    maxLength: maxLength,
+    value: value,
+    defaultValue: defaultValue,
+    placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
+  });
+  // Create container style without background color
+  var containerStyle = style ? _objectSpread2({}, reactNative.StyleSheet.flatten(style)) : {};
+  if (customBackgroundColor) {
+    delete containerStyle.backgroundColor;
+  }
+  var isDisabledOrReadonly = state === 'disabled' || state === 'readonly';
+  return /*#__PURE__*/React__default.default.createElement(StyledContainer, {
+    style: containerStyle,
+    onPress: handleContainerPress,
+    disabled: isDisabledOrReadonly,
+    accessibilityState: {
+      disabled: isDisabledOrReadonly
+    },
+    testID: testID
+  }, /*#__PURE__*/React__default.default.createElement(StyledBorder, {
+    themeFocused: isFocused,
+    themeState: state,
+    testID: "text-input-border",
+    pointerEvents: "none",
+    style: [{
+      backgroundColor: backgroundColor
+    }, borderStyles]
+  }), /*#__PURE__*/React__default.default.createElement(StyledInputWrapper, null, !!label && /*#__PURE__*/React__default.default.createElement(FloatingLabel$1, {
+    label: label,
+    variant: variant,
+    state: state,
+    isFocused: isFocused,
+    required: required,
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    isEmptyValue: isEmptyValue
+  }), /*#__PURE__*/React__default.default.createElement(InputRow, {
+    state: state,
+    isFocused: isFocused,
+    prefix: prefix,
+    variant: variant,
+    nativeInputProps: nativeInputProps,
+    renderInputValue: renderInputValue,
+    ref: innerTextInput,
+    isEmptyValue: isEmptyValue
+  }), /*#__PURE__*/React__default.default.createElement(StyledBottomContainer, null, /*#__PURE__*/React__default.default.createElement(ErrorOrHelpText$1, {
+    error: error,
+    helpText: helpText
+  }), /*#__PURE__*/React__default.default.createElement(MaxLengthMessage$1, {
+    state: state,
+    currentLength: displayText.length,
+    maxLength: maxLength,
+    hideCharacterCount: hideCharacterCount
+  }))), /*#__PURE__*/React__default.default.createElement(StyledSuffixContainer, null, /*#__PURE__*/React__default.default.createElement(SuffixComponent$1, {
+    state: state,
+    loading: loading,
+    suffix: suffix
+  })));
+});
+
+exports.TextInput = TextInput;
 exports.ThemeProvider = WorkThemeProvider;
 exports.ThemeSwitcher = WorkThemeSwitcher;
 exports.getTheme = getTheme;