@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 +7 -0
- package/android/build/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties +1 -1
- package/android/build/kotlin/compileDebugKotlin/cacheable/last-build.bin +0 -0
- package/android/build/kotlin/compileDebugKotlin/local-state/build-history.bin +0 -0
- package/build/index.d.ts +3 -1
- package/build/index.d.ts.map +1 -1
- package/build/index.js +3 -1
- package/build/index.js.map +1 -1
- package/build/ui/ZSSkeleton/index.d.ts +11 -0
- package/build/ui/ZSSkeleton/index.d.ts.map +1 -0
- package/build/ui/ZSSkeleton/index.js +64 -0
- package/build/ui/ZSSkeleton/index.js.map +1 -0
- package/build/ui/ZSSkeletonBox/index.d.ts +12 -0
- package/build/ui/ZSSkeletonBox/index.d.ts.map +1 -0
- package/build/ui/ZSSkeletonBox/index.js +64 -0
- package/build/ui/ZSSkeletonBox/index.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
#
|
|
1
|
+
#Mon Dec 08 14:37:33 KST 2025
|
|
Binary file
|
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
|
-
|
|
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";
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","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;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC5D,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,EAEZ,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,EAEb,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ,EAER,aAAa,EACb,mBAAmB,GACpB,CAAC;AAIF,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,CAAC"}
|
|
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
|
package/build/index.js.map
CHANGED
|
@@ -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"]}
|