@0610studio/zs-ui 0.0.1

package/build/ui/ZSRadioGroup/index.js

@@ -0,0 +1,82 @@
+import React, { useCallback, memo } from 'react';
+import ViewAtom from '../atoms/ViewAtom';
+import ZSText 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, }) {
+    const { palette } = useTheme();
+    const handleSelect = useCallback((option) => {
+        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);
+//# sourceMappingURL=index.js.map

package/build/ui/ZSRadioGroup/index.js.map

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

package/build/ui/ZSText/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextProps } from "react-native/types";
+import { TypoOptions, TextColorOptions } from "../../theme/types";
+export interface ZSTextProps extends TextProps {
+    typo?: TypoOptions;
+    color?: TextColorOptions;
+}
+declare function ZSText({ typo, color, ...props }: ZSTextProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ZSText>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAa,gBAAgB,EAAgB,MAAM,mBAAmB,CAAC;AAG3F,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,MAAM,CAAC,EACd,IAAe,EACf,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,WAAW,qBAIb;;AAED,wBAA4B"}

package/build/ui/ZSText/index.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { useTheme } from "../../model/useThemeProvider";
+import TextAtom from "../atoms/TextAtom";
+function ZSText({ typo = 'body.2', color = 'primary', ...props }) {
+    const { palette, typography } = useTheme();
+    const [s01, s02] = typo.split('.');
+    return <TextAtom {...props} style={[typography[s01][s02], { color: palette.text[color] }, props.style]}>{props.children}</TextAtom>;
+}
+export default memo(ZSText);
+//# sourceMappingURL=index.js.map

package/build/ui/ZSText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AAOxC,SAAS,MAAM,CAAC,EACd,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,GAAG,KAAK,EACI;IACV,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC3C,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAA8B,CAAC;IAChE,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAA;AACvI,CAAC;AAED,eAAe,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import React, { memo } from 'react';\nimport { TextProps } from \"react-native/types\";\nimport { useTheme } from \"../../model/useThemeProvider\";\nimport { TypoOptions, TypoStyle, TextColorOptions, TypoSubStyle } from \"../../theme/types\";\nimport TextAtom from \"../atoms/TextAtom\"\n\nexport interface ZSTextProps extends TextProps {\n    typo?: TypoOptions;\n    color?: TextColorOptions;\n}\n\nfunction ZSText({\n  typo = 'body.2',\n  color = 'primary',\n  ...props\n}: ZSTextProps) {\n    const { palette, typography } = useTheme();\n    const [s01, s02] = typo.split('.') as [TypoStyle, TypoSubStyle];\n    return <TextAtom {...props} style={[typography[s01][s02], { color: palette.text[color] }, props.style]}>{props.children}</TextAtom>\n}\n\nexport default memo(ZSText);\n"]}

package/build/ui/ZSTextField/index.d.ts

@@ -0,0 +1,31 @@
+import { TextInputProps } from 'react-native';
+import { TypoOptions } from '../../theme';
+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;
+}
+declare function ZSTextField({ typo, status, value, onChangeText, label, labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth, borderColor, focusColor, errorColor, borderRadius, paddingHorizontal, errorMessage, textInputProps, boxStyle, innerBoxStyle, disabled, allowFontScaling, isTextArea, }: TextFieldProps): JSX.Element;
+export default ZSTextField;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSTextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2C,cAAc,EAAwB,MAAM,cAAc,CAAC;AAI7G,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAEzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAsB,EACtB,gBAA4B,EAC5B,YAAsB,EACtB,YAAsB,EACtB,WAAiB,EACjB,WAAuB,EACvB,UAAsB,EACtB,UAAsB,EACtB,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAwI9B;AAED,eAAe,WAAW,CAAC"}

package/build/ui/ZSTextField/index.js

@@ -0,0 +1,102 @@
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { TextInput } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import ButtonClose from './ui/ButtonClose';
+import ErrorComponent from './ui/ErrorComponent';
+import { extractStyle } from '../../model/utils';
+import { useTheme } from '../../model/useThemeProvider';
+import ViewAtom from '../atoms/ViewAtom';
+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, }) {
+    const { typography, palette } = useTheme();
+    const [primaryStyle, subStyle] = typo.split('.');
+    // 폰트 크기 및 패밀리 추출
+    const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') || 17, [typography, primaryStyle, subStyle]);
+    const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') || '', [typography, primaryStyle, subStyle]);
+    // 컴포넌트 상태 관리
+    const [isFocused, setIsFocused] = useState(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) => {
+        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 = 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 = 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) => {
+        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;
+//# sourceMappingURL=index.js.map

package/build/ui/ZSTextField/index.js.map

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

package/build/ui/ZSTextField/ui/ButtonClose.d.ts

@@ -0,0 +1,6 @@
+declare const ButtonClose: ({ onChangeText, marginTop }: {
+    onChangeText?: (text: string) => void;
+    marginTop?: number;
+}) => import("react").JSX.Element;
+export default ButtonClose;
+//# sourceMappingURL=ButtonClose.d.ts.map

package/build/ui/ZSTextField/ui/ButtonClose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonClose.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,gCAGd;IACC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,gCAQA,CAAA;AAED,eAAe,WAAW,CAAC"}

package/build/ui/ZSTextField/ui/ButtonClose.js

@@ -0,0 +1,9 @@
+import { TouchableOpacity } from "react-native";
+import { SvgX } from "../../../assets/SvgX";
+const ButtonClose = ({ onChangeText, marginTop }) => {
+    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;
+//# sourceMappingURL=ButtonClose.js.map

package/build/ui/ZSTextField/ui/ButtonClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonClose.js","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,SAAS,EAIZ,EAAE,EAAE;IACD,OAAO,CACH,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,CACvM,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACtD,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACvC;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EACzB;QAAA,EAAE,gBAAgB,CAAC,CACtB,CAAA;AACL,CAAC,CAAA;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { TouchableOpacity } from \"react-native\";\nimport { SvgX } from \"../../../assets/SvgX\";\n\nconst ButtonClose = ({\n    onChangeText,\n    marginTop\n}: {\n    onChangeText?: (text: string) => void;\n    marginTop?: number\n}) => {\n    return (\n        <TouchableOpacity style={{ position: 'absolute', padding: 3, right: 15, borderRadius: 30, backgroundColor: '#e6e6e6', justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }}\n            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}\n            onPress={() => { onChangeText?.(''); }}>\n            <SvgX color=\"#5E696E\" />\n        </TouchableOpacity>\n    )\n}\n\nexport default ButtonClose;"]}

package/build/ui/ZSTextField/ui/ErrorComponent.d.ts

@@ -0,0 +1,7 @@
+declare const ErrorComponent: ({ errorMessage, errorColor, fontFamily }: {
+    errorMessage: string;
+    errorColor: string;
+    fontFamily: string;
+}) => import("react").JSX.Element;
+export default ErrorComponent;
+//# sourceMappingURL=ErrorComponent.d.ts.map

package/build/ui/ZSTextField/ui/ErrorComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorComponent.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ErrorComponent.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,6CAElB;IACE,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB,gCAcA,CAAA;AAED,eAAe,cAAc,CAAC"}

package/build/ui/ZSTextField/ui/ErrorComponent.js

@@ -0,0 +1,16 @@
+import { Text, View } from "react-native";
+const ErrorComponent = ({ errorMessage, errorColor, fontFamily }) => {
+    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;
+//# sourceMappingURL=ErrorComponent.js.map

package/build/ui/ZSTextField/ui/ErrorComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorComponent.js","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ErrorComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,cAAc,GAAG,CAAC,EACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAKvC,EAAE,EAAE;IACD,OAAO,CACH,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CACrG;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC,CAClI;gBAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CACjK;oBAAA,CAAC,GAAG,CACR;gBAAA,EAAE,IAAI,CACV;YAAA,EAAE,IAAI,CAEN;;YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAC7G;gBAAA,CAAC,YAAY,CACjB;YAAA,EAAE,IAAI,CACV;QAAA,EAAE,IAAI,CAAC,CACV,CAAA;AACL,CAAC,CAAA;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { Text, View } from \"react-native\";\n\nconst ErrorComponent = ({\n    errorMessage, errorColor, fontFamily\n}:{\n    errorMessage: string;\n    errorColor: string;\n    fontFamily: string;\n}) => {\n    return (\n        <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', paddingLeft: 3, marginTop: 5 }}>\n            <View style={{ width: 18, height: 18, justifyContent: 'center', alignItems: 'center', borderRadius: 30, backgroundColor: errorColor }}>\n                <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: 'white', textAlign: 'center', textAlignVertical: 'center', fontSize: 11, fontFamily: fontFamily }}>\n                    {`!`}\n                </Text>\n            </View>\n\n            <Text allowFontScaling={false} style={{ marginLeft: 5, fontSize: 14, color: errorColor, fontFamily: fontFamily }}>\n                {errorMessage}\n            </Text>\n        </View>\n    )\n}\n\nexport default ErrorComponent;"]}

package/build/ui/ZSView/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+type Props = ViewProps & {
+    isAnimation?: boolean;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAIrD,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;AAsBF,wBAA4B"}

package/build/ui/ZSView/index.js

@@ -0,0 +1,17 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../model/useThemeProvider';
+import AnimatedWrapper from '../atoms/AnimatedWrapper';
+const ZSView = ({ 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);
+//# sourceMappingURL=index.js.map

package/build/ui/ZSView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAMvD,MAAM,MAAM,GAAoB,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,UAAU,CAAC,MAAM,CAAC;QAChB,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI;SACzC;KACF,CAAC,EACJ,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1B,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CACpF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import React, { memo, useMemo } from 'react';\nimport { ViewProps, StyleSheet } from 'react-native';\nimport { useTheme } from '../../model/useThemeProvider';\nimport AnimatedWrapper from '../atoms/AnimatedWrapper';\n\ntype Props = ViewProps & {\n  isAnimation?: boolean;\n};\n\nconst ZSView: React.FC<Props> = ({ isAnimation = false, style, children, ...rest }) => {\n  const { palette } = useTheme();\n\n  const styles = useMemo(\n    () =>\n      StyleSheet.create({\n        container: {\n          backgroundColor: palette.background.base,\n        },\n      }),\n    [palette.background.base],\n  );\n\n  return (\n    <AnimatedWrapper isAnimation={isAnimation} style={[styles.container, style]} {...rest}>\n      {children}\n    </AnimatedWrapper>\n  );\n};\n\nexport default memo(ZSView);\n"]}

package/build/ui/atoms/AnimatedWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { ShadowLevel } from '../types';
+interface AnimatedWrapperProps extends ViewProps {
+    isAnimation: boolean;
+    elevationLevel?: ShadowLevel;
+    duration?: number;
+}
+declare function AnimatedWrapper({ isAnimation, elevationLevel, duration, style, children, ...props }: AnimatedWrapperProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AnimatedWrapper>;
+export default _default;
+//# sourceMappingURL=AnimatedWrapper.d.ts.map

package/build/ui/atoms/AnimatedWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAe,MAAM,UAAU,CAAC;AAiBpD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAoDtB;;AAED,wBAA2C"}

package/build/ui/atoms/AnimatedWrapper.js

@@ -0,0 +1,61 @@
+import React, { useMemo, useCallback } from 'react';
+import { View, Platform } from 'react-native';
+import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
+import { useTheme } from '../../model/useThemeProvider';
+const DEFAULT_DURATION = 200;
+const SHADOW_DURATION = 50;
+const IOS_SHADOW = [
+    { 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 },
+];
+function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DEFAULT_DURATION, style, children, ...props }) {
+    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);
+//# sourceMappingURL=AnimatedWrapper.js.map

package/build/ui/atoms/AnimatedWrapper.js.map

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

package/build/ui/atoms/ScrollViewAtom.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+declare const ScrollViewAtom: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
+export default ScrollViewAtom;
+//# sourceMappingURL=ScrollViewAtom.d.ts.map

package/build/ui/atoms/ScrollViewAtom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollViewAtom.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/ScrollViewAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK3D,QAAA,MAAM,cAAc,oFAQlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/build/ui/atoms/ScrollViewAtom.js

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

package/build/ui/atoms/ScrollViewAtom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollViewAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/ScrollViewAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAI3D,kCAAkC;AAClC,MAAM,cAAc,GAAG,UAAU,CAAkC,SAAS,cAAc,CACxF,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAElC,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAC5C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\nimport { ScrollView, ScrollViewProps } from 'react-native';\n\ntype ScrollViewAtomProps = ScrollViewProps;\n\n// scrollViewRef를 제거하고 ref로 대체합니다.\nconst ScrollViewAtom = forwardRef<ScrollView, ScrollViewAtomProps>(function ScrollViewAtom(\n  { children, style, ...props }, ref\n) {\n  return (\n    <ScrollView ref={ref} {...props} style={style}>\n      {children}\n    </ScrollView>\n  );\n});\n\nexport default ScrollViewAtom;\n"]}

package/build/ui/atoms/TextAtom.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextProps } from 'react-native';
+type TextAtomProps = TextProps & {};
+declare function TextAtom({ children, ...props }: TextAtomProps): React.JSX.Element;
+export default TextAtom;
+//# sourceMappingURL=TextAtom.d.ts.map

package/build/ui/atoms/TextAtom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAtom.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/TextAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,aAAa,GAAG,SAAS,GAAG,EAChC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAMtD;AAED,eAAe,QAAQ,CAAC"}

package/build/ui/atoms/TextAtom.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from 'react-native';
+function TextAtom({ children, ...props }) {
+    return (<Text {...props}>
+      {children}
+    </Text>);
+}
+export default TextAtom;
+//# sourceMappingURL=TextAtom.js.map

package/build/ui/atoms/TextAtom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/TextAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAK/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACrD,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CACd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport { Text, TextProps } from 'react-native';\n\ntype TextAtomProps = TextProps & {\n};\n\nfunction TextAtom({ children, ...props }: TextAtomProps) {\n  return (\n    <Text {...props}>\n      {children}\n    </Text>\n  );\n}\n\nexport default TextAtom;\n"]}

package/build/ui/atoms/ViewAtom.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+type ViewAtomProps = ViewProps & {};
+declare function ViewAtom({ children, ...props }: ViewAtomProps): React.JSX.Element;
+export default ViewAtom;
+//# sourceMappingURL=ViewAtom.d.ts.map

package/build/ui/atoms/ViewAtom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewAtom.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/ViewAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,aAAa,GAAG,SAAS,GAAG,EAChC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAMtD;AAED,eAAe,QAAQ,CAAC"}

package/build/ui/atoms/ViewAtom.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from 'react-native';
+function ViewAtom({ children, ...props }) {
+    return (<View {...props}>
+      {children}
+    </View>);
+}
+export default ViewAtom;
+//# sourceMappingURL=ViewAtom.js.map

package/build/ui/atoms/ViewAtom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/ViewAtom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAK/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACrD,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CACd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport { View, ViewProps } from 'react-native';\n\ntype ViewAtomProps = ViewProps & {\n};\n\nfunction ViewAtom({ children, ...props }: ViewAtomProps) {\n  return (\n    <View {...props}>\n      {children}\n    </View>\n  );\n}\n\nexport default ViewAtom;\n"]}