@0610studio/zs-ui 0.14.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/build/overlay/AlertOverlay/index.d.ts.map +1 -1
  2. package/build/overlay/AlertOverlay/index.js +5 -5
  3. package/build/overlay/AlertOverlay/index.js.map +1 -1
  4. package/build/overlay/BottomSheetOverlay/index.d.ts +1 -1
  5. package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
  6. package/build/overlay/BottomSheetOverlay/index.js +24 -4
  7. package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
  8. package/build/overlay/LoadingNotify/index.d.ts.map +1 -1
  9. package/build/overlay/LoadingNotify/index.js +2 -2
  10. package/build/overlay/LoadingNotify/index.js.map +1 -1
  11. package/build/overlay/Modality/index.d.ts +2 -3
  12. package/build/overlay/Modality/index.d.ts.map +1 -1
  13. package/build/overlay/Modality/index.js +2 -2
  14. package/build/overlay/Modality/index.js.map +1 -1
  15. package/build/overlay/PopOver/PopOverMenu.d.ts.map +1 -1
  16. package/build/overlay/PopOver/PopOverMenu.js +3 -3
  17. package/build/overlay/PopOver/PopOverMenu.js.map +1 -1
  18. package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts.map +1 -1
  19. package/build/overlay/SnackbarNotify/ui/SnackbarItem.js +2 -2
  20. package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map +1 -1
  21. package/build/overlay/ui/ModalBackground.d.ts +2 -3
  22. package/build/overlay/ui/ModalBackground.d.ts.map +1 -1
  23. package/build/overlay/ui/ModalBackground.js +3 -3
  24. package/build/overlay/ui/ModalBackground.js.map +1 -1
  25. package/build/ui/ZSAboveKeyboard/index.d.ts +1 -1
  26. package/build/ui/ZSAboveKeyboard/index.d.ts.map +1 -1
  27. package/build/ui/ZSAboveKeyboard/index.js +2 -2
  28. package/build/ui/ZSAboveKeyboard/index.js.map +1 -1
  29. package/build/ui/ZSBlockButton/index.d.ts +1 -1
  30. package/build/ui/ZSBlockButton/index.d.ts.map +1 -1
  31. package/build/ui/ZSBlockButton/index.js +2 -2
  32. package/build/ui/ZSBlockButton/index.js.map +1 -1
  33. package/build/ui/ZSRadioGroup/index.d.ts +2 -1
  34. package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
  35. package/build/ui/ZSRadioGroup/index.js +4 -11
  36. package/build/ui/ZSRadioGroup/index.js.map +1 -1
  37. package/build/ui/ZSSkeleton/index.d.ts +1 -1
  38. package/build/ui/ZSSkeleton/index.d.ts.map +1 -1
  39. package/build/ui/ZSSkeleton/index.js +2 -2
  40. package/build/ui/ZSSkeleton/index.js.map +1 -1
  41. package/build/ui/ZSSkeletonBox/index.d.ts +1 -1
  42. package/build/ui/ZSSkeletonBox/index.d.ts.map +1 -1
  43. package/build/ui/ZSSkeletonBox/index.js +2 -2
  44. package/build/ui/ZSSkeletonBox/index.js.map +1 -1
  45. package/build/ui/ZSSwitch/index.d.ts +1 -1
  46. package/build/ui/ZSSwitch/index.d.ts.map +1 -1
  47. package/build/ui/ZSSwitch/index.js +3 -3
  48. package/build/ui/ZSSwitch/index.js.map +1 -1
  49. package/build/ui/ZSTextField/index.d.ts.map +1 -1
  50. package/build/ui/ZSTextField/index.js +18 -14
  51. package/build/ui/ZSTextField/index.js.map +1 -1
  52. package/build/ui/ZSTextField/ui/ButtonClose.d.ts +1 -1
  53. package/build/ui/ZSTextField/ui/ButtonClose.js +2 -2
  54. package/build/ui/ZSTextField/ui/ButtonClose.js.map +1 -1
  55. package/build/ui/ZSTextField/ui/ErrorComponent.d.ts +1 -1
  56. package/build/ui/ZSTextField/ui/ErrorComponent.js +2 -2
  57. package/build/ui/ZSTextField/ui/ErrorComponent.js.map +1 -1
  58. package/package.json +5 -5
@@ -8,7 +8,7 @@ import { Z_INDEX_VALUE } from "../../model/utils";
8
8
  // Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음
9
9
  const isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);
10
10
  const HIDDEN_BOTTOM_OFFSET = -300;
11
- function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, showOnlyKeyboardVisible = false, backgroundColor, ...accessibilityProps }) {
11
+ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, showOnlyKeyboardVisible = false, backgroundColor, ...props }) {
12
12
  const { bottom } = useSafeAreaInsets();
13
13
  const componentHeightRef = useRef(0);
14
14
  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
@@ -21,7 +21,7 @@ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, child
21
21
  handleLayoutHeight?.(height);
22
22
  };
23
23
  const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;
24
- return (<View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...accessibilityProps}>
24
+ return (<View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...props}>
25
25
  <View style={{ width: "100%", backgroundColor, paddingBottom: keyboardVisiblePadding }}>
26
26
  {children}
27
27
  </View>
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,wBAAwB;AACxB,6DAA6D;AAC7D,8CAA8C;AAC9C,MAAM,+BAA+B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;AAE7F,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC;AAWlC,SAAS,eAAe,CAAC,EACvB,kBAAkB,GAAG,CAAC,EACtB,kBAAkB,GAAG,CAAC,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAAuB,GAAG,KAAK,EAC/B,eAAe,EACf,GAAG,kBAAkB,EACf;IACN,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,WAAW,EAAE,CAAC;IAC5D,MAAM,sBAAsB,GAC1B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC;QAC3C,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IAErF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC5C,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,kBAAkB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,kBAAkB,CAAC,CACjI;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAC,CACrF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAE,CACT,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,cAAc;QACpC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\nimport { LayoutChangeEvent, Platform, StyleSheet, View, type ViewProps } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\nimport useKeyboard from \"../../model/useKeyboard\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\n// Edge-to-edge 디스플레이 정책\n// Android 11 (API 30) 이전: adjustResize가 시스템 레벨에서 자동으로 패딩을 추가\n// Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음\nconst isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);\n\nconst HIDDEN_BOTTOM_OFFSET = -300;\n\ninterface Props extends ViewProps {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n showOnlyKeyboardVisible?: boolean;\n backgroundColor?: string;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n showOnlyKeyboardVisible = false,\n backgroundColor,\n ...accessibilityProps\n}: Props) {\n const { bottom } = useSafeAreaInsets();\n const componentHeightRef = useRef(0);\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n const keyboardVisiblePadding =\n !isKeyboardVisible ? (0 + keyboardHideOffset)\n : isLegacyAndroidKeyboardBehavior ? 0\n : (keyboardHeight - (Platform.OS === 'ios' ? bottom : 0) + keyboardShowOffset);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n componentHeightRef.current = height;\n handleLayoutHeight?.(height);\n };\n\n const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;\n\n return (\n <View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...accessibilityProps}>\n <View style={{ width: \"100%\", backgroundColor, paddingBottom: keyboardVisiblePadding }}>\n {children}\n </View>\n </View >\n );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n width: '100%',\n },\n});\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,wBAAwB;AACxB,6DAA6D;AAC7D,8CAA8C;AAC9C,MAAM,+BAA+B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;AAE7F,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC;AAWlC,SAAS,eAAe,CAAC,EACvB,kBAAkB,GAAG,CAAC,EACtB,kBAAkB,GAAG,CAAC,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAAuB,GAAG,KAAK,EAC/B,eAAe,EACf,GAAG,KAAK,EACF;IACN,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,WAAW,EAAE,CAAC;IAC5D,MAAM,sBAAsB,GAC1B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC;QAC3C,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IAErF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC5C,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,kBAAkB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,CACpH;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAC,CACrF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAE,CACT,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,cAAc;QACpC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\nimport { LayoutChangeEvent, Platform, StyleSheet, View, type ViewProps } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\nimport useKeyboard from \"../../model/useKeyboard\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\n// Edge-to-edge 디스플레이 정책\n// Android 11 (API 30) 이전: adjustResize가 시스템 레벨에서 자동으로 패딩을 추가\n// Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음\nconst isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);\n\nconst HIDDEN_BOTTOM_OFFSET = -300;\n\ninterface Props extends ViewProps {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n showOnlyKeyboardVisible?: boolean;\n backgroundColor?: string;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n showOnlyKeyboardVisible = false,\n backgroundColor,\n ...props\n}: Props) {\n const { bottom } = useSafeAreaInsets();\n const componentHeightRef = useRef(0);\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n const keyboardVisiblePadding =\n !isKeyboardVisible ? (0 + keyboardHideOffset)\n : isLegacyAndroidKeyboardBehavior ? 0\n : (keyboardHeight - (Platform.OS === 'ios' ? bottom : 0) + keyboardShowOffset);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n componentHeightRef.current = height;\n handleLayoutHeight?.(height);\n };\n\n const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;\n\n return (\n <View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...props}>\n <View style={{ width: \"100%\", backgroundColor, paddingBottom: keyboardVisiblePadding }}>\n {children}\n </View>\n </View >\n );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n width: '100%',\n },\n});\n"]}
@@ -12,6 +12,6 @@ type Props = ViewProps & {
12
12
  isLoading?: boolean;
13
13
  disabled?: boolean;
14
14
  };
15
- declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant, isLoading, disabled, ...accessibilityProps }: Props): import("react").JSX.Element;
15
+ declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant, isLoading, disabled, ...props }: Props): import("react").JSX.Element;
16
16
  export default ZSBlockButton;
17
17
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/G,OAAO,EAAoB,WAAW,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMnG,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,OAAiB,EAAE,SAAiB,EAAE,QAAgB,EAAE,GAAG,kBAAkB,EAAE,EAAE,KAAK,+BAgH3K;AAED,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/G,OAAO,EAAoB,WAAW,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMnG,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,OAAiB,EAAE,SAAiB,EAAE,QAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAgH9J;AAED,eAAe,aAAa,CAAC"}
@@ -3,7 +3,7 @@ import { useTheme } from '../../context/ThemeContext';
3
3
  import ZSPressable from '../ZSPressable';
4
4
  import ZSView from '../ZSView';
5
5
  import ZSText from '../ZSText';
6
- function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false, ...accessibilityProps }) {
6
+ function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false, ...props }) {
7
7
  const { palette } = useTheme();
8
8
  const size = typo.split('.')[1];
9
9
  const getColors = () => {
@@ -76,7 +76,7 @@ function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefix
76
76
  return palette.text[c01];
77
77
  };
78
78
  const textColorValue = getTextColorValue();
79
- return (<ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled} {...accessibilityProps}>
79
+ return (<ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled} {...props}>
80
80
  <ZSView style={{
81
81
  paddingHorizontal,
82
82
  paddingVertical,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Image, type ImageSourcePropType, type StyleProp, type ViewStyle, type ViewProps } from 'react-native';\nimport { TypoColorOptions, TypoOptions, ViewColorOptions, IntentOptions } from '../../theme/types';\nimport { useTheme } from '../../context/ThemeContext';\nimport ZSPressable from '../ZSPressable';\nimport ZSView from '../ZSView';\nimport ZSText from '../ZSText';\n\ntype Props = ViewProps & {\n onPress: () => void;\n style?: StyleProp<ViewStyle>;\n title: string;\n intent?: IntentOptions;\n variant?: 'solid' | 'pastel' | 'stroke';\n typo: TypoOptions;\n prefixIcon?: ImageSourcePropType;\n isLoading?: boolean;\n disabled?: boolean;\n};\n\nfunction ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false, ...accessibilityProps }: Props) {\n const { palette } = useTheme();\n const size = typo.split('.')[1];\n\n const getColors = (): {\n backgroundColor: ViewColorOptions | 'transparent';\n textColor: TypoColorOptions;\n borderColor?: string;\n borderWidth: number;\n } => {\n const baseColor = intent === 'danger' ? 'danger'\n : intent === 'primary' ? 'primary'\n : intent === 'information' ? 'information'\n : intent === 'success' ? 'success'\n : intent === 'warning' ? 'warning'\n : 'grey';\n\n if (variant === 'solid') {\n return {\n backgroundColor: `${baseColor}.50` as ViewColorOptions,\n textColor: 'white' as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else if (variant === 'pastel') {\n return {\n backgroundColor: `${baseColor}.10` as ViewColorOptions,\n textColor: (intent === 'danger' ? 'danger.60'\n : intent === 'primary' ? 'primary.60'\n : intent === 'information' ? 'information.60'\n : intent === 'success' ? 'success.60'\n : intent === 'warning' ? 'warning.60'\n : 'grey.70') as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else { // stroke\n return {\n backgroundColor: 'transparent',\n textColor: (intent === 'danger' ? 'danger.50'\n : intent === 'primary' ? 'primary.50'\n : intent === 'information' ? 'information.50'\n : intent === 'success' ? 'success.50'\n : intent === 'warning' ? 'warning.60'\n : 'grey.60') as TypoColorOptions,\n borderColor: intent === 'danger' ? palette.danger[50]\n : intent === 'primary' ? palette.primary[50]\n : intent === 'information' ? palette.information[50]\n : intent === 'success' ? palette.success[50]\n : intent === 'warning' ? palette.warning[50]\n : palette.grey[50],\n borderWidth: 1,\n };\n }\n };\n\n const colors = getColors();\n\n const paddingHorizontal = size === '1' ? 11\n : size === '2' ? 11\n : size === '3' ? 10\n : size === '4' ? 8\n : size === '5' ? 7\n : size === '6' ? 5\n : 10;\n\n const paddingVertical = size === '1' ? 9\n : size === '2' ? 9\n : size === '3' ? 8\n : size === '4' ? 6\n : size === '5' ? 5\n : size === '6' ? 4\n : 8;\n\n const getTextColorValue = () => {\n const [c01, c02] = colors.textColor.split('.');\n if (c02) {\n return palette[c01][c02];\n }\n return palette.text[c01];\n };\n\n const textColorValue = getTextColorValue();\n\n return (\n <ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled} {...accessibilityProps}>\n <ZSView\n style={{\n paddingHorizontal,\n paddingVertical,\n borderRadius: 6,\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n gap: 4,\n backgroundColor: colors.backgroundColor === 'transparent' ? 'transparent' : undefined,\n borderColor: colors.borderColor,\n borderWidth: colors.borderWidth,\n }}\n color={colors.backgroundColor !== 'transparent' ? colors.backgroundColor : undefined}\n >\n {prefixIcon && (\n <Image\n style={{ width: 12, height: 12, marginTop: 1 }}\n tintColor={textColorValue}\n source={prefixIcon}\n />\n )}\n <ZSText color={colors.textColor} typo={typo}>{title}</ZSText>\n </ZSView>\n </ZSPressable>\n );\n}\n\nexport default ZSBlockButton;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Image, type ImageSourcePropType, type StyleProp, type ViewStyle, type ViewProps } from 'react-native';\nimport { TypoColorOptions, TypoOptions, ViewColorOptions, IntentOptions } from '../../theme/types';\nimport { useTheme } from '../../context/ThemeContext';\nimport ZSPressable from '../ZSPressable';\nimport ZSView from '../ZSView';\nimport ZSText from '../ZSText';\n\ntype Props = ViewProps & {\n onPress: () => void;\n style?: StyleProp<ViewStyle>;\n title: string;\n intent?: IntentOptions;\n variant?: 'solid' | 'pastel' | 'stroke';\n typo: TypoOptions;\n prefixIcon?: ImageSourcePropType;\n isLoading?: boolean;\n disabled?: boolean;\n};\n\nfunction ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false, ...props }: Props) {\n const { palette } = useTheme();\n const size = typo.split('.')[1];\n\n const getColors = (): {\n backgroundColor: ViewColorOptions | 'transparent';\n textColor: TypoColorOptions;\n borderColor?: string;\n borderWidth: number;\n } => {\n const baseColor = intent === 'danger' ? 'danger'\n : intent === 'primary' ? 'primary'\n : intent === 'information' ? 'information'\n : intent === 'success' ? 'success'\n : intent === 'warning' ? 'warning'\n : 'grey';\n\n if (variant === 'solid') {\n return {\n backgroundColor: `${baseColor}.50` as ViewColorOptions,\n textColor: 'white' as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else if (variant === 'pastel') {\n return {\n backgroundColor: `${baseColor}.10` as ViewColorOptions,\n textColor: (intent === 'danger' ? 'danger.60'\n : intent === 'primary' ? 'primary.60'\n : intent === 'information' ? 'information.60'\n : intent === 'success' ? 'success.60'\n : intent === 'warning' ? 'warning.60'\n : 'grey.70') as TypoColorOptions,\n borderColor: undefined,\n borderWidth: 0,\n };\n } else { // stroke\n return {\n backgroundColor: 'transparent',\n textColor: (intent === 'danger' ? 'danger.50'\n : intent === 'primary' ? 'primary.50'\n : intent === 'information' ? 'information.50'\n : intent === 'success' ? 'success.50'\n : intent === 'warning' ? 'warning.60'\n : 'grey.60') as TypoColorOptions,\n borderColor: intent === 'danger' ? palette.danger[50]\n : intent === 'primary' ? palette.primary[50]\n : intent === 'information' ? palette.information[50]\n : intent === 'success' ? palette.success[50]\n : intent === 'warning' ? palette.warning[50]\n : palette.grey[50],\n borderWidth: 1,\n };\n }\n };\n\n const colors = getColors();\n\n const paddingHorizontal = size === '1' ? 11\n : size === '2' ? 11\n : size === '3' ? 10\n : size === '4' ? 8\n : size === '5' ? 7\n : size === '6' ? 5\n : 10;\n\n const paddingVertical = size === '1' ? 9\n : size === '2' ? 9\n : size === '3' ? 8\n : size === '4' ? 6\n : size === '5' ? 5\n : size === '6' ? 4\n : 8;\n\n const getTextColorValue = () => {\n const [c01, c02] = colors.textColor.split('.');\n if (c02) {\n return palette[c01][c02];\n }\n return palette.text[c01];\n };\n\n const textColorValue = getTextColorValue();\n\n return (\n <ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled} {...props}>\n <ZSView\n style={{\n paddingHorizontal,\n paddingVertical,\n borderRadius: 6,\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n gap: 4,\n backgroundColor: colors.backgroundColor === 'transparent' ? 'transparent' : undefined,\n borderColor: colors.borderColor,\n borderWidth: colors.borderWidth,\n }}\n color={colors.backgroundColor !== 'transparent' ? colors.backgroundColor : undefined}\n >\n {prefixIcon && (\n <Image\n style={{ width: 12, height: 12, marginTop: 1 }}\n tintColor={textColorValue}\n source={prefixIcon}\n />\n )}\n <ZSText color={colors.textColor} typo={typo}>{title}</ZSText>\n </ZSView>\n </ZSPressable>\n );\n}\n\nexport default ZSBlockButton;\n"]}
@@ -2,13 +2,14 @@ import React from 'react';
2
2
  import { ViewProps } from 'react-native';
3
3
  import { RadioOption } from '../types';
4
4
  import { ZSTextProps } from '../ZSText';
5
- declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, rowCount, ...accessibilityProps }: {
5
+ declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, selectLabel, rowCount, ...props }: {
6
6
  options: RadioOption[];
7
7
  value?: RadioOption;
8
8
  onSelect: (value: RadioOption) => void;
9
9
  containerStyle?: ViewProps;
10
10
  valueStyle?: ZSTextProps;
11
11
  selectStyle?: ZSTextProps;
12
+ selectLabel?: string;
12
13
  disabled?: boolean;
13
14
  rowCount?: 1 | 2 | 3;
14
15
  } & ViewProps): React.JSX.Element;
@@ -1 +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,QAAY,EACZ,GAAG,kBAAkB,EACtB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB,GAAG,SAAS,qBAqIZ;;AAED,wBAAkC"}
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,qBAsHZ;;AAED,wBAAkC"}
@@ -4,7 +4,7 @@ import ZSText from '../ZSText';
4
4
  import ZSPressable from '../ZSPressable';
5
5
  import { useTheme } from '../../context/ThemeContext';
6
6
  import { SvgCheck } from '../../assets/SvgCheck';
7
- function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, selectStyle, rowCount = 1, ...accessibilityProps }) {
7
+ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, selectStyle, selectLabel = '선택', rowCount = 1, ...props }) {
8
8
  const { palette } = useTheme();
9
9
  const isFullWidth = rowCount === 1;
10
10
  const handleSelect = useCallback((option) => {
@@ -16,7 +16,7 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
16
16
  flexDirection: isFullWidth ? 'column' : 'row',
17
17
  flexWrap: isFullWidth ? 'nowrap' : 'wrap',
18
18
  width: '100%',
19
- }} accessibilityRole="radiogroup" accessibilityState={{ disabled }} {...containerStyle} {...accessibilityProps}>
19
+ }} {...containerStyle} {...props}>
20
20
  {options.map((option, index) => {
21
21
  const isSelected = value?.index === option.index;
22
22
  const setColor = isSelected ? palette.primary.light : palette.background.neutral;
@@ -33,14 +33,7 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
33
33
  paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,
34
34
  paddingBottom: isLastRow ? 0 : 10,
35
35
  }}>
36
- <ZSPressable onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth accessibilityRole="radio" accessibilityState={{
37
- checked: isSelected,
38
- disabled: disabled,
39
- }} accessibilityLabel={option.value} accessibilityHint={disabled
40
- ? '비활성화됨'
41
- : isSelected
42
- ? '선택됨'
43
- : '탭하여 선택'}>
36
+ <ZSPressable onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth>
44
37
  <ViewAtom style={{
45
38
  flexDirection: 'row',
46
39
  alignItems: 'center',
@@ -88,7 +81,7 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
88
81
  alignItems: 'center',
89
82
  }}>
90
83
  {isSelected ? (<SvgCheck size={18}/>) : (<ZSText typo="body.5" {...selectStyle}>
91
- 선택
84
+ {selectLabel}
92
85
  </ZSText>)}
93
86
  </ViewAtom>
94
87
  </ViewAtom>)}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,MAAuB,MAAM,WAAW,CAAC;AAChD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,QAAQ,GAAG,CAAC,EACZ,GAAG,kBAAkB,EAUV;IACX,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,QAAQ,KAAK,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,MAAmB,EAAE,EAAE;QACvD,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CAAC,MAAM,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACzC,KAAK,EAAE,MAAM;SACd,CAAC,CACF,iBAAiB,CAAC,YAAY,CAC9B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CACjC,IAAI,cAAc,CAAC,CACnB,IAAI,kBAAkB,CAAC,CAEvB;MAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,UAAU,GAAG,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;YACjD,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;YAEjF,MAAM,QAAQ,GAAG,QAAQ,CAAC;YAC1B,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,QAAQ,KAAK,CAAC,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;YAE7F,OAAO,CACL,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;oBAClC,KAAK,EAAE,QAAQ,KAAK,CAAC;wBACnB,CAAC,CAAC,KAAK;wBACP,CAAC,CAAC,QAAQ,KAAK,CAAC;4BACd,CAAC,CAAC,QAAQ;4BACV,CAAC,CAAC,MAAM;oBACZ,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACjD,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAChD,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;iBAClC,CAAC,CACA;YAAA,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CACpC,sBAAsB,CAAC,aAAa,CACpC,SAAS,CACT,iBAAiB,CAAC,OAAO,CACzB,kBAAkB,CAAC,CAAC;oBAClB,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CACF,kBAAkB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACjC,iBAAiB,CAAC,CAChB,QAAQ;oBACN,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,UAAU;wBACV,CAAC,CAAC,KAAK;wBACP,CAAC,CAAC,QAAQ,CACf,CAED;cAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;oBACL,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,eAAe,EAAE,EAAE;oBACnB,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,EAAE;oBACf,YAAY,EAAE,EAAE;oBAChB,YAAY,EAAE,GAAG;oBACjB,WAAW,EAAE,QAAQ;oBACrB,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;iBACxE,CAAC,CAEF;gBAAA,CAAC,sCAAsC,CACvC;gBAAA,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CACjB,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;wBACL,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,EAAE;wBACV,WAAW,EAAE,CAAC;wBACd,YAAY,EAAE,EAAE;wBAChB,WAAW,EAAE,QAAQ;wBACrB,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,QAAQ;qBACrB,CAAC,CAEF;oBAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;wBACL,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,EAAE;wBACV,YAAY,EAAE,CAAC;wBACf,eAAe,EAAE,QAAQ;qBAC1B,CAAC,EAEN;kBAAA,EAAE,QAAQ,CAAC,CACZ,CACD;gBAAA,CAAC,eAAe,CAChB;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,UAAU,CAAC,CACnE;kBAAA,CAAC,MAAM,CAAC,KAAK,CACf;gBAAA,EAAE,MAAM,CAER;;gBAAA,CAAC,qCAAqC,CACtC;gBAAA,CAAC,WAAW,IAAI,CACd,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAC7E;oBAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;wBACL,eAAe,EAAE,UAAU;4BACzB,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;4BACtB,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM;wBAC7B,iBAAiB,EAAE,EAAE;wBACrB,YAAY,EAAE,GAAG;wBACjB,QAAQ,EAAE,EAAE;wBACZ,SAAS,EAAE,EAAE;wBACb,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,QAAQ;qBACrB,CAAC,CAEF;sBAAA,CAAC,UAAU,CAAC,CAAC,CAAC,CACZ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CACvB,CAAC,CAAC,CAAC,CACF,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,CACpC;;wBACF,EAAE,MAAM,CAAC,CACV,CACH;oBAAA,EAAE,QAAQ,CACZ;kBAAA,EAAE,QAAQ,CAAC,CACZ,CACH;cAAA,EAAE,QAAQ,CACZ;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC,YAAY,CAAC,CAAC","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 rowCount = 1,\n ...accessibilityProps\n}: {\n options: RadioOption[];\n value?: RadioOption;\n onSelect: (value: RadioOption) => void;\n containerStyle?: ViewProps;\n valueStyle?: ZSTextProps;\n selectStyle?: ZSTextProps;\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 accessibilityRole=\"radiogroup\"\n accessibilityState={{ disabled }}\n {...containerStyle}\n {...accessibilityProps}\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 accessibilityRole=\"radio\"\n accessibilityState={{\n checked: isSelected,\n disabled: disabled,\n }}\n accessibilityLabel={option.value}\n accessibilityHint={\n disabled\n ? '비활성화됨'\n : isSelected\n ? '선택됨'\n : '탭하여 선택'\n }\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 <ZSText style={{ paddingLeft: 10, paddingRight: 12 }} {...valueStyle}>\n {option.value}\n </ZSText>\n\n {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n {isFullWidth && (\n <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>\n <ViewAtom\n style={{\n backgroundColor: isSelected\n ? palette.primary.main\n : palette.background.layer2,\n paddingHorizontal: 10,\n borderRadius: 100,\n minWidth: 42,\n minHeight: 24,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n {isSelected ? (\n <SvgCheck size={18} />\n ) : (\n <ZSText typo=\"body.5\" {...selectStyle}>\n 선택\n </ZSText>\n )}\n </ViewAtom>\n </ViewAtom>\n )}\n </ViewAtom>\n </ZSPressable>\n </ViewAtom>\n );\n })}\n </ViewAtom>\n );\n}\n\nexport default memo(ZSRadioGroup);\n"]}
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 <ZSText style={{ paddingLeft: 10, paddingRight: 12 }} {...valueStyle}>\n {option.value}\n </ZSText>\n\n {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n {isFullWidth && (\n <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>\n <ViewAtom\n style={{\n backgroundColor: isSelected\n ? palette.primary.main\n : palette.background.layer2,\n paddingHorizontal: 10,\n borderRadius: 100,\n minWidth: 42,\n minHeight: 24,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n {isSelected ? (\n <SvgCheck size={18} />\n ) : (\n <ZSText typo=\"body.5\" {...selectStyle}>\n {selectLabel}\n </ZSText>\n )}\n </ViewAtom>\n </ViewAtom>\n )}\n </ViewAtom>\n </ZSPressable>\n </ViewAtom>\n );\n })}\n </ViewAtom>\n );\n}\n\nexport default memo(ZSRadioGroup);\n"]}
@@ -6,6 +6,6 @@ interface ZSSkeletonProps extends ViewProps {
6
6
  children?: React.ReactNode;
7
7
  overlayColor?: string;
8
8
  }
9
- declare function ZSSkeleton({ isFetching, style, children, overlayColor, ...accessibilityProps }: ZSSkeletonProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
9
+ declare function ZSSkeleton({ isFetching, style, children, overlayColor, ...props }: ZSSkeletonProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
10
10
  export default ZSSkeleton;
11
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5G,UAAU,eAAgB,SAAQ,SAAS;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,kBAAkB,EAAE,EAAE,eAAe,gGAwCxG;AAED,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5G,UAAU,eAAgB,SAAQ,SAAS;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,gGAwC3F;AAED,eAAe,UAAU,CAAC"}
@@ -3,7 +3,7 @@ import { Dimensions, StyleSheet, View } from "react-native";
3
3
  import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
4
4
  import { useTheme } from "../../context/ThemeContext";
5
5
  const DEVICE_WIDTH = Dimensions.get("window").width;
6
- function ZSSkeleton({ isFetching, style, children, overlayColor, ...accessibilityProps }) {
6
+ function ZSSkeleton({ isFetching, style, children, overlayColor, ...props }) {
7
7
  const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
8
8
  const { palette } = useTheme();
9
9
  const effectColor = overlayColor || palette.background.base;
@@ -25,7 +25,7 @@ function ZSSkeleton({ isFetching, style, children, overlayColor, ...accessibilit
25
25
  transform: [{ translateX: translateX.value }],
26
26
  };
27
27
  });
28
- return isFetching ? (<View style={[style, { overflow: "hidden" }]} {...accessibilityProps}>
28
+ return isFetching ? (<View style={[style, { overflow: "hidden" }]} {...props}>
29
29
  <View style={styles.container}>
30
30
  {children}
31
31
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonProps extends ViewProps {\n isFetching?: boolean;\n style?: StyleProp<ViewStyle>;\n children?: React.ReactNode;\n overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor, ...accessibilityProps }: ZSSkeletonProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.base;\n\n useEffect(() => {\n if (isFetching) {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n } else {\n cancelAnimation(translateX);\n translateX.value = -DEVICE_WIDTH * 1.2;\n }\n\n return () => {\n cancelAnimation(translateX);\n };\n }, [isFetching]);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return isFetching ? (\n <View style={[style, { overflow: \"hidden\" }]} {...accessibilityProps}>\n <View style={styles.container}>\n {children}\n\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </View>\n </View>\n ) : (\n children\n );\n}\n\nexport default ZSSkeleton;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.6,\n width: \"100%\",\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n opacity: 0.6,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonProps extends ViewProps {\n isFetching?: boolean;\n style?: StyleProp<ViewStyle>;\n children?: React.ReactNode;\n overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor, ...props }: ZSSkeletonProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.base;\n\n useEffect(() => {\n if (isFetching) {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n } else {\n cancelAnimation(translateX);\n translateX.value = -DEVICE_WIDTH * 1.2;\n }\n\n return () => {\n cancelAnimation(translateX);\n };\n }, [isFetching]);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return isFetching ? (\n <View style={[style, { overflow: \"hidden\" }]} {...props}>\n <View style={styles.container}>\n {children}\n\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </View>\n </View>\n ) : (\n children\n );\n}\n\nexport default ZSSkeleton;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.6,\n width: \"100%\",\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n opacity: 0.6,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
@@ -7,6 +7,6 @@ interface ZSSkeletonBoxProps extends ViewProps {
7
7
  overlayColor?: string;
8
8
  color?: ViewColorOptions;
9
9
  }
10
- declare function ZSSkeletonBox({ height, style, overlayColor, color, ...accessibilityProps }: ZSSkeletonBoxProps): React.JSX.Element;
10
+ declare function ZSSkeletonBox({ height, style, overlayColor, color, ...props }: ZSSkeletonBoxProps): React.JSX.Element;
11
11
  export default ZSSkeletonBox;
12
12
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAmB,SAAQ,SAAS;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,KAAiB,EAAE,GAAG,kBAAkB,EAAE,EAAE,kBAAkB,qBAwCnH;AAED,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAc,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAmB,SAAQ,SAAS;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,KAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAwCtG;AAED,eAAe,aAAa,CAAC"}
@@ -4,7 +4,7 @@ import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, can
4
4
  import { useTheme } from "../../context/ThemeContext";
5
5
  import ZSView from "../ZSView";
6
6
  const DEVICE_WIDTH = Dimensions.get("window").width;
7
- function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...accessibilityProps }) {
7
+ function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...props }) {
8
8
  const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
9
9
  const { palette } = useTheme();
10
10
  const effectColor = overlayColor || palette.background.layer1;
@@ -20,7 +20,7 @@ function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...acce
20
20
  transform: [{ translateX: translateX.value }],
21
21
  };
22
22
  });
23
- return (<View style={[{ width: '100%' }, style, { height, overflow: "hidden" }]} {...accessibilityProps}>
23
+ return (<View style={[{ width: '100%' }, style, { height, overflow: "hidden" }]} {...props}>
24
24
  <ZSView style={[
25
25
  styles.container,
26
26
  {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport ZSView from \"../ZSView\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonBoxProps extends ViewProps {\n height: number;\n style?: StyleProp<ViewStyle>;\n overlayColor?: string;\n color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...accessibilityProps }: ZSSkeletonBoxProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.layer1;\n\n useEffect(() => {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n\n return () => {\n cancelAnimation(translateX);\n };\n }, []);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return (\n <View style={[{ width: '100%' }, style, { height, overflow: \"hidden\" }]} {...accessibilityProps}>\n <ZSView\n style={[\n styles.container,\n {\n width: DEVICE_WIDTH,\n height,\n },\n ]}\n color={color}\n >\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </ZSView>\n </View>\n );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.4,\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n backgroundColor: \"#ebebeb\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n backgroundColor: \"#f5f5f5\",\n opacity: 0.7,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSkeletonBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from \"react\";\nimport { Dimensions, type StyleProp, StyleSheet, View, type ViewStyle, type ViewProps } from \"react-native\";\nimport Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport ZSView from \"../ZSView\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEVICE_WIDTH = Dimensions.get(\"window\").width;\n\ninterface ZSSkeletonBoxProps extends ViewProps {\n height: number;\n style?: StyleProp<ViewStyle>;\n overlayColor?: string;\n color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral', ...props }: ZSSkeletonBoxProps) {\n const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);\n const { palette } = useTheme();\n const effectColor = overlayColor || palette.background.layer1;\n\n useEffect(() => {\n translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);\n\n return () => {\n cancelAnimation(translateX);\n };\n }, []);\n\n const animatedStyle = useAnimatedStyle(() => {\n \"worklet\";\n return {\n transform: [{ translateX: translateX.value }],\n };\n });\n\n return (\n <View style={[{ width: '100%' }, style, { height, overflow: \"hidden\" }]} {...props}>\n <ZSView\n style={[\n styles.container,\n {\n width: DEVICE_WIDTH,\n height,\n },\n ]}\n color={color}\n >\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </ZSView>\n </View>\n );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.4,\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n backgroundColor: \"#ebebeb\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n backgroundColor: \"#f5f5f5\",\n opacity: 0.7,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
@@ -9,6 +9,6 @@ interface ZSSwitchProps extends ViewProps {
9
9
  trackColorActive?: string;
10
10
  thumbColor?: string;
11
11
  }
12
- declare function ZSSwitch({ isActive, onToggle, style, width, trackColorInactive, trackColorActive, thumbColor, ...accessibilityProps }: ZSSwitchProps): React.JSX.Element;
12
+ declare function ZSSwitch({ isActive, onToggle, style, width, trackColorInactive, trackColorActive, thumbColor, ...props }: ZSSwitchProps): React.JSX.Element;
13
13
  export default ZSSwitch;
14
14
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzF,UAAU,aAAc,SAAQ,SAAS;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,KAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAsB,EACtB,GAAG,kBAAkB,EACtB,EAAE,aAAa,qBAmEf;AAED,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzF,UAAU,aAAc,SAAQ,SAAS;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,KAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAsB,EACtB,GAAG,KAAK,EACT,EAAE,aAAa,qBAkEf;AAED,eAAe,QAAQ,CAAC"}
@@ -2,7 +2,7 @@ import React, { useState } from "react";
2
2
  import { Pressable } from "react-native";
3
3
  import Animated, { interpolate, interpolateColor, useAnimatedStyle, withTiming, useDerivedValue, } from "react-native-reanimated";
4
4
  import { useTheme } from "../../context/ThemeContext";
5
- function ZSSwitch({ isActive = false, onToggle, style, width = 50, trackColorInactive, trackColorActive, thumbColor = '#ffffff', ...accessibilityProps }) {
5
+ function ZSSwitch({ isActive = false, onToggle, style, width = 50, trackColorInactive, trackColorActive, thumbColor = '#ffffff', ...props }) {
6
6
  const [toggledWidth, setToggledWidth] = useState(0);
7
7
  const { palette } = useTheme();
8
8
  const height = width * 0.6;
@@ -40,8 +40,8 @@ function ZSSwitch({ isActive = false, onToggle, style, width = 50, trackColorIna
40
40
  borderRadius: thumbBorderRadius,
41
41
  justifyContent: "center",
42
42
  };
43
- return (<Pressable onPress={onToggle} style={style} {...accessibilityProps}>
44
- <Animated.View style={[colorAnimation, toggleStyle]} onLayout={e => setToggledWidth(e.nativeEvent.layout.width)} accessibilityState={{ selected: isActive }}>
43
+ return (<Pressable onPress={onToggle} style={style} {...props}>
44
+ <Animated.View style={[colorAnimation, toggleStyle]} onLayout={e => setToggledWidth(e.nativeEvent.layout.width)}>
45
45
  <Animated.View style={[togglePositionAnimation, thumbStyle, { backgroundColor: thumbColor }]}/>
46
46
  </Animated.View>
47
47
  </Pressable>);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAkC,SAAS,EAAkB,MAAM,cAAc,CAAC;AACzF,OAAO,QAAQ,EAAE,EACf,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,eAAe,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAYtD,SAAS,QAAQ,CAAC,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,KAAK,EACL,KAAK,GAAG,EAAE,EACV,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GAAG,SAAS,EACtB,GAAG,kBAAkB,EACP;IACd,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,KAAK,GAAG,GAAG,CAAC;IAC3B,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IAC7B,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,GAAG,GAAG,CAAC;IACxC,MAAM,iBAAiB,GAAG,SAAS,GAAG,CAAC,CAAC;IAExC,MAAM,aAAa,GAAG,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,gBAAgB,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;IAE7D,MAAM,cAAc,GAAG,eAAe,CAAC,GAAG,EAAE;QAC1C,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,cAAc,GAAG,gBAAgB,CAAC,GAAG,EAAE;QAC3C,SAAS,CAAC;QACV,MAAM,KAAK,GAAG,gBAAgB,CAC5B,cAAc,CAAC,KAAK,EACpB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,aAAa,EAAE,WAAW,CAAC,CAC7B,CAAC;QAEF,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACpD,SAAS,CAAC;QACV,MAAM,aAAa,GAAG,WAAW,CAC/B,cAAc,CAAC,KAAK,EACpB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC,EAC3C,OAAO,CACR,CAAC;QAEF,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;SAC3C,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvC,MAAM,WAAW,GAAG;QAClB,KAAK;QACL,MAAM;QACN,YAAY,EAAE,kBAAkB;QAChC,OAAO;QACP,cAAc,EAAE,QAAiB;KAClC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,iBAAiB;QAC/B,cAAc,EAAE,QAAiB;KAClC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,kBAAkB,CAAC,CACjE;MAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CACrC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC3D,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAE3C;QAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAuB,EAAE,UAAU,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,EAC/F;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAAA,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React, { useState } from \"react\";\nimport { type StyleProp, type ViewStyle, Pressable, type ViewProps } from \"react-native\";\nimport Animated, {\n interpolate,\n interpolateColor,\n useAnimatedStyle,\n withTiming,\n useDerivedValue,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\ninterface ZSSwitchProps extends ViewProps {\n isActive: boolean;\n onToggle: () => void;\n style?: StyleProp<ViewStyle>;\n width?: number;\n trackColorInactive?: string;\n trackColorActive?: string;\n thumbColor?: string;\n}\n\nfunction ZSSwitch({\n isActive = false,\n onToggle,\n style,\n width = 50,\n trackColorInactive,\n trackColorActive,\n thumbColor = '#ffffff',\n ...accessibilityProps\n}: ZSSwitchProps) {\n const [toggledWidth, setToggledWidth] = useState(0);\n const { palette } = useTheme();\n const height = width * 0.6;\n const padding = width * 0.04;\n const thumbSize = height - padding * 2;\n const toggleBorderRadius = height * 1.2;\n const thumbBorderRadius = thumbSize / 2;\n\n const inactiveColor = trackColorInactive ?? palette.grey[30];\n const activeColor = trackColorActive ?? palette.primary.main;\n\n const toggleProgress = useDerivedValue(() => {\n return withTiming(isActive ? 1 : 0, { duration: 200 });\n }, [isActive]);\n\n const colorAnimation = useAnimatedStyle(() => {\n 'worklet';\n const color = interpolateColor(\n toggleProgress.value,\n [0, 1],\n [inactiveColor, activeColor],\n );\n\n return { backgroundColor: color };\n }, [inactiveColor, activeColor]);\n\n const togglePositionAnimation = useAnimatedStyle(() => {\n 'worklet';\n const positionStyle = interpolate(\n toggleProgress.value,\n [0, 1],\n [0, toggledWidth - thumbSize - padding * 2],\n 'clamp',\n );\n\n return {\n transform: [{ translateX: positionStyle }],\n };\n }, [toggledWidth, thumbSize, padding]);\n\n const toggleStyle = {\n width,\n height,\n borderRadius: toggleBorderRadius,\n padding,\n justifyContent: \"center\" as const,\n };\n\n const thumbStyle = {\n width: thumbSize,\n height: thumbSize,\n borderRadius: thumbBorderRadius,\n justifyContent: \"center\" as const,\n };\n\n return (\n <Pressable onPress={onToggle} style={style} {...accessibilityProps}>\n <Animated.View\n style={[colorAnimation, toggleStyle]}\n onLayout={e => setToggledWidth(e.nativeEvent.layout.width)}\n accessibilityState={{ selected: isActive }}\n >\n <Animated.View style={[togglePositionAnimation, thumbStyle, { backgroundColor: thumbColor }]} />\n </Animated.View>\n </Pressable>\n );\n};\n\nexport default ZSSwitch;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSSwitch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport { type StyleProp, type ViewStyle, Pressable, type ViewProps } from \"react-native\";\nimport Animated, {\n interpolate,\n interpolateColor,\n useAnimatedStyle,\n withTiming,\n useDerivedValue,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\ninterface ZSSwitchProps extends ViewProps {\n isActive: boolean;\n onToggle: () => void;\n style?: StyleProp<ViewStyle>;\n width?: number;\n trackColorInactive?: string;\n trackColorActive?: string;\n thumbColor?: string;\n}\n\nfunction ZSSwitch({\n isActive = false,\n onToggle,\n style,\n width = 50,\n trackColorInactive,\n trackColorActive,\n thumbColor = '#ffffff',\n ...props\n}: ZSSwitchProps) {\n const [toggledWidth, setToggledWidth] = useState(0);\n const { palette } = useTheme();\n const height = width * 0.6;\n const padding = width * 0.04;\n const thumbSize = height - padding * 2;\n const toggleBorderRadius = height * 1.2;\n const thumbBorderRadius = thumbSize / 2;\n\n const inactiveColor = trackColorInactive ?? palette.grey[30];\n const activeColor = trackColorActive ?? palette.primary.main;\n\n const toggleProgress = useDerivedValue(() => {\n return withTiming(isActive ? 1 : 0, { duration: 200 });\n }, [isActive]);\n\n const colorAnimation = useAnimatedStyle(() => {\n 'worklet';\n const color = interpolateColor(\n toggleProgress.value,\n [0, 1],\n [inactiveColor, activeColor],\n );\n\n return { backgroundColor: color };\n }, [inactiveColor, activeColor]);\n\n const togglePositionAnimation = useAnimatedStyle(() => {\n 'worklet';\n const positionStyle = interpolate(\n toggleProgress.value,\n [0, 1],\n [0, toggledWidth - thumbSize - padding * 2],\n 'clamp',\n );\n\n return {\n transform: [{ translateX: positionStyle }],\n };\n }, [toggledWidth, thumbSize, padding]);\n\n const toggleStyle = {\n width,\n height,\n borderRadius: toggleBorderRadius,\n padding,\n justifyContent: \"center\" as const,\n };\n\n const thumbStyle = {\n width: thumbSize,\n height: thumbSize,\n borderRadius: thumbBorderRadius,\n justifyContent: \"center\" as const,\n };\n\n return (\n <Pressable onPress={onToggle} style={style} {...props}>\n <Animated.View\n style={[colorAnimation, toggleStyle]}\n onLayout={e => setToggledWidth(e.nativeEvent.layout.width)}\n >\n <Animated.View style={[togglePositionAnimation, thumbStyle, { backgroundColor: thumbColor }]} />\n </Animated.View>\n </Pressable>\n );\n};\n\nexport default ZSSwitch;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0C,SAAS,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AAKzE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAMzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,QAAA,MAAM,WAAW,sGA2Pf,CAAC;AAIH,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0C,SAAS,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AAI5G,OAAO,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AAKzE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAMzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,QAAA,MAAM,WAAW,sGA+Pf,CAAC;AAIH,eAAe,WAAW,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { useMemo, useCallback, useState, forwardRef, useEffect } from 'react';
2
2
  import { Platform, TextInput } from 'react-native';
3
- import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, withDelay, ReduceMotion } from 'react-native-reanimated';
3
+ import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, ReduceMotion } from 'react-native-reanimated';
4
4
  import ButtonClose from './ui/ButtonClose';
5
5
  import ErrorComponent from './ui/ErrorComponent';
6
6
  import { extractStyle } from '../../model/utils';
@@ -8,7 +8,7 @@ import { useTheme } from '../../context/ThemeContext';
8
8
  import ViewAtom from '../atoms/ViewAtom';
9
9
  const iosOffset = Platform.OS === 'ios' ? 8 : 4;
10
10
  const ANIM_DURATION = 150;
11
- const KEYBOARD_SETTLE_DELAY = Platform.OS === 'ios' ? 50 : 0;
11
+ const TIMING_CONFIG = { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System };
12
12
  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) => {
13
13
  const { typography, palette } = useTheme();
14
14
  const [primaryStyle, subStyle] = typo.split('.');
@@ -21,11 +21,12 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
21
21
  const [isFocusedForUI, setIsFocusedForUI] = useState(false);
22
22
  const boxHeightValue = useSharedValue(0);
23
23
  const isError = status === 'error';
24
+ const hasValue = value !== '';
24
25
  useEffect(() => {
25
- labelProgress.value = withTiming(value !== '' ? 1 : 0, { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System });
26
- }, [value]);
26
+ labelProgress.value = withTiming(hasValue ? 1 : 0, TIMING_CONFIG);
27
+ }, [hasValue]);
27
28
  useEffect(() => {
28
- errorProgress.value = withTiming(isError ? 1 : 0, { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System });
29
+ errorProgress.value = withTiming(isError ? 1 : 0, TIMING_CONFIG);
29
30
  }, [isError]);
30
31
  const animationConstants = useMemo(() => ({
31
32
  baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),
@@ -36,14 +37,18 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
36
37
  const animatedLabelStyle = useAnimatedStyle(() => {
37
38
  'worklet';
38
39
  const progress = Math.max(labelProgress.value, focusProgress.value);
39
- const labelFontSize = interpolate(progress, [0, 1], [animationConstants.baseFontSize, animationConstants.targetFontSize], 'clamp');
40
- const labelTop = interpolate(progress, [0, 1], [
41
- animationConstants.baseTop,
42
- isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset,
40
+ const labelTranslateY = interpolate(progress, [0, 1], [
41
+ 0,
42
+ isTextArea ? -24 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset - animationConstants.baseTop,
43
43
  ], 'clamp');
44
+ const labelScale = interpolate(progress, [0, 1], [1, animationConstants.targetFontSize / animationConstants.baseFontSize], 'clamp');
44
45
  return {
45
- top: labelTop,
46
- fontSize: labelFontSize,
46
+ top: animationConstants.baseTop,
47
+ transformOrigin: 'left center',
48
+ transform: [
49
+ { translateY: labelTranslateY },
50
+ { scale: labelScale },
51
+ ],
47
52
  };
48
53
  }, [animationConstants, isTextArea]);
49
54
  const handleLayout = useCallback((event) => {
@@ -51,12 +56,11 @@ const ZSTextField = forwardRef(({ typo = 'body.2', status = 'default', value, on
51
56
  boxHeightValue.value = height;
52
57
  }, []);
53
58
  const handleFocus = useCallback(() => {
54
- const timing = withTiming(1, { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System });
55
- focusProgress.value = KEYBOARD_SETTLE_DELAY > 0 ? withDelay(KEYBOARD_SETTLE_DELAY, timing) : timing;
59
+ focusProgress.value = withTiming(1, TIMING_CONFIG);
56
60
  setIsFocusedForUI(true);
57
61
  }, []);
58
62
  const handleBlur = useCallback(() => {
59
- focusProgress.value = withTiming(0, { duration: ANIM_DURATION, reduceMotion: ReduceMotion.System });
63
+ focusProgress.value = withTiming(0, TIMING_CONFIG);
60
64
  setIsFocusedForUI(false);
61
65
  }, []);
62
66
  const colorConfig = useMemo(() => ({