@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/skeleton-group/skeleton-group.md

@@ -0,0 +1,247 @@
+# SkeletonGroup
+
+Coordinates multiple skeleton loading placeholders with centralized animation control.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { SkeletonGroup } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The SkeletonGroup component manages multiple skeleton items with shared loading state and animation.
+
+```tsx
+<SkeletonGroup isLoading={isLoading}>
+  <SkeletonGroup.Item className="h-4 w-full rounded-md" />
+  <SkeletonGroup.Item className="h-4 w-3/4 rounded-md" />
+  <SkeletonGroup.Item className="h-4 w-1/2 rounded-md" />
+</SkeletonGroup>
+```
+
+### With Container Layout
+
+Use className on the group to control layout of skeleton items.
+
+```tsx
+<SkeletonGroup isLoading={isLoading} className="flex-row items-center gap-3">
+  <SkeletonGroup.Item className="h-12 w-12 rounded-lg" />
+  <View className="flex-1 gap-1.5">
+    <SkeletonGroup.Item className="h-4 w-full rounded-md" />
+    <SkeletonGroup.Item className="h-3 w-2/3 rounded-md" />
+  </View>
+</SkeletonGroup>
+```
+
+### With isSkeletonOnly for Pure Skeleton Layouts
+
+Use `isSkeletonOnly` when the group contains only skeleton placeholders with layout wrappers (like View) that have no content to render in the loaded state. This prop hides the entire group when `isLoading` is false, preventing empty containers from affecting your layout.
+
+```tsx
+<SkeletonGroup
+  isLoading={isLoading}
+  isSkeletonOnly // Hides entire group when isLoading is false
+  className="flex-row items-center gap-3"
+>
+  <SkeletonGroup.Item className="h-12 w-12 rounded-lg" />
+  {/* This View is only for layout, no content */}
+  <View className="flex-1 gap-1.5">
+    <SkeletonGroup.Item className="h-4 w-full rounded-md" />
+    <SkeletonGroup.Item className="h-3 w-2/3 rounded-md" />
+  </View>
+</SkeletonGroup>
+```
+
+### With Animation Variants
+
+Control animation style for all items in the group.
+
+```tsx
+<SkeletonGroup isLoading={isLoading} variant="pulse">
+  <SkeletonGroup.Item className="h-10 w-10 rounded-full" />
+  <SkeletonGroup.Item className="h-4 w-32 rounded-md" />
+  <SkeletonGroup.Item className="h-3 w-24 rounded-md" />
+</SkeletonGroup>
+```
+
+### With Custom Animation Configuration
+
+Configure shimmer or pulse animations for the entire group.
+
+```tsx
+<SkeletonGroup
+  isLoading={isLoading}
+  variant="shimmer"
+  animation={{
+    shimmer: {
+      duration: 2000,
+      highlightColor: 'rgba(59, 130, 246, 0.3)',
+    },
+  }}
+>
+  <SkeletonGroup.Item className="h-16 w-full rounded-lg" />
+  <SkeletonGroup.Item className="h-4 w-3/4 rounded-md" />
+</SkeletonGroup>
+```
+
+### With Enter/Exit Animations
+
+Apply Reanimated transitions when the group appears or disappears.
+
+```tsx
+<SkeletonGroup
+  entering={FadeInLeft}
+  exiting={FadeOutRight}
+  isLoading={isLoading}
+  className="w-full gap-2"
+>
+  <SkeletonGroup.Item className="h-4 w-full rounded-md" />
+  <SkeletonGroup.Item className="h-4 w-3/4 rounded-md" />
+</SkeletonGroup>
+```
+
+## Example
+
+```tsx
+import { Card, SkeletonGroup, Avatar } from 'heroui-native';
+import { useState } from 'react';
+import { Text, View, Image } from 'react-native';
+
+export default function SkeletonGroupExample() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <SkeletonGroup isLoading={isLoading}>
+      <Card className="p-4">
+        <Card.Header>
+          <View className="flex-row items-center gap-3 mb-4">
+            <SkeletonGroup.Item className="h-10 w-10 rounded-full">
+              <Avatar size="sm" alt="Avatar">
+                <Avatar.Image
+                  source={{ uri: 'https://i.pravatar.cc/150?img=4' }}
+                />
+                <Avatar.Fallback />
+              </Avatar>
+            </SkeletonGroup.Item>
+
+            <View className="flex-1 gap-1">
+              <SkeletonGroup.Item className="h-3 w-32 rounded-md">
+                <Text className="font-semibold text-foreground">John Doe</Text>
+              </SkeletonGroup.Item>
+              <SkeletonGroup.Item className="h-3 w-24 rounded-md">
+                <Text className="text-sm text-muted">@johndoe</Text>
+              </SkeletonGroup.Item>
+            </View>
+          </View>
+
+          <View className="mb-4 gap-1.5">
+            <SkeletonGroup.Item className="h-4 w-full rounded-md">
+              <Text className="text-base text-foreground">
+                This is the first line of the post content.
+              </Text>
+            </SkeletonGroup.Item>
+            <SkeletonGroup.Item className="h-4 w-full rounded-md">
+              <Text className="text-base text-foreground">
+                Second line with more interesting content to read.
+              </Text>
+            </SkeletonGroup.Item>
+            <SkeletonGroup.Item className="h-4 w-2/3 rounded-md">
+              <Text className="text-base text-foreground">
+                Last line is shorter.
+              </Text>
+            </SkeletonGroup.Item>
+          </View>
+        </Card.Header>
+
+        <SkeletonGroup.Item className="h-48 w-full rounded-lg">
+          <View className="h-48 bg-surface-tertiary rounded-lg overflow-hidden">
+            <Image
+              source={{
+                uri: 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/backgrounds/cards/car1.jpg',
+              }}
+              className="h-full w-full"
+            />
+          </View>
+        </SkeletonGroup.Item>
+      </Card>
+    </SkeletonGroup>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<SkeletonGroup>
+  <SkeletonGroup.Item />
+</SkeletonGroup>
+```
+
+- **SkeletonGroup**: Root container that provides centralized control for all skeleton items
+- **SkeletonGroup.Item**: Individual skeleton item that inherits props from the parent group
+
+## API Reference
+
+### SkeletonGroup
+
+| prop                    | type                             | default     | description                                                            |
+| ----------------------- | -------------------------------- | ----------- | ---------------------------------------------------------------------- |
+| `children`              | `React.ReactNode`                | -           | SkeletonGroup.Item components and layout elements                      |
+| `isLoading`             | `boolean`                        | `true`      | Whether the skeleton items are currently loading                       |
+| `isSkeletonOnly`        | `boolean`                        | `false`     | Hides entire group when isLoading is false (for skeleton-only layouts) |
+| `variant`               | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation variant for all items in the group                           |
+| `animation`             | `SkeletonRootAnimation`          | -           | Animation configuration                                                |
+| `className`             | `string`                         | -           | Additional CSS classes for the group container                         |
+| `style`                 | `StyleProp<ViewStyle>`           | -           | Custom styles for the group container                                  |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>`       | -           | All Reanimated Animated.View props are supported                       |
+
+#### SkeletonRootAnimation
+
+Animation configuration for SkeletonGroup component. Can be:
+
+- `false` or `"disabled"`: Disable only root animations
+- `"disable-all"`: Disable all animations including children
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                     | type                                    | default                     | description                            |
+| ------------------------ | --------------------------------------- | --------------------------- | -------------------------------------- |
+| `state`                  | `'disabled' \| 'disable-all' \| boolean` | -                          | Disable animations while customizing properties |
+| `entering.value`         | `EntryOrExitLayoutType`                 | `FadeIn`                    | Custom entering animation              |
+| `exiting.value`          | `EntryOrExitLayoutType`                 | `FadeOut`                   | Custom exiting animation               |
+| `shimmer.duration`       | `number`                                | `1500`                      | Animation duration in milliseconds     |
+| `shimmer.speed`          | `number`                                | `1`                         | Speed multiplier for the animation     |
+| `shimmer.highlightColor` | `string`                                | -                           | Highlight color for the shimmer effect |
+| `shimmer.easing`         | `EasingFunction`                        | `Easing.linear`             | Easing function for the animation      |
+| `pulse.duration`         | `number`                                | `1000`                      | Animation duration in milliseconds     |
+| `pulse.minOpacity`       | `number`                                | `0.5`                       | Minimum opacity value                  |
+| `pulse.maxOpacity`       | `number`                                | `1`                         | Maximum opacity value                  |
+| `pulse.easing`           | `EasingFunction`        | `Easing.inOut(Easing.ease)` | Easing function for the animation      |
+
+### SkeletonGroup.Item
+
+| prop                    | type                             | default   | description                                                         |
+| ----------------------- | -------------------------------- | --------- | ------------------------------------------------------------------- |
+| `children`              | `React.ReactNode`                | -         | Content to show when not loading                                    |
+| `isLoading`             | `boolean`                        | inherited | Whether the skeleton is currently loading (overrides group setting) |
+| `variant`               | `'shimmer' \| 'pulse' \| 'none'` | inherited | Animation variant (overrides group setting)                         |
+| `animation`             | `SkeletonRootAnimation`          | inherited | Animation configuration (overrides group setting)                   |
+| `className`             | `string`                         | -         | Additional CSS classes for styling the item                         |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>`       | -         | All Reanimated Animated.View props are supported                    |
+
+## Important Notes
+
+### Props Inheritance
+
+SkeletonGroup.Item components inherit all animation-related props from their parent SkeletonGroup:
+
+- `isLoading`
+- `variant`
+- `animation`
+
+Individual items can override any inherited prop by providing their own value.

package/lib/module/components/skeleton-group/skeleton-group.styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { tv } from 'tailwind-variants';
+
+/**
+ * SkeletonGroup component styles using tailwind-variants
+ */
+export const skeletonGroupStyles = tv({
+  base: ''
+});
+//# sourceMappingURL=skeleton-group.styles.js.map

package/lib/module/components/skeleton-group/skeleton-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tv","skeletonGroupStyles","base"],"sourceRoot":"../../../../src","sources":["components/skeleton-group/skeleton-group.styles.ts"],"mappings":";;AAAA,SAASA,EAAE,QAAQ,mBAAmB;;AAEtC;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGD,EAAE,CAAC;EACpCE,IAAI,EAAE;AACR,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/skeleton-group/skeleton-group.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=skeleton-group.types.js.map

package/lib/module/components/skeleton-group/skeleton-group.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/skeleton-group/skeleton-group.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/spinner/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as Spinner } from "./spinner.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Spinner"],"sourceRoot":"../../../../src","sources":["components/spinner/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,cAAW","ignoreList":[]}

package/lib/module/components/spinner/spinner-icon.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import Svg, { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
+import { DISPLAY_NAME } from "./spinner.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SpinnerIcon(props) {
+  const {
+    width = 24,
+    height = 24,
+    color = 'currentColor'
+  } = props;
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    children: [/*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsxs(LinearGradient, {
+        id: "mingcuteLoadingFill0",
+        x1: "50%",
+        x2: "50%",
+        y1: "5.271%",
+        y2: "91.793%",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: color
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: color,
+          stopOpacity: 0.55
+        })]
+      }), /*#__PURE__*/_jsxs(LinearGradient, {
+        id: "mingcuteLoadingFill1",
+        x1: "50%",
+        x2: "50%",
+        y1: "15.24%",
+        y2: "87.15%",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: color,
+          stopOpacity: 0
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: color,
+          stopOpacity: 0.55
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(G, {
+      fill: "none",
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+      }), /*#__PURE__*/_jsx(Path, {
+        d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
+        fill: "url(#mingcuteLoadingFill0)",
+        transform: "translate(1.5 1.625)"
+      }), /*#__PURE__*/_jsx(Path, {
+        d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
+        fill: "url(#mingcuteLoadingFill1)",
+        transform: "translate(1.5 1.625)"
+      })]
+    })]
+  });
+}
+SpinnerIcon.displayName = DISPLAY_NAME.ICON;
+//# sourceMappingURL=spinner-icon.js.map

package/lib/module/components/spinner/spinner-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Svg","Defs","G","LinearGradient","Path","Stop","DISPLAY_NAME","jsx","_jsx","jsxs","_jsxs","SpinnerIcon","props","width","height","color","viewBox","children","id","x1","x2","y1","y2","offset","stopColor","stopOpacity","fill","d","transform","displayName","ICON"],"sourceRoot":"../../../../src","sources":["components/spinner/spinner-icon.tsx"],"mappings":";;AAAA,OAAOA,GAAG,IAAIC,IAAI,EAAEC,CAAC,EAAEC,cAAc,EAAEC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC3E,SAASC,YAAY,QAAQ,wBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnD,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAM;IAAEC,KAAK,GAAG,EAAE;IAAEC,MAAM,GAAG,EAAE;IAAEC,KAAK,GAAG;EAAe,CAAC,GAAGH,KAAK;EAEjE,oBACEF,KAAA,CAACV,GAAG;IAACa,KAAK,EAAEA,KAAM;IAACC,MAAM,EAAEA,MAAO;IAACE,OAAO,EAAC,WAAW;IAAAC,QAAA,gBACpDP,KAAA,CAACT,IAAI;MAAAgB,QAAA,gBACHP,KAAA,CAACP,cAAc;QACbe,EAAE,EAAC,sBAAsB;QACzBC,EAAE,EAAC,KAAK;QACRC,EAAE,EAAC,KAAK;QACRC,EAAE,EAAC,QAAQ;QACXC,EAAE,EAAC,SAAS;QAAAL,QAAA,gBAEZT,IAAA,CAACH,IAAI;UAACkB,MAAM,EAAC,IAAI;UAACC,SAAS,EAAET;QAAM,CAAE,CAAC,eACtCP,IAAA,CAACH,IAAI;UAACkB,MAAM,EAAC,MAAM;UAACC,SAAS,EAAET,KAAM;UAACU,WAAW,EAAE;QAAK,CAAE,CAAC;MAAA,CAC7C,CAAC,eACjBf,KAAA,CAACP,cAAc;QACbe,EAAE,EAAC,sBAAsB;QACzBC,EAAE,EAAC,KAAK;QACRC,EAAE,EAAC,KAAK;QACRC,EAAE,EAAC,QAAQ;QACXC,EAAE,EAAC,QAAQ;QAAAL,QAAA,gBAEXT,IAAA,CAACH,IAAI;UAACkB,MAAM,EAAC,IAAI;UAACC,SAAS,EAAET,KAAM;UAACU,WAAW,EAAE;QAAE,CAAE,CAAC,eACtDjB,IAAA,CAACH,IAAI;UAACkB,MAAM,EAAC,MAAM;UAACC,SAAS,EAAET,KAAM;UAACU,WAAW,EAAE;QAAK,CAAE,CAAC;MAAA,CAC7C,CAAC;IAAA,CACb,CAAC,eACPf,KAAA,CAACR,CAAC;MAACwB,IAAI,EAAC,MAAM;MAAAT,QAAA,gBACZT,IAAA,CAACJ,IAAI;QAACuB,CAAC,EAAC;MAA4e,CAAE,CAAC,eACvfnB,IAAA,CAACJ,IAAI;QACHuB,CAAC,EAAC,2IAA2I;QAC7ID,IAAI,EAAC,4BAA4B;QACjCE,SAAS,EAAC;MAAsB,CACjC,CAAC,eACFpB,IAAA,CAACJ,IAAI;QACHuB,CAAC,EAAC,sJAAsJ;QACxJD,IAAI,EAAC,4BAA4B;QACjCE,SAAS,EAAC;MAAsB,CACjC,CAAC;IAAA,CACD,CAAC;EAAA,CACD,CAAC;AAEV;AAEAjB,WAAW,CAACkB,WAAW,GAAGvB,YAAY,CAACwB,IAAI","ignoreList":[]}

package/lib/module/components/spinner/spinner.animation.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import { useEffect, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { useAnimationSettings } from "../../helpers/contexts/index.js";
+import { useCombinedAnimationDisabledState } from "../../helpers/hooks/index.js";
+import { getAnimationState, getAnimationValueProperty, getIsAnimationDisabledValue, getRootAnimationState } from "../../helpers/utils/animation.js";
+import { DEFAULT_ROTATION_DURATION, DEFAULT_SPINNER_INDICATOR_ENTERING, DEFAULT_SPINNER_INDICATOR_EXITING } from "./spinner.constants.js";
+// --------------------------------------------------
+
+/**
+ * Animation hook for Spinner root component
+ * Handles entering and exiting animations for the spinner container
+ */
+export function useSpinnerRootAnimation(options) {
+  const {
+    animation
+  } = options;
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getRootAnimationState(animation);
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: DEFAULT_SPINNER_INDICATOR_ENTERING
+  });
+
+  // Exiting animation
+  const exitingValue = getAnimationValueProperty({
+    animationValue: animationConfig?.exiting,
+    property: 'value',
+    defaultValue: DEFAULT_SPINNER_INDICATOR_EXITING
+  });
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+    isAllAnimationsDisabled
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Spinner Indicator component
+ * Handles rotation animation for the spinner indicator
+ */
+export function useSpinnerIndicatorAnimation(options) {
+  const {
+    animation,
+    isLoading
+  } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Rotation animation configuration
+  const rotationSpeed = getAnimationValueProperty({
+    animationValue: animationConfig?.rotation,
+    property: 'speed',
+    defaultValue: 1.1
+  });
+  const rotationEasing = getAnimationValueProperty({
+    animationValue: animationConfig?.rotation,
+    property: 'easing',
+    defaultValue: Easing.linear
+  });
+  const rotationTimingConfig = useMemo(() => {
+    return {
+      duration: DEFAULT_ROTATION_DURATION / rotationSpeed,
+      easing: rotationEasing
+    };
+  }, [rotationSpeed, rotationEasing]);
+  const rotation = useSharedValue(0);
+  useEffect(() => {
+    if (isLoading) {
+      if (isAnimationDisabledValue) {
+        rotation.set(0);
+      } else {
+        rotation.set(withRepeat(withSequence(withTiming(360, rotationTimingConfig)), -1, false));
+      }
+    } else {
+      rotation.set(withTiming(0, {
+        duration: 300
+      }));
+    }
+    return () => {
+      cancelAnimation(rotation);
+    };
+  }, [isLoading, isAnimationDisabledValue, rotation, rotationTimingConfig]);
+  const rContainerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        rotate: `${rotation.get()}deg`
+      }]
+    };
+  });
+  return {
+    rContainerStyle
+  };
+}
+//# sourceMappingURL=spinner.animation.js.map

package/lib/module/components/spinner/spinner.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","cancelAnimation","Easing","useAnimatedStyle","useSharedValue","withRepeat","withSequence","withTiming","useAnimationSettings","useCombinedAnimationDisabledState","getAnimationState","getAnimationValueProperty","getIsAnimationDisabledValue","getRootAnimationState","DEFAULT_ROTATION_DURATION","DEFAULT_SPINNER_INDICATOR_ENTERING","DEFAULT_SPINNER_INDICATOR_EXITING","useSpinnerRootAnimation","options","animation","animationConfig","isAnimationDisabled","isAllAnimationsDisabled","isAnimationDisabledValue","enteringValue","animationValue","entering","property","defaultValue","exitingValue","exiting","undefined","useSpinnerIndicatorAnimation","isLoading","rotationSpeed","rotation","rotationEasing","linear","rotationTimingConfig","duration","easing","set","rContainerStyle","transform","rotate","get"],"sourceRoot":"../../../../src","sources":["components/spinner/spinner.animation.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/spinner/spinner.constants.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { Easing, FadeIn, FadeOut } from 'react-native-reanimated';
+
+/**
+ * Display names for Spinner components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Spinner.Root',
+  INDICATOR: 'HeroUINative.Spinner.Indicator',
+  ICON: 'HeroUINative.Spinner.Icon'
+};
+
+/**
+ * Default animation duration for spinner rotation (in milliseconds)
+ */
+export const DEFAULT_ROTATION_DURATION = 1000;
+
+/**
+ * Size mappings for spinner icon dimensions
+ */
+export const SPINNER_SIZE_MAP = {
+  sm: 16,
+  md: 24,
+  lg: 32
+};
+
+/**
+ * Default entering animation configuration for spinner indicator
+ */
+export const DEFAULT_SPINNER_INDICATOR_ENTERING = FadeIn.duration(200).easing(Easing.out(Easing.ease));
+
+/**
+ * Default exiting animation configuration for spinner indicator
+ */
+export const DEFAULT_SPINNER_INDICATOR_EXITING = FadeOut.duration(100);
+//# sourceMappingURL=spinner.constants.js.map

package/lib/module/components/spinner/spinner.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Easing","FadeIn","FadeOut","DISPLAY_NAME","ROOT","INDICATOR","ICON","DEFAULT_ROTATION_DURATION","SPINNER_SIZE_MAP","sm","md","lg","DEFAULT_SPINNER_INDICATOR_ENTERING","duration","easing","out","ease","DEFAULT_SPINNER_INDICATOR_EXITING"],"sourceRoot":"../../../../src","sources":["components/spinner/spinner.constants.ts"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,yBAAyB;;AAEjE;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1BC,IAAI,EAAE,2BAA2B;EACjCC,SAAS,EAAE,gCAAgC;EAC3CC,IAAI,EAAE;AACR,CAAU;;AAEV;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAG,IAAI;;AAE7C;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE;AACN,CAAU;;AAEV;AACA;AACA;AACA,OAAO,MAAMC,kCAAkC,GAAGX,MAAM,CAACY,QAAQ,CAAC,GAAG,CAAC,CAACC,MAAM,CAC3Ed,MAAM,CAACe,GAAG,CAACf,MAAM,CAACgB,IAAI,CACxB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,iCAAiC,GAAGf,OAAO,CAACW,QAAQ,CAAC,GAAG,CAAC","ignoreList":[]}

package/lib/module/components/spinner/spinner.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import { useThemeColor } from "../../helpers/theme/index.js";
+import { createContext, getElementWithDefault } from "../../helpers/utils/index.js";
+import * as ActivityIndicatorPrimitives from "../../primitives/activity-indicator/index.js";
+import { SpinnerIcon } from "./spinner-icon.js";
+import { useSpinnerIndicatorAnimation, useSpinnerRootAnimation } from "./spinner.animation.js";
+import { DISPLAY_NAME, SPINNER_SIZE_MAP } from "./spinner.constants.js";
+import spinnerStyles from "./spinner.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedRoot = Animated.createAnimatedComponent(ActivityIndicatorPrimitives.Root);
+const AnimatedIndicator = Animated.createAnimatedComponent(ActivityIndicatorPrimitives.Indicator);
+const [SpinnerProvider, useSpinnerContext] = createContext({
+  name: 'SpinnerContext'
+});
+const SpinnerRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    size = 'md',
+    color = 'default',
+    isLoading = true,
+    className,
+    animation,
+    ...restProps
+  } = props;
+  const tvStyles = spinnerStyles.root({
+    size,
+    className
+  });
+  const {
+    entering,
+    exiting,
+    isAllAnimationsDisabled
+  } = useSpinnerRootAnimation({
+    animation
+  });
+  const indicatorElement = useMemo(() => getElementWithDefault(children, DISPLAY_NAME.INDICATOR, /*#__PURE__*/_jsx(SpinnerIndicator, {})), [children]);
+  const contextValue = useMemo(() => ({
+    size,
+    color,
+    isLoading
+  }), [size, color, isLoading]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(SpinnerProvider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(AnimatedRoot, {
+        ref: ref,
+        entering: entering,
+        exiting: exiting,
+        isLoading: isLoading,
+        className: tvStyles,
+        ...restProps,
+        children: children || indicatorElement
+      })
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const SpinnerIndicator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    iconProps,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+  const {
+    size,
+    color,
+    isLoading
+  } = useSpinnerContext();
+  const [themeColorAccent, themeColorSuccess, themeColorWarning, themeColorDanger] = useThemeColor(['accent', 'success', 'warning', 'danger']);
+  const indicatorClassName = spinnerStyles.indicator({
+    className
+  });
+  const iconSize = SPINNER_SIZE_MAP[size];
+  const colorMap = {
+    default: themeColorAccent,
+    success: themeColorSuccess,
+    warning: themeColorWarning,
+    danger: themeColorDanger
+  };
+  const iconColor = colorMap[color] || color;
+  const {
+    rContainerStyle
+  } = useSpinnerIndicatorAnimation({
+    animation,
+    isLoading
+  });
+  const indicatorStyle = isAnimatedStyleActive ? [rContainerStyle, style] : style;
+  if (!isLoading) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(AnimatedIndicator, {
+    ref: ref,
+    className: indicatorClassName,
+    style: indicatorStyle,
+    ...restProps,
+    children: children || /*#__PURE__*/_jsx(SpinnerIcon, {
+      width: iconProps?.width ?? iconSize,
+      height: iconProps?.height ?? iconSize,
+      color: iconProps?.color ?? iconColor
+    })
+  });
+});
+
+// --------------------------------------------------
+
+SpinnerRoot.displayName = DISPLAY_NAME.ROOT;
+SpinnerIndicator.displayName = DISPLAY_NAME.INDICATOR;
+
+/**
+ * Compound Spinner component with sub-components
+ *
+ * @component Spinner - Main container that controls loading state, size, and color.
+ * Renders a default animated indicator if no children provided.
+ *
+ * @component Spinner.Indicator - Optional sub-component for customizing animation configuration
+ * and icon appearance. Accepts custom children to replace the default icon.
+ * When omitted, Spinner uses a default indicator with standard animation settings.
+ *
+ * Props flow from Spinner to Indicator via context (size, color, isLoading).
+ * The indicator only renders when isLoading is true.
+ *
+ * @see Full documentation: https://heroui.com/components/spinner
+ */
+const CompoundSpinner = Object.assign(SpinnerRoot, {
+  /** @optional Customize animation configuration and icon appearance */
+  Indicator: SpinnerIndicator
+});
+export default CompoundSpinner;
+//# sourceMappingURL=spinner.js.map