@skel-ui/react-native 1.0.0-alpha.444268b

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,71 @@
+# Getting Started
+
+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.
+
+## Installation
+
+Install the package into your project via command line.
+
+```bash
+npm install @skel-ui/react
+```
+
+## Importing CSS
+
+Import the CSS file into the root of your application.
+
+```js
+import "@skel-ui/react/styles.css";
+```
+
+## Start crafting UI
+
+Now it's time for you to craft your user interface to life!
+
+```jsx
+import * as Skel from "@skel-ui/react";
+import Image from "next/image";
+
+function Profile() {
+  const { user, isLoading } = useProfile();
+
+  return (
+    <Skel.Root isLoading={isLoading}>
+      <Skel.Item className="user-avatar">
+        <Image src={user.profile} />
+      </Skel.Item>
+      <Skel.Item as="h1" className="user-email">
+        {user.email}
+      </Skel.Item>
+    </Skel.Root>
+  );
+}
+```
+
+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>` .
+
+## Customization
+
+Customize the default color and border-radius of skeleton using css variables.
+
+```css title="global.css"
+:root {
+    --skel-ui-color1: #a1a1aa;
+    --skel-ui-color2: #e4e4e7;
+    --skel-ui-radius: 0.25rem;
+}
+```
+
+Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
+
+```css
+/* This style will be applied during loading. */
+.user-email[data-loading="true"] {
+  width: 5rem;
+}
+
+/* This style will be applied after loading is done. */
+.user-email[data-loading="false"]:hover {
+  background: #f97316;
+}
+```

package/dist/Animation.d.ts

@@ -0,0 +1,23 @@
+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 UIOptions = {
+    radius?: number;
+    colors?: [string, string];
+    animation?: {
+        easing?: EasingFunction | EasingFunctionFactory;
+        duration?: number;
+    } | {
+        component: ReactNode;
+    };
+    skelUIPulse?: boolean;
+};
+type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
+    style?: TStyle;
+    numberOfLines?: number;
+};
+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,98 @@
+"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({ colors, animation }) {
+  const opacity = (0, import_react_native_reanimated.useSharedValue)(0.5);
+  (0, import_react_native_reanimated.useFrameCallback)(() => {
+    if (opacity.value === 1) opacity.value = (0, import_react_native_reanimated.withTiming)(0.5, animation);
+    if (opacity.value === 0.5) opacity.value = (0, import_react_native_reanimated.withTiming)(1, animation);
+  });
+  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 " }) });
+}
+function Gradient({ colors, animation }) {
+  const translateX = (0, import_react_native_reanimated.useSharedValue)("-100%");
+  (0, import_react.useEffect)(() => {
+    translateX.value = (0, import_react_native_reanimated.withRepeat)((0, import_react_native_reanimated.withTiming)("100%", animation), -1, false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor: colors[0] }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native_reanimated.default.View,
+    {
+      style: { width: "100%", height: "100%", transform: [{ translateX }] },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_expo_linear_gradient.LinearGradient,
+        {
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
+          style: { width: "100%", height: "100%" },
+          colors: [...colors, colors[0]]
+        }
+      )
+    }
+  ) });
+}
+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 { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
+  const isCustomAnimation = "component" in animation;
+  const animationItemProps = {
+    colors,
+    animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1), ...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: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pluse, { ...animationItemProps }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradient, { ...animationItemProps }) })
+      ]
+    }
+  );
+}

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,86 @@
+"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 src_exports = {};
+__export(src_exports, {
+  Custom: () => Custom,
+  Image: () => Image,
+  Pressable: () => Pressable,
+  Provider: () => Provider,
+  Root: () => Root,
+  SkelProvider: () => SkelProvider,
+  Text: () => Text,
+  View: () => View
+});
+module.exports = __toCommonJS(src_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({
+  colors,
+  radius,
+  children,
+  animation,
+  skelUIPulse
+}) {
+  const value = import_react.default.useMemo(
+    () => ({ colors, radius, animation, skelUIPulse }),
+    [colors, radius, animation, skelUIPulse]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Animation.UIOptionsContext.Provider, { value, children });
+}
+function SkelCustom({
+  component,
+  ...rest
+}) {
+  return createSkelComponent(component)(rest);
+}
+const Root = import_core.SkelRoot;
+const Custom = SkelCustom;
+const Provider = SkelProvider;
+const View = createSkelComponent(ReactNative.View);
+const Text = createSkelComponent(ReactNative.Text);
+const Image = createSkelComponent(ReactNative.Image);
+const Pressable = createSkelComponent(ReactNative.Pressable);

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,74 @@
+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,
+  withRepeat,
+  withTiming
+} from "react-native-reanimated";
+import { filterStyle } from "./funcs";
+const UIOptionsContext = createContext({});
+function Pluse({ colors, animation }) {
+  const opacity = useSharedValue(0.5);
+  useFrameCallback(() => {
+    if (opacity.value === 1) opacity.value = withTiming(0.5, animation);
+    if (opacity.value === 0.5) opacity.value = withTiming(1, animation);
+  });
+  return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: colors[0] }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
+}
+function Gradient({ colors, animation }) {
+  const translateX = useSharedValue("-100%");
+  useEffect(() => {
+    translateX.value = withRepeat(withTiming("100%", animation), -1, false);
+  }, []);
+  return /* @__PURE__ */ jsx(View, { style: { backgroundColor: colors[0] }, children: /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: { width: "100%", height: "100%", transform: [{ translateX }] },
+      children: /* @__PURE__ */ jsx(
+        LinearGradient,
+        {
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
+          style: { width: "100%", height: "100%" },
+          colors: [...colors, colors[0]]
+        }
+      )
+    }
+  ) });
+}
+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 { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
+  const isCustomAnimation = "component" in animation;
+  const animationItemProps = {
+    colors,
+    animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: Easing.bezier(0.4, 0, 0.6, 1), ...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: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...animationItemProps }) : /* @__PURE__ */ jsx(Gradient, { ...animationItemProps }) })
+      ]
+    }
+  );
+}
+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,56 @@
+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({
+  colors,
+  radius,
+  children,
+  animation,
+  skelUIPulse
+}) {
+  const value = React.useMemo(
+    () => ({ colors, radius, animation, skelUIPulse }),
+    [colors, radius, animation, skelUIPulse]
+  );
+  return /* @__PURE__ */ jsx(UIOptionsContext.Provider, { value, children });
+}
+function SkelCustom({
+  component,
+  ...rest
+}) {
+  return createSkelComponent(component)(rest);
+}
+const Root = SkelRoot;
+const Custom = SkelCustom;
+const Provider = SkelProvider;
+const View = createSkelComponent(ReactNative.View);
+const Text = createSkelComponent(ReactNative.Text);
+const Image = createSkelComponent(ReactNative.Image);
+const Pressable = createSkelComponent(ReactNative.Pressable);
+export {
+  Custom,
+  Image,
+  Pressable,
+  Provider,
+  Root,
+  SkelProvider,
+  Text,
+  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,19 @@
+import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
+import type { ComponentProps, ComponentType, ContextType, ReactNode } from "react";
+import React from "react";
+import * as ReactNative from "react-native";
+import { UIOptionsContext } from "./Animation";
+export declare function SkelProvider({ colors, radius, children, animation, skelUIPulse, }: ContextType<typeof UIOptionsContext> & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SkelCustom<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 Custom: typeof SkelCustom;
+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 Pressable: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.PressableProps & React.RefAttributes<ReactNative.View>>>) => 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.444268b",
+  "license": "MIT",
+  "description": "Next era of skeleton loading for React Native",
+  "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",
+    "@skel-ui/core": "1.0.0",
+    "commons-tsconfig": "0.0.1"
+  },
+  "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"
+  }
+}