@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Feedback/Feedback.Progress.js

@@ -1,47 +1,205 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { motion } from "../tokens/motion.js";
 import { normalizeProgress } from "../utils/progress.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { useEffect, useRef } from "react";
-import { Animated, Easing, View, } from "react-native";
-function Progress({ value = 0, indeterminate = false, height = 6, className, animated = true, indicatorClassName, indicatorStyle, style, ...props }) {
-    const reducedMotion = useReducedMotion();
-    const shouldAnimate = indeterminate && animated && !reducedMotion;
-    const progress = indeterminate ? 0 : normalizeProgress(value);
-    // eslint-disable-next-line react-hooks/refs
-    const translate = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        translate.setValue(0);
-        if (!shouldAnimate)
-            return;
-        const loop = Animated.loop(Animated.timing(translate, {
-            toValue: 1,
-            duration: motion.duration.slower,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-            isInteraction: false,
-        }));
-        loop.start();
-        return () => loop.stop();
-    }, [shouldAnimate, translate]);
-    return (_jsx(View, { ...props, accessibilityRole: "progressbar", accessibilityState: { busy: indeterminate }, accessibilityValue: indeterminate ? undefined : { now: Math.round(progress * 100), min: 0, max: 100 }, accessible: true, className: cn("w-full overflow-hidden rounded-full bg-bg-muted", className), style: [{ height }, style], children: indeterminate ? (_jsx(Animated.View, { className: cn("h-full rounded-full bg-primary", indicatorClassName), style: [
-                {
-                    width: "40%",
-                    marginLeft: shouldAnimate ? 0 : "30%",
-                    transform: shouldAnimate
-                        ? [
-                            {
-                                // eslint-disable-next-line react-hooks/refs
-                                translateX: translate.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: ["-40%", "250%"],
-                                }),
-                            },
-                        ]
-                        : [],
-                },
-                indicatorStyle,
-            ] })) : (_jsx(View, { className: cn("h-full rounded-full bg-primary", indicatorClassName), style: [{ width: `${progress * 100}%` }, indicatorStyle] })) }));
+import { useEffect, useState } from "react";
+import { Animated, Easing, View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Progress(t0) {
+  const $ = _c(43);
+  let className;
+  let indicatorClassName;
+  let indicatorStyle;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    ({
+      value: t1,
+      indeterminate: t2,
+      height: t3,
+      className,
+      animated: t4,
+      indicatorClassName,
+      indicatorStyle,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = indicatorClassName;
+    $[3] = indicatorStyle;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    className = $[1];
+    indicatorClassName = $[2];
+    indicatorStyle = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+  }
+  const value = t1 === undefined ? 0 : t1;
+  const indeterminate = t2 === undefined ? false : t2;
+  const height = t3 === undefined ? 6 : t3;
+  const animated = t4 === undefined ? true : t4;
+  const reducedMotion = useReducedMotion();
+  const shouldAnimate = indeterminate && animated && !reducedMotion;
+  let t5;
+  if ($[10] !== indeterminate || $[11] !== value) {
+    t5 = indeterminate ? 0 : normalizeProgress(value);
+    $[10] = indeterminate;
+    $[11] = value;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const progress = t5;
+  const [translate] = useState(_temp);
+  let t6;
+  let t7;
+  if ($[13] !== shouldAnimate || $[14] !== translate) {
+    t6 = () => {
+      translate.setValue(0);
+      if (!shouldAnimate) {
+        return;
+      }
+      const loop = Animated.loop(Animated.timing(translate, {
+        toValue: 1,
+        duration: motion.duration.slower,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+        isInteraction: false
+      }));
+      loop.start();
+      return () => loop.stop();
+    };
+    t7 = [shouldAnimate, translate];
+    $[13] = shouldAnimate;
+    $[14] = translate;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t6 = $[15];
+    t7 = $[16];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[17] !== indeterminate) {
+    t8 = {
+      busy: indeterminate
+    };
+    $[17] = indeterminate;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== indeterminate || $[20] !== progress) {
+    t9 = indeterminate ? undefined : {
+      now: Math.round(progress * 100),
+      min: 0,
+      max: 100
+    };
+    $[19] = indeterminate;
+    $[20] = progress;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== className) {
+    t10 = cn("w-full overflow-hidden rounded-full bg-bg-muted", className);
+    $[22] = className;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== height) {
+    t11 = {
+      height
+    };
+    $[24] = height;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== style || $[27] !== t11) {
+    t12 = [t11, style];
+    $[26] = style;
+    $[27] = t11;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  let t13;
+  if ($[29] !== indeterminate || $[30] !== indicatorClassName || $[31] !== indicatorStyle || $[32] !== progress || $[33] !== shouldAnimate || $[34] !== translate) {
+    t13 = indeterminate ? _jsx(Animated.View, {
+      className: cn("h-full rounded-full bg-primary", indicatorClassName),
+      style: [{
+        width: "40%",
+        marginLeft: shouldAnimate ? 0 : "30%",
+        transform: shouldAnimate ? [{
+          translateX: translate.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["-40%", "250%"]
+          })
+        }] : []
+      }, indicatorStyle]
+    }) : _jsx(View, {
+      className: cn("h-full rounded-full bg-primary", indicatorClassName),
+      style: [{
+        width: `${progress * 100}%`
+      }, indicatorStyle]
+    });
+    $[29] = indeterminate;
+    $[30] = indicatorClassName;
+    $[31] = indicatorStyle;
+    $[32] = progress;
+    $[33] = shouldAnimate;
+    $[34] = translate;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  let t14;
+  if ($[36] !== props || $[37] !== t10 || $[38] !== t12 || $[39] !== t13 || $[40] !== t8 || $[41] !== t9) {
+    t14 = _jsx(View, {
+      ...props,
+      accessibilityRole: "progressbar",
+      accessibilityState: t8,
+      accessibilityValue: t9,
+      accessible: true,
+      className: t10,
+      style: t12,
+      children: t13
+    });
+    $[36] = props;
+    $[37] = t10;
+    $[38] = t12;
+    $[39] = t13;
+    $[40] = t8;
+    $[41] = t9;
+    $[42] = t14;
+  } else {
+    t14 = $[42];
+  }
+  return t14;
+}
+function _temp() {
+  return new Animated.Value(0);
 }
 export default Progress;

package/dist/Feedback/Feedback.ProgressCircle.js

@@ -1,18 +1,190 @@
-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 { normalizeProgress } from "../utils/progress.js";
 import { View } from "react-native";
 import Svg, { Circle } from "react-native-svg";
-function ProgressCircle({ value = 0, size = 64, strokeWidth = 6, color, trackColor, children, style, ...props }) {
-    const theme = useTheme();
-    const progress = normalizeProgress(value);
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference * (1 - progress);
-    const center = size / 2;
-    return (_jsxs(View, { ...props, accessibilityRole: "progressbar", accessibilityValue: { now: Math.round(progress * 100), min: 0, max: 100 }, accessible: true, style: [
-            { width: size, height: size, alignItems: "center", justifyContent: "center" },
-            style,
-        ], children: [_jsxs(Svg, { height: size, style: { position: "absolute" }, width: size, children: [_jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: trackColor ?? theme.bg.muted, strokeWidth: strokeWidth }), _jsx(Circle, { cx: center, cy: center, fill: "none", r: radius, stroke: color ?? theme.primary, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: offset, strokeLinecap: "round", strokeWidth: strokeWidth, transform: `rotate(-90 ${center} ${center})` })] }), children] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function ProgressCircle(t0) {
+  const $ = _c(42);
+  let children;
+  let color;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let trackColor;
+  if ($[0] !== t0) {
+    ({
+      value: t1,
+      size: t2,
+      strokeWidth: t3,
+      color,
+      trackColor,
+      children,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = color;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = trackColor;
+  } else {
+    children = $[1];
+    color = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    trackColor = $[8];
+  }
+  const value = t1 === undefined ? 0 : t1;
+  const size = t2 === undefined ? 64 : t2;
+  const strokeWidth = t3 === undefined ? 6 : t3;
+  const theme = useTheme();
+  const progress = normalizeProgress(value);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - progress);
+  const center = size / 2;
+  let t4;
+  if ($[9] !== progress) {
+    t4 = Math.round(progress * 100);
+    $[9] = progress;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t4) {
+    t5 = {
+      now: t4,
+      min: 0,
+      max: 100
+    };
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== size) {
+    t6 = {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[13] = size;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== style || $[16] !== t6) {
+    t7 = [t6, style];
+    $[15] = style;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      position: "absolute"
+    };
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const t9 = trackColor ?? theme.bg.muted;
+  let t10;
+  if ($[19] !== center || $[20] !== radius || $[21] !== strokeWidth || $[22] !== t9) {
+    t10 = _jsx(Circle, {
+      cx: center,
+      cy: center,
+      fill: "none",
+      r: radius,
+      stroke: t9,
+      strokeWidth: strokeWidth
+    });
+    $[19] = center;
+    $[20] = radius;
+    $[21] = strokeWidth;
+    $[22] = t9;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  const t11 = color ?? theme.primary;
+  const t12 = `${circumference} ${circumference}`;
+  const t13 = `rotate(-90 ${center} ${center})`;
+  let t14;
+  if ($[24] !== center || $[25] !== offset || $[26] !== radius || $[27] !== strokeWidth || $[28] !== t11 || $[29] !== t12 || $[30] !== t13) {
+    t14 = _jsx(Circle, {
+      cx: center,
+      cy: center,
+      fill: "none",
+      r: radius,
+      stroke: t11,
+      strokeDasharray: t12,
+      strokeDashoffset: offset,
+      strokeLinecap: "round",
+      strokeWidth: strokeWidth,
+      transform: t13
+    });
+    $[24] = center;
+    $[25] = offset;
+    $[26] = radius;
+    $[27] = strokeWidth;
+    $[28] = t11;
+    $[29] = t12;
+    $[30] = t13;
+    $[31] = t14;
+  } else {
+    t14 = $[31];
+  }
+  let t15;
+  if ($[32] !== size || $[33] !== t10 || $[34] !== t14) {
+    t15 = _jsxs(Svg, {
+      height: size,
+      style: t8,
+      width: size,
+      children: [t10, t14]
+    });
+    $[32] = size;
+    $[33] = t10;
+    $[34] = t14;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== children || $[37] !== props || $[38] !== t15 || $[39] !== t5 || $[40] !== t7) {
+    t16 = _jsxs(View, {
+      ...props,
+      accessibilityRole: "progressbar",
+      accessibilityValue: t5,
+      accessible: true,
+      style: t7,
+      children: [t15, children]
+    });
+    $[36] = children;
+    $[37] = props;
+    $[38] = t15;
+    $[39] = t5;
+    $[40] = t7;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  return t16;
 }
 export default ProgressCircle;

package/dist/Feedback/Feedback.Skeleton.js

@@ -1,42 +1,155 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { motion } from "../tokens/motion.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import { Animated, Easing } from "react-native";
-function Skeleton({ width = "100%", height = 16, radius = 8, circle = false, className, style, animated = true, ...props }) {
-    const reducedMotion = useReducedMotion();
-    const shouldAnimate = animated && !reducedMotion;
-    // eslint-disable-next-line react-hooks/refs
-    const opacity = useRef(new Animated.Value(0.5)).current;
-    useEffect(() => {
-        opacity.setValue(0.5);
-        if (!shouldAnimate)
-            return;
-        const pulse = Animated.loop(Animated.sequence([
-            Animated.timing(opacity, {
-                toValue: 1,
-                duration: motion.duration.slow,
-                easing: Easing.inOut(Easing.ease),
-                useNativeDriver: true,
-                isInteraction: false,
-            }),
-            Animated.timing(opacity, {
-                toValue: 0.5,
-                duration: motion.duration.slow,
-                easing: Easing.inOut(Easing.ease),
-                useNativeDriver: true,
-                isInteraction: false,
-            }),
-        ]));
-        pulse.start();
-        return () => pulse.stop();
-    }, [opacity, shouldAnimate]);
-    const resolvedRadius = circle && typeof height === "number" ? height / 2 : radius;
-    return (_jsx(Animated.View, { ...props, accessibilityElementsHidden: true, className: cn("bg-bg-muted", className), importantForAccessibility: "no-hide-descendants", style: [
-            { width, height, borderRadius: resolvedRadius },
-            style,
-            { opacity: shouldAnimate ? opacity : 0.5 },
-        ] }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Skeleton(t0) {
+  const $ = _c(29);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== t0) {
+    ({
+      width: t1,
+      height: t2,
+      radius: t3,
+      circle: t4,
+      className,
+      style,
+      animated: t5,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+  }
+  const width = t1 === undefined ? "100%" : t1;
+  const height = t2 === undefined ? 16 : t2;
+  const radius = t3 === undefined ? 8 : t3;
+  const circle = t4 === undefined ? false : t4;
+  const animated = t5 === undefined ? true : t5;
+  const reducedMotion = useReducedMotion();
+  const shouldAnimate = animated && !reducedMotion;
+  const [opacity] = useState(_temp);
+  let t6;
+  let t7;
+  if ($[9] !== opacity || $[10] !== shouldAnimate) {
+    t6 = () => {
+      opacity.setValue(0.5);
+      if (!shouldAnimate) {
+        return;
+      }
+      const pulse = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+        toValue: 1,
+        duration: motion.duration.slow,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+        isInteraction: false
+      }), Animated.timing(opacity, {
+        toValue: 0.5,
+        duration: motion.duration.slow,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+        isInteraction: false
+      })]));
+      pulse.start();
+      return () => pulse.stop();
+    };
+    t7 = [opacity, shouldAnimate];
+    $[9] = opacity;
+    $[10] = shouldAnimate;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t6 = $[11];
+    t7 = $[12];
+  }
+  useEffect(t6, t7);
+  const resolvedRadius = circle && typeof height === "number" ? height / 2 : radius;
+  let t8;
+  if ($[13] !== className) {
+    t8 = cn("bg-bg-muted", className);
+    $[13] = className;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== height || $[16] !== resolvedRadius || $[17] !== width) {
+    t9 = {
+      width,
+      height,
+      borderRadius: resolvedRadius
+    };
+    $[15] = height;
+    $[16] = resolvedRadius;
+    $[17] = width;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const t10 = shouldAnimate ? opacity : 0.5;
+  let t11;
+  if ($[19] !== t10) {
+    t11 = {
+      opacity: t10
+    };
+    $[19] = t10;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+  let t12;
+  if ($[21] !== style || $[22] !== t11 || $[23] !== t9) {
+    t12 = [t9, style, t11];
+    $[21] = style;
+    $[22] = t11;
+    $[23] = t9;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== props || $[26] !== t12 || $[27] !== t8) {
+    t13 = _jsx(Animated.View, {
+      ...props,
+      accessibilityElementsHidden: true,
+      className: t8,
+      importantForAccessibility: "no-hide-descendants",
+      style: t12
+    });
+    $[25] = props;
+    $[26] = t12;
+    $[27] = t8;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  return t13;
+}
+function _temp() {
+  return new Animated.Value(0.5);
 }
 export default Skeleton;