react-native-smart-skeleton 0.0.1

package/README.md

@@ -0,0 +1,255 @@
+# react-native-smart-skeleton
+
+A fully customizable, theme-aware, animated skeleton loader for React Native, powered by `react-native-reanimated`.
+
+Created by Neeraj Singh.
+
+## Demo
+
+<img src="src/demo/demo.gif" alt="React Native Smart Skeleton demo" width="600" />
+
+## Why use this package?
+
+- Build fast, polished loading placeholders for React Native apps
+- Support light/dark themes out of the box
+- Use shimmer, pulse, wave, breathing, and none animations
+- Customize colors, sizes, spacing, and performance mode
+- Works well for cards, profiles, chats, products, and video screens
+
+## Overview
+
+react-native-smart-skeleton is a lightweight, customizable skeleton loading library for React Native applications. It helps you create beautiful loading states with minimal code while staying accessible and theme-aware.
+
+## Features
+
+- Auto light/dark theme detection (`useColorScheme`, overridable via `SkeletonProvider`)
+- Global `SkeletonProvider` for app-wide defaults
+- Shimmer, Pulse, Wave, and Breathing animations
+- RTL-aware shimmer/wave sweep direction
+- Accessibility support (`accessibilityRole="image"`, busy state, customizable labels)
+- Automatic reduced-motion fallback (OS setting or explicit override)
+- Dynamic shape builder via `SkeletonClone` (clone an arbitrary layout tree)
+- Smart presets: `Profile`, `Card`, `Chat`, `Product`, `Video`
+- Responsive helpers for grid columns / size scaling
+- Brand color support (named light/dark palettes)
+- Performance modes (`high` / `balanced` / `battery-saver`)
+- `Skeleton.Group` for automatic stagger animations
+- Full TypeScript support
+
+## Installation
+
+### Install from npm
+
+React Native CLI:
+
+```bash
+npm install react-native-smart-skeleton react-native-reanimated react-native-linear-gradient
+```
+
+Expo:
+
+```bash
+npx expo install react-native-smart-skeleton react-native-reanimated expo-linear-gradient
+```
+
+Yarn:
+
+```bash
+yarn add react-native-smart-skeleton react-native-reanimated react-native-linear-gradient
+```
+
+React Native CLI apps may also need native linking and pods:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+### Install from a local tarball
+
+If you want to test this package locally from a built tarball:
+
+```bash
+cd /path/to/react-native-smart-skeleton
+npm pack
+```
+
+Then install it into another app:
+
+```bash
+npm install /path/to/react-native-smart-skeleton/react-native-smart-skeleton-0.1.0.tgz
+```
+
+If the app is a sibling folder, the relative form is:
+
+```bash
+npm install ../react-native-smart-skeleton/react-native-smart-skeleton-0.1.0.tgz
+```
+
+### Import in both environments
+
+The import is the same in Expo and React Native CLI:
+
+```tsx
+import { SkeletonProvider, Skeleton } from "react-native-smart-skeleton";
+```
+
+This package automatically uses `expo-linear-gradient` in Expo apps and `react-native-linear-gradient` in React Native CLI apps.
+
+Follow the installation instructions for [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) (Babel plugin) and either [`react-native-linear-gradient`](https://github.com/react-native-linear-gradient/react-native-linear-gradient) for React Native CLI or [`expo-linear-gradient`](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) for Expo.
+
+## Basic usage
+
+```tsx
+import { SkeletonProvider, Skeleton } from "react-native-smart-skeleton";
+
+export default function App() {
+  return (
+    <SkeletonProvider theme="system" animation="shimmer">
+      <Skeleton.Rect width={200} height={20} />
+      <Skeleton.Circle size={48} />
+      <Skeleton.Pill width={80} height={28} />
+    </SkeletonProvider>
+  );
+}
+```
+
+`SkeletonProvider` is optional — every shape also works standalone, falling back to the OS color scheme and library defaults.
+
+## Shapes
+
+```tsx
+<Skeleton.Rect width={200} height={20} borderRadius={6} />
+<Skeleton.Circle size={48} />
+<Skeleton.Square size={64} borderRadius={8} />
+<Skeleton.Pill width={100} height={32} />
+```
+
+All shapes accept every prop from the base `SkeletonProps`: `animation`, `duration`, `delay`, `backgroundColor`, `highlightColor`, `gradientColors`, `colorVariant`, `rtl`, `style`, `accessibilityLabel`, `accessible`, `testID`.
+
+## Animations
+
+```tsx
+<Skeleton.Rect animation="shimmer" />
+<Skeleton.Rect animation="pulse" />
+<Skeleton.Rect animation="wave" />
+<Skeleton.Rect animation="breathing" />
+<Skeleton.Rect animation="none" />
+```
+
+When the OS "Reduce Motion" setting is on, any non-`"none"` animation automatically downgrades to a slow, low-amplitude `breathing` effect. Override via `SkeletonProvider reducedMotion={false}` to force animations regardless of the OS setting (use sparingly).
+
+## Stagger groups
+
+```tsx
+<Skeleton.Group staggerDelay={80}>
+  <Skeleton.Rect width="100%" height={16} />
+  <Skeleton.Rect width="80%" height={16} />
+  <Skeleton.Rect width="60%" height={16} />
+</Skeleton.Group>
+```
+
+Each child's `delay` is automatically staggered unless it already specifies its own.
+
+## Presets
+
+```tsx
+<Skeleton.Profile avatarSize={56} lines={2} />
+<Skeleton.Card imageHeight={160} lines={3} showAvatar />
+<Skeleton.Chat messages={5} />
+<Skeleton.Product count={6} columns={2} />
+<Skeleton.Video aspectRatio={16 / 9} showTitle showMeta />
+```
+
+Every preset accepts `count` (repeat the block N times), `gap`, `animation`, `style`, and `testID`, plus its own shape-specific props.
+
+## Layout cloning
+
+For bespoke layouts, describe the shape once and let `SkeletonClone` render matching placeholders:
+
+```tsx
+<Skeleton.Clone
+  layout={{
+    direction: "row",
+    gap: 12,
+    children: [
+      { shape: "circle", width: 48, height: 48 },
+      {
+        direction: "column",
+        gap: 6,
+        children: [
+          { width: 120, height: 14 },
+          { width: 80, height: 12 },
+        ],
+      },
+    ],
+  }}
+/>
+```
+
+## Brand colors and custom styling
+
+You can define a custom color palette at the provider level and apply it with `colorVariant="brand"`:
+
+```tsx
+<SkeletonProvider
+  colors={{
+    brand: {
+      light: {
+        background: "#F3F4F6",
+        highlight: "#E5E7EB",
+      },
+      dark: {
+        background: "#1F2937",
+        highlight: "#374151",
+      },
+    },
+  }}
+>
+  <Skeleton.Rect colorVariant="brand" width={220} height={24} />
+</SkeletonProvider>
+```
+
+You can also override colors for a single shape:
+
+```tsx
+<Skeleton.Rect
+  width="100%"
+  height={120}
+  borderRadius={12}
+  backgroundColor="#E5E7EB"
+  highlightColor="#F3F4F6"
+/>
+```
+
+## Performance modes
+
+```tsx
+<SkeletonProvider performanceMode="battery-saver">
+  <App />
+</SkeletonProvider>
+```
+
+`battery-saver` lengthens animation durations to reduce frame work; `high` and `balanced` keep full fidelity.
+
+## API reference
+
+| Export | Description |
+| --- | --- |
+| `Skeleton` | Base component + namespace (`Skeleton.Rect`, `.Circle`, `.Square`, `.Pill`, `.Group`, `.Clone`, `.Profile`, `.Card`, `.Chat`, `.Product`, `.Video`) |
+| `SkeletonProvider` | Global config provider (theme, animation, duration, performance mode, rtl, reducedMotion, colors) |
+| `useSkeletonTheme(colorVariant?)` | Hook returning resolved `{ isDark, background, highlight }` |
+| `useReducedMotion()` | Hook returning the current OS reduce-motion boolean |
+
+See `src/types/index.ts` for the full prop type definitions.
+
+## Contribution
+
+Feel free to contribute, report issues, or suggest improvements.
+
+## Author
+
+Neeraj Singh
+
+## License
+
+MIT

package/lib/commonjs/animations/breathing.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreathingStyle = useBreathingStyle;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+/**
+ * A slow, very gentle scale + opacity oscillation — softer and slower than
+ * "pulse" — intended as the most reduced-motion-friendly animation. This is
+ * the animation `Skeleton` falls back to (at a slowed rate) when the OS
+ * reduce-motion setting is on and the consumer hasn't explicitly chosen "none".
+ */
+function useBreathingStyle({
+  duration = 2200,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced",
+  minScale = 0.97,
+  maxScale = 1,
+  minOpacity = 0.85
+}) {
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.2 : duration;
+    progress.value = 0;
+    progress.value = (0, _reactNativeReanimated.withDelay)(delay, (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: effectiveDuration / 2,
+      easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)
+    }), -1, true));
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const scale = minScale + progress.value * (maxScale - minScale);
+    const opacity = minOpacity + progress.value * (1 - minOpacity);
+    return {
+      opacity,
+      transform: [{
+        scale
+      }]
+    };
+  }, [minScale, maxScale, minOpacity]);
+  return style;
+}
+//# sourceMappingURL=breathing.js.map

package/lib/commonjs/animations/breathing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","useBreathingStyle","duration","delay","disabled","performanceMode","minScale","maxScale","minOpacity","progress","useSharedValue","useEffect","value","effectiveDuration","withDelay","withRepeat","withTiming","easing","Easing","inOut","ease","cancelAnimation","style","useAnimatedStyle","scale","opacity","transform"],"sourceRoot":"../../../src","sources":["animations/breathing.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAwBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,iBAAiBA,CAAC;EAC9BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,UAAU;EAC5BC,QAAQ,GAAG,IAAI;EACfC,QAAQ,GAAG,CAAC;EACZC,UAAU,GAAG;AACC,CAAC,EAAE;EACjB,MAAMC,QAAQ,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIP,QAAQ,EAAE;MACVK,QAAQ,CAACG,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBR,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEO,QAAQ,CAACG,KAAK,GAAG,CAAC;IAClBH,QAAQ,CAACG,KAAK,GAAG,IAAAE,gCAAS,EACtBX,KAAK,EACL,IAAAY,iCAAU,EACN,IAAAC,iCAAU,EAAC,CAAC,EAAE;MACVd,QAAQ,EAAEW,iBAAiB,GAAG,CAAC;MAC/BI,MAAM,EAAEC,6BAAM,CAACC,KAAK,CAACD,6BAAM,CAACE,IAAI;IACpC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,IACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACT,IAAAC,sCAAe,EAACZ,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACP,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMiB,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACjC,MAAMC,KAAK,GAAGlB,QAAQ,GAAGG,QAAQ,CAACG,KAAK,IAAIL,QAAQ,GAAGD,QAAQ,CAAC;IAC/D,MAAMmB,OAAO,GAAGjB,UAAU,GAAGC,QAAQ,CAACG,KAAK,IAAI,CAAC,GAAGJ,UAAU,CAAC;IAC9D,OAAO;MACHiB,OAAO;MACPC,SAAS,EAAE,CAAC;QAAEF;MAAM,CAAC;IACzB,CAAC;EACL,CAAC,EAAE,CAAClB,QAAQ,EAAEC,QAAQ,EAAEC,UAAU,CAAC,CAAC;EAEpC,OAAOc,KAAK;AAChB","ignoreList":[]}

package/lib/commonjs/animations/pulse.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePulseStyle = usePulseStyle;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+/**
+ * Classic fade in/out pulse: opacity oscillates between minOpacity and
+ * maxOpacity using an ease-in-out curve, looping indefinitely.
+ *
+ * Returns an animated style with just `opacity`, ready to spread onto the
+ * skeleton's base View.
+ */
+function usePulseStyle({
+  duration = 1000,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced",
+  minOpacity = 0.4,
+  maxOpacity = 1
+}) {
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.3 : duration;
+    progress.value = 0;
+    progress.value = (0, _reactNativeReanimated.withDelay)(delay, (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: effectiveDuration / 2,
+      easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)
+    }), -1, true // reverse, giving the fade-in/fade-out loop
+    ));
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const opacity = minOpacity + progress.value * (maxOpacity - minOpacity);
+    return {
+      opacity
+    };
+  }, [minOpacity, maxOpacity]);
+  return style;
+}
+//# sourceMappingURL=pulse.js.map

package/lib/commonjs/animations/pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","usePulseStyle","duration","delay","disabled","performanceMode","minOpacity","maxOpacity","progress","useSharedValue","useEffect","value","effectiveDuration","withDelay","withRepeat","withTiming","easing","Easing","inOut","ease","cancelAnimation","style","useAnimatedStyle","opacity"],"sourceRoot":"../../../src","sources":["animations/pulse.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,aAAaA,CAAC;EAC1BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,UAAU;EAC5BC,UAAU,GAAG,GAAG;EAChBC,UAAU,GAAG;AACH,CAAC,EAAE;EACb,MAAMC,QAAQ,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIN,QAAQ,EAAE;MACVI,QAAQ,CAACG,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBP,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEM,QAAQ,CAACG,KAAK,GAAG,CAAC;IAClBH,QAAQ,CAACG,KAAK,GAAG,IAAAE,gCAAS,EACtBV,KAAK,EACL,IAAAW,iCAAU,EACN,IAAAC,iCAAU,EAAC,CAAC,EAAE;MACVb,QAAQ,EAAEU,iBAAiB,GAAG,CAAC;MAC/BI,MAAM,EAAEC,6BAAM,CAACC,KAAK,CAACD,6BAAM,CAACE,IAAI;IACpC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,IAAI,CAAC;IACT,CACJ,CAAC;IAED,OAAO,MAAM;MACT,IAAAC,sCAAe,EAACZ,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACN,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMgB,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACjC,MAAMC,OAAO,GAAGjB,UAAU,GAAGE,QAAQ,CAACG,KAAK,IAAIJ,UAAU,GAAGD,UAAU,CAAC;IACvE,OAAO;MAAEiB;IAAQ,CAAC;EACtB,CAAC,EAAE,CAACjB,UAAU,EAAEC,UAAU,CAAC,CAAC;EAE5B,OAAOc,KAAK;AAChB","ignoreList":[]}

package/lib/commonjs/animations/shimmer.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useShimmerProgress = useShimmerProgress;
+exports.useShimmerTransform = useShimmerTransform;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+/**
+ * Drives a 0 -> 1 -> 0 progress value looping indefinitely, intended to be
+ * mapped (by the consuming component) onto a translateX of a gradient
+ * overlay to create the classic "shimmer sweep" effect.
+ *
+ * Returns both the raw shared value-derived animated style (opacity passthrough,
+ * so it can be spread directly) and the progress itself isn't exposed —
+ * components should use `useShimmerTransform` below to get a transform style
+ * sized to their own width.
+ */
+function useShimmerProgress({
+  duration = 1200,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced"
+}) {
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.4 : duration;
+    progress.value = 0;
+    progress.value = (0, _reactNativeReanimated.withDelay)(delay, (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: effectiveDuration,
+      easing: _reactNativeReanimated.Easing.linear
+    }), -1, false));
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  return progress;
+}
+
+/**
+ * Convenience hook: given a measured width, returns an animated style that
+ * translates a highlight overlay (assumed ~60% of `width` wide) from off-screen
+ * left to off-screen right, looping. Use on an absolutely-positioned overlay
+ * View/LinearGradient layered on top of the base skeleton rect.
+ */
+function useShimmerTransform(width, options) {
+  const progress = useShimmerProgress(options);
+  const sweepWidth = Math.max(width, 1) * 0.6;
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const translateX = -sweepWidth + progress.value * (width + sweepWidth);
+    return {
+      transform: [{
+        translateX
+      }]
+    };
+  }, [width, sweepWidth]);
+  return {
+    style,
+    sweepWidth
+  };
+}
+//# sourceMappingURL=shimmer.js.map

package/lib/commonjs/animations/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","useShimmerProgress","duration","delay","disabled","performanceMode","progress","useSharedValue","useEffect","value","effectiveDuration","withDelay","withRepeat","withTiming","easing","Easing","linear","cancelAnimation","useShimmerTransform","width","options","sweepWidth","Math","max","style","useAnimatedStyle","translateX","transform"],"sourceRoot":"../../../src","sources":["animations/shimmer.tsx"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,kBAAkBA,CAAC;EAC/BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG;AACN,CAAC,EAAE;EACf,MAAMC,QAAQ,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIJ,QAAQ,EAAE;MACVE,QAAQ,CAACG,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBL,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEI,QAAQ,CAACG,KAAK,GAAG,CAAC;IAClBH,QAAQ,CAACG,KAAK,GAAG,IAAAE,gCAAS,EACtBR,KAAK,EACL,IAAAS,iCAAU,EACN,IAAAC,iCAAU,EAAC,CAAC,EAAE;MACVX,QAAQ,EAAEQ,iBAAiB;MAC3BI,MAAM,EAAEC,6BAAM,CAACC;IACnB,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACT,IAAAC,sCAAe,EAACX,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACJ,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,OAAOC,QAAQ;AACnB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASY,mBAAmBA,CAACC,KAAa,EAAEC,OAAuB,EAAE;EACxE,MAAMd,QAAQ,GAAGL,kBAAkB,CAACmB,OAAO,CAAC;EAC5C,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACJ,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG;EAE3C,MAAMK,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACjC,MAAMC,UAAU,GAAG,CAACL,UAAU,GAAGf,QAAQ,CAACG,KAAK,IAAIU,KAAK,GAAGE,UAAU,CAAC;IACtE,OAAO;MACHM,SAAS,EAAE,CAAC;QAAED;MAAW,CAAC;IAC9B,CAAC;EACL,CAAC,EAAE,CAACP,KAAK,EAAEE,UAAU,CAAC,CAAC;EAEvB,OAAO;IAAEG,KAAK;IAAEH;EAAW,CAAC;AAChC","ignoreList":[]}

package/lib/commonjs/animations/wave.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWaveTransform = useWaveTransform;
+var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
+/**
+ * Similar to shimmer, but drives a smoother sine-like sweep (ease-in-out
+ * instead of linear) intended for a softer "ripple" look, typically paired
+ * with a wider, lower-contrast gradient than shimmer uses.
+ *
+ * Returns a translateX-based animated style for a given measured width.
+ */
+function useWaveTransform(width, options) {
+  const {
+    duration = 1500,
+    delay = 0,
+    disabled = false,
+    performanceMode = "balanced"
+  } = options;
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.4 : duration;
+    progress.value = 0;
+    progress.value = (0, _reactNativeReanimated.withDelay)(delay, (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: effectiveDuration,
+      easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.sin)
+    }), -1, false));
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const sweepWidth = Math.max(width, 1) * 0.8;
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const translateX = (0, _reactNativeReanimated.interpolate)(progress.value, [0, 1], [-sweepWidth, width + sweepWidth]);
+    return {
+      transform: [{
+        translateX
+      }]
+    };
+  }, [width, sweepWidth]);
+  return {
+    style,
+    sweepWidth
+  };
+}
+//# sourceMappingURL=wave.js.map

package/lib/commonjs/animations/wave.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNativeReanimated","useWaveTransform","width","options","duration","delay","disabled","performanceMode","progress","useSharedValue","useEffect","value","effectiveDuration","withDelay","withRepeat","withTiming","easing","Easing","inOut","sin","cancelAnimation","sweepWidth","Math","max","style","useAnimatedStyle","translateX","interpolate","transform"],"sourceRoot":"../../../src","sources":["animations/wave.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,gBAAgBA,CAACC,KAAa,EAAEC,OAAoB,EAAE;EAClE,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC,KAAK,GAAG,CAAC;IAAEC,QAAQ,GAAG,KAAK;IAAEC,eAAe,GAAG;EAAW,CAAC,GAAGJ,OAAO;EAC9F,MAAMK,QAAQ,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIJ,QAAQ,EAAE;MACVE,QAAQ,CAACG,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBL,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEI,QAAQ,CAACG,KAAK,GAAG,CAAC;IAClBH,QAAQ,CAACG,KAAK,GAAG,IAAAE,gCAAS,EACtBR,KAAK,EACL,IAAAS,iCAAU,EACN,IAAAC,iCAAU,EAAC,CAAC,EAAE;MACVX,QAAQ,EAAEQ,iBAAiB;MAC3BI,MAAM,EAAEC,6BAAM,CAACC,KAAK,CAACD,6BAAM,CAACE,GAAG;IACnC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACT,IAAAC,sCAAe,EAACZ,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACJ,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMc,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACrB,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG;EAE3C,MAAMsB,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACjC,MAAMC,UAAU,GAAG,IAAAC,kCAAW,EAC1BnB,QAAQ,CAACG,KAAK,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAACU,UAAU,EAAEnB,KAAK,GAAGmB,UAAU,CACpC,CAAC;IACD,OAAO;MACHO,SAAS,EAAE,CAAC;QAAEF;MAAW,CAAC;IAC9B,CAAC;EACL,CAAC,EAAE,CAACxB,KAAK,EAAEmB,UAAU,CAAC,CAAC;EAEvB,OAAO;IAAEG,KAAK;IAAEH;EAAW,CAAC;AAChC","ignoreList":[]}

package/lib/commonjs/clone/SkeletonClone.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SkeletonClone;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Skeleton = _interopRequireDefault(require("../components/Skeleton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function renderNode(node, animation, keyPrefix) {
+  const {
+    shape = "rect",
+    width,
+    height,
+    borderRadius,
+    style,
+    children,
+    direction = "column",
+    gap = 8
+  } = node;
+  let resolvedBorderRadius = borderRadius;
+  if (shape === "circle") {
+    const numericSize = typeof width === "number" ? width : typeof height === "number" ? height : 50;
+    resolvedBorderRadius = numericSize / 2;
+  } else if (shape === "pill") {
+    const numericHeight = typeof height === "number" ? height : 24;
+    resolvedBorderRadius = resolvedBorderRadius ?? numericHeight / 2;
+  }
+  if (children && children.length > 0) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      key: keyPrefix,
+      style: [{
+        flexDirection: direction === "row" ? "row" : "column"
+      }, style]
+    }, children.map((child, i) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      key: `${keyPrefix}-${i}`,
+      style: direction === "row" ? {
+        marginLeft: i === 0 ? 0 : gap
+      } : {
+        marginTop: i === 0 ? 0 : gap
+      }
+    }, renderNode(child, animation, `${keyPrefix}-${i}`))));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    width: width ?? "100%",
+    height: height ?? 16,
+    borderRadius: resolvedBorderRadius ?? 4,
+    animation: animation,
+    style: style
+  });
+}
+
+/**
+ * Clones an arbitrary layout tree as skeleton placeholders. Useful when you
+ * have a complex, bespoke screen layout and don't want to hand-place a
+ * Skeleton for every element — instead describe the rough shape once as a
+ * `SkeletonCloneNode` tree (mirroring your real layout's structure) and let
+ * SkeletonClone render matching placeholders.
+ *
+ * @example
+ * <SkeletonClone
+ *   layout={{
+ *     direction: "row",
+ *     gap: 12,
+ *     children: [
+ *       { shape: "circle", width: 48, height: 48 },
+ *       {
+ *         direction: "column",
+ *         gap: 6,
+ *         children: [
+ *           { width: 120, height: 14 },
+ *           { width: 80, height: 12 },
+ *         ],
+ *       },
+ *     ],
+ *   }}
+ * />
+ */
+function SkeletonClone({
+  layout,
+  animation,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: style,
+    testID: testID
+  }, renderNode(layout, animation, "clone-root"));
+}
+//# sourceMappingURL=SkeletonClone.js.map

package/lib/commonjs/clone/SkeletonClone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Skeleton","e","__esModule","default","renderNode","node","animation","keyPrefix","shape","width","height","borderRadius","style","children","direction","gap","resolvedBorderRadius","numericSize","numericHeight","length","createElement","View","key","flexDirection","map","child","i","marginLeft","marginTop","SkeletonClone","layout","testID"],"sourceRoot":"../../../src","sources":["clone/SkeletonClone.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Circle.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Circle;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * A circular skeleton placeholder, commonly used for avatars.
+ *
+ * @example
+ * <Skeleton.Circle size={48} />
+ */
+function Circle({
+  size = 50,
+  ...props
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Skeleton.default, _extends({
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  }, props));
+}
+//# sourceMappingURL=Circle.js.map

package/lib/commonjs/components/Circle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Skeleton","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","Circle","size","props","createElement","width","height","borderRadius"],"sourceRoot":"../../../src","sources":["components/Circle.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAGlC;AACA;AACA;AACA;AACA;AACA;AACe,SAASO,MAAMA,CAAC;EAAEC,IAAI,GAAG,EAAE;EAAE,GAAGC;AAA2B,CAAC,EAAE;EACzE,oBAAOrB,MAAA,CAAAM,OAAA,CAAAgB,aAAA,CAACnB,SAAA,CAAAG,OAAQ,EAAAC,QAAA;IAACgB,KAAK,EAAEH,IAAK;IAACI,MAAM,EAAEJ,IAAK;IAACK,YAAY,EAAEL,IAAI,GAAG;EAAE,GAAKC,KAAK,CAAG,CAAC;AACrF","ignoreList":[]}