@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Feedback/Feedback.Spinner.js

@@ -1,90 +1,418 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect } from "react";
 import { ActivityIndicator, View } from "react-native";
-import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from "react-native-reanimated";
-function DotsLoader({ color, size, animated }) {
-    const dotSize = size === "large" ? 11 : 8;
-    const bounce = size === "large" ? 13 : 9;
-    const dot = {
-        width: dotSize,
-        height: dotSize,
-        borderRadius: dotSize / 2,
-        backgroundColor: color,
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+
+// ─── Dots ─────────────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function DotsLoader(t0) {
+  const $ = _c(25);
+  const {
+    color,
+    size,
+    animated
+  } = t0;
+  const dotSize = size === "large" ? 11 : 8;
+  const bounce = size === "large" ? 13 : 9;
+  const t1 = dotSize / 2;
+  let t2;
+  if ($[0] !== color || $[1] !== dotSize || $[2] !== t1) {
+    t2 = {
+      width: dotSize,
+      height: dotSize,
+      borderRadius: t1,
+      backgroundColor: color
+    };
+    $[0] = color;
+    $[1] = dotSize;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const dot = t2;
+  const y1 = useSharedValue(0);
+  const y2 = useSharedValue(0);
+  const y3 = useSharedValue(0);
+  let t3;
+  let t4;
+  if ($[4] !== animated || $[5] !== bounce || $[6] !== y1 || $[7] !== y2 || $[8] !== y3) {
+    t3 = () => {
+      y1.value = 0;
+      y2.value = 0;
+      y3.value = 0;
+      if (!animated) {
+        return;
+      }
+      const seq = withRepeat(withSequence(withTiming(-bounce, {
+        duration: 280,
+        easing: Easing.out(Easing.quad)
+      }), withTiming(0, {
+        duration: 280,
+        easing: Easing.in(Easing.quad)
+      }), withTiming(0, {
+        duration: 200
+      })), -1, false);
+      y1.value = withDelay(0, seq);
+      y2.value = withDelay(160, seq);
+      y3.value = withDelay(320, seq);
+      return () => {
+        cancelAnimation(y1);
+        cancelAnimation(y2);
+        cancelAnimation(y3);
+      };
+    };
+    t4 = [animated, bounce, y1, y2, y3];
+    $[4] = animated;
+    $[5] = bounce;
+    $[6] = y1;
+    $[7] = y2;
+    $[8] = y3;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t3 = $[9];
+    t4 = $[10];
+  }
+  useEffect(t3, t4);
+  const s1 = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: y1.value
+    }]
+  }));
+  const s2 = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: y2.value
+    }]
+  }));
+  const s3 = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: y3.value
+    }]
+  }));
+  let t5;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      flexDirection: "row",
+      gap: 10,
+      alignItems: "center"
     };
-    const y1 = useSharedValue(0);
-    const y2 = useSharedValue(0);
-    const y3 = useSharedValue(0);
-    useEffect(() => {
-        y1.value = 0;
-        y2.value = 0;
-        y3.value = 0;
-        if (!animated)
-            return;
-        const seq = withRepeat(withSequence(withTiming(-bounce, { duration: 280, easing: Easing.out(Easing.quad) }), withTiming(0, { duration: 280, easing: Easing.in(Easing.quad) }), withTiming(0, { duration: 200 })), -1, false);
-        y1.value = withDelay(0, seq);
-        y2.value = withDelay(160, seq);
-        y3.value = withDelay(320, seq);
-        return () => {
-            cancelAnimation(y1);
-            cancelAnimation(y2);
-            cancelAnimation(y3);
-        };
-    }, [animated, bounce, y1, y2, y3]);
-    const s1 = useAnimatedStyle(() => ({ transform: [{ translateY: y1.value }] }));
-    const s2 = useAnimatedStyle(() => ({ transform: [{ translateY: y2.value }] }));
-    const s3 = useAnimatedStyle(() => ({ transform: [{ translateY: y3.value }] }));
-    return (_jsxs(View, { style: { flexDirection: "row", gap: 10, alignItems: "center" }, children: [_jsx(Animated.View, { style: [dot, s1] }), _jsx(Animated.View, { style: [dot, s2] }), _jsx(Animated.View, { style: [dot, s3] })] }));
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== dot || $[13] !== s1) {
+    t6 = _jsx(Animated.View, {
+      style: [dot, s1]
+    });
+    $[12] = dot;
+    $[13] = s1;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== dot || $[16] !== s2) {
+    t7 = _jsx(Animated.View, {
+      style: [dot, s2]
+    });
+    $[15] = dot;
+    $[16] = s2;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== dot || $[19] !== s3) {
+    t8 = _jsx(Animated.View, {
+      style: [dot, s3]
+    });
+    $[18] = dot;
+    $[19] = s3;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== t6 || $[22] !== t7 || $[23] !== t8) {
+    t9 = _jsxs(View, {
+      style: t5,
+      children: [t6, t7, t8]
+    });
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  return t9;
 }
-function RippleLoader({ color, size, animated }) {
-    const base = size === "large" ? 48 : 32;
-    const scale = useSharedValue(0.2);
-    const opacity = useSharedValue(0.85);
-    useEffect(() => {
-        scale.value = animated ? 0.2 : 1;
-        opacity.value = 0.85;
-        if (!animated)
-            return;
-        scale.value = withRepeat(withTiming(2.6, { duration: 1400, easing: Easing.out(Easing.quad) }), -1, false);
-        opacity.value = withRepeat(withTiming(0, { duration: 1400, easing: Easing.in(Easing.quad) }), -1, false);
-        return () => {
-            cancelAnimation(scale);
-            cancelAnimation(opacity);
-        };
-    }, [animated, scale, opacity]);
-    const animStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: scale.value }],
-        opacity: opacity.value,
-    }));
-    return (_jsx(View, { style: { width: base, height: base, alignItems: "center", justifyContent: "center" }, children: _jsx(Animated.View, { style: [
-                {
-                    width: base,
-                    height: base,
-                    borderRadius: base / 2,
-                    borderWidth: 2.5,
-                    borderColor: color,
-                    position: "absolute",
-                },
-                animStyle,
-            ] }) }));
+
+// ─── Ripple ───────────────────────────────────────────────────────────────────
+
+function RippleLoader(t0) {
+  const $ = _c(17);
+  const {
+    color,
+    size,
+    animated
+  } = t0;
+  const base = size === "large" ? 48 : 32;
+  const scale = useSharedValue(0.2);
+  const opacity = useSharedValue(0.85);
+  let t1;
+  let t2;
+  if ($[0] !== animated || $[1] !== opacity || $[2] !== scale) {
+    t1 = () => {
+      scale.value = animated ? 0.2 : 1;
+      opacity.value = 0.85;
+      if (!animated) {
+        return;
+      }
+      scale.value = withRepeat(withTiming(2.6, {
+        duration: 1400,
+        easing: Easing.out(Easing.quad)
+      }), -1, false);
+      opacity.value = withRepeat(withTiming(0, {
+        duration: 1400,
+        easing: Easing.in(Easing.quad)
+      }), -1, false);
+      return () => {
+        cancelAnimation(scale);
+        cancelAnimation(opacity);
+      };
+    };
+    t2 = [animated, scale, opacity];
+    $[0] = animated;
+    $[1] = opacity;
+    $[2] = scale;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }],
+    opacity: opacity.value
+  }));
+  let t3;
+  if ($[5] !== base) {
+    t3 = {
+      width: base,
+      height: base,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[5] = base;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const t4 = base / 2;
+  let t5;
+  if ($[7] !== base || $[8] !== color || $[9] !== t4) {
+    t5 = {
+      width: base,
+      height: base,
+      borderRadius: t4,
+      borderWidth: 2.5,
+      borderColor: color,
+      position: "absolute"
+    };
+    $[7] = base;
+    $[8] = color;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== animStyle || $[12] !== t5) {
+    t6 = _jsx(Animated.View, {
+      style: [t5, animStyle]
+    });
+    $[11] = animStyle;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t3 || $[15] !== t6) {
+    t7 = _jsx(View, {
+      style: t3,
+      children: t6
+    });
+    $[14] = t3;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  return t7;
 }
-const Spinner = ({ variant = "spinner", size = "large", color, text, style, className, animated = true, accessibilityLabel = text ?? "Cargando", ...props }) => {
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const shouldAnimate = animated && !reducedMotion;
-    const resolvedColor = color ?? theme.primary;
-    const staticSize = size === "large" ? 36 : 20;
-    const indicator = variant === "dots" ? (_jsx(DotsLoader, { animated: shouldAnimate, color: resolvedColor, size: size })) : variant === "ripple" ? (_jsx(RippleLoader, { animated: shouldAnimate, color: resolvedColor, size: size })) : shouldAnimate ? (_jsx(ActivityIndicator, { color: resolvedColor, size: size })) : (_jsx(View, { style: {
-            width: staticSize,
-            height: staticSize,
-            borderRadius: staticSize / 2,
-            borderWidth: 2,
-            borderColor: resolvedColor,
-            borderTopColor: "transparent",
-        } }));
-    return (_jsxs(View, { ...props, accessibilityLabel: accessibilityLabel, accessibilityRole: "progressbar", accessibilityState: { busy: true }, accessible: true, className: cn("items-center justify-center", className), style: style, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: indicator }), text && (_jsx(Typography.Text, { className: "mt-2.5 text-base", variant: "body", children: text }))] }));
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+const Spinner = t0 => {
+  const $ = _c(30);
+  let className;
+  let color;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let text;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      size: t2,
+      color,
+      text,
+      style,
+      className,
+      animated: t3,
+      accessibilityLabel: t4,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = color;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = text;
+  } else {
+    className = $[1];
+    color = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+    text = $[9];
+  }
+  const variant = t1 === undefined ? "spinner" : t1;
+  const size = t2 === undefined ? "large" : t2;
+  const animated = t3 === undefined ? true : t3;
+  const accessibilityLabel = t4 === undefined ? text ?? "Cargando" : t4;
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const shouldAnimate = animated && !reducedMotion;
+  const resolvedColor = color ?? theme.primary;
+  const staticSize = size === "large" ? 36 : 20;
+  let t5;
+  if ($[10] !== resolvedColor || $[11] !== shouldAnimate || $[12] !== size || $[13] !== staticSize || $[14] !== variant) {
+    t5 = variant === "dots" ? _jsx(DotsLoader, {
+      animated: shouldAnimate,
+      color: resolvedColor,
+      size: size
+    }) : variant === "ripple" ? _jsx(RippleLoader, {
+      animated: shouldAnimate,
+      color: resolvedColor,
+      size: size
+    }) : shouldAnimate ? _jsx(ActivityIndicator, {
+      color: resolvedColor,
+      size: size
+    }) : _jsx(View, {
+      style: {
+        width: staticSize,
+        height: staticSize,
+        borderRadius: staticSize / 2,
+        borderWidth: 2,
+        borderColor: resolvedColor,
+        borderTopColor: "transparent"
+      }
+    });
+    $[10] = resolvedColor;
+    $[11] = shouldAnimate;
+    $[12] = size;
+    $[13] = staticSize;
+    $[14] = variant;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const indicator = t5;
+  let t6;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      busy: true
+    };
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== className) {
+    t7 = cn("items-center justify-center", className);
+    $[17] = className;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== indicator) {
+    t8 = _jsx(View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: indicator
+    });
+    $[19] = indicator;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== text) {
+    t9 = text && _jsx(Typography.Text, {
+      className: "mt-2.5",
+      variant: "body",
+      children: text
+    });
+    $[21] = text;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== accessibilityLabel || $[24] !== props || $[25] !== style || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+    t10 = _jsxs(View, {
+      ...props,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "progressbar",
+      accessibilityState: t6,
+      accessible: true,
+      className: t7,
+      style: style,
+      children: [t8, t9]
+    });
+    $[23] = accessibilityLabel;
+    $[24] = props;
+    $[25] = style;
+    $[26] = t7;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  return t10;
 };
 export default Spinner;