react-native-skelo 0.0.1 → 0.0.3
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/LICENSE +21 -0
- package/README.md +149 -20
- package/lib/commonjs/Skelo.js +104 -0
- package/lib/commonjs/Skelo.js.map +1 -0
- package/lib/commonjs/animations/AnimationWrapper.js +76 -0
- package/lib/commonjs/animations/AnimationWrapper.js.map +1 -0
- package/lib/commonjs/animations/PulseAnimation.js +52 -0
- package/lib/commonjs/animations/PulseAnimation.js.map +1 -0
- package/lib/commonjs/animations/ShimmerAnimation.js +73 -0
- package/lib/commonjs/animations/ShimmerAnimation.js.map +1 -0
- package/lib/commonjs/animations/index.js +27 -0
- package/lib/commonjs/animations/index.js.map +1 -0
- package/lib/commonjs/components/MeasuredBlock.js +64 -0
- package/lib/commonjs/components/MeasuredBlock.js.map +1 -0
- package/lib/commonjs/components/Skeleton.js +144 -0
- package/lib/commonjs/components/Skeleton.js.map +1 -0
- package/lib/commonjs/components/SkeletonIgnore.js +30 -0
- package/lib/commonjs/components/SkeletonIgnore.js.map +1 -0
- package/lib/commonjs/components/SkeletonRenderer.js +270 -0
- package/lib/commonjs/components/SkeletonRenderer.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonBox.js +47 -0
- package/lib/commonjs/components/primitives/SkeletonBox.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonCircle.js +44 -0
- package/lib/commonjs/components/primitives/SkeletonCircle.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonImage.js +46 -0
- package/lib/commonjs/components/primitives/SkeletonImage.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonText.js +60 -0
- package/lib/commonjs/components/primitives/SkeletonText.js.map +1 -0
- package/lib/commonjs/components/primitives/index.js +34 -0
- package/lib/commonjs/components/primitives/index.js.map +1 -0
- package/lib/commonjs/components/withSkeleton.js +45 -0
- package/lib/commonjs/components/withSkeleton.js.map +1 -0
- package/lib/commonjs/constants/defaults.js +43 -0
- package/lib/commonjs/constants/defaults.js.map +1 -0
- package/lib/commonjs/core/deepRegistry.js +18 -0
- package/lib/commonjs/core/deepRegistry.js.map +1 -0
- package/lib/commonjs/core/generator/StyleSkeleton.js +101 -0
- package/lib/commonjs/core/generator/StyleSkeleton.js.map +1 -0
- package/lib/commonjs/core/parser/Parser.js +84 -0
- package/lib/commonjs/core/parser/Parser.js.map +1 -0
- package/lib/commonjs/core/parser/expandOffline.js +83 -0
- package/lib/commonjs/core/parser/expandOffline.js.map +1 -0
- package/lib/commonjs/core/parser/hostTreeReconciler.js +228 -0
- package/lib/commonjs/core/parser/hostTreeReconciler.js.map +1 -0
- package/lib/commonjs/core/parser/index.js +13 -0
- package/lib/commonjs/core/parser/index.js.map +1 -0
- package/lib/commonjs/core/registry/SkeletonRegistry.js +113 -0
- package/lib/commonjs/core/registry/SkeletonRegistry.js.map +1 -0
- package/lib/commonjs/core/registry/index.js +19 -0
- package/lib/commonjs/core/registry/index.js.map +1 -0
- package/lib/commonjs/core/resolver/StyleResolver.js +83 -0
- package/lib/commonjs/core/resolver/StyleResolver.js.map +1 -0
- package/lib/commonjs/core/resolver/index.js +13 -0
- package/lib/commonjs/core/resolver/index.js.map +1 -0
- package/lib/commonjs/deep.js +18 -0
- package/lib/commonjs/deep.js.map +1 -0
- package/lib/commonjs/index.js +66 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/plugins/ImagePlugin.js +60 -0
- package/lib/commonjs/plugins/ImagePlugin.js.map +1 -0
- package/lib/commonjs/plugins/TextPlugin.js +70 -0
- package/lib/commonjs/plugins/TextPlugin.js.map +1 -0
- package/lib/commonjs/plugins/ViewPlugin.js +71 -0
- package/lib/commonjs/plugins/ViewPlugin.js.map +1 -0
- package/lib/commonjs/plugins/index.js +27 -0
- package/lib/commonjs/plugins/index.js.map +1 -0
- package/lib/commonjs/types/index.js +2 -0
- package/lib/commonjs/types/index.js.map +1 -0
- package/lib/commonjs/types/plugin.js +6 -0
- package/lib/commonjs/types/plugin.js.map +1 -0
- package/lib/commonjs/types/skeleton.js +6 -0
- package/lib/commonjs/types/skeleton.js.map +1 -0
- package/lib/commonjs/utils/componentUtils.js +138 -0
- package/lib/commonjs/utils/componentUtils.js.map +1 -0
- package/lib/commonjs/utils/index.js +62 -0
- package/lib/commonjs/utils/index.js.map +1 -0
- package/lib/commonjs/utils/styleUtils.js +76 -0
- package/lib/commonjs/utils/styleUtils.js.map +1 -0
- package/lib/module/Skelo.js +98 -0
- package/lib/module/Skelo.js.map +1 -0
- package/lib/module/animations/AnimationWrapper.js +69 -0
- package/lib/module/animations/AnimationWrapper.js.map +1 -0
- package/lib/module/animations/PulseAnimation.js +45 -0
- package/lib/module/animations/PulseAnimation.js.map +1 -0
- package/lib/module/animations/ShimmerAnimation.js +66 -0
- package/lib/module/animations/ShimmerAnimation.js.map +1 -0
- package/lib/module/animations/index.js +4 -0
- package/lib/module/animations/index.js.map +1 -0
- package/lib/module/components/MeasuredBlock.js +57 -0
- package/lib/module/components/MeasuredBlock.js.map +1 -0
- package/lib/module/components/Skeleton.js +138 -0
- package/lib/module/components/Skeleton.js.map +1 -0
- package/lib/module/components/SkeletonIgnore.js +23 -0
- package/lib/module/components/SkeletonIgnore.js.map +1 -0
- package/lib/module/components/SkeletonRenderer.js +264 -0
- package/lib/module/components/SkeletonRenderer.js.map +1 -0
- package/lib/module/components/primitives/SkeletonBox.js +40 -0
- package/lib/module/components/primitives/SkeletonBox.js.map +1 -0
- package/lib/module/components/primitives/SkeletonCircle.js +37 -0
- package/lib/module/components/primitives/SkeletonCircle.js.map +1 -0
- package/lib/module/components/primitives/SkeletonImage.js +39 -0
- package/lib/module/components/primitives/SkeletonImage.js.map +1 -0
- package/lib/module/components/primitives/SkeletonText.js +53 -0
- package/lib/module/components/primitives/SkeletonText.js.map +1 -0
- package/lib/module/components/primitives/index.js +5 -0
- package/lib/module/components/primitives/index.js.map +1 -0
- package/lib/module/components/withSkeleton.js +38 -0
- package/lib/module/components/withSkeleton.js.map +1 -0
- package/lib/module/constants/defaults.js +37 -0
- package/lib/module/constants/defaults.js.map +1 -0
- package/lib/module/core/deepRegistry.js +11 -0
- package/lib/module/core/deepRegistry.js.map +1 -0
- package/lib/module/core/generator/StyleSkeleton.js +95 -0
- package/lib/module/core/generator/StyleSkeleton.js.map +1 -0
- package/lib/module/core/parser/Parser.js +77 -0
- package/lib/module/core/parser/Parser.js.map +1 -0
- package/lib/module/core/parser/expandOffline.js +77 -0
- package/lib/module/core/parser/expandOffline.js.map +1 -0
- package/lib/module/core/parser/hostTreeReconciler.js +222 -0
- package/lib/module/core/parser/hostTreeReconciler.js.map +1 -0
- package/lib/module/core/parser/index.js +2 -0
- package/lib/module/core/parser/index.js.map +1 -0
- package/lib/module/core/registry/SkeletonRegistry.js +106 -0
- package/lib/module/core/registry/SkeletonRegistry.js.map +1 -0
- package/lib/module/core/registry/index.js +2 -0
- package/lib/module/core/registry/index.js.map +1 -0
- package/lib/module/core/resolver/StyleResolver.js +77 -0
- package/lib/module/core/resolver/StyleResolver.js.map +1 -0
- package/lib/module/core/resolver/index.js +2 -0
- package/lib/module/core/resolver/index.js.map +1 -0
- package/lib/module/deep.js +11 -0
- package/lib/module/deep.js.map +1 -0
- package/lib/module/index.js +21 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/plugins/ImagePlugin.js +53 -0
- package/lib/module/plugins/ImagePlugin.js.map +1 -0
- package/lib/module/plugins/TextPlugin.js +63 -0
- package/lib/module/plugins/TextPlugin.js.map +1 -0
- package/lib/module/plugins/ViewPlugin.js +64 -0
- package/lib/module/plugins/ViewPlugin.js.map +1 -0
- package/lib/module/plugins/index.js +4 -0
- package/lib/module/plugins/index.js.map +1 -0
- package/lib/module/types/index.js +2 -0
- package/lib/module/types/index.js.map +1 -0
- package/lib/module/types/plugin.js +2 -0
- package/lib/module/types/plugin.js.map +1 -0
- package/lib/module/types/skeleton.js +2 -0
- package/lib/module/types/skeleton.js.map +1 -0
- package/lib/module/utils/componentUtils.js +123 -0
- package/lib/module/utils/componentUtils.js.map +1 -0
- package/lib/module/utils/index.js +3 -0
- package/lib/module/utils/index.js.map +1 -0
- package/lib/module/utils/styleUtils.js +66 -0
- package/lib/module/utils/styleUtils.js.map +1 -0
- package/lib/typescript/Skelo.d.ts +76 -0
- package/lib/typescript/Skelo.d.ts.map +1 -0
- package/lib/typescript/animations/AnimationWrapper.d.ts +66 -0
- package/lib/typescript/animations/AnimationWrapper.d.ts.map +1 -0
- package/lib/typescript/animations/PulseAnimation.d.ts +15 -0
- package/lib/typescript/animations/PulseAnimation.d.ts.map +1 -0
- package/lib/typescript/animations/ShimmerAnimation.d.ts +15 -0
- package/lib/typescript/animations/ShimmerAnimation.d.ts.map +1 -0
- package/lib/typescript/animations/index.d.ts +5 -0
- package/lib/typescript/animations/index.d.ts.map +1 -0
- package/lib/typescript/components/MeasuredBlock.d.ts +32 -0
- package/lib/typescript/components/MeasuredBlock.d.ts.map +1 -0
- package/lib/typescript/components/Skeleton.d.ts +37 -0
- package/lib/typescript/components/Skeleton.d.ts.map +1 -0
- package/lib/typescript/components/SkeletonIgnore.d.ts +26 -0
- package/lib/typescript/components/SkeletonIgnore.d.ts.map +1 -0
- package/lib/typescript/components/SkeletonRenderer.d.ts +39 -0
- package/lib/typescript/components/SkeletonRenderer.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonBox.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonBox.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonCircle.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonCircle.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonImage.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonImage.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonText.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonText.d.ts.map +1 -0
- package/lib/typescript/components/primitives/index.d.ts +5 -0
- package/lib/typescript/components/primitives/index.d.ts.map +1 -0
- package/lib/typescript/components/withSkeleton.d.ts +37 -0
- package/lib/typescript/components/withSkeleton.d.ts.map +1 -0
- package/lib/typescript/constants/defaults.d.ts +29 -0
- package/lib/typescript/constants/defaults.d.ts.map +1 -0
- package/lib/typescript/core/deepRegistry.d.ts +7 -0
- package/lib/typescript/core/deepRegistry.d.ts.map +1 -0
- package/lib/typescript/core/generator/StyleSkeleton.d.ts +36 -0
- package/lib/typescript/core/generator/StyleSkeleton.d.ts.map +1 -0
- package/lib/typescript/core/parser/Parser.d.ts +30 -0
- package/lib/typescript/core/parser/Parser.d.ts.map +1 -0
- package/lib/typescript/core/parser/expandOffline.d.ts +10 -0
- package/lib/typescript/core/parser/expandOffline.d.ts.map +1 -0
- package/lib/typescript/core/parser/hostTreeReconciler.d.ts +28 -0
- package/lib/typescript/core/parser/hostTreeReconciler.d.ts.map +1 -0
- package/lib/typescript/core/parser/index.d.ts +2 -0
- package/lib/typescript/core/parser/index.d.ts.map +1 -0
- package/lib/typescript/core/registry/SkeletonRegistry.d.ts +57 -0
- package/lib/typescript/core/registry/SkeletonRegistry.d.ts.map +1 -0
- package/lib/typescript/core/registry/index.d.ts +2 -0
- package/lib/typescript/core/registry/index.d.ts.map +1 -0
- package/lib/typescript/core/resolver/StyleResolver.d.ts +54 -0
- package/lib/typescript/core/resolver/StyleResolver.d.ts.map +1 -0
- package/lib/typescript/core/resolver/index.d.ts +2 -0
- package/lib/typescript/core/resolver/index.d.ts.map +1 -0
- package/lib/typescript/deep.d.ts +2 -0
- package/lib/typescript/deep.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +17 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/plugins/ImagePlugin.d.ts +11 -0
- package/lib/typescript/plugins/ImagePlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/TextPlugin.d.ts +12 -0
- package/lib/typescript/plugins/TextPlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/ViewPlugin.d.ts +11 -0
- package/lib/typescript/plugins/ViewPlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/index.d.ts +4 -0
- package/lib/typescript/plugins/index.d.ts.map +1 -0
- package/lib/typescript/types/index.d.ts +3 -0
- package/lib/typescript/types/index.d.ts.map +1 -0
- package/lib/typescript/types/plugin.d.ts +144 -0
- package/lib/typescript/types/plugin.d.ts.map +1 -0
- package/lib/typescript/types/skeleton.d.ts +176 -0
- package/lib/typescript/types/skeleton.d.ts.map +1 -0
- package/lib/typescript/utils/componentUtils.d.ts +40 -0
- package/lib/typescript/utils/componentUtils.d.ts.map +1 -0
- package/lib/typescript/utils/index.d.ts +3 -0
- package/lib/typescript/utils/index.d.ts.map +1 -0
- package/lib/typescript/utils/styleUtils.d.ts +41 -0
- package/lib/typescript/utils/styleUtils.d.ts.map +1 -0
- package/package.json +169 -11
- package/src/Skelo.ts +103 -0
- package/src/animations/AnimationWrapper.tsx +139 -0
- package/src/animations/PulseAnimation.tsx +76 -0
- package/src/animations/ShimmerAnimation.tsx +101 -0
- package/src/animations/index.ts +4 -0
- package/src/components/MeasuredBlock.tsx +85 -0
- package/src/components/Skeleton.tsx +149 -0
- package/src/components/SkeletonIgnore.tsx +27 -0
- package/src/components/SkeletonRenderer.tsx +341 -0
- package/src/components/primitives/SkeletonBox.tsx +53 -0
- package/src/components/primitives/SkeletonCircle.tsx +48 -0
- package/src/components/primitives/SkeletonImage.tsx +50 -0
- package/src/components/primitives/SkeletonText.tsx +69 -0
- package/src/components/primitives/index.ts +4 -0
- package/src/components/withSkeleton.tsx +62 -0
- package/src/constants/defaults.ts +38 -0
- package/src/core/deepRegistry.ts +16 -0
- package/src/core/generator/StyleSkeleton.tsx +138 -0
- package/src/core/parser/Parser.ts +86 -0
- package/src/core/parser/expandOffline.tsx +83 -0
- package/src/core/parser/hostTreeReconciler.tsx +271 -0
- package/src/core/parser/index.ts +1 -0
- package/src/core/registry/SkeletonRegistry.ts +111 -0
- package/src/core/registry/index.ts +1 -0
- package/src/core/resolver/StyleResolver.ts +80 -0
- package/src/core/resolver/index.ts +1 -0
- package/src/deep.ts +12 -0
- package/src/index.ts +30 -0
- package/src/plugins/ImagePlugin.tsx +65 -0
- package/src/plugins/TextPlugin.tsx +71 -0
- package/src/plugins/ViewPlugin.tsx +67 -0
- package/src/plugins/index.ts +3 -0
- package/src/types/index.ts +14 -0
- package/src/types/plugin.ts +164 -0
- package/src/types/skeleton.ts +197 -0
- package/src/utils/componentUtils.ts +166 -0
- package/src/utils/index.ts +9 -0
- package/src/utils/styleUtils.ts +72 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skelo.d.ts","sourceRoot":"","sources":["../../src/Skelo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9D,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGhF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;IAChB;;;;OAIG;aACM,CAAC,gBAAgB,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI;IAIlD;;;;OAIG;0BACmB,aAAa,GAAG,IAAI;IAI1C;;;;;OAKG;yBACkB,aAAa,GAAG,cAAc,GAAG,SAAS;IAI/D;;;;;OAKG;yBACkB,aAAa,GAAG,OAAO;IAI5C;;;;OAIG;qBACc,cAAc,EAAE;IAIjC;;OAEG;oBACa,IAAI;IAIpB;;;;;;;;;;;OAWG;uBACgB,UAAU,WAAU,OAAO,CAAC,cAAc,CAAC,GAAQ,YAAY;IAOlF;;OAEG;;CAEJ,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
export type AnimationType = 'shimmer' | 'pulse' | 'none';
|
|
4
|
+
interface AnimationWrapperProps {
|
|
5
|
+
/**
|
|
6
|
+
* Type of animation to use
|
|
7
|
+
* @default 'shimmer'
|
|
8
|
+
*/
|
|
9
|
+
animation?: AnimationType;
|
|
10
|
+
/**
|
|
11
|
+
* Width of the animated element
|
|
12
|
+
*/
|
|
13
|
+
width?: DimensionValue;
|
|
14
|
+
/**
|
|
15
|
+
* Height of the animated element
|
|
16
|
+
*/
|
|
17
|
+
height?: DimensionValue;
|
|
18
|
+
/**
|
|
19
|
+
* Base color of the skeleton
|
|
20
|
+
* @default '#E1E9EE'
|
|
21
|
+
*/
|
|
22
|
+
baseColor?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Highlight color for animation
|
|
25
|
+
* @default '#F2F8FC'
|
|
26
|
+
*/
|
|
27
|
+
highlightColor?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Animation duration in milliseconds
|
|
30
|
+
* @default 1500 for shimmer, 1000 for pulse
|
|
31
|
+
*/
|
|
32
|
+
duration?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Border radius
|
|
35
|
+
* @default 4
|
|
36
|
+
*/
|
|
37
|
+
borderRadius?: number;
|
|
38
|
+
/**
|
|
39
|
+
* Additional styles
|
|
40
|
+
*/
|
|
41
|
+
style?: StyleProp<ViewStyle>;
|
|
42
|
+
/**
|
|
43
|
+
* Child content
|
|
44
|
+
*/
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Animation wrapper that selects the appropriate animation type
|
|
49
|
+
*
|
|
50
|
+
* Provides a unified interface for all skeleton animations:
|
|
51
|
+
* - shimmer: Left-to-right shimmer effect
|
|
52
|
+
* - pulse: Breathing/pulsing opacity
|
|
53
|
+
* - none: Static skeleton (no animation)
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```tsx
|
|
57
|
+
* <AnimationWrapper
|
|
58
|
+
* animation="shimmer"
|
|
59
|
+
* width={200}
|
|
60
|
+
* height={20}
|
|
61
|
+
* />
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
export declare function AnimationWrapper({ animation, width, height, baseColor, highlightColor, duration, borderRadius, style, children, }: AnimationWrapperProps): React.JSX.Element;
|
|
65
|
+
export {};
|
|
66
|
+
//# sourceMappingURL=AnimationWrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimationWrapper.d.ts","sourceRoot":"","sources":["../../../src/animations/AnimationWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,UAAU,qBAAqB;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAqB,EACrB,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAQ,EACR,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,qBAAqB,qBAmDvB"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
interface PulseProps {
|
|
4
|
+
width?: DimensionValue;
|
|
5
|
+
height?: DimensionValue;
|
|
6
|
+
baseColor?: string;
|
|
7
|
+
highlightColor?: string;
|
|
8
|
+
duration?: number;
|
|
9
|
+
borderRadius?: number;
|
|
10
|
+
style?: StyleProp<ViewStyle>;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare function PulseAnimation({ width, height, baseColor, duration, borderRadius, style, children, }: PulseProps): React.JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=PulseAnimation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzE,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAqCZ"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
interface ShimmerProps {
|
|
4
|
+
width?: DimensionValue;
|
|
5
|
+
height?: DimensionValue;
|
|
6
|
+
baseColor?: string;
|
|
7
|
+
highlightColor?: string;
|
|
8
|
+
duration?: number;
|
|
9
|
+
borderRadius?: number;
|
|
10
|
+
style?: StyleProp<ViewStyle>;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare function ShimmerAnimation({ width, height, baseColor, highlightColor, duration, borderRadius, style, children, }: ShimmerProps): React.JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=ShimmerAnimation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBAsDd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/animations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { SkeletonConfig } from '../types';
|
|
4
|
+
interface MeasuredBlockProps {
|
|
5
|
+
/**
|
|
6
|
+
* The real element to render (hidden) and measure.
|
|
7
|
+
*/
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Skeleton configuration (animation, colors, etc.)
|
|
11
|
+
*/
|
|
12
|
+
config: SkeletonConfig;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Renders an opaque (non-host) component hidden so it lays out at its real
|
|
16
|
+
* size, measures that size via `onLayout`, then overlays a shimmer block of
|
|
17
|
+
* exactly those dimensions.
|
|
18
|
+
*
|
|
19
|
+
* This is Skelo's runtime-measurement fallback: when the parser can't
|
|
20
|
+
* introspect a component (e.g. a user-defined function component), we can't
|
|
21
|
+
* know its internal View/Text/Image structure without native view-tree access,
|
|
22
|
+
* but we *can* render it off-screen and reproduce its footprint accurately.
|
|
23
|
+
*
|
|
24
|
+
* The result is a single, correctly-sized skeleton block rather than a
|
|
25
|
+
* misleading fixed-size placeholder.
|
|
26
|
+
*/
|
|
27
|
+
export declare function MeasuredBlock({ children, config }: MeasuredBlockProps): React.JSX.Element;
|
|
28
|
+
export declare namespace MeasuredBlock {
|
|
29
|
+
var displayName: string;
|
|
30
|
+
}
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=MeasuredBlock.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MeasuredBlock.d.ts","sourceRoot":"","sources":["../../../src/components/MeasuredBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;CACxB;AAOD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBAuCrE;yBAvCe,aAAa"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SkeletonProps } from '../types';
|
|
3
|
+
import { SkeletonIgnore } from './SkeletonIgnore';
|
|
4
|
+
/**
|
|
5
|
+
* Main Skeleton component
|
|
6
|
+
*
|
|
7
|
+
* Automatically generates skeleton loading states for your React Native components.
|
|
8
|
+
* Wraps your UI and shows skeleton placeholders while loading.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <Skeleton loading={isLoading}>
|
|
13
|
+
* <ProfileScreen />
|
|
14
|
+
* </Skeleton>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <Skeleton
|
|
20
|
+
* loading={isLoading}
|
|
21
|
+
* animation="pulse"
|
|
22
|
+
* baseColor="#f0f0f0"
|
|
23
|
+
* highlightColor="#ffffff"
|
|
24
|
+
* >
|
|
25
|
+
* <View>
|
|
26
|
+
* <Text>Hello World</Text>
|
|
27
|
+
* <Image source={avatar} />
|
|
28
|
+
* </View>
|
|
29
|
+
* </Skeleton>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare function Skeleton({ loading, children, styles, excludeStyles, deep, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
|
|
33
|
+
export declare namespace Skeleton {
|
|
34
|
+
var displayName: string;
|
|
35
|
+
var Ignore: typeof SkeletonIgnore;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAY,EACZ,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBAyFf;yBAvGe,QAAQ"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
interface SkeletonIgnoreProps {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Escape hatch that renders its children as real content, even inside a
|
|
8
|
+
* loading `<Skeleton>`. Use it for elements that should stay visible during
|
|
9
|
+
* loading — section headings, static labels, action buttons, etc.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Skeleton loading={loading}>
|
|
14
|
+
* <Skeleton.Ignore>
|
|
15
|
+
* <Text>Profile</Text> // stays as real text
|
|
16
|
+
* </Skeleton.Ignore>
|
|
17
|
+
* <ProfileCard /> // becomes a skeleton
|
|
18
|
+
* </Skeleton>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function SkeletonIgnore({ children }: SkeletonIgnoreProps): React.JSX.Element;
|
|
22
|
+
export declare namespace SkeletonIgnore {
|
|
23
|
+
var displayName: string;
|
|
24
|
+
}
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=SkeletonIgnore.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonIgnore.d.ts","sourceRoot":"","sources":["../../../src/components/SkeletonIgnore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAE/D;yBAFe,cAAc"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentNode, SkeletonConfig } from '../types';
|
|
3
|
+
interface SkeletonRendererProps {
|
|
4
|
+
/**
|
|
5
|
+
* Parsed component tree
|
|
6
|
+
*/
|
|
7
|
+
tree: ComponentNode[];
|
|
8
|
+
/**
|
|
9
|
+
* Skeleton configuration
|
|
10
|
+
*/
|
|
11
|
+
config: SkeletonConfig;
|
|
12
|
+
/**
|
|
13
|
+
* Accessibility enabled
|
|
14
|
+
*/
|
|
15
|
+
accessible?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Accessibility label
|
|
18
|
+
*/
|
|
19
|
+
accessibilityLabel?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Debug mode
|
|
22
|
+
*/
|
|
23
|
+
debug?: boolean;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Renders skeleton from parsed component tree
|
|
27
|
+
*
|
|
28
|
+
* Uses plugins to transform components into skeleton equivalents:
|
|
29
|
+
* - View -> SkeletonBox
|
|
30
|
+
* - Text -> SkeletonText
|
|
31
|
+
* - Image -> SkeletonImage
|
|
32
|
+
* - Custom components -> Plugin strategies
|
|
33
|
+
*/
|
|
34
|
+
export declare function SkeletonRenderer({ tree, config, accessible, accessibilityLabel, debug, }: SkeletonRendererProps): React.JSX.Element;
|
|
35
|
+
export declare namespace SkeletonRenderer {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
export {};
|
|
39
|
+
//# sourceMappingURL=SkeletonRenderer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/SkeletonRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA4B9D,UAAU,qBAAqB;IAC7B;;OAEG;IACH,IAAI,EAAE,aAAa,EAAE,CAAC;IAEtB;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,KAAK,GACN,EAAE,qBAAqB,qBA0QvB;yBAhRe,gBAAgB"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BoxProps } from '../../types';
|
|
3
|
+
import type { AnimationType } from '../../animations';
|
|
4
|
+
/**
|
|
5
|
+
* Basic box skeleton primitive
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <SkeletonBox width={100} height={50} borderRadius={8} />
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare function SkeletonBox({ width, height, borderRadius, style, children, animation, baseColor, highlightColor, duration, }: BoxProps & {
|
|
13
|
+
animation?: AnimationType;
|
|
14
|
+
baseColor?: string;
|
|
15
|
+
highlightColor?: string;
|
|
16
|
+
duration?: number;
|
|
17
|
+
}): React.JSX.Element;
|
|
18
|
+
export declare namespace SkeletonBox {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=SkeletonBox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,YAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAqB,EACrB,SAAS,EACT,cAAc,EACd,QAAQ,GACT,EAAE,QAAQ,GAAG;IACZ,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,qBAeA;yBA9Be,WAAW"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { CircleProps } from '../../types';
|
|
3
|
+
import type { AnimationType } from '../../animations';
|
|
4
|
+
/**
|
|
5
|
+
* Circle skeleton primitive (useful for avatars)
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <SkeletonCircle size={40} />
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare function SkeletonCircle({ size, style, animation, baseColor, highlightColor, duration, }: CircleProps & {
|
|
13
|
+
animation?: AnimationType;
|
|
14
|
+
baseColor?: string;
|
|
15
|
+
highlightColor?: string;
|
|
16
|
+
duration?: number;
|
|
17
|
+
}): React.JSX.Element;
|
|
18
|
+
export declare namespace SkeletonCircle {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=SkeletonCircle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/SkeletonCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAS,EACT,KAAK,EACL,SAAqB,EACrB,SAAS,EACT,cAAc,EACd,QAAQ,GACT,EAAE,WAAW,GAAG;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,qBAaA;yBAzBe,cAAc"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ImageProps } from '../../types';
|
|
3
|
+
import type { AnimationType } from '../../animations';
|
|
4
|
+
/**
|
|
5
|
+
* Image skeleton primitive
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <SkeletonImage width={80} height={80} borderRadius={40} />
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare function SkeletonImage({ width, height, borderRadius, style, animation, baseColor, highlightColor, duration, }: ImageProps & {
|
|
13
|
+
animation?: AnimationType;
|
|
14
|
+
baseColor?: string;
|
|
15
|
+
highlightColor?: string;
|
|
16
|
+
duration?: number;
|
|
17
|
+
}): React.JSX.Element;
|
|
18
|
+
export declare namespace SkeletonImage {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=SkeletonImage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/SkeletonImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAW,EACX,MAAY,EACZ,YAAgB,EAChB,KAAK,EACL,SAAqB,EACrB,SAAS,EACT,cAAc,EACd,QAAQ,GACT,EAAE,UAAU,GAAG;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,qBAaA;yBA3Be,aAAa"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TextProps } from '../../types';
|
|
3
|
+
import type { AnimationType } from '../../animations';
|
|
4
|
+
/**
|
|
5
|
+
* Text skeleton primitive with multiple lines
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <SkeletonText lines={3} fontSize={16} lastLineWidth="70%" />
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare function SkeletonText({ lines, fontSize, lineHeight, width, lastLineWidth, style, animation, baseColor, highlightColor, duration, }: TextProps & {
|
|
13
|
+
animation?: AnimationType;
|
|
14
|
+
baseColor?: string;
|
|
15
|
+
highlightColor?: string;
|
|
16
|
+
duration?: number;
|
|
17
|
+
}): React.JSX.Element;
|
|
18
|
+
export declare namespace SkeletonText {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=SkeletonText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAS,EACT,QAAa,EACb,UAAU,EACV,KAAc,EACd,aAAqB,EACrB,KAAK,EACL,SAAqB,EACrB,SAAS,EACT,cAAc,EACd,QAAQ,GACT,EAAE,SAAS,GAAG;IACb,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,qBA8BA;yBA9Ce,YAAY"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentType } from 'react';
|
|
3
|
+
import type { SkeletonConfig } from '../types';
|
|
4
|
+
import type { StyleInput } from '../core/generator/StyleSkeleton';
|
|
5
|
+
export interface WithSkeletonOptions extends Partial<SkeletonConfig> {
|
|
6
|
+
/**
|
|
7
|
+
* Styles used to generate the skeleton while loading. Required when the
|
|
8
|
+
* wrapped component is opaque (a typical screen/component), since Skelo can't
|
|
9
|
+
* introspect its internals.
|
|
10
|
+
*/
|
|
11
|
+
styles?: StyleInput;
|
|
12
|
+
/**
|
|
13
|
+
* Style keys to skip when generating the skeleton (e.g. layout containers).
|
|
14
|
+
*/
|
|
15
|
+
excludeStyles?: string[];
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Higher-order component that adds a loading skeleton to any component.
|
|
19
|
+
*
|
|
20
|
+
* The returned component accepts a `loading` prop (plus the wrapped
|
|
21
|
+
* component's own props). While `loading` is true it renders a skeleton
|
|
22
|
+
* derived from `options.styles`; otherwise it renders the real component.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const Home = withSkeleton(HomeScreen, { styles });
|
|
27
|
+
*
|
|
28
|
+
* <Home loading={isLoading} user={user} />
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare function withSkeleton<P extends object>(Component: ComponentType<P>, options?: WithSkeletonOptions): {
|
|
32
|
+
(props: P & {
|
|
33
|
+
loading: boolean;
|
|
34
|
+
}): React.JSX.Element;
|
|
35
|
+
displayName: string;
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=withSkeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/withSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAClE;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,OAAO,GAAE,mBAAwB;YAEJ,CAAC,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;;EAuBtD"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { SkeletonConfig } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Default skeleton configuration
|
|
4
|
+
*/
|
|
5
|
+
export declare const DEFAULT_CONFIG: Required<SkeletonConfig>;
|
|
6
|
+
/**
|
|
7
|
+
* Dark mode colors
|
|
8
|
+
*/
|
|
9
|
+
export declare const DARK_MODE_COLORS: {
|
|
10
|
+
baseColor: string;
|
|
11
|
+
highlightColor: string;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Default dimensions for components without explicit sizing
|
|
15
|
+
*/
|
|
16
|
+
export declare const DEFAULT_DIMENSIONS: {
|
|
17
|
+
image: {
|
|
18
|
+
width: number;
|
|
19
|
+
height: number;
|
|
20
|
+
};
|
|
21
|
+
text: {
|
|
22
|
+
fontSize: number;
|
|
23
|
+
lineHeight: number;
|
|
24
|
+
};
|
|
25
|
+
box: {
|
|
26
|
+
height: number;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=defaults.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/constants/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,cAAc,CAOnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;CAY9B,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ComponentNode } from '../types';
|
|
3
|
+
type DeepExpander = (element: ReactElement) => ComponentNode[] | null;
|
|
4
|
+
export declare function setDeepExpander(fn: DeepExpander): void;
|
|
5
|
+
export declare function getDeepExpander(): DeepExpander | null;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=deepRegistry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"deepRegistry.d.ts","sourceRoot":"","sources":["../../../src/core/deepRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAI9C,KAAK,YAAY,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,aAAa,EAAE,GAAG,IAAI,CAAC;AAItE,wBAAgB,eAAe,CAAC,EAAE,EAAE,YAAY,GAAG,IAAI,CAEtD;AAED,wBAAgB,eAAe,IAAI,YAAY,GAAG,IAAI,CAErD"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SkeletonConfig } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* A single named style, or an ordered list of styles, or a whole StyleSheet
|
|
5
|
+
* object as returned by `StyleSheet.create`.
|
|
6
|
+
*/
|
|
7
|
+
export type StyleInput = Record<string, unknown> | unknown[];
|
|
8
|
+
interface StyleSkeletonProps {
|
|
9
|
+
/**
|
|
10
|
+
* The styles to derive a skeleton from. Accepts a `StyleSheet.create` object
|
|
11
|
+
* (values used in definition order) or an array of styles (used in order).
|
|
12
|
+
*/
|
|
13
|
+
styles: StyleInput;
|
|
14
|
+
/**
|
|
15
|
+
* Skeleton configuration (animation, colors, radius).
|
|
16
|
+
*/
|
|
17
|
+
config: SkeletonConfig;
|
|
18
|
+
/**
|
|
19
|
+
* Optional list of style keys to skip (e.g. layout containers you don't want
|
|
20
|
+
* a skeleton for). Only applies when `styles` is a keyed object.
|
|
21
|
+
*/
|
|
22
|
+
exclude?: string[];
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Generates a skeleton directly from a set of styles.
|
|
26
|
+
*
|
|
27
|
+
* Because a StyleSheet is flat (no element hierarchy), the output is a vertical
|
|
28
|
+
* stack of skeleton shapes — one per style that has visual dimensions — sized
|
|
29
|
+
* from each style's own props. Layout-only styles are skipped.
|
|
30
|
+
*/
|
|
31
|
+
export declare function StyleSkeleton({ styles, config, exclude }: StyleSkeletonProps): React.JSX.Element;
|
|
32
|
+
export declare namespace StyleSkeleton {
|
|
33
|
+
var displayName: string;
|
|
34
|
+
}
|
|
35
|
+
export {};
|
|
36
|
+
//# sourceMappingURL=StyleSkeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyleSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/core/generator/StyleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;AAE7D,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,MAAM,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAqFD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,qBAc5E;yBAde,aAAa"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { ComponentNode } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Parser class for traversing and analyzing React component trees
|
|
5
|
+
*/
|
|
6
|
+
export declare class Parser {
|
|
7
|
+
/**
|
|
8
|
+
* Parse a React element tree into a component node tree
|
|
9
|
+
*
|
|
10
|
+
* @param children - React children to parse
|
|
11
|
+
* @returns Array of component nodes
|
|
12
|
+
*/
|
|
13
|
+
static parse(children: ReactNode): ComponentNode[];
|
|
14
|
+
/**
|
|
15
|
+
* Parse a single React element
|
|
16
|
+
*
|
|
17
|
+
* @param element - React element
|
|
18
|
+
* @returns Component node or null
|
|
19
|
+
*/
|
|
20
|
+
static parseElement(element: ReactElement): ComponentNode | null;
|
|
21
|
+
/**
|
|
22
|
+
* Estimate number of text lines from content and style
|
|
23
|
+
*
|
|
24
|
+
* @param children - Text content
|
|
25
|
+
* @param style - Resolved style
|
|
26
|
+
* @returns Estimated number of lines
|
|
27
|
+
*/
|
|
28
|
+
static estimateTextLines(children: ReactNode, _style?: any): number;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=Parser.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Parser.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/Parser.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD;;GAEG;AACH,qBAAa,MAAM;IACjB;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,GAAG,aAAa,EAAE;IAmBlD;;;;;OAKG;IACH,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,GAAG,IAAI;IAiBhE;;;;;;OAMG;IACH,MAAM,CAAC,iBAAiB,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,MAAM;CAoBpE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ComponentNode } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Expand an element to a `ComponentNode[]` via offline rendering.
|
|
5
|
+
*
|
|
6
|
+
* @returns the host-tree nodes, or `null` if offline rendering is unavailable
|
|
7
|
+
* (react-reconciler not installed) or the render failed.
|
|
8
|
+
*/
|
|
9
|
+
export declare function expandToComponentNodes(element: ReactElement): ComponentNode[] | null;
|
|
10
|
+
//# sourceMappingURL=expandOffline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expandOffline.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/expandOffline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,aAAa,CAAC;AAqEhE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,EAAE,GAAG,IAAI,CAMpF"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A JS-only React renderer built on `react-reconciler`.
|
|
4
|
+
*
|
|
5
|
+
* It renders any element (including opaque function/class components) into a
|
|
6
|
+
* plain host-node tree — no native views, no `act()`, no deprecated APIs. Used
|
|
7
|
+
* to introspect a component's real View/Text/Image structure + styles so Skelo
|
|
8
|
+
* can generate a matching skeleton.
|
|
9
|
+
*
|
|
10
|
+
* Rendered as a synchronous LegacyRoot, so `updateContainer` flushes inline and
|
|
11
|
+
* we can read the tree immediately.
|
|
12
|
+
*/
|
|
13
|
+
export interface HostTreeNode {
|
|
14
|
+
type: string;
|
|
15
|
+
props: {
|
|
16
|
+
style?: unknown;
|
|
17
|
+
children?: unknown;
|
|
18
|
+
[key: string]: unknown;
|
|
19
|
+
};
|
|
20
|
+
children: HostTreeNode[];
|
|
21
|
+
text?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Render an element to a plain host-node tree, or return null if the reconciler
|
|
25
|
+
* is unavailable or rendering failed.
|
|
26
|
+
*/
|
|
27
|
+
export declare function renderToHostTree(element: ReactElement): HostTreeNode[] | null;
|
|
28
|
+
//# sourceMappingURL=hostTreeReconciler.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hostTreeReconciler.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/hostTreeReconciler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACvE,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkJD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,EAAE,GAAG,IAAI,CAoG7E"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|