@0610studio/zs-ui 0.13.4 → 0.13.5

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.
package/README.md CHANGED
@@ -30,6 +30,13 @@ npx expo install @0610studio/zs-ui
30
30
  [EXPO snack](https://snack.expo.dev/@studio0610/zs-ui_13_playground)에서 확인 가능합니다.
31
31
 
32
32
  <br />
33
+
34
+ ### TODO
35
+
36
+ - [] Modality 웹 미동작
37
+
38
+ <br />
39
+
33
40
  <!-- TEST_RESULTS -->
34
41
  ## 테스트 결과
35
42
 
@@ -1 +1 @@
1
- #Thu Nov 20 17:24:12 KST 2025
1
+ #Mon Dec 08 14:37:33 KST 2025
package/build/index.d.ts CHANGED
@@ -22,7 +22,9 @@ import { ZSTextProps } from "./ui/ZSText";
22
22
  import { BoxStyle, ZSTextFieldRef } from "./ui/ZSTextField";
23
23
  import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';
24
24
  import ZSBlockButton from './ui/ZSBlockButton';
25
- export { useTheme, useFoldingState, ThemeProvider, OverlayProvider, themeFactory, ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal, GlobalOverlay, useStyleSheetCreate, };
25
+ import ZSSkeleton from './ui/ZSSkeleton';
26
+ import ZSSkeletonBox from './ui/ZSSkeletonBox';
27
+ export { useTheme, useFoldingState, ThemeProvider, OverlayProvider, themeFactory, ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton, ZSSkeleton, ZSSkeletonBox, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal, GlobalOverlay, useStyleSheetCreate, };
26
28
  import type { ThemeProviderProps, ThemeProps, Palette } from "./context/ThemeContext";
27
29
  import { ColorPalette, ColorPaletteExtend, ThemeTextType, ThemeBackground, MainColors, Theme, TypographyVariants, ThemeFonts, TypoNumber, TypographyVariantsProps, TypoStyle, TypoOptions, TypoSubStyle, TypoColorOptions, ShadowLevel, ShadowStyle } from "./theme/types";
28
30
  import { ThemeFactoryColors, ThemeFactoryConfig } from "./theme/palette";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/build/index.js CHANGED
@@ -19,9 +19,11 @@ import TextAtom from './ui/atoms/TextAtom';
19
19
  import ZSAboveKeyboard from "./ui/ZSAboveKeyboard";
20
20
  import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';
21
21
  import ZSBlockButton from './ui/ZSBlockButton';
22
+ import ZSSkeleton from './ui/ZSSkeleton';
23
+ import ZSSkeletonBox from './ui/ZSSkeletonBox';
22
24
  export { useTheme, useFoldingState, ThemeProvider, OverlayProvider, themeFactory,
23
25
  // ---
24
- ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton,
26
+ ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSSwitch, ErrorComponent, ZSAboveKeyboard, ZSBlockButton, ZSSkeleton, ZSSkeletonBox,
25
27
  // ---
26
28
  AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal,
27
29
  // Global overlay functions
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/H,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY;AACZ,MAAM;AACN,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa;AACb,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ;AACR,2BAA2B;AAC3B,aAAa,EACb,mBAAmB,GACpB,CAAC","sourcesContent":["import { GlobalOverlay } from './model/globalOverlay'\nimport { useStyleSheetCreate } from './model/useStyleSheetCreate'\nimport { OverlayProvider } from \"./context/OverlayContext\";\nimport { ThemeProvider, useTheme } from \"./context/ThemeContext\";\nimport { useFoldingState } from './model/useFoldingState'\nimport { themeFactory } from './theme/palette';\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\nimport ZSContainer from './ui/ZSContainer';\nimport ZSPressable from './ui/ZSPressable';\nimport ZSText from './ui/ZSText';\nimport ThrottleButton from './ui/ThrottleButton';\nimport ZSTextField from './ui/ZSTextField';\nimport ZSRadioGroup from './ui/ZSRadioGroup';\nimport ZSSwitch from './ui/ZSSwitch';\nimport ZSBottomCta from './ui/ZSBottomCta';\nimport ZSView from './ui/ZSView';\nimport AnimatedWrapper from './ui/atoms/AnimatedWrapper';\nimport TextAtom from './ui/atoms/TextAtom';\nimport ZSAboveKeyboard from \"./ui/ZSAboveKeyboard\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle, ZSTextFieldRef } from \"./ui/ZSTextField\";\nimport { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';\nimport ZSBlockButton from './ui/ZSBlockButton';\n\nexport {\n useTheme,\n useFoldingState,\n ThemeProvider,\n OverlayProvider,\n themeFactory,\n // ---\n ZSBottomCta,\n ZSView,\n AnimatedWrapper,\n TextAtom,\n ZSContainer,\n ZSPressable,\n ZSText,\n ThrottleButton,\n ZSTextField,\n ZSRadioGroup,\n ZSSwitch,\n ErrorComponent,\n ZSAboveKeyboard,\n ZSBlockButton,\n // ---\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n ZSPortal,\n // Global overlay functions\n GlobalOverlay,\n useStyleSheetCreate,\n};\n\n// ------------------------------------------------------\n\nimport type { ThemeProviderProps, ThemeProps, Palette } from \"./context/ThemeContext\";\nimport {\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ShadowLevel,\n ShadowStyle,\n} from \"./theme/types\";\nimport { ThemeFactoryColors, ThemeFactoryConfig } from \"./theme/palette\";\nimport {\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n FoldingStateInfo\n} from \"./model/types\";\nimport { RadioOption } from \"./ui/types\";\n\nexport type {\n ThemeProviderProps,\n ThemeProps,\n Palette,\n ZSTextProps,\n BoxStyle,\n ZSTextFieldRef,\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ThemeFactoryColors,\n ThemeFactoryConfig,\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n RadioOption,\n ShadowLevel,\n ShadowStyle,\n ZSContainerRef,\n FoldingStateInfo,\n};\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/H,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY;AACZ,MAAM;AACN,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa;AACb,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ;AACR,2BAA2B;AAC3B,aAAa,EACb,mBAAmB,GACpB,CAAC","sourcesContent":["import { GlobalOverlay } from './model/globalOverlay'\nimport { useStyleSheetCreate } from './model/useStyleSheetCreate'\nimport { OverlayProvider } from \"./context/OverlayContext\";\nimport { ThemeProvider, useTheme } from \"./context/ThemeContext\";\nimport { useFoldingState } from './model/useFoldingState'\nimport { themeFactory } from './theme/palette';\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\nimport ZSContainer from './ui/ZSContainer';\nimport ZSPressable from './ui/ZSPressable';\nimport ZSText from './ui/ZSText';\nimport ThrottleButton from './ui/ThrottleButton';\nimport ZSTextField from './ui/ZSTextField';\nimport ZSRadioGroup from './ui/ZSRadioGroup';\nimport ZSSwitch from './ui/ZSSwitch';\nimport ZSBottomCta from './ui/ZSBottomCta';\nimport ZSView from './ui/ZSView';\nimport AnimatedWrapper from './ui/atoms/AnimatedWrapper';\nimport TextAtom from './ui/atoms/TextAtom';\nimport ZSAboveKeyboard from \"./ui/ZSAboveKeyboard\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle, ZSTextFieldRef } from \"./ui/ZSTextField\";\nimport { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal } from './overlay';\nimport ZSBlockButton from './ui/ZSBlockButton';\nimport ZSSkeleton from './ui/ZSSkeleton';\nimport ZSSkeletonBox from './ui/ZSSkeletonBox';\n\nexport {\n useTheme,\n useFoldingState,\n ThemeProvider,\n OverlayProvider,\n themeFactory,\n // ---\n ZSBottomCta,\n ZSView,\n AnimatedWrapper,\n TextAtom,\n ZSContainer,\n ZSPressable,\n ZSText,\n ThrottleButton,\n ZSTextField,\n ZSRadioGroup,\n ZSSwitch,\n ErrorComponent,\n ZSAboveKeyboard,\n ZSBlockButton,\n ZSSkeleton,\n ZSSkeletonBox,\n // ---\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n ZSPortal,\n // Global overlay functions\n GlobalOverlay,\n useStyleSheetCreate,\n};\n\n// ------------------------------------------------------\n\nimport type { ThemeProviderProps, ThemeProps, Palette } from \"./context/ThemeContext\";\nimport {\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ShadowLevel,\n ShadowStyle,\n} from \"./theme/types\";\nimport { ThemeFactoryColors, ThemeFactoryConfig } from \"./theme/palette\";\nimport {\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n FoldingStateInfo\n} from \"./model/types\";\nimport { RadioOption } from \"./ui/types\";\n\nexport type {\n ThemeProviderProps,\n ThemeProps,\n Palette,\n ZSTextProps,\n BoxStyle,\n ZSTextFieldRef,\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n ThemeFactoryColors,\n ThemeFactoryConfig,\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n RadioOption,\n ShadowLevel,\n ShadowStyle,\n ZSContainerRef,\n FoldingStateInfo,\n};\n"]}
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import { type StyleProp, type ViewStyle } from "react-native";
3
+ interface ZSSkeletonProps {
4
+ isFetching?: boolean;
5
+ style?: StyleProp<ViewStyle>;
6
+ children?: React.ReactNode;
7
+ overlayColor?: string;
8
+ }
9
+ declare function ZSSkeleton({ isFetching, style, children, overlayColor }: ZSSkeletonProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
10
+ export default ZSSkeleton;
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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,MAAM,cAAc,CAAC;AAM5F,UAAU,eAAe;IACrB,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,EAAE,eAAe,gGAwCjF;AAED,eAAe,UAAU,CAAC"}
@@ -0,0 +1,64 @@
1
+ import React, { useEffect } from "react";
2
+ import { Dimensions, StyleSheet, View } from "react-native";
3
+ import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
4
+ import { useTheme } from "../../context/ThemeContext";
5
+ const DEVICE_WIDTH = Dimensions.get("window").width;
6
+ function ZSSkeleton({ isFetching, style, children, overlayColor }) {
7
+ const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
8
+ const { palette } = useTheme();
9
+ const effectColor = overlayColor || palette.background.base;
10
+ useEffect(() => {
11
+ if (isFetching) {
12
+ translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);
13
+ }
14
+ else {
15
+ cancelAnimation(translateX);
16
+ translateX.value = -DEVICE_WIDTH * 1.2;
17
+ }
18
+ return () => {
19
+ cancelAnimation(translateX);
20
+ };
21
+ }, [isFetching]);
22
+ const animatedStyle = useAnimatedStyle(() => {
23
+ "worklet";
24
+ return {
25
+ transform: [{ translateX: translateX.value }],
26
+ };
27
+ });
28
+ return isFetching ? (<View style={[style, { overflow: "hidden" }]}>
29
+ <View style={styles.container}>
30
+ {children}
31
+
32
+ <Animated.View style={[styles.shimmer, animatedStyle]}>
33
+ <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
34
+ <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
35
+ <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
36
+ </Animated.View>
37
+ </View>
38
+ </View>) : (children);
39
+ }
40
+ export default ZSSkeleton;
41
+ const styles = StyleSheet.create({
42
+ container: {
43
+ overflow: "hidden",
44
+ opacity: 0.6,
45
+ width: "100%",
46
+ },
47
+ shimmer: {
48
+ width: "100%",
49
+ height: "100%",
50
+ position: "absolute",
51
+ flexDirection: "row",
52
+ },
53
+ shimmerSub: {
54
+ height: "100%",
55
+ opacity: 0.3,
56
+ width: DEVICE_WIDTH * 0.3,
57
+ },
58
+ shimmerCenter: {
59
+ height: "100%",
60
+ opacity: 0.6,
61
+ width: DEVICE_WIDTH * 0.4,
62
+ },
63
+ });
64
+ //# sourceMappingURL=index.js.map
@@ -0,0 +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 } 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 {\n isFetching?: boolean;\n style?: StyleProp<ViewStyle>;\n children?: React.ReactNode;\n overlayColor?: string;\n}\n\nfunction ZSSkeleton({ isFetching, style, children, overlayColor }: 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\" }]}>\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"]}
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { type StyleProp, type ViewStyle } from "react-native";
3
+ import { ViewColorOptions } from "../../theme/types";
4
+ interface ZSSkeletonBoxProps {
5
+ height: number;
6
+ style?: StyleProp<ViewStyle>;
7
+ overlayColor?: string;
8
+ color?: ViewColorOptions;
9
+ }
10
+ declare function ZSSkeletonBox({ height, style, overlayColor, color }: ZSSkeletonBoxProps): React.JSX.Element;
11
+ export default ZSSkeletonBox;
12
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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,MAAM,cAAc,CAAC;AAI5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,kBAAkB;IACxB,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,EAAE,kBAAkB,qBAwC5F;AAED,eAAe,aAAa,CAAC"}
@@ -0,0 +1,64 @@
1
+ import React, { useEffect } from "react";
2
+ import { Dimensions, StyleSheet, View } from "react-native";
3
+ import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, cancelAnimation } from "react-native-reanimated";
4
+ import { useTheme } from "../../context/ThemeContext";
5
+ import ZSView from "../ZSView";
6
+ const DEVICE_WIDTH = Dimensions.get("window").width;
7
+ function ZSSkeletonBox({ height, style, overlayColor, color = 'neutral' }) {
8
+ const translateX = useSharedValue(-DEVICE_WIDTH * 1.2);
9
+ const { palette } = useTheme();
10
+ const effectColor = overlayColor || palette.background.layer1;
11
+ useEffect(() => {
12
+ translateX.value = withRepeat(withTiming(DEVICE_WIDTH * 1.2, { duration: 800 }), -1, false);
13
+ return () => {
14
+ cancelAnimation(translateX);
15
+ };
16
+ }, []);
17
+ const animatedStyle = useAnimatedStyle(() => {
18
+ "worklet";
19
+ return {
20
+ transform: [{ translateX: translateX.value }],
21
+ };
22
+ });
23
+ return (<View style={[{ width: '100%' }, style, { height, overflow: "hidden" }]}>
24
+ <ZSView style={[
25
+ styles.container,
26
+ {
27
+ width: DEVICE_WIDTH,
28
+ height,
29
+ },
30
+ ]} color={color}>
31
+ <Animated.View style={[styles.shimmer, animatedStyle]}>
32
+ <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
33
+ <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]}/>
34
+ <View style={[styles.shimmerSub, { backgroundColor: effectColor }]}/>
35
+ </Animated.View>
36
+ </ZSView>
37
+ </View>);
38
+ }
39
+ export default ZSSkeletonBox;
40
+ const styles = StyleSheet.create({
41
+ container: {
42
+ overflow: "hidden",
43
+ opacity: 0.4,
44
+ },
45
+ shimmer: {
46
+ width: "100%",
47
+ height: "100%",
48
+ position: "absolute",
49
+ flexDirection: "row",
50
+ },
51
+ shimmerSub: {
52
+ height: "100%",
53
+ backgroundColor: "#ebebeb",
54
+ opacity: 0.3,
55
+ width: DEVICE_WIDTH * 0.3,
56
+ },
57
+ shimmerCenter: {
58
+ height: "100%",
59
+ backgroundColor: "#f5f5f5",
60
+ opacity: 0.7,
61
+ width: DEVICE_WIDTH * 0.4,
62
+ },
63
+ });
64
+ //# sourceMappingURL=index.js.map
@@ -0,0 +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 } 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 {\n height: number;\n style?: StyleProp<ViewStyle>;\n overlayColor?: string;\n color?: ViewColorOptions;\n}\n\nfunction ZSSkeletonBox({ height, style, overlayColor, color = 'neutral' }: 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\" }]}>\n <ZSView\n style={[\n styles.container,\n {\n width: DEVICE_WIDTH,\n height,\n },\n ]}\n color={color}\n >\n <Animated.View style={[styles.shimmer, animatedStyle]}>\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerCenter, { backgroundColor: effectColor }]} />\n <View style={[styles.shimmerSub, { backgroundColor: effectColor }]} />\n </Animated.View>\n </ZSView>\n </View>\n );\n}\n\nexport default ZSSkeletonBox;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: \"hidden\",\n opacity: 0.4,\n },\n shimmer: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n flexDirection: \"row\",\n },\n shimmerSub: {\n height: \"100%\",\n backgroundColor: \"#ebebeb\",\n opacity: 0.3,\n width: DEVICE_WIDTH * 0.3,\n },\n shimmerCenter: {\n height: \"100%\",\n backgroundColor: \"#f5f5f5\",\n opacity: 0.7,\n width: DEVICE_WIDTH * 0.4,\n },\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@0610studio/zs-ui",
3
- "version": "0.13.4",
3
+ "version": "0.13.5",
4
4
  "private": false,
5
5
  "description": "EXPO ZS-UI",
6
6
  "type": "commonjs",