@skel-ui/react-native 1.0.0-alpha.01475df

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Augustin Joseph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.
+
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
+
+## Get Started
+
+### Add Skel Provider
+
+Wrap your application with Skel UI provider.
+
+
+```tsx
+import * as Skel from "@skel-ui/react-native";
+
+export default function App() {
+  return <Skel.Provider> ... </Skel.Provider>;
+}
+```
+
+### Implement Skel UI
+
+Now it's time for you to craft your user interface to life!
+
+```tsx
+import * as Skel from "@skel-ui/react-native";
+import RN from "react-native";
+
+export default function PostCard() {
+  const { post, isLoading } = usePost();
+
+  return (
+    <Skel.Root isLoading={isLoading}>
+      <RN.View style={styles.card}>
+        <Skel.Image src={post?.image} style={styles.cardImage} />
+        <Skel.Text sw="65%" style={styles.cardTitle}>
+          {post?.title}
+        </Skel.Text>
+        <Skel.Text numberOfLines={3} style={styles.cardDescription}>
+          {post?.description}
+        </Skel.Text>
+      </RN.View>
+    </Skel.Root>
+  );
+}
+
+const styles = RN.StyleSheet.create({
+  card: {
+    width: 320,
+    padding: 10,
+    marginHorizontal: "auto",
+    borderWidth: 1,
+    borderColor: "#e2e8f0",
+    borderRadius: 8,
+  },
+  cardImage: {
+    borderRadius: 4,
+    aspectRatio: 800 / 530,
+  },
+  cardTitle: {
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 24,
+    lineHeight: 28,
+    fontWeight: 800,
+  },
+  cardDescription: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
+```
+
+Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
+
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/dist/Animation.d.ts

@@ -0,0 +1,27 @@
+import { SkelComponentProps } from "@skel-ui/core";
+import { ReactNode } from "react";
+import { View } from "react-native";
+import { EasingFunction, EasingFunctionFactory } from "react-native-reanimated";
+import { TStyle } from "./funcs";
+type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
+    style?: TStyle;
+    numberOfLines?: number;
+};
+export type UIOptions = {
+    color?: string;
+    radius?: number;
+    shimmer?: {
+        color?: string;
+    };
+    animation?: {
+        component: ReactNode;
+    } | {
+        delay?: number;
+        easing?: EasingFunction | EasingFunctionFactory;
+        duration?: number;
+    };
+    skelUIPulse?: boolean;
+};
+export declare const UIOptionsContext: import("react").Context<UIOptions>;
+export declare function Animation({ sw, sh, sr, style, numberOfLines }: AnimationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/Animation.js

@@ -0,0 +1,118 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Animation_exports = {};
+__export(Animation_exports, {
+  Animation: () => Animation,
+  UIOptionsContext: () => UIOptionsContext
+});
+module.exports = __toCommonJS(Animation_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_expo_linear_gradient = require("expo-linear-gradient");
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
+var import_funcs = require("./funcs");
+const UIOptionsContext = (0, import_react.createContext)({});
+function Pluse({ color, animation }) {
+  const opacity = (0, import_react_native_reanimated.useSharedValue)(0.5);
+  (0, import_react_native_reanimated.useFrameCallback)(() => {
+    if (opacity.value === 1 || opacity.value === 0.5) {
+      const { delay, ...options } = animation;
+      opacity.value = (0, import_react_native_reanimated.withDelay)(delay, (0, import_react_native_reanimated.withTiming)(opacity.value === 1 ? 0.5 : 1, options));
+    }
+  });
+  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 " }) });
+}
+function Shimmer({ color, shimmer, animation }) {
+  const translate = (0, import_react_native_reanimated.useSharedValue)("-100%");
+  const cords = {
+    x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
+    y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
+  };
+  const style = { width: "100%", height: "100%" };
+  (0, import_react.useEffect)(() => {
+    const { delay, ...options } = animation;
+    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));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native_reanimated.default.View,
+    {
+      style: {
+        ...style,
+        transform: [{ translateX: translate }]
+        // transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_expo_linear_gradient.LinearGradient,
+        {
+          ...cords.x,
+          style,
+          colors: [color, shimmer.color, color]
+        }
+      )
+    }
+  ) });
+}
+function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
+  const text = (0, import_react.useMemo)(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
+  const { viewStyle, textStyle } = (0, import_funcs.filterStyle)(style);
+  const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
+  const $props = {
+    color,
+    radius,
+    shimmer: {
+      color: "#f1f0f0",
+      ...shimmer
+    },
+    animation: {
+      delay: 0,
+      easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1),
+      duration: skelUIPulse ? 1e3 : 2e3,
+      ...animation
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_native.View,
+    {
+      style: {
+        ...style,
+        width: sw || viewStyle.width,
+        height: sh || viewStyle.height,
+        borderRadius: sr || viewStyle.borderRadius || radius,
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: void 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: textStyle, children: text }),
+        /* @__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 }) })
+      ]
+    }
+  );
+}

package/dist/cjs/funcs.js

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var funcs_exports = {};
+__export(funcs_exports, {
+  filterStyle: () => filterStyle
+});
+module.exports = __toCommonJS(funcs_exports);
+const viewWhitelistStyles = [
+  "aspectRatio",
+  "bottom",
+  "display",
+  "flex",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+  "left",
+  "margin",
+  "marginBottom",
+  "marginEnd",
+  "marginHorizontal",
+  "marginLeft",
+  "marginRight",
+  "marginStart",
+  "marginTop",
+  "marginVertical",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  "position",
+  "right",
+  "top",
+  "zIndex",
+  "width",
+  "height",
+  "borderRadius",
+  "borderBottomEndRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderBottomStartRadius",
+  "borderStartEndRadius",
+  "borderStartStartRadius",
+  "borderEndEndRadius",
+  "borderEndStartRadius",
+  "borderTopEndRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderTopStartRadius"
+];
+const textWhitelistStyles = ["fontFamily", "fontSize", "fontStyle", "fontWeight", "lineHeight"];
+const filterStyle = (style) => {
+  const viewStyle = {};
+  const textStyle = {};
+  Object.entries(style).forEach(([name, value]) => {
+    if (viewWhitelistStyles.includes(name)) {
+      viewStyle[name] = value;
+    } else if (textWhitelistStyles.includes(name)) {
+      textStyle[name] = value;
+    }
+  });
+  return { viewStyle, textStyle };
+};

package/dist/cjs/index.js

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Image: () => Image,
+  Item: () => Item,
+  Pressable: () => Pressable,
+  Provider: () => Provider,
+  Root: () => Root,
+  Text: () => Text,
+  TextInput: () => TextInput,
+  TouchableHighlight: () => TouchableHighlight,
+  TouchableOpacity: () => TouchableOpacity,
+  TouchableWithoutFeedback: () => TouchableWithoutFeedback,
+  View: () => View
+});
+module.exports = __toCommonJS(index_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@skel-ui/core");
+var import_react = __toESM(require("react"));
+var ReactNative = __toESM(require("react-native"));
+var import_Animation = require("./Animation");
+function createSkelComponent(type) {
+  return ({ sw, sh, sr, children, ...props }) => {
+    const isLoading = import_react.default.useContext(import_core.IsLoadingContext);
+    return isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Animation.Animation,
+      {
+        sw,
+        sh,
+        sr,
+        style: { width: props.width, height: props.height, ...props.style },
+        numberOfLines: props.numberOfLines
+      }
+    ) : import_react.default.createElement(type, props, children);
+  };
+}
+function SkelProvider({
+  color,
+  radius,
+  shimmer,
+  children,
+  animation,
+  skelUIPulse
+}) {
+  const value = import_react.default.useMemo(
+    () => ({ color, radius, shimmer, animation, skelUIPulse }),
+    [color, radius, shimmer, animation, skelUIPulse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Animation.UIOptionsContext.Provider, { value, children });
+}
+function SkelItem({
+  component,
+  ...rest
+}) {
+  return createSkelComponent(component)(rest);
+}
+const Root = import_core.SkelRoot;
+const Item = SkelItem;
+const Provider = SkelProvider;
+const View = createSkelComponent(ReactNative.View);
+const Text = createSkelComponent(ReactNative.Text);
+const Image = createSkelComponent(ReactNative.Image);
+const Button = createSkelComponent(ReactNative.Button);
+const Pressable = createSkelComponent(ReactNative.Pressable);
+const TextInput = createSkelComponent(ReactNative.TextInput);
+const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
+const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
+const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);

package/dist/cjs/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  generatePlaceholder: () => import_core.generatePlaceholder
+});
+module.exports = __toCommonJS(utils_exports);
+var import_core = require("@skel-ui/core");

package/dist/esm/Animation.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LinearGradient } from "expo-linear-gradient";
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useFrameCallback,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming
+} from "react-native-reanimated";
+import { filterStyle } from "./funcs";
+const UIOptionsContext = createContext({});
+function Pluse({ color, animation }) {
+  const opacity = useSharedValue(0.5);
+  useFrameCallback(() => {
+    if (opacity.value === 1 || opacity.value === 0.5) {
+      const { delay, ...options } = animation;
+      opacity.value = withDelay(delay, withTiming(opacity.value === 1 ? 0.5 : 1, options));
+    }
+  });
+  return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: color }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
+}
+function Shimmer({ color, shimmer, animation }) {
+  const translate = useSharedValue("-100%");
+  const cords = {
+    x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
+    y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
+  };
+  const style = { width: "100%", height: "100%" };
+  useEffect(() => {
+    const { delay, ...options } = animation;
+    translate.value = withDelay(delay, withRepeat(withTiming("100%", options), -1, false));
+  }, []);
+  return /* @__PURE__ */ jsx(View, { style: { backgroundColor: color }, children: /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: {
+        ...style,
+        transform: [{ translateX: translate }]
+        // transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
+      },
+      children: /* @__PURE__ */ jsx(
+        LinearGradient,
+        {
+          ...cords.x,
+          style,
+          colors: [color, shimmer.color, color]
+        }
+      )
+    }
+  ) });
+}
+function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
+  const text = useMemo(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
+  const { viewStyle, textStyle } = filterStyle(style);
+  const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
+  const $props = {
+    color,
+    radius,
+    shimmer: {
+      color: "#f1f0f0",
+      ...shimmer
+    },
+    animation: {
+      delay: 0,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      duration: skelUIPulse ? 1e3 : 2e3,
+      ...animation
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        ...style,
+        width: sw || viewStyle.width,
+        height: sh || viewStyle.height,
+        borderRadius: sr || viewStyle.borderRadius || radius,
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: textStyle, children: text }),
+        /* @__PURE__ */ jsx(View, { style: { inset: 0, position: "absolute" }, children: "component" in animation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...$props }) : /* @__PURE__ */ jsx(Shimmer, { ...$props }) })
+      ]
+    }
+  );
+}
+export {
+  Animation,
+  UIOptionsContext
+};

package/dist/esm/funcs.js

@@ -0,0 +1,67 @@
+const viewWhitelistStyles = [
+  "aspectRatio",
+  "bottom",
+  "display",
+  "flex",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+  "left",
+  "margin",
+  "marginBottom",
+  "marginEnd",
+  "marginHorizontal",
+  "marginLeft",
+  "marginRight",
+  "marginStart",
+  "marginTop",
+  "marginVertical",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  "position",
+  "right",
+  "top",
+  "zIndex",
+  "width",
+  "height",
+  "borderRadius",
+  "borderBottomEndRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderBottomStartRadius",
+  "borderStartEndRadius",
+  "borderStartStartRadius",
+  "borderEndEndRadius",
+  "borderEndStartRadius",
+  "borderTopEndRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderTopStartRadius"
+];
+const textWhitelistStyles = ["fontFamily", "fontSize", "fontStyle", "fontWeight", "lineHeight"];
+const filterStyle = (style) => {
+  const viewStyle = {};
+  const textStyle = {};
+  Object.entries(style).forEach(([name, value]) => {
+    if (viewWhitelistStyles.includes(name)) {
+      viewStyle[name] = value;
+    } else if (textWhitelistStyles.includes(name)) {
+      textStyle[name] = value;
+    }
+  });
+  return { viewStyle, textStyle };
+};
+export {
+  filterStyle
+};

package/dist/esm/index.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { IsLoadingContext, SkelRoot } from "@skel-ui/core";
+import React from "react";
+import * as ReactNative from "react-native";
+import { Animation, UIOptionsContext } from "./Animation";
+function createSkelComponent(type) {
+  return ({ sw, sh, sr, children, ...props }) => {
+    const isLoading = React.useContext(IsLoadingContext);
+    return isLoading ? /* @__PURE__ */ jsx(
+      Animation,
+      {
+        sw,
+        sh,
+        sr,
+        style: { width: props.width, height: props.height, ...props.style },
+        numberOfLines: props.numberOfLines
+      }
+    ) : React.createElement(type, props, children);
+  };
+}
+function SkelProvider({
+  color,
+  radius,
+  shimmer,
+  children,
+  animation,
+  skelUIPulse
+}) {
+  const value = React.useMemo(
+    () => ({ color, radius, shimmer, animation, skelUIPulse }),
+    [color, radius, shimmer, animation, skelUIPulse]
+  );
+  return /* @__PURE__ */ jsx(UIOptionsContext.Provider, { value, children });
+}
+function SkelItem({
+  component,
+  ...rest
+}) {
+  return createSkelComponent(component)(rest);
+}
+const Root = SkelRoot;
+const Item = SkelItem;
+const Provider = SkelProvider;
+const View = createSkelComponent(ReactNative.View);
+const Text = createSkelComponent(ReactNative.Text);
+const Image = createSkelComponent(ReactNative.Image);
+const Button = createSkelComponent(ReactNative.Button);
+const Pressable = createSkelComponent(ReactNative.Pressable);
+const TextInput = createSkelComponent(ReactNative.TextInput);
+const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
+const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
+const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);
+export {
+  Button,
+  Image,
+  Item,
+  Pressable,
+  Provider,
+  Root,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View
+};

package/dist/esm/utils.js

@@ -0,0 +1,4 @@
+import { generatePlaceholder } from "@skel-ui/core";
+export {
+  generatePlaceholder
+};

package/dist/funcs.d.ts

@@ -0,0 +1,7 @@
+export type TStyle = {
+    [k: string]: unknown;
+};
+export declare const filterStyle: (style: TStyle) => {
+    viewStyle: TStyle;
+    textStyle: TStyle;
+};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+import React from "react";
+import * as ReactNative from "react-native";
+import { UIOptions } from "./Animation";
+declare function SkelProvider({ color, radius, shimmer, children, animation, skelUIPulse, }: UIOptions & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SkelItem<T extends ComponentType<ComponentProps<T>>>({ component, ...rest }: {
+    component: T;
+} & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">): import("react/jsx-runtime").JSX.Element;
+export declare const Root: typeof SkelRoot;
+export declare const Item: typeof SkelItem;
+export declare const Provider: typeof SkelProvider;
+export declare const View: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.View>) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Text>) => import("react/jsx-runtime").JSX.Element;
+export declare const Image: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Image>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Button>) => import("react/jsx-runtime").JSX.Element;
+export declare const Pressable: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.PressableProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TextInput>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableOpacity: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableOpacityProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableHighlight: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableHighlightProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableWithoutFeedback: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TouchableWithoutFeedback>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { generatePlaceholder } from "@skel-ui/core";
+export { generatePlaceholder };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@skel-ui/react-native",
+  "author": "https://github.com/sudoaugustin",
+  "version": "1.0.0-alpha.01475df",
+  "license": "MIT",
+  "description": "Lightweight and powerful skeleton loading library for React.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "keywords": [
+    "react",
+    "native",
+    "skeleton",
+    "loading",
+    "placeholder"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/esm/utils.js",
+      "require": "./dist/cjs/utils.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "utils": [
+        "./dist/utils.d.ts"
+      ]
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/sudoaugustin/skel-ui/issues"
+  },
+  "homepage": "https://skel-ui.augustin.zip",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sudoaugustin/skel-ui"
+  },
+  "dependencies": {
+    "@skel-ui/core": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.12",
+    "esbuild": "^0.24.0",
+    "expo-linear-gradient": "^14.0",
+    "react": "^18.3.1",
+    "react-native": "0.76.3",
+    "typescript": "^5.7.2",
+    "react-native-reanimated": "^3.0",
+    "commons-tsconfig": "0.0.1",
+    "@skel-ui/core": "1.0.0"
+  },
+  "peerDependencies": {
+    "expo-linear-gradient": "^14.0",
+    "react": "^17.0 || ^18.0",
+    "react-native": "*",
+    "react-native-reanimated": "^3.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && pnpm build:dts && pnpm build:esm && pnpm build:cjs",
+    "build:dts": "tsc -p tsconfig.json --outDir dist --emitDeclarationOnly",
+    "build:css": "esbuild src/styles.css --outdir=dist",
+    "build:esm": "esbuild src/*.ts* --format=esm --outdir=dist/esm",
+    "build:cjs": "esbuild src/*.ts* --format=cjs --outdir=dist/cjs"
+  }
+}