@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoadingSpinner = 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 = {
+  small: 20,
+  medium: 32,
+  large: 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)(new _reactNative.Animated.Value(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 LoadingSpinner = exports.LoadingSpinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    size = 'medium',
+    color,
+    message,
+    overlay = false,
+    backdropColor,
+    variant = 'circular',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const fade = (0, _react.useRef)(new _reactNative.Animated.Value(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 === 'small' ? '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
+  });
+});
+LoadingSpinner.displayName = 'LoadingSpinner';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  inline: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inlineContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  overlay: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    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 = LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoadingSpinner", {
+  enumerable: true,
+  get: function () {
+    return _LoadingSpinner.LoadingSpinner;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _LoadingSpinner.default;
+  }
+});
+var _LoadingSpinner = _interopRequireWildcard(require("./LoadingSpinner.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

package/lib/commonjs/components/Modal/Modal.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.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 Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    visible,
+    onRequestClose,
+    presentation = 'centered',
+    backdropOpacity = 0.5,
+    backdropPressClose = true,
+    animationDuration,
+    accessibilityLabel,
+    hardwareBackPress = true,
+    children,
+    contentStyle,
+    backdropStyle,
+    restoreFocusRef,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const duration = animationDuration ?? theme.motion.duration.normal;
+  const screenHeight = _reactNative.Dimensions.get('window').height;
+  const backdropAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scaleAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0.9)).current;
+  const opacityAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translateYAnim = (0, _react.useRef)(new _reactNative.Animated.Value(screenHeight)).current;
+  const containerRef = (0, _react.useRef)(null);
+  const wasVisibleRef = (0, _react.useRef)(false);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      _reactNative.Animated.timing(backdropAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }).start();
+      if (presentation === 'bottom') {
+        _reactNative.Animated.spring(translateYAnim, {
+          toValue: 0,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }).start();
+      } else {
+        _reactNative.Animated.parallel([_reactNative.Animated.spring(scaleAnim, {
+          toValue: 1,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration,
+          useNativeDriver: true
+        })]).start();
+      }
+    } else {
+      backdropAnim.setValue(0);
+      scaleAnim.setValue(0.9);
+      opacityAnim.setValue(0);
+      translateYAnim.setValue(screenHeight);
+    }
+  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass]);
+
+  // Accessibility focus trap: when the modal opens, push screen-reader focus
+  // into the dialog container after the mount animation; when it closes,
+  // restore focus to the trigger element if the consumer provided a ref.
+  (0, _react.useEffect)(() => {
+    let openTimer;
+    let closeTimer;
+    if (visible) {
+      openTimer = setTimeout(() => {
+        const handle = containerRef.current ? (0, _reactNative.findNodeHandle)(containerRef.current) : null;
+        if (handle != null) {
+          _reactNative.AccessibilityInfo.setAccessibilityFocus(handle);
+        }
+      }, 150);
+      wasVisibleRef.current = true;
+    } else if (wasVisibleRef.current) {
+      wasVisibleRef.current = false;
+      if (restoreFocusRef && restoreFocusRef.current) {
+        closeTimer = setTimeout(() => {
+          const target = restoreFocusRef.current;
+          const handle = target ? (0, _reactNative.findNodeHandle)(target) : null;
+          if (handle != null) {
+            _reactNative.AccessibilityInfo.setAccessibilityFocus(handle);
+          }
+        }, duration);
+      }
+    }
+    return () => {
+      if (openTimer) clearTimeout(openTimer);
+      if (closeTimer) clearTimeout(closeTimer);
+    };
+  }, [visible, duration, restoreFocusRef]);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    if (!backdropPressClose) return;
+    (0, _hapticUtils.triggerHaptic)('selection');
+    onRequestClose();
+  }, [backdropPressClose, onRequestClose]);
+  const handleHardwareBack = (0, _react.useCallback)(() => {
+    if (hardwareBackPress) {
+      onRequestClose();
+    }
+  }, [hardwareBackPress, onRequestClose]);
+  const containerStyle = (0, _react.useMemo)(() => {
+    if (presentation === 'fullScreen') {
+      return [styles.fullScreenContent, {
+        backgroundColor: theme.colors.background.elevated
+      }];
+    }
+    if (presentation === 'bottom') {
+      return [styles.bottomContent, {
+        backgroundColor: theme.colors.background.elevated,
+        borderTopLeftRadius: theme.radius.xl,
+        borderTopRightRadius: theme.radius.xl,
+        padding: theme.spacing.lg
+      }, theme.shadows.xl];
+    }
+    return [styles.centeredContent, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.xl,
+      padding: theme.spacing.xl
+    }, theme.shadows.xl];
+  }, [presentation, theme, styles]);
+  const wrapperStyle = (0, _react.useMemo)(() => {
+    if (presentation === 'bottom') return styles.bottomWrapper;
+    if (presentation === 'fullScreen') return styles.fullScreenWrapper;
+    return styles.centeredWrapper;
+  }, [presentation, styles]);
+  const animatedTransform = (0, _react.useMemo)(() => {
+    if (presentation === 'bottom') {
+      return {
+        transform: [{
+          translateY: translateYAnim
+        }]
+      };
+    }
+    if (presentation === 'fullScreen') {
+      return {
+        opacity: opacityAnim
+      };
+    }
+    return {
+      opacity: opacityAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    };
+  }, [presentation, scaleAnim, opacityAnim, translateYAnim]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleHardwareBack,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ref: node => {
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      style: styles.root,
+      accessible: true,
+      accessibilityViewIsModal: true,
+      accessibilityRole: 'dialog',
+      accessibilityLabel: accessibilityLabel,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [_reactNative.StyleSheet.absoluteFillObject, {
+          backgroundColor: theme.colors.background.inverse,
+          opacity: backdropAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, backdropOpacity]
+          })
+        }, backdropStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFillObject,
+          onPress: handleBackdropPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close modal",
+          disabled: !backdropPressClose
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: wrapperStyle,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [containerStyle, animatedTransform, contentStyle],
+          pointerEvents: "auto",
+          children: children
+        })
+      })]
+    })
+  });
+});
+Modal.displayName = 'Modal';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  centeredWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  centeredContent: {
+    maxWidth: '90%',
+    width: '90%'
+  },
+  bottomWrapper: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  bottomContent: {
+    width: '100%'
+  },
+  fullScreenWrapper: {
+    flex: 1
+  },
+  fullScreenContent: {
+    flex: 1
+  }
+});
+var _default = exports.default = Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
+var _Modal = _interopRequireWildcard(require("./Modal.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