@0610studio/zs-ui 0.0.1

package/src/ui/ZSPressable/index.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback } from "react";
+import { FlexAlignType, Pressable, ViewProps } from "react-native";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
+import AnimatedWrapper from "../atoms/AnimatedWrapper";
+import type { ShadowLevel } from "../types";
+
+const DEFAULT_DURATION = { duration: 100 };
+
+interface ZSPressableProps extends ViewProps {
+  onPress: (value?: any) => void;
+  onLongPress?: (value?: any) => void;
+  pressedBackgroundColor?: string;
+  pressedBackgroundBorderRadius?: number;
+  flex?: number;
+  minWidth?: number;
+  isAnimation?: boolean;
+  elevationLevel?: ShadowLevel;
+  fullWidth?: boolean;
+}
+
+function ZSPressable({
+  onPress,
+  onLongPress,
+  isAnimation = true,
+  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',
+  pressedBackgroundBorderRadius = 16,
+  flex,
+  minWidth,
+  elevationLevel = 0,
+  fullWidth = false,
+  ...props
+}: ZSPressableProps) {
+  const isButtonPress = useSharedValue(0);
+
+  const boxAnimation = useAnimatedStyle(() => {
+    const scale = interpolate(
+      isButtonPress.value,
+      [0, 1],
+      [1, 0.96],
+      'clamp'
+    );
+    return {
+      transform: [{ scale: withTiming(scale, DEFAULT_DURATION) }],
+    };
+  }, []);
+
+  const handlePressStyle = useCallback(
+    (pressed: boolean) => {
+      runOnJS(() => {
+        isButtonPress.value = pressed ? 1 : 0;
+      })();
+      return {
+        backgroundColor: pressed ? pressedBackgroundColor : 'transparent',
+        borderRadius: pressedBackgroundBorderRadius,
+        flex: fullWidth ? 1 : flex,
+        minWidth: minWidth,
+        alignSelf: fullWidth ? 'stretch' : 'flex-start' as FlexAlignType,
+      };
+    },
+    [pressedBackgroundColor, pressedBackgroundBorderRadius, flex, minWidth, fullWidth]
+  );
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={({ pressed }) => handlePressStyle(pressed)}
+    >
+      <Animated.View style={boxAnimation}>
+        <AnimatedWrapper
+          isAnimation={isAnimation}
+          elevationLevel={elevationLevel}
+          style={props.style}
+        >
+          {props.children}
+        </AnimatedWrapper>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+export default ZSPressable;

package/src/ui/ZSRadioGroup/index.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, memo } from 'react';
+import { ViewProps } from 'react-native';
+import { RadioOption } from '../types';
+import ViewAtom from '../atoms/ViewAtom';
+import ZSText, { ZSTextProps } from '../ZSText';
+import ZSPressable from '../ZSPressable';
+import { useTheme } from '../../model/useThemeProvider';
+import { SvgCheck } from '../../assets/SvgCheck';
+
+function ZSRadioGroup({
+  options,
+  value,
+  onSelect,
+  containerStyle,
+  valueStyle,
+  minWidth,
+  disabled = false,
+  fullWidth = false,
+  selectStyle,
+}: {
+  options: RadioOption[];
+  value?: RadioOption;
+  onSelect: (value: RadioOption) => void;
+  containerStyle?: ViewProps;
+  valueStyle?: ZSTextProps;
+  selectStyle?: ZSTextProps;
+  minWidth?: number;
+  disabled?: boolean;
+  fullWidth?: boolean;
+}) {
+  const { palette } = useTheme();
+
+  const handleSelect = useCallback(
+    (option: RadioOption) => {
+      if (!disabled) {
+        onSelect(option);
+      }
+    },
+    [disabled, onSelect]
+  );
+
+  return (
+    <ViewAtom
+      style={{
+        flexDirection: fullWidth ? 'column' : 'row',
+        gap: 10,
+        flexWrap: fullWidth ? 'nowrap' : 'wrap',
+        width: '100%',
+      }}
+      {...containerStyle}
+    >
+      {options.map((option) => {
+        const isSelected = value?.index === option.index;
+        const setColor = isSelected ? palette.primary.light : palette.background.neutral;
+
+        return (
+          <ZSPressable
+            key={option.index}
+            onPress={() => handleSelect(option)}
+            pressedBackgroundColor="transparent"
+            flex={!minWidth ? 1 : undefined}
+            minWidth={minWidth}
+            fullWidth
+          >
+            <ViewAtom
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingVertical: 12,
+                borderWidth: 1,
+                paddingLeft: 10,
+                paddingRight: 15,
+                borderRadius: 26,
+                borderColor: setColor,
+                backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
+                flex: 1,
+              }}
+            >
+              {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}
+              {!fullWidth && (
+                <ViewAtom
+                  style={{
+                    width: 20,
+                    height: 20,
+                    borderWidth: 1,
+                    borderRadius: 10,
+                    borderColor: setColor,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <ViewAtom
+                    style={{
+                      width: 12,
+                      height: 12,
+                      borderRadius: 6,
+                      backgroundColor: setColor,
+                    }}
+                  />
+                </ViewAtom>
+              )}
+              {/* 옵션 텍스트 표시 */}
+              <ZSText style={{ marginLeft: 10 }} {...valueStyle}>
+                {option.value}
+              </ZSText>
+
+              {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}
+              {fullWidth && (
+                <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
+                  <ViewAtom
+                    style={{
+                      backgroundColor: isSelected
+                        ? palette.primary.main
+                        : palette.background.layer2,
+                      paddingHorizontal: 10,
+                      borderRadius: 50,
+                      minWidth: 42,
+                      minHeight: 24,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {isSelected ? (
+                      <SvgCheck size={18} />
+                    ) : (
+                      <ZSText typo="body.5" {...selectStyle}>
+                        선택
+                      </ZSText>
+                    )}
+                  </ViewAtom>
+                </ViewAtom>
+              )}
+            </ViewAtom>
+          </ZSPressable>
+        );
+      })}
+    </ViewAtom>
+  );
+}
+
+export default memo(ZSRadioGroup);

package/src/ui/ZSText/index.tsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { TextProps } from "react-native/types";
+import { useTheme } from "../../model/useThemeProvider";
+import { TypoOptions, TypoStyle, TextColorOptions, TypoSubStyle } from "../../theme/types";
+import TextAtom from "../atoms/TextAtom"
+
+export interface ZSTextProps extends TextProps {
+    typo?: TypoOptions;
+    color?: TextColorOptions;
+}
+
+function ZSText({
+  typo = 'body.2',
+  color = 'primary',
+  ...props
+}: ZSTextProps) {
+    const { palette, typography } = useTheme();
+    const [s01, s02] = typo.split('.') as [TypoStyle, TypoSubStyle];
+    return <TextAtom {...props} style={[typography[s01][s02], { color: palette.text[color] }, props.style]}>{props.children}</TextAtom>
+}
+
+export default memo(ZSText);

package/src/ui/ZSTextField/index.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { LayoutChangeEvent, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import ButtonClose from './ui/ButtonClose';
+import ErrorComponent from './ui/ErrorComponent';
+import { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';
+import { extractStyle } from '../../model/utils';
+import { useTheme } from '../../model/useThemeProvider';
+import ViewAtom from '../atoms/ViewAtom';
+
+export type BoxStyle = 'outline' | 'underline' | 'inbox';
+
+interface TextFieldProps {
+  typo?: TypoOptions;
+  status?: 'default' | 'error';
+  value: string;
+  onChangeText?: (text: string) => void;
+  inputBgColor?: string;
+  labelBgColor?: string;
+  label?: string;
+  labelColor?: string;
+  placeHolderColor?: string;
+  fontSize?: number;
+  borderColor?: string;
+  borderRadius?: number;
+  focusColor?: string;
+  errorColor?: string;
+  paddingHorizontal?: number;
+  borderWidth?: number;
+  errorMessage?: string;
+  textInputProps?: TextInputProps;
+  boxStyle?: BoxStyle;
+  innerBoxStyle?: 'top' | 'middle' | 'bottom';
+  disabled?: boolean;
+  allowFontScaling?: boolean;
+  isTextArea?: boolean;
+}
+
+function ZSTextField({
+  typo = 'body.2',
+  status = 'default',
+  value,
+  onChangeText,
+  label = 'Placeholder',
+  labelColor = '#757575',
+  placeHolderColor = '#B1B1B1',
+  inputBgColor = 'white',
+  labelBgColor = 'white',
+  borderWidth = 1.2,
+  borderColor = '#E7EDF0',
+  focusColor = '#007AFF',
+  errorColor = '#FF3B30',
+  borderRadius = 14,
+  paddingHorizontal = 15,
+  errorMessage,
+  textInputProps,
+  boxStyle = 'outline',
+  innerBoxStyle,
+  disabled = false,
+  allowFontScaling = true,
+  isTextArea = false,
+}: TextFieldProps): JSX.Element {
+  const { typography, palette } = useTheme();
+  const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];
+
+  // 폰트 크기 및 패밀리 추출
+  const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17, [typography, primaryStyle, subStyle]);
+  const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '', [typography, primaryStyle, subStyle]);
+
+  // 컴포넌트 상태 관리
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const labelAnimationValue = useSharedValue(0);
+  const boxHeightValue = useSharedValue(0);
+
+  // 포커스 및 값 변경 시 라벨 애니메이션 트리거
+  useEffect(() => {
+    const shouldAnimate = value !== '' || isFocused;
+    labelAnimationValue.value = withTiming(shouldAnimate ? 1 : 0, { duration: 50 });
+  }, [value, isFocused, labelAnimationValue]);
+
+  // 라벨 애니메이션 스타일
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    const labelFontSize = interpolate(
+      labelAnimationValue.value,
+      [0, 1],
+      [fontSize + (boxStyle === 'inbox' ? 5 : 0), boxStyle === 'inbox' ? 10 : 12],
+      'clamp'
+    );
+
+    const labelTop = interpolate(
+      labelAnimationValue.value,
+      [0, 1],
+      [
+        isTextArea ? 12 : 0,
+        isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 18 : 0),
+      ],
+      'clamp'
+    );
+
+    return {
+      top: labelTop,
+      fontSize: labelFontSize,
+    };
+  });
+
+  // 레이아웃 핸들러
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    if (boxHeightValue.value !== height) boxHeightValue.value = height;
+  }, [boxHeightValue]);
+
+  // 포커스 및 블러 핸들러
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
+
+  // 상태에 따른 테두리 색상 설정
+  const computedBorderColor = useMemo(() => (
+    status === 'error' ? errorColor : isFocused ? focusColor : borderColor
+  ), [status, errorColor, isFocused, focusColor, borderColor]);
+
+  // 상태에 따른 라벨 색상 설정
+  const computedLabelColor = useMemo(() => (
+    status === 'error' ? errorColor : isFocused ? focusColor : value ? labelColor : placeHolderColor
+  ), [status, errorColor, isFocused, focusColor, value, placeHolderColor, labelColor]);
+
+  // 컨테이너 스타일 정의
+  const containerStyle: StyleProp<ViewStyle> = useMemo(() => ({
+    width: '100%',
+    justifyContent: isTextArea ? 'flex-start' : 'center',
+    borderRadius,
+    paddingHorizontal,
+    backgroundColor: inputBgColor,
+    paddingTop: boxStyle === 'inbox' ? 13 : 0,
+    ...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),
+    ...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),
+    ...(innerBoxStyle === 'top' ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: borderWidth / 2 }
+      : innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }
+        : innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }
+          : {}),
+  }), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle]);
+
+  // 라벨 스타일 정의
+  const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({
+    fontSize,
+    left: paddingHorizontal,
+    backgroundColor: labelBgColor,
+    paddingHorizontal: boxStyle === 'outline' ? 5 : 0,
+    paddingVertical: 2,
+    textAlignVertical: 'center',
+    fontFamily,
+    borderRadius: boxStyle === 'outline' ? 20 : 0,
+    overflow: 'hidden',
+  }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily]);
+
+  // 텍스트 변경 핸들러
+  const handleTextChange = useCallback((text: string) => {
+    if (onChangeText) onChangeText(text);
+  }, [onChangeText]);
+
+  return (
+    <>
+      <ViewAtom
+        style={[containerStyle, { borderColor: computedBorderColor }]}
+        onLayout={handleLayout}
+        pointerEvents={disabled ? 'none' : 'auto'}
+      >
+        <TextInput
+          {...textInputProps}
+          style={[
+            { paddingTop: 7, paddingBottom: 5 },
+            textInputProps?.style,
+            { fontSize, width: '100%', paddingRight: 25, fontFamily },
+          ]}
+          value={value}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleTextChange}
+          allowFontScaling={allowFontScaling}
+          selectionColor={palette.grey[50]}
+        />
+
+        <ViewAtom pointerEvents="none" style={{ position: 'absolute' }}>
+          <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>
+            {label}
+          </Animated.Text>
+        </ViewAtom>
+
+        {(value && isFocused) && (
+          <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />
+        )}
+      </ViewAtom>
+
+      {status === 'error' && errorMessage && (
+        <ErrorComponent errorMessage={errorMessage} errorColor={errorColor} fontFamily={fontFamily} />
+      )}
+    </>
+  );
+}
+
+export default ZSTextField;

package/src/ui/ZSTextField/ui/ButtonClose.tsx

@@ -0,0 +1,20 @@
+import { TouchableOpacity } from "react-native";
+import { SvgX } from "../../../assets/SvgX";
+
+const ButtonClose = ({
+    onChangeText,
+    marginTop
+}: {
+    onChangeText?: (text: string) => void;
+    marginTop?: number
+}) => {
+    return (
+        <TouchableOpacity style={{ position: 'absolute', padding: 3, right: 15, borderRadius: 30, backgroundColor: '#e6e6e6', justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }}
+            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+            onPress={() => { onChangeText?.(''); }}>
+            <SvgX color="#5E696E" />
+        </TouchableOpacity>
+    )
+}
+
+export default ButtonClose;

package/src/ui/ZSTextField/ui/ErrorComponent.tsx

@@ -0,0 +1,25 @@
+import { Text, View } from "react-native";
+
+const ErrorComponent = ({
+    errorMessage, errorColor, fontFamily
+}:{
+    errorMessage: string;
+    errorColor: string;
+    fontFamily: string;
+}) => {
+    return (
+        <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', paddingLeft: 3, marginTop: 5 }}>
+            <View style={{ width: 18, height: 18, justifyContent: 'center', alignItems: 'center', borderRadius: 30, backgroundColor: errorColor }}>
+                <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: 'white', textAlign: 'center', textAlignVertical: 'center', fontSize: 11, fontFamily: fontFamily }}>
+                    {`!`}
+                </Text>
+            </View>
+
+            <Text allowFontScaling={false} style={{ marginLeft: 5, fontSize: 14, color: errorColor, fontFamily: fontFamily }}>
+                {errorMessage}
+            </Text>
+        </View>
+    )
+}
+
+export default ErrorComponent;

package/src/ui/ZSView/index.tsx

@@ -0,0 +1,30 @@
+import React, { memo, useMemo } from 'react';
+import { ViewProps, StyleSheet } from 'react-native';
+import { useTheme } from '../../model/useThemeProvider';
+import AnimatedWrapper from '../atoms/AnimatedWrapper';
+
+type Props = ViewProps & {
+  isAnimation?: boolean;
+};
+
+const ZSView: React.FC<Props> = ({ isAnimation = false, style, children, ...rest }) => {
+  const { palette } = useTheme();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: palette.background.base,
+        },
+      }),
+    [palette.background.base],
+  );
+
+  return (
+    <AnimatedWrapper isAnimation={isAnimation} style={[styles.container, style]} {...rest}>
+      {children}
+    </AnimatedWrapper>
+  );
+};
+
+export default memo(ZSView);

package/src/ui/atoms/AnimatedWrapper.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useCallback } from 'react';
+import { View, ViewProps, Platform } from 'react-native';
+import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
+import { useTheme } from '../../model/useThemeProvider';
+import { ShadowLevel, ShadowStyle } from '../types';
+
+const DEFAULT_DURATION = 200 as const;
+const SHADOW_DURATION = 50 as const;
+const IOS_SHADOW: readonly ShadowStyle[] = [
+  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.00 },
+  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.41 },
+  { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 2.22 },
+  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 2.62 },
+  { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 3.84 },
+  { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },
+  { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },
+  { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 4.65 },
+  { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 5.46 },
+  { shadowOffset: { width: 0, height: 5 }, shadowOpacity: 1, shadowRadius: 6.27 },
+] as const;
+
+interface AnimatedWrapperProps extends ViewProps {
+  isAnimation: boolean;
+  elevationLevel?: ShadowLevel;
+  duration?: number;
+}
+
+function AnimatedWrapper({
+  isAnimation = true,
+  elevationLevel = 0,
+  duration = DEFAULT_DURATION,
+  style,
+  children,
+  ...props
+}: AnimatedWrapperProps) {
+  const { palette } = useTheme();
+  const opacity = useSharedValue(0);
+
+  // 그림자 및 기타 스타일을 플랫폼에 맞게 미리 계산
+  const staticStyle = useMemo(() => {
+    if (Platform.OS === 'ios') {
+      const { shadowOpacity, ...rest } = IOS_SHADOW[elevationLevel];
+      return { shadowColor: palette.elevationShadow[elevationLevel], ...rest };
+    }
+    return { shadowColor: palette.elevationShadow[elevationLevel] };
+  }, [elevationLevel, palette]);
+
+  // 애니메이션 스타일 정의 (iOS 그림자 및 Android elevation 처리)
+  const animatedStyle = useAnimatedStyle(() => {
+    if (Platform.OS === 'ios') {
+      return { shadowOpacity: opacity.value * IOS_SHADOW[elevationLevel].shadowOpacity };
+    }
+    return { elevation: opacity.value * elevationLevel };
+  }, [elevationLevel]);
+
+  // 컴포넌트가 등장할 때 애니메이션 핸들링
+  const onEntering = useCallback(() => {
+    opacity.value = withTiming(1, { duration: SHADOW_DURATION });
+  }, [opacity]);
+
+  // 애니메이션 속성 메모이제이션
+  const animationProps = useMemo(() => ({
+    entering: FadeInDown.duration(duration).withCallback((finished) => {
+      'worklet';
+      if (finished) {
+        runOnJS(onEntering)();
+      }
+    }),
+    exiting: FadeOut.duration(50),
+  }), [duration, onEntering]);
+
+  // 애니메이션이 비활성화된 경우 기본 View로 렌더링
+  if (!isAnimation) {
+    return <View style={[style, staticStyle]} {...props}>{children}</View>;
+  }
+
+  // 애니메이션이 적용된 View로 렌더링
+  return (
+    <Animated.View
+      style={[style, staticStyle, animatedStyle]}
+      {...animationProps}
+      {...props}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export default React.memo(AnimatedWrapper);

package/src/ui/atoms/ScrollViewAtom.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+
+type ScrollViewAtomProps = ScrollViewProps;
+
+// scrollViewRef를 제거하고 ref로 대체합니다.
+const ScrollViewAtom = forwardRef<ScrollView, ScrollViewAtomProps>(function ScrollViewAtom(
+  { children, style, ...props }, ref
+) {
+  return (
+    <ScrollView ref={ref} {...props} style={style}>
+      {children}
+    </ScrollView>
+  );
+});
+
+export default ScrollViewAtom;

package/src/ui/atoms/TextAtom.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text, TextProps } from 'react-native';
+
+type TextAtomProps = TextProps & {
+};
+
+function TextAtom({ children, ...props }: TextAtomProps) {
+  return (
+    <Text {...props}>
+      {children}
+    </Text>
+  );
+}
+
+export default TextAtom;

package/src/ui/atoms/ViewAtom.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+type ViewAtomProps = ViewProps & {
+};
+
+function ViewAtom({ children, ...props }: ViewAtomProps) {
+  return (
+    <View {...props}>
+      {children}
+    </View>
+  );
+}
+
+export default ViewAtom;

package/src/ui/index.ts

@@ -0,0 +1,27 @@
+import ZSView from './ZSView';
+import AnimatedWrapper from './atoms/AnimatedWrapper';
+import TextAtom from './atoms/TextAtom';
+import ScrollViewAtom from './atoms/ScrollViewAtom';
+import ZSContainer from './ZSContainer';
+import ZSPressable from './ZSPressable';
+import ZSText from './ZSText';
+import ThrottleButton from './ThrottleButton';
+import ZSTextField from './ZSTextField';
+import ZSRadioGroup from './ZSRadioGroup';
+import ZSBottomButton from './ZSBottomButton';
+import * as types from './types';
+
+export {
+  ZSView,
+  AnimatedWrapper,
+  TextAtom,
+  ScrollViewAtom,
+  ZSContainer,
+  ZSPressable,
+  ZSText,
+  ThrottleButton,
+  ZSTextField,
+  ZSRadioGroup,
+  ZSBottomButton,
+  types
+};