@0610studio/zs-ui 0.18.0 → 0.18.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAA+B,WAAW,EAAa,gBAAgB,EAAiC,MAAM,mBAAmB,CAAC;AAUzI,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,KAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,qBAcb;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AAI3F,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,MAAM,CAAC,EACd,IAAe,EACf,KAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,qBAUb;;AAED,wBAAkC"}

package/build/ui/ZSText/index.js

@@ -1,24 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { useTheme } from "../../context/ThemeContext";
+import { resolveTextColor } from "../../theme/resolveColor";
 import TextAtom from "../atoms/TextAtom";
-function isColorMap(value) {
-    return typeof value === 'object' && value !== null;
-}
 function ZSText({ typo = 'body.2', color = 'base', ...props }) {
     const { palette, typography } = useTheme();
     const [s01, s02] = typo.split('.');
-    const [c01, c02] = color.split('.');
-    const textColor = (() => {
-        if (!c02)
-            return palette.text[c01];
-        if (c01 === 'text')
-            return palette.text[c02];
-        if (c01 === 'background')
-            return palette.background[c02];
-        const semanticPalette = palette[c01];
-        return isColorMap(semanticPalette) ? semanticPalette[c02] : undefined;
-    })();
-    return _jsx(TextAtom, { ...props, style: [typography[s01][s02], { color: textColor }, props.style], children: props.children });
+    const textColor = resolveTextColor(palette, color);
+    return (_jsx(TextAtom, { ...props, style: [typography[s01][s02], { color: textColor }, props.style], children: props.children }));
 }
-export default ZSText;
+export default React.memo(ZSText);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AAKxC,SAAS,UAAU,CAAC,KAAc;IAChC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC;AACrD,CAAC;AAOD,SAAS,MAAM,CAAC,EACd,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,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,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAiC,CAAC;IACpE,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE;QACtB,IAAI,CAAC,GAAG;YAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAA0B,CAAC,CAAC;QAC1D,IAAI,GAAG,KAAK,MAAM;YAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAA0B,CAAC,CAAC;QACpE,IAAI,GAAG,KAAK,YAAY;YAAE,OAAO,OAAO,CAAC,UAAU,CAAC,GAA4B,CAAC,CAAC;QAElF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAyB,CAAC,CAAC;QAC3D,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,GAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxF,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,YAAG,KAAK,CAAC,QAAQ,GAAY,CAAA;AAC7H,CAAC;AAED,eAAe,MAAM,CAAC","sourcesContent":["import React from \"react\";\nimport { TextProps } from \"react-native\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { ColorPalette, ThemeTextType, TypoOptions, TypoStyle, TypoColorOptions, TypoSubStyle, ThemeBackground } from \"../../theme/types\";\nimport TextAtom from \"../atoms/TextAtom\"\n\ntype SemanticPaletteKey = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'information' | 'grey';\ntype PaletteShade = keyof ColorPalette;\n\nfunction isColorMap(value: unknown): value is Record<string, string> {\n  return typeof value === 'object' && value !== null;\n}\n\nexport interface ZSTextProps extends TextProps {\n    typo?: TypoOptions;\n    color?: TypoColorOptions;\n}\n\nfunction ZSText({\n  typo = 'body.2',\n  color = 'base',\n  ...props\n}: ZSTextProps) {\n    const { palette, typography } = useTheme();\n    const [s01, s02] = typo.split('.') as [TypoStyle, TypoSubStyle];\n    const [c01, c02] = color.split('.') as [string, string | undefined];\n    const textColor = (() => {\n      if (!c02) return palette.text[c01 as keyof ThemeTextType];\n      if (c01 === 'text') return palette.text[c02 as keyof ThemeTextType];\n      if (c01 === 'background') return palette.background[c02 as keyof ThemeBackground];\n\n      const semanticPalette = palette[c01 as SemanticPaletteKey];\n      return isColorMap(semanticPalette) ? semanticPalette[c02 as PaletteShade] : undefined;\n    })();\n\n    return <TextAtom {...props} style={[typography[s01][s02], { color: textColor }, props.style]}>{props.children}</TextAtom>\n}\n\nexport default ZSText;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSText/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAOzC,SAAS,MAAM,CAAC,EACd,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,KAAK,EACI;IACZ,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,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,QAAQ,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,YAClF,KAAK,CAAC,QAAQ,GACN,CACZ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { TextProps } from \"react-native\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { TypoColorOptions, TypoOptions, TypoStyle, TypoSubStyle } from \"../../theme/types\";\nimport { resolveTextColor } from \"../../theme/resolveColor\";\nimport TextAtom from \"../atoms/TextAtom\";\n\nexport interface ZSTextProps extends TextProps {\n  typo?: TypoOptions;\n  color?: TypoColorOptions;\n}\n\nfunction ZSText({\n  typo = 'body.2',\n  color = 'base',\n  ...props\n}: ZSTextProps) {\n  const { palette, typography } = useTheme();\n  const [s01, s02] = typo.split('.') as [TypoStyle, TypoSubStyle];\n  const textColor = resolveTextColor(palette, color);\n\n  return (\n    <TextAtom {...props} style={[typography[s01][s02], { color: textColor }, props.style]}>\n      {props.children}\n    </TextAtom>\n  );\n}\n\nexport default React.memo(ZSText);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0C,SAAS,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AAKzE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAMzD,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,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,QAAA,MAAM,WAAW,sGAkPf,CAAC;AAIH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0C,SAAS,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AAKzE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAMzD,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,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,QAAA,MAAM,WAAW,sGA8Qf,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/build/ui/ZSTextField/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback, useState, forwardRef, useEffect, useRef } from 'react';
 import { Platform, TextInput } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, ReduceMotion } from 'react-native-reanimated';
+import Animated, { interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming, ReduceMotion } from 'react-native-reanimated';
 import ButtonClose from './ui/ButtonClose';
 import ErrorComponent from './ui/ErrorComponent';
 import { extractStyle } from '../../model/utils';
@@ -16,11 +16,13 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
     const fErrorColor = errorColor || palette.danger.main;
     const fontSize = extractStyle(typography[primaryStyle][subStyle], 'fontSize') || 17;
     const fontFamily = extractStyle(typography[primaryStyle][subStyle], 'fontFamily') || '';
-    const floatProgress = useSharedValue(value !== '' ? 1 : 0);
-    const [isFocusedForUI, setIsFocusedForUI] = useState(false);
-    const boxHeightValue = useSharedValue(0);
     const isError = status === 'error';
     const hasValue = value !== '';
+    const floatProgress = useSharedValue(hasValue ? 1 : 0);
+    const focusProgress = useSharedValue(0);
+    const errorProgress = useSharedValue(isError ? 1 : 0);
+    const boxHeightValue = useSharedValue(0);
+    const [isFocusedForUI, setIsFocusedForUI] = useState(false);
     const isFocusedRef = useRef(false);
     const hasValueRef = useRef(hasValue);
     hasValueRef.current = hasValue;
@@ -30,12 +32,26 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             floatProgress.value = withTiming(target, TIMING_CONFIG);
         }
     }, [hasValue]);
+    useEffect(() => {
+        const target = isError ? 1 : 0;
+        if (errorProgress.value !== target) {
+            errorProgress.value = withTiming(target, TIMING_CONFIG);
+        }
+    }, [isError]);
     const animationConstants = useMemo(() => ({
         baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),
         targetFontSize: boxStyle === 'inbox' ? 10 : 11,
         baseTop: isTextArea ? 12 : 0,
         targetTopOffset: boxStyle === 'inbox' ? 17 : 2,
     }), [fontSize, boxStyle, isTextArea]);
+    const colorConfig = useMemo(() => ({
+        primaryColor: focusColor || palette.primary.main,
+        defaultBorderColor: borderColor || palette.grey[30],
+        defaultLabelColor: labelColor || palette.text.secondary,
+        placeholderColor: placeHolderColor || palette.grey[40],
+        errorColor: fErrorColor,
+    }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);
+    const nonFocusLabelColor = useMemo(() => (hasValue ? colorConfig.defaultLabelColor : colorConfig.placeholderColor), [hasValue, colorConfig.defaultLabelColor, colorConfig.placeholderColor]);
     const animatedLabelStyle = useAnimatedStyle(() => {
         const progress = floatProgress.value;
         const labelTranslateY = interpolate(progress, [0, 1], [
@@ -43,22 +59,35 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             isTextArea ? -24 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset - animationConstants.baseTop,
         ], 'clamp');
         const labelScale = interpolate(progress, [0, 1], [1, animationConstants.targetFontSize / animationConstants.baseFontSize], 'clamp');
+        const focusedColor = interpolateColor(focusProgress.value, [0, 1], [nonFocusLabelColor, colorConfig.primaryColor]);
+        const color = interpolateColor(errorProgress.value, [0, 1], [focusedColor, colorConfig.errorColor]);
         return {
+            color,
             transform: [
                 { translateY: labelTranslateY },
                 { scale: labelScale },
             ],
         };
-    }, [animationConstants, isTextArea]);
+    }, [animationConstants, isTextArea, nonFocusLabelColor, colorConfig.primaryColor, colorConfig.errorColor]);
+    const animatedBorderStyle = useAnimatedStyle(() => {
+        const focusedColor = interpolateColor(focusProgress.value, [0, 1], [colorConfig.defaultBorderColor, colorConfig.primaryColor]);
+        const borderColor = interpolateColor(errorProgress.value, [0, 1], [focusedColor, colorConfig.errorColor]);
+        return { borderColor };
+    }, [colorConfig.defaultBorderColor, colorConfig.primaryColor, colorConfig.errorColor]);
     const handleLayout = useCallback((event) => {
         const { height } = event.nativeEvent.layout;
-        boxHeightValue.value = height;
+        if (boxHeightValue.value !== height) {
+            boxHeightValue.value = height;
+        }
     }, []);
     const handleFocus = useCallback(() => {
         isFocusedRef.current = true;
         if (floatProgress.value !== 1) {
             floatProgress.value = withTiming(1, TIMING_CONFIG);
         }
+        if (focusProgress.value !== 1) {
+            focusProgress.value = withTiming(1, TIMING_CONFIG);
+        }
         setIsFocusedForUI(true);
     }, []);
     const handleBlur = useCallback(() => {
@@ -67,27 +96,11 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         if (floatProgress.value !== target) {
             floatProgress.value = withTiming(target, TIMING_CONFIG);
         }
+        if (focusProgress.value !== 0) {
+            focusProgress.value = withTiming(0, TIMING_CONFIG);
+        }
         setIsFocusedForUI(false);
     }, []);
-    const colorConfig = useMemo(() => ({
-        primaryColor: focusColor || palette.primary.main,
-        defaultBorderColor: borderColor || palette.grey[30],
-        defaultLabelColor: labelColor || palette.text.secondary,
-        placeholderColor: placeHolderColor || palette.grey[40],
-        errorColor: fErrorColor,
-    }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);
-    const currentBorderColor = isError
-        ? colorConfig.errorColor
-        : isFocusedForUI
-            ? colorConfig.primaryColor
-            : colorConfig.defaultBorderColor;
-    const currentLabelColor = isError
-        ? colorConfig.errorColor
-        : isFocusedForUI
-            ? colorConfig.primaryColor
-            : hasValue
-                ? colorConfig.defaultLabelColor
-                : colorConfig.placeholderColor;
     const styleConfig = useMemo(() => {
         const baseStyle = {
             width: '100%',
@@ -97,7 +110,6 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             backgroundColor: inputBgColor || palette.background.base,
             paddingTop: boxStyle === 'inbox' ? 13 : 0,
         };
-        // 박스 스타일에 따른 테두리 설정
         let borderStyle = {};
         if (boxStyle === 'outline' || boxStyle === 'inbox') {
             borderStyle = { borderWidth };
@@ -105,7 +117,6 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         else if (boxStyle === 'underline') {
             borderStyle = { borderBottomWidth: borderWidth };
         }
-        // innerBoxStyle에 따른 스타일 설정
         let innerStyle = {};
         if (innerBoxStyle === 'top') {
             innerStyle = {
@@ -143,6 +154,8 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         borderRadius: boxStyle === 'outline' ? 5 : 0,
         ...(Platform.OS === 'android' ? { overflow: 'hidden' } : {}),
     }), [fontSize, animationConstants.baseTop, paddingHorizontal, labelBgColor, palette.background.base, boxStyle, fontFamily]);
+    const boxStyleArray = useMemo(() => [styleConfig, animatedBorderStyle], [styleConfig, animatedBorderStyle]);
+    const labelStyleArray = useMemo(() => [labelTextStyle, animatedLabelStyle], [labelTextStyle, animatedLabelStyle]);
     const handleTextChange = (text) => {
         if (onChangeText)
             onChangeText(text);
@@ -162,7 +175,7 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
     ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);
     const shouldShowCloseButton = value && isFocusedForUI;
     const shouldShowError = status === 'error' && errorMessage;
-    return (_jsxs(ViewAtom, { style: { alignSelf: 'stretch', width: '100%' }, children: [_jsxs(ViewAtom, { style: [styleConfig, { borderColor: currentBorderColor }], onLayout: handleLayout, pointerEvents: disabled ? 'none' : 'auto', children: [_jsx(TextInput, { ...textInputProps, ref: ref, style: textInputStyle, value: value, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleTextChange, allowFontScaling: allowFontScaling, selectionColor: palette.grey[50], autoCorrect: false, spellCheck: false }), _jsx(ViewAtom, { pointerEvents: "none", style: { position: 'absolute' }, children: _jsx(Animated.Text, { allowFontScaling: allowFontScaling, style: [labelTextStyle, { color: currentLabelColor }, animatedLabelStyle], children: label }) }), shouldShowCloseButton && (_jsx(ButtonClose, { marginTop: isTextArea ? 13 : undefined, onChangeText: onChangeText }))] }), shouldShowError && (_jsx(ErrorComponent, { errorMessage: errorMessage, errorColor: fErrorColor }))] }));
+    return (_jsxs(ViewAtom, { style: { alignSelf: 'stretch', width: '100%' }, children: [_jsxs(Animated.View, { style: boxStyleArray, onLayout: handleLayout, pointerEvents: disabled ? 'none' : 'auto', children: [_jsx(TextInput, { ...textInputProps, ref: ref, style: textInputStyle, value: value, onFocus: handleFocus, onBlur: handleBlur, onChangeText: handleTextChange, allowFontScaling: allowFontScaling, selectionColor: palette.grey[50], autoCorrect: false, spellCheck: false }), _jsx(ViewAtom, { pointerEvents: "none", style: { position: 'absolute' }, children: _jsx(Animated.Text, { allowFontScaling: allowFontScaling, style: labelStyleArray, children: label }) }), shouldShowCloseButton && (_jsx(ButtonClose, { marginTop: isTextArea ? 13 : undefined, onChangeText: onChangeText }))] }), shouldShowError && (_jsx(ErrorComponent, { errorMessage: errorMessage, errorColor: fErrorColor }))] }));
 });
 ZSTextField.displayName = 'ZSTextField';
 export default ZSTextField;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useCallback, useState, forwardRef, useEffect, useRef } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, ReduceMotion } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme/types';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../context/ThemeContext';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\nconst ANIM_DURATION = 150;\nconst TIMING_CONFIG = { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System };\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\nexport type ZSTextFieldRef = TextInput;\n\nconst ZSTextField = forwardRef<ZSTextFieldRef, TextFieldProps>(({\n  typo = 'body.2',\n  status = 'default',\n  value,\n  onChangeText,\n  label = 'Placeholder',\n  labelColor,\n  placeHolderColor,\n  inputBgColor,\n  labelBgColor,\n  borderWidth = 1.2,\n  borderColor,\n  focusColor,\n  errorColor,\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}, ref) => {\n  const { typography, palette } = useTheme();\n  const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n  const fErrorColor = errorColor || palette.danger.main;\n\n  const fontSize = extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17;\n  const fontFamily = extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '';\n  const floatProgress = useSharedValue(value !== '' ? 1 : 0);\n  const [isFocusedForUI, setIsFocusedForUI] = useState<boolean>(false);\n  const boxHeightValue = useSharedValue(0);\n\n  const isError = status === 'error';\n  const hasValue = value !== '';\n\n  const isFocusedRef = useRef(false);\n  const hasValueRef = useRef(hasValue);\n  hasValueRef.current = hasValue;\n\n  useEffect(() => {\n    const target = hasValue ? 1 : 0;\n    if (!isFocusedRef.current && floatProgress.value !== target) {\n      floatProgress.value = withTiming(target, TIMING_CONFIG);\n    }\n  }, [hasValue]);\n\n  const animationConstants = useMemo(() => ({\n    baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),\n    targetFontSize: boxStyle === 'inbox' ? 10 : 11,\n    baseTop: isTextArea ? 12 : 0,\n    targetTopOffset: boxStyle === 'inbox' ? 17 : 2,\n  }), [fontSize, boxStyle, isTextArea]);\n\n  const animatedLabelStyle = useAnimatedStyle(() => {\n    const progress = floatProgress.value;\n\n    const labelTranslateY = interpolate(\n      progress,\n      [0, 1],\n      [\n        0,\n        isTextArea ? -24 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset - animationConstants.baseTop,\n      ],\n      'clamp'\n    );\n\n    const labelScale = interpolate(\n      progress,\n      [0, 1],\n      [1, animationConstants.targetFontSize / animationConstants.baseFontSize],\n      'clamp'\n    );\n\n    return {\n      transform: [\n        { translateY: labelTranslateY },\n        { scale: labelScale },\n      ],\n    };\n  }, [animationConstants, isTextArea]);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    const { height } = event.nativeEvent.layout;\n    boxHeightValue.value = height;\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    isFocusedRef.current = true;\n    if (floatProgress.value !== 1) {\n      floatProgress.value = withTiming(1, TIMING_CONFIG);\n    }\n    setIsFocusedForUI(true);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    isFocusedRef.current = false;\n    const target = hasValueRef.current ? 1 : 0;\n    if (floatProgress.value !== target) {\n      floatProgress.value = withTiming(target, TIMING_CONFIG);\n    }\n    setIsFocusedForUI(false);\n  }, []);\n\n  const colorConfig = useMemo(() => ({\n    primaryColor: focusColor || palette.primary.main,\n    defaultBorderColor: borderColor || palette.grey[30],\n    defaultLabelColor: labelColor || palette.text.secondary,\n    placeholderColor: placeHolderColor || palette.grey[40],\n    errorColor: fErrorColor,\n  }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);\n\n  const currentBorderColor = isError\n    ? colorConfig.errorColor\n    : isFocusedForUI\n      ? colorConfig.primaryColor\n      : colorConfig.defaultBorderColor;\n\n  const currentLabelColor = isError\n    ? colorConfig.errorColor\n    : isFocusedForUI\n      ? colorConfig.primaryColor\n      : hasValue\n        ? colorConfig.defaultLabelColor\n        : colorConfig.placeholderColor;\n\n  const styleConfig = useMemo(() => {\n    const baseStyle = {\n      width: '100%' as const,\n      justifyContent: isTextArea ? 'flex-start' as const : 'center' as const,\n      borderRadius,\n      paddingHorizontal,\n      backgroundColor: inputBgColor || palette.background.base,\n      paddingTop: boxStyle === 'inbox' ? 13 : 0,\n    };\n\n    // 박스 스타일에 따른 테두리 설정\n    let borderStyle = {};\n    if (boxStyle === 'outline' || boxStyle === 'inbox') {\n      borderStyle = { borderWidth };\n    } else if (boxStyle === 'underline') {\n      borderStyle = { borderBottomWidth: borderWidth };\n    }\n\n    // innerBoxStyle에 따른 스타일 설정\n    let innerStyle = {};\n    if (innerBoxStyle === 'top') {\n      innerStyle = {\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n        borderBottomWidth: borderWidth / 2\n      };\n    } else if (innerBoxStyle === 'middle') {\n      innerStyle = {\n        borderRadius: 0,\n        borderTopWidth: borderWidth / 2,\n        borderBottomWidth: borderWidth / 2\n      };\n    } else if (innerBoxStyle === 'bottom') {\n      innerStyle = {\n        borderTopLeftRadius: 0,\n        borderTopRightRadius: 0,\n        borderTopWidth: borderWidth / 2\n      };\n    }\n\n    return { ...baseStyle, ...borderStyle, ...innerStyle };\n  }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);\n\n  const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n    fontSize,\n    top: animationConstants.baseTop,\n    left: paddingHorizontal,\n    transformOrigin: 'left center',\n    backgroundColor: labelBgColor || palette.background.base,\n    paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n    paddingVertical: 2,\n    textAlignVertical: 'center' as const,\n    fontFamily,\n    borderRadius: boxStyle === 'outline' ? 5 : 0,\n    ...(Platform.OS === 'android' ? { overflow: 'hidden' as const } : {}),\n  }), [fontSize, animationConstants.baseTop, paddingHorizontal, labelBgColor, palette.background.base, boxStyle, fontFamily]);\n\n  const handleTextChange = (text: string) => {\n    if (onChangeText) onChangeText(text);\n  };\n\n  const textInputStyle = useMemo(() => [\n    {\n      paddingTop: 7 + iosOffset,\n      paddingBottom: 5 + iosOffset,\n      color: palette.text.base,\n      fontSize,\n      width: '100%' as const,\n      paddingRight: 25,\n      fontFamily,\n      ...(Platform.OS === 'web' ? { outline: 'none' } : {}),\n    },\n    textInputProps?.style,\n  ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);\n\n  const shouldShowCloseButton = value && isFocusedForUI;\n  const shouldShowError = status === 'error' && errorMessage;\n\n  return (\n    <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n      <ViewAtom\n        style={[styleConfig, { borderColor: currentBorderColor }]}\n        onLayout={handleLayout}\n        pointerEvents={disabled ? 'none' : 'auto'}\n      >\n        <TextInput\n          {...textInputProps}\n          ref={ref}\n          style={textInputStyle}\n          value={value}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChangeText={handleTextChange}\n          allowFontScaling={allowFontScaling}\n          selectionColor={palette.grey[50]}\n          autoCorrect={false}\n          spellCheck={false}\n        />\n\n        <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n          <Animated.Text allowFontScaling={allowFontScaling} style={[labelTextStyle, { color: currentLabelColor }, animatedLabelStyle]}>\n            {label}\n          </Animated.Text>\n        </ViewAtom>\n\n        {shouldShowCloseButton && (\n          <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n        )}\n      </ViewAtom>\n\n      {shouldShowError && (\n        <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n      )}\n    </ViewAtom>\n  );\n});\n\nZSTextField.displayName = 'ZSTextField';\n\nexport default ZSTextField;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useCallback, useState, forwardRef, useEffect, useRef } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport Animated, { interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming, ReduceMotion } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme/types';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../context/ThemeContext';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\nconst ANIM_DURATION = 150;\nconst TIMING_CONFIG = { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System };\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\nexport type ZSTextFieldRef = TextInput;\n\nconst ZSTextField = forwardRef<ZSTextFieldRef, TextFieldProps>(({\n  typo = 'body.2',\n  status = 'default',\n  value,\n  onChangeText,\n  label = 'Placeholder',\n  labelColor,\n  placeHolderColor,\n  inputBgColor,\n  labelBgColor,\n  borderWidth = 1.2,\n  borderColor,\n  focusColor,\n  errorColor,\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}, ref) => {\n  const { typography, palette } = useTheme();\n  const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n  const fErrorColor = errorColor || palette.danger.main;\n\n  const fontSize = extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17;\n  const fontFamily = extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '';\n\n  const isError = status === 'error';\n  const hasValue = value !== '';\n\n  const floatProgress = useSharedValue(hasValue ? 1 : 0);\n  const focusProgress = useSharedValue(0);\n  const errorProgress = useSharedValue(isError ? 1 : 0);\n  const boxHeightValue = useSharedValue(0);\n\n  const [isFocusedForUI, setIsFocusedForUI] = useState<boolean>(false);\n\n  const isFocusedRef = useRef(false);\n  const hasValueRef = useRef(hasValue);\n  hasValueRef.current = hasValue;\n\n  useEffect(() => {\n    const target = hasValue ? 1 : 0;\n    if (!isFocusedRef.current && floatProgress.value !== target) {\n      floatProgress.value = withTiming(target, TIMING_CONFIG);\n    }\n  }, [hasValue]);\n\n  useEffect(() => {\n    const target = isError ? 1 : 0;\n    if (errorProgress.value !== target) {\n      errorProgress.value = withTiming(target, TIMING_CONFIG);\n    }\n  }, [isError]);\n\n  const animationConstants = useMemo(() => ({\n    baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),\n    targetFontSize: boxStyle === 'inbox' ? 10 : 11,\n    baseTop: isTextArea ? 12 : 0,\n    targetTopOffset: boxStyle === 'inbox' ? 17 : 2,\n  }), [fontSize, boxStyle, isTextArea]);\n\n  const colorConfig = useMemo(() => ({\n    primaryColor: focusColor || palette.primary.main,\n    defaultBorderColor: borderColor || palette.grey[30],\n    defaultLabelColor: labelColor || palette.text.secondary,\n    placeholderColor: placeHolderColor || palette.grey[40],\n    errorColor: fErrorColor,\n  }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);\n\n  const nonFocusLabelColor = useMemo(\n    () => (hasValue ? colorConfig.defaultLabelColor : colorConfig.placeholderColor),\n    [hasValue, colorConfig.defaultLabelColor, colorConfig.placeholderColor]\n  );\n\n  const animatedLabelStyle = useAnimatedStyle(() => {\n    const progress = floatProgress.value;\n\n    const labelTranslateY = interpolate(\n      progress,\n      [0, 1],\n      [\n        0,\n        isTextArea ? -24 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset - animationConstants.baseTop,\n      ],\n      'clamp'\n    );\n\n    const labelScale = interpolate(\n      progress,\n      [0, 1],\n      [1, animationConstants.targetFontSize / animationConstants.baseFontSize],\n      'clamp'\n    );\n\n    const focusedColor = interpolateColor(focusProgress.value, [0, 1], [nonFocusLabelColor, colorConfig.primaryColor]);\n    const color = interpolateColor(errorProgress.value, [0, 1], [focusedColor, colorConfig.errorColor]);\n\n    return {\n      color,\n      transform: [\n        { translateY: labelTranslateY },\n        { scale: labelScale },\n      ],\n    };\n  }, [animationConstants, isTextArea, nonFocusLabelColor, colorConfig.primaryColor, colorConfig.errorColor]);\n\n  const animatedBorderStyle = useAnimatedStyle(() => {\n    const focusedColor = interpolateColor(focusProgress.value, [0, 1], [colorConfig.defaultBorderColor, colorConfig.primaryColor]);\n    const borderColor = interpolateColor(errorProgress.value, [0, 1], [focusedColor, colorConfig.errorColor]);\n    return { borderColor };\n  }, [colorConfig.defaultBorderColor, colorConfig.primaryColor, colorConfig.errorColor]);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    const { height } = event.nativeEvent.layout;\n    if (boxHeightValue.value !== height) {\n      boxHeightValue.value = height;\n    }\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    isFocusedRef.current = true;\n    if (floatProgress.value !== 1) {\n      floatProgress.value = withTiming(1, TIMING_CONFIG);\n    }\n    if (focusProgress.value !== 1) {\n      focusProgress.value = withTiming(1, TIMING_CONFIG);\n    }\n    setIsFocusedForUI(true);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    isFocusedRef.current = false;\n    const target = hasValueRef.current ? 1 : 0;\n    if (floatProgress.value !== target) {\n      floatProgress.value = withTiming(target, TIMING_CONFIG);\n    }\n    if (focusProgress.value !== 0) {\n      focusProgress.value = withTiming(0, TIMING_CONFIG);\n    }\n    setIsFocusedForUI(false);\n  }, []);\n\n  const styleConfig = useMemo(() => {\n    const baseStyle = {\n      width: '100%' as const,\n      justifyContent: isTextArea ? 'flex-start' as const : 'center' as const,\n      borderRadius,\n      paddingHorizontal,\n      backgroundColor: inputBgColor || palette.background.base,\n      paddingTop: boxStyle === 'inbox' ? 13 : 0,\n    };\n\n    let borderStyle = {};\n    if (boxStyle === 'outline' || boxStyle === 'inbox') {\n      borderStyle = { borderWidth };\n    } else if (boxStyle === 'underline') {\n      borderStyle = { borderBottomWidth: borderWidth };\n    }\n\n    let innerStyle = {};\n    if (innerBoxStyle === 'top') {\n      innerStyle = {\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n        borderBottomWidth: borderWidth / 2\n      };\n    } else if (innerBoxStyle === 'middle') {\n      innerStyle = {\n        borderRadius: 0,\n        borderTopWidth: borderWidth / 2,\n        borderBottomWidth: borderWidth / 2\n      };\n    } else if (innerBoxStyle === 'bottom') {\n      innerStyle = {\n        borderTopLeftRadius: 0,\n        borderTopRightRadius: 0,\n        borderTopWidth: borderWidth / 2\n      };\n    }\n\n    return { ...baseStyle, ...borderStyle, ...innerStyle };\n  }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);\n\n  const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n    fontSize,\n    top: animationConstants.baseTop,\n    left: paddingHorizontal,\n    transformOrigin: 'left center',\n    backgroundColor: labelBgColor || palette.background.base,\n    paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n    paddingVertical: 2,\n    textAlignVertical: 'center' as const,\n    fontFamily,\n    borderRadius: boxStyle === 'outline' ? 5 : 0,\n    ...(Platform.OS === 'android' ? { overflow: 'hidden' as const } : {}),\n  }), [fontSize, animationConstants.baseTop, paddingHorizontal, labelBgColor, palette.background.base, boxStyle, fontFamily]);\n\n  const boxStyleArray = useMemo(\n    () => [styleConfig, animatedBorderStyle],\n    [styleConfig, animatedBorderStyle]\n  );\n\n  const labelStyleArray = useMemo(\n    () => [labelTextStyle, animatedLabelStyle],\n    [labelTextStyle, animatedLabelStyle]\n  );\n\n  const handleTextChange = (text: string) => {\n    if (onChangeText) onChangeText(text);\n  };\n\n  const textInputStyle = useMemo(() => [\n    {\n      paddingTop: 7 + iosOffset,\n      paddingBottom: 5 + iosOffset,\n      color: palette.text.base,\n      fontSize,\n      width: '100%' as const,\n      paddingRight: 25,\n      fontFamily,\n      ...(Platform.OS === 'web' ? { outline: 'none' } : {}),\n    },\n    textInputProps?.style,\n  ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);\n\n  const shouldShowCloseButton = value && isFocusedForUI;\n  const shouldShowError = status === 'error' && errorMessage;\n\n  return (\n    <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n      <Animated.View\n        style={boxStyleArray}\n        onLayout={handleLayout}\n        pointerEvents={disabled ? 'none' : 'auto'}\n      >\n        <TextInput\n          {...textInputProps}\n          ref={ref}\n          style={textInputStyle}\n          value={value}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChangeText={handleTextChange}\n          allowFontScaling={allowFontScaling}\n          selectionColor={palette.grey[50]}\n          autoCorrect={false}\n          spellCheck={false}\n        />\n\n        <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n          <Animated.Text allowFontScaling={allowFontScaling} style={labelStyleArray}>\n            {label}\n          </Animated.Text>\n        </ViewAtom>\n\n        {shouldShowCloseButton && (\n          <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n        )}\n      </Animated.View>\n\n      {shouldShowError && (\n        <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n      )}\n    </ViewAtom>\n  );\n});\n\nZSTextField.displayName = 'ZSTextField';\n\nexport default ZSTextField;\n"]}

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

@@ -6,6 +6,7 @@ type Props = ViewProps & {
     elevationLevel?: ShadowLevel;
     color?: ViewColorOptions;
 };
-declare const ZSView: React.FC<Props>;
-export default ZSView;
+declare function ZSView({ isAnimation, elevationLevel, style, children, color, ...rest }: Props): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ZSView>;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElE,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,WAAmB,EAAE,cAAkB,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,qBAclG;;AAED,wBAAkC"}

package/build/ui/ZSView/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
+import { useStyleSheetCreate } from '../../model/useStyleSheetCreate';
 import AnimatedWrapper from '../atoms/AnimatedWrapper';
-const ZSView = ({ isAnimation = false, elevationLevel = 0, style, children, color, ...rest }) => {
-    const { palette } = useTheme();
-    const styles = useMemo(() => StyleSheet.create({
+function ZSView({ isAnimation = false, elevationLevel = 0, style, children, color, ...rest }) {
+    const styles = useStyleSheetCreate((palette) => StyleSheet.create({
         container: {
             backgroundColor: palette.background.base,
         },
-    }), [palette.background.base]);
+    }));
     return (_jsx(AnimatedWrapper, { color: color, isAnimation: isAnimation, elevationLevel: elevationLevel, style: [styles.container, style], ...rest, children: children }));
-};
-export default ZSView;
+}
+export default React.memo(ZSView);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AASvD,MAAM,MAAM,GAAoB,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC/G,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,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,KAAM,IAAI,YAChI,QAAQ,GACO,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { ViewProps, StyleSheet } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport AnimatedWrapper from '../atoms/AnimatedWrapper';\nimport { ViewColorOptions, ShadowLevel } from '../../theme/types';\n\ntype Props = ViewProps & {\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  color?: ViewColorOptions;\n};\n\nconst ZSView: React.FC<Props> = ({ isAnimation = false, elevationLevel = 0, style, children, color, ...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 color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={[styles.container, style]} {...rest}>\n      {children}\n    </AnimatedWrapper>\n  );\n};\n\nexport default ZSView;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAa,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,eAAe,MAAM,0BAA0B,CAAC;AASvD,SAAS,MAAM,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAS;IACjG,MAAM,MAAM,GAAG,mBAAmB,CAAC,CAAC,OAAO,EAAE,EAAE,CAC7C,UAAU,CAAC,MAAM,CAAC;QAChB,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI;SACzC;KACF,CAAC,CACH,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,KAAM,IAAI,YAChI,QAAQ,GACO,CACnB,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport { useStyleSheetCreate } from '../../model/useStyleSheetCreate';\nimport AnimatedWrapper from '../atoms/AnimatedWrapper';\nimport { ViewColorOptions, ShadowLevel } from '../../theme/types';\n\ntype Props = ViewProps & {\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  color?: ViewColorOptions;\n};\n\nfunction ZSView({ isAnimation = false, elevationLevel = 0, style, children, color, ...rest }: Props) {\n  const styles = useStyleSheetCreate((palette) =>\n    StyleSheet.create({\n      container: {\n        backgroundColor: palette.background.base,\n      },\n    }),\n  );\n\n  return (\n    <AnimatedWrapper color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={[styles.container, style]} {...rest}>\n      {children}\n    </AnimatedWrapper>\n  );\n}\n\nexport default React.memo(ZSView);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAgB,WAAW,EAAmB,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAajG,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAiFtB;;AAED,wBAA2C"}
+{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAOlE,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyFtB;;AAED,wBAA2C"}

package/build/ui/atoms/AnimatedWrapper.js

@@ -1,41 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, useDerivedValue } from 'react-native-reanimated';
 import { useTheme } from '../../context/ThemeContext';
-import { IOS_SHADOW } from '../../theme/elevation';
+import { resolveViewColor } from '../../theme/resolveColor';
+import { IOS_SHADOW, parseColorChannels } from '../../theme/elevation';
 const DEFAULT_DURATION = 200;
 const SHADOW_DURATION = 50;
-const IS_IOS = Platform.OS === 'ios';
-function isColorMap(value) {
-    return typeof value === 'object' && value !== null;
-}
 function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DEFAULT_DURATION, style, children, color, ...props }) {
     const { elevation, palette } = useTheme();
     const animationFinished = useSharedValue(false);
-    const staticConfig = useMemo(() => ({
-        isIOS: IS_IOS,
-        maxShadowOpacity: IS_IOS ? (IOS_SHADOW[elevationLevel]?.shadowOpacity ?? 0) : 0,
-        maxElevation: IS_IOS ? 0 : elevationLevel,
-    }), [elevationLevel]);
+    const shadowConfig = useMemo(() => {
+        const shadow = IOS_SHADOW[elevationLevel];
+        const { r, g, b, a } = parseColorChannels(palette.elevationShadow[elevationLevel] ?? '');
+        return {
+            offsetX: shadow.shadowOffset.width,
+            offsetY: shadow.shadowOffset.height,
+            blurRadius: shadow.shadowRadius,
+            maxAlpha: a * shadow.shadowOpacity,
+            r,
+            g,
+            b,
+        };
+    }, [elevationLevel, palette]);
     const backgroundColor = useMemo(() => {
         if (!color) {
             return elevationLevel ? palette.background.base : undefined;
         }
-        const [c01, c02] = color.split('.');
-        if (c02) {
-            if (c01 === 'background')
-                return palette.background[c02];
-            if (c01 === 'text')
-                return palette.text[c02];
-            const semanticPalette = palette[c01];
-            return isColorMap(semanticPalette) ? semanticPalette[c02] : undefined;
-        }
-        if (c01)
-            return palette.background[c01] ?? palette[c01]?.main;
-        if (elevationLevel)
-            return palette.background.base;
-        return undefined;
+        return resolveViewColor(palette, color);
     }, [color, palette, elevationLevel]);
     const staticStyle = elevation[elevationLevel];
     const shadowProgress = useDerivedValue(() => {
@@ -46,12 +38,19 @@ function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DE
         return 0;
     }, []);
     const animatedStyle = useAnimatedStyle(() => {
-        const shadowValue = shadowProgress.value;
-        if (staticConfig.isIOS) {
-            return { shadowOpacity: shadowValue * staticConfig.maxShadowOpacity };
-        }
-        return { elevation: shadowValue * staticConfig.maxElevation };
-    }, [staticConfig]);
+        const alpha = shadowConfig.maxAlpha * shadowProgress.value;
+        return {
+            boxShadow: [
+                {
+                    offsetX: shadowConfig.offsetX,
+                    offsetY: shadowConfig.offsetY,
+                    blurRadius: shadowConfig.blurRadius,
+                    spreadDistance: 0,
+                    color: `rgba(${shadowConfig.r}, ${shadowConfig.g}, ${shadowConfig.b}, ${alpha})`,
+                },
+            ],
+        };
+    }, [shadowConfig]);
     const animationProps = useMemo(() => ({
         entering: FadeInDown.duration(duration).withCallback((finished) => {
             'worklet';
@@ -61,15 +60,9 @@ function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DE
         }),
         exiting: FadeOut.duration(50),
     }), [duration]);
-    const baseStyle = [
-        style,
-        backgroundColor && { backgroundColor },
-        staticStyle
-    ];
-    const animatedStyleArray = [
-        ...baseStyle,
-        animatedStyle
-    ];
+    const bgStyle = useMemo(() => (backgroundColor ? { backgroundColor } : undefined), [backgroundColor]);
+    const baseStyle = useMemo(() => [style, bgStyle, staticStyle], [style, bgStyle, staticStyle]);
+    const animatedStyleArray = useMemo(() => [style, bgStyle, staticStyle, animatedStyle], [style, bgStyle, staticStyle, animatedStyle]);
     if (!isAnimation) {
         return _jsx(View, { style: baseStyle, ...props, children: children });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { View, ViewProps, Platform } from 'react-native';\nimport Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, useDerivedValue } from 'react-native-reanimated';\nimport { useTheme } from '../../context/ThemeContext';\nimport { ColorPalette, ShadowLevel, ThemeBackground, ViewColorOptions } from '../../theme/types';\nimport { IOS_SHADOW } from '../../theme/elevation';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\nconst IS_IOS = Platform.OS === 'ios';\ntype SemanticPaletteKey = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'information' | 'grey';\ntype PaletteShade = keyof ColorPalette;\n\nfunction isColorMap(value: unknown): value is Record<string, string> {\n  return typeof value === 'object' && value !== null;\n}\n\ninterface AnimatedWrapperProps extends ViewProps {\n  isAnimation: boolean;\n  elevationLevel?: ShadowLevel;\n  duration?: number;\n  color?: ViewColorOptions;\n}\n\nfunction AnimatedWrapper({\n  isAnimation = true,\n  elevationLevel = 0,\n  duration = DEFAULT_DURATION,\n  style,\n  children,\n  color,\n  ...props\n}: AnimatedWrapperProps) {\n  const { elevation, palette } = useTheme();\n  const animationFinished = useSharedValue(false);\n  \n  const staticConfig = useMemo(() => ({\n    isIOS: IS_IOS,\n    maxShadowOpacity: IS_IOS ? (IOS_SHADOW[elevationLevel]?.shadowOpacity ?? 0) : 0,\n    maxElevation: IS_IOS ? 0 : elevationLevel,\n  }), [elevationLevel]);\n  \n  const backgroundColor = useMemo(() => {\n    if (!color) {\n      return elevationLevel ? palette.background.base : undefined;\n    }\n    \n    const [c01, c02] = color.split('.') as [string, string | undefined];\n    if (c02) {\n      if (c01 === 'background') return palette.background[c02 as keyof ThemeBackground];\n      if (c01 === 'text') return palette.text[c02 as keyof typeof palette.text];\n\n      const semanticPalette = palette[c01 as SemanticPaletteKey];\n      return isColorMap(semanticPalette) ? semanticPalette[c02 as PaletteShade] : undefined;\n    }\n    if (c01) return palette.background[c01 as keyof ThemeBackground] ?? palette[c01 as SemanticPaletteKey]?.main;\n    if (elevationLevel) return palette.background.base;\n    return undefined;\n  }, [color, palette, elevationLevel]);\n\n  const staticStyle = elevation[elevationLevel];\n\n  const shadowProgress = useDerivedValue(() => {\n    'worklet';\n    if (animationFinished.value) {\n      return withTiming(1, { duration: SHADOW_DURATION });\n    }\n    return 0;\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const shadowValue = shadowProgress.value;\n    \n    if (staticConfig.isIOS) {\n      return { shadowOpacity: shadowValue * staticConfig.maxShadowOpacity };\n    }\n    return { elevation: shadowValue * staticConfig.maxElevation };\n  }, [staticConfig]);\n\n  const animationProps = useMemo(() => ({\n    entering: FadeInDown.duration(duration).withCallback((finished) => {\n      'worklet';\n      if (finished) {\n        animationFinished.value = true;\n      }\n    }),\n    exiting: FadeOut.duration(50),\n  }), [duration]);\n\n  const baseStyle = [\n    style,\n    backgroundColor && { backgroundColor },\n    staticStyle\n  ];\n\n  const animatedStyleArray = [\n    ...baseStyle,\n    animatedStyle\n  ];\n\n  if (!isAnimation) {\n    return <View style={baseStyle} {...props}>{children}</View>;\n  }\n\n  return (\n    <Animated.View\n      style={animatedStyleArray}\n      {...animationProps}\n      {...props}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nexport default React.memo(AnimatedWrapper);\n"]}
+{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, useDerivedValue } from 'react-native-reanimated';\nimport { useTheme } from '../../context/ThemeContext';\nimport { ShadowLevel, ViewColorOptions } from '../../theme/types';\nimport { resolveViewColor } from '../../theme/resolveColor';\nimport { IOS_SHADOW, parseColorChannels } from '../../theme/elevation';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\n\ninterface AnimatedWrapperProps extends ViewProps {\n  isAnimation: boolean;\n  elevationLevel?: ShadowLevel;\n  duration?: number;\n  color?: ViewColorOptions;\n}\n\nfunction AnimatedWrapper({\n  isAnimation = true,\n  elevationLevel = 0,\n  duration = DEFAULT_DURATION,\n  style,\n  children,\n  color,\n  ...props\n}: AnimatedWrapperProps) {\n  const { elevation, palette } = useTheme();\n  const animationFinished = useSharedValue(false);\n\n  const shadowConfig = useMemo(() => {\n    const shadow = IOS_SHADOW[elevationLevel];\n    const { r, g, b, a } = parseColorChannels(palette.elevationShadow[elevationLevel] ?? '');\n    return {\n      offsetX: shadow.shadowOffset.width,\n      offsetY: shadow.shadowOffset.height,\n      blurRadius: shadow.shadowRadius,\n      maxAlpha: a * shadow.shadowOpacity,\n      r,\n      g,\n      b,\n    };\n  }, [elevationLevel, palette]);\n\n  const backgroundColor = useMemo(() => {\n    if (!color) {\n      return elevationLevel ? palette.background.base : undefined;\n    }\n    return resolveViewColor(palette, color);\n  }, [color, palette, elevationLevel]);\n\n  const staticStyle = elevation[elevationLevel];\n\n  const shadowProgress = useDerivedValue(() => {\n    'worklet';\n    if (animationFinished.value) {\n      return withTiming(1, { duration: SHADOW_DURATION });\n    }\n    return 0;\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const alpha = shadowConfig.maxAlpha * shadowProgress.value;\n\n    return {\n      boxShadow: [\n        {\n          offsetX: shadowConfig.offsetX,\n          offsetY: shadowConfig.offsetY,\n          blurRadius: shadowConfig.blurRadius,\n          spreadDistance: 0,\n          color: `rgba(${shadowConfig.r}, ${shadowConfig.g}, ${shadowConfig.b}, ${alpha})`,\n        },\n      ],\n    };\n  }, [shadowConfig]);\n\n  const animationProps = useMemo(() => ({\n    entering: FadeInDown.duration(duration).withCallback((finished) => {\n      'worklet';\n      if (finished) {\n        animationFinished.value = true;\n      }\n    }),\n    exiting: FadeOut.duration(50),\n  }), [duration]);\n\n  const bgStyle = useMemo(\n    () => (backgroundColor ? { backgroundColor } : undefined),\n    [backgroundColor]\n  );\n\n  const baseStyle = useMemo(\n    () => [style, bgStyle, staticStyle],\n    [style, bgStyle, staticStyle]\n  );\n\n  const animatedStyleArray = useMemo(\n    () => [style, bgStyle, staticStyle, animatedStyle],\n    [style, bgStyle, staticStyle, animatedStyle]\n  );\n\n  if (!isAnimation) {\n    return <View style={baseStyle} {...props}>{children}</View>;\n  }\n\n  return (\n    <Animated.View\n      style={animatedStyleArray}\n      {...animationProps}\n      {...props}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nexport default React.memo(AnimatedWrapper);\n"]}

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

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

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

@@ -1 +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"}
+{"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,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAMlD;AAED,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/TextAtom.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAK/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACrD,OAAO,CACL,KAAC,IAAI,OAAK,KAAK,YACZ,QAAQ,GACJ,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"]}
+{"version":3,"file":"TextAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/TextAtom.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAE/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IACjD,OAAO,CACL,KAAC,IAAI,OAAK,KAAK,YACZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport { Text, TextProps } from 'react-native';\n\nfunction TextAtom({ children, ...props }: TextProps) {\n  return (\n    <Text {...props}>\n      {children}\n    </Text>\n  );\n}\n\nexport default TextAtom;\n"]}

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

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

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

@@ -1 +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"}
+{"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,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAMlD;AAED,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/ViewAtom.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAK/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACrD,OAAO,CACL,KAAC,IAAI,OAAK,KAAK,YACZ,QAAQ,GACJ,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"]}
+{"version":3,"file":"ViewAtom.js","sourceRoot":"","sources":["../../../src/ui/atoms/ViewAtom.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAE/C,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IACjD,OAAO,CACL,KAAC,IAAI,OAAK,KAAK,YACZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport { View, ViewProps } from 'react-native';\n\nfunction ViewAtom({ children, ...props }: ViewProps) {\n  return (\n    <View {...props}>\n      {children}\n    </View>\n  );\n}\n\nexport default ViewAtom;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0610studio/zs-ui",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "private": false,
   "description": "EXPO ZS-UI",
   "type": "commonjs",