@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Spinner/Spinner.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Spinner = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const sizeMap = {
+  sm: 20,
+  md: 32,
+  lg: 48
+};
+const DOT_COUNT = 3;
+const DOT_STAGGER_MS = 150;
+const DOT_CYCLE_MS = 600;
+const Dot = ({
+  size,
+  color,
+  delay,
+  duration
+}) => {
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  (0, _react.useEffect)(() => {
+    const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.delay(delay), _reactNative.Animated.timing(scale, {
+      toValue: 1.4,
+      duration: duration / 2,
+      easing: _reactNative.Easing.out(_reactNative.Easing.quad),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: _reactNative.Easing.in(_reactNative.Easing.quad),
+      useNativeDriver: true
+    })]));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [scale, delay, duration]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: color,
+      transform: [{
+        scale
+      }]
+    }
+  });
+};
+const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    size = 'md',
+    color,
+    message,
+    overlay = false,
+    backdropColor,
+    variant = 'circular',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const fade = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [fade, theme]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const dimension = sizeMap[size];
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
+  const indicator = (0, _react.useMemo)(() => {
+    if (variant === 'dots') {
+      const dotSize = Math.max(6, Math.round(dimension / 4));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dotsRow, {
+          gap: Math.round(dotSize / 2)
+        }],
+        children: Array.from({
+          length: DOT_COUNT
+        }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Dot, {
+          size: dotSize,
+          color: resolvedColor,
+          delay: i * DOT_STAGGER_MS,
+          duration: DOT_CYCLE_MS
+        }, i))
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      color: resolvedColor,
+      size: size === 'sm' ? 'small' : 'large',
+      style: {
+        width: dimension,
+        height: dimension
+      }
+    });
+  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
+  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
+  const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      busy: true
+    },
+    testID: testID,
+    style: [overlay ? styles.overlayContent : styles.inlineContent, {
+      opacity: fade
+    }],
+    children: [indicator, message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.message, {
+        color: theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginTop: theme.spacing.md
+      }],
+      numberOfLines: 2,
+      children: message
+    }) : null]
+  });
+  if (overlay) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "auto",
+      style: [styles.overlay, {
+        backgroundColor: resolvedBackdrop
+      }, style],
+      children: inner
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.inline, style],
+    children: inner
+  });
+});
+Spinner.displayName = 'Spinner';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  inline: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inlineContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  overlay: {
+    ..._reactNative.StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  },
+  overlayContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.lg,
+    paddingHorizontal: theme.spacing.xl,
+    paddingVertical: theme.spacing.xl,
+    minWidth: 140,
+    ...theme.shadows.lg
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+var _default = exports.default = Spinner;
+//# sourceMappingURL=Spinner.js.map

package/lib/commonjs/components/Spinner/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.Spinner;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
+var _Spinner = _interopRequireWildcard(require("./Spinner.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map