@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/OTPInput/OTPInput.js

@@ -1,445 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useControllableState, useReducedMotion } from "../../hooks/index.js";
-import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { FieldBase } from "../FieldBase/FieldBase.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    onComplete,
-    length = 6,
-    keyboardType = 'number-pad',
-    autoFocus = false,
-    disabled = false,
-    error,
-    size = 'md',
-    secure = false,
-    haptic,
-    accessibilityLabel,
-    style,
-    cellStyle,
-    textStyle,
-    testID
-  } = props;
-  const [current, setCurrent] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? '',
-    onChange
-  });
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.otpInput?.[size] ?? {})
-  };
-  const inputsRef = useRef([]);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const previousErrorRef = useRef(null);
-  const shake = useRef(createAnimatedValue(0)).current;
-  const underlinesMapRef = useRef(new Map());
-  const underlines = useMemo(() => {
-    const map = underlinesMapRef.current;
-    const out = [];
-    for (let i = 0; i < length; i += 1) {
-      let v = map.get(i);
-      if (!v) {
-        v = new Animated.Value(0);
-        map.set(i, v);
-      }
-      out.push(v);
-    }
-    // Trim stale entries beyond current length.
-    for (const key of Array.from(map.keys())) {
-      if (key >= length) {
-        map.delete(key);
-      }
-    }
-    return out;
-  }, [length]);
-  const previousFocusedIndexRef = useRef(-1);
-  const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
-  const reduceMotion = useReducedMotion();
-  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.
-  useEffect(() => {
-    const isFirstRun = previousErrorRef.current === null;
-    let anim;
-    if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (haptic !== false) {
-        triggerHaptic('notificationError');
-      }
-      if (shakeOnError && !reduceMotion) {
-        setNativeValue(shake, 0);
-        anim = Animated.sequence([Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: -1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: 0,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        })]);
-        anim.start();
-      }
-    }
-    previousErrorRef.current = hasError;
-    return () => anim?.stop();
-  }, [hasError, shake, shakeOnError, haptic, reduceMotion, theme.motion.duration.instant]);
-
-  // 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.
-  useEffect(() => {
-    const previous = previousFocusedIndexRef.current;
-    previousFocusedIndexRef.current = focusedIndex;
-    if (previous === focusedIndex) {
-      return;
-    }
-    // Equivalent-mutant note: this branch is unreachable, so removing it
-    // cannot change behaviour. Reaching here already proves
-    // `previous !== focusedIndex` (the check above returned otherwise), so
-    // `previous === -1 && focusedIndex === -1` — which requires them equal —
-    // can never be true.
-    if (previous === -1 && focusedIndex === -1) {
-      return;
-    }
-    const anims = [];
-    underlines.forEach((anim, idx) => {
-      const target = idx === focusedIndex ? 1 : 0;
-      // Only animate the cells whose target changed.
-      if (idx !== focusedIndex && idx !== previous) {
-        return;
-      }
-      const animation = Animated.timing(anim, {
-        toValue: target,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
-      });
-      animation.start();
-      anims.push(animation);
-    });
-    return () => anims.forEach(a => a.stop());
-  }, [focusedIndex, underlines, theme]);
-  const focusCell = useCallback(index => {
-    const target = inputsRef.current[index];
-    if (target) {
-      target.focus();
-    }
-  }, []);
-  useImperativeHandle(ref, () => ({
-    focus: () => focusCell(0),
-    blur: () => {
-      const current = inputsRef.current[focusedIndex >= 0 ? focusedIndex : 0];
-      current?.blur();
-    },
-    clear: () => {
-      setCurrent('');
-      focusCell(0);
-    }
-  }), [focusCell, focusedIndex, setCurrent]);
-  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 = useMemo(() => {
-    const arr = new Array(length).fill('');
-    for (let i = 0; i < Math.min(current.length, length); i += 1) {
-      arr[i] = current[i] ?? '';
-    }
-    return arr;
-  }, [current, length]);
-  const updateValue = useCallback(next => {
-    const trimmed = next.slice(0, length);
-    if (trimmed === current) {
-      return;
-    }
-    setCurrent(trimmed);
-    if (trimmed.length === length && onComplete) {
-      onComplete(trimmed);
-    }
-  }, [length, setCurrent, onComplete, current]);
-  const handleChangeText = useCallback((index, raw) => {
-    // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
-    const stripped = raw.replace(/\u200B/g, '');
-    const sanitized = sanitizeChar(stripped, keyboardType);
-    if (!sanitized) {
-      // Cell was cleared (delete / cut). Clear this cell and step focus back.
-      const chars = cells.slice();
-      const wasFilled = (chars[index] ?? '').length > 0;
-      chars[index] = '';
-      updateValue(chars.join('').slice(0, length));
-      if (!wasFilled && index > 0) {
-        // Empty cell + backspace → also clear and focus the previous cell.
-        const prev = cells.slice();
-        prev[index - 1] = '';
-        updateValue(prev.join(''));
-        focusCell(index - 1);
-      }
-      return;
-    }
-
-    // Fill cells from current index onward (handles paste of multi-char text).
-    // For single-character typing, this overwrites the current cell and advances.
-    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 = current.length;
-    updateValue(next);
-    if (next.length !== previousLength) {
-      const h = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-    }
-
-    // Move focus to the next empty cell or last cell.
-    const nextFocus = Math.min(writeIndex, length - 1);
-    if (writeIndex >= length) {
-      inputsRef.current[length - 1]?.blur();
-    } else {
-      focusCell(nextFocus);
-    }
-  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
-  const handleKeyPress = useCallback((index, e) => {
-    const key = e.nativeEvent.key;
-    if (key !== 'Backspace') {
-      return;
-    }
-    // Backspace on a non-empty cell — clear it. Backspace on an empty cell —
-    // step back and clear the previous cell. handleChangeText also covers the
-    // empty-cell case via the ZWSP placeholder, so this branch only matters
-    // when the platform fires onKeyPress without firing onChangeText.
-    const current = cells[index] ?? '';
-    if (current.length === 0) {
-      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 = useCallback(index => {
-    setFocusedIndex(index);
-  }, []);
-  const handleBlur = useCallback(() => {
-    setFocusedIndex(-1);
-  }, []);
-  const handleContainerPress = 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__*/_jsxs(View, {
-    style: style,
-    accessible: true,
-    accessibilityRole: "none",
-    accessibilityLabel: accessibleLabel,
-    accessibilityValue: {
-      text: value
-    },
-    accessibilityState: {
-      disabled
-    },
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: handleContainerPress,
-      disabled: disabled,
-      accessible: false,
-      children: /*#__PURE__*/_jsx(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 underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
-          const underlineOpacity = underlines[index];
-          if (!underlineOpacity) {
-            return null;
-          }
-          const display = secure && isFilled ? '●' : char;
-          return /*#__PURE__*/_jsxs(View, {
-            style: styles.cellWrapper,
-            children: [/*#__PURE__*/_jsxs(FieldBase, {
-              size: size,
-              width: sizeStyles.cell,
-              height: sizeStyles.cell,
-              borderRadius: sizeStyles.borderRadius,
-              borderWidth: 1.5,
-              focused: isFocused,
-              error: hasError,
-              filled: isFilled,
-              disabled: disabled,
-              paddingHorizontal: 0,
-              paddingVertical: 0,
-              gap: 0,
-              style: cellStyle,
-              children: [/*#__PURE__*/_jsx(TextInput, {
-                ref: node => {
-                  inputsRef.current[index] = node;
-                }
-                // Always render at least the ZWSP placeholder so iOS keeps
-                // firing onChangeText/onKeyPress for Backspace on empty cells.
-                ,
-                value: (secure && isFilled ? '' : char) || '\u200B',
-                onChangeText: t => handleChangeText(index, t),
-                onKeyPress: e => handleKeyPress(index, e),
-                onFocus: () => handleFocus(index),
-                onBlur: handleBlur,
-                keyboardType: keyboardType,
-                editable: !disabled,
-                selectTextOnFocus: true,
-                caretHidden: isFilled
-                // Only the first cell accepts paste-like multi-char input
-                // (e.g., when SMS autofill or clipboard delivers the full code);
-                // every other cell is single-char so typing always overwrites.
-                ,
-                maxLength: index === 0 ? length : 2,
-                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,
-                  ...fontFor(theme, 'semibold')
-                }, textStyle]
-              }), secure && isFilled ? /*#__PURE__*/_jsx(View, {
-                pointerEvents: "none",
-                style: styles.maskOverlay,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [{
-                    fontSize: sizeStyles.fontSize,
-                    color: theme.colors.text.primary,
-                    ...fontFor(theme, 'semibold')
-                  }, textStyle],
-                  children: display
-                })
-              }) : null]
-            }), /*#__PURE__*/_jsx(Animated.View, {
-              style: [styles.underline, {
-                backgroundColor: underlineColor,
-                opacity: underlineOpacity
-              }]
-            })]
-          }, `otp-cell-${index}`);
-        })
-      })
-    }), errorMessage ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.errorText, {
-        color: theme.colors.error,
-        fontSize: theme.typography.fontSize.sm
-      }],
-      accessibilityLiveRegion: "polite",
-      children: errorMessage
-    }) : null]
-  });
-});
-OTPInput.displayName = 'OTPInput';
-const buildStyles = _theme => StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  cellWrapper: {
-    alignItems: 'center'
-  },
-  input: {
-    width: '100%',
-    height: '100%',
-    textAlign: 'center',
-    padding: 0
-  },
-  maskOverlay: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  underline: {
-    marginTop: 4,
-    height: 2,
-    width: '60%',
-    borderRadius: 1,
-    ...smoothCorners
-  },
-  errorText: {
-    marginTop: 6
-  }
-});
-export { OTPInput };
-export default OTPInput;
-//# sourceMappingURL=OTPInput.js.map
+import{forwardRef as e,useCallback as t,useEffect as n,useImperativeHandle as r,useMemo as o,useRef as i,useState as s}from"react";import{Animated as l,Easing as a,Pressable as c,StyleSheet as u,Text as d,TextInput as p,View as m}from"react-native";import{useControllableState as f,useReducedMotion as g}from"../../hooks/index.js";import{createAnimatedValue as h,fontFor as y,setNativeValue as b,useTheme as v}from"../../theme/index.js";import{resolveHaptic as x,triggerHaptic as j}from"../../utils/index.js";import{smoothCorners as z}from"../../utils/corners.js";import{FieldBase as T}from"../FieldBase/FieldBase.js";import{jsx as S,jsxs as V}from"react/jsx-runtime";const w={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}},k=e((e,u)=>{const{value:z,defaultValue:k,onChange:D,onComplete:R,length:C=6,keyboardType:I="number-pad",autoFocus:F=!1,autoFocusDelay:E=0,disabled:B=!1,error:N,size:O="md",secure:A=!1,haptic:L,accessibilityLabel:W,style:M,cellStyle:P,textStyle:H,testID:$}=e,[q,G]=f({value:z,defaultValue:k??"",onChange:D}),K=v(),X=o(()=>buildStyles(K),[K]),J={...w[O],...K.components.otpInput?.[O]??{}},Q=i([]),[U,Y]=s(-1),Z=i(null),_=i(h(0)).current,ee=i(new Map),te=o(()=>{const e=ee.current,t=[];for(let n=0;n<C;n+=1){let r=e.get(n);r||(r=new l.Value(0),e.set(n,r)),t.push(r)}for(const t of Array.from(e.keys()))t>=C&&e.delete(t);return t},[C]),ne=i(-1),re=K.components.otpInput?.shakeOnError??!1,oe=g(),ie=Boolean(N),se="string"==typeof N?N:void 0;n(()=>{let e;return null===Z.current||!ie||Z.current||(!1!==L&&j("notificationError"),re&&!oe&&(b(_,0),e=l.sequence([l.timing(_,{toValue:1,duration:K.motion.duration.instant,easing:a.linear,useNativeDriver:!0}),l.timing(_,{toValue:-1,duration:K.motion.duration.instant,easing:a.linear,useNativeDriver:!0}),l.timing(_,{toValue:1,duration:K.motion.duration.instant,easing:a.linear,useNativeDriver:!0}),l.timing(_,{toValue:0,duration:K.motion.duration.instant,easing:a.linear,useNativeDriver:!0})]),e.start())),Z.current=ie,()=>e?.stop()},[ie,_,re,L,oe,K.motion.duration.instant]),n(()=>{const e=ne.current;if(ne.current=U,e===U)return;if(-1===e&&-1===U)return;const t=[];return te.forEach((n,r)=>{const o=r===U?1:0;if(r!==U&&r!==e)return;const i=l.timing(n,{toValue:o,duration:K.motion.duration.fast,easing:a.bezier(...K.motion.easing.standard),useNativeDriver:!0});i.start(),t.push(i)}),()=>t.forEach(e=>e.stop())},[U,te,K]);const le=t(e=>{const t=Q.current[e];t&&t.focus()},[]);r(u,()=>({focus:()=>le(0),blur:()=>{const e=Q.current[U>=0?U:0];e?.blur()},clear:()=>{G(""),le(0)}}),[le,U,G]),n(()=>{if(F&&!B){const e=setTimeout(()=>le(0),E);return()=>clearTimeout(e)}},[F,E,B,le]);const ae=o(()=>{const e=new Array(C).fill("");for(let t=0;t<Math.min(q.length,C);t+=1)e[t]=q[t]??"";return e},[q,C]),ce=t(e=>{const t=e.slice(0,C);t!==q&&(G(t),t.length===C&&R&&R(t))},[C,G,R,q]),ue=t((e,t)=>{const n=t.replace(/\u200B/g,""),r=(i=I,(o=n)?"number-pad"===i?o.replace(/\D/g,""):o:"");var o,i;if(!r){const t=ae.slice(),n=(t[e]??"").length>0;if(t[e]="",ce(t.join("").slice(0,C)),!n&&e>0){const t=ae.slice();t[e-1]="",ce(t.join("")),le(e-1)}return}const s=ae[e]??"",l=s&&r.length>C&&r.startsWith(s)?r.slice(s.length):r;if(l.length>=C){const t=l.slice(0,C),n=q.length;if(ce(t),t.length!==n){const e=x(L,"selection");e&&j(e)}return void Q.current[e]?.blur()}const a=ae.slice();let c=e;for(let e=0;e<r.length&&c<C;e+=1)a[c]=r[e]??"",c+=1;const u=a.join("").slice(0,C),d=q.length;if(ce(u),u.length!==d){const e=x(L,"selection");e&&j(e)}const p=Math.min(c,C-1);c>=C?Q.current[e]?.blur():le(p)},[ae,le,I,C,L,ce,q]),de=t((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(ae[e]??"").length){if(e>0){const t=ae.slice();t[e-1]="",ce(t.join("")),le(e-1)}}else{const t=ae.slice();t[e]="",ce(t.join(""))}},[ae,le,ce]),pe=t(e=>{Y(e)},[]),me=t(()=>{Y(-1)},[]),fe=t(()=>{if(B)return;const e=ae.findIndex(e=>""===e);le(-1===e?C-1:e)},[ae,B,le,C]),ge=W??`Enter ${C}-digit code`,he=_.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return V(m,{style:M,accessible:!0,accessibilityRole:"none",accessibilityLabel:ge,accessibilityValue:{text:z},accessibilityState:{disabled:B},testID:$,children:[S(c,{onPress:fe,disabled:B,accessible:!1,children:S(l.View,{style:[X.row,{columnGap:J.gap,transform:[{translateX:he}]}],children:ae.map((e,t)=>{const n=U===t,r=e.length>0,o=ie?K.colors.border.error:K.colors.border.focus,i=te[t];if(!i)return null;const s=A&&r?"●":e;return V(m,{style:X.cellWrapper,children:[V(T,{size:O,width:J.cell,height:J.cell,borderRadius:J.borderRadius,borderWidth:1.5,focused:n,error:ie,filled:r,disabled:B,paddingHorizontal:0,paddingVertical:0,gap:0,style:P,children:[S(p,{ref:e=>{Q.current[t]=e},value:(A&&r?"":e)||"​",onChangeText:e=>ue(t,e),onKeyPress:e=>de(t,e),onFocus:()=>pe(t),onBlur:me,keyboardType:I,editable:!B,selectTextOnFocus:!0,caretHidden:r,maxLength:C+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[X.input,{fontSize:J.fontSize,color:K.colors.text.primary,...y(K,"semibold")},H]}),A&&r?S(m,{pointerEvents:"none",style:X.maskOverlay,children:S(d,{style:[{fontSize:J.fontSize,color:K.colors.text.primary,...y(K,"semibold")},H],children:s})}):null]}),S(l.View,{style:[X.underline,{backgroundColor:o,opacity:i}]})]},`otp-cell-${t}`)})})}),se?S(d,{style:[X.errorText,{color:K.colors.error,fontSize:K.typography.fontSize.sm}],accessibilityLiveRegion:"polite",children:se}):null]})});k.displayName="OTPInput";const buildStyles=e=>u.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:0},maskOverlay:{...u.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:4,height:2,width:"60%",borderRadius:1,...z},errorText:{marginTop:6}});export{k as OTPInput};export default k;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, OTPInput } from "./OTPInput.js";
-//# sourceMappingURL=index.js.map
+export{default,OTPInput}from"./OTPInput.js";