@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/InlineSelect/InlineSelect.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InlineSelect = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _Chevron = require("../FieldBase/Chevron.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
+var _OptionSheet = require("../OptionSheet/OptionSheet.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * InlineSelect — a compact, borderless select trigger for inside other fields.
+ *
+ * Renders just the selected label + chevron (no FieldBase box) and opens the
+ * shared OptionSheet picker. Designed to live in Input's `leftIcon` /
+ * `rightIcon` slots — currency prefix on an amount field, country code on a
+ * phone field, unit suffix on a measurement — but works anywhere a bare
+ * dropdown trigger is needed (toolbars, list headers).
+ *
+ * Single-select only by design: a multi-select crammed into a field affix has
+ * no sane closed-state rendering. Reach for Select when you need multi.
+ *
+ * ```tsx
+ * <Input
+ *   placeholder="Amount"
+ *   textAlign="right"
+ *   keyboardType="number-pad"
+ *   leftIcon={
+ *     <InlineSelect options={currencies} value={currency} onChange={setCurrency} />
+ *   }
+ * />
+ * ```
+ */
+
+// `unknown` keeps the forwardRef signature non-generic — same pattern as Select.
+const InlineSelect = exports.InlineSelect = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    value,
+    onChange,
+    placeholder,
+    label,
+    title,
+    searchable = false,
+    haptic,
+    disabled = false,
+    size = 'md',
+    color,
+    chevronColor,
+    chevronSize,
+    textStyle,
+    style,
+    optionStyle,
+    selectedOptionStyle,
+    optionTextStyle,
+    selectedOptionTextStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = (0, _react.useCallback)(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const selectedOption = (0, _react.useMemo)(() => {
+    if (value === undefined || value === null) {
+      return undefined;
+    }
+    return options.find(o => valueOf(o) === value);
+  }, [options, value, valueOf]);
+  const isSelected = (0, _react.useCallback)(optValue => value === optValue, [value]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (disabled) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    setOpen(true);
+  }, [disabled, haptic]);
+  const handleClose = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  const handleSelect = (0, _react.useCallback)(option => {
+    if (disabledOf(option)) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    onChange(valueOf(option));
+    handleClose();
+  }, [disabledOf, valueOf, onChange, handleClose, haptic]);
+  const triggerColor = disabled ? theme.colors.text.disabled : color ?? theme.components.inlineSelect?.color ?? theme.colors.primary;
+  const displayText = selectedOption !== undefined ? labelOf(selectedOption) : placeholder ?? 'Select';
+  const a11ySummary = selectedOption !== undefined ? `Selected: ${labelOf(selectedOption)}` : placeholder ?? 'No selection';
+  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      ref: ref,
+      onPress: handleOpen,
+      disabled: disabled,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        disabled,
+        expanded: open
+      },
+      testID: testID,
+      style: ({
+        pressed
+      }) => [styles.trigger, {
+        columnGap: theme.spacing.xs,
+        opacity: pressed && !disabled ? 0.6 : 1
+      }, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.triggerText, {
+          color: triggerColor,
+          fontSize: sizeTokens.fontSize,
+          ...(0, _index.fontFor)(theme, 'medium')
+        }, textStyle],
+        numberOfLines: 1,
+        children: displayText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.Chevron, {
+        color: chevronColor ?? triggerColor,
+        size: chevronSize ?? sizeTokens.iconSize,
+        open: open
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.OptionSheet, {
+      open: open,
+      onClose: handleClose,
+      title: title,
+      accessibilityLabel: label ?? placeholder ?? 'Options',
+      options: options,
+      labelOf: labelOf,
+      valueOf: valueOf,
+      disabledOf: disabledOf,
+      descriptionOf: descriptionOf,
+      iconOf: iconOf,
+      isSelected: isSelected,
+      onSelect: handleSelect,
+      searchable: searchable,
+      optionStyle: optionStyle,
+      selectedOptionStyle: selectedOptionStyle,
+      optionTextStyle: optionTextStyle,
+      selectedOptionTextStyle: selectedOptionTextStyle
+    })]
+  });
+});
+InlineSelect.displayName = 'InlineSelect';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  triggerText: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = InlineSelect;
+//# sourceMappingURL=InlineSelect.js.map

package/lib/commonjs/components/InlineSelect/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineSelect", {
+  enumerable: true,
+  get: function () {
+    return _InlineSelect.InlineSelect;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InlineSelect.default;
+  }
+});
+var _InlineSelect = _interopRequireWildcard(require("./InlineSelect.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Input/Input.js

@@ -0,0 +1,402 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Input = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// FieldBase carries every dimension except `multilineMinHeight` — Input owns
+// the multiline height ramp, so we keep a tiny per-size table for that one key.
+const multilineMinHeightMap = {
+  sm: 72,
+  md: 92,
+  lg: 110
+};
+const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    error,
+    helperText,
+    secureTextEntry = false,
+    showPasswordToggle = false,
+    disabled = false,
+    multiline = false,
+    leftIcon,
+    rightIcon,
+    size = 'md',
+    variant: variantProp,
+    labelMode: labelModeProp,
+    required = false,
+    maxLength,
+    showCounter = true,
+    textAlign,
+    format,
+    parse,
+    style,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    messageStyle,
+    borderRadius: borderRadiusProp,
+    onFocus,
+    onBlur,
+    accessibilityLabel,
+    testID,
+    editable,
+    ...rest
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const multilineMinHeight = multilineMinHeightMap[size];
+
+  // Resolution chain: caller prop → component-specific token
+  // (`components.input.defaultVariant`) → shared field-family token
+  // (`components.field.defaultVariant`) → library default. The middle step lets
+  // brands flip every input-style control (Input, Select, SearchBar, …) in one
+  // place; the per-component slot still wins when a brand needs a different
+  // default for Input specifically.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const isEditable = !disabled && editable !== false;
+  const shouldFloat = isFocused || hasValue;
+  // Floating label only when explicitly opted into via labelMode='float' AND the
+  // field is single-line. labelMode='top' OR multiline both force a static label
+  // above the field — the staticLabel branch below handles both.
+  const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
+
+  // Animations local to Input: floating label, shake, helper/error fade.
+  // Border + fill animations now live inside FieldBase.
+  const labelAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(0)).current;
+  const messageAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(hasError || helperText ? 1 : 0)).current;
+
+  // Floating label animation
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.timing(labelAnim, {
+      toValue: shouldFloat ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Helper / error fade
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.timing(messageAnim, {
+      toValue: hasError || helperText ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [hasError, helperText, messageAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Error shake — off by default; consumers opt in via
+  // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const reduceMotion = (0, _index.useReducedMotion)();
+  const shakeOnError = theme.components.input?.shakeOnError ?? false;
+  const prevErrorRef = (0, _react.useRef)(hasError);
+  (0, _react.useEffect)(() => {
+    if (!shakeOnError) {
+      prevErrorRef.current = hasError;
+      return;
+    }
+    let anim;
+    if (hasError && !prevErrorRef.current) {
+      // Reduce Motion: keep the error haptic, skip the shake.
+      if (!reduceMotion) {
+        (0, _index2.setNativeValue)(shakeAnim, 0);
+        anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true
+        })]);
+        anim.start();
+      }
+      (0, _index3.triggerHaptic)('notificationError');
+    }
+    prevErrorRef.current = hasError;
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
+  const handleFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const togglePasswordVisibility = (0, _react.useCallback)(() => {
+    (0, _index3.triggerHaptic)('selection');
+    setIsPasswordVisible(prev => !prev);
+  }, []);
+
+  // Bridge legacy Input fill-colour API (theme.components.input.fillColors[variant])
+  // onto FieldBase's FieldVariantTokens shape. Keeps consumer overrides working.
+  const fillOverrides = (0, _react.useMemo)(() => {
+    const legacy = theme.components.input?.fillColors?.[variant];
+    if (!legacy) {
+      return undefined;
+    }
+    const overrides = {};
+    if (legacy.idleEmpty !== undefined) {
+      overrides.backgroundIdleEmpty = legacy.idleEmpty;
+    }
+    if (legacy.idleFilled !== undefined) {
+      overrides.backgroundIdleFilled = legacy.idleFilled;
+    }
+    if (legacy.focus !== undefined) {
+      overrides.backgroundFocused = legacy.focus;
+    }
+    if (legacy.error !== undefined) {
+      overrides.backgroundError = legacy.error;
+    }
+    if (legacy.disabled !== undefined) {
+      overrides.backgroundDisabled = legacy.disabled;
+    }
+    return Object.keys(overrides).length > 0 ? overrides : undefined;
+  }, [theme.components.input?.fillColors, variant]);
+
+  // Selection / caret / handle colour walks the same resolution chain as the
+  // focused border so brands that override `components.field.<variant>.borderFocused`
+  // get a matching selection tint without also having to update root `border.focus`.
+  const selectionColor = (0, _react.useMemo)(() => (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocusedRepresentative, [theme, variant, fillOverrides]);
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
+
+  // Floating label styles
+  const labelTranslateY = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -22]
+  });
+  const labelScale = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.85]
+  });
+  // Single source of truth for label colour — used by BOTH static-top and
+  // floating modes. Label stays its resting colour on focus unless the consumer
+  // opts in via theme.components.input.tintLabelOnFocus.
+  const tintLabelOnFocus = theme.components.input?.tintLabelOnFocus ?? false;
+  const labelColor = hasError ? theme.colors.error : isFocused && tintLabelOnFocus ? theme.colors.border.focus : theme.colors.text.secondary;
+  const shakeTranslateX = shakeAnim.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: [-6, 0, 6]
+  });
+
+  // The floating label tracks the value's horizontal alignment so
+  // `textAlign="right"` (amount fields) keeps label and text together.
+  // Centre uses `alignSelf` — Yoga aligns absolutely-positioned children by
+  // alignment props when the horizontal insets are left unset.
+  const hasTrailingSlot = Boolean(rightIcon) || showPasswordToggle && secureTextEntry;
+  const floatingLabelPosition = textAlign === 'right' ? {
+    right: sizeTokens.paddingHorizontal + (hasTrailingSlot ? sizeTokens.iconSize + theme.spacing.sm : 0)
+  } : textAlign === 'center' ? {
+    alignSelf: 'center'
+  } : {
+    left: sizeTokens.paddingHorizontal + (leftIcon ? sizeTokens.iconSize + theme.spacing.sm : 0)
+  };
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
+  const inputTextColor = fieldText.color;
+  const placeholderTextColor = fieldText.placeholderColor;
+  const messageText = hasError ? error : helperText;
+  const messageColor = hasError ? theme.colors.error : theme.colors.text.secondary;
+  const a11yLabel = accessibilityLabel ?? label ?? placeholder;
+  const iconColor = disabled ? theme.colors.text.disabled : theme.colors.text.secondary;
+  const trailing = (() => {
+    if (showPasswordToggle && secureTextEntry) {
+      const renderer = isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: togglePasswordVisibility,
+        disabled: !isEditable,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
+        children: renderer ? renderer({
+          size: sizeTokens.iconSize,
+          color: iconColor
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: iconColor
+          },
+          children: isPasswordVisible ? '✕' : '○'
+        })
+      });
+    }
+    if (rightIcon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: rightIcon
+      });
+    }
+    return null;
+  })();
+  const leading = leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: leftIcon
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.container, {
+      transform: [{
+        translateX: shakeTranslateX
+      }]
+    }, style],
+    children: [label && !showFloatingLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.staticLabel, {
+        color: labelColor,
+        fontSize: theme.typography.fontSize.sm,
+        ...(0, _index2.fontFor)(theme, 'medium'),
+        marginBottom: theme.spacing.xxs
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.fieldWrapper,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        error: hasError,
+        filled: hasValue,
+        minHeight: multiline ? multilineMinHeight : undefined,
+        borderRadius: borderRadiusOverride,
+        fillOverrides: fillOverrides,
+        leading: leading,
+        trailing: trailing,
+        style: containerStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            color: inputTextColor,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle,
+            minHeight: multiline ? multilineMinHeight - sizeTokens.paddingVertical * 2 : undefined,
+            textAlignVertical: multiline ? 'top' : 'center'
+          }, inputStyle],
+          textAlign: textAlign,
+          placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
+          placeholderTextColor: placeholderTextColor,
+          value: format && value != null ? format(value) : value,
+          onChangeText: text => {
+            if (!onChangeText) {
+              return;
+            }
+            onChangeText(parse ? parse(text) : text);
+          },
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          editable: isEditable,
+          secureTextEntry: secureTextEntry && !isPasswordVisible,
+          multiline: multiline,
+          maxLength: maxLength,
+          selectionColor: selectionColor,
+          accessibilityLabel: a11yLabel,
+          accessibilityState: {
+            disabled
+          },
+          testID: testID,
+          ...rest
+        })
+      }), showFloatingLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.Text, {
+        pointerEvents: "none",
+        style: [styles.floatingLabel, floatingLabelPosition, {
+          top: sizeTokens.paddingVertical,
+          color: labelColor,
+          fontSize: sizeTokens.fontSize,
+          ...(0, _index2.fontFor)(theme, 'medium'),
+          backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
+          paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
+          transform: [{
+            translateY: labelTranslateY
+          }, {
+            scale: labelScale
+          }]
+        }, labelStyle],
+        children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
+      }) : null]
+    }), messageText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+      style: [styles.messageText, {
+        color: messageColor,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs,
+        opacity: messageAnim
+      }, messageStyle],
+      accessibilityLiveRegion: hasError ? 'polite' : 'none',
+      children: messageText
+    }) : null, showCounter && typeof maxLength === 'number' && typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.counterText, {
+        color: theme.colors.text.tertiary,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      children: `${value.length} / ${maxLength}`
+    }) : null]
+  });
+});
+Input.displayName = 'Input';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  staticLabel: {
+    includeFontPadding: false
+  },
+  // Wraps FieldBase + the absolutely-positioned floating label so the label
+  // can sit over the field's top border without being clipped.
+  fieldWrapper: {
+    position: 'relative',
+    overflow: 'visible'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  floatingLabel: {
+    position: 'absolute',
+    zIndex: 1
+  },
+  messageText: {
+    includeFontPadding: false
+  },
+  counterText: {
+    alignSelf: 'flex-end',
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = Input;
+//# sourceMappingURL=Input.js.map

package/lib/commonjs/components/Input/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _Input.Input;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+var _Input = _interopRequireWildcard(require("./Input.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map