@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/composites/wui-icon-link/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  'container': {
+    padding: Spacing.xs,
+    borderRadius: BorderRadius.xxs,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  'container-sm': {},
+  'container-md': {
+    height: 32,
+    width: 32
+  },
+  'container-lg': {
+    height: 40,
+    width: 40
+  }
+});

package/src/composites/wui-input-element/index.tsx

@@ -0,0 +1,40 @@
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface InputElementProps {
+  icon: IconType;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function InputElement({ icon, disabled, onPress, style }: InputElementProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-020'],
+    Theme['gray-glass-030']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      hitSlop={10}
+      style={[
+        styles.container,
+        { backgroundColor: disabled ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+    >
+      <Icon name={icon} size="xxs" color={'bg-200' as ColorType} />
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-input-element/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 18,
+    width: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius['4xs']
+  }
+});

package/src/composites/wui-input-numeric/index.tsx

@@ -0,0 +1,49 @@
+import { TextInput } from 'react-native';
+import { InputText, type InputTextProps } from '../wui-input-text';
+import styles from './styles';
+
+export interface InputNumericProps extends InputTextProps {
+  disabled?: boolean;
+  onChangeText?: InputTextProps['onChangeText'];
+  onSubmitEditing?: InputTextProps['onSubmitEditing'];
+  style?: InputTextProps['inputStyle'];
+  inputRef?: React.Ref<TextInput>;
+  value?: string;
+  onKeyPress?: InputTextProps['onKeyPress'];
+}
+
+export function InputNumeric({
+  disabled,
+  onChangeText,
+  onSubmitEditing,
+  style,
+  inputRef,
+  value,
+  onKeyPress,
+  ...props
+}: InputNumericProps) {
+  const _onChangeText = (text: string) => {
+    const isNumber = /^\d*$/.test(text);
+    if (isNumber) {
+      onChangeText?.(text);
+    }
+  };
+
+  return (
+    <InputText
+      disabled={disabled}
+      onChangeText={_onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      keyboardType="number-pad"
+      returnKeyType="done"
+      inputMode="numeric"
+      size="xs"
+      textAlign="center"
+      inputStyle={[styles.input, style]}
+      ref={inputRef}
+      value={value}
+      onKeyPress={onKeyPress}
+      {...props}
+    />
+  );
+}

package/src/composites/wui-input-numeric/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  input: {
+    fontSize: 20,
+    fontWeight: '500',
+    textAlign: 'center'
+  }
+});

package/src/composites/wui-input-text/index.tsx

@@ -0,0 +1,142 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  TextInput,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputFocusEventData,
+  type TextInputProps,
+  type ViewStyle
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { IconType, SizeType } from '../../utils/TypesUtil';
+import styles, { outerBorderRadius } from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+interface InputRef {
+  clear: () => void;
+  focus: () => void;
+  blur: () => void;
+}
+
+export type InputTextProps = TextInputProps & {
+  inputStyle?: TextInputProps['style'];
+  icon?: IconType;
+  disabled?: boolean;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xxs'>;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const InputText = forwardRef<InputRef, InputTextProps>(
+  (
+    {
+      children,
+      placeholder,
+      inputStyle,
+      icon,
+      size = 'sm',
+      disabled,
+      returnKeyType,
+      onBlur,
+      onFocus,
+      style,
+      ...rest
+    }: InputTextProps,
+    ref
+  ) => {
+    const inputRef = useRef<TextInput>(null);
+    const Theme = useTheme();
+    const { animatedValue, valueRef, setStartValue, setEndValue } = useAnimatedValue(
+      Theme['gray-glass-002'],
+      Theme['gray-glass-005'],
+      100
+    );
+    const outerRadius = outerBorderRadius[size];
+
+    useImperativeHandle(ref, () => ({
+      clear: () => {
+        if (inputRef.current) {
+          inputRef.current.clear();
+        }
+      },
+      focus: () => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      blur: () => {
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
+      }
+    }));
+
+    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setStartValue();
+      onBlur?.(e);
+    };
+
+    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setEndValue();
+      onFocus?.(e);
+    };
+
+    const innerBorder = valueRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [Theme['gray-glass-005'], Theme['accent-100']]
+    });
+
+    const outerBorder = valueRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['transparent', Theme['accent-glass-015']]
+    });
+
+    return (
+      <>
+        <AnimatedPressable
+          style={[
+            styles.outerBorder,
+            { borderColor: outerBorder, borderRadius: outerRadius },
+            style
+          ]}
+          disabled={disabled}
+          onPress={() => inputRef.current?.focus()}
+        >
+          <Animated.View
+            style={[
+              styles[`${size}Container`],
+              { backgroundColor: animatedValue, borderColor: innerBorder },
+              disabled && { backgroundColor: Theme['gray-glass-002'] }
+            ]}
+          >
+            {icon ? <Icon name={icon} size="md" color="fg-275" style={styles.icon} /> : null}
+            <TextInput
+              ref={inputRef}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              placeholder={placeholder}
+              placeholderTextColor={Theme['fg-275']}
+              returnKeyType={returnKeyType}
+              style={[styles.input, { color: Theme['fg-100'] }, inputStyle]}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoComplete="off"
+              spellCheck={false}
+              selectionColor={Theme['accent-100']}
+              underlineColorAndroid="transparent"
+              selectTextOnFocus={false}
+              editable={!disabled}
+              testID="wui-input-text"
+              {...rest}
+            />
+            {children}
+          </Animated.View>
+        </AnimatedPressable>
+      </>
+    );
+  }
+);

package/src/composites/wui-input-text/styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+const baseStyle = {
+  flexDirection: 'row',
+  height: 40,
+  borderRadius: BorderRadius.xxs,
+  alignItems: 'center',
+  paddingHorizontal: Spacing.xs,
+  borderWidth: StyleSheet.hairlineWidth
+} as ViewStyle;
+
+export const outerBorderRadius = {
+  xs: BorderRadius.s,
+  sm: BorderRadius.xs,
+  md: BorderRadius.s
+};
+
+export default StyleSheet.create({
+  // Used for numeric input
+  xsContainer: {
+    ...baseStyle,
+    borderRadius: BorderRadius.xs,
+    height: 50,
+    width: 50
+  },
+  smContainer: {
+    ...baseStyle
+  },
+  mdContainer: {
+    ...baseStyle,
+    height: 56,
+    borderRadius: BorderRadius.xs
+  },
+  outerBorder: {
+    flexGrow: 1,
+    borderWidth: 4,
+    borderRadius: BorderRadius.xs,
+    borderColor: 'transparent'
+  },
+  input: {
+    flex: 1,
+    marginHorizontal: Spacing['4xs'],
+    fontSize: 16,
+    fontWeight: '400'
+  },
+  icon: {
+    marginLeft: Spacing['3xs'],
+    marginRight: Spacing.xs
+  }
+});

package/src/composites/wui-link/index.tsx

@@ -0,0 +1,69 @@
+import {
+  Animated,
+  Pressable,
+  type PressableProps as NativeProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType, SizeType } from '../../utils/TypesUtil';
+import styles from './styles';
+import { FlexView } from '../../layout/wui-flex';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type LinkProps = NativeProps & {
+  children: string;
+  disabled?: boolean;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  style?: StyleProp<ViewStyle>;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  color?: ColorType;
+};
+
+export function Link({
+  children,
+  disabled,
+  iconLeft,
+  iconRight,
+  onPress,
+  style,
+  size = 'sm',
+  color,
+  ...rest
+}: LinkProps) {
+  const Theme = useTheme();
+  const _color = (disabled ? 'fg-300' : color ?? 'accent-100') as ColorType;
+  const iconSize = size === 'md' ? 'sm' : 'xs';
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    'transparent',
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles[`${size}Container`], { backgroundColor: animatedValue }, style]}
+      {...rest}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+        {iconLeft ? (
+          <Icon color={_color} name={iconLeft} size={iconSize} style={styles.iconLeft} />
+        ) : null}
+        <Text variant={size === 'md' ? 'paragraph-600' : 'small-600'} color={_color}>
+          {children}
+        </Text>
+        {iconRight ? (
+          <Icon color={_color} name={iconRight} size={iconSize} style={styles.iconRight} />
+        ) : null}
+      </FlexView>
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-link/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  smContainer: {
+    paddingVertical: Spacing['4xs'],
+    paddingHorizontal: Spacing['2xs'],
+    borderRadius: BorderRadius['3xs']
+  },
+  mdContainer: {
+    paddingVertical: Spacing['4xs'],
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius['3xs']
+  },
+  iconRight: {
+    marginLeft: Spacing['2xs']
+  },
+  iconLeft: {
+    marginRight: Spacing['2xs']
+  }
+});

package/src/composites/wui-list-item/index.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import {
+  View,
+  Pressable,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+  type ImageStyle,
+  type ImageProps
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType } from '../../utils/TypesUtil';
+import { IconBox } from '../wui-icon-box';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListItemProps {
+  icon?: IconType;
+  iconColor?: ColorType;
+  iconBackgroundColor?: ColorType;
+  iconBorderColor?: ColorType;
+  backgroundColor?: ColorType;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
+  imageContainerStyle?: StyleProp<ViewStyle>;
+  chevron?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function ListItem({
+  children,
+  icon,
+  imageSrc,
+  imageProps,
+  imageHeaders,
+  imageStyle,
+  imageContainerStyle,
+  iconColor = 'fg-200',
+  iconBackgroundColor,
+  iconBorderColor = 'gray-glass-005',
+  chevron,
+  loading,
+  disabled,
+  onPress,
+  style,
+  contentStyle,
+  testID,
+  backgroundColor = 'gray-glass-002'
+}: ListItemProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme[backgroundColor],
+    Theme['gray-glass-010']
+  );
+
+  function visualTemplate() {
+    if (imageSrc) {
+      return (
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme['gray-glass-005'] },
+            imageContainerStyle
+          ]}
+        >
+          <Image
+            {...imageProps}
+            headers={imageHeaders}
+            source={imageSrc}
+            style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
+          />
+        </View>
+      );
+    } else if (icon) {
+      return (
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme[iconBorderColor] },
+            imageContainerStyle
+          ]}
+        >
+          <IconBox
+            icon={icon}
+            iconColor={iconColor}
+            size="md"
+            background
+            backgroundColor={iconBackgroundColor}
+          />
+        </View>
+      );
+    }
+
+    return null;
+  }
+
+  function rightTemplate() {
+    if (loading) {
+      return <LoadingSpinner color="fg-200" size="lg" style={styles.rightIcon} />;
+    } else if (chevron) {
+      return <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />;
+    }
+
+    return null;
+  }
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || loading}
+      style={[
+        styles.container,
+        { backgroundColor: disabled || loading ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      {visualTemplate()}
+      <View style={[styles.content, contentStyle]}>{children}</View>
+      {rightTemplate()}
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-list-item/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 56,
+    width: '100%',
+    padding: Spacing.s,
+    alignItems: 'center',
+    borderRadius: BorderRadius.xs
+  },
+  content: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    paddingHorizontal: Spacing.s,
+    alignItems: 'center'
+  },
+  imageContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: BorderRadius.full,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 32,
+    height: 32,
+    borderRadius: BorderRadius.full
+  },
+  disabledImage: {
+    opacity: 0.4
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
+  }
+});

package/src/composites/wui-list-item-loader/index.tsx

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+import { useTheme } from '../../hooks/useTheme';
+import { Shimmer } from '../../components/wui-shimmer';
+import { FlexView } from '../../layout/wui-flex';
+import styles from './styles';
+
+export interface ListItemLoaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ListItemLoader({ style }: ListItemLoaderProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      alignItems="center"
+      flexDirection="row"
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+    >
+      <Shimmer
+        height={WalletImageSize.sm}
+        width={WalletImageSize.sm}
+        borderRadius={BorderRadius.xxs}
+      />
+      <Shimmer height={22} width={80} borderRadius={6} style={styles.text} />
+    </FlexView>
+  );
+}

package/src/composites/wui-list-item-loader/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.xs,
+    padding: Spacing.xs
+  },
+  text: {
+    marginLeft: Spacing.s
+  }
+});