@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -0,0 +1,375 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OTPInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/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: {
+    cell: 36,
+    fontSize: 16,
+    borderRadius: 8,
+    gap: 8
+  },
+  md: {
+    cell: 48,
+    fontSize: 20,
+    borderRadius: 10,
+    gap: 10
+  },
+  lg: {
+    cell: 56,
+    fontSize: 24,
+    borderRadius: 12,
+    gap: 12
+  }
+};
+const sanitizeChar = (input, kind) => {
+  if (!input) return '';
+  if (kind === 'number-pad') {
+    return input.replace(/\D/g, '');
+  }
+  return input;
+};
+const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    onChange,
+    onComplete,
+    length = 6,
+    keyboardType = 'number-pad',
+    autoFocus = false,
+    disabled = false,
+    error,
+    size = 'md',
+    secure = false,
+    accessibilityLabel,
+    style,
+    cellStyle,
+    textStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+  const inputsRef = (0, _react.useRef)([]);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
+  const previousErrorRef = (0, _react.useRef)(null);
+  const shake = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const underlines = (0, _react.useRef)(Array.from({
+    length
+  }, () => new _reactNative.Animated.Value(0))).current;
+  const previousFocusedIndexRef = (0, _react.useRef)(-1);
+
+  // Resize underline array if length prop changes between renders.
+  if (underlines.length !== length) {
+    if (underlines.length < length) {
+      for (let i = underlines.length; i < length; i += 1) {
+        underlines.push(new _reactNative.Animated.Value(0));
+      }
+    } else {
+      underlines.length = length;
+    }
+  }
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === 'string' ? error : undefined;
+
+  // Shake on transition from no-error -> error. Skip on first mount even if
+  // error is initially true — there's no transition to animate.
+  (0, _react.useEffect)(() => {
+    const isFirstRun = previousErrorRef.current === null;
+    if (!isFirstRun && hasError && !previousErrorRef.current) {
+      (0, _index2.triggerHaptic)('notificationError');
+      shake.setValue(0);
+      _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
+        toValue: 1,
+        duration: 75,
+        easing: _reactNative.Easing.linear,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(shake, {
+        toValue: -1,
+        duration: 75,
+        easing: _reactNative.Easing.linear,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(shake, {
+        toValue: 1,
+        duration: 75,
+        easing: _reactNative.Easing.linear,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(shake, {
+        toValue: 0,
+        duration: 75,
+        easing: _reactNative.Easing.linear,
+        useNativeDriver: true
+      })]).start();
+    }
+    previousErrorRef.current = hasError;
+  }, [hasError, shake]);
+
+  // Animate underline opacity for the focused cell. Skip on first mount
+  // (no prior focus state) — values are already at 0 and there's nothing to animate.
+  (0, _react.useEffect)(() => {
+    const previous = previousFocusedIndexRef.current;
+    previousFocusedIndexRef.current = focusedIndex;
+    if (previous === focusedIndex) return;
+    if (previous === -1 && focusedIndex === -1) return;
+    underlines.forEach((anim, idx) => {
+      const target = idx === focusedIndex ? 1 : 0;
+      // Only animate the cells whose target changed.
+      if (idx !== focusedIndex && idx !== previous) return;
+      _reactNative.Animated.timing(anim, {
+        toValue: target,
+        duration: theme.motion.duration.fast,
+        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+        useNativeDriver: true
+      }).start();
+    });
+  }, [focusedIndex, underlines, theme]);
+  const focusCell = (0, _react.useCallback)(index => {
+    const target = inputsRef.current[index];
+    if (target) {
+      target.focus();
+    }
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => focusCell(0),
+    blur: () => {
+      const current = inputsRef.current[focusedIndex >= 0 ? focusedIndex : 0];
+      current?.blur();
+    },
+    clear: () => {
+      onChange('');
+      focusCell(0);
+    }
+  }), [focusCell, focusedIndex, onChange]);
+  (0, _react.useEffect)(() => {
+    if (autoFocus && !disabled) {
+      // Defer one frame so the inputs are mounted.
+      const timer = setTimeout(() => focusCell(0), 0);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [autoFocus, disabled, focusCell]);
+  const cells = (0, _react.useMemo)(() => {
+    const arr = new Array(length).fill('');
+    for (let i = 0; i < Math.min(value.length, length); i += 1) {
+      arr[i] = value[i] ?? '';
+    }
+    return arr;
+  }, [value, length]);
+  const updateValue = (0, _react.useCallback)(next => {
+    const trimmed = next.slice(0, length);
+    if (trimmed === value) return;
+    onChange(trimmed);
+    if (trimmed.length === length && onComplete) {
+      onComplete(trimmed);
+    }
+  }, [length, onChange, onComplete, value]);
+  const handleChangeText = (0, _react.useCallback)((index, raw) => {
+    const sanitized = sanitizeChar(raw, keyboardType);
+    if (!sanitized) {
+      // User cleared this cell explicitly via change (rare since we manage backspace via key-press).
+      const chars = cells.slice();
+      chars[index] = '';
+      updateValue(chars.join('').slice(0, length));
+      return;
+    }
+
+    // Fill cells from current index onward (handles paste of multi-char text).
+    const chars = cells.slice();
+    let writeIndex = index;
+    for (let i = 0; i < sanitized.length && writeIndex < length; i += 1) {
+      chars[writeIndex] = sanitized[i] ?? '';
+      writeIndex += 1;
+    }
+    const next = chars.join('').slice(0, length);
+    const previousLength = value.length;
+    updateValue(next);
+    if (next.length !== previousLength) {
+      (0, _index2.triggerHaptic)('selection');
+    }
+
+    // Move focus to the next empty cell or last cell.
+    const nextFocus = Math.min(writeIndex, length - 1);
+    if (writeIndex >= length) {
+      // All filled — blur last cell.
+      inputsRef.current[length - 1]?.blur();
+    } else {
+      focusCell(nextFocus);
+    }
+  }, [cells, focusCell, keyboardType, length, updateValue, value]);
+  const handleKeyPress = (0, _react.useCallback)((index, e) => {
+    const key = e.nativeEvent.key;
+    if (key !== 'Backspace') return;
+    const current = cells[index] ?? '';
+    if (current.length === 0) {
+      // Move back, clear previous cell.
+      if (index > 0) {
+        const chars = cells.slice();
+        chars[index - 1] = '';
+        updateValue(chars.join(''));
+        focusCell(index - 1);
+      }
+    } else {
+      const chars = cells.slice();
+      chars[index] = '';
+      updateValue(chars.join(''));
+    }
+  }, [cells, focusCell, updateValue]);
+  const handleFocus = (0, _react.useCallback)(index => {
+    setFocusedIndex(index);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(() => {
+    setFocusedIndex(-1);
+  }, []);
+  const handleContainerPress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    // Focus the first empty cell, else the last cell.
+    const firstEmpty = cells.findIndex(c => c === '');
+    focusCell(firstEmpty === -1 ? length - 1 : firstEmpty);
+  }, [cells, disabled, focusCell, length]);
+  const accessibleLabel = accessibilityLabel ?? `Enter ${length}-digit code`;
+  const translateX = shake.interpolate({
+    inputRange: [-1, 1],
+    outputRange: [-6, 6]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    accessible: true,
+    accessibilityRole: "none",
+    accessibilityLabel: accessibleLabel,
+    accessibilityValue: {
+      text: value
+    },
+    accessibilityState: {
+      disabled
+    },
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleContainerPress,
+      disabled: disabled,
+      accessible: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.row, {
+          columnGap: sizeStyles.gap,
+          transform: [{
+            translateX
+          }]
+        }],
+        children: cells.map((char, index) => {
+          const isFocused = focusedIndex === index;
+          const isFilled = char.length > 0;
+          const borderColor = hasError ? theme.colors.border.error : isFocused ? theme.colors.border.focus : theme.colors.border.primary;
+          const backgroundColor = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
+          const underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
+          const underlineOpacity = underlines[index] ?? new _reactNative.Animated.Value(0);
+          const display = secure && isFilled ? '●' : char;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.cellWrapper,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.cell, {
+                width: sizeStyles.cell,
+                height: sizeStyles.cell,
+                borderRadius: sizeStyles.borderRadius,
+                backgroundColor,
+                borderColor
+              }, cellStyle],
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                ref: node => {
+                  inputsRef.current[index] = node;
+                },
+                value: secure && isFilled ? '' : char,
+                onChangeText: t => handleChangeText(index, t),
+                onKeyPress: e => handleKeyPress(index, e),
+                onFocus: () => handleFocus(index),
+                onBlur: handleBlur,
+                keyboardType: keyboardType,
+                editable: !disabled,
+                selectTextOnFocus: true,
+                caretHidden: isFilled,
+                maxLength: length,
+                textContentType: index === 0 ? 'oneTimeCode' : 'none',
+                autoComplete: index === 0 ? 'sms-otp' : 'off',
+                importantForAutofill: index === 0 ? 'yes' : 'no',
+                style: [styles.input, {
+                  fontSize: sizeStyles.fontSize,
+                  color: theme.colors.text.primary,
+                  fontWeight: theme.typography.fontWeight.semibold
+                }, textStyle]
+              }), secure && isFilled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                pointerEvents: "none",
+                style: styles.maskOverlay,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [{
+                    fontSize: sizeStyles.fontSize,
+                    color: theme.colors.text.primary,
+                    fontWeight: theme.typography.fontWeight.semibold
+                  }, textStyle],
+                  children: display
+                })
+              }) : null]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+              style: [styles.underline, {
+                backgroundColor: underlineColor,
+                opacity: underlineOpacity
+              }]
+            })]
+          }, `otp-cell-${index}`);
+        })
+      })
+    }), errorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.errorText, {
+        color: theme.colors.error,
+        fontSize: theme.typography.fontSize.sm
+      }],
+      accessibilityLiveRegion: "polite",
+      children: errorMessage
+    }) : null]
+  });
+});
+OTPInput.displayName = 'OTPInput';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  cellWrapper: {
+    alignItems: 'center'
+  },
+  cell: {
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
+    padding: 0
+  },
+  maskOverlay: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  underline: {
+    marginTop: 4,
+    height: 2,
+    width: '60%',
+    borderRadius: 1
+  },
+  errorText: {
+    marginTop: 6
+  }
+});
+var _default = exports.default = OTPInput;
+//# sourceMappingURL=OTPInput.js.map

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

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

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressBar = 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 toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const clampProgress = value => {
+  if (typeof value !== 'number' || Number.isNaN(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+};
+const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    progress,
+    indeterminate: indeterminateProp,
+    height = 6,
+    radius,
+    tone = 'primary',
+    trackColor,
+    barColor,
+    animated = true,
+    style,
+    accessibilityLabel,
+    testID
+  } = props;
+  const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
+  const clamped = clampProgress(progress);
+  const fillAnim = (0, _react.useRef)(new _reactNative.Animated.Value(clamped)).current;
+  const loopAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const widthRef = (0, _react.useRef)(0);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const resolvedRadius = radius ?? theme.radius.full;
+  const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
+  const resolvedBar = barColor ?? toneColor(theme, tone);
+  (0, _react.useEffect)(() => {
+    if (isIndeterminate) return;
+    if (!animated) {
+      fillAnim.setValue(clamped);
+      return;
+    }
+    _reactNative.Animated.timing(fillAnim, {
+      toValue: clamped,
+      duration: 400,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [animated, clamped, fillAnim, isIndeterminate, theme]);
+  (0, _react.useEffect)(() => {
+    if (!isIndeterminate) return;
+    loopAnim.setValue(0);
+    const animation = _reactNative.Animated.loop(_reactNative.Animated.timing(loopAnim, {
+      toValue: 1,
+      duration: 1500,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [isIndeterminate, loopAnim]);
+  const determinateWidth = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%']
+  });
+  const indeterminateTranslate = loopAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-1, 1]
+  });
+  const onLayout = event => {
+    widthRef.current = event.nativeEvent.layout.width;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: isIndeterminate ? {
+      text: 'Loading'
+    } : {
+      min: 0,
+      max: 100,
+      now: Math.round(clamped * 100)
+    },
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.track, {
+      height,
+      borderRadius: resolvedRadius,
+      backgroundColor: resolvedTrack
+    }, style],
+    children: isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.indeterminateBar, {
+        height,
+        borderRadius: resolvedRadius,
+        backgroundColor: resolvedBar,
+        transform: [{
+          translateX: _reactNative.Animated.multiply(indeterminateTranslate, new _reactNative.Animated.Value(widthRef.current || 0))
+        }]
+      }]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.determinateBar, {
+        height,
+        borderRadius: resolvedRadius,
+        backgroundColor: resolvedBar,
+        width: determinateWidth
+      }]
+    })
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  track: {
+    width: '100%',
+    overflow: 'hidden'
+  },
+  determinateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  indeterminateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '30%'
+  }
+});
+var _default = exports.default = ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

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

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