@webority/mobile-ui 0.7.3 → 0.8.0

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

@@ -1 +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}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:r,onChange:i,onComplete:s,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:c=0,disabled:u=!1,error:d,size:m="md",secure:p=!1,haptic:f,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[v,j]=useControllableState({value:n,defaultValue:r??"",onChange:i}),S=useTheme(),T=useMemo(()=>buildStyles(S),[S]),C={...sizeMap[m],...S.components.otpInput?.[m]??{}},R=useRef([]),[V,k]=useState(-1),w=useRef(null),z=useRef(createAnimatedValue(0)).current,E=useRef(new Map),I=useMemo(()=>{const e=E.current,t=[];for(let n=0;n<o;n+=1){let r=e.get(n);r||(r=new Animated.Value(0),e.set(n,r)),t.push(r)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),A=useRef(-1),F=S.components.otpInput?.shakeOnError??!1,_=useReducedMotion(),H=Boolean(d),M="string"==typeof d?d:void 0;useEffect(()=>{let e;return null===w.current||!H||w.current||(!1!==f&&triggerHaptic("notificationError"),F&&!_&&(setNativeValue(z,0),e=Animated.sequence([Animated.timing(z,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:-1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:0,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=H,()=>e?.stop()},[H,z,F,f,_,S.motion.duration.instant]),useEffect(()=>{const e=A.current;if(A.current=V,e===V)return;if(-1===e&&-1===V)return;const t=[];return I.forEach((n,r)=>{const i=r===V?1:0;if(r!==V&&r!==e)return;const s=Animated.timing(n,{toValue:i,duration:S.motion.duration.fast,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[V,I,S]);const D=useCallback(e=>{const t=R.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=R.current[V>=0?V:0];e?.blur()},clear:()=>{j(""),D(0)}}),[D,V,j]),useEffect(()=>{if(l&&!u){const e=setTimeout(()=>D(0),c);return()=>clearTimeout(e)}},[l,c,u,D]);const O=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),P=useCallback(e=>{const t=e.slice(0,o);t!==v&&(j(t),t.length===o&&s&&s(t))},[o,j,s,v]),B=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),r=sanitizeChar(n,a);if(!r){const t=O.slice(),n=(t[e]??"").length>0;if(t[e]="",P(t.join("").slice(0,o)),!n&&e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}return}const i=O[e]??"",s=i&&r.length>o&&r.startsWith(i)?r.slice(i.length):r;if(s.length>=o){const t=s.slice(0,o),n=v.length;if(P(t),t.length!==n){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}return void R.current[e]?.blur()}const l=O.slice();let c=e;for(let e=0;e<r.length&&c<o;e+=1)l[c]=r[e]??"",c+=1;const u=l.join("").slice(0,o),d=v.length;if(P(u),u.length!==d){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}const m=Math.min(c,o-1);c>=o?R.current[e]?.blur():D(m)},[O,D,a,o,f,P,v]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(O[e]??"").length){if(e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}}else{const t=O.slice();t[e]="",P(t.join(""))}},[O,D,P]),L=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),$=useCallback(()=>{if(u)return;const e=O.findIndex(e=>""===e);D(-1===e?o-1:e)},[O,u,D,o]),q=g??`Enter ${o}-digit code`,G=z.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:h,accessible:!0,accessibilityRole:"none",accessibilityLabel:q,accessibilityValue:{text:n},accessibilityState:{disabled:u},testID:x,children:[_jsx(Pressable,{onPress:$,disabled:u,accessible:!1,children:_jsx(Animated.View,{style:[T.row,{columnGap:C.gap,transform:[{translateX:G}]}],children:O.map((e,t)=>{const n=V===t,r=e.length>0,i=H?S.colors.border.error:S.colors.border.focus,s=I[t];if(!s)return null;const l=p&&r?"●":e;return _jsxs(View,{style:T.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:C.cell,height:C.cell,borderRadius:C.borderRadius,borderWidth:1.5,focused:n,error:H,filled:r,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:b,children:[_jsx(TextInput,{ref:e=>{R.current[t]=e},value:(p&&r?"":e)||"​",onChangeText:e=>B(t,e),onKeyPress:e=>N(t,e),onFocus:()=>L(t),onBlur:W,keyboardType:a,editable:!u,selectTextOnFocus:!0,caretHidden:r,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[T.input,{fontSize:C.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},y]}),p&&r?_jsx(View,{pointerEvents:"none",style:T.maskOverlay,children:_jsx(Text,{style:[{fontSize:C.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[T.underline,{backgroundColor:i,opacity:s}]})]},`otp-cell-${t}`)})})}),M?_jsx(Text,{style:[T.errorText,{color:S.colors.error,fontSize:S.typography.fontSize.sm}],accessibilityLiveRegion:"polite",children:M}):null]})});OTPInput.displayName="OTPInput";const buildStyles=e=>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;
+"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,FieldMessage,hasFieldText}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}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:i,onChange:r,onComplete:s,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:p=!1,haptic:f,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[v,j]=useControllableState({value:n,defaultValue:i??"",onChange:r}),C=useTheme(),S=useMemo(()=>buildStyles(C),[C]),T={...sizeMap[m],...C.components.otpInput?.[m]??{}},V=useRef([]),[R,k]=useState(-1),w=useRef(null),E=useRef(createAnimatedValue(0)).current,F=useRef(new Map),I=useMemo(()=>{const e=F.current,t=[];for(let n=0;n<o;n+=1){let i=e.get(n);i||(i=new Animated.Value(0),e.set(n,i)),t.push(i)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),z=useRef(-1),A=C.components.otpInput?.shakeOnError??!1,M=useReducedMotion(),_=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===w.current||!_||w.current||(!1!==f&&triggerHaptic("notificationError"),A&&!M&&(setNativeValue(E,0),e=Animated.sequence([Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:-1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:0,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=_,()=>e?.stop()},[_,E,A,f,M,C.motion.duration.instant]),useEffect(()=>{const e=z.current;if(z.current=R,e===R)return;if(-1===e&&-1===R)return;const t=[];return I.forEach((n,i)=>{const r=i===R?1:0;if(i!==R&&i!==e)return;const s=Animated.timing(n,{toValue:r,duration:C.motion.duration.fast,easing:Easing.bezier(...C.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[R,I,C]);const H=useCallback(e=>{const t=V.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>H(0),blur:()=>{const e=V.current[R>=0?R:0];e?.blur()},clear:()=>{j(""),H(0)}}),[H,R,j]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>H(0),u);return()=>clearTimeout(e)}},[l,u,c,H]);const D=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),O=useCallback(e=>{const t=e.slice(0,o);t!==v&&(j(t),t.length===o&&s&&s(t))},[o,j,s,v]),P=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),i=sanitizeChar(n,a);if(!i){const t=D.slice(),n=(t[e]??"").length>0;if(t[e]="",O(t.join("").slice(0,o)),!n&&e>0){const t=D.slice();t[e-1]="",O(t.join("")),H(e-1)}return}const r=D[e]??"",s=r&&i.length>o&&i.startsWith(r)?i.slice(r.length):i;if(s.length>=o){const t=s.slice(0,o),n=v.length;if(O(t),t.length!==n){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}return void V.current[e]?.blur()}const l=D.slice();let u=e;for(let e=0;e<i.length&&u<o;e+=1)l[u]=i[e]??"",u+=1;const c=l.join("").slice(0,o),d=v.length;if(O(c),c.length!==d){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}const m=Math.min(u,o-1);u>=o?V.current[e]?.blur():H(m)},[D,H,a,o,f,O,v]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(D[e]??"").length){if(e>0){const t=D.slice();t[e-1]="",O(t.join("")),H(e-1)}}else{const t=D.slice();t[e]="",O(t.join(""))}},[D,H,O]),B=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),L=useCallback(()=>{if(c)return;const e=D.findIndex(e=>""===e);H(-1===e?o-1:e)},[D,c,H,o]),$=g??`Enter ${o}-digit code`,q=E.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:h,accessible:!0,accessibilityRole:"none",accessibilityLabel:$,accessibilityValue:{text:n},accessibilityState:{disabled:c},testID:x,children:[_jsx(Pressable,{onPress:L,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[S.row,{columnGap:T.gap,transform:[{translateX:q}]}],children:D.map((e,t)=>{const n=R===t,i=e.length>0,r=_?C.colors.border.error:C.colors.border.focus,s=I[t];if(!s)return null;const l=p&&i?"●":e;return _jsxs(View,{style:S.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:T.cell,height:T.cell,borderRadius:T.borderRadius,borderWidth:1.5,focused:n,error:_,filled:i,disabled:c,paddingHorizontal:0,paddingVertical:0,gap:0,style:b,children:[_jsx(TextInput,{ref:e=>{V.current[t]=e},value:(p&&i?"":e)||"​",onChangeText:e=>P(t,e),onKeyPress:e=>N(t,e),onFocus:()=>B(t),onBlur:W,keyboardType:a,editable:!c,selectTextOnFocus:!0,caretHidden:i,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[S.input,{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y]}),p&&i?_jsx(View,{pointerEvents:"none",style:S.maskOverlay,children:_jsx(Text,{style:[{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[S.underline,{backgroundColor:r,opacity:s}]})]},`otp-cell-${t}`)})})}),_jsx(FieldMessage,{size:m,error:!0,text:d})]})});OTPInput.displayName="OTPInput";const buildStyles=e=>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}});export{OTPInput};export default OTPInput;

package/lib/module/components/OptionSheet/OptionSheet.js

@@ -1 +1 @@
-"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,title:s,options:r,sections:n,renderSectionHeader:a,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:p="No options",labelOf:u,getValue:h,disabledOf:m,destructiveOf:g,descriptionOf:y,iconOf:f,isSelected:b,onSelect:x,multi:S=!1,searchable:T=!1,searchSelectionColor:j,accessibilityLabel:C,optionStyle:w,selectedOptionStyle:_,optionTextStyle:R,selectedOptionTextStyle:V,testID:k}=e,I=useTheme(),v=useSafeAreaInsets(),z=useMemo(()=>buildStyles(I),[I]),[D,L]=useState(""),P=Dimensions.get("window").height,H=Math.round(.7*P),[W,A]=useState(t),M=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(H)).current,B=useRef(createAnimatedValue(0)).current,E=useMemo(()=>Animated.add(O,B),[O,B]);useEffect(()=>{t&&A(!0)},[t]);const F=useRef(i);F.current=i;const N=useRef(W);useEffect(()=>{N.current&&!W&&"ios"!==Platform.OS&&F.current?.(),N.current=W},[W]),useEffect(()=>{if(!W)return;t&&setNativeValue(B,0);const e=t?Animated.parallel([Animated.timing(M,{toValue:1,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.spring(O,{toValue:0,damping:I.motion.spring.snappy.damping,stiffness:I.motion.spring.snappy.stiffness,mass:I.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(M,{toValue:0,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.timing(O,{toValue:H,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&A(!1)}),()=>e.stop()},[t,W,M,O,B,H,I.motion.duration.fast,I.motion.easing.standard,I.motion.easing.accelerate,I.motion.spring.snappy]);const{handleGesture:G}=useDragToDismiss({drag:B,travel:H,onDismiss:o}),$=useMemo(()=>Gesture.Native(),[]),[J,K]=useState(0),U=useKeyboardState(e=>e.height),Y=W?Math.max(0,Math.round(U)):0,Z=Math.max(v.top,StatusBar.currentHeight??0)+I.spacing.sm,q=Y>0,Q=q?Math.max(0,Math.min(H,(J>0?J:P)-Y-Z)):H;useEffect(()=>{t||L("")},[t]);const X=useMemo(()=>{const e=T?D.trim().toLowerCase():"",matches=t=>0===e.length||u(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!n)return r.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[T,D,r,n,u,y]),ee=useCallback(()=>{o()},[o]),te=useRef(null),oe=useMemo(()=>{const e=new Map;if(!c)return e;let t=0;if(n)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let o=t;o<X.length;o+=1){const t=X[o];if("option"!==t.kind)continue;const i=u(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[c,X,n,u]),ie=c&&oe.size>0&&0===D.trim().length,se=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...oe.has("#")?["#"]:[]],[oe]),re=useCallback(e=>{const t=oe.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[oe]),ne=useRef(null),ae=useCallback(()=>{null!==ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),le=useCallback(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ae(),ne.current=setTimeout(()=>{ne.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ae]);useEffect(()=>(W||ae(),ae),[W,ae]);return _jsx(Modal,{visible:W,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>F.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:I.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:k,accessibilityViewIsModal:!0,accessibilityLabel:C??s??"Options",style:[z.sheet,{maxHeight:Q,bottom:Y,paddingBottom:q?16:v.bottom+16,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,...smoothCorners,transform:[{translateY:E}],...I.shadows.xl}],children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:z.sheetHandleRow,children:_jsx(View,{style:[z.sheetHandle,{backgroundColor:I.components.select?.handleColor??I.components.bottomSheet?.handleColor??I.colors.border.primary}]})}),s?_jsx(Text,{style:[z.sheetTitle,{color:I.colors.text.primary,fontSize:I.typography.fontSize.lg,fontWeight:I.typography.fontWeight.semibold,paddingHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:s}):null]})}),T?_jsx(View,{style:[z.searchWrap,{marginHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:_jsxs(View,{style:[z.searchBox,{backgroundColor:I.colors.background.secondary,borderColor:I.colors.border.primary,borderRadius:I.radius.md,...smoothCorners,paddingHorizontal:I.spacing.md,gap:I.spacing.sm}],children:[(I.icons?.search??defaultIcons.search)({size:18,color:I.colors.text.tertiary}),_jsx(TextInput,{value:D,onChangeText:L,placeholder:d,placeholderTextColor:I.colors.text.tertiary,selectionColor:j??I.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:I.colors.text.primary,fontSize:I.typography.fontSize.base,paddingVertical:I.spacing.sm}]}),D.length>0?_jsx(Pressable,{onPress:()=>L(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(I.icons?.close??defaultIcons.close)({size:18,color:I.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[z.listWrap,ie?z.listRow:null],children:[_jsx(GestureDetector,{gesture:$,children:_jsx(FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:I.spacing.lg,paddingTop:I.spacing.md}],children:a?a(e.title):_jsx(Text,{style:[z.sectionTitle,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=u(t),i=h(t),s=y(t),r=f(t),n=b(i),c=m(t),d=g?.(t)??!1;return _jsxs(Pressable,{onPress:()=>x(t),disabled:c,android_ripple:{color:I.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:c},style:({pressed:e})=>[z.optionRow,{backgroundColor:n?I.colors.surface.selected:e?I.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md},w,n?_:null],children:[l?_jsx(View,{style:z.optionTextWrap,children:l(t,{selected:n,disabled:c})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:z.optionIcon,children:r}):null,_jsxs(View,{style:z.optionTextWrap,children:[_jsx(Text,{style:[z.optionLabel,{color:d?I.colors.error:n?I.colors.primary:I.colors.text.primary,fontSize:I.typography.fontSize.base,fontWeight:n?I.typography.fontWeight.semibold:I.typography.fontWeight.medium},R,n?V:null],numberOfLines:1,children:o}),s?_jsx(Text,{style:[z.optionDescription,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),S?_jsx(View,{style:[z.checkbox,{borderColor:n?I.colors.primary:I.colors.border.primary,backgroundColor:n?I.colors.primary:"transparent"}],children:n?_jsx(View,{style:z.checkboxTick}):null}):n?_jsx(View,{style:[z.singleSelectedDot,{backgroundColor:I.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?z.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[z.empty,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm,paddingVertical:I.spacing.xl}],children:p})})}),ie?_jsx(View,{style:[z.rail,{paddingRight:I.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:se.map(e=>{const t=oe.has(e);return _jsx(Pressable,{onPress:()=>re(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:z.railLetter,children:_jsx(Text,{style:[z.railLetterText,{color:t?I.colors.primary:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),S?_jsx(View,{style:[z.sheetFooter,{borderTopColor:I.colors.border.secondary,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md}],children:_jsx(Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?I.colors.primaryPressed:I.colors.primary,borderRadius:I.radius.md,...smoothCorners,paddingVertical:I.spacing.sm,paddingHorizontal:I.spacing.lg}],children:_jsx(Text,{style:{color:I.colors.onPrimary,fontSize:I.typography.fontSize.base,fontWeight:I.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
+"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,title:s,options:r,sections:n,renderSectionHeader:a,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:p="No options",labelOf:u,getValue:h,disabledOf:m,destructiveOf:g,descriptionOf:y,iconOf:f,isSelected:b,onSelect:x,multi:S=!1,searchable:T=!1,searchSelectionColor:j,accessibilityLabel:w,optionStyle:C,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,R=useTheme(),v=useSafeAreaInsets(),z=useMemo(()=>buildStyles(R),[R]),[L,D]=useState(""),P=Dimensions.get("window").height,A=Math.round(.7*P),[H,W]=useState(t),M=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(A)).current,B=useRef(createAnimatedValue(0)).current,E=useMemo(()=>Animated.add(O,B),[O,B]);useEffect(()=>{t&&W(!0)},[t]);const F=useRef(i);F.current=i;const N=useRef(H);useEffect(()=>{N.current&&!H&&"ios"!==Platform.OS&&F.current?.(),N.current=H},[H]),useEffect(()=>{if(!H)return;t&&setNativeValue(B,0);const e=t?Animated.parallel([Animated.timing(M,{toValue:1,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.standard),useNativeDriver:!1}),Animated.spring(O,{toValue:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(M,{toValue:0,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.standard),useNativeDriver:!1}),Animated.timing(O,{toValue:A,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,H,M,O,B,A,R.motion.duration.fast,R.motion.easing.standard,R.motion.easing.accelerate,R.motion.spring.snappy]);const{handleGesture:G}=useDragToDismiss({drag:B,travel:A,onDismiss:o}),$=useMemo(()=>Gesture.Native(),[]),[J,K]=useState(0),U=useKeyboardState(e=>e.height),Y=H?Math.max(0,Math.round(U)):0,Z=Math.max(v.top,StatusBar.currentHeight??0)+R.spacing.sm,q=Y>0,Q=q?Math.max(0,Math.min(A,(J>0?J:P)-Y-Z)):A;useEffect(()=>{t||D("")},[t]);const X=useMemo(()=>{const e=T?L.trim().toLowerCase():"",matches=t=>0===e.length||u(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!n)return r.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[T,L,r,n,u,y]),ee=useCallback(()=>{o()},[o]),te=useRef(null),oe=useMemo(()=>{const e=new Map;if(!c)return e;let t=0;if(n)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let o=t;o<X.length;o+=1){const t=X[o];if("option"!==t.kind)continue;const i=u(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[c,X,n,u]),ie=c&&oe.size>0&&0===L.trim().length,se=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...oe.has("#")?["#"]:[]],[oe]),re=useCallback(e=>{const t=oe.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[oe]),ne=useRef(null),ae=useCallback(()=>{null!==ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),le=useCallback(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ae(),ne.current=setTimeout(()=>{ne.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ae]);useEffect(()=>(H||ae(),ae),[H,ae]);return _jsx(Modal,{visible:H,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>F.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:R.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:w??s??"Options",style:[z.sheet,{maxHeight:Q,bottom:Y,paddingBottom:q?16:v.bottom+16,backgroundColor:R.colors.background.elevated,borderTopLeftRadius:R.radius.xl,borderTopRightRadius:R.radius.xl,...smoothCorners,transform:[{translateY:E}],...R.shadows.xl}],children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:z.sheetHandleRow,children:_jsx(View,{style:[z.sheetHandle,{backgroundColor:R.components.select?.handleColor??R.components.bottomSheet?.handleColor??R.colors.border.primary}]})}),s?_jsx(Text,{style:[z.sheetTitle,{color:R.colors.text.primary,fontSize:R.typography.fontSize.lg,fontWeight:R.typography.fontWeight.semibold,paddingHorizontal:R.spacing.lg,marginBottom:R.spacing.sm}],children:s}):null]})}),T?_jsx(View,{style:[z.searchWrap,{marginHorizontal:R.spacing.lg,marginBottom:R.spacing.sm}],children:_jsxs(View,{style:[z.searchBox,{backgroundColor:R.colors.background.secondary,borderColor:R.colors.border.primary,borderRadius:R.radius.md,...smoothCorners,paddingHorizontal:R.spacing.md,gap:R.spacing.sm}],children:[(R.icons?.search??defaultIcons.search)({size:18,color:R.colors.text.tertiary}),_jsx(TextInput,{value:L,onChangeText:D,placeholder:d,placeholderTextColor:R.colors.text.tertiary,selectionColor:j??R.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:R.colors.text.primary,fontSize:R.typography.fontSize.base,paddingVertical:R.spacing.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>D(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(R.icons?.close??defaultIcons.close)({size:18,color:R.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[z.listWrap,ie?z.listRow:null],children:[_jsx(GestureDetector,{gesture:$,children:_jsx(FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:R.spacing.lg,paddingTop:R.spacing.md}],children:a?a(e.title):_jsx(Text,{style:[z.sectionTitle,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.xs,fontWeight:R.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=u(t),i=h(t),s=y(t),r=f(t),n=b(i),c=m(t),d=g?.(t)??!1;return _jsxs(Pressable,{onPress:()=>x(t),disabled:c,android_ripple:{color:R.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:c},style:({pressed:e})=>[z.optionRow,{backgroundColor:n?R.colors.surface.selected:e?R.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:R.spacing.lg,paddingVertical:R.spacing.md},C,n?_:null],children:[l?_jsx(View,{style:z.optionTextWrap,children:l(t,{selected:n,disabled:c})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:z.optionIcon,children:r}):null,_jsxs(View,{style:z.optionTextWrap,children:[_jsx(Text,{style:[z.optionLabel,{color:d?R.colors.error:n?R.colors.primary:R.colors.text.primary,fontSize:R.typography.fontSize.base,fontWeight:n?R.typography.fontWeight.semibold:R.typography.fontWeight.medium},V,n?k:null],numberOfLines:1,children:o}),s?_jsx(Text,{style:[z.optionDescription,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),S?_jsx(View,{style:[z.checkbox,{borderColor:n?R.colors.primary:R.colors.border.primary,backgroundColor:n?R.colors.primary:"transparent"}],children:n?_jsx(View,{style:z.checkboxTick}):null}):n?"icon"===R.components.optionSheet?.selectedMarker?_jsx(View,{style:z.singleSelectedIcon,children:_jsx(AppIcon,{name:"tick-circle",variant:"bulk",size:20,color:R.colors.primary})}):_jsx(View,{style:[z.singleSelectedDot,{backgroundColor:R.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?z.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[z.empty,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.sm,paddingVertical:R.spacing.xl}],children:p})})}),ie?_jsx(View,{style:[z.rail,{paddingRight:R.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:se.map(e=>{const t=oe.has(e);return _jsx(Pressable,{onPress:()=>re(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:z.railLetter,children:_jsx(Text,{style:[z.railLetterText,{color:t?R.colors.primary:R.colors.text.tertiary,fontSize:R.typography.fontSize.xs,fontWeight:R.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),S?_jsx(View,{style:[z.sheetFooter,{borderTopColor:R.colors.border.secondary,paddingHorizontal:R.spacing.lg,paddingVertical:R.spacing.md}],children:_jsx(Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?R.colors.primaryPressed:R.colors.primary,borderRadius:R.radius.md,...smoothCorners,paddingVertical:R.spacing.sm,paddingHorizontal:R.spacing.lg}],children:_jsx(Text,{style:{color:R.colors.onPrimary,fontSize:R.typography.fontSize.base,fontWeight:R.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;

package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1 +1 @@
-"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,o)=>e.label.localeCompare(o.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,o,t)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(o.map(e=>e.code))).sort((e,o)=>o.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=o.filter(e=>e.code===l),s=a.find(e=>e.iso===t)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,o)=>{const{value:t,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:I,formatAsYouType:T=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(o=>o.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,o,t)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:o}],testID:t,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const o=planOf(e),t=o?maxNationalNumberLength(o,!1===F?"any":F):Number.POSITIVE_INFINITY;return I?Math.min(t,I):t},[I,F]),oe=useCallback((e,o)=>e.slice(0,ee(o)),[ee]),te=useCallback((e,o)=>{const t=planOf(o)??void 0,i=splitPhoneNumber(e,t);if(!i)return null;const n=i.country??o,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:oe(i.nationalNumber,n),iso:l?.iso??n}},[m,oe]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],o={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?te(i,o.iso)??o:i??o},[m,Q,v,i,te]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const o=planOf(e.iso);return o?isValidNationalNumber(e.nationalNumber,o,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:oe(e.nationalNumber,e.iso)};const o=m.find(e=>e.iso===le);return{callingCode:o?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,oe]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(o=>o.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:t??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Ie=V??Y.components.phoneNumberInput?.borderRadius,Te=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Te+1+Te,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,_e=ce||Pe,Ae=Boolean(L)&&"float"===O&&Ee>0,we=useFloatingLabel({label:L,enabled:Ae,floated:_e,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),ze=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),ke=T&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,Me=ee(ue.iso),Ve=0===ue.nationalNumber.length||pe||!Number.isFinite(Me)?void 0:ke.length+Math.max(0,Me-ue.nationalNumber.length),De=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const Be=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,$e=ue.nationalNumber.length>=Be,He=A??(!1!==F&&!1!==w&&Pe&&!De&&(ge||$e)?w||("mobile"===F?"Enter a valid mobile number":"Enter a valid number"):void 0),Ue=useRef(De),We=useRef(ue);We.current=ue,useEffect(()=>{Ue.current!==De&&(Ue.current=De,b?.(De),De&&c?.(formatE164(We.current)))},[De,c,b]);const qe=useCallback(e=>{if(e.includes("+")){const o=te(e,ue.iso);if(o&&!E&&Q.some(e=>e.iso===o.iso))return void de(o);if(o&&o.iso===ue.iso)return void de(o)}de({...ue,nationalNumber:oe(digitsOnly(e),ue.iso)})},[Q,E,ue,te,oe,de]),Ge=useCallback(e=>{const o=e;de({callingCode:o.code,iso:o.iso,nationalNumber:oe(ue.nationalNumber,o.iso)}),Ne(!1);const t=resolveHaptic(B,"selection");t&&triggerHaptic(t)},[ue,B,oe,de]);useImperativeHandle(o,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...We.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>We.current,getE164:()=>formatE164(We.current),getFormatted:()=>{const e=We.current,o=planOf(e.iso);return o?formatPhoneAsTyped(e.nationalNumber,o):e.nationalNumber},isValid:()=>ne(We.current),getCountry:()=>m.find(e=>e.iso===We.current.iso)}),[m,ne,de]);const Ye=R||E,Ke=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Ie,topNotch:we.topNotch,focused:ce,disabled:R,error:Boolean(He),filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Ye||(Ce.current=!0,Ne(!0))},disabled:Ye,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Ye},hitSlop:6,onLayout:e=>{const{width:o}=e.nativeEvent.layout;Le(e=>e===o?e:o)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(ze,Se.fontSize,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:xe.color,fontSize:Se.fontSize}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:R?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Se.iconSize,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:ke,maxLength:Ve,onChangeText:qe,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:o,end:t}=e.nativeEvent.selection;fe(o!==t)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ce.current&&he(!0),W?.()},editable:!R,placeholder:Ae&&!_e||je?void 0:j,placeholderTextColor:xe.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:xe.color,fontSize:Se.fontSize,...xe.weightStyle,paddingLeft:Fe?0:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:xe.placeholderColor,fontSize:Se.fontSize,weightStyle:xe.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:k,required:z,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ke,we.node]}),_jsx(FieldMessage,{size:k,error:Boolean(He),text:He??_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ne(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,o)=>C(e,{selected:o.selected}):void 0,isSelected:e=>e===ze?.iso,onSelect:Ge,searchable:Q.length>8,searchPlaceholder:S,alphabetIndex:x??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;
+"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?oe(i,t.iso)??t:i??t},[m,Q,v,i,oe]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?isValidNationalNumber(e.nationalNumber,t,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===le);return{callingCode:t?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,te]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:o??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=V??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,_e=ce||Pe,Ae=Boolean(L)&&"float"===O&&Ee>0,we=useFloatingLabel({label:L,enabled:Ae,floated:_e,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),ze=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),ke=I&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,Me=ee(ue.iso),Ve=0===ue.nationalNumber.length||pe||!Number.isFinite(Me)?void 0:ke.length+Math.max(0,Me-ue.nationalNumber.length),De=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const Be=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,$e=ue.nationalNumber.length>=Be,He=A??(!1!==F&&!1!==w&&Pe&&!De&&(ge||$e)?w||("mobile"===F?"Enter a valid mobile number":"Enter a valid number"):void 0),Ue=useRef(De),We=useRef(ue);We.current=ue,useEffect(()=>{Ue.current!==De&&(Ue.current=De,b?.(De),De&&c?.(formatE164(We.current)))},[De,c,b]);const qe=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Ge=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ne(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...We.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>We.current,getE164:()=>formatE164(We.current),getFormatted:()=>{const e=We.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(We.current),getCountry:()=>m.find(e=>e.iso===We.current.iso)}),[m,ne,de]);const Ye=R||E,Ke=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Te,topNotch:we.topNotch,focused:ce,disabled:R,error:hasFieldText(He),filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Ye||(Ce.current=!0,Ne(!0))},disabled:Ye,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Ye},hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(ze,Se.fontSize,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:xe.color,fontSize:Se.fontSize}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:R?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Se.iconSize,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:ke,maxLength:Ve,onChangeText:qe,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ce.current&&he(!0),W?.()},editable:!R,placeholder:Ae&&!_e||je?void 0:j,placeholderTextColor:xe.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:xe.color,fontSize:Se.fontSize,...xe.weightStyle,paddingLeft:Fe?0:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:xe.placeholderColor,fontSize:Se.fontSize,weightStyle:xe.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:k,required:z,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ke,we.node]}),_jsx(FieldMessage,{size:k,error:hasFieldText(He),text:He??_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ne(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===ze?.iso,onSelect:Ge,searchable:Q.length>8,searchPlaceholder:S,alphabetIndex:x??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;

package/lib/module/components/ProfilePicker/ProfilePicker.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,o,r)=>Math.min(r,Math.max(o,e)),toneFor=(e,o)=>{switch(o){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,o,r,t)=>{const s=toneFor(e,o),n=t?.badgeColor??s.base,l=e.colors.background.primary,i="neutral"===o&&void 0===t?.badgeColor;let a;switch(r){case"soft":a={fill:i?e.colors.background.tertiary:blendOf(n,.14,l,e.colors.background.secondary),ring:l,icon:n};break;case"outline":a={fill:l,ring:i?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:l,icon:s.on}}return t?.badgeIconColor?{...a,icon:t.badgeIconColor}:a},resolveRadius=(e,o)=>"circle"===e?o/2:"rounded"===e?Math.max(6,Math.round(.22*o)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,o)=>{const{value:r,name:t,sources:s,onPick:n,onRemove:l,loading:i=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:m="circle",badgeIcon:p="camera",tone:b,variant:g,avatarTone:f,avatarBackgroundColor:h,avatarColor:y,label:x,required:k=!1,helperText:C,error:v,layout:S="stacked",title:_,subtitle:j,ImageComponent:I,labels:T,haptic:P,onError:w,accessibilityLabel:A,style:E,testID:F}=e,L=useTheme(),M=L.components.profilePicker,R=b??M?.defaultTone??"primary",O=g??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O,M),[L,R,O,M]),z=f??M?.defaultAvatarTone,B=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{background:h??e?.background??L.colors.background.tertiary,icon:y??e?.color??L.colors.text.tertiary}},[L,z,h,y]),D=useMemo(()=>({...DEFAULT_LABELS,...T}),[T]),[H,U]=useState(null),[W,$]=useState(null),[Z,q]=useState(!1),[G,N]=useState(r);r!==G&&(N(r),U(null));const X=i||a,Q=H??r??null,Y=v??W??void 0,J=!X&&(null!==H||Boolean(r)&&Boolean(l)),K=s.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],oe=resolveRadius(m,ee),re=oe*(1-Math.SQRT1_2),te=clamp(Math.round(.28*ee),24,44),se=re-te/2,ne=Math.max(0,-se),le=useCallback(e=>{$(e),w?.(e),!1!==P&&triggerHaptic("notificationError")},[w,P]),ie=useCallback(async e=>{let o;try{o=await e.pick()}catch(e){return void le(e instanceof Error?e.message:String(e))}const r=o?.[0];if(!r)return;if("number"==typeof u&&"number"==typeof r.size&&r.size>1024*u*1024)return void le(D.errorTooLarge(u));if(r.type&&!matchesAccept(r.type,c))return void le(D.errorWrongType);$(null),U(r.uri);const t=resolveHaptic(P,"selection");t&&triggerHaptic(t),n?.(r)},[u,c,D,P,n,le]),ae=useCallback(()=>{X||(de.current=null,1!==s.length||J?(s.length>0||J)&&q(!0):ie(s[0]))},[X,s,J,ie]),ce=useCallback(()=>{U(null),$(null);const e=resolveHaptic(P,"selection");e&&triggerHaptic(e),l?.()},[P,l]),ue=useMemo(()=>{const e=s.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[s,J]),de=useRef(null),me=useCallback(e=>{de.current||(q(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),pe=useCallback(()=>{const e=de.current;de.current=null,e&&ie(e)},[ie]),be=F??"profile-picker",ge=A??(K?D.pick:t),fe=_jsx(View,{style:[styles.fill,{width:ee,height:ee,borderRadius:oe,...smoothCorners,backgroundColor:B.background}],children:_jsx(AppIcon,{name:"user",size:Math.round(.45*ee),color:B.icon})}),he=_jsx(View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:_jsxs(Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:ge,accessibilityHint:Y,accessibilityState:K?{disabled:X,busy:i}:{busy:i},testID:`${be}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:oe,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||t?_jsx(Avatar,{source:Q?{uri:Q}:void 0,name:t,size:ee,shape:m,tone:z,backgroundColor:h,color:y,ImageComponent:I,accessibilityLabel:ge},Q??"initials"):fe,i?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:oe,...smoothCorners,backgroundColor:L.colors.background.overlay}],testID:`${be}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors.onPrimary})}):null,!a&&K?_jsx(View,{pointerEvents:"none",testID:`${be}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:te/2,...smoothCorners,right:se,bottom:se,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==S?_jsxs(View,{style:[styles.meta,"profile"===S?styles.metaCentred:null],children:[_?_jsx(Text,{style:[styles.title,"profile"===S?styles.textCentred:null,{color:L.colors.text.primary,fontSize:L.typography.fontSize.base,...fontFor(L,"semibold")}],children:_}):null,j?_jsx(Text,{style:[styles.subtitle,"profile"===S?styles.textCentred:null,{color:L.colors.text.secondary,fontSize:L.typography.fontSize.sm,...fontFor(L,"normal")}],children:j}):null,_jsx(FieldMessage,{text:Y??C,error:Boolean(Y)})]}):_jsx(FieldMessage,{text:Y??C,error:Boolean(Y)});return _jsxs(View,{ref:o,style:E,testID:F,children:[x?_jsx(FieldLabel,{required:k,children:x}):null,_jsxs(View,{style:"inline"===S?[styles.row,{columnGap:L.spacing.md}]:["profile"===S?styles.columnCentred:styles.column,{rowGap:L.spacing.xs}],children:[he,ye]}),_jsx(OptionSheet,{open:Z,onClose:()=>q(!1),onAfterClose:pe,title:D.sheetTitle,options:ue,labelOf:e=>{const o=e;return"remove"===o.kind?D.remove:o.source.label},getValue:e=>{const o=e;return"remove"===o.kind?REMOVE_VALUE:o.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const o=e;return"remove"===o.kind?void 0:o.source.description},iconOf:e=>{const o=e;return"remove"===o.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors.error}):o.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;
+"use strict";import React,{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,o,t)=>{const s=toneFor(e,r),n=t?.badgeColor??s.base,i=e.colors.background.primary,l="neutral"===r&&void 0===t?.badgeColor;let a;switch(o){case"soft":a={fill:l?e.colors.background.tertiary:blendOf(n,.14,i,e.colors.background.secondary),ring:i,icon:n};break;case"outline":a={fill:i,ring:l?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:i,icon:s.on}}return t?.badgeIconColor?{...a,icon:t.badgeIconColor}:a},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,r)=>{const{value:o,name:t,sources:s,onPick:n,onRemove:i,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:d,size:u="md",shape:m="circle",badgeIcon:p="camera",tone:g,variant:b,avatarTone:f,avatarBackgroundColor:h,avatarColor:y,label:x,required:k=!1,helperText:C,error:v,layout:S="stacked",title:_,subtitle:j,ImageComponent:T,labels:I,haptic:F,onError:A,accessibilityLabel:P,style:w,testID:E}=e,L=useTheme(),M=L.components.profilePicker,R=g??M?.defaultTone??"primary",O=b??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O,M),[L,R,O,M]),z=f??M?.defaultAvatarTone,D=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{background:h??e?.background??L.colors.background.tertiary,icon:y??e?.color??L.colors.text.tertiary}},[L,z,h,y]),B=useMemo(()=>({...DEFAULT_LABELS,...I}),[I]),[H,U]=useState(null),[W,$]=useState(null),[Z,q]=useState(!1),[G,N]=useState(o);o!==G&&(N(o),U(null));const X=l||a,Q=H??o??null,Y=v??W??void 0,J=!X&&(null!==H||Boolean(o)&&Boolean(i)),K=s.length>0||J,ee="number"==typeof u?u:SIZE_PX[u],re=resolveRadius(m,ee),oe=re*(1-Math.SQRT1_2),te=clamp(Math.round(.28*ee),24,44),se=oe-te/2,ne=Math.max(0,-se),ie=useCallback(e=>{$(e),A?.(e),!1!==F&&triggerHaptic("notificationError")},[A,F]),le=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void ie(e instanceof Error?e.message:String(e))}const o=r?.[0];if(!o)return;if("number"==typeof d&&"number"==typeof o.size&&o.size>1024*d*1024)return void ie(B.errorTooLarge(d));if(o.type&&!matchesAccept(o.type,c))return void ie(B.errorWrongType);$(null),U(o.uri);const t=resolveHaptic(F,"selection");t&&triggerHaptic(t),n?.(o)},[d,c,B,F,n,ie]),ae=useCallback(()=>{X||(ue.current=null,1!==s.length||J?(s.length>0||J)&&q(!0):le(s[0]))},[X,s,J,le]),ce=useCallback(()=>{U(null),$(null);const e=resolveHaptic(F,"selection");e&&triggerHaptic(e),i?.()},[F,i]),de=useMemo(()=>{const e=s.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[s,J]),ue=useRef(null),me=useCallback(e=>{ue.current||(q(!1),"remove"===e.kind?ce():ue.current=e.source)},[ce]),pe=useCallback(()=>{const e=ue.current;ue.current=null,e&&le(e)},[le]),ge=E??"profile-picker",be=P??(K?B.pick:t),fe=_jsx(View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,...smoothCorners,backgroundColor:D.background}],children:_jsx(AppIcon,{name:"user",size:Math.round(.45*ee),color:D.icon})}),he=_jsx(View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:_jsxs(Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:be,accessibilityHint:fieldTextAsString(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},testID:`${ge}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||t?_jsx(Avatar,{source:Q?{uri:Q}:void 0,name:t,size:ee,shape:m,tone:z,backgroundColor:h,color:y,ImageComponent:T,accessibilityLabel:be},Q??"initials"):fe,l?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:re,...smoothCorners,backgroundColor:L.colors.background.overlay}],testID:`${ge}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors.onPrimary})}):null,!a&&K?_jsx(View,{pointerEvents:"none",testID:`${ge}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:te/2,...smoothCorners,right:se,bottom:se,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==S?_jsxs(View,{style:[styles.meta,"profile"===S?styles.metaCentred:null],children:[_?_jsx(Text,{style:[styles.title,"profile"===S?styles.textCentred:null,{color:L.colors.text.primary,fontSize:L.typography.fontSize.base,...fontFor(L,"semibold")}],children:_}):null,j?_jsx(Text,{style:[styles.subtitle,"profile"===S?styles.textCentred:null,{color:L.colors.text.secondary,fontSize:L.typography.fontSize.sm,...fontFor(L,"normal")}],children:j}):null,_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)})]}):_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)});return _jsxs(View,{ref:r,style:w,testID:E,children:[x?_jsx(FieldLabel,{required:k,children:x}):null,_jsxs(View,{style:"inline"===S?[styles.row,{columnGap:L.spacing.md}]:["profile"===S?styles.columnCentred:styles.column,{rowGap:L.spacing.xs}],children:[he,ye]}),_jsx(OptionSheet,{open:Z,onClose:()=>q(!1),onAfterClose:pe,title:B.sheetTitle,options:de,labelOf:e=>{const r=e;return"remove"===r.kind?B.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?REMOVE_VALUE:r.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const r=e;return"remove"===r.kind?void 0:r.source.description},iconOf:e=>{const r=e;return"remove"===r.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;

package/lib/module/components/Radio/Radio.js

@@ -1 +1 @@
-"use strict";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{RadioDot}from"./RadioDot.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RadioGroupContext=createContext(null);export const useRadioGroup=()=>useContext(RadioGroupContext);const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:r,onChange:s,disabled:i=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:b,circleStyle:h,dotStyle:y,labelStyle:x,testID:f,...C}=e,R=useTheme(),w=useMemo(()=>buildStyles(R),[R]),S=useRadioGroup();__DEV__&&void 0===o&&console.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const g=S?S.selectedValue===o:!!r,j=S&&S.disabled||i,D=toneColor(R,d),_=R.components.radio?.labelGap??10;return _jsxs(Pressable,{ref:t,onPress:e=>{if(j)return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),S?S.onChange(o):s?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:p??a,accessibilityHint:C.accessibilityHint??l,accessibilityState:{checked:g,disabled:j},testID:f,hitSlop:6,...C,style:({pressed:e})=>[w.row,hasChoiceDetail(l,c)?w.rowTop:null,{opacity:j?.55:e?.85:1},m,b],children:[_jsx(RadioDot,{selected:g,color:D,disabled:j&&!g,size:n,style:[!c||g||j?null:{borderColor:R.colors.field.borderError},h],dotStyle:y}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:j,labelLines:2,style:{marginLeft:_},labelStyle:x})]})});Radio.displayName="Radio";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});export{Radio};export default Radio;
+"use strict";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hasFieldText}from"../FieldBase/index.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{RadioDot}from"./RadioDot.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RadioGroupContext=createContext(null);export const useRadioGroup=()=>useContext(RadioGroupContext);const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:r,onChange:s,disabled:i=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:b,circleStyle:h,dotStyle:x,labelStyle:y,testID:f,...C}=e,R=useTheme(),w=useMemo(()=>buildStyles(R),[R]),S=useRadioGroup();__DEV__&&void 0===o&&console.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const g=S?S.selectedValue===o:!!r,j=S&&S.disabled||i,D=toneColor(R,d),T=R.components.radio?.labelGap??10;return _jsxs(Pressable,{ref:t,onPress:e=>{if(j)return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),S?S.onChange(o):s?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:p??a,accessibilityHint:C.accessibilityHint??l,accessibilityState:{checked:g,disabled:j},testID:f,hitSlop:6,...C,style:({pressed:e})=>[w.row,hasChoiceDetail(l,c)?w.rowTop:null,{opacity:j?.55:e?.85:1},m,b],children:[_jsx(RadioDot,{selected:g,color:D,disabled:j&&!g,size:n,style:[!hasFieldText(c)||g||j?null:{borderColor:R.colors.field.borderError},h],dotStyle:x}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:j,labelLines:2,style:{marginLeft:T},labelStyle:y})]})});Radio.displayName="Radio";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});export{Radio};export default Radio;

package/lib/module/components/SliderField/SliderField.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useRef}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{AppIcon,renderSlotIcon}from"../AppIcon/index.js";import{FieldBase,FieldLabel,FieldMessage,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{IconButton}from"../IconButton/index.js";import{Slider}from"../Slider/index.js";import{CountingText,clampValue,sliderToneInk,snapValue,useValueDraft}from"../Slider/valueText.js";import{Tooltip}from"../Tooltip/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_INPUT_WIDTH=72,defaultFormatValue=e=>String(e),stepDecimals=e=>String(e).split(".")[1]?.length??0,ValueBox=({draft:e,error:t,disabled:l,width:i,accessibilityLabel:s,style:o,testID:a})=>{const n=useTheme(),r=resolveFieldSize(n,"sm"),d=resolveFieldTextStyle(n,{disabled:l}),c=useRef(null),u=useCallback(()=>{l||c.current?.focus()},[l]);return _jsx(FieldBase,{size:"sm",focused:e.editing,disabled:l,error:t,filled:!0,width:i,onPress:u,pressFeedback:!1,paddingHorizontal:n.spacing.sm,gap:n.spacing.xs,trailing:t?_jsx(AppIcon,{name:"info-circle",size:r.iconSize,color:n.colors.error}):void 0,style:o,children:_jsx(TextInput,{ref:c,style:[styles.boxInput,{color:d.color,fontSize:r.fontSize,...d.weightStyle}],value:e.text,onChangeText:e.onChangeText,onFocus:e.onFocus,onBlur:e.onBlur,onSubmitEditing:e.onBlur,editable:!l,keyboardType:"decimal-pad",returnKeyType:"done",textAlign:"center",selectionColor:n.colors.primary,accessibilityLabel:s,accessibilityState:{disabled:l},testID:a})})},SliderField=forwardRef((e,t)=>{const{label:l,unit:i,info:s,required:o=!1,helperText:a,error:n,min:r=0,max:d=100,step:c=1,disabled:u=!1,tone:p="primary",size:b,variant:m,haptic:x,showBubble:h=!0,showBounds:y=!0,showInput:f=!1,showStepper:g=!1,startIcon:S,endIcon:I,startLabel:j,endLabel:w,formatValue:T=defaultFormatValue,parseInput:_,animationDuration:v,inputWidth:V=DEFAULT_INPUT_WIDTH,accessibilityLabel:z,style:F,labelStyle:D,boundStyle:B,sliderStyle:L,inputStyle:C,testID:$}=e,A=useTheme(),W=useMemo(()=>buildStyles(A),[A]),M=v??A.motion.duration.fast,P=!0===e.range,k=Boolean(n),R=stepDecimals(c),[H,U]=useControllableState({value:e.value,defaultValue:e.defaultValue??(P?[r,d]:r),onChange:e.onChange}),[E,N]=P?H:[H,d],q=clampValue(Math.min(E,N),r,d),K=clampValue(Math.max(E,N),r,d),G=useValueDraft({value:q,min:r,max:d,step:c,format:T,parse:_,onChange:e=>U(P?[Math.min(e,K),K]:e)}),J=useValueDraft({value:K,min:r,max:d,step:c,format:T,parse:_,onChange:e=>U([q,Math.max(e,q)])}),stepBy=e=>{const t=snapValue(q+e*c,r,d,c);t!==q&&U(t)},O={color:u?A.colors.text.disabled:A.colors.text.secondary,size:A.components.field?.md?.iconSize??18,disabled:u},Q=[W.bubbleText,{color:sliderToneInk(A,p),fontWeight:A.typography.fontWeight.semibold}],boundText=e=>_jsx(Text,{style:[W.bound,{color:u?A.colors.text.disabled:A.colors.text.secondary},B],children:e}),X={min:r,max:d,step:c,disabled:u,tone:p,size:b,variant:m,haptic:x,showLabel:!!h&&"always",renderLabel:h?e=>_jsx(CountingText,{value:e,format:T,decimals:R,duration:M,style:Q,testID:$&&!P?`${$}-bubble`:void 0}):void 0,accessibilityLabel:z??l,style:L,testID:$?`${$}-slider`:void 0};return _jsxs(View,{ref:t,style:[W.container,F],testID:$,children:[l?_jsxs(View,{style:W.labelRow,children:[_jsx(FieldLabel,{required:o,style:D,children:l}),i?_jsx(Text,{style:[W.unit,{color:A.colors.text.tertiary}],children:i}):null,s?_jsx(Tooltip,{content:s,trigger:"press",placement:"top",children:_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:`About ${l}`,hitSlop:8,style:W.infoButton,children:_jsx(AppIcon,{name:"info-circle",variant:"bold",size:16,color:A.colors.text.tertiary})})}):null]}):null,_jsxs(View,{style:[W.row,h?W.rowWithBubble:null],children:[S?_jsx(View,{children:renderSlotIcon(S,O)}):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"minus",size:e.size,color:e.color}),onPress:()=>stepBy(-1),accessibilityLabel:"Decrease",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q<=r,haptic:x,testID:$?`${$}-minus`:void 0}):null,P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} low`,style:C,testID:$?`${$}-input-low`:void 0}):y?boundText(j??T(r)):null,_jsx(View,{style:W.sliderWrap,children:_jsx(Slider,P?{...X,range:!0,value:[q,K],onChange:U}:{...X,value:q,onChange:U})}),P&&f?_jsx(ValueBox,{draft:J,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} high`,style:C,testID:$?`${$}-input-high`:void 0}):y?boundText(w??T(d)):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"add",size:e.size,color:e.color}),onPress:()=>stepBy(1),accessibilityLabel:"Increase",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q>=d,haptic:x,testID:$?`${$}-plus`:void 0}):null,I?_jsx(View,{children:renderSlotIcon(I,O)}):null,!P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} value`,style:C,testID:$?`${$}-input`:void 0}):null]}),_jsx(FieldMessage,{text:k?n:a,error:k})]})});SliderField.displayName="SliderField";const styles=StyleSheet.create({boxInput:{flex:1,padding:0,margin:0,includeFontPadding:!1}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs},unit:{fontSize:e.typography.fontSize.xs},infoButton:{marginLeft:e.spacing.xxs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},rowWithBubble:{marginTop:e.spacing.lg},sliderWrap:{flex:1,paddingHorizontal:10},bound:{fontSize:e.typography.fontSize.sm,fontVariant:["tabular-nums"]},bubbleText:{fontSize:e.typography.fontSize.xs,fontVariant:["tabular-nums"]}});export{SliderField};export default SliderField;
+"use strict";import{forwardRef,useCallback,useMemo,useRef}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{AppIcon,renderSlotIcon}from"../AppIcon/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{IconButton}from"../IconButton/index.js";import{Slider}from"../Slider/index.js";import{CountingText,clampValue,sliderToneInk,snapValue,useValueDraft}from"../Slider/valueText.js";import{Tooltip}from"../Tooltip/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_INPUT_WIDTH=72,defaultFormatValue=e=>String(e),stepDecimals=e=>String(e).split(".")[1]?.length??0,ValueBox=({draft:e,error:t,disabled:l,width:i,accessibilityLabel:s,style:o,testID:a})=>{const n=useTheme(),r=resolveFieldSize(n,"sm"),d=resolveFieldTextStyle(n,{disabled:l}),c=useRef(null),u=useCallback(()=>{l||c.current?.focus()},[l]);return _jsx(FieldBase,{size:"sm",focused:e.editing,disabled:l,error:t,filled:!0,width:i,onPress:u,pressFeedback:!1,paddingHorizontal:n.spacing.sm,gap:n.spacing.xs,trailing:t?_jsx(AppIcon,{name:"info-circle",size:r.iconSize,color:n.colors.error}):void 0,style:o,children:_jsx(TextInput,{ref:c,style:[styles.boxInput,{color:d.color,fontSize:r.fontSize,...d.weightStyle}],value:e.text,onChangeText:e.onChangeText,onFocus:e.onFocus,onBlur:e.onBlur,onSubmitEditing:e.onBlur,editable:!l,keyboardType:"decimal-pad",returnKeyType:"done",textAlign:"center",selectionColor:n.colors.primary,accessibilityLabel:s,accessibilityState:{disabled:l},testID:a})})},SliderField=forwardRef((e,t)=>{const{label:l,unit:i,info:s,required:o=!1,helperText:a,error:n,min:r=0,max:d=100,step:c=1,disabled:u=!1,tone:p="primary",size:x,variant:b,haptic:m,showBubble:h=!0,showBounds:y=!0,showInput:f=!1,showStepper:g=!1,startIcon:S,endIcon:I,startLabel:j,endLabel:T,formatValue:w=defaultFormatValue,parseInput:_,animationDuration:v,inputWidth:V=DEFAULT_INPUT_WIDTH,accessibilityLabel:F,style:z,labelStyle:D,boundStyle:B,sliderStyle:L,inputStyle:C,testID:$}=e,A=useTheme(),W=useMemo(()=>buildStyles(A),[A]),M=v??A.motion.duration.fast,P=!0===e.range,k=hasFieldText(n),R=stepDecimals(c),[H,U]=useControllableState({value:e.value,defaultValue:e.defaultValue??(P?[r,d]:r),onChange:e.onChange}),[E,N]=P?H:[H,d],q=clampValue(Math.min(E,N),r,d),K=clampValue(Math.max(E,N),r,d),G=useValueDraft({value:q,min:r,max:d,step:c,format:w,parse:_,onChange:e=>U(P?[Math.min(e,K),K]:e)}),J=useValueDraft({value:K,min:r,max:d,step:c,format:w,parse:_,onChange:e=>U([q,Math.max(e,q)])}),stepBy=e=>{const t=snapValue(q+e*c,r,d,c);t!==q&&U(t)},O={color:u?A.colors.text.disabled:A.colors.text.secondary,size:A.components.field?.md?.iconSize??18,disabled:u},Q=[W.bubbleText,{color:sliderToneInk(A,p),fontWeight:A.typography.fontWeight.semibold}],boundText=e=>_jsx(Text,{style:[W.bound,{color:u?A.colors.text.disabled:A.colors.text.secondary},B],children:e}),X={min:r,max:d,step:c,disabled:u,tone:p,size:x,variant:b,haptic:m,showLabel:!!h&&"always",renderLabel:h?e=>_jsx(CountingText,{value:e,format:w,decimals:R,duration:M,style:Q,testID:$&&!P?`${$}-bubble`:void 0}):void 0,accessibilityLabel:F??l,style:L,testID:$?`${$}-slider`:void 0};return _jsxs(View,{ref:t,style:[W.container,z],testID:$,children:[l?_jsxs(View,{style:W.labelRow,children:[_jsx(FieldLabel,{required:o,style:D,children:l}),i?_jsx(Text,{style:[W.unit,{color:A.colors.text.tertiary}],children:i}):null,s?_jsx(Tooltip,{content:s,trigger:"press",placement:"top",children:_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:`About ${l}`,hitSlop:8,style:W.infoButton,children:_jsx(AppIcon,{name:"info-circle",variant:"bold",size:16,color:A.colors.text.tertiary})})}):null]}):null,_jsxs(View,{style:[W.row,h?W.rowWithBubble:null],children:[S?_jsx(View,{children:renderSlotIcon(S,O)}):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"minus",size:e.size,color:e.color}),onPress:()=>stepBy(-1),accessibilityLabel:"Decrease",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q<=r,haptic:m,testID:$?`${$}-minus`:void 0}):null,P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} low`,style:C,testID:$?`${$}-input-low`:void 0}):y?boundText(j??w(r)):null,_jsx(View,{style:W.sliderWrap,children:_jsx(Slider,P?{...X,range:!0,value:[q,K],onChange:U}:{...X,value:q,onChange:U})}),P&&f?_jsx(ValueBox,{draft:J,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} high`,style:C,testID:$?`${$}-input-high`:void 0}):y?boundText(T??w(d)):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"add",size:e.size,color:e.color}),onPress:()=>stepBy(1),accessibilityLabel:"Increase",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q>=d,haptic:m,testID:$?`${$}-plus`:void 0}):null,I?_jsx(View,{children:renderSlotIcon(I,O)}):null,!P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} value`,style:C,testID:$?`${$}-input`:void 0}):null]}),_jsx(FieldMessage,{text:k?n:a,error:k})]})});SliderField.displayName="SliderField";const styles=StyleSheet.create({boxInput:{flex:1,padding:0,margin:0,includeFontPadding:!1}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs},unit:{fontSize:e.typography.fontSize.xs},infoButton:{marginLeft:e.spacing.xxs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},rowWithBubble:{marginTop:e.spacing.lg},sliderWrap:{flex:1,paddingHorizontal:10},bound:{fontSize:e.typography.fontSize.sm,fontVariant:["tabular-nums"]},bubbleText:{fontSize:e.typography.fontSize.xs,fontVariant:["tabular-nums"]}});export{SliderField};export default SliderField;

package/lib/module/components/SquircleFill/SquircleFill.js

@@ -1 +1 @@
-"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:r,stroke:s,strokeWidth:o=0,outset:l=0,testID:a}){const n=o>0&&void 0!==s&&"transparent"!==s,h=squirclePath({width:t,height:e,radius:i,inset:n?o/2:0});return _jsx(View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:a,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:h,fill:r,stroke:n?s:void 0,strokeWidth:n?o:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[r,s]=useState(null),o=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(o){const{width:e,height:i}=t.nativeEvent.layout;s(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[o,i]),size:r,active:o&&null!==r&&squircleApplies(r.width,r.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});
+"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:o,stroke:r,strokeWidth:s=0,outset:l=0,testID:a}){const n=s>0&&void 0!==r&&"transparent"!==r,h=n?s/2:0,u=useTheme().cornerSmoothing,c=squirclePath({width:t,height:e,radius:i,inset:h,smoothing:u});return _jsx(View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:a,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:c,fill:o,stroke:n?r:void 0,strokeWidth:n?s:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[o,r]=useState(null),s=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(s){const{width:e,height:i}=t.nativeEvent.layout;r(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[s,i]),size:o,active:s&&null!==o&&squircleApplies(o.width,o.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});

package/lib/module/components/TagInput/TagInput.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase}from"../FieldBase/index.js";import{FormField}from"../FormField/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:o,placeholder:i,label:l,helperText:a,error:n,required:u,disabled:p=!1,size:c="md",variant:d,maxTags:m,unique:f=!0,transform:x,separators:h=[","],haptic:g,style:b,testID:y}=e,C=useTheme(),j=useMemo(()=>buildStyles(C),[C]),[v,S]=useControllableState({value:r,defaultValue:s??[],onChange:o}),[T,F]=useState(""),[w,I]=useState(!1),k=useRef(null),_=useMemo(()=>mergeRefs(k,t),[t]),B=useCallback(()=>{p||k.current?.focus()},[p]),H="number"==typeof m&&v.length>=m,R=useCallback(e=>{const t=x?x(e.trim()):e.trim();if(!t)return;if(H)return;if(f&&v.some(e=>e.toLowerCase()===t.toLowerCase()))return void F("");S([...v,t]),F("");const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[H,g,S,v,x,f]),V=useCallback(e=>{const t=v.filter((t,r)=>r!==e);S(t);const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[g,S,v]),z=useCallback(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void R(r)}F(e)},[R,h]),D=useCallback(e=>{p||"Backspace"===e.nativeEvent.key&&""===T&&v.length>0&&V(v.length-1)},[p,T,V,v.length]),q=_jsx(FieldBase,{size:c,variant:d,focused:w,disabled:p,error:Boolean(n),filled:v.length>0||T.length>0,onPress:B,pressFeedback:!1,style:b,children:_jsxs(View,{style:j.wrap,children:[v.map((e,t)=>_jsx(Chip,{label:e,size:"sm",onClose:p?void 0:()=>V(t),haptic:g},`${e}-${t}`)),_jsx(TextInput,{ref:_,value:T,onChangeText:z,onKeyPress:D,onSubmitEditing:()=>R(T),onFocus:()=>I(!0),onBlur:()=>{I(!1),R(T)},editable:!p&&!H,placeholder:H?void 0:i,placeholderTextColor:C.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",style:[j.input,{color:C.colors.text.primary,fontSize:C.typography.fontSize.base}],testID:y?`${y}-input`:void 0})]})});return _jsx(View,l||a||n?{testID:y,children:_jsx(FormField,{label:l,helperText:a,error:n,required:u,children:q})}:{testID:y,children:q})});TagInput.displayName="TagInput";const buildStyles=e=>StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},input:{...fontFor(e,"normal"),flexGrow:1,minWidth:80,padding:0}});export default TagInput;
+"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase,hasFieldText}from"../FieldBase/index.js";import{FormField}from"../FormField/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:i,placeholder:l,label:a,helperText:o,error:n,required:u,disabled:d=!1,size:p="md",variant:c,maxTags:m,unique:f=!0,transform:x,separators:h=[","],haptic:g,style:b,testID:j}=e,y=useTheme(),C=useMemo(()=>buildStyles(y),[y]),[T,v]=useControllableState({value:r,defaultValue:s??[],onChange:i}),[F,S]=useState(""),[w,I]=useState(!1),k=useRef(null),_=useMemo(()=>mergeRefs(k,t),[t]),V=useCallback(()=>{d||k.current?.focus()},[d]),H="number"==typeof m&&T.length>=m,R=useCallback(e=>{const t=x?x(e.trim()):e.trim();if(!t)return;if(H)return;if(f&&T.some(e=>e.toLowerCase()===t.toLowerCase()))return void S("");v([...T,t]),S("");const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[H,g,v,T,x,f]),z=useCallback(e=>{const t=T.filter((t,r)=>r!==e);v(t);const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[g,v,T]),B=useCallback(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void R(r)}S(e)},[R,h]),D=useCallback(e=>{d||"Backspace"===e.nativeEvent.key&&""===F&&T.length>0&&z(T.length-1)},[d,F,z,T.length]),q=_jsx(FieldBase,{size:p,variant:c,focused:w,disabled:d,error:hasFieldText(n),filled:T.length>0||F.length>0,onPress:V,pressFeedback:!1,style:b,children:_jsxs(View,{style:C.wrap,children:[T.map((e,t)=>_jsx(Chip,{label:e,size:"sm",onClose:d?void 0:()=>z(t),haptic:g},`${e}-${t}`)),_jsx(TextInput,{ref:_,value:F,onChangeText:B,onKeyPress:D,onSubmitEditing:()=>R(F),onFocus:()=>I(!0),onBlur:()=>{I(!1),R(F)},editable:!d&&!H,placeholder:H?void 0:l,placeholderTextColor:y.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",style:[C.input,{color:y.colors.text.primary,fontSize:y.typography.fontSize.base}],testID:j?`${j}-input`:void 0})]})});return a||o||hasFieldText(n)?_jsx(View,{testID:j,children:_jsx(FormField,{label:a,helperText:o,error:n,required:u,children:q})}):_jsx(View,{testID:j,children:q})});TagInput.displayName="TagInput";const buildStyles=e=>StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},input:{...fontFor(e,"normal"),flexGrow:1,minWidth:80,padding:0}});export default TagInput;

package/lib/module/theme/tokens.js

@@ -1 +1 @@
-"use strict";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,xs:4,sm:6,md:10,lg:14,xl:20,"2xl":28,full:9999},FIELD_RADIUS=10,fieldSizes={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},components={button:{xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10},md:{paddingHorizontal:16,paddingVertical:9,minHeight:42,fontSize:16,borderRadius:12},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16}},input:{sm:{...fieldSizes.sm,multilineMinHeight:72},md:{...fieldSizes.md,multilineMinHeight:92},lg:{...fieldSizes.lg,multilineMinHeight:110}},searchBar:{sm:{borderRadius:radius.full},md:{borderRadius:radius.full},lg:{borderRadius:radius.full}},emptyState:{sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},field:{defaultVariant:"outlined",sm:fieldSizes.sm,md:fieldSizes.md,lg:fieldSizes.lg},listItem:{sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},badge:{sm:{fontSize:10,minWidth:16,height:16,paddingHorizontal:5,dotSize:8},md:{fontSize:11,minWidth:20,height:20,paddingHorizontal:6,dotSize:10},borderWidth:1.5,anchorOffset:4},chip:{sm:{paddingHorizontal:10,paddingVertical:4,fontSize:12,minHeight:26,closeSize:16,closeFontSize:12,gap:6},md:{paddingHorizontal:12,paddingVertical:6,fontSize:13,minHeight:32,closeSize:18,closeFontSize:13,gap:8}},checkbox:{sm:{boxSize:16},md:{boxSize:20},lg:{boxSize:24},labelGap:10},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},labelGap:10},switch:{sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2},thumbColor:"#FFFFFF"},otpInput:{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}},dialog:{iconWrapperSize:48,iconWrapperBorderRadius:24,actionButtonMinHeight:44},toast:{iconCircleSize:28,iconCircleBorderRadius:14,iconGlyphFontSize:16,tintBarWidth:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},easing:{standard:[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]},spring:{gentle:{damping:26,stiffness:240,mass:.9},bouncy:{damping:16,stiffness:200,mass:.7},snappy:{damping:20,stiffness:300,mass:.7}}},lightShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.08,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.1,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.14,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.18,shadowRadius:32,elevation:20}},darkShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.3,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.55,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.7,shadowRadius:32,elevation:20}};export const lightTheme={mode:"light",colors:{primary:"#5B5BD6",primaryHover:"#4F4FBF",primaryPressed:"#4040A8",primaryMuted:"#EEEEFC",secondary:"#F4F4F8",secondaryHover:"#E9E9F0",success:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",inverse:"#FFFFFF",strong:"#252F4A",disabled:"#B4B4BB",link:"#5B5BD6"},background:{primary:"#FFFFFF",secondary:"#F8F8FB",tertiary:"#F1F1F5",elevated:"#FFFFFF",overlay:"rgba(15, 15, 26, 0.5)",inverse:"#0F0F1A"},border:{primary:"#E5E5EC",secondary:"#EFEFF3",focus:"#5B5BD6",error:"#E5484D",width:1},field:{background:"#F9FBFC",backgroundFocused:"#FFFFFF",backgroundDisabled:"#F5F6FA",border:"#EBEDF3",borderFocused:"#BED2F9",borderError:"#FDBFCE",label:"#242F4A",text:"#252F4A",textDisabled:"#C4CADA",placeholder:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},surface:{pressed:"rgba(15, 15, 26, 0.06)",hovered:"rgba(15, 15, 26, 0.04)",selected:"rgba(91, 91, 214, 0.1)",disabled:"#F1F1F5"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#EBEDF3",highlight:"#F5F6FA"},avatarPalette:["#5B5BD6","#0A7979","#A45A05","#CD226E","#2462EB","#7C3AED","#047C57","#D42222"]},typography:typography,spacing:spacing,radius:radius,shadows:lightShadows,motion:motion,components:components,gradients:{}};export const darkTheme={mode:"dark",colors:{primary:"#7C7CE8",primaryHover:"#9292EE",primaryPressed:"#A8A8F2",primaryMuted:"#1F1F3D",secondary:"#1F1F26",secondaryHover:"#2A2A33",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA",onPrimary:"#0F0F1A",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",inverse:"#0F0F1A",strong:"#E2E2E2",disabled:"#52525B",link:"#9292EE"},background:{primary:"#0B0B12",secondary:"#13131C",tertiary:"#1C1C26",elevated:"#1C1C26",overlay:"rgba(0, 0, 0, 0.65)",inverse:"#FAFAFA"},border:{primary:"#27272F",secondary:"#1C1C26",focus:"#7C7CE8",error:"#F87171",width:1},field:{background:"#13131C",backgroundFocused:"#0B0B12",backgroundDisabled:"#1C1C26",border:"#27272F",borderFocused:"#3D5FB0",borderError:"#8A2F42",label:"#E4E6EE",text:"#FAFAFA",textDisabled:"#52525B",placeholder:"#71717A",placeholderDisabled:"#52525B",icon:"#8B8B95",iconFocused:"#D4D4DB",iconDisabled:"#52525B",caret:"#7C9EF0",message:"#F87171"},surface:{pressed:"rgba(255, 255, 255, 0.08)",hovered:"rgba(255, 255, 255, 0.05)",selected:"rgba(124, 124, 232, 0.18)",disabled:"#1C1C26"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#1C1C26",highlight:"#27272F"},avatarPalette:["#8B8BEE","#2DD4BF","#FCD34D","#F472B6","#60A5FA","#A78BFA","#34D399","#F87171"]},typography:typography,spacing:spacing,radius:radius,shadows:darkShadows,motion:motion,components:components,gradients:{}};
+"use strict";import{SQUIRCLE_SMOOTHING}from"../utils/squircle.js";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,xs:4,sm:6,md:10,lg:14,xl:20,"2xl":28,full:9999},FIELD_RADIUS=10,fieldSizes={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},components={button:{xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10},md:{paddingHorizontal:16,paddingVertical:9,minHeight:42,fontSize:16,borderRadius:12},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16}},input:{sm:{...fieldSizes.sm,multilineMinHeight:72},md:{...fieldSizes.md,multilineMinHeight:92},lg:{...fieldSizes.lg,multilineMinHeight:110}},searchBar:{sm:{borderRadius:radius.full},md:{borderRadius:radius.full},lg:{borderRadius:radius.full}},emptyState:{sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},field:{defaultVariant:"outlined",sm:fieldSizes.sm,md:fieldSizes.md,lg:fieldSizes.lg},listItem:{sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},badge:{sm:{fontSize:10,minWidth:16,height:16,paddingHorizontal:5,dotSize:8},md:{fontSize:11,minWidth:20,height:20,paddingHorizontal:6,dotSize:10},borderWidth:1.5,anchorOffset:4},chip:{sm:{paddingHorizontal:10,paddingVertical:4,fontSize:12,minHeight:26,closeSize:16,closeFontSize:12,gap:6},md:{paddingHorizontal:12,paddingVertical:6,fontSize:13,minHeight:32,closeSize:18,closeFontSize:13,gap:8}},checkbox:{sm:{boxSize:16},md:{boxSize:20},lg:{boxSize:24},labelGap:10},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},labelGap:10},switch:{sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2},thumbColor:"#FFFFFF"},otpInput:{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}},dialog:{iconWrapperSize:48,iconWrapperBorderRadius:24,actionButtonMinHeight:44},toast:{iconCircleSize:28,iconCircleBorderRadius:14,iconGlyphFontSize:16,tintBarWidth:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},easing:{standard:[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]},spring:{gentle:{damping:26,stiffness:240,mass:.9},bouncy:{damping:16,stiffness:200,mass:.7},snappy:{damping:20,stiffness:300,mass:.7}}},lightShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.08,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.1,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.14,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.18,shadowRadius:32,elevation:20}},darkShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.3,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.55,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.7,shadowRadius:32,elevation:20}};export const lightTheme={mode:"light",colors:{primary:"#5B5BD6",primaryHover:"#4F4FBF",primaryPressed:"#4040A8",primaryMuted:"#EEEEFC",secondary:"#F4F4F8",secondaryHover:"#E9E9F0",success:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",inverse:"#FFFFFF",strong:"#252F4A",disabled:"#B4B4BB",link:"#5B5BD6"},background:{primary:"#FFFFFF",secondary:"#F8F8FB",tertiary:"#F1F1F5",elevated:"#FFFFFF",overlay:"rgba(15, 15, 26, 0.5)",inverse:"#0F0F1A"},border:{primary:"#E5E5EC",secondary:"#EFEFF3",focus:"#5B5BD6",error:"#E5484D",width:1},field:{background:"#F9FBFC",backgroundFocused:"#FFFFFF",backgroundDisabled:"#F5F6FA",border:"#EBEDF3",borderFocused:"#BED2F9",borderError:"#FDBFCE",label:"#242F4A",text:"#252F4A",textDisabled:"#C4CADA",placeholder:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},surface:{pressed:"rgba(15, 15, 26, 0.06)",hovered:"rgba(15, 15, 26, 0.04)",selected:"rgba(91, 91, 214, 0.1)",disabled:"#F1F1F5"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#EBEDF3",highlight:"#F5F6FA"},avatarPalette:["#5B5BD6","#0A7979","#A45A05","#CD226E","#2462EB","#7C3AED","#047C57","#D42222"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:lightShadows,motion:motion,components:components,gradients:{}};export const darkTheme={mode:"dark",colors:{primary:"#7C7CE8",primaryHover:"#9292EE",primaryPressed:"#A8A8F2",primaryMuted:"#1F1F3D",secondary:"#1F1F26",secondaryHover:"#2A2A33",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA",onPrimary:"#0F0F1A",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",inverse:"#0F0F1A",strong:"#E2E2E2",disabled:"#52525B",link:"#9292EE"},background:{primary:"#0B0B12",secondary:"#13131C",tertiary:"#1C1C26",elevated:"#1C1C26",overlay:"rgba(0, 0, 0, 0.65)",inverse:"#FAFAFA"},border:{primary:"#27272F",secondary:"#1C1C26",focus:"#7C7CE8",error:"#F87171",width:1},field:{background:"#13131C",backgroundFocused:"#0B0B12",backgroundDisabled:"#1C1C26",border:"#27272F",borderFocused:"#3D5FB0",borderError:"#8A2F42",label:"#E4E6EE",text:"#FAFAFA",textDisabled:"#52525B",placeholder:"#71717A",placeholderDisabled:"#52525B",icon:"#8B8B95",iconFocused:"#D4D4DB",iconDisabled:"#52525B",caret:"#7C9EF0",message:"#F87171"},surface:{pressed:"rgba(255, 255, 255, 0.08)",hovered:"rgba(255, 255, 255, 0.05)",selected:"rgba(124, 124, 232, 0.18)",disabled:"#1C1C26"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#1C1C26",highlight:"#27272F"},avatarPalette:["#8B8BEE","#2DD4BF","#FCD34D","#F472B6","#60A5FA","#A78BFA","#34D399","#F87171"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:darkShadows,motion:motion,components:components,gradients:{}};

package/lib/typescript/commonjs/components/Autocomplete/Autocomplete.d.ts

@@ -32,7 +32,7 @@ export interface AutocompleteProps<T = string> {
     loadingText?: string;
     placeholder?: string;
     label?: string;
-    error?: string;
+    error?: React.ReactNode;
     helperText?: string;
     disabled?: boolean;
     size?: InputSize;

package/lib/typescript/commonjs/components/DatePicker/DatePicker.d.ts

@@ -47,7 +47,7 @@ export interface DatePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: PickerTriggerSize;

package/lib/typescript/commonjs/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger';
@@ -26,7 +27,7 @@ export interface DateRangePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: PickerTriggerSize;

package/lib/typescript/commonjs/components/FilePicker/FilePicker.d.ts

@@ -131,7 +131,7 @@ export interface FilePickerProps {
     /** Hint under the trigger (e.g. "Up to 5 files, max 100MB each."). */
     helperText?: string;
     /** External error — wins over internal validation errors (form binding). */
-    error?: string;
+    error?: React.ReactNode;
     labels?: Partial<FilePickerLabels>;
     /** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
     haptic?: HapticType | false;

package/lib/typescript/commonjs/components/Notation/Notation.d.ts

@@ -4,24 +4,33 @@ export interface NotationRun {
     /** The subscript that follows `text`, when the run is a symbol. */
     sub?: string;
 }
+/**
+ * One run of a `text` list: a string is ours and its `X_sub` symbols are subscripted; a
+ * `{ verbatim }` run is stored text (a citation, a clause, an option name) printed exactly as given.
+ */
+export type NotationTextRun = string | {
+    verbatim: string;
+};
 export interface NotationProps {
-    /** Engine text where an underscore marks a subscript ("N_SG exceeds N_C"). Needs a parent Text. */
-    text?: string;
-    /** One symbol: the base, drawn with `sub` small after it. Renders its own Text. */
+    /**
+     * Engine text where an underscore marks a subscript ("N_SG exceeds N_C"), or a list of runs that
+     * mixes such text with verbatim stored text. Needs a parent Text.
+     */
+    text?: string | readonly NotationTextRun[];
+    /** One symbol: the base, drawn with `sub` small and lowered after it. Needs a parent Text. */
     base?: string;
     sub?: string;
     /** Follows the symbol after a space. */
     desc?: string;
+    /** Subscript ink. Defaults to `colors.text.primary`; pass the parent's colour when it differs. */
+    color?: string;
     testID?: string;
 }
 /** The text split into runs: `{ text }` for prose, `{ text, sub }` for a symbol and its subscript. */
 export declare const parseNotation: (text: string | null | undefined) => NotationRun[];
-/**
- * A symbol of a standard with its subscript drawn small. React Native has no <sub>, and a nested
- * Text cannot be shifted down, so the subscript is smaller and sits on the baseline.
- */
+/** A symbol of a standard with its subscript drawn small and lowered below the baseline. */
 export declare const Notation: React.FC<NotationProps>;
 /** A symbol as the standard prints it: `sym('C', 'IP')` is C with a small IP, then `desc` if given. */
-export declare const sym: (base: string, sub?: string, desc?: string) => React.ReactElement;
+export declare const sym: (base: string, sub?: string, desc?: string, color?: string) => React.ReactElement;
 export default Notation;
 //# sourceMappingURL=Notation.d.ts.map

package/lib/typescript/commonjs/components/Notation/index.d.ts

@@ -1,3 +1,3 @@
-export type { NotationProps, NotationRun } from './Notation';
+export type { NotationProps, NotationRun, NotationTextRun } from './Notation';
 export { default, Notation, parseNotation, sym } from './Notation';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 export type OTPInputSize = 'sm' | 'md' | 'lg';
@@ -21,7 +22,11 @@ export interface OTPInputProps {
      */
     autoFocusDelay?: number;
     disabled?: boolean;
-    error?: boolean | string;
+    /**
+     * A string or a node puts the cells in the error state and shows it as the
+     * message below them; `true` shows the error state without a message.
+     */
+    error?: ReactNode;
     size?: OTPInputSize;
     secure?: boolean;
     /**

package/lib/typescript/commonjs/components/OptionSheet/OptionSheet.d.ts

@@ -4,10 +4,11 @@
  * The picker behind Select and InlineSelect, exported so an app can open the
  * same sheet from its own trigger: RN Modal-backed slide-up
  * sheet with backdrop fade, grab handle, optional title, optional client-side
- * search, the option list (icon + label + description, single dot / multi
- * checkbox) and the multi-select Done footer. Owns the open/close animations
- * and the search query; selection STATE stays with the caller — the sheet
- * only reports `onSelect(option)` and asks `isSelected(value)`.
+ * search, the option list (icon + label + description, single dot or tick
+ * icon / multi checkbox) and the multi-select Done footer. Owns the
+ * open/close animations and the search query; selection STATE stays with
+ * the caller — the sheet only reports `onSelect(option)` and asks
+ * `isSelected(value)`.
  *
  * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
  * and accessor signatures shared by every option-picking component. Select
@@ -58,7 +59,7 @@ export interface OptionSheetProps {
     renderSectionHeader?: (title: string) => React.ReactNode;
     /**
      * Replace the row's content (icon + label + description) with your own. The
-     * pressable row, its accessibility state and the selected dot / checkbox
+     * pressable row, its accessibility state and the selected mark / checkbox
      * stay, so a custom row is still a button to a screen reader.
      */
     renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;

package/lib/typescript/commonjs/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -160,7 +160,7 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, 'returnKeyTy
     placeholder?: string;
     helperText?: string;
     /** The app's own error text. Always wins over the built-in invalid-number message. */
-    error?: string;
+    error?: ReactNode;
     /**
      * Text under the field once the typed number is not a real number for the
      * country under `validation`. Shown after the user leaves the field with

package/lib/typescript/commonjs/components/ProfilePicker/ProfilePicker.d.ts

@@ -101,7 +101,7 @@ export interface ProfilePickerProps {
     required?: boolean;
     helperText?: string;
     /** App-supplied error; wins over a rejected pick's own message. */
-    error?: string;
+    error?: React.ReactNode;
     layout?: ProfilePickerLayout;
     /** Bold primary text beside / beneath the photo (inline and profile layouts). */
     title?: React.ReactNode;

package/lib/typescript/commonjs/components/Radio/Radio.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
 export type RadioSize = 'sm' | 'md' | 'lg';
@@ -19,7 +20,7 @@ export interface RadioProps extends Omit<PressableProps, 'style' | 'children' |
     /** Secondary line under the label. */
     description?: string;
     /** Error line under the label (and description); also draws the empty ring in the error colour. */
-    error?: string;
+    error?: ReactNode;
     size?: RadioSize;
     tone?: RadioTone;
     accessibilityLabel?: string;

package/lib/typescript/commonjs/components/SliderField/SliderField.d.ts

@@ -14,7 +14,7 @@ interface SliderFieldCommonProps {
     required?: boolean;
     helperText?: string;
     /** Shown in place of `helperText`, in the error colour; the value box turns red with an icon. */
-    error?: string;
+    error?: React.ReactNode;
     min?: number;
     max?: number;
     step?: number;

package/lib/typescript/commonjs/components/Switch/Switch.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
 export type SwitchSize = 'sm' | 'md' | 'lg';
@@ -15,7 +16,7 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
     /** Secondary line under the label. */
     description?: string;
     /** Error line under the label (and description). */
-    error?: string;
+    error?: ReactNode;
     /**
      * Lines the label (and the description) may take before truncating with an
      * ellipsis. Default: no limit, the text wraps in full. `0` also means no limit.

package/lib/typescript/commonjs/components/TagInput/TagInput.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase';
@@ -9,7 +10,7 @@ export interface TagInputProps {
     placeholder?: string;
     label?: string;
     helperText?: string;
-    error?: string;
+    error?: ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: FieldBaseSize;

package/lib/typescript/commonjs/components/TimePicker/TimePicker.d.ts

@@ -42,7 +42,7 @@ export interface TimePickerProps {
     label?: string;
     placeholder?: string;
     helperText?: string;
-    error?: string;
+    error?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     size?: FieldBaseSize;

package/lib/typescript/commonjs/components/index.d.ts

@@ -88,7 +88,7 @@ export type { MarkdownProps } from './Markdown';
 export { Markdown } from './Markdown';
 export type { ModalPresentation, ModalProps } from './Modal';
 export { MODAL_DISMISS_GRACE_MS, Modal } from './Modal';
-export type { NotationProps, NotationRun } from './Notation';
+export type { NotationProps, NotationRun, NotationTextRun } from './Notation';
 export { Notation, parseNotation, sym } from './Notation';
 export type { NumberInputProps, NumberInputRef, NumberInputSize, NumberInputVariant } from './NumberInput';
 export { NumberInput } from './NumberInput';