@skel-ui/react-native 1.0.0-alpha.c6a0c37 → 1.0.0-alpha.e84c1ff

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Animation.d.ts +12 -8
  2. package/dist/cjs/Animation.js +39 -19
  3. package/dist/cjs/index.js +20 -10
  4. package/dist/esm/Animation.js +40 -19
  5. package/dist/esm/index.js +17 -7
  6. package/dist/index.d.ts +10 -5
  7. package/package.json +3 -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 UIOptions = {
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
- colors?: [string, string];
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({ colors, animation }) {
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) opacity.value = (0, import_react_native_reanimated.withTiming)(0.5, animation);
46
- if (opacity.value === 0.5) opacity.value = (0, import_react_native_reanimated.withTiming)(1, animation);
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: colors[0] }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: " \u200C " }) });
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 Gradient({ colors, animation }) {
51
- const translateX = (0, import_react_native_reanimated.useSharedValue)("-100%");
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
- translateX.value = (0, import_react_native_reanimated.withRepeat)((0, import_react_native_reanimated.withTiming)("100%", animation), -1, false);
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: colors[0] }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
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: { width: "100%", height: "100%", transform: [{ translateX }] },
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
- start: { x: 0, y: 0 },
63
- end: { x: 1, y: 0 },
64
- style: { width: "100%", height: "100%" },
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 { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
75
- const isCustomAnimation = "component" in animation;
76
- const animationItemProps = {
77
- colors,
78
- animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1), ...animation }
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: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pluse, { ...animationItemProps }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradient, { ...animationItemProps }) })
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 src_exports = {};
30
- __export(src_exports, {
31
- Custom: () => Custom,
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(src_exports);
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
- colors,
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
- () => ({ colors, radius, animation, skelUIPulse }),
70
- [colors, radius, animation, skelUIPulse]
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 SkelCustom({
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 Custom = SkelCustom;
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({ colors, animation }) {
15
+ function Pluse({ color, animation }) {
15
16
  const opacity = useSharedValue(0.5);
16
17
  useFrameCallback(() => {
17
- if (opacity.value === 1) opacity.value = withTiming(0.5, animation);
18
- if (opacity.value === 0.5) opacity.value = withTiming(1, animation);
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: colors[0] }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
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 Gradient({ colors, animation }) {
23
- const translateX = useSharedValue("-100%");
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
- translateX.value = withRepeat(withTiming("100%", animation), -1, false);
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: colors[0] }, children: /* @__PURE__ */ jsx(
36
+ return /* @__PURE__ */ jsx(View, { style: { backgroundColor: color }, children: /* @__PURE__ */ jsx(
28
37
  Animated.View,
29
38
  {
30
- style: { width: "100%", height: "100%", transform: [{ translateX }] },
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
- start: { x: 0, y: 0 },
35
- end: { x: 1, y: 0 },
36
- style: { width: "100%", height: "100%" },
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 { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
47
- const isCustomAnimation = "component" in animation;
48
- const animationItemProps = {
49
- colors,
50
- animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: Easing.bezier(0.4, 0, 0.6, 1), ...animation }
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: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...animationItemProps }) : /* @__PURE__ */ jsx(Gradient, { ...animationItemProps }) })
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
- colors,
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
- () => ({ colors, radius, animation, skelUIPulse }),
30
- [colors, radius, animation, skelUIPulse]
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 SkelCustom({
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 Custom = SkelCustom;
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
- Custom,
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, ContextType, ReactNode } from "react";
2
+ import type { ComponentProps, ComponentType, ReactNode } from "react";
3
3
  import React from "react";
4
4
  import * as ReactNative from "react-native";
5
- import { UIOptionsContext } from "./Animation";
6
- export declare function SkelProvider({ colors, radius, children, animation, skelUIPulse, }: ContextType<typeof UIOptionsContext> & {
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 SkelCustom<T extends ComponentType<ComponentProps<T>>>({ component, ...rest }: {
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 Custom: typeof SkelCustom;
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.c6a0c37",
4
+ "version": "1.0.0-alpha.e84c1ff",
5
5
  "license": "MIT",
6
- "description": "Next era of skeleton loading for React Native",
6
+ "description": "Small but mighty skeleton loading for React Native",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
@@ -48,7 +48,7 @@
48
48
  "@skel-ui/core": "1.0.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@types/react": "^18.3.12",
51
+ "@types/react": "18.3.12",
52
52
  "esbuild": "^0.24.0",
53
53
  "expo-linear-gradient": "^14.0",
54
54
  "react": "^18.3.1",