jfs-components 0.0.77 → 0.0.79

package/lib/commonjs/components/ListItem/ListItem.js

@@ -21,9 +21,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const IS_IOS = _reactNative.Platform.OS === 'ios';
 const PRESS_DELAY = IS_IOS ? 130 : 0;
 
-// Forced modes for the endSlot — `Context: 'ListItem'` can never be
-// overridden by external modes. Frozen so identity is stable across renders.
-const END_SLOT_FORCED_MODES = Object.freeze({
+// Forced modes for the leading/trailing slots — `Context: 'ListItem'` can
+// never be overridden by external modes. Frozen so identity is stable across
+// renders. Applied to both slots so they cascade modes identically.
+const SLOT_FORCED_MODES = Object.freeze({
   Context: 'ListItem'
 });
 
@@ -38,27 +39,42 @@ const pressedOverlayStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveListItemTokens(modes) {
+  // Modes used to cascade into slot children (leading / supportSlot / trailing).
+  // We do NOT inject an `AppearanceBrand` default here: slot content such as
+  // Buttons or Badges carry their own intended appearance, so forcing one onto
+  // them would be surprising.
   const resolvedModes = {
     ...modes,
     Context: 'ListItem'
   };
+
+  // Modes used to resolve the ListItem's OWN title + support text. Within this
+  // component, `AppearanceBrand` only affects `listItem/title/color` and
+  // `listItem/supportText/color`, so the text defaults to the "Neutral"
+  // appearance (in both Vertical and Horizontal layouts). A caller-supplied
+  // `AppearanceBrand` still wins; `Context` is always forced to 'ListItem'.
+  const textModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes,
+    Context: 'ListItem'
+  };
   const gap = (0, _figmaVariablesResolver.getVariableByName)('listItem/gap', resolvedModes) ?? 8;
   const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/top', resolvedModes) ?? 0;
   const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/bottom', resolvedModes) ?? 0;
   const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', resolvedModes) || '#0f0d0a';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', resolvedModes) || 14;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', resolvedModes) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', resolvedModes) || 'System';
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', resolvedModes) || 700;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes) || '#0f0d0a';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes) || 14;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes) || 16;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', textModes) || 'System';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', textModes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', resolvedModes) || '#1f1a14';
-  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', resolvedModes) || 12;
-  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', resolvedModes) || 14;
-  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', resolvedModes) || 'System';
-  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', resolvedModes) || 500;
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/color', textModes) || '#1f1a14';
+  const supportFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontSize', textModes) || 12;
+  const supportLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/lineHeight', textModes) || 14;
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontFamily', textModes) || 'System';
+  const supportFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('listItem/supportText/fontWeight', textModes) || 500;
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   return {
     baseContainerStyle: {
@@ -122,9 +138,11 @@ const verticalSupportTextOverride = {
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -132,9 +150,9 @@ const verticalSupportTextOverride = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -163,6 +181,7 @@ function ListItemImpl({
   showSupportText = true,
   leading,
   supportSlot,
+  trailing,
   endSlot,
   navArrow = true,
   modes = _reactUtils.EMPTY_MODES,
@@ -200,7 +219,7 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = (0, _react.useMemo)(() => {
-    const processed = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes) : [];
+    const processed = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes, SLOT_FORCED_MODES) : [];
     if (processed.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
         modes: tokens.resolvedModes,
@@ -214,11 +233,14 @@ function ListItemImpl({
     const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), tokens.resolvedModes);
     return processed.length === 1 ? processed[0] : processed;
   }, [supportSlot, tokens.resolvedModes]);
-  const processedEndSlot = (0, _react.useMemo)(() => {
-    if (!endSlot) return null;
-    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), tokens.resolvedModes, END_SLOT_FORCED_MODES);
+
+  // `trailing` wins; `endSlot` is the deprecated alias kept for back-compat.
+  const trailingContent = trailing ?? endSlot;
+  const processedTrailing = (0, _react.useMemo)(() => {
+    if (!trailingContent) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailingContent), tokens.resolvedModes, SLOT_FORCED_MODES);
     return processed.length === 1 ? processed[0] : processed;
-  }, [endSlot, tokens.resolvedModes]);
+  }, [trailingContent, tokens.resolvedModes]);
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot;
 
@@ -264,9 +286,9 @@ function ListItemImpl({
           numberOfLines: 1,
           children: title
         }), showSupportText && renderSupportContent()]
-      }), processedEndSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: tokens.trailingWrapperStyle,
-        children: processedEndSlot
+        children: processedTrailing
       }) : null, navArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
         direction: "Forward",
         modes: tokens.resolvedModes

package/lib/commonjs/components/MessageField/MessageField.js

@@ -0,0 +1,318 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Form = require("../Form/Form");
+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); }
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Visual state of the textarea. Mirrors the `FormField States` collection so
+ * MessageField slots into the same theming pipeline as FormField. The state
+ * is always derived from props (`isInvalid`, `isDisabled`, `isReadOnly` and
+ * focus) and is locked in `modes['FormField States']` — passing that key in
+ * `modes` is intentionally ignored to keep interactive behaviour and visual
+ * state in sync.
+ */
+
+// ---------------------------------------------------------------------------
+// Token helpers
+// ---------------------------------------------------------------------------
+
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
+}
+function useMessageFieldTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    const wrapperGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/gap', modes), 8);
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/foreground', modes) || '#000000';
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/lineHeight', modes), 17);
+    const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontWeight', modes), '500');
+    const textareaBackground = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/background', modes) || '#ffffff';
+    const textareaBorderColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/color', modes) || '#b5b6b7';
+    const textareaBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/size', modes), 1.5);
+    const textareaRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/radius', modes), 8);
+    const textareaPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/padding', modes), 12);
+    const textareaHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/height', modes), 108);
+    const textareaGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/gap', modes), 0);
+
+    // `messageField/text/foreground` is the input text color. It also
+    // serves as the placeholder color — in mode-aware token sets it
+    // resolves to a muted/idle color when empty and shifts darker via
+    // the `FormField States` cascade once typed-state tokens land. We
+    // never re-route this through another token (e.g. the counter
+    // color) because that conflates two semantically distinct tokens.
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/foreground', modes) || '#707275';
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontFamily', modes) || 'JioType Var';
+    const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontSize', modes), 16);
+    const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/lineHeight', modes), 21);
+    const inputFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontWeight', modes), '400');
+    const counterColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/foreground', modes) || '#24262b';
+    const counterFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontFamily', modes) || 'JioType Var';
+    const counterFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontSize', modes), 14);
+    const counterLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/lineHeight', modes), 18);
+    const counterFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontWeight', modes), '400');
+    return {
+      wrapperGap,
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      textareaBackground,
+      textareaBorderColor,
+      textareaBorderSize,
+      textareaRadius,
+      textareaPadding,
+      textareaHeight,
+      textareaGap,
+      inputTextColor,
+      inputFontFamily,
+      inputFontSize,
+      inputLineHeight,
+      inputFontWeight,
+      counterColor,
+      counterFontFamily,
+      counterFontSize,
+      counterLineHeight,
+      counterFontWeight
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const REQUIRED_INDICATOR_COLOR = '#d93d3d';
+function MessageField({
+  label,
+  placeholder,
+  value,
+  defaultValue,
+  onChangeText,
+  name,
+  maxLength,
+  showCounter,
+  rows,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  autoFocus = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  textareaStyle,
+  inputStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onFocus,
+  onBlur
+}) {
+  const formCtx = (0, _Form.useFormContext)();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = (0, _react.useState)(defaultValue ?? '');
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // Ref to the native textarea so tapping anywhere in the (padded) textarea
+  // container focuses it on the FIRST tap, fixing the Android "two taps to
+  // open the keyboard" issue.
+  const inputRef = (0, _react.useRef)(null);
+  const focusInput = (0, _react.useCallback)(() => {
+    if (!interactive) return;
+    inputRef.current?.focus();
+  }, [interactive]);
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // FormField States cascade — error > disabled > read only > active (focus)
+  // > idle. Always derived from props and locked into the modes object so
+  // consumers cannot pass `modes={{ 'FormField States': ... }}` and get out
+  // of sync with the component's actual interactive behaviour.
+  const stateMode = (0, _react.useMemo)(() => {
+    if (resolvedIsInvalid) return 'Error';
+    if (isDisabled) return 'Disabled';
+    if (isReadOnly) return 'Read Only';
+    if (isFocused) return 'Active';
+    return 'Idle';
+  }, [resolvedIsInvalid, isDisabled, isReadOnly, isFocused]);
+  const modes = (0, _react.useMemo)(() => ({
+    ...baseModes,
+    'FormField States': stateMode
+  }), [baseModes, stateMode]);
+  const tokens = useMessageFieldTokens(modes);
+
+  // ---------- Event handlers ---------------------------------------------
+  const handleFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const handleChangeText = (0, _react.useCallback)(next => {
+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
+    onChangeText?.(next);
+    if (name && formCtx) formCtx.onFieldChange(name);
+  }, [isControlled, onChangeText, name, formCtx]);
+
+  // ---------- Derived layout values --------------------------------------
+  const computedHeight = (0, _react.useMemo)(() => {
+    if (rows && rows > 0) {
+      return Math.round(rows * tokens.inputLineHeight + 2 * tokens.textareaPadding);
+    }
+    return tokens.textareaHeight;
+  }, [rows, tokens.inputLineHeight, tokens.textareaPadding, tokens.textareaHeight]);
+  const shouldShowCounter = (0, _react.useMemo)(() => {
+    if (showCounter === false) return false;
+    if (showCounter === true) return true;
+    return typeof maxLength === 'number';
+  }, [showCounter, maxLength]);
+  const counterText = (0, _react.useMemo)(() => {
+    const count = currentValue.length;
+    if (typeof maxLength === 'number') return `${count}/${maxLength}`;
+    return `${count}`;
+  }, [currentValue.length, maxLength]);
+
+  // ---------- Styles -----------------------------------------------------
+  const wrapperStyle = (0, _react.useMemo)(() => ({
+    gap: tokens.wrapperGap,
+    width: '100%'
+  }), [tokens.wrapperGap]);
+  const labelRowStyle = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  }), []);
+  const labelTextStyle = (0, _react.useMemo)(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens.labelColor, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelLineHeight, tokens.labelFontWeight]);
+  const requiredIndicatorStyle = (0, _react.useMemo)(() => ({
+    ...labelTextStyle,
+    color: REQUIRED_INDICATOR_COLOR
+  }), [labelTextStyle]);
+  const textareaContainerStyle = (0, _react.useMemo)(() => ({
+    backgroundColor: tokens.textareaBackground,
+    borderColor: tokens.textareaBorderColor,
+    borderWidth: tokens.textareaBorderSize,
+    borderStyle: 'solid',
+    borderRadius: tokens.textareaRadius,
+    padding: tokens.textareaPadding,
+    height: computedHeight,
+    width: '100%',
+    overflow: 'hidden',
+    // The gap token is for content within the textarea (icons, etc.);
+    // we keep it so downstream layouts that pass children align.
+    gap: tokens.textareaGap
+  }), [tokens.textareaBackground, tokens.textareaBorderColor, tokens.textareaBorderSize, tokens.textareaRadius, tokens.textareaPadding, computedHeight, tokens.textareaGap]);
+  const inputTextStyle = (0, _react.useMemo)(() => ({
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    padding: 0,
+    margin: 0,
+    textAlignVertical: 'top',
+    // Disable the default web focus ring; the textarea border
+    // already encodes focus state.
+    outlineStyle: 'none',
+    outlineWidth: 0,
+    outlineColor: 'transparent'
+  }), [tokens.inputTextColor, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputLineHeight, tokens.inputFontWeight]);
+  const counterTextStyle = (0, _react.useMemo)(() => ({
+    color: tokens.counterColor,
+    fontFamily: tokens.counterFontFamily,
+    fontSize: tokens.counterFontSize,
+    lineHeight: tokens.counterLineHeight,
+    fontWeight: tokens.counterFontWeight,
+    textAlign: 'right',
+    width: '100%'
+  }), [tokens.counterColor, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterLineHeight, tokens.counterFontWeight]);
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Message field';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    testID: testID,
+    accessible: false,
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: labelRowStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: labelTextStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [textareaContainerStyle, textareaStyle],
+      onPress: focusInput,
+      accessible: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: inputRef,
+        multiline: true,
+        value: currentValue,
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholder: placeholder ?? '',
+        placeholderTextColor: tokens.inputTextColor,
+        editable: interactive,
+        maxLength: maxLength,
+        autoFocus: autoFocus,
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityHint: accessibilityHint,
+        style: [inputTextStyle, inputStyle]
+      })
+    }), shouldShowCounter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: counterTextStyle,
+      accessibilityElementsHidden: true,
+      children: counterText
+    })]
+  });
+}
+var _default = exports.default = MessageField;

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -8,9 +8,20 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
 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); }
+/** Minimum touch target per iOS HIG / Material accessibility guidance. */
+const MIN_TOUCH_TARGET = 44;
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const touchTargetStyle = {
+  minWidth: MIN_TOUCH_TARGET,
+  minHeight: MIN_TOUCH_TARGET,
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 function resolveNavArrowTokens(modes) {
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
   const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
@@ -51,6 +62,8 @@ function NavArrow({
   modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
+  onPress,
+  disabled = false,
   ...rest
 }) {
   const tokens = (0, _react.useMemo)(() => resolveNavArrowTokens(modes), [modes]);
@@ -64,8 +77,7 @@ function NavArrow({
       borderRadius: tokens.borderRadius,
       backgroundColor: tokens.backgroundColor,
       alignItems: 'center',
-      justifyContent: 'center',
-      ...(style || {})
+      justifyContent: 'center'
     };
     const chevronW = isDown ? tokens.iconHeight : tokens.iconWidth;
     const chevronH = isDown ? tokens.iconWidth : tokens.iconHeight;
@@ -91,26 +103,55 @@ function NavArrow({
       svgHeight,
       points
     };
-  }, [tokens, direction, style]);
+  }, [tokens, direction]);
   const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel
+  });
+  const chevron = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+    width: computed.svgWidth,
+    height: computed.svgHeight,
+    viewBox: `0 0 ${computed.svgWidth} ${computed.svgHeight}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polyline, {
+      points: computed.points,
+      stroke: tokens.iconColor,
+      strokeWidth: tokens.strokeWeight,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none"
+    })
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      unstable_pressDelay: PRESS_DELAY,
+      style: ({
+        pressed
+      }) => [touchTargetStyle, style, pressed && !disabled ? {
+        opacity: 0.7
+      } : null],
+      ...webProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: computed.containerStyle,
+        children: chevron
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: computed.containerStyle,
+    style: [computed.containerStyle, style],
     accessibilityRole: "image",
     accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-      width: computed.svgWidth,
-      height: computed.svgHeight,
-      viewBox: `0 0 ${computed.svgWidth} ${computed.svgHeight}`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polyline, {
-        points: computed.points,
-        stroke: tokens.iconColor,
-        strokeWidth: tokens.strokeWeight,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        fill: "none"
-      })
-    })
+    children: chevron
   });
 }
 var _default = exports.default = /*#__PURE__*/_react.default.memo(NavArrow);