@0610studio/zs-ui 0.17.0 → 0.18.0

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

@@ -1 +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 '../../context/ThemeContext';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nfunction ZSRadioGroup({\n  options,\n  value,\n  onSelect,\n  containerStyle,\n  valueStyle,\n  disabled = false,\n  selectStyle,\n  selectLabel = '선택',\n  rowCount = 1,\n  ...props\n}: {\n  options: RadioOption[];\n  value?: RadioOption;\n  onSelect: (value: RadioOption) => void;\n  containerStyle?: ViewProps;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel?: string;\n  disabled?: boolean;\n  rowCount?: 1 | 2 | 3;\n} & ViewProps) {\n  const { palette } = useTheme();\n  const isFullWidth = rowCount === 1;\n\n  const handleSelect = useCallback((option: RadioOption) => {\n    if (!disabled) {\n      onSelect(option);\n    }\n  }, [disabled, onSelect]);\n\n  return (\n    <ViewAtom\n      style={{\n        flexDirection: isFullWidth ? 'column' : 'row',\n        flexWrap: isFullWidth ? 'nowrap' : 'wrap',\n        width: '100%',\n      }}\n      {...containerStyle}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const isSelected = value?.index === option.index;\n        const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n        const colCount = rowCount;\n        const isLastCol = (index + 1) % colCount === 0;\n        const isLastRow = Math.ceil((index + 1) / colCount) === Math.ceil(options.length / colCount);\n\n        return (\n          <ViewAtom key={option.index} style={{\n            width: rowCount === 2\n              ? '50%'\n              : rowCount === 3\n                ? '33.33%'\n                : '100%',\n            paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n            paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n            paddingBottom: isLastRow ? 0 : 10,\n          }}>\n            <ZSPressable\n              onPress={() => handleSelect(option)}\n              pressedBackgroundColor=\"transparent\"\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: 100,\n                  borderColor: setColor,\n                  backgroundColor: isSelected ? palette.background.layer1 : 'transparent',\n                }}\n              >\n                {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}\n                {!(isFullWidth) && (\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                <ViewAtom style={{ flex: 1, paddingLeft: 10, paddingRight: 12, minWidth: 0 }}>\n                  <ZSText {...valueStyle}>\n                    {option.value}\n                  </ZSText>\n                </ViewAtom>\n\n                {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n                {isFullWidth && (\n                  <ViewAtom\n                    style={{\n                      backgroundColor: isSelected\n                        ? palette.primary.main\n                        : palette.background.layer2,\n                      paddingHorizontal: 10,\n                      borderRadius: 100,\n                      minWidth: 42,\n                      minHeight: 24,\n                      justifyContent: 'center',\n                      alignItems: 'center',\n                      flexShrink: 0,\n                    }}\n                  >\n                    {isSelected ? (\n                      <SvgCheck size={18} />\n                    ) : (\n                      <ZSText typo=\"body.5\" numberOfLines={1} {...selectStyle}>\n                        {selectLabel}\n                      </ZSText>\n                    )}\n                  </ViewAtom>\n                )}\n              </ViewAtom>\n            </ZSPressable>\n          </ViewAtom>\n        );\n      })}\n    </ViewAtom>\n  );\n}\n\nexport default memo(ZSRadioGroup);\n"]}
+{"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 '../../context/ThemeContext';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nfunction ZSRadioGroup({\n  options,\n  value,\n  onSelect,\n  containerStyle,\n  valueStyle,\n  disabled = false,\n  selectStyle,\n  selectLabel = '선택',\n  rowCount = 1,\n  ...props\n}: {\n  options: RadioOption[];\n  value?: RadioOption;\n  onSelect: (value: RadioOption) => void;\n  containerStyle?: ViewProps;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel?: string;\n  disabled?: boolean;\n  rowCount?: 1 | 2 | 3;\n} & ViewProps) {\n  const { palette } = useTheme();\n  const isFullWidth = rowCount === 1;\n\n  const handleSelect = useCallback((option: RadioOption) => {\n    if (!disabled) {\n      onSelect(option);\n    }\n  }, [disabled, onSelect]);\n\n  return (\n    <ViewAtom\n      style={{\n        flexDirection: isFullWidth ? 'column' : 'row',\n        flexWrap: isFullWidth ? 'nowrap' : 'wrap',\n        width: '100%',\n      }}\n      {...containerStyle}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const isSelected = value?.index === option.index;\n        const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n        const colCount = rowCount;\n        const isLastCol = (index + 1) % colCount === 0;\n        const isLastRow = Math.ceil((index + 1) / colCount) === Math.ceil(options.length / colCount);\n\n        return (\n          <ViewAtom key={option.index} style={{\n            width: rowCount === 2\n              ? '50%'\n              : rowCount === 3\n                ? '33.33%'\n                : '100%',\n            paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n            paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n            paddingBottom: isLastRow ? 0 : 10,\n          }}>\n            <ZSPressable\n              onPress={() => handleSelect(option)}\n              pressedBackgroundColor=\"transparent\"\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: 100,\n                  borderColor: setColor,\n                  backgroundColor: isSelected ? palette.background.layer1 : 'transparent',\n                }}\n              >\n                {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}\n                {!(isFullWidth) && (\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                <ViewAtom style={{ flex: 1, paddingLeft: 10, paddingRight: 12, minWidth: 0 }}>\n                  <ZSText {...valueStyle}>\n                    {option.value}\n                  </ZSText>\n                </ViewAtom>\n\n                {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n                {isFullWidth && (\n                  <ViewAtom\n                    style={{\n                      backgroundColor: isSelected\n                        ? palette.primary.main\n                        : palette.background.layer2,\n                      paddingHorizontal: 10,\n                      borderRadius: 100,\n                      minWidth: 42,\n                      minHeight: 24,\n                      justifyContent: 'center',\n                      alignItems: 'center',\n                      flexShrink: 0,\n                    }}\n                  >\n                    {isSelected ? (\n                      <SvgCheck size={18} />\n                    ) : (\n                      <ZSText typo=\"body.5\" numberOfLines={1} {...selectStyle}>\n                        {selectLabel}\n                      </ZSText>\n                    )}\n                  </ViewAtom>\n                )}\n              </ViewAtom>\n            </ZSPressable>\n          </ViewAtom>\n        );\n      })}\n    </ViewAtom>\n  );\n}\n\nexport default memo(ZSRadioGroup);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5G,UAAU,eAAgB,SAAQ,SAAS;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,mSAwC3F;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5G,UAAU,eAAgB,SAAQ,SAAS;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,mSAuC3F;AAED,eAAe,UAAU,CAAC"}

package/build/ui/ZSSkeleton/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
 import { useTheme } from "../../context/ThemeContext";
@@ -20,22 +21,11 @@ function ZSSkeleton({ isFetching, style, children, overlayColor, ...props }) {
         };
     }, [isFetching]);
     const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
         return {
             transform: [{ translateX: translateX.value }],
         };
     });
-    return isFetching ? (<View style={[style, { overflow: "hidden" }]} {...props}>
-            <View style={styles.container}>
-                {children}
-
-                <Animated.View style={[styles.shimmer, animatedStyle]}>
-                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
-                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
-                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
-                </Animated.View>
-            </View>
-        </View>) : (children);
+    return isFetching ? (_jsx(View, { style: [style, { overflow: "hidden" }], ...props, children: _jsxs(View, { style: styles.container, children: [children, _jsxs(Animated.View, { style: [styles.shimmer, animatedStyle], children: [_jsx(View, { style: [styles.shimmerSub, { backgroundColor: effectColor }] }), _jsx(View, { style: [styles.shimmerCenter, { backgroundColor: effectColor }] }), _jsx(View, { style: [styles.shimmerSub, { backgroundColor: effectColor }] })] })] }) })) : (children);
 }
 export default ZSSkeleton;
 const styles = StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonProps extends ViewProps {\n    isFetching?: boolean;\n    style?: StyleProp<ViewStyle>;\n    children?: React.ReactNode;\n    overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor, ...props }: ZSSkeletonProps) {\n    const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n    const { palette } = useTheme();\n    const effectColor = overlayColor || palette.background.base;\n\n    useEffect(() => {\n        if (isFetching) {\n            translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n        } else {\n            cancelAnimation(translateX);\n            translateX.value = -DEVICE_WIDTH * 1.2;\n        }\n\n        return () => {\n            cancelAnimation(translateX);\n        };\n    }, [isFetching]);\n\n    const animatedStyle = useAnimatedStyle(() => {\n        \"worklet\";\n        return {\n            transform: [{ translateX: translateX.value }],\n        };\n    });\n\n    return isFetching ? (\n        <View style={[style, { overflow: \"hidden\" }]} {...props}>\n            <View style={styles.container}>\n                {children}\n\n                <Animated.View style={[styles.shimmer, animatedStyle]}>\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                </Animated.View>\n            </View>\n        </View>\n    ) : (\n        children\n    );\n}\n\nexport default ZSSkeleton;\n\nconst styles = StyleSheet.create({\n    container: {\n        overflow: \"hidden\",\n        opacity: 0.6,\n        width: \"100%\",\n    },\n    shimmer: {\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        flexDirection: \"row\",\n    },\n    shimmerSub: {\n        height: \"100%\",\n        opacity: 0.3,\n        width: DEVICE_WIDTH * 0.3,\n    },\n    shimmerCenter: {\n        height: \"100%\",\n        opacity: 0.6,\n        width: DEVICE_WIDTH * 0.4,\n    },\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonProps extends ViewProps {\n    isFetching?: boolean;\n    style?: StyleProp<ViewStyle>;\n    children?: React.ReactNode;\n    overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor, ...props }: ZSSkeletonProps) {\n    const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n    const { palette } = useTheme();\n    const effectColor = overlayColor || palette.background.base;\n\n    useEffect(() => {\n        if (isFetching) {\n            translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n        } else {\n            cancelAnimation(translateX);\n            translateX.value = -DEVICE_WIDTH * 1.2;\n        }\n\n        return () => {\n            cancelAnimation(translateX);\n        };\n    }, [isFetching]);\n\n    const animatedStyle = useAnimatedStyle(() => {\n        return {\n            transform: [{ translateX: translateX.value }],\n        };\n    });\n\n    return isFetching ? (\n        <View style={[style, { overflow: \"hidden\" }]} {...props}>\n            <View style={styles.container}>\n                {children}\n\n                <Animated.View style={[styles.shimmer, animatedStyle]}>\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                </Animated.View>\n            </View>\n        </View>\n    ) : (\n        children\n    );\n}\n\nexport default ZSSkeleton;\n\nconst styles = StyleSheet.create({\n    container: {\n        overflow: \"hidden\",\n        opacity: 0.6,\n        width: \"100%\",\n    },\n    shimmer: {\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        flexDirection: \"row\",\n    },\n    shimmerSub: {\n        height: \"100%\",\n        opacity: 0.3,\n        width: DEVICE_WIDTH * 0.3,\n    },\n    shimmerCenter: {\n        height: \"100%\",\n        opacity: 0.6,\n        width: DEVICE_WIDTH * 0.4,\n    },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAmB,SAAQ,SAAS;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,KAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAwCtG;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAmB,SAAQ,SAAS;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,KAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAuCtG;AAED,eAAe,aAAa,CAAC"}

package/build/ui/ZSSkeletonBox/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
 import { useTheme } from "../../context/ThemeContext";
@@ -15,26 +16,17 @@ function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...prop
         };
     }, []);
     const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
         return {
             transform: [{ translateX: translateX.value }],
         };
     });
-    return (<View style={[{ width: '100%' }, style, { height, overflow: "hidden" }]} {...props}>
-            <ZSView style={[
-            styles.container,
-            {
-                width: DEVICE_WIDTH,
-                height,
-            },
-        ]} color={color}>
-                <Animated.View style={[styles.shimmer, animatedStyle]}>
-                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
-                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
-                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
-                </Animated.View>
-            </ZSView>
-        </View>);
+    return (_jsx(View, { style: [{ width: '100%' }, style, { height, overflow: "hidden" }], ...props, children: _jsx(ZSView, { style: [
+                styles.container,
+                {
+                    width: DEVICE_WIDTH,
+                    height,
+                },
+            ], color: color, children: _jsxs(Animated.View, { style: [styles.shimmer, animatedStyle], children: [_jsx(View, { style: [styles.shimmerSub, { backgroundColor: effectColor }] }), _jsx(View, { style: [styles.shimmerCenter, { backgroundColor: effectColor }] }), _jsx(View, { style: [styles.shimmerSub, { backgroundColor: effectColor }] })] }) }) }));
 }
 export default ZSSkeletonBox;
 const styles = StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport ZSView from \"../ZSView\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonBoxProps extends ViewProps {\n    height: number;\n    style?: StyleProp<ViewStyle>;\n    overlayColor?: string;\n    color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...props }: ZSSkeletonBoxProps) {\n    const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n    const { palette } = useTheme();\n    const effectColor = overlayColor || palette.background.layer1;\n\n    useEffect(() => {\n        translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n\n        return () => {\n            cancelAnimation(translateX);\n        };\n    }, []);\n\n    const animatedStyle = useAnimatedStyle(() => {\n        \"worklet\";\n        return {\n            transform: [{ translateX: translateX.value }],\n        };\n    });\n\n    return (\n        <View style={[{ width: '100%' }, style, { height, overflow: \"hidden\" }]} {...props}>\n            <ZSView\n                style={[\n                    styles.container,\n                    {\n                        width: DEVICE_WIDTH,\n                        height,\n                    },\n                ]}\n                color={color}\n            >\n                <Animated.View style={[styles.shimmer, animatedStyle]}>\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                </Animated.View>\n            </ZSView>\n        </View>\n    );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n    container: {\n        overflow: \"hidden\",\n        opacity: 0.4,\n    },\n    shimmer: {\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        flexDirection: \"row\",\n    },\n    shimmerSub: {\n        height: \"100%\",\n        backgroundColor: \"#ebebeb\",\n        opacity: 0.3,\n        width: DEVICE_WIDTH * 0.3,\n    },\n    shimmerCenter: {\n        height: \"100%\",\n        backgroundColor: \"#f5f5f5\",\n        opacity: 0.7,\n        width: DEVICE_WIDTH * 0.4,\n    },\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport ZSView from \"../ZSView\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonBoxProps extends ViewProps {\n    height: number;\n    style?: StyleProp<ViewStyle>;\n    overlayColor?: string;\n    color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...props }: ZSSkeletonBoxProps) {\n    const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n    const { palette } = useTheme();\n    const effectColor = overlayColor || palette.background.layer1;\n\n    useEffect(() => {\n        translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n\n        return () => {\n            cancelAnimation(translateX);\n        };\n    }, []);\n\n    const animatedStyle = useAnimatedStyle(() => {\n        return {\n            transform: [{ translateX: translateX.value }],\n        };\n    });\n\n    return (\n        <View style={[{ width: '100%' }, style, { height, overflow: \"hidden\" }]} {...props}>\n            <ZSView\n                style={[\n                    styles.container,\n                    {\n                        width: DEVICE_WIDTH,\n                        height,\n                    },\n                ]}\n                color={color}\n            >\n                <Animated.View style={[styles.shimmer, animatedStyle]}>\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n                    <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n                </Animated.View>\n            </ZSView>\n        </View>\n    );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n    container: {\n        overflow: \"hidden\",\n        opacity: 0.4,\n    },\n    shimmer: {\n        width: \"100%\",\n        height: \"100%\",\n        position: \"absolute\",\n        flexDirection: \"row\",\n    },\n    shimmerSub: {\n        height: \"100%\",\n        backgroundColor: \"#ebebeb\",\n        opacity: 0.3,\n        width: DEVICE_WIDTH * 0.3,\n    },\n    shimmerCenter: {\n        height: \"100%\",\n        backgroundColor: \"#f5f5f5\",\n        opacity: 0.7,\n        width: DEVICE_WIDTH * 0.4,\n    },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzF,UAAU,aAAc,SAAQ,SAAS;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,KAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAsB,EACtB,GAAG,KAAK,EACT,EAAE,aAAa,qBAkEf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzF,UAAU,aAAc,SAAQ,SAAS;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,KAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAsB,EACtB,GAAG,KAAK,EACT,EAAE,aAAa,qBAyCf;AAED,eAAe,QAAQ,CAAC"}

package/build/ui/ZSSwitch/index.js

@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from "react-native";
-import Animated, { interpolate, interpolateColor, useAnimatedStyle, withTiming, useDerivedValue, } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { useTheme } from "../../context/ThemeContext";
+const SWITCH_TRANSITION_DURATION = 200;
+const SWITCH_TRANSITION = {
+    transitionDuration: SWITCH_TRANSITION_DURATION,
+    transitionTimingFunction: 'ease-in-out',
+};
 function ZSSwitch({ isActive = false, onToggle, style, width = 50, trackColorInactive, trackColorActive, thumbColor = '#ffffff', ...props }) {
-    const [toggledWidth, setToggledWidth] = useState(0);
     const { palette } = useTheme();
     const height = width * 0.6;
     const padding = width * 0.04;
@@ -12,39 +16,28 @@ function ZSSwitch({ isActive = false, onToggle, style, width = 50, trackColorIna
     const thumbBorderRadius = thumbSize / 2;
     const inactiveColor = trackColorInactive ?? palette.grey[30];
     const activeColor = trackColorActive ?? palette.primary.main;
-    const toggleProgress = useDerivedValue(() => {
-        return withTiming(isActive ? 1 : 0, { duration: 200 });
-    }, [isActive]);
-    const colorAnimation = useAnimatedStyle(() => {
-        'worklet';
-        const color = interpolateColor(toggleProgress.value, [0, 1], [inactiveColor, activeColor]);
-        return { backgroundColor: color };
-    }, [inactiveColor, activeColor]);
-    const togglePositionAnimation = useAnimatedStyle(() => {
-        'worklet';
-        const positionStyle = interpolate(toggleProgress.value, [0, 1], [0, toggledWidth - thumbSize - padding * 2], 'clamp');
-        return {
-            transform: [{ translateX: positionStyle }],
-        };
-    }, [toggledWidth, thumbSize, padding]);
+    const thumbTranslateX = isActive ? width - thumbSize - padding * 2 : 0;
     const toggleStyle = {
         width,
         height,
         borderRadius: toggleBorderRadius,
         padding,
         justifyContent: "center",
+        backgroundColor: isActive ? activeColor : inactiveColor,
+        transitionProperty: 'backgroundColor',
+        ...SWITCH_TRANSITION,
     };
     const thumbStyle = {
         width: thumbSize,
         height: thumbSize,
         borderRadius: thumbBorderRadius,
         justifyContent: "center",
+        backgroundColor: thumbColor,
+        transform: [{ translateX: thumbTranslateX }],
+        transitionProperty: 'transform',
+        ...SWITCH_TRANSITION,
     };
-    return (<Pressable onPress={onToggle} style={style} {...props}>
-      <Animated.View style={[colorAnimation, toggleStyle]} onLayout={e => setToggledWidth(e.nativeEvent.layout.width)}>
-        <Animated.View style={[togglePositionAnimation, thumbStyle, { backgroundColor: thumbColor }]}/>
-      </Animated.View>
-    </Pressable>);
+    return (_jsx(Pressable, { onPress: onToggle, style: style, ...props, children: _jsx(Animated.View, { style: toggleStyle, children: _jsx(Animated.View, { style: thumbStyle }) }) }));
 }
 ;
 export default ZSSwitch;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport { type StyleProp, type ViewStyle, Pressable, type ViewProps } from \"react-native\";\nimport Animated, {\n  interpolate,\n  interpolateColor,\n  useAnimatedStyle,\n  withTiming,\n  useDerivedValue,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\ninterface ZSSwitchProps extends ViewProps {\n  isActive: boolean;\n  onToggle: () => void;\n  style?: StyleProp<ViewStyle>;\n  width?: number;\n  trackColorInactive?: string;\n  trackColorActive?: string;\n  thumbColor?: string;\n}\n\nfunction ZSSwitch({\n  isActive = false,\n  onToggle,\n  style,\n  width = 50,\n  trackColorInactive,\n  trackColorActive,\n  thumbColor = '#ffffff',\n  ...props\n}: ZSSwitchProps) {\n  const [toggledWidth, setToggledWidth] = useState(0);\n  const { palette } = useTheme();\n  const height = width * 0.6;\n  const padding = width * 0.04;\n  const thumbSize = height - padding * 2;\n  const toggleBorderRadius = height * 1.2;\n  const thumbBorderRadius = thumbSize / 2;\n\n  const inactiveColor = trackColorInactive ?? palette.grey[30];\n  const activeColor = trackColorActive ?? palette.primary.main;\n\n  const toggleProgress = useDerivedValue(() => {\n    return withTiming(isActive ? 1 : 0, { duration: 200 });\n  }, [isActive]);\n\n  const colorAnimation = useAnimatedStyle(() => {\n    'worklet';\n    const color = interpolateColor(\n      toggleProgress.value,\n      [0, 1],\n      [inactiveColor, activeColor],\n    );\n\n    return { backgroundColor: color };\n  }, [inactiveColor, activeColor]);\n\n  const togglePositionAnimation = useAnimatedStyle(() => {\n    'worklet';\n    const positionStyle = interpolate(\n      toggleProgress.value,\n      [0, 1],\n      [0, toggledWidth - thumbSize - padding * 2],\n      'clamp',\n    );\n\n    return {\n      transform: [{ translateX: positionStyle }],\n    };\n  }, [toggledWidth, thumbSize, padding]);\n\n  const toggleStyle = {\n    width,\n    height,\n    borderRadius: toggleBorderRadius,\n    padding,\n    justifyContent: \"center\" as const,\n  };\n\n  const thumbStyle = {\n    width: thumbSize,\n    height: thumbSize,\n    borderRadius: thumbBorderRadius,\n    justifyContent: \"center\" as const,\n  };\n\n  return (\n    <Pressable onPress={onToggle} style={style} {...props}>\n      <Animated.View\n        style={[colorAnimation, toggleStyle]}\n        onLayout={e => setToggledWidth(e.nativeEvent.layout.width)}\n      >\n        <Animated.View style={[togglePositionAnimation, thumbStyle, { backgroundColor: thumbColor }]} />\n      </Animated.View>\n    </Pressable>\n  );\n};\n\nexport default ZSSwitch;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAkC,SAAS,EAAkB,MAAM,cAAc,CAAC;AACzF,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,iBAAiB,GAAG;IACxB,kBAAkB,EAAE,0BAA0B;IAC9C,wBAAwB,EAAE,aAAa;CAC/B,CAAC;AAYX,SAAS,QAAQ,CAAC,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,KAAK,EACL,KAAK,GAAG,EAAE,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GAAG,SAAS,EACtB,GAAG,KAAK,EACM;IACd,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,KAAK,GAAG,GAAG,CAAC;IAC3B,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IAC7B,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,GAAG,GAAG,CAAC;IACxC,MAAM,iBAAiB,GAAG,SAAS,GAAG,CAAC,CAAC;IAExC,MAAM,aAAa,GAAG,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,gBAAgB,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;IAC7D,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG;QAClB,KAAK;QACL,MAAM;QACN,YAAY,EAAE,kBAAkB;QAChC,OAAO;QACP,cAAc,EAAE,QAAiB;QACjC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa;QACvD,kBAAkB,EAAE,iBAA0B;QAC9C,GAAG,iBAAiB;KACrB,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,iBAAiB;QAC/B,cAAc,EAAE,QAAiB;QACjC,eAAe,EAAE,UAAU;QAC3B,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;QAC5C,kBAAkB,EAAE,WAAoB;QACxC,GAAG,iBAAiB;KACrB,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,YACnD,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,WAAW,YAC/B,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,GACtB,GACN,CACb,CAAC;AACJ,CAAC;AAAA,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React from \"react\";\nimport { type StyleProp, type ViewStyle, Pressable, type ViewProps } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst SWITCH_TRANSITION_DURATION = 200;\nconst SWITCH_TRANSITION = {\n  transitionDuration: SWITCH_TRANSITION_DURATION,\n  transitionTimingFunction: 'ease-in-out',\n} as const;\n\ninterface ZSSwitchProps extends ViewProps {\n  isActive: boolean;\n  onToggle: () => void;\n  style?: StyleProp<ViewStyle>;\n  width?: number;\n  trackColorInactive?: string;\n  trackColorActive?: string;\n  thumbColor?: string;\n}\n\nfunction ZSSwitch({\n  isActive = false,\n  onToggle,\n  style,\n  width = 50,\n  trackColorInactive,\n  trackColorActive,\n  thumbColor = '#ffffff',\n  ...props\n}: ZSSwitchProps) {\n  const { palette } = useTheme();\n  const height = width * 0.6;\n  const padding = width * 0.04;\n  const thumbSize = height - padding * 2;\n  const toggleBorderRadius = height * 1.2;\n  const thumbBorderRadius = thumbSize / 2;\n\n  const inactiveColor = trackColorInactive ?? palette.grey[30];\n  const activeColor = trackColorActive ?? palette.primary.main;\n  const thumbTranslateX = isActive ? width - thumbSize - padding * 2 : 0;\n\n  const toggleStyle = {\n    width,\n    height,\n    borderRadius: toggleBorderRadius,\n    padding,\n    justifyContent: \"center\" as const,\n    backgroundColor: isActive ? activeColor : inactiveColor,\n    transitionProperty: 'backgroundColor' as const,\n    ...SWITCH_TRANSITION,\n  };\n\n  const thumbStyle = {\n    width: thumbSize,\n    height: thumbSize,\n    borderRadius: thumbBorderRadius,\n    justifyContent: \"center\" as const,\n    backgroundColor: thumbColor,\n    transform: [{ translateX: thumbTranslateX }],\n    transitionProperty: 'transform' as const,\n    ...SWITCH_TRANSITION,\n  };\n\n  return (\n    <Pressable onPress={onToggle} style={style} {...props}>\n      <Animated.View style={toggleStyle}>\n        <Animated.View style={thumbStyle} />\n      </Animated.View>\n    </Pressable>\n  );\n};\n\nexport default ZSSwitch;\n"]}

package/build/ui/ZSText/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "../../context/ThemeContext";
 import TextAtom from "../atoms/TextAtom";
 function isColorMap(value) {
@@ -18,7 +18,7 @@ function ZSText({ typo = 'body.2', color = 'base', ...props }) {
         const semanticPalette = palette[c01];
         return isColorMap(semanticPalette) ? semanticPalette[c02] : undefined;
     })();
-    return <TextAtom {...props} style={[typography[s01][s02], { color: textColor }, props.style]}>{props.children}</TextAtom>;
+    return _jsx(TextAtom, { ...props, style: [typography[s01][s02], { color: textColor }, props.style], children: props.children });
 }
 export default 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,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":";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"]}

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,sGA+Pf,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,sGAkPf,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/build/ui/ZSTextField/index.js

@@ -1,4 +1,5 @@
-import { useMemo, useCallback, useState, forwardRef, useEffect } from 'react';
+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 ButtonClose from './ui/ButtonClose';
@@ -15,19 +16,20 @@ 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 labelProgress = useSharedValue(value !== '' ? 1 : 0);
-    const focusProgress = useSharedValue(0);
-    const errorProgress = useSharedValue(0);
+    const floatProgress = useSharedValue(value !== '' ? 1 : 0);
     const [isFocusedForUI, setIsFocusedForUI] = useState(false);
     const boxHeightValue = useSharedValue(0);
     const isError = status === 'error';
     const hasValue = value !== '';
+    const isFocusedRef = useRef(false);
+    const hasValueRef = useRef(hasValue);
+    hasValueRef.current = hasValue;
     useEffect(() => {
-        labelProgress.value = withTiming(hasValue ? 1 : 0, TIMING_CONFIG);
+        const target = hasValue ? 1 : 0;
+        if (!isFocusedRef.current && floatProgress.value !== target) {
+            floatProgress.value = withTiming(target, TIMING_CONFIG);
+        }
     }, [hasValue]);
-    useEffect(() => {
-        errorProgress.value = withTiming(isError ? 1 : 0, TIMING_CONFIG);
-    }, [isError]);
     const animationConstants = useMemo(() => ({
         baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),
         targetFontSize: boxStyle === 'inbox' ? 10 : 11,
@@ -35,16 +37,13 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         targetTopOffset: boxStyle === 'inbox' ? 17 : 2,
     }), [fontSize, boxStyle, isTextArea]);
     const animatedLabelStyle = useAnimatedStyle(() => {
-        'worklet';
-        const progress = Math.max(labelProgress.value, focusProgress.value);
+        const progress = floatProgress.value;
         const labelTranslateY = interpolate(progress, [0, 1], [
             0,
             isTextArea ? -24 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset - animationConstants.baseTop,
         ], 'clamp');
         const labelScale = interpolate(progress, [0, 1], [1, animationConstants.targetFontSize / animationConstants.baseFontSize], 'clamp');
         return {
-            top: animationConstants.baseTop,
-            transformOrigin: 'left center',
             transform: [
                 { translateY: labelTranslateY },
                 { scale: labelScale },
@@ -56,11 +55,18 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         boxHeightValue.value = height;
     }, []);
     const handleFocus = useCallback(() => {
-        focusProgress.value = withTiming(1, TIMING_CONFIG);
+        isFocusedRef.current = true;
+        if (floatProgress.value !== 1) {
+            floatProgress.value = withTiming(1, TIMING_CONFIG);
+        }
         setIsFocusedForUI(true);
     }, []);
     const handleBlur = useCallback(() => {
-        focusProgress.value = withTiming(0, TIMING_CONFIG);
+        isFocusedRef.current = false;
+        const target = hasValueRef.current ? 1 : 0;
+        if (floatProgress.value !== target) {
+            floatProgress.value = withTiming(target, TIMING_CONFIG);
+        }
         setIsFocusedForUI(false);
     }, []);
     const colorConfig = useMemo(() => ({
@@ -70,31 +76,18 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         placeholderColor: placeHolderColor || palette.grey[40],
         errorColor: fErrorColor,
     }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);
-    const animatedColorStyle = useAnimatedStyle(() => {
-        'worklet';
-        const borderColor = errorProgress.value > 0
-            ? colorConfig.errorColor
-            : focusProgress.value > 0
-                ? colorConfig.primaryColor
-                : colorConfig.defaultBorderColor;
-        return {
-            borderColor,
-        };
-    }, [colorConfig]);
-    const animatedLabelColorStyle = useAnimatedStyle(() => {
-        'worklet';
-        const floatProgress = Math.max(labelProgress.value, focusProgress.value);
-        const labelColor = errorProgress.value > 0
-            ? colorConfig.errorColor
-            : focusProgress.value > 0
-                ? colorConfig.primaryColor
-                : floatProgress > 0
-                    ? colorConfig.defaultLabelColor
-                    : colorConfig.placeholderColor;
-        return {
-            color: labelColor,
-        };
-    }, [colorConfig]);
+    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%',
@@ -137,22 +130,24 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         }
         return { ...baseStyle, ...borderStyle, ...innerStyle };
     }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);
-    const labelTextStyle = {
+    const labelTextStyle = useMemo(() => ({
         fontSize,
+        top: animationConstants.baseTop,
         left: paddingHorizontal,
+        transformOrigin: 'left center',
         backgroundColor: labelBgColor || palette.background.base,
         paddingHorizontal: boxStyle === 'outline' ? 5 : 0,
         paddingVertical: 2,
         textAlignVertical: 'center',
         fontFamily,
         borderRadius: boxStyle === 'outline' ? 5 : 0,
-        overflow: 'hidden',
-    };
+        ...(Platform.OS === 'android' ? { overflow: 'hidden' } : {}),
+    }), [fontSize, animationConstants.baseTop, paddingHorizontal, labelBgColor, palette.background.base, boxStyle, fontFamily]);
     const handleTextChange = (text) => {
         if (onChangeText)
             onChangeText(text);
     };
-    const textInputStyle = [
+    const textInputStyle = useMemo(() => [
         {
             paddingTop: 7 + iosOffset,
             paddingBottom: 5 + iosOffset,
@@ -164,24 +159,10 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
         },
         textInputProps?.style,
-    ];
+    ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);
     const shouldShowCloseButton = value && isFocusedForUI;
     const shouldShowError = status === 'error' && errorMessage;
-    return (<ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>
-      <Animated.View style={[styleConfig, animatedColorStyle]} onLayout={handleLayout} pointerEvents={disabled ? 'none' : 'auto'}>
-        <TextInput {...textInputProps} ref={ref} style={textInputStyle} value={value} onFocus={handleFocus} onBlur={handleBlur} onChangeText={handleTextChange} allowFontScaling={allowFontScaling} selectionColor={palette.grey[50]} autoCorrect={false} spellCheck={false}/>
-
-        <ViewAtom pointerEvents="none" style={{ position: 'absolute' }}>
-          <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, animatedLabelColorStyle]}>
-            {label}
-          </Animated.Text>
-        </ViewAtom>
-
-        {shouldShowCloseButton && (<ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText}/>)}
-      </Animated.View>
-
-      {shouldShowError && (<ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor}/>)}
-    </ViewAtom>);
+    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 }))] }));
 });
 ZSTextField.displayName = 'ZSTextField';
 export default ZSTextField;