react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/radio/tokens.js

@@ -0,0 +1,83 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+const createRadioTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      iconSize: 20,
+      labelPosition: 'right',
+      shape: 'round',
+      labelDisabled: false,
+      groupDisabled: false,
+      groupDirection: 'vertical'
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      labelWrapper: {
+        flexShrink: 1
+      },
+      icon: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      label: {
+        includeFontPadding: false
+      },
+      groupHorizontal: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center'
+      },
+      groupVertical: {
+        flexDirection: 'column'
+      },
+      groupItem: {
+        flexShrink: 0
+      }
+    },
+    colors: {
+      border: palette.default[400],
+      background: '#ffffff',
+      checkedBackground: palette.primary[500],
+      disabledBorder: palette.default[300],
+      disabledBackground: palette.default[100],
+      checkmark: onPrimary,
+      label: palette.default.foreground ?? '#111827',
+      labelDisabled: palette.default[400]
+    },
+    typography: {
+      fontSize: fontSize.md,
+      fontFamily: typography.fontFamily,
+      fontWeight: typography.weight.medium,
+      lineHeightMultiplier: typography.lineHeightMultiplier
+    },
+    sizing: {
+      dotScale: 0.5
+    },
+    radii: {
+      round: 999,
+      square: 2
+    },
+    borders: {
+      width: StyleSheet.hairlineWidth
+    },
+    spacing: {
+      gap: spacing.sm,
+      groupGap: spacing.sm
+    }
+  };
+};
+export const useRadioTokens = createComponentTokensHook('radio', createRadioTokens);

package/dist/es/rate/Rate.js

@@ -0,0 +1,250 @@
+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, { useRef } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useRateTokens } from './tokens';
+import { useControllableValue } from '../../hooks';
+import { clamp, parseNumber, isFiniteNumber } from '../../utils';
+const DEFAULT_CHARACTER = '★';
+export const Rate = /*#__PURE__*/React.memo(props => {
+  const {
+    tokensOverride,
+    count: countProp,
+    allowHalf: allowHalfProp,
+    size: sizeProp,
+    gutter: gutterProp,
+    color,
+    voidColor,
+    disabledColor,
+    icon,
+    voidIcon,
+    character,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    touchable: touchableProp,
+    onIconPress,
+    iconStyle,
+    itemStyle,
+    style,
+    ...rest
+  } = props;
+  const tokens = useRateTokens(tokensOverride);
+  const count = countProp ?? tokens.defaults.count;
+  const allowHalf = allowHalfProp ?? tokens.defaults.allowHalf;
+  const size = sizeProp ?? tokens.defaults.size;
+  const gutter = gutterProp ?? tokens.defaults.gutter;
+  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const readOnly = readOnlyProp ?? tokens.defaults.readOnly;
+  const touchable = touchableProp ?? tokens.defaults.touchable;
+  const resolvedCount = Math.max(1, Math.floor(parseNumber(count, tokens.defaults.count)));
+  const resolvedSize = Math.max(0, parseNumber(size, tokens.defaults.size));
+  const resolvedGutter = Math.max(0, parseNumber(gutter, tokens.defaults.gutter));
+  const [rawValue, triggerChange] = useControllableValue(props, {
+    defaultValue: 0
+  });
+  const normalizedValue = clamp(Number(rawValue ?? 0), 0, resolvedCount);
+  const displayValue = allowHalf ? readOnly ? normalizedValue : Math.floor(normalizedValue * 2) / 2 : Math.floor(normalizedValue);
+  const interactive = !disabled && !readOnly;
+  const minScore = allowHalf ? 0.5 : 1;
+  const activeTint = disabled ? disabledColor ?? tokens.colors.disabled : color ?? tokens.colors.active;
+  const voidTint = disabled ? disabledColor ?? tokens.colors.disabled : voidColor ?? tokens.colors.inactive;
+  const requestValueChange = nextScore => {
+    if (nextScore === normalizedValue) return false;
+    triggerChange(nextScore);
+    return true;
+  };
+  const evaluatePress = (index, event) => {
+    if (!interactive) return;
+    const baseScore = index + 1;
+    let nextScore = baseScore;
+    if (allowHalf && event) {
+      const nativeEvent = event.nativeEvent;
+      let x;
+      let width;
+      const locationX = nativeEvent.locationX;
+      if (isFiniteNumber(locationX)) {
+        x = locationX;
+      } else {
+        const clientX = nativeEvent.clientX;
+        if (isFiniteNumber(clientX)) {
+          const rect = event.currentTarget?.getBoundingClientRect?.();
+          if (rect) {
+            x = clientX - rect.left;
+            width = rect.width;
+          }
+        } else {
+          const offsetX = nativeEvent.offsetX;
+          if (isFiniteNumber(offsetX)) x = offsetX;
+        }
+      }
+      const threshold = (width ?? resolvedSize) / 2;
+      if (x !== undefined && x <= threshold) {
+        nextScore = baseScore - 0.5;
+      }
+    }
+    nextScore = clamp(nextScore, minScore, resolvedCount);
+    if (requestValueChange(nextScore)) onIconPress?.(nextScore);
+  };
+  const valueFromLocationX = locationX => {
+    const stride = resolvedSize + resolvedGutter;
+    if (stride <= 0) return minScore;
+    const maxX = resolvedSize * resolvedCount + resolvedGutter * (resolvedCount - 1);
+    const x = clamp(locationX, 0, maxX);
+    const index = clamp(Math.floor(x / stride), 0, resolvedCount - 1);
+    const within = x - index * stride;
+    let nextScore = index + 1;
+    if (allowHalf) {
+      const withinIcon = Math.min(within, resolvedSize);
+      if (withinIcon <= resolvedSize / 2) {
+        nextScore -= 0.5;
+      }
+    }
+    return clamp(nextScore, minScore, resolvedCount);
+  };
+  const lastMoveValueRef = useRef(null);
+  const gestureStartRef = useRef(null);
+  const gestureDirectionRef = useRef('');
+  const onStartShouldSetResponderCapture = event => {
+    if (!interactive || !touchable) return false;
+    gestureStartRef.current = {
+      pageX: event.nativeEvent.pageX,
+      pageY: event.nativeEvent.pageY
+    };
+    gestureDirectionRef.current = '';
+    lastMoveValueRef.current = null;
+    return false;
+  };
+  const onMoveShouldSetResponderCapture = event => {
+    if (!interactive || !touchable) return false;
+    const start = gestureStartRef.current;
+    if (!start) {
+      gestureStartRef.current = {
+        pageX: event.nativeEvent.pageX,
+        pageY: event.nativeEvent.pageY
+      };
+      return false;
+    }
+    const offsetX = Math.abs(event.nativeEvent.pageX - start.pageX);
+    const offsetY = Math.abs(event.nativeEvent.pageY - start.pageY);
+    if (offsetX > offsetY && offsetX > 10) {
+      gestureDirectionRef.current = 'horizontal';
+      return true;
+    }
+    if (offsetY > offsetX && offsetY > 10) {
+      gestureDirectionRef.current = 'vertical';
+    }
+    return false;
+  };
+  const handleResponderMove = event => {
+    if (!interactive || !touchable) return;
+    if (gestureDirectionRef.current !== 'horizontal') return;
+    event.preventDefault?.();
+    const nextScore = valueFromLocationX(event.nativeEvent.locationX);
+    if (lastMoveValueRef.current === nextScore) return;
+    lastMoveValueRef.current = nextScore;
+    if (requestValueChange(nextScore)) onIconPress?.(nextScore);
+  };
+  const handleResponderEnd = () => {
+    lastMoveValueRef.current = null;
+    gestureStartRef.current = null;
+    gestureDirectionRef.current = '';
+  };
+  const renderIconNode = (renderValue, tintColor) => {
+    if (/*#__PURE__*/React.isValidElement(renderValue)) {
+      const element = renderValue;
+      const defaultStyle = {
+        color: tintColor,
+        fontSize: resolvedSize,
+        lineHeight: resolvedSize,
+        textAlign: 'center',
+        includeFontPadding: false
+      };
+      const layoutStyle = {
+        width: resolvedSize,
+        height: resolvedSize,
+        flexShrink: 0
+      };
+      return /*#__PURE__*/React.cloneElement(element, {
+        style: StyleSheet.flatten([defaultStyle, element.props.style, iconStyle, layoutStyle])
+      });
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.character, iconStyle, {
+        color: tintColor,
+        fontSize: resolvedSize,
+        lineHeight: resolvedSize,
+        width: resolvedSize,
+        height: resolvedSize,
+        textAlign: 'center'
+      }]
+    }, renderValue ?? DEFAULT_CHARACTER);
+  };
+  const resolvedActiveIcon = icon ?? character ?? DEFAULT_CHARACTER;
+  const resolvedVoidIcon = voidIcon ?? character ?? DEFAULT_CHARACTER;
+  const renderItem = index => {
+    const score = index + 1;
+    const fill = clamp(displayValue - index, 0, 1);
+    const marginRight = index === resolvedCount - 1 ? 0 : resolvedGutter;
+    const isFull = fill === 1;
+    const activeIconWrapperStyle = {
+      width: fill * resolvedSize,
+      height: isFull ? resolvedSize : resolvedSize * 1.5,
+      top: isFull ? 0 : -resolvedSize * 0.25,
+      overflow: isFull ? 'visible' : 'hidden'
+    };
+    const activeIconInnerStyle = {
+      width: resolvedSize,
+      height: resolvedSize,
+      marginTop: isFull ? 0 : resolvedSize * 0.25,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'visible'
+    };
+    const iconContent = /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.iconBox, {
+        width: resolvedSize,
+        height: resolvedSize
+      }]
+    }, fill < 1 ? renderIconNode(resolvedVoidIcon, voidTint) : null, fill > 0 ? /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "none",
+      style: [tokens.layout.fill, activeIconWrapperStyle]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: activeIconInnerStyle
+    }, renderIconNode(resolvedActiveIcon, activeTint))) : null);
+    if (!interactive) {
+      return /*#__PURE__*/React.createElement(View, {
+        key: score,
+        style: [tokens.layout.item, {
+          marginRight
+        }, itemStyle],
+        accessibilityRole: "image",
+        accessibilityLabel: `评分 ${score}`
+      }, iconContent);
+    }
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: score,
+      accessibilityRole: "button",
+      accessibilityLabel: `评${allowHalf ? '半' : ''}分 ${score}`,
+      onPress: event => evaluatePress(index, event),
+      style: ({
+        pressed
+      }) => [tokens.layout.item, {
+        marginRight
+      }, itemStyle, pressed && {
+        opacity: tokens.states.pressedOpacity
+      }]
+    }, iconContent);
+  };
+  const items = [];
+  for (let i = 0; i < resolvedCount; i++) items.push(renderItem(i));
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [tokens.layout.container, style],
+    accessibilityRole: "radiogroup",
+    onStartShouldSetResponderCapture: onStartShouldSetResponderCapture,
+    onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture,
+    onResponderMove: handleResponderMove,
+    onResponderRelease: handleResponderEnd,
+    onResponderTerminate: handleResponderEnd
+  }), items);
+});
+Rate.displayName = 'Rate';
+export default Rate;

package/dist/es/rate/index.js

@@ -0,0 +1,3 @@
+import Rate from './Rate';
+export default Rate;
+export { Rate };

package/dist/es/rate/tokens.js

@@ -0,0 +1,53 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createRateTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    defaults: {
+      count: 5,
+      allowHalf: false,
+      size: fontSize.lg,
+      gutter: spacing.xs,
+      touchable: true,
+      disabled: false,
+      readOnly: false
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      item: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      iconBox: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0
+      },
+      character: {
+        includeFontPadding: false
+      },
+      fill: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        overflow: 'hidden'
+      }
+    },
+    colors: {
+      active: palette.warning[500] ?? '#fa8c16',
+      inactive: palette.default[200],
+      disabled: palette.default[400]
+    },
+    states: {
+      pressedOpacity: 0.75
+    }
+  };
+};
+export const useRateTokens = createComponentTokensHook('rate', createRateTokens);

package/dist/es/safe-area/SafeAreaClipper.js

@@ -0,0 +1,86 @@
+import React, { useContext, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+const useSafeAreaInsetsOrZero = () => {
+  const insets = useContext(SafeAreaInsetsContext);
+  return insets ?? {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  };
+};
+export const useSafeAreaClip = ({
+  enabled,
+  position = 'top',
+  topInsetStyle
+}) => {
+  const insets = useSafeAreaInsetsOrZero();
+  const isTop = position === 'top';
+  const topOffset = isTop ? insets.top : 0;
+  const clipTop = Boolean(enabled && isTop && topOffset > 0);
+  const topInset = useMemo(() => !clipTop && isTop && topOffset > 0 ? /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width: '100%',
+      height: topOffset
+    }, topInsetStyle]
+  }) : null, [clipTop, isTop, topOffset, topInsetStyle]);
+  return {
+    clipTop,
+    topInset
+  };
+};
+
+/**
+ * 通用安全区域裁切容器
+ * 逻辑：通过 padding 将内容推到安全区域下方，并利用 overflow: hidden 实现物理裁切
+ */
+export const SafeAreaClipper = ({
+  clipTop,
+  position = 'top',
+  style,
+  children
+}) => {
+  const insets = useSafeAreaInsetsOrZero();
+  const isTop = position === 'top';
+  const topOffset = isTop ? insets.top : 0;
+  const shouldClip = Boolean(clipTop && isTop && topOffset > 0);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, shouldClip && {
+      top: topOffset,
+      overflow: 'hidden'
+    }]
+  }, children);
+};
+
+/**
+ * 通用安全区域裁切 Provider
+ * - 内部统一处理裁切与顶部占位
+ * - 组件侧只需渲染 topInset 即可
+ */
+export const SafeAreaClipProvider = ({
+  enabled,
+  position = 'top',
+  style,
+  topInsetStyle,
+  children
+}) => {
+  const effectiveEnabled = Platform.OS === 'web' ? false : enabled;
+  const {
+    clipTop,
+    topInset
+  } = useSafeAreaClip({
+    enabled: effectiveEnabled,
+    position,
+    topInsetStyle
+  });
+  return /*#__PURE__*/React.createElement(SafeAreaClipper, {
+    clipTop: clipTop,
+    position: position,
+    style: style
+  }, children({
+    clipTop,
+    topInset
+  }));
+};
+export default SafeAreaClipper;

package/dist/es/safe-area/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+export { SafeAreaClipper, SafeAreaClipProvider, useSafeAreaClip } from './SafeAreaClipper';
+export const renderWithSafeArea = (children, opts, safeAreaTopRef, onSafeAreaTopLayout) => {
+  if (opts.safeArea) {
+    return /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: {
+        width: '100%'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+    ref: safeAreaTopRef,
+    style: {
+      width: '100%',
+      pointerEvents: 'none'
+    },
+    onLayout: onSafeAreaTopLayout
+  }) : null, children, opts.safeAreaInsetBottom ? /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      width: '100%',
+      pointerEvents: 'none'
+    }
+  }) : null);
+};

package/dist/es/search/Search.js

@@ -0,0 +1,196 @@
+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, useImperativeHandle, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Search as SearchIcon } from 'react-native-system-icon';
+import { useAriaPress, useControllableValue } from '../../hooks';
+import { isText } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
+import Field from '../field';
+import { useSearchTokens } from './tokens';
+const SearchComponent = (props, ref) => {
+  const locale = useLocale();
+  const {
+    tokensOverride,
+    label,
+    action,
+    actionText,
+    showAction = false,
+    shape: shapeProp,
+    background,
+    style: containerStyle,
+    fieldStyle,
+    fieldContentStyle,
+    clearTrigger,
+    clearable = true,
+    leftIcon,
+    rightIcon,
+    errorMessage,
+    onSearch,
+    onCancel,
+    onChangeText,
+    onSubmitEditing,
+    returnKeyType,
+    inputStyle,
+    align,
+    inputAlign,
+    ...restFieldProps
+  } = props;
+  const tokens = useSearchTokens(tokensOverride);
+  const shape = shapeProp ?? tokens.defaults.shape;
+  const [value, triggerChange] = useControllableValue(props, {
+    defaultValue: ''
+  });
+  const inputValue = value ?? '';
+  const resolvedInputAlign = useMemo(() => align ?? inputAlign, [align, inputAlign]);
+  const handleChange = useCallback(next => {
+    triggerChange(next);
+    onChangeText?.(next);
+  }, [onChangeText, triggerChange]);
+  const handleCancel = useCallback(() => {
+    handleChange('');
+    onCancel?.();
+  }, [handleChange, onCancel]);
+  const handleSubmit = useCallback(event => {
+    onSearch?.(inputValue);
+    onSubmitEditing?.(event);
+  }, [inputValue, onSearch, onSubmitEditing]);
+  const resolvedBackground = useMemo(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
+  const resolvedLeftIcon = useMemo(() => leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
+    size: tokens.icon.size,
+    fill: tokens.colors.icon,
+    color: tokens.colors.icon
+  }), [leftIcon, tokens.colors.icon, tokens.icon.size]);
+  const resolvedClearTrigger = useMemo(() => clearTrigger ?? tokens.defaults.clearTrigger, [clearTrigger, tokens.defaults.clearTrigger]);
+  const resolvedReturnKeyType = useMemo(() => returnKeyType ?? 'search', [returnKeyType]);
+  const shouldShowAction = !!action || showAction;
+  const isCustomActionText = /*#__PURE__*/React.isValidElement(actionText);
+  const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
+  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => handleChange('')
+  }), [handleChange]);
+  const cancelActionPress = useAriaPress({
+    disabled: !shouldRenderCancelAction,
+    onPress: handleCancel,
+    extraProps: {
+      accessibilityRole: 'button',
+      testID: 'rnsu-search-action'
+    }
+  });
+  const containerStyles = useMemo(() => [styles.container, {
+    paddingHorizontal: tokens.spacing.paddingHorizontal,
+    paddingVertical: tokens.spacing.paddingVertical,
+    backgroundColor: resolvedBackground
+  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  const contentStyles = useMemo(() => [styles.content, {
+    borderRadius: radius,
+    paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
+    paddingVertical: tokens.spacing.contentPaddingVertical,
+    backgroundColor: tokens.colors.contentBackground
+  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
+  const labelNode = useMemo(() => {
+    if (!label) return null;
+    if (isText(label)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: {
+          marginRight: tokens.spacing.labelGap,
+          color: tokens.colors.label,
+          fontSize: tokens.typography.label,
+          fontWeight: tokens.typography.labelWeight
+        }
+      }, label);
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginRight: tokens.spacing.labelGap
+      }
+    }, label);
+  }, [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
+  const actionNode = useMemo(() => {
+    if (action) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.actionWrapper, {
+          marginLeft: tokens.spacing.actionGap
+        }]
+      }, action);
+    }
+    if (!shouldShowAction) return null;
+    if (isCustomActionText) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.actionWrapper, {
+          marginLeft: tokens.spacing.actionGap
+        }]
+      }, actionText);
+    }
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      style: [styles.actionWrapper, {
+        marginLeft: tokens.spacing.actionGap,
+        opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+      }]
+    }, cancelActionPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: tokens.colors.action,
+        fontSize: tokens.typography.action,
+        fontWeight: tokens.typography.actionWeight
+      }
+    }, actionText ?? locale.cancel));
+  }, [action, actionText, cancelActionPress.interactionProps, cancelActionPress.states.pressed, isCustomActionText, locale.cancel, shouldShowAction, tokens.colors.action, tokens.opacity.actionPressed, tokens.spacing.actionGap, tokens.typography.action, tokens.typography.actionWeight]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: containerStyles
+  }, /*#__PURE__*/React.createElement(View, {
+    style: contentStyles
+  }, labelNode, /*#__PURE__*/React.createElement(View, {
+    style: styles.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Field, _extends({
+    ref: inputRef,
+    type: "search",
+    value: inputValue,
+    onChangeText: handleChange,
+    clearable: clearable,
+    clearTrigger: resolvedClearTrigger,
+    leftIcon: resolvedLeftIcon,
+    rightIcon: rightIcon,
+    center: !errorMessage,
+    errorMessage: errorMessage,
+    inputAlign: resolvedInputAlign,
+    border: false,
+    style: [styles.field, fieldStyle],
+    contentStyle: [styles.fieldContent, fieldContentStyle],
+    inputStyle: [styles.input, inputStyle],
+    onSubmitEditing: handleSubmit,
+    returnKeyType: resolvedReturnKeyType
+  }, restFieldProps)))), actionNode);
+};
+export const Search = /*#__PURE__*/React.forwardRef(SearchComponent);
+Search.displayName = 'Search';
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  fieldWrapper: {
+    flex: 1
+  },
+  field: {
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  },
+  fieldContent: {
+    paddingVertical: 0
+  },
+  input: {
+    paddingVertical: 0
+  },
+  actionWrapper: {
+    justifyContent: 'center'
+  }
+});
+export default Search;

package/dist/es/search/index.js

@@ -0,0 +1,3 @@
+import Search from './Search';
+export default Search;
+export { Search };