@0610studio/zs-ui 0.18.0 → 0.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';\r\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, View, Dimensions } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport { useTheme } from '../../context/ThemeContext';\r\nimport useKeyboard from '../../model/useKeyboard';\r\nimport useFoldingState from '../../model/useFoldingState';\r\nimport { FoldingState } from '../../model/types';\r\nimport { MAX_FOLDABLE_SINGLE_WIDTH } from '../../model/utils';\r\n\r\nconst windowHeight = Dimensions.get('window').height;\r\nconst KEYBOARD_ANIMATION_DELAY = 50;\r\nconst SCROLL_VIEW_OPTIONS = {\r\n  bounces: false,\r\n  overScrollMode: \"never\" as const,\r\n  keyboardShouldPersistTaps: \"handled\" as const,\r\n  automaticallyAdjustKeyboardInsets: false\r\n}\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n  backgroundColor?: string;\r\n  statusBarColor?: string;\r\n  barStyle?: 'light-content' | 'dark-content';\r\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n  scrollViewDisabled?: boolean;\r\n  topComponent?: ReactNode;\r\n  bottomComponent?: ReactNode;\r\n  rightComponent?: ReactNode;\r\n  showsVerticalScrollIndicator?: boolean;\r\n  keyboardScrollExtraOffset?: number;\r\n  translucent?: boolean;\r\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\r\n  scrollEventThrottle?: number;\r\n  scrollToFocusedInput?: boolean;\r\n  foldableSingleScreen?: boolean;\r\n  dividerLineComponent?: ReactNode;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n  {\r\n    backgroundColor,\r\n    statusBarColor,\r\n    barStyle,\r\n    edges = ['bottom'],\r\n    scrollViewDisabled = false,\r\n    topComponent,\r\n    bottomComponent,\r\n    showsVerticalScrollIndicator = true,\r\n    keyboardScrollExtraOffset = 30,\r\n    translucent,\r\n    scrollEventThrottle = 16,\r\n    scrollToFocusedInput = true,\r\n    // foldable device\r\n    foldableSingleScreen,\r\n    dividerLineComponent,\r\n    rightComponent,\r\n    // ---\r\n    ...props\r\n  },\r\n  forwardedRef\r\n) {\r\n  const { palette } = useTheme();\r\n  const { foldingState, width } = useFoldingState();\r\n  const positionRef = useRef<number | null>(0);\r\n  const position2Ref = useRef<number | null>(0);\r\n  const scrollViewRef = useRef<ScrollView>(null);\r\n  const scrollView2Ref = useRef<ScrollView>(null);\r\n  const touchPositionRef = useRef<number | null>(0);\r\n  const lastTouchY = useRef<number | null>(0);\r\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\r\n  const scrollTimeoutRef = useRef<number | null>(null);\r\n\r\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, [scrollViewDisabled]);\r\n\r\n  const handleKeyboardShow = useCallback((e: any) => {\n    setKeyboardHeight(e.endCoordinates.height);\n\n    if ((scrollViewRef.current || scrollView2Ref.current) && scrollToFocusedInput) {\n      const keyboardHeight = e.endCoordinates.height;\n      const safeAreaBottom = 0;\n      const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;\n\n      // 현재 스크롤 위치 참조\n      const currentScrollPosition = touchPositionRef.current === 1\n        ? positionRef.current || 0\n        : position2Ref.current || 0;\n\n      const touchPosition = lastTouchY.current || 0;\n\n      // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\n      const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\n\n      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n      scrollTimeoutRef.current = setTimeout(() => {\n        if (touchPositionRef.current === 1) {\n          scrollViewRef.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        } else {\n          scrollView2Ref.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        }\n        scrollTimeoutRef.current = null;\n      }, KEYBOARD_ANIMATION_DELAY);\n    }\n  }, [scrollToFocusedInput, keyboardScrollExtraOffset]);\n\n  const handleKeyboardHide = useCallback(() => {\n    setKeyboardHeight(0);\n  }, []);\n\r\n  useKeyboard({\r\n    handleKeyboardShow,\r\n    handleKeyboardHide,\r\n  });\r\n\r\n  // 클린업\r\n  useEffect(() => {\r\n    return () => {\r\n      positionRef.current = null;\r\n      lastTouchY.current = null;\r\n      if (scrollTimeoutRef.current) {\r\n        clearTimeout(scrollTimeoutRef.current);\r\n        scrollTimeoutRef.current = null;\r\n      }\r\n    };\r\n  }, []);\r\n  \r\n  // 에러 로그 출력\r\n  useEffect(() => {\r\n    if (foldableSingleScreen && (rightComponent || dividerLineComponent)) {\r\n      console.error('[ZSContainer] foldableSingleScreen일 때는 rightComponent/dividerLineComponent를 사용할 수 없습니다.');\r\n    }\r\n  }, [foldableSingleScreen, rightComponent, dividerLineComponent]);\r\n\r\n  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>, position: 1 | 2) => {\r\n    if (props.onScroll) props.onScroll(event);\r\n\r\n    if (position === 1) {\r\n      positionRef.current = event.nativeEvent.contentOffset.y;\r\n    } else {\r\n      position2Ref.current = event.nativeEvent.contentOffset.y;\r\n    }\r\n  }, [props.onScroll]);\r\n\r\n  const handleTouch = useCallback((evt: any, position: 1 | 2) => {\r\n    lastTouchY.current = evt.nativeEvent.pageY;\r\n    touchPositionRef.current = position;\r\n  }, []);\r\n\r\n  const safeAreaStyle = useMemo(() => [\r\n    { backgroundColor: backgroundColor || palette.background.base },\r\n    styles.w100\r\n  ], [backgroundColor, palette.background.base]);\r\n\r\n  const scrollContentStyle = useMemo(() => [\r\n    styles.scrollContainerStyle,\r\n    {\r\n      paddingBottom: keyboardHeight ? keyboardHeight : 0\r\n    }\r\n  ], [keyboardHeight]);\r\n\r\n  const containerStyle = useMemo(() => [\r\n    styles.w100,\r\n    props.style\r\n  ], [props.style]);\r\n\r\n  const shouldShowStatusBar = useMemo(() =>\r\n    Boolean(barStyle || statusBarColor || translucent),\r\n    [barStyle, statusBarColor, translucent]\r\n  );\r\n\r\n  return (\r\n    <SafeAreaView\r\n      style={safeAreaStyle}\r\n      edges={edges}\r\n    >\r\n      <View style={[styles.w100, { backgroundColor: \"#00000009\" }]}>\r\n        <View style={[styles.w100, { maxWidth: foldableSingleScreen ? Math.min(width, MAX_FOLDABLE_SINGLE_WIDTH) : '100%', alignSelf: 'center', backgroundColor: palette.background.base }]}>\r\n          {topComponent}\r\n          <View style={[styles.w100, { flexDirection: 'row' }]}>\r\n            <View style={styles.flex1}>\r\n              {scrollViewDisabled ? (\r\n                <View style={[styles.flex1, containerStyle]}>\r\n                  {props.children}\r\n                </View>\r\n              ) : (\r\n                <ScrollView\r\n                  ref={scrollViewRef}\r\n                  style={styles.w100}\r\n                  showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n                  contentContainerStyle={scrollContentStyle}\r\n                  scrollEventThrottle={scrollEventThrottle}\r\n                  onScroll={(event) => { handleScroll(event, 1); }}\r\n                  onTouchStart={(evt) => handleTouch(evt, 1)}\r\n                  // ---\r\n                  {...SCROLL_VIEW_OPTIONS}\r\n                >\r\n                  <View style={[styles.flex1, containerStyle]}>\r\n                    {props.children}\r\n                  </View>\r\n                </ScrollView>\r\n              )}\r\n            </View>\r\n            {foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent}\r\n            {\r\n              foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (\r\n                <View style={styles.flex1}>\r\n                  {scrollViewDisabled ? (\r\n                    <View style={[styles.flex1, containerStyle]}>\r\n                      {rightComponent}\r\n                    </View>\r\n                  ) : (\r\n                    <ScrollView\r\n                      ref={scrollView2Ref}\r\n                      style={styles.w100}\r\n                      showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n                      contentContainerStyle={scrollContentStyle}\r\n                      scrollEventThrottle={scrollEventThrottle}\r\n                      onScroll={(event) => { handleScroll(event, 2); }}\r\n                      onTouchStart={(evt) => handleTouch(evt, 2)}\r\n                      // ---\r\n                      {...SCROLL_VIEW_OPTIONS}\r\n                    >\r\n                      <View style={[styles.flex1, containerStyle]}>\r\n                        {rightComponent}\r\n                      </View>\r\n                    </ScrollView>\r\n                  )}\r\n                </View>\r\n              )\r\n            }\r\n          </View>\r\n          {bottomComponent}\r\n        </View>\r\n      </View>\r\n\r\n      {shouldShowStatusBar && (\r\n        <StatusBar\r\n          barStyle={barStyle}\r\n          backgroundColor={statusBarColor || palette.background.base}\r\n          translucent={translucent}\r\n        />\r\n      )}\r\n    </SafeAreaView>\r\n  );\r\n});\r\n\r\nexport const styles = StyleSheet.create({\r\n  flex1: { flex: 1 },\r\n  w100: { flex: 1, width: '100%' },\r\n  scrollContainerStyle: { alignItems: 'center', width: '100%', flexGrow: 1 },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, View, useWindowDimensions } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport { useTheme } from '../../context/ThemeContext';\nimport { transparency } from '../../theme/palette';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\nimport { FoldingState } from '../../model/types';\n\nconst KEYBOARD_ANIMATION_DELAY = 50;\nconst SCROLL_VIEW_OPTIONS = {\n  bounces: false,\n  overScrollMode: \"never\" as const,\n  keyboardShouldPersistTaps: \"handled\" as const,\n  automaticallyAdjustKeyboardInsets: false\n}\n\nexport type ZSContainerProps = ViewProps & {\n  backgroundColor?: string;\n  statusBarColor?: string;\n  barStyle?: 'light-content' | 'dark-content';\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n  scrollViewDisabled?: boolean;\n  topComponent?: ReactNode;\n  bottomComponent?: ReactNode;\n  rightComponent?: ReactNode;\n  showsVerticalScrollIndicator?: boolean;\n  keyboardScrollExtraOffset?: number;\n  translucent?: boolean;\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n  scrollEventThrottle?: number;\n  scrollToFocusedInput?: boolean;\n  foldableSingleScreen?: boolean;\n  dividerLineComponent?: ReactNode;\n  /**\n   * 언폴딩 상태에서 rightComponent가 없을 때(단일 화면) 콘텐츠 최대 가로 길이(px).\n   * 전폭으로 늘리려면 false. 미지정 시 ThemeProvider의 foldable 설정값을 따른다.\n   */\n  unfoldedSinglePaneMaxWidth?: number | false;\n};\n\nexport type ZSContainerRef = ScrollView;\n\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\n  {\n    backgroundColor,\n    statusBarColor,\n    barStyle,\n    edges = ['bottom'],\n    scrollViewDisabled = false,\n    topComponent,\n    bottomComponent,\n    showsVerticalScrollIndicator = true,\n    keyboardScrollExtraOffset = 30,\n    translucent,\n    scrollEventThrottle = 16,\n    scrollToFocusedInput = true,\n    foldableSingleScreen,\n    dividerLineComponent,\n    rightComponent,\n    unfoldedSinglePaneMaxWidth,\n    ...props\n  },\n  forwardedRef\n) {\n  const { palette, foldable } = useTheme();\n  const { height: windowHeight } = useWindowDimensions();\n  const { foldingState, width } = useFoldingState();\n  const positionRef = useRef<number | null>(0);\n  const position2Ref = useRef<number | null>(0);\n  const scrollViewRef = useRef<ScrollView>(null);\n  const scrollView2Ref = useRef<ScrollView>(null);\n  const touchPositionRef = useRef<number | null>(0);\n  const lastTouchY = useRef<number | null>(0);\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\n  const scrollTimeoutRef = useRef<number | null>(null);\n\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, [scrollViewDisabled]);\n\n  const handleKeyboardShow = useCallback((e: any) => {\n    setKeyboardHeight(e.endCoordinates.height);\n\n    if ((scrollViewRef.current || scrollView2Ref.current) && scrollToFocusedInput) {\n      const keyboardHeight = e.endCoordinates.height;\n      const safeAreaBottom = 0;\n      const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;\n\n      const currentScrollPosition = touchPositionRef.current === 1\n        ? positionRef.current || 0\n        : position2Ref.current || 0;\n\n      const touchPosition = lastTouchY.current || 0;\n\n      const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\n\n      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n      scrollTimeoutRef.current = setTimeout(() => {\n        if (touchPositionRef.current === 1) {\n          scrollViewRef.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        } else {\n          scrollView2Ref.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        }\n        scrollTimeoutRef.current = null;\n      }, KEYBOARD_ANIMATION_DELAY);\n    }\n  }, [scrollToFocusedInput, keyboardScrollExtraOffset, windowHeight]);\n\n  const handleKeyboardHide = useCallback(() => {\n    setKeyboardHeight(0);\n  }, []);\n\n  useKeyboard({\n    handleKeyboardShow,\n    handleKeyboardHide,\n  });\n\n  useEffect(() => {\n    return () => {\n      positionRef.current = null;\n      lastTouchY.current = null;\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n        scrollTimeoutRef.current = null;\n      }\n    };\n  }, []);\n  \n  useEffect(() => {\n    if (foldableSingleScreen && (rightComponent || dividerLineComponent)) {\n      console.error('[ZSContainer] foldableSingleScreen일 때는 rightComponent/dividerLineComponent를 사용할 수 없습니다.');\n    }\n  }, [foldableSingleScreen, rightComponent, dividerLineComponent]);\n\n  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>, position: 1 | 2) => {\n    if (props.onScroll) props.onScroll(event);\n\n    if (position === 1) {\n      positionRef.current = event.nativeEvent.contentOffset.y;\n    } else {\n      position2Ref.current = event.nativeEvent.contentOffset.y;\n    }\n  }, [props.onScroll]);\n\n  const handleTouch = useCallback((evt: any, position: 1 | 2) => {\n    lastTouchY.current = evt.nativeEvent.pageY;\n    touchPositionRef.current = position;\n  }, []);\n\n  const safeAreaStyle = useMemo(() => [\n    { backgroundColor: backgroundColor || palette.background.base },\n    styles.w100\n  ], [backgroundColor, palette.background.base]);\n\n  const scrollContentStyle = useMemo(() => [\n    styles.scrollContainerStyle,\n    {\n      paddingBottom: keyboardHeight ? keyboardHeight : 0\n    }\n  ], [keyboardHeight]);\n\n  const containerStyle = useMemo(() => [\n    styles.w100,\n    props.style\n  ], [props.style]);\n\n  // prop > ThemeProvider foldable 설정 순으로 적용. 기본값(폴백) 없음 — 미주입(undefined)이거나 false면 전폭으로 채움\n  const effectiveUnfoldedMaxWidth = unfoldedSinglePaneMaxWidth ?? foldable?.unfoldedSinglePaneMaxWidth;\n  const hasRightComponent = !!rightComponent;\n\n  const innerMaxWidth = useMemo(() => {\n    // foldableSingleScreen 이거나, 언폴딩 + rightComponent 미지원인 단일 화면일 때 폭 제한 대상\n    const isSinglePane = foldableSingleScreen || (foldingState === FoldingState.UNFOLDED && !hasRightComponent);\n    // 주입된 폭(number)이 있을 때만 제한, 없으면 전폭으로 채움\n    if (isSinglePane && typeof effectiveUnfoldedMaxWidth === 'number') {\n      return Math.min(width, effectiveUnfoldedMaxWidth);\n    }\n    return '100%' as const;\n  }, [foldableSingleScreen, foldingState, hasRightComponent, effectiveUnfoldedMaxWidth, width]);\n\n  const innerContainerStyle = useMemo(() => [\n    styles.w100,\n    {\n      maxWidth: innerMaxWidth,\n      alignSelf: 'center' as const,\n      backgroundColor: palette.background.base,\n    },\n  ], [innerMaxWidth, palette.background.base]);\n\n  const shouldShowStatusBar = useMemo(() =>\n    Boolean(barStyle || statusBarColor || translucent),\n    [barStyle, statusBarColor, translucent]\n  );\n\n  return (\n    <SafeAreaView\n      style={safeAreaStyle}\n      edges={edges}\n    >\n      {/* 테마 대응 딤 레이어 (light: 검정 4% · dark: 흰색 4%) */}\n      <View style={[styles.outerLayer, { backgroundColor: palette.grey[100] + transparency['4%'] }]}>\n        <View style={innerContainerStyle}>\n          {topComponent}\n          <View style={styles.row}>\n            <View style={styles.flex1}>\n              {scrollViewDisabled ? (\n                <View style={[styles.flex1, containerStyle]}>\n                  {props.children}\n                </View>\n              ) : (\n                <ScrollView\n                  ref={scrollViewRef}\n                  style={styles.w100}\n                  showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                  contentContainerStyle={scrollContentStyle}\n                  scrollEventThrottle={scrollEventThrottle}\n                  onScroll={(event) => { handleScroll(event, 1); }}\n                  onTouchStart={(evt) => handleTouch(evt, 1)}\n                  {...SCROLL_VIEW_OPTIONS}\n                >\n                  <View style={[styles.flex1, containerStyle]}>\n                    {props.children}\n                  </View>\n                </ScrollView>\n              )}\n            </View>\n            {foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent}\n            {\n              foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (\n                <View style={styles.flex1}>\n                  {scrollViewDisabled ? (\n                    <View style={[styles.flex1, containerStyle]}>\n                      {rightComponent}\n                    </View>\n                  ) : (\n                    <ScrollView\n                      ref={scrollView2Ref}\n                      style={styles.w100}\n                      showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                      contentContainerStyle={scrollContentStyle}\n                      scrollEventThrottle={scrollEventThrottle}\n                      onScroll={(event) => { handleScroll(event, 2); }}\n                      onTouchStart={(evt) => handleTouch(evt, 2)}\n                      {...SCROLL_VIEW_OPTIONS}\n                    >\n                      <View style={[styles.flex1, containerStyle]}>\n                        {rightComponent}\n                      </View>\n                    </ScrollView>\n                  )}\n                </View>\n              )\n            }\n          </View>\n          {bottomComponent}\n        </View>\n      </View>\n\n      {shouldShowStatusBar && (\n        <StatusBar\n          barStyle={barStyle}\n          backgroundColor={statusBarColor || palette.background.base}\n          translucent={translucent}\n        />\n      )}\n    </SafeAreaView>\n  );\n});\n\nexport const styles = StyleSheet.create({\n  flex1: { flex: 1 },\n  w100: { flex: 1, width: '100%' },\n  scrollContainerStyle: { alignItems: 'center', width: '100%', flexGrow: 1 },\n  outerLayer: { flex: 1, width: '100%' },\n  row: { flex: 1, width: '100%', flexDirection: 'row' },\n});\n\nexport default ZSContainer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMvE,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA8ElB;;AAED,wBAAuC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAM1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMvE,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAsB,EACtB,6BAAyC,EACzC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA4ElB;;AAED,wBAAuC"}

package/build/ui/ZSPressable/index.js

@@ -3,13 +3,17 @@ import React, { useRef } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import AnimatedWrapper from "../atoms/AnimatedWrapper";
-const DEFAULT_DURATION = { duration: 100 };
+import { useTheme } from "../../context/ThemeContext";
+import { transparency } from "../../theme/palette";
+import { DISABLED_OPACITY, DURATION, RADIUS } from "../../theme/tokens";
+const DEFAULT_DURATION = { duration: DURATION.press };
 const SCALE_VALUES = [1, 0.96];
 const DEBOUNCE_TIME = 300;
-function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, isLoading = false, disabled = false, ...props }) {
+function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor, pressedBackgroundBorderRadius = RADIUS.xl, elevationLevel, fullWidth = false, color, isLoading = false, disabled = false, ...props }) {
+    const { palette } = useTheme();
     const isButtonPress = useSharedValue(0);
     const lastClickTime = useRef(0);
-    // ------------------------------------------------------------
+    const pressedBgColor = pressedBackgroundColor ?? palette.grey[50] + transparency['10%'];
     const createPressHandler = (callback) => {
         return () => {
             const now = Date.now();
@@ -23,7 +27,6 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
     };
     const handlePress = createPressHandler(onPress);
     const handleLongPress = createPressHandler(onLongPress);
-    // ------------------------------------------------------------
     const boxAnimation = useAnimatedStyle(() => {
         const scale = interpolate(isButtonPress.value, [0, 1], SCALE_VALUES, 'clamp');
         return {
@@ -39,7 +42,7 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
     const handlePressStyle = (pressed) => {
         return pressed
             ? {
-                backgroundColor: pressedBackgroundColor,
+                backgroundColor: pressedBgColor,
                 borderRadius: pressedBackgroundBorderRadius,
             }
             : {
@@ -47,7 +50,7 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
                 borderRadius: pressedBackgroundBorderRadius,
             };
     };
-    return (_jsx(View, { style: [fullWidth ? { width: '100%' } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }], children: _jsx(Pressable, { ...props, onPress: handlePress, onLongPress: handleLongPress, onPressIn: handlePressIn, onPressOut: handlePressOut, disabled: isLoading || disabled, style: ({ pressed }) => handlePressStyle(pressed), children: _jsx(Animated.View, { style: boxAnimation, children: _jsx(AnimatedWrapper, { color: color, isAnimation: isAnimation, elevationLevel: elevationLevel, style: props.style, children: props.children }) }) }) }));
+    return (_jsx(View, { style: [fullWidth ? { width: '100%' } : undefined, { opacity: (isLoading || disabled) ? DISABLED_OPACITY : 1 }], children: _jsx(Pressable, { ...props, onPress: handlePress, onLongPress: handleLongPress, onPressIn: handlePressIn, onPressOut: handlePressOut, disabled: isLoading || disabled, style: ({ pressed }) => handlePressStyle(pressed), children: _jsx(Animated.View, { style: boxAnimation, children: _jsx(AnimatedWrapper, { color: color, isAnimation: isAnimation, elevationLevel: elevationLevel, style: props.style, children: props.children }) }) }) }));
 }
 export default React.memo(ZSPressable);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAC1D,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGvD,MAAM,gBAAgB,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAW,CAAC;AACpD,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,CAAU,CAAC;AACxC,MAAM,aAAa,GAAG,GAAG,CAAC;AAe1B,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,sBAAsB,GAAG,0BAA0B,EACnD,6BAA6B,GAAG,EAAE,EAClC,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACS;IACjB,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAExC,+DAA+D;IAE/D,MAAM,kBAAkB,GAAG,CAAC,QAAqB,EAAE,EAAE;QACnD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACvB,IAAI,GAAG,GAAG,aAAa,CAAC,OAAO,GAAG,aAAa;gBAAE,OAAO;YACxD,IAAI,SAAS,IAAI,QAAQ;gBAAE,OAAO;YAClC,aAAa,CAAC,OAAO,GAAG,GAAG,CAAC;YAE5B,QAAQ,EAAE,EAAE,CAAC;QACf,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAExD,+DAA+D;IAE/D,MAAM,YAAY,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,WAAW,CACvB,aAAa,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,YAAY,EACZ,OAAO,CACR,CAAC;QACF,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;SACvB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE;QAC5C,OAAO,OAAO;YACZ,CAAC,CAAC;gBACA,eAAe,EAAE,sBAAsB;gBACvC,YAAY,EAAE,6BAA6B;aAC5C;YACD,CAAC,CAAC;gBACA,eAAe,EAAE,aAAa;gBAC9B,YAAY,EAAE,6BAA6B;aAC5C,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAe,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAChH,KAAC,SAAS,OACJ,KAAK,EACT,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAEjD,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,YAAY,YAChC,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,QAAQ,GACC,GACJ,GACN,GACP,CACR,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import React, { useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel, ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\nconst DEBOUNCE_TIME = 300;\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n  isLoading?: boolean;\n  disabled?: boolean;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n  pressedBackgroundBorderRadius = 16,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  isLoading = false,\n  disabled = false,\n  ...props\n}: ZSPressableProps) {\n  const isButtonPress = useSharedValue(0);\n  const lastClickTime = useRef<number>(0);\n\n  // ------------------------------------------------------------\n\n  const createPressHandler = (callback?: () => void) => {\n    return () => {\n      const now = Date.now();\n      if (now - lastClickTime.current < DEBOUNCE_TIME) return;\n      if (isLoading || disabled) return;\n      lastClickTime.current = now;\n\n      callback?.();\n    };\n  };\n\n  const handlePress = createPressHandler(onPress);\n  const handleLongPress = createPressHandler(onLongPress);\n\n  // ------------------------------------------------------------\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      SCALE_VALUES,\n      'clamp'\n    );\n    return {\n      transform: [{ scale }],\n    };\n  }, []);\n\n  const handlePressIn = () => {\n    isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n  };\n\n  const handlePressOut = () => {\n    isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n  };\n\n  const handlePressStyle = (pressed: boolean) => {\n    return pressed\n      ? {\n        backgroundColor: pressedBackgroundColor,\n        borderRadius: pressedBackgroundBorderRadius,\n      }\n      : {\n        backgroundColor: 'transparent',\n        borderRadius: pressedBackgroundBorderRadius,\n      };\n  };\n\n  return (\n    <View style={[fullWidth ? { width: '100%' as const } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }]}>\n      <Pressable\n        {...props}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        disabled={isLoading || disabled}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default React.memo(ZSPressable);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { transparency } from \"../../theme/palette\";\nimport { DISABLED_OPACITY, DURATION, RADIUS } from \"../../theme/tokens\";\nimport type { ShadowLevel, ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: DURATION.press } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\nconst DEBOUNCE_TIME = 300;\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n  isLoading?: boolean;\n  disabled?: boolean;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor,\n  pressedBackgroundBorderRadius = RADIUS.xl,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  isLoading = false,\n  disabled = false,\n  ...props\n}: ZSPressableProps) {\n  const { palette } = useTheme();\n  const isButtonPress = useSharedValue(0);\n  const lastClickTime = useRef<number>(0);\n  const pressedBgColor = pressedBackgroundColor ?? palette.grey[50] + transparency['10%'];\n\n  const createPressHandler = (callback?: () => void) => {\n    return () => {\n      const now = Date.now();\n      if (now - lastClickTime.current < DEBOUNCE_TIME) return;\n      if (isLoading || disabled) return;\n      lastClickTime.current = now;\n\n      callback?.();\n    };\n  };\n\n  const handlePress = createPressHandler(onPress);\n  const handleLongPress = createPressHandler(onLongPress);\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      SCALE_VALUES,\n      'clamp'\n    );\n    return {\n      transform: [{ scale }],\n    };\n  }, []);\n\n  const handlePressIn = () => {\n    isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n  };\n\n  const handlePressOut = () => {\n    isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n  };\n\n  const handlePressStyle = (pressed: boolean) => {\n    return pressed\n      ? {\n        backgroundColor: pressedBgColor,\n        borderRadius: pressedBackgroundBorderRadius,\n      }\n      : {\n        backgroundColor: 'transparent',\n        borderRadius: pressedBackgroundBorderRadius,\n      };\n  };\n\n  return (\n    <View style={[fullWidth ? { width: '100%' as const } : undefined, { opacity: (isLoading || disabled) ? DISABLED_OPACITY : 1 }]}>\n      <Pressable\n        {...props}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        disabled={isLoading || disabled}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default React.memo(ZSPressable);\n"]}

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { ViewProps } from 'react-native';
 import { RadioOption } from '../types';
 import { ZSTextProps } from '../ZSText';
-declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, selectLabel, rowCount, ...props }: {
+interface ZSRadioGroupProps extends ViewProps {
     options: RadioOption[];
     value?: RadioOption;
     onSelect: (value: RadioOption) => void;
@@ -12,7 +11,8 @@ declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueS
     selectLabel?: string;
     disabled?: boolean;
     rowCount?: 1 | 2 | 3;
-} & ViewProps): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ZSRadioGroup>;
+}
+declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, selectLabel, rowCount, ...props }: ZSRadioGroupProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ZSRadioGroup>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKhD,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,QAAY,EACZ,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB,GAAG,SAAS,qBAuHZ;;AAED,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA6FhD,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,QAAY,EACZ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgDnB;;AA8CD,wBAAkC"}

package/build/ui/ZSRadioGroup/index.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, memo } from 'react';
+import { StyleSheet } from 'react-native';
 import ViewAtom from '../atoms/ViewAtom';
 import ZSText from '../ZSText';
 import ZSPressable from '../ZSPressable';
 import { useTheme } from '../../context/ThemeContext';
+import { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';
 import { SvgCheck } from '../../assets/SvgCheck';
+const ROW_WIDTH = {
+    1: '100%',
+    2: '50%',
+    3: '33.33%',
+};
+const RadioRow = memo(function RadioRow({ option, index, optionCount, rowCount, isSelected, isFullWidth, setColor, innerColor, selectColor, valueStyle, selectStyle, selectLabel, onSelect, }) {
+    const isLastCol = (index + 1) % rowCount === 0;
+    const isLastRow = Math.ceil((index + 1) / rowCount) === Math.ceil(optionCount / rowCount);
+    return (_jsx(ViewAtom, { style: [
+            styles.cell,
+            {
+                width: ROW_WIDTH[rowCount],
+                paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,
+                paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,
+                paddingBottom: isLastRow ? 0 : 10,
+            },
+        ], children: _jsx(ZSPressable, { onPress: () => onSelect(option), pressedBackgroundColor: "transparent", fullWidth: true, accessibilityRole: 'radio', accessibilityState: { checked: isSelected }, children: _jsxs(ViewAtom, { style: [styles.row, { borderColor: setColor, backgroundColor: innerColor }], children: [!isFullWidth && (_jsx(ViewAtom, { style: [styles.radioOuter, { borderColor: setColor }], children: _jsx(ViewAtom, { style: [styles.radioInner, { backgroundColor: setColor }] }) })), _jsx(ViewAtom, { style: styles.label, children: _jsx(ZSText, { ...valueStyle, children: option.value }) }), isFullWidth && (_jsx(ViewAtom, { style: [styles.selectButton, { backgroundColor: selectColor }], children: isSelected ? (_jsx(SvgCheck, { size: 18 })) : (_jsx(ZSText, { typo: "body.5", numberOfLines: 1, ...selectStyle, children: selectLabel })) }))] }) }) }));
+});
 function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, selectStyle, selectLabel = '선택', rowCount = 1, ...props }) {
     const { palette } = useTheme();
     const isFullWidth = rowCount === 1;
@@ -13,61 +33,61 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
             onSelect(option);
         }
     }, [disabled, onSelect]);
-    return (_jsx(ViewAtom, { style: {
-            flexDirection: isFullWidth ? 'column' : 'row',
-            flexWrap: isFullWidth ? 'nowrap' : 'wrap',
-            width: '100%',
-        }, ...containerStyle, ...props, children: options.map((option, index) => {
+    return (_jsx(ViewAtom, { style: [
+            styles.container,
+            {
+                flexDirection: isFullWidth ? 'column' : 'row',
+                flexWrap: isFullWidth ? 'nowrap' : 'wrap',
+                opacity: disabled ? DISABLED_OPACITY : 1,
+            },
+        ], ...containerStyle, ...props, children: options.map((option, index) => {
             const isSelected = value?.index === option.index;
             const setColor = isSelected ? palette.primary.light : palette.background.neutral;
-            const colCount = rowCount;
-            const isLastCol = (index + 1) % colCount === 0;
-            const isLastRow = Math.ceil((index + 1) / colCount) === Math.ceil(options.length / colCount);
-            return (_jsx(ViewAtom, { style: {
-                    width: rowCount === 2
-                        ? '50%'
-                        : rowCount === 3
-                            ? '33.33%'
-                            : '100%',
-                    paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,
-                    paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,
-                    paddingBottom: isLastRow ? 0 : 10,
-                }, children: _jsx(ZSPressable, { onPress: () => handleSelect(option), pressedBackgroundColor: "transparent", fullWidth: true, children: _jsxs(ViewAtom, { style: {
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            paddingVertical: 12,
-                            borderWidth: 1,
-                            paddingLeft: 10,
-                            paddingRight: 15,
-                            borderRadius: 100,
-                            borderColor: setColor,
-                            backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
-                        }, children: [!(isFullWidth) && (_jsx(ViewAtom, { style: {
-                                    width: 20,
-                                    height: 20,
-                                    borderWidth: 1,
-                                    borderRadius: 10,
-                                    borderColor: setColor,
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                }, children: _jsx(ViewAtom, { style: {
-                                        width: 12,
-                                        height: 12,
-                                        borderRadius: 6,
-                                        backgroundColor: setColor,
-                                    } }) })), _jsx(ViewAtom, { style: { flex: 1, paddingLeft: 10, paddingRight: 12, minWidth: 0 }, children: _jsx(ZSText, { ...valueStyle, children: option.value }) }), isFullWidth && (_jsx(ViewAtom, { style: {
-                                    backgroundColor: isSelected
-                                        ? palette.primary.main
-                                        : palette.background.layer2,
-                                    paddingHorizontal: 10,
-                                    borderRadius: 100,
-                                    minWidth: 42,
-                                    minHeight: 24,
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    flexShrink: 0,
-                                }, children: isSelected ? (_jsx(SvgCheck, { size: 18 })) : (_jsx(ZSText, { typo: "body.5", numberOfLines: 1, ...selectStyle, children: selectLabel })) }))] }) }) }, option.index));
+            return (_jsx(RadioRow, { option: option, index: index, optionCount: options.length, rowCount: rowCount, isSelected: isSelected, isFullWidth: isFullWidth, setColor: setColor, innerColor: isSelected ? palette.background.layer1 : 'transparent', selectColor: isSelected ? palette.primary.main : palette.background.layer2, valueStyle: valueStyle, selectStyle: selectStyle, selectLabel: selectLabel, onSelect: handleSelect }, option.index));
         }) }));
 }
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    cell: {},
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        borderWidth: 1,
+        paddingLeft: 10,
+        paddingRight: 15,
+        borderRadius: RADIUS.pill,
+    },
+    radioOuter: {
+        width: 20,
+        height: 20,
+        borderWidth: 1,
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    radioInner: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+    },
+    label: {
+        flex: 1,
+        paddingLeft: 10,
+        paddingRight: 12,
+        minWidth: 0,
+    },
+    selectButton: {
+        paddingHorizontal: 10,
+        borderRadius: RADIUS.pill,
+        minWidth: 42,
+        minHeight: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+});
 export default memo(ZSRadioGroup);
 //# sourceMappingURL=index.js.map

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 { useCallback, memo } from 'react';\nimport { StyleSheet, 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 { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nconst ROW_WIDTH: Record<1 | 2 | 3, '100%' | '50%' | '33.33%'> = {\n  1: '100%',\n  2: '50%',\n  3: '33.33%',\n};\n\ninterface RadioRowProps {\n  option: RadioOption;\n  index: number;\n  optionCount: number;\n  rowCount: 1 | 2 | 3;\n  isSelected: boolean;\n  isFullWidth: boolean;\n  setColor: string;\n  innerColor: string;\n  selectColor: string;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel: string;\n  onSelect: (option: RadioOption) => void;\n}\n\nconst RadioRow = memo(function RadioRow({\n  option,\n  index,\n  optionCount,\n  rowCount,\n  isSelected,\n  isFullWidth,\n  setColor,\n  innerColor,\n  selectColor,\n  valueStyle,\n  selectStyle,\n  selectLabel,\n  onSelect,\n}: RadioRowProps) {\n  const isLastCol = (index + 1) % rowCount === 0;\n  const isLastRow = Math.ceil((index + 1) / rowCount) === Math.ceil(optionCount / rowCount);\n\n  return (\n    <ViewAtom\n      style={[\n        styles.cell,\n        {\n          width: ROW_WIDTH[rowCount],\n          paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n          paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n          paddingBottom: isLastRow ? 0 : 10,\n        },\n      ]}\n    >\n      <ZSPressable\n        onPress={() => onSelect(option)}\n        pressedBackgroundColor=\"transparent\"\n        fullWidth\n        accessibilityRole='radio'\n        accessibilityState={{ checked: isSelected }}\n      >\n        <ViewAtom style={[styles.row, { borderColor: setColor, backgroundColor: innerColor }]}>\n          {!isFullWidth && (\n            <ViewAtom style={[styles.radioOuter, { borderColor: setColor }]}>\n              <ViewAtom style={[styles.radioInner, { backgroundColor: setColor }]} />\n            </ViewAtom>\n          )}\n\n          <ViewAtom style={styles.label}>\n            <ZSText {...valueStyle}>{option.value}</ZSText>\n          </ViewAtom>\n\n          {isFullWidth && (\n            <ViewAtom style={[styles.selectButton, { backgroundColor: selectColor }]}>\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\ninterface ZSRadioGroupProps extends ViewProps {\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}\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}: ZSRadioGroupProps) {\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        styles.container,\n        {\n          flexDirection: isFullWidth ? 'column' : 'row',\n          flexWrap: isFullWidth ? 'nowrap' : 'wrap',\n          opacity: disabled ? DISABLED_OPACITY : 1,\n        },\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        return (\n          <RadioRow\n            key={option.index}\n            option={option}\n            index={index}\n            optionCount={options.length}\n            rowCount={rowCount}\n            isSelected={isSelected}\n            isFullWidth={isFullWidth}\n            setColor={setColor}\n            innerColor={isSelected ? palette.background.layer1 : 'transparent'}\n            selectColor={isSelected ? palette.primary.main : palette.background.layer2}\n            valueStyle={valueStyle}\n            selectStyle={selectStyle}\n            selectLabel={selectLabel}\n            onSelect={handleSelect}\n          />\n        );\n      })}\n    </ViewAtom>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n  },\n  cell: {},\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 12,\n    borderWidth: 1,\n    paddingLeft: 10,\n    paddingRight: 15,\n    borderRadius: RADIUS.pill,\n  },\n  radioOuter: {\n    width: 20,\n    height: 20,\n    borderWidth: 1,\n    borderRadius: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  radioInner: {\n    width: 12,\n    height: 12,\n    borderRadius: 6,\n  },\n  label: {\n    flex: 1,\n    paddingLeft: 10,\n    paddingRight: 12,\n    minWidth: 0,\n  },\n  selectButton: {\n    paddingHorizontal: 10,\n    borderRadius: RADIUS.pill,\n    minWidth: 42,\n    minHeight: 24,\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n});\n\nexport default memo(ZSRadioGroup);\n"]}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+export type ZSSegmentedTextSize = '1' | '2' | '3' | '4' | '5' | '6';
+export interface ZSSegmentedProps extends ViewProps {
+    /** 세그먼트 라벨 목록 (2개 이상) */
+    options: string[];
+    /** 선택 인덱스를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 동작) */
+    selectedIndex?: number;
+    /** 비제어 모드의 초기 선택 인덱스 */
+    initialIndex?: number;
+    onChange?: (index: number) => void;
+    /** true(기본): 부모 폭을 가득 채움 · false: 가장 긴 라벨 폭에 맞춰 콘텐츠 크기로 렌더링 */
+    fullWidth?: boolean;
+    containerHeight?: number;
+    textSize?: ZSSegmentedTextSize;
+    /** 트랙 배경색 (기본: palette.background.layer2) */
+    trackColor?: string;
+    /** 선택 블럭 색상 (기본: palette.background.base) */
+    thumbColor?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ZSSegmented({ options, selectedIndex, initialIndex, onChange, fullWidth, containerHeight, textSize, trackColor, thumbColor, disabled, style, onLayout, ...props }: ZSSegmentedProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ZSSegmented>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSegmented/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAuD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUnI,MAAM,MAAM,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,yBAAyB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,aAAa,EACb,YAAgB,EAChB,QAAQ,EACR,SAAgB,EAChB,eAAoB,EACpB,QAAc,EACd,UAAU,EACV,UAAU,EACV,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAmIlB;;AAED,wBAAuC"}

package/build/ui/ZSSegmented/index.js

@@ -0,0 +1,124 @@
+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, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import ZSText from "../ZSText";
+import { useTheme } from "../../context/ThemeContext";
+import { DISABLED_OPACITY, DURATION } from "../../theme/tokens";
+const ANIMATION_DURATION = DURATION.slow;
+const CONTAINER_INSET = 3;
+const SEGMENT_HORIZONTAL_PADDING = 14;
+function ZSSegmented({ options, selectedIndex, initialIndex = 0, onChange, fullWidth = true, containerHeight = 40, textSize = '2', trackColor, thumbColor, disabled = false, style, onLayout, ...props }) {
+    const { palette } = useTheme();
+    const [internalIndex, setInternalIndex] = useState(initialIndex);
+    const [trackWidth, setTrackWidth] = useState(0);
+    const [labelWidths, setLabelWidths] = useState([]);
+    const translateX = useSharedValue(0);
+    const count = Math.max(options.length, 1);
+    const index = Math.min(selectedIndex ?? internalIndex, count - 1);
+    const measuredWidths = labelWidths.slice(0, count);
+    const maxLabelWidth = measuredWidths.length === count && measuredWidths.every(w => w > 0)
+        ? Math.max(...measuredWidths)
+        : 0;
+    const segmentWidth = fullWidth
+        ? (trackWidth > 0 ? (trackWidth - CONTAINER_INSET * 2) / count : 0)
+        : (maxLabelWidth > 0 ? Math.ceil(maxLabelWidth) + SEGMENT_HORIZONTAL_PADDING * 2 : 0);
+    useEffect(() => {
+        if (segmentWidth <= 0)
+            return;
+        translateX.value = withTiming(index * segmentWidth, {
+            duration: ANIMATION_DURATION,
+            easing: Easing.out(Easing.quad),
+        });
+    }, [index, segmentWidth, translateX]);
+    const thumbAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: translateX.value }],
+    }));
+    const handleLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setTrackWidth(prev => (prev === width ? prev : width));
+        onLayout?.(event);
+    };
+    const handlePress = (nextIndex) => {
+        if (disabled || nextIndex === index)
+            return;
+        if (selectedIndex === undefined)
+            setInternalIndex(nextIndex);
+        onChange?.(nextIndex);
+    };
+    return (_jsxs(View, { style: [
+            styles.container,
+            fullWidth ? styles.fullWidth : styles.hugContent,
+            {
+                height: containerHeight,
+                borderRadius: containerHeight / 2,
+                backgroundColor: trackColor ?? palette.background.layer2,
+                opacity: disabled ? DISABLED_OPACITY : 1,
+            },
+            style,
+        ], onLayout: handleLayout, accessibilityRole: 'tablist', ...props, children: [!fullWidth && (_jsx(View, { pointerEvents: 'none', accessible: false, importantForAccessibility: 'no-hide-descendants', style: styles.measureBox, children: options.map((label, optionIndex) => (_jsx(ZSText, { typo: `subTitle.${textSize}`, allowFontScaling: false, numberOfLines: 1, onLayout: event => {
+                        const measuredWidth = event.nativeEvent.layout.width;
+                        setLabelWidths(prev => {
+                            if (prev[optionIndex] === measuredWidth)
+                                return prev;
+                            const next = [...prev];
+                            next[optionIndex] = measuredWidth;
+                            return next;
+                        });
+                    }, children: label }, `measure_${optionIndex}_${label}`))) })), segmentWidth > 0 && (_jsx(Animated.View, { testID: 'zs-segmented-thumb', pointerEvents: 'none', style: [
+                    styles.thumb,
+                    {
+                        width: segmentWidth,
+                        height: containerHeight - CONTAINER_INSET * 2,
+                        borderRadius: (containerHeight - CONTAINER_INSET * 2) / 2,
+                        backgroundColor: thumbColor ?? palette.background.base,
+                        // 다크 모드에서는 밝은 그림자로 thumb 를 구분
+                        shadowColor: palette.grey[100],
+                    },
+                    thumbAnimatedStyle,
+                ] })), options.map((label, optionIndex) => {
+                const isActive = optionIndex === index;
+                return (_jsx(Pressable, { testID: `zs-segmented-segment-${optionIndex}`, style: [styles.segment, fullWidth ? styles.segmentFlex : { width: segmentWidth > 0 ? segmentWidth : undefined }], onPress: () => handlePress(optionIndex), disabled: disabled, accessibilityRole: 'tab', accessibilityState: { selected: isActive }, children: _jsx(ZSText, { typo: isActive ? `subTitle.${textSize}` : `body.${textSize}`, color: isActive ? 'base' : 'secondary', allowFontScaling: false, numberOfLines: 1, children: label }) }, `${optionIndex}_${label}`));
+            })] }));
+}
+export default React.memo(ZSSegmented);
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        padding: CONTAINER_INSET,
+        position: 'relative',
+    },
+    // flexWrap 부모에서도 폭이 부모 기준으로 고정되도록 stretch 대신 100% 사용
+    fullWidth: {
+        width: '100%',
+    },
+    hugContent: {
+        alignSelf: 'flex-start',
+    },
+    measureBox: {
+        position: 'absolute',
+        width: 2000,
+        opacity: 0,
+        flexDirection: 'row',
+        gap: 20,
+    },
+    thumb: {
+        position: 'absolute',
+        top: CONTAINER_INSET,
+        left: CONTAINER_INSET,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    segment: {
+        zIndex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+    },
+    segmentFlex: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSegmented/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Pressable, StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport ZSText from \"../ZSText\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { DISABLED_OPACITY, DURATION } from \"../../theme/tokens\";\n\nconst ANIMATION_DURATION = DURATION.slow;\nconst CONTAINER_INSET = 3;\nconst SEGMENT_HORIZONTAL_PADDING = 14;\n\nexport type ZSSegmentedTextSize = '1' | '2' | '3' | '4' | '5' | '6';\n\nexport interface ZSSegmentedProps extends ViewProps {\n  /** 세그먼트 라벨 목록 (2개 이상) */\n  options: string[];\n  /** 선택 인덱스를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 동작) */\n  selectedIndex?: number;\n  /** 비제어 모드의 초기 선택 인덱스 */\n  initialIndex?: number;\n  onChange?: (index: number) => void;\n  /** true(기본): 부모 폭을 가득 채움 · false: 가장 긴 라벨 폭에 맞춰 콘텐츠 크기로 렌더링 */\n  fullWidth?: boolean;\n  containerHeight?: number;\n  textSize?: ZSSegmentedTextSize;\n  /** 트랙 배경색 (기본: palette.background.layer2) */\n  trackColor?: string;\n  /** 선택 블럭 색상 (기본: palette.background.base) */\n  thumbColor?: string;\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\nfunction ZSSegmented({\n  options,\n  selectedIndex,\n  initialIndex = 0,\n  onChange,\n  fullWidth = true,\n  containerHeight = 40,\n  textSize = '2',\n  trackColor,\n  thumbColor,\n  disabled = false,\n  style,\n  onLayout,\n  ...props\n}: ZSSegmentedProps) {\n  const { palette } = useTheme();\n  const [internalIndex, setInternalIndex] = useState(initialIndex);\n  const [trackWidth, setTrackWidth] = useState(0);\n  const [labelWidths, setLabelWidths] = useState<number[]>([]);\n  const translateX = useSharedValue(0);\n\n  const count = Math.max(options.length, 1);\n  const index = Math.min(selectedIndex ?? internalIndex, count - 1);\n  const measuredWidths = labelWidths.slice(0, count);\n  const maxLabelWidth = measuredWidths.length === count && measuredWidths.every(w => w > 0)\n    ? Math.max(...measuredWidths)\n    : 0;\n  const segmentWidth = fullWidth\n    ? (trackWidth > 0 ? (trackWidth - CONTAINER_INSET * 2) / count : 0)\n    : (maxLabelWidth > 0 ? Math.ceil(maxLabelWidth) + SEGMENT_HORIZONTAL_PADDING * 2 : 0);\n\n  useEffect(() => {\n    if (segmentWidth <= 0) return;\n    translateX.value = withTiming(index * segmentWidth, {\n      duration: ANIMATION_DURATION,\n      easing: Easing.out(Easing.quad),\n    });\n  }, [index, segmentWidth, translateX]);\n\n  const thumbAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ translateX: translateX.value }],\n  }));\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    const { width } = event.nativeEvent.layout;\n    setTrackWidth(prev => (prev === width ? prev : width));\n    onLayout?.(event);\n  };\n\n  const handlePress = (nextIndex: number) => {\n    if (disabled || nextIndex === index) return;\n    if (selectedIndex === undefined) setInternalIndex(nextIndex);\n    onChange?.(nextIndex);\n  };\n\n  return (\n    <View\n      style={[\n        styles.container,\n        fullWidth ? styles.fullWidth : styles.hugContent,\n        {\n          height: containerHeight,\n          borderRadius: containerHeight / 2,\n          backgroundColor: trackColor ?? palette.background.layer2,\n          opacity: disabled ? DISABLED_OPACITY : 1,\n        },\n        style,\n      ]}\n      onLayout={handleLayout}\n      accessibilityRole='tablist'\n      {...props}\n    >\n      {/* 라벨 폭 측정용 히든 박스 — 활성(굵은) typo 기준으로 측정해 상태 전환 시 넘침 방지 */}\n      {!fullWidth && (\n        <View\n          pointerEvents='none'\n          accessible={false}\n          importantForAccessibility='no-hide-descendants'\n          style={styles.measureBox}\n        >\n          {options.map((label, optionIndex) => (\n            <ZSText\n              key={`measure_${optionIndex}_${label}`}\n              typo={`subTitle.${textSize}`}\n              allowFontScaling={false}\n              numberOfLines={1}\n              onLayout={event => {\n                const measuredWidth = event.nativeEvent.layout.width;\n                setLabelWidths(prev => {\n                  if (prev[optionIndex] === measuredWidth) return prev;\n                  const next = [...prev];\n                  next[optionIndex] = measuredWidth;\n                  return next;\n                });\n              }}\n            >\n              {label}\n            </ZSText>\n          ))}\n        </View>\n      )}\n      {segmentWidth > 0 && (\n        <Animated.View\n          testID='zs-segmented-thumb'\n          pointerEvents='none'\n          style={[\n            styles.thumb,\n            {\n              width: segmentWidth,\n              height: containerHeight - CONTAINER_INSET * 2,\n              borderRadius: (containerHeight - CONTAINER_INSET * 2) / 2,\n              backgroundColor: thumbColor ?? palette.background.base,\n              // 다크 모드에서는 밝은 그림자로 thumb 를 구분\n              shadowColor: palette.grey[100],\n            },\n            thumbAnimatedStyle,\n          ]}\n        />\n      )}\n\n      {options.map((label, optionIndex) => {\n        const isActive = optionIndex === index;\n        return (\n          <Pressable\n            key={`${optionIndex}_${label}`}\n            testID={`zs-segmented-segment-${optionIndex}`}\n            style={[styles.segment, fullWidth ? styles.segmentFlex : { width: segmentWidth > 0 ? segmentWidth : undefined }]}\n            onPress={() => handlePress(optionIndex)}\n            disabled={disabled}\n            accessibilityRole='tab'\n            accessibilityState={{ selected: isActive }}\n          >\n            <ZSText\n              typo={isActive ? `subTitle.${textSize}` : `body.${textSize}`}\n              color={isActive ? 'base' : 'secondary'}\n              allowFontScaling={false}\n              numberOfLines={1}\n            >\n              {label}\n            </ZSText>\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n\nexport default React.memo(ZSSegmented);\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    padding: CONTAINER_INSET,\n    position: 'relative',\n  },\n  // flexWrap 부모에서도 폭이 부모 기준으로 고정되도록 stretch 대신 100% 사용\n  fullWidth: {\n    width: '100%',\n  },\n  hugContent: {\n    alignSelf: 'flex-start',\n  },\n  measureBox: {\n    position: 'absolute',\n    width: 2000,\n    opacity: 0,\n    flexDirection: 'row',\n    gap: 20,\n  },\n  thumb: {\n    position: 'absolute',\n    top: CONTAINER_INSET,\n    left: CONTAINER_INSET,\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 3,\n  },\n  segment: {\n    zIndex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 8,\n  },\n  segmentFlex: {\n    flex: 1,\n  },\n});\n"]}

package/build/ui/ZSSkeleton/SkiaShimmer.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface SkiaShimmerProps {
+    /** 하이라이트 색상 (#RGB / #RRGGBB) */
+    color: string;
+    /** 밴드 중심의 최대 불투명도 (0~1) */
+    opacity?: number;
+    /** 밴드가 한 번 지나가는 시간(ms) */
+    duration?: number;
+}
+/**
+ * 부모를 가득 채우는 shimmer 오버레이.
+ * 같은 hue의 알파 그라데이션(투명 → 하이라이트 → 투명)을 대각선으로 흘려보내
+ * 아래 콘텐츠가 실제로 비쳐 보인다.
+ */
+declare function SkiaShimmer({ color, opacity, duration }: SkiaShimmerProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SkiaShimmer>;
+export default _default;
+//# sourceMappingURL=SkiaShimmer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkiaShimmer.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/SkiaShimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAY5D,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,OAAa,EAAE,QAAe,EAAE,EAAE,gBAAgB,qBAwE/E;;AAED,wBAAuC"}