@skel-ui/react-native 1.0.0-alpha.9f753ec → 1.0.0-alpha.a8d28e6
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/dist/Animation.d.ts +12 -8
- package/dist/cjs/Animation.js +39 -19
- package/dist/cjs/index.js +20 -10
- package/dist/esm/Animation.js +40 -19
- package/dist/esm/index.js +17 -7
- package/dist/index.d.ts +10 -5
- package/package.json +15 -3
package/dist/Animation.d.ts
CHANGED
|
@@ -3,21 +3,25 @@ import { ReactNode } from "react";
|
|
|
3
3
|
import { View } from "react-native";
|
|
4
4
|
import { EasingFunction, EasingFunctionFactory } from "react-native-reanimated";
|
|
5
5
|
import { TStyle } from "./funcs";
|
|
6
|
-
type
|
|
6
|
+
type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
|
|
7
|
+
style?: TStyle;
|
|
8
|
+
numberOfLines?: number;
|
|
9
|
+
};
|
|
10
|
+
export type UIOptions = {
|
|
11
|
+
color?: string;
|
|
7
12
|
radius?: number;
|
|
8
|
-
|
|
13
|
+
shimmer?: {
|
|
14
|
+
color?: string;
|
|
15
|
+
};
|
|
9
16
|
animation?: {
|
|
17
|
+
component: ReactNode;
|
|
18
|
+
} | {
|
|
19
|
+
delay?: number;
|
|
10
20
|
easing?: EasingFunction | EasingFunctionFactory;
|
|
11
21
|
duration?: number;
|
|
12
|
-
} | {
|
|
13
|
-
component: ReactNode;
|
|
14
22
|
};
|
|
15
23
|
skelUIPulse?: boolean;
|
|
16
24
|
};
|
|
17
|
-
type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
|
|
18
|
-
style?: TStyle;
|
|
19
|
-
numberOfLines?: number;
|
|
20
|
-
};
|
|
21
25
|
export declare const UIOptionsContext: import("react").Context<UIOptions>;
|
|
22
26
|
export declare function Animation({ sw, sh, sr, style, numberOfLines }: AnimationProps): import("react/jsx-runtime").JSX.Element;
|
|
23
27
|
export {};
|
package/dist/cjs/Animation.js
CHANGED
|
@@ -39,30 +39,41 @@ var import_react_native = require("react-native");
|
|
|
39
39
|
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
|
|
40
40
|
var import_funcs = require("./funcs");
|
|
41
41
|
const UIOptionsContext = (0, import_react.createContext)({});
|
|
42
|
-
function Pluse({
|
|
42
|
+
function Pluse({ color, animation }) {
|
|
43
43
|
const opacity = (0, import_react_native_reanimated.useSharedValue)(0.5);
|
|
44
44
|
(0, import_react_native_reanimated.useFrameCallback)(() => {
|
|
45
|
-
if (opacity.value === 1
|
|
46
|
-
|
|
45
|
+
if (opacity.value === 1 || opacity.value === 0.5) {
|
|
46
|
+
const { delay, ...options } = animation;
|
|
47
|
+
opacity.value = (0, import_react_native_reanimated.withDelay)(delay, (0, import_react_native_reanimated.withTiming)(opacity.value === 1 ? 0.5 : 1, options));
|
|
48
|
+
}
|
|
47
49
|
});
|
|
48
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated.default.View, { style: { width: "100%", height: "100%", opacity, backgroundColor:
|
|
50
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated.default.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: color }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: " \u200C " }) });
|
|
49
51
|
}
|
|
50
|
-
function
|
|
51
|
-
const
|
|
52
|
+
function Shimmer({ color, shimmer, animation }) {
|
|
53
|
+
const translate = (0, import_react_native_reanimated.useSharedValue)("-100%");
|
|
54
|
+
const cords = {
|
|
55
|
+
x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
|
|
56
|
+
y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
|
|
57
|
+
};
|
|
58
|
+
const style = { width: "100%", height: "100%" };
|
|
52
59
|
(0, import_react.useEffect)(() => {
|
|
53
|
-
|
|
60
|
+
const { delay, ...options } = animation;
|
|
61
|
+
translate.value = (0, import_react_native_reanimated.withDelay)(delay, (0, import_react_native_reanimated.withRepeat)((0, import_react_native_reanimated.withTiming)("100%", options), -1, false));
|
|
54
62
|
}, []);
|
|
55
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor:
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
64
|
import_react_native_reanimated.default.View,
|
|
57
65
|
{
|
|
58
|
-
style: {
|
|
66
|
+
style: {
|
|
67
|
+
...style,
|
|
68
|
+
transform: [{ translateX: translate }]
|
|
69
|
+
// transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
|
|
70
|
+
},
|
|
59
71
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
72
|
import_expo_linear_gradient.LinearGradient,
|
|
61
73
|
{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
colors: [...colors, colors[0]]
|
|
74
|
+
...cords.x,
|
|
75
|
+
style,
|
|
76
|
+
colors: [color, shimmer.color, color]
|
|
66
77
|
}
|
|
67
78
|
)
|
|
68
79
|
}
|
|
@@ -71,11 +82,20 @@ function Gradient({ colors, animation }) {
|
|
|
71
82
|
function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
|
|
72
83
|
const text = (0, import_react.useMemo)(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
|
|
73
84
|
const { viewStyle, textStyle } = (0, import_funcs.filterStyle)(style);
|
|
74
|
-
const {
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
85
|
+
const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
|
|
86
|
+
const $props = {
|
|
87
|
+
color,
|
|
88
|
+
radius,
|
|
89
|
+
shimmer: {
|
|
90
|
+
color: "#f1f0f0",
|
|
91
|
+
...shimmer
|
|
92
|
+
},
|
|
93
|
+
animation: {
|
|
94
|
+
delay: 0,
|
|
95
|
+
easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1),
|
|
96
|
+
duration: skelUIPulse ? 1e3 : 2e3,
|
|
97
|
+
...animation
|
|
98
|
+
}
|
|
79
99
|
};
|
|
80
100
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
81
101
|
import_react_native.View,
|
|
@@ -91,7 +111,7 @@ function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
|
|
|
91
111
|
},
|
|
92
112
|
children: [
|
|
93
113
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: textStyle, children: text }),
|
|
94
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { inset: 0, position: "absolute" }, children:
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { inset: 0, position: "absolute" }, children: "component" in animation ? animation.component : skelUIPulse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pluse, { ...$props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shimmer, { ...$props }) })
|
|
95
115
|
]
|
|
96
116
|
}
|
|
97
117
|
);
|
package/dist/cjs/index.js
CHANGED
|
@@ -26,18 +26,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
31
|
-
|
|
29
|
+
var index_exports = {};
|
|
30
|
+
__export(index_exports, {
|
|
31
|
+
Button: () => Button,
|
|
32
32
|
Image: () => Image,
|
|
33
|
+
Item: () => Item,
|
|
33
34
|
Pressable: () => Pressable,
|
|
34
35
|
Provider: () => Provider,
|
|
35
36
|
Root: () => Root,
|
|
36
|
-
SkelProvider: () => SkelProvider,
|
|
37
37
|
Text: () => Text,
|
|
38
|
+
TextInput: () => TextInput,
|
|
39
|
+
TouchableHighlight: () => TouchableHighlight,
|
|
40
|
+
TouchableOpacity: () => TouchableOpacity,
|
|
41
|
+
TouchableWithoutFeedback: () => TouchableWithoutFeedback,
|
|
38
42
|
View: () => View
|
|
39
43
|
});
|
|
40
|
-
module.exports = __toCommonJS(
|
|
44
|
+
module.exports = __toCommonJS(index_exports);
|
|
41
45
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
46
|
var import_core = require("@skel-ui/core");
|
|
43
47
|
var import_react = __toESM(require("react"));
|
|
@@ -59,28 +63,34 @@ function createSkelComponent(type) {
|
|
|
59
63
|
};
|
|
60
64
|
}
|
|
61
65
|
function SkelProvider({
|
|
62
|
-
|
|
66
|
+
color,
|
|
63
67
|
radius,
|
|
68
|
+
shimmer,
|
|
64
69
|
children,
|
|
65
70
|
animation,
|
|
66
71
|
skelUIPulse
|
|
67
72
|
}) {
|
|
68
73
|
const value = import_react.default.useMemo(
|
|
69
|
-
() => ({
|
|
70
|
-
[
|
|
74
|
+
() => ({ color, radius, shimmer, animation, skelUIPulse }),
|
|
75
|
+
[color, radius, shimmer, animation, skelUIPulse]
|
|
71
76
|
);
|
|
72
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Animation.UIOptionsContext.Provider, { value, children });
|
|
73
78
|
}
|
|
74
|
-
function
|
|
79
|
+
function SkelItem({
|
|
75
80
|
component,
|
|
76
81
|
...rest
|
|
77
82
|
}) {
|
|
78
83
|
return createSkelComponent(component)(rest);
|
|
79
84
|
}
|
|
80
85
|
const Root = import_core.SkelRoot;
|
|
81
|
-
const
|
|
86
|
+
const Item = SkelItem;
|
|
82
87
|
const Provider = SkelProvider;
|
|
83
88
|
const View = createSkelComponent(ReactNative.View);
|
|
84
89
|
const Text = createSkelComponent(ReactNative.Text);
|
|
85
90
|
const Image = createSkelComponent(ReactNative.Image);
|
|
91
|
+
const Button = createSkelComponent(ReactNative.Button);
|
|
86
92
|
const Pressable = createSkelComponent(ReactNative.Pressable);
|
|
93
|
+
const TextInput = createSkelComponent(ReactNative.TextInput);
|
|
94
|
+
const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
|
|
95
|
+
const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
|
|
96
|
+
const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);
|
package/dist/esm/Animation.js
CHANGED
|
@@ -6,35 +6,47 @@ import Animated, {
|
|
|
6
6
|
Easing,
|
|
7
7
|
useFrameCallback,
|
|
8
8
|
useSharedValue,
|
|
9
|
+
withDelay,
|
|
9
10
|
withRepeat,
|
|
10
11
|
withTiming
|
|
11
12
|
} from "react-native-reanimated";
|
|
12
13
|
import { filterStyle } from "./funcs";
|
|
13
14
|
const UIOptionsContext = createContext({});
|
|
14
|
-
function Pluse({
|
|
15
|
+
function Pluse({ color, animation }) {
|
|
15
16
|
const opacity = useSharedValue(0.5);
|
|
16
17
|
useFrameCallback(() => {
|
|
17
|
-
if (opacity.value === 1
|
|
18
|
-
|
|
18
|
+
if (opacity.value === 1 || opacity.value === 0.5) {
|
|
19
|
+
const { delay, ...options } = animation;
|
|
20
|
+
opacity.value = withDelay(delay, withTiming(opacity.value === 1 ? 0.5 : 1, options));
|
|
21
|
+
}
|
|
19
22
|
});
|
|
20
|
-
return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor:
|
|
23
|
+
return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: color }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
|
|
21
24
|
}
|
|
22
|
-
function
|
|
23
|
-
const
|
|
25
|
+
function Shimmer({ color, shimmer, animation }) {
|
|
26
|
+
const translate = useSharedValue("-100%");
|
|
27
|
+
const cords = {
|
|
28
|
+
x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
|
|
29
|
+
y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
|
|
30
|
+
};
|
|
31
|
+
const style = { width: "100%", height: "100%" };
|
|
24
32
|
useEffect(() => {
|
|
25
|
-
|
|
33
|
+
const { delay, ...options } = animation;
|
|
34
|
+
translate.value = withDelay(delay, withRepeat(withTiming("100%", options), -1, false));
|
|
26
35
|
}, []);
|
|
27
|
-
return /* @__PURE__ */ jsx(View, { style: { backgroundColor:
|
|
36
|
+
return /* @__PURE__ */ jsx(View, { style: { backgroundColor: color }, children: /* @__PURE__ */ jsx(
|
|
28
37
|
Animated.View,
|
|
29
38
|
{
|
|
30
|
-
style: {
|
|
39
|
+
style: {
|
|
40
|
+
...style,
|
|
41
|
+
transform: [{ translateX: translate }]
|
|
42
|
+
// transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
|
|
43
|
+
},
|
|
31
44
|
children: /* @__PURE__ */ jsx(
|
|
32
45
|
LinearGradient,
|
|
33
46
|
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
colors: [...colors, colors[0]]
|
|
47
|
+
...cords.x,
|
|
48
|
+
style,
|
|
49
|
+
colors: [color, shimmer.color, color]
|
|
38
50
|
}
|
|
39
51
|
)
|
|
40
52
|
}
|
|
@@ -43,11 +55,20 @@ function Gradient({ colors, animation }) {
|
|
|
43
55
|
function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
|
|
44
56
|
const text = useMemo(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
|
|
45
57
|
const { viewStyle, textStyle } = filterStyle(style);
|
|
46
|
-
const {
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
58
|
+
const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
|
|
59
|
+
const $props = {
|
|
60
|
+
color,
|
|
61
|
+
radius,
|
|
62
|
+
shimmer: {
|
|
63
|
+
color: "#f1f0f0",
|
|
64
|
+
...shimmer
|
|
65
|
+
},
|
|
66
|
+
animation: {
|
|
67
|
+
delay: 0,
|
|
68
|
+
easing: Easing.bezier(0.4, 0, 0.6, 1),
|
|
69
|
+
duration: skelUIPulse ? 1e3 : 2e3,
|
|
70
|
+
...animation
|
|
71
|
+
}
|
|
51
72
|
};
|
|
52
73
|
return /* @__PURE__ */ jsxs(
|
|
53
74
|
View,
|
|
@@ -63,7 +84,7 @@ function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
|
|
|
63
84
|
},
|
|
64
85
|
children: [
|
|
65
86
|
/* @__PURE__ */ jsx(Text, { style: textStyle, children: text }),
|
|
66
|
-
/* @__PURE__ */ jsx(View, { style: { inset: 0, position: "absolute" }, children:
|
|
87
|
+
/* @__PURE__ */ jsx(View, { style: { inset: 0, position: "absolute" }, children: "component" in animation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...$props }) : /* @__PURE__ */ jsx(Shimmer, { ...$props }) })
|
|
67
88
|
]
|
|
68
89
|
}
|
|
69
90
|
);
|
package/dist/esm/index.js
CHANGED
|
@@ -19,38 +19,48 @@ function createSkelComponent(type) {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
function SkelProvider({
|
|
22
|
-
|
|
22
|
+
color,
|
|
23
23
|
radius,
|
|
24
|
+
shimmer,
|
|
24
25
|
children,
|
|
25
26
|
animation,
|
|
26
27
|
skelUIPulse
|
|
27
28
|
}) {
|
|
28
29
|
const value = React.useMemo(
|
|
29
|
-
() => ({
|
|
30
|
-
[
|
|
30
|
+
() => ({ color, radius, shimmer, animation, skelUIPulse }),
|
|
31
|
+
[color, radius, shimmer, animation, skelUIPulse]
|
|
31
32
|
);
|
|
32
33
|
return /* @__PURE__ */ jsx(UIOptionsContext.Provider, { value, children });
|
|
33
34
|
}
|
|
34
|
-
function
|
|
35
|
+
function SkelItem({
|
|
35
36
|
component,
|
|
36
37
|
...rest
|
|
37
38
|
}) {
|
|
38
39
|
return createSkelComponent(component)(rest);
|
|
39
40
|
}
|
|
40
41
|
const Root = SkelRoot;
|
|
41
|
-
const
|
|
42
|
+
const Item = SkelItem;
|
|
42
43
|
const Provider = SkelProvider;
|
|
43
44
|
const View = createSkelComponent(ReactNative.View);
|
|
44
45
|
const Text = createSkelComponent(ReactNative.Text);
|
|
45
46
|
const Image = createSkelComponent(ReactNative.Image);
|
|
47
|
+
const Button = createSkelComponent(ReactNative.Button);
|
|
46
48
|
const Pressable = createSkelComponent(ReactNative.Pressable);
|
|
49
|
+
const TextInput = createSkelComponent(ReactNative.TextInput);
|
|
50
|
+
const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
|
|
51
|
+
const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
|
|
52
|
+
const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);
|
|
47
53
|
export {
|
|
48
|
-
|
|
54
|
+
Button,
|
|
49
55
|
Image,
|
|
56
|
+
Item,
|
|
50
57
|
Pressable,
|
|
51
58
|
Provider,
|
|
52
59
|
Root,
|
|
53
|
-
SkelProvider,
|
|
54
60
|
Text,
|
|
61
|
+
TextInput,
|
|
62
|
+
TouchableHighlight,
|
|
63
|
+
TouchableOpacity,
|
|
64
|
+
TouchableWithoutFeedback,
|
|
55
65
|
View
|
|
56
66
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
|
|
2
|
-
import type { ComponentProps, ComponentType,
|
|
2
|
+
import type { ComponentProps, ComponentType, ReactNode } from "react";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import * as ReactNative from "react-native";
|
|
5
|
-
import {
|
|
6
|
-
|
|
5
|
+
import { UIOptions } from "./Animation";
|
|
6
|
+
declare function SkelProvider({ color, radius, shimmer, children, animation, skelUIPulse, }: UIOptions & {
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
declare function
|
|
9
|
+
declare function SkelItem<T extends ComponentType<ComponentProps<T>>>({ component, ...rest }: {
|
|
10
10
|
component: T;
|
|
11
11
|
} & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export declare const Root: typeof SkelRoot;
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const Item: typeof SkelItem;
|
|
14
14
|
export declare const Provider: typeof SkelProvider;
|
|
15
15
|
export declare const View: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.View>) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export declare const Text: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Text>) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export declare const Image: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Image>) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const Button: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Button>) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export declare const Pressable: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.PressableProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const TextInput: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TextInput>) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const TouchableOpacity: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableOpacityProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const TouchableHighlight: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableHighlightProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const TouchableWithoutFeedback: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TouchableWithoutFeedback>) => import("react/jsx-runtime").JSX.Element;
|
|
19
24
|
export {};
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skel-ui/react-native",
|
|
3
3
|
"author": "https://github.com/sudoaugustin",
|
|
4
|
-
"version": "1.0.0-alpha.
|
|
4
|
+
"version": "1.0.0-alpha.a8d28e6",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "Small but mighty skeleton loading for React Native",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
@@ -22,6 +22,18 @@
|
|
|
22
22
|
"types": "./dist/index.d.ts",
|
|
23
23
|
"import": "./dist/esm/index.js",
|
|
24
24
|
"require": "./dist/cjs/index.js"
|
|
25
|
+
},
|
|
26
|
+
"./utils": {
|
|
27
|
+
"types": "./dist/utils.d.ts",
|
|
28
|
+
"import": "./dist/esm/utils.js",
|
|
29
|
+
"require": "./dist/cjs/utils.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"typesVersions": {
|
|
33
|
+
"*": {
|
|
34
|
+
"utils": [
|
|
35
|
+
"./dist/utils.d.ts"
|
|
36
|
+
]
|
|
25
37
|
}
|
|
26
38
|
},
|
|
27
39
|
"bugs": {
|
|
@@ -36,7 +48,7 @@
|
|
|
36
48
|
"@skel-ui/core": "1.0.0"
|
|
37
49
|
},
|
|
38
50
|
"devDependencies": {
|
|
39
|
-
"@types/react": "
|
|
51
|
+
"@types/react": "18.3.12",
|
|
40
52
|
"esbuild": "^0.24.0",
|
|
41
53
|
"expo-linear-gradient": "^14.0",
|
|
42
54
|
"react": "^18.3.1",
|