@0610studio/zs-ui 0.18.1 → 0.19.0

package/build/ui/ZSTextField/index.js

@@ -6,11 +6,12 @@ import ButtonClose from './ui/ButtonClose';
 import ErrorComponent from './ui/ErrorComponent';
 import { extractStyle } from '../../model/utils';
 import { useTheme } from '../../context/ThemeContext';
+import { DISABLED_OPACITY, DURATION, RADIUS } from '../../theme/tokens';
 import ViewAtom from '../atoms/ViewAtom';
 const iosOffset = Platform.OS === 'ios' ? 8 : 4;
-const ANIM_DURATION = 150;
+const ANIM_DURATION = DURATION.fast;
 const TIMING_CONFIG = { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System };
-const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth = 1.2, borderColor, focusColor, errorColor, borderRadius = 14, paddingHorizontal = 15, errorMessage, textInputProps, boxStyle = 'outline', innerBoxStyle, disabled = false, allowFontScaling = true, isTextArea = false, }, ref) => {
+const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth = 1.2, borderColor, focusColor, errorColor, borderRadius = RADIUS.lg, paddingHorizontal = 15, errorMessage, textInputProps, boxStyle = 'outline', innerBoxStyle, disabled = false, allowFontScaling = true, isTextArea = false, }, ref) => {
     const { typography, palette } = useTheme();
     const [primaryStyle, subStyle] = typo.split('.');
     const fErrorColor = errorColor || palette.danger.main;
@@ -80,7 +81,7 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             boxHeightValue.value = height;
         }
     }, []);
-    const handleFocus = useCallback(() => {
+    const handleFocus = useCallback((event) => {
         isFocusedRef.current = true;
         if (floatProgress.value !== 1) {
             floatProgress.value = withTiming(1, TIMING_CONFIG);
@@ -89,8 +90,9 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             focusProgress.value = withTiming(1, TIMING_CONFIG);
         }
         setIsFocusedForUI(true);
-    }, []);
-    const handleBlur = useCallback(() => {
+        textInputProps?.onFocus?.(event);
+    }, [textInputProps?.onFocus]);
+    const handleBlur = useCallback((event) => {
         isFocusedRef.current = false;
         const target = hasValueRef.current ? 1 : 0;
         if (floatProgress.value !== target) {
@@ -100,7 +102,8 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
             focusProgress.value = withTiming(0, TIMING_CONFIG);
         }
         setIsFocusedForUI(false);
-    }, []);
+        textInputProps?.onBlur?.(event);
+    }, [textInputProps?.onBlur]);
     const styleConfig = useMemo(() => {
         const baseStyle = {
             width: '100%',
@@ -156,10 +159,10 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
     }), [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);
-    };
+    const handleTextChange = useCallback((text) => {
+        onChangeText?.(text);
+        textInputProps?.onChangeText?.(text);
+    }, [onChangeText, textInputProps?.onChangeText]);
     const textInputStyle = useMemo(() => [
         {
             paddingTop: 7 + iosOffset,
@@ -173,9 +176,10 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
         },
         textInputProps?.style,
     ], [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(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 }))] }));
+    // 빈 문자열이 View 자식으로 렌더되지 않도록 boolean 으로 강제 (web 'Unexpected text node' 경고 방지)
+    const shouldShowCloseButton = Boolean(value) && isFocusedForUI;
+    const shouldShowError = status === 'error' && errorMessage !== undefined && errorMessage !== '';
+    return (_jsxs(ViewAtom, { style: { alignSelf: 'stretch', width: '100%', opacity: disabled ? DISABLED_OPACITY : 1 }, 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, 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"]}
+{"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 { DISABLED_OPACITY, DURATION, RADIUS } from '../../theme/tokens';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\nconst ANIM_DURATION = DURATION.fast;\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 = RADIUS.lg,\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<NonNullable<TextInputProps['onFocus']>>((event) => {\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    textInputProps?.onFocus?.(event);\n  }, [textInputProps?.onFocus]);\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>((event) => {\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    textInputProps?.onBlur?.(event);\n  }, [textInputProps?.onBlur]);\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 = useCallback((text: string) => {\n    onChangeText?.(text);\n    textInputProps?.onChangeText?.(text);\n  }, [onChangeText, textInputProps?.onChangeText]);\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  // 빈 문자열이 View 자식으로 렌더되지 않도록 boolean 으로 강제 (web 'Unexpected text node' 경고 방지)\n  const shouldShowCloseButton = Boolean(value) && isFocusedForUI;\n  const shouldShowError = status === 'error' && errorMessage !== undefined && errorMessage !== '';\n\n  return (\n    <ViewAtom style={{ alignSelf: 'stretch', width: '100%', opacity: disabled ? DISABLED_OPACITY : 1 }}>\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/ZSTextField/ui/ButtonClose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonClose.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAG5E,QAAA,MAAM,WAAW,GAAI,uCAIlB;IACC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,qBAAqB,gCAUxB,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ButtonClose.d.ts","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAK5E,QAAA,MAAM,WAAW,GAAI,uCAIlB;IACC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,qBAAqB,gCAYxB,CAAA;AAED,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TouchableOpacity } from "react-native";
 import { SvgX } from "../../../assets/SvgX";
+import { useTheme } from "../../../context/ThemeContext";
+import { RADIUS } from "../../../theme/tokens";
 const ButtonClose = ({ onChangeText, marginTop, ...props }) => {
-    return (_jsx(TouchableOpacity, { style: { position: 'absolute', padding: 3, right: 15, borderRadius: 30, backgroundColor: '#e6e6e6', justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }, hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, onPress: () => { onChangeText?.(''); }, ...props, children: _jsx(SvgX, { color: "#5E696E" }) }));
+    const { palette } = useTheme();
+    return (_jsx(TouchableOpacity, { style: { position: 'absolute', padding: 3, right: 15, borderRadius: RADIUS.pill, backgroundColor: palette.grey[30], justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }, hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, onPress: () => { onChangeText?.(''); }, ...props, children: _jsx(SvgX, { color: palette.grey[60] }) }));
 };
 export default ButtonClose;
 //# sourceMappingURL=ButtonClose.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonClose.js","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EAIa,EAAE,EAAE;IACzB,OAAO,CACH,KAAC,gBAAgB,IACb,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EACxL,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EACrD,OAAO,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAClC,KAAK,YACT,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,GAAG,GACT,CACtB,CAAA;AACL,CAAC,CAAA;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { TouchableOpacity, type TouchableOpacityProps } from \"react-native\";\nimport { SvgX } from \"../../../assets/SvgX\";\n\nconst ButtonClose = ({\n    onChangeText,\n    marginTop,\n    ...props\n}: {\n    onChangeText?: (text: string) => void;\n    marginTop?: number;\n} & TouchableOpacityProps) => {\n    return (\n        <TouchableOpacity\n            style={{ position: 'absolute', padding: 3, right: 15, borderRadius: 30, backgroundColor: '#e6e6e6', justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }}\n            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}\n            onPress={() => { onChangeText?.(''); }}\n            {...props}>\n            <SvgX color=\"#5E696E\" />\n        </TouchableOpacity>\n    )\n}\n\nexport default ButtonClose;\n"]}
+{"version":3,"file":"ButtonClose.js","sourceRoot":"","sources":["../../../../src/ui/ZSTextField/ui/ButtonClose.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EAIa,EAAE,EAAE;IACzB,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,OAAO,CACH,KAAC,gBAAgB,IACb,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EACxM,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EACrD,OAAO,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAClC,KAAK,YACT,KAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI,GAClB,CACtB,CAAA;AACL,CAAC,CAAA;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { TouchableOpacity, type TouchableOpacityProps } from \"react-native\";\nimport { SvgX } from \"../../../assets/SvgX\";\nimport { useTheme } from \"../../../context/ThemeContext\";\nimport { RADIUS } from \"../../../theme/tokens\";\n\nconst ButtonClose = ({\n    onChangeText,\n    marginTop,\n    ...props\n}: {\n    onChangeText?: (text: string) => void;\n    marginTop?: number;\n} & TouchableOpacityProps) => {\n    const { palette } = useTheme();\n\n    return (\n        <TouchableOpacity\n            style={{ position: 'absolute', padding: 3, right: 15, borderRadius: RADIUS.pill, backgroundColor: palette.grey[30], justifyContent: 'center', alignItems: 'center', ...marginTop && { top: marginTop } }}\n            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}\n            onPress={() => { onChangeText?.(''); }}\n            {...props}>\n            <SvgX color={palette.grey[60]} />\n        </TouchableOpacity>\n    )\n}\n\nexport default ButtonClose;\n"]}

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import type { TypoOptions } from "../../theme/types";
+export type ZSTooltipPlacement = 'top' | 'bottom';
+export type ZSTooltipTailAlign = 'start' | 'center' | 'end';
+export interface ZSTooltipProps extends ViewProps {
+    /** 말풍선 메시지 (children 지정 시 children 우선) */
+    message?: string;
+    /** 커스텀 콘텐츠 */
+    children?: React.ReactNode;
+    /** 표시 여부를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 동작) */
+    visible?: boolean;
+    /** 비제어 모드의 초기 표시 상태 */
+    initialVisible?: boolean;
+    /** 닫기 버튼 탭 시 호출 */
+    onClose?: () => void;
+    /** 앵커 기준 말풍선 위치 — top 이면 꼬리가 아래를 향함 (기본: top) */
+    placement?: ZSTooltipPlacement;
+    /** true면 닫기(X) 버튼 표시 */
+    showClose?: boolean;
+    /** true면 위아래로 살짝 떠다니는 애니메이션 */
+    floating?: boolean;
+    /** 말풍선 배경색 (기본: 테마 반전 색 — light 는 어두운 배경, dark 는 밝은 배경) */
+    backgroundColor?: string;
+    /** 메시지·닫기 아이콘 색 (기본: palette.background.base) */
+    textColor?: string;
+    typo?: TypoOptions;
+    /** 꼬리 정렬 (기본: start) */
+    tailAlign?: ZSTooltipTailAlign;
+    /** start/end 정렬 시 가장자리에서 꼬리까지의 간격 */
+    tailOffset?: number;
+    closeAccessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ZSTooltip({ message, children, visible, initialVisible, onClose, placement, showClose, floating, backgroundColor, textColor, typo, tailAlign, tailOffset, closeAccessibilityLabel, style, ...props }: ZSTooltipProps): React.JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof ZSTooltip>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAmB3G,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAqB,EACrB,OAAO,EACP,SAAiB,EACjB,SAAiB,EACjB,QAAgB,EAChB,eAAe,EACf,SAAS,EACT,IAAe,EACf,SAAmB,EACnB,UAAe,EACf,uBAAiC,EACjC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,4BAgGhB;;AAED,wBAAqC"}

package/build/ui/ZSTooltip/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { cancelAnimation, Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming, } from "react-native-reanimated";
+import ZSText from "../ZSText";
+import { useTheme } from "../../context/ThemeContext";
+import { DURATION, RADIUS } from "../../theme/tokens";
+import { SvgX } from "../../assets/SvgX";
+import { SvgTooltipTail } from "../../assets/SvgTooltipTail";
+const FLOATING_START_DELAY = 220;
+const FLOATING_ANIMATION_DURATION = 1100;
+const FLOATING_OFFSET = 2;
+const TAIL_WIDTH = 12;
+const TAIL_HEIGHT = 7;
+const CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+function ZSTooltip({ message, children, visible, initialVisible = true, onClose, placement = 'top', showClose = false, floating = false, backgroundColor, textColor, typo = 'body.4', tailAlign = 'start', tailOffset = 16, closeAccessibilityLabel = '툴팁 닫기', style, ...props }) {
+    const { palette } = useTheme();
+    const [internalVisible, setInternalVisible] = useState(initialVisible);
+    const isVisible = visible ?? internalVisible;
+    const floatingTranslateY = useSharedValue(0);
+    // 테마 반전 표면: light 는 어두운 말풍선 + 밝은 텍스트, dark 는 그 반대
+    const bubbleColor = backgroundColor ?? palette.grey[90];
+    const contentColor = textColor ?? palette.background.base;
+    useEffect(() => {
+        if (!floating || !isVisible)
+            return;
+        floatingTranslateY.value = 0;
+        floatingTranslateY.value = withDelay(FLOATING_START_DELAY, withRepeat(withTiming(-FLOATING_OFFSET, {
+            duration: FLOATING_ANIMATION_DURATION,
+            easing: Easing.inOut(Easing.ease),
+        }), -1, true));
+        return () => {
+            cancelAnimation(floatingTranslateY);
+        };
+    }, [floating, isVisible, floatingTranslateY]);
+    const floatingStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: floatingTranslateY.value }],
+    }));
+    const handleClose = () => {
+        if (visible === undefined)
+            setInternalVisible(false);
+        onClose?.();
+    };
+    if (!isVisible)
+        return null;
+    const isTop = placement === 'top';
+    const tail = (_jsx(View, { pointerEvents: 'none', style: [
+            tailAlign === 'center'
+                ? styles.tailCenter
+                : tailAlign === 'end'
+                    ? { alignSelf: 'flex-end', marginRight: tailOffset }
+                    : { alignSelf: 'flex-start', marginLeft: tailOffset },
+            // 말풍선과 꼬리 사이 헤어라인 틈 방지 오버랩 · bottom 은 180도 회전
+            isTop ? styles.tailTop : styles.tailBottom,
+        ], children: _jsx(SvgTooltipTail, { width: TAIL_WIDTH, height: TAIL_HEIGHT, color: bubbleColor }) }));
+    return (_jsx(Animated.View, { entering: (isTop ? FadeInUp : FadeInDown).duration(DURATION.fast).easing(Easing.out(Easing.quad)), exiting: (isTop ? FadeOutDown : FadeOutUp).duration(DURATION.fast).easing(Easing.in(Easing.quad)), pointerEvents: 'box-none', style: [styles.container, { shadowColor: palette.grey[100] }, style], ...props, children: _jsxs(Animated.View, { style: floatingStyle, children: [!isTop && tail, _jsx(View, { style: [styles.bubble, { backgroundColor: bubbleColor }], children: _jsxs(View, { style: styles.contentRow, children: [children ?? (_jsx(ZSText, { typo: typo, style: [styles.message, { color: contentColor }], children: message })), showClose && (_jsx(Pressable, { accessibilityLabel: closeAccessibilityLabel, accessibilityRole: 'button', hitSlop: CLOSE_HIT_SLOP, onPress: handleClose, style: styles.closeButton, testID: 'zs-tooltip-close', children: _jsx(SvgX, { size: 10, color: contentColor }) }))] }) }), isTop && tail] }) }));
+}
+export default React.memo(ZSTooltip);
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+        maxWidth: '100%',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.16,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    bubble: {
+        borderRadius: RADIUS.lg,
+        maxWidth: '100%',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    contentRow: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: 6,
+    },
+    message: {
+        flexShrink: 1,
+    },
+    closeButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 20,
+        height: 20,
+    },
+    tailCenter: {
+        alignSelf: 'center',
+    },
+    tailTop: {
+        marginTop: -0.5,
+    },
+    tailBottom: {
+        marginBottom: -0.5,
+        transform: [{ rotate: '180deg' }],
+    },
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTooltip/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Pressable, StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport Animated, {\n  cancelAnimation,\n  Easing,\n  FadeInDown,\n  FadeInUp,\n  FadeOutDown,\n  FadeOutUp,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withRepeat,\n  withTiming,\n} from \"react-native-reanimated\";\nimport ZSText from \"../ZSText\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { DURATION, RADIUS } from \"../../theme/tokens\";\nimport { SvgX } from \"../../assets/SvgX\";\nimport { SvgTooltipTail } from \"../../assets/SvgTooltipTail\";\nimport type { TypoOptions } from \"../../theme/types\";\n\nconst FLOATING_START_DELAY = 220;\nconst FLOATING_ANIMATION_DURATION = 1100;\nconst FLOATING_OFFSET = 2;\nconst TAIL_WIDTH = 12;\nconst TAIL_HEIGHT = 7;\nconst CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };\n\nexport type ZSTooltipPlacement = 'top' | 'bottom';\nexport type ZSTooltipTailAlign = 'start' | 'center' | 'end';\n\nexport interface ZSTooltipProps extends ViewProps {\n  /** 말풍선 메시지 (children 지정 시 children 우선) */\n  message?: string;\n  /** 커스텀 콘텐츠 */\n  children?: React.ReactNode;\n  /** 표시 여부를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 동작) */\n  visible?: boolean;\n  /** 비제어 모드의 초기 표시 상태 */\n  initialVisible?: boolean;\n  /** 닫기 버튼 탭 시 호출 */\n  onClose?: () => void;\n  /** 앵커 기준 말풍선 위치 — top 이면 꼬리가 아래를 향함 (기본: top) */\n  placement?: ZSTooltipPlacement;\n  /** true면 닫기(X) 버튼 표시 */\n  showClose?: boolean;\n  /** true면 위아래로 살짝 떠다니는 애니메이션 */\n  floating?: boolean;\n  /** 말풍선 배경색 (기본: 테마 반전 색 — light 는 어두운 배경, dark 는 밝은 배경) */\n  backgroundColor?: string;\n  /** 메시지·닫기 아이콘 색 (기본: palette.background.base) */\n  textColor?: string;\n  typo?: TypoOptions;\n  /** 꼬리 정렬 (기본: start) */\n  tailAlign?: ZSTooltipTailAlign;\n  /** start/end 정렬 시 가장자리에서 꼬리까지의 간격 */\n  tailOffset?: number;\n  closeAccessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\nfunction ZSTooltip({\n  message,\n  children,\n  visible,\n  initialVisible = true,\n  onClose,\n  placement = 'top',\n  showClose = false,\n  floating = false,\n  backgroundColor,\n  textColor,\n  typo = 'body.4',\n  tailAlign = 'start',\n  tailOffset = 16,\n  closeAccessibilityLabel = '툴팁 닫기',\n  style,\n  ...props\n}: ZSTooltipProps) {\n  const { palette } = useTheme();\n  const [internalVisible, setInternalVisible] = useState(initialVisible);\n  const isVisible = visible ?? internalVisible;\n  const floatingTranslateY = useSharedValue(0);\n\n  // 테마 반전 표면: light 는 어두운 말풍선 + 밝은 텍스트, dark 는 그 반대\n  const bubbleColor = backgroundColor ?? palette.grey[90];\n  const contentColor = textColor ?? palette.background.base;\n\n  useEffect(() => {\n    if (!floating || !isVisible) return;\n\n    floatingTranslateY.value = 0;\n    floatingTranslateY.value = withDelay(\n      FLOATING_START_DELAY,\n      withRepeat(\n        withTiming(-FLOATING_OFFSET, {\n          duration: FLOATING_ANIMATION_DURATION,\n          easing: Easing.inOut(Easing.ease),\n        }),\n        -1,\n        true,\n      ),\n    );\n\n    return () => {\n      cancelAnimation(floatingTranslateY);\n    };\n  }, [floating, isVisible, floatingTranslateY]);\n\n  const floatingStyle = useAnimatedStyle(() => ({\n    transform: [{ translateY: floatingTranslateY.value }],\n  }));\n\n  const handleClose = () => {\n    if (visible === undefined) setInternalVisible(false);\n    onClose?.();\n  };\n\n  if (!isVisible) return null;\n\n  const isTop = placement === 'top';\n\n  const tail = (\n    <View\n      pointerEvents='none'\n      style={[\n        tailAlign === 'center'\n          ? styles.tailCenter\n          : tailAlign === 'end'\n            ? { alignSelf: 'flex-end', marginRight: tailOffset }\n            : { alignSelf: 'flex-start', marginLeft: tailOffset },\n        // 말풍선과 꼬리 사이 헤어라인 틈 방지 오버랩 · bottom 은 180도 회전\n        isTop ? styles.tailTop : styles.tailBottom,\n      ]}\n    >\n      <SvgTooltipTail width={TAIL_WIDTH} height={TAIL_HEIGHT} color={bubbleColor} />\n    </View>\n  );\n\n  return (\n    <Animated.View\n      entering={(isTop ? FadeInUp : FadeInDown).duration(DURATION.fast).easing(Easing.out(Easing.quad))}\n      exiting={(isTop ? FadeOutDown : FadeOutUp).duration(DURATION.fast).easing(Easing.in(Easing.quad))}\n      pointerEvents='box-none'\n      style={[styles.container, { shadowColor: palette.grey[100] }, style]}\n      {...props}\n    >\n      <Animated.View style={floatingStyle}>\n        {!isTop && tail}\n        <View style={[styles.bubble, { backgroundColor: bubbleColor }]}>\n          <View style={styles.contentRow}>\n            {children ?? (\n              <ZSText typo={typo} style={[styles.message, { color: contentColor }]}>\n                {message}\n              </ZSText>\n            )}\n            {showClose && (\n              <Pressable\n                accessibilityLabel={closeAccessibilityLabel}\n                accessibilityRole='button'\n                hitSlop={CLOSE_HIT_SLOP}\n                onPress={handleClose}\n                style={styles.closeButton}\n                testID='zs-tooltip-close'\n              >\n                <SvgX size={10} color={contentColor} />\n              </Pressable>\n            )}\n          </View>\n        </View>\n        {isTop && tail}\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nexport default React.memo(ZSTooltip);\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: 'flex-start',\n    maxWidth: '100%',\n    shadowOffset: { width: 0, height: 4 },\n    shadowOpacity: 0.16,\n    shadowRadius: 8,\n    elevation: 6,\n  },\n  bubble: {\n    borderRadius: RADIUS.lg,\n    maxWidth: '100%',\n    paddingHorizontal: 12,\n    paddingVertical: 8,\n  },\n  contentRow: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    gap: 6,\n  },\n  message: {\n    flexShrink: 1,\n  },\n  closeButton: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 20,\n    height: 20,\n  },\n  tailCenter: {\n    alignSelf: 'center',\n  },\n  tailTop: {\n    marginTop: -0.5,\n  },\n  tailBottom: {\n    marginBottom: -0.5,\n    transform: [{ rotate: '180deg' }],\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0610studio/zs-ui",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "private": false,
   "description": "EXPO ZS-UI",
   "type": "commonjs",
@@ -42,6 +42,7 @@
   "homepage": "https://github.com/0610studio/zs-ui",
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@shopify/react-native-skia": "2.6.6",
     "@babel/plugin-transform-modules-commonjs": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
@@ -75,6 +76,7 @@
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "*",
+    "@shopify/react-native-skia": ">=2.0.0",
     "expo": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
     "expo-router": "*",
@@ -89,6 +91,9 @@
     "@react-native-async-storage/async-storage": {
       "optional": false
     },
+    "@shopify/react-native-skia": {
+      "optional": false
+    },
     "expo-navigation-bar": {
       "optional": false
     },