react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/divider/Divider.js

@@ -7,6 +7,8 @@ export const Divider = props => {
   const {
     tokensOverride,
     children,
+    type: typeProp,
+    orientation: orientationProp,
     dashed: dashedProp,
     hairline: hairlineProp,
     contentPosition: contentPositionProp,
@@ -20,9 +22,10 @@ export const Divider = props => {
   const dashed = dashedProp ?? tokens.defaults.dashed;
   const hairline = hairlineProp ?? tokens.defaults.hairline;
   const contentPosition = contentPositionProp ?? tokens.defaults.contentPosition;
+  const orientation = typeProp ?? orientationProp ?? 'horizontal';
   const resolvedColor = lineColor ?? tokens.colors.line;
   const borderStyle = dashed ? 'dashed' : 'solid';
-  const hasContent = isRenderable(children);
+  const hasContent = orientation === 'horizontal' && isRenderable(children);
   const content = !hasContent ? null : isText(children) ? /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.text, {
       color: tokens.colors.text,
@@ -63,6 +66,38 @@ export const Divider = props => {
       }
     });
   };
+  if (orientation === 'vertical') {
+    const line = hairline ? /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.hairlineWrapper, {
+        width: tokens.borders.thickness,
+        height: '100%'
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [createHairlineView({
+        position: 'left',
+        color: resolvedColor,
+        top: 0,
+        bottom: 0,
+        left: 0
+      }), {
+        borderStyle
+      }]
+    })) : /*#__PURE__*/React.createElement(View, {
+      style: {
+        width: tokens.borders.thickness,
+        height: '100%',
+        borderLeftWidth: tokens.borders.thickness,
+        borderLeftColor: resolvedColor,
+        borderStyle
+      }
+    });
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [tokens.layout.container, {
+        marginVertical: tokens.spacing.vertical,
+        flexDirection: 'column'
+      }, style]
+    }, rest), line);
+  }
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [tokens.layout.container, {
       marginVertical: tokens.spacing.vertical

package/dist/es/components/field/Field.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Platform, Pressable, Text, TextInput, View } from 'react-native';
 import { Clear, QuestionO } from 'react-native-system-icon';
 import Cell from '../cell';
@@ -7,7 +7,143 @@ import Dialog from '../dialog';
 import { formatNumberInput } from '../../utils/string';
 import { isDef, isFiniteNumber, isFunction, isObject, isRenderable, isText } from '../../utils/validate';
 import { useFieldTokens } from './tokens';
-import { alignMap, mapKeyboardType } from './utils';
+const alignMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+const mapKeyboardType = type => {
+  switch (type) {
+    case 'number':
+      return 'decimal-pad';
+    case 'digit':
+      return 'number-pad';
+    case 'tel':
+      return 'phone-pad';
+    default:
+      return undefined;
+  }
+};
+const FieldSlot = ({
+  onPress,
+  style,
+  children,
+  accessibilityRole = 'button'
+}) => {
+  if (!children) return null;
+  return onPress ? /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    style: style
+  }, children) : /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, children);
+};
+const FieldClearButton = ({
+  show,
+  tokens,
+  clearIcon,
+  onPressIn,
+  onPressOut,
+  onPress
+}) => {
+  if (!show) return null;
+  const webMouseDownProps = Platform.OS === 'web' ? {
+    onMouseDown: event => {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    }
+  } : undefined;
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [tokens.layout.clearIcon, {
+      paddingHorizontal: tokens.spacing.rightIconGap
+    }]
+  }, webMouseDownProps, {
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onPress: onPress,
+    accessibilityRole: "button"
+  }), /*#__PURE__*/React.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/React.createElement(Clear, {
+    size: tokens.sizes.clearIcon,
+    fill: tokens.colors.clear,
+    color: tokens.colors.clear
+  }));
+};
+const FieldInput = ({
+  inputRef,
+  tokens,
+  isTextarea,
+  disabled,
+  error,
+  finalTextAlign,
+  lineHeight,
+  textareaHeight,
+  minHeight,
+  inputStyle,
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onPressIn,
+  rows,
+  placeholderTextColor,
+  keyboardType,
+  onContentSizeChange,
+  describedBy,
+  secureTextEntry,
+  editable,
+  restInputProps
+}) => {
+  const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
+    color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
+    fontSize: tokens.typography.inputSize,
+    textAlign: finalTextAlign,
+    ...(isTextarea ? {
+      lineHeight,
+      height: textareaHeight,
+      minHeight
+    } : {
+      minHeight: tokens.sizes.controlMinHeight
+    })
+  }, inputStyle];
+  return /*#__PURE__*/React.createElement(TextInput, _extends({
+    ref: inputRef,
+    style: inputStyles,
+    value: value,
+    onChangeText: onChangeText,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPressIn: onPressIn,
+    editable: editable,
+    secureTextEntry: secureTextEntry,
+    multiline: isTextarea,
+    numberOfLines: isTextarea ? rows : undefined,
+    keyboardType: keyboardType,
+    placeholderTextColor: placeholderTextColor,
+    onContentSizeChange: isTextarea ? onContentSizeChange : undefined
+  }, describedBy ? {
+    accessibilityDescribedBy: describedBy
+  } : null, {
+    clearButtonMode: "never"
+  }, restInputProps));
+};
+const FieldControlRow = ({
+  tokens,
+  prefixNode,
+  leftIconNode,
+  controlNode,
+  clearNode,
+  rightIconNode,
+  suffixNode
+}) => {
+  return /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.body
+  }, prefixNode, leftIconNode, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.controlWrapper, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, controlNode, clearNode), rightIconNode, suffixNode);
+};
 export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     tokensOverride,
@@ -80,7 +216,7 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
   const rows = rowsProp ?? tokens.defaults.rows;
   const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const mergedTitleStyle = [{
+  const mergedTitleStyle = useMemo(() => [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -88,29 +224,30 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, titleStyle];
-  const resolvedSuffix = suffixProp ?? button;
-  const resolvedDescription = intro ?? description;
-  const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
+  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  const resolvedSuffix = useMemo(() => suffixProp ?? button, [button, suffixProp]);
+  const resolvedDescription = useMemo(() => intro ?? description, [description, intro]);
+  const resolvedPlaceholderColor = useMemo(() => placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder), [disabled, placeholderTextColor, tokens.colors.disabled, tokens.colors.placeholder]);
   const isTextarea = type === 'textarea';
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = useState(defaultValue);
   const value = isControlled ? valueProp ?? '' : internalValue;
   const [focused, setFocused] = useState(false);
   const [pressingClear, setPressingClear] = useState(false);
+  const clearJustHandledRef = useRef(false);
   const inputRef = useRef(null);
   const introId = useId();
   const errorId = useId();
-  const describedBy = (() => {
+  const describedBy = useMemo(() => {
     const ids = [isRenderable(errorMessage) ? errorId : null, isRenderable(resolvedDescription) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  })();
+  }, [errorId, errorMessage, introId, resolvedDescription]);
   const lineHeight = tokens.defaults.textareaLineHeight;
-  const autoSizeConfig = autoSize && isObject(autoSize) ? autoSize : undefined;
-  const minRows = !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
-  const maxRows = !isTextarea ? undefined : autoSizeConfig && isDef(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
-  const minHeight = isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined;
-  const maxHeight = isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined;
+  const autoSizeConfig = useMemo(() => autoSize && isObject(autoSize) ? autoSize : undefined, [autoSize]);
+  const minRows = useMemo(() => !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows), [autoSizeConfig, isTextarea, rows]);
+  const maxRows = useMemo(() => !isTextarea ? undefined : autoSizeConfig && isDef(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined, [autoSizeConfig, isTextarea]);
+  const minHeight = useMemo(() => isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined, [isTextarea, lineHeight, minRows, tokens.sizes.textareaMinHeight]);
+  const maxHeight = useMemo(() => isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined, [isTextarea, lineHeight, maxRows, tokens.sizes.textareaMinHeight]);
   const [textareaHeight, setTextareaHeight] = useState(minHeight);
   const formatValue = useCallback((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
   const updateValue = useCallback((next, trigger = 'onChange') => {
@@ -150,6 +287,12 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [onFocus, readOnly]);
   const handleBlur = useCallback(event => {
+    if (Platform.OS !== 'web' && clearJustHandledRef.current) {
+      clearJustHandledRef.current = false;
+      setFocused(false);
+      onBlur?.(event);
+      return;
+    }
     updateValue(value ?? '', 'onBlur');
     setFocused(false);
     onBlur?.(event);
@@ -174,28 +317,70 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     setTextareaHeight(nextHeight);
   }, [autoSize, isTextarea, maxHeight, minHeight]);
   const handleClear = useCallback(() => {
+    if (Platform.OS !== 'web') {
+      clearJustHandledRef.current = true;
+    }
     updateValue('');
     inputRef.current?.clear?.();
     inputRef.current?.focus?.();
     onClear?.();
   }, [onClear, updateValue]);
-  const renderLabel = () => {
-    if (!isRenderable(label)) return null;
-    const isPlain = isText(label);
-    const content = isPlain ? /*#__PURE__*/React.createElement(Text, {
-      style: [{
-        color: disabled ? tokens.colors.disabled : tokens.colors.label,
-        fontSize: tokens.typography.labelSize,
-        textAlign: labelAlign
-      }, labelStyle],
-      numberOfLines: 1
-    }, label, colon ? ':' : '') : label;
-    return /*#__PURE__*/React.createElement(View, {
-      style: tokens.layout.labelRow
-    }, content, isRenderable(tooltip) ? renderTooltip() : null);
+  const handleClearPressIn = useCallback(() => {
+    setPressingClear(true);
+    if (Platform.OS !== 'web') {
+      handleClear();
+    }
+  }, [handleClear]);
+  const handleClearPressOut = useCallback(() => {
+    setPressingClear(false);
+    clearJustHandledRef.current = false;
+  }, []);
+  const controlNode = isRenderable(children) ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.children, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, children) : /*#__PURE__*/React.createElement(FieldInput, {
+    inputRef: inputRef,
+    tokens: tokens,
+    isTextarea: isTextarea,
+    disabled: disabled,
+    error: error,
+    finalTextAlign: finalTextAlign,
+    lineHeight: lineHeight,
+    textareaHeight: textareaHeight,
+    minHeight: minHeight,
+    inputStyle: inputStyle,
+    value: value ?? '',
+    onChangeText: handleChangeText,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPressIn: handlePressIn,
+    rows: rows,
+    keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
+    placeholderTextColor: resolvedPlaceholderColor,
+    onContentSizeChange: handleContentSizeChange,
+    describedBy: describedBy,
+    secureTextEntry: type === 'password',
+    editable: !disabled && !readOnly,
+    restInputProps: restInputProps
+  });
+  const contentWrapperStyle = useMemo(() => [{
+    width: '100%',
+    justifyContent: alignMap[controlAlign]
+  }, contentStyle], [contentStyle, controlAlign]);
+  const renderAffix = node => {
+    if (isText(node)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.affixText, {
+          color: tokens.colors.input,
+          fontSize: tokens.typography.inputSize
+        }],
+        numberOfLines: 1
+      }, node);
+    }
+    return node;
   };
-  const renderTooltip = () => {
-    if (!isRenderable(tooltip)) return null;
+  const tooltipNode = isRenderable(tooltip) ? (() => {
     const defaultIcon = /*#__PURE__*/React.createElement(QuestionO, {
       size: tokens.sizes.icon,
       fill: tokens.colors.tooltip,
@@ -220,102 +405,22 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPress: () => Dialog.show(dialogProps),
       accessibilityRole: "button"
     }, icon);
-  };
-  const renderLeftIcon = () => {
-    if (!leftIcon) return null;
-    const content = /*#__PURE__*/React.createElement(View, {
-      style: [tokens.layout.leftIcon, {
-        marginRight: tokens.spacing.leftIconGap,
-        minWidth: tokens.sizes.icon
-      }]
-    }, leftIcon);
-    if (!onClickLeftIcon) return content;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      onPress: onClickLeftIcon,
-      accessibilityRole: "button"
-    }, content);
-  };
-  const renderRightIcon = () => {
-    if (!rightIcon) return null;
-    const node = /*#__PURE__*/React.createElement(View, {
-      style: [tokens.layout.rightIcon, {
-        paddingHorizontal: tokens.spacing.rightIconGap
-      }]
-    }, rightIcon);
-    if (!onClickRightIcon) return node;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      onPress: onClickRightIcon,
-      accessibilityRole: "button"
-    }, node);
-  };
-  const renderClearIcon = () => {
-    if (!showClear) return null;
-    const webMouseDownProps = Platform.OS === 'web' ? {
-      onMouseDown: event => {
-        event.preventDefault?.();
-        event.stopPropagation?.();
-      }
-    } : undefined;
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      style: [tokens.layout.clearIcon, {
-        paddingHorizontal: tokens.spacing.rightIconGap
-      }]
-    }, webMouseDownProps, {
-      onPressIn: () => setPressingClear(true),
-      onPressOut: () => setPressingClear(false),
-      onPress: handleClear,
-      accessibilityRole: "button"
-    }), /*#__PURE__*/React.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/React.createElement(Clear, {
-      size: tokens.sizes.clearIcon,
-      fill: tokens.colors.clear,
-      color: tokens.colors.clear
-    }));
-  };
-  const renderControl = () => {
-    if (isRenderable(children)) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [tokens.layout.children, {
-          minHeight: tokens.sizes.controlMinHeight
-        }]
-      }, children);
-    }
-    const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
-      color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
-      fontSize: tokens.typography.inputSize,
-      textAlign: finalTextAlign,
-      ...(isTextarea ? {
-        lineHeight,
-        height: textareaHeight,
-        minHeight
-      } : {
-        minHeight: tokens.sizes.controlMinHeight
-      })
-    }, inputStyle];
-    return /*#__PURE__*/React.createElement(TextInput, _extends({
-      ref: inputRef,
-      style: inputStyles,
-      value: value,
-      onChangeText: handleChangeText,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onPressIn: handlePressIn,
-      editable: !disabled && !readOnly,
-      secureTextEntry: type === 'password',
-      multiline: isTextarea,
-      numberOfLines: isTextarea ? rows : undefined,
-      keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
-      placeholderTextColor: resolvedPlaceholderColor,
-      onContentSizeChange: isTextarea ? handleContentSizeChange : undefined
-      // @ts-ignore
-      ,
-      accessibilityDescribedBy: describedBy,
-      clearButtonMode: "never"
-    }, restInputProps));
-  };
-  const renderWordLimit = () => {
-    if (!showWordLimit || maxLength === undefined || maxLength === null) {
-      return null;
-    }
+  })() : null;
+  const labelNode = isRenderable(label) ? (() => {
+    const isPlain = isText(label);
+    const content = isPlain ? /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        color: disabled ? tokens.colors.disabled : tokens.colors.label,
+        fontSize: tokens.typography.labelSize,
+        textAlign: labelAlign
+      }, labelStyle],
+      numberOfLines: 1
+    }, label, colon ? ':' : '') : label;
+    return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.labelRow
+    }, content, tooltipNode);
+  })() : null;
+  const wordLimitNode = showWordLimit && maxLength !== undefined && maxLength !== null ? (() => {
     const currentCount = (value ?? '').length;
     const content = isFunction(showWordLimit) ? showWordLimit({
       currentCount,
@@ -334,69 +439,72 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
       }, content);
     }
     return content;
-  };
-  const renderMessage = () => {
-    if (!isRenderable(errorMessage)) return null;
-    if (isText(errorMessage)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        nativeID: errorId,
-        style: [tokens.layout.message, {
-          color: tokens.colors.error,
-          fontSize: tokens.typography.messageSize,
-          textAlign: errorMessageAlign,
-          marginTop: tokens.spacing.messageMarginTop
-        }, errorMessageStyle],
-        accessibilityLiveRegion: "polite"
-      }, errorMessage);
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      nativeID: errorId,
-      style: [tokens.layout.message, {
-        alignSelf: alignMap[errorMessageAlign],
-        marginTop: tokens.spacing.messageMarginTop
-      }],
-      accessibilityLiveRegion: "polite"
-    }, errorMessage);
-  };
-  const renderIntro = () => {
-    if (!isRenderable(resolvedDescription)) return null;
-    if (isText(resolvedDescription)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        nativeID: introId,
-        style: [tokens.layout.message, {
-          color: tokens.colors.intro,
-          fontSize: tokens.typography.introSize,
-          textAlign: controlAlign,
-          marginTop: tokens.spacing.introMarginTop
-        }, introStyle]
-      }, resolvedDescription);
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      nativeID: introId,
-      style: {
-        marginTop: tokens.spacing.introMarginTop
-      }
-    }, resolvedDescription);
-  };
-  const contentWrapperStyle = [{
-    width: '100%',
-    justifyContent: alignMap[controlAlign]
-  }, contentStyle];
-  const renderAffix = node => {
-    if (isText(node)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: [tokens.layout.affixText, {
-          color: tokens.colors.input,
-          fontSize: tokens.typography.inputSize
-        }],
-        numberOfLines: 1
-      }, node);
+  })() : null;
+  const messageNode = isRenderable(errorMessage) ? isText(errorMessage) ? /*#__PURE__*/React.createElement(Text, {
+    nativeID: errorId,
+    style: [tokens.layout.message, {
+      color: tokens.colors.error,
+      fontSize: tokens.typography.messageSize,
+      textAlign: errorMessageAlign,
+      marginTop: tokens.spacing.messageMarginTop
+    }, errorMessageStyle],
+    accessibilityLiveRegion: "polite"
+  }, errorMessage) : /*#__PURE__*/React.createElement(View, {
+    nativeID: errorId,
+    style: [tokens.layout.message, {
+      alignSelf: alignMap[errorMessageAlign],
+      marginTop: tokens.spacing.messageMarginTop
+    }],
+    accessibilityLiveRegion: "polite"
+  }, errorMessage) : null;
+  const introNode = isRenderable(resolvedDescription) ? isText(resolvedDescription) ? /*#__PURE__*/React.createElement(Text, {
+    nativeID: introId,
+    style: [tokens.layout.message, {
+      color: tokens.colors.intro,
+      fontSize: tokens.typography.introSize,
+      textAlign: controlAlign,
+      marginTop: tokens.spacing.introMarginTop
+    }, introStyle]
+  }, resolvedDescription) : /*#__PURE__*/React.createElement(View, {
+    nativeID: introId,
+    style: {
+      marginTop: tokens.spacing.introMarginTop
     }
-    return node;
-  };
+  }, resolvedDescription) : null;
+  const prefixNode = prefix ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.prefix, {
+      paddingRight: tokens.spacing.prefixGap
+    }]
+  }, renderAffix(prefix)) : null;
+  const suffixNode = resolvedSuffix ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.suffix, {
+      paddingLeft: tokens.spacing.suffixGap
+    }]
+  }, renderAffix(resolvedSuffix)) : null;
+  const leftIconNode = leftIcon ? /*#__PURE__*/React.createElement(FieldSlot, {
+    onPress: onClickLeftIcon,
+    style: [tokens.layout.leftIcon, {
+      marginRight: tokens.spacing.leftIconGap,
+      minWidth: tokens.sizes.icon
+    }]
+  }, leftIcon) : null;
+  const rightIconNode = rightIcon ? /*#__PURE__*/React.createElement(FieldSlot, {
+    onPress: onClickRightIcon,
+    style: [tokens.layout.rightIcon, {
+      paddingHorizontal: tokens.spacing.rightIconGap
+    }]
+  }, rightIcon) : null;
+  const clearNode = showClear ? /*#__PURE__*/React.createElement(FieldClearButton, {
+    show: showClear,
+    tokens: tokens,
+    clearIcon: clearIcon,
+    onPressIn: handleClearPressIn,
+    onPressOut: Platform.OS === 'web' ? handleClearPressOut : undefined,
+    onPress: Platform.OS === 'web' ? handleClear : undefined
+  }) : null;
   return /*#__PURE__*/React.createElement(Cell, {
-    title: renderLabel(),
-    icon: renderLeftIcon(),
+    title: labelNode,
+    icon: undefined,
     required: required,
     border: border,
     center: center,
@@ -414,21 +522,15 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     accessibilityLabel: isText(label) ? String(label) : undefined,
     onPress: onClick,
     android_ripple: androidRipple
-  }, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.body
-  }, prefix ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.prefix, {
-      paddingRight: tokens.spacing.prefixGap
-    }]
-  }, renderAffix(prefix)) : null, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.controlWrapper, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, renderControl(), renderClearIcon()), renderRightIcon(), resolvedSuffix ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.suffix, {
-      paddingLeft: tokens.spacing.suffixGap
-    }]
-  }, renderAffix(resolvedSuffix)) : null), renderWordLimit(), renderMessage(), renderIntro());
+  }, /*#__PURE__*/React.createElement(FieldControlRow, {
+    tokens: tokens,
+    prefixNode: prefixNode,
+    leftIconNode: leftIconNode,
+    controlNode: controlNode,
+    clearNode: clearNode,
+    rightIconNode: rightIconNode,
+    suffixNode: suffixNode
+  }), wordLimitNode, messageNode, introNode);
 });
 Field.displayName = 'Field';
 export default Field;

package/dist/es/components/flex/Flex.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Platform, View } from 'react-native';
-import { FlexContext } from './FlexContext';
 import { useFlexTokens } from './tokens';
+export const FlexContext = /*#__PURE__*/React.createContext({
+  horizontalGap: 0,
+  verticalGap: 0,
+  columns: 24
+});
 const alignMap = {
   start: 'flex-start',
   center: 'center',

package/dist/es/components/flex/FlexContext.js

@@ -1,6 +1 @@
-import React from 'react';
-export const FlexContext = /*#__PURE__*/React.createContext({
-  horizontalGap: 0,
-  verticalGap: 0,
-  columns: 24
-});
+export { FlexContext } from './Flex';