@webority/mobile-ui 0.18.1 → 0.19.1

package/lib/module/components/Input/Input.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const multilineMinHeightMap={sm:72,md:92,lg:110},Input=forwardRef((e,t)=>{const{label:i,help:o,placeholder:n,value:l,onChangeText:r,error:s,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:f=!1,multiline:p=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:S,readOnly:b=!1,action:v,actionStyle:j,size:F="md",variant:w,labelMode:z,required:T=!1,maxLength:I,showCounter:R=!0,textAlign:V,format:_,parse:k,style:A,containerStyle:C,inputStyle:N,labelStyle:D,messageStyle:H,borderRadius:L,onFocus:P,onBlur:E,accessibilityLabel:M,testID:B,editable:O,...G}=e,q=useTheme(),W=useMemo(()=>buildStyles(q),[q]),$=resolveFieldSize(q,F),X=multilineMinHeightMap[F],J=Math.round(1.4*$.fontSize),K=w??q.components.input?.defaultVariant??q.components.field?.defaultVariant??"outlined",Q=z??q.components.input?.defaultLabelMode??"top",[U,Y]=useState(!1),[Z,ee]=useState(!1),te="password"===d||u||c,ie="password"===d||u,oe="textarea"===d||p,ne=oe?Math.round(.1*$.fontSize):0,le="string"==typeof l&&l.length>0,re=hasFieldText(s),se=!0===s||re,ae=hasFieldText(a),de=re||!se&&ae,ce=hasFieldText(i),ue=hasFieldText(y),fe=!f&&!1!==O,pe=U||le||ue,ge=useRef(null),me=useMemo(()=>mergeRefs(ge,t),[t]),xe=useCallback(()=>{fe&&ge.current?.focus()},[fe]),he=ce&&"float"===Q,ye=useRef(createAnimatedValue(0)).current,Se=useRef(createAnimatedValue(de?1:0)).current;useEffect(()=>{const e=Animated.timing(Se,{toValue:de?1:0,duration:q.motion.duration.fast,easing:Easing.bezier(...q.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,Se,q.motion.duration.fast,q.motion.easing.standard]);const be=useReducedMotion(),ve=q.components.input?.shakeOnError??!1,je=useRef(se);useEffect(()=>{if(!ve)return void(je.current=se);let e;return se&&!je.current&&(be||(setNativeValue(ye,0),e=Animated.sequence([Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),triggerHaptic("notificationError")),je.current=se,()=>e?.stop()},[se,ye,ve,be]);const Fe=useCallback(e=>{Y(!0),P?.(e)},[P]),we=useCallback(e=>{Y(!1),E?.(e)},[E]),ze=useCallback(()=>{triggerHaptic("selection"),ee(e=>!e)},[]),Te=useMemo(()=>{const e=q.components.input?.fillColors?.[K];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[q.components.input?.fillColors,K]),Ie=q.colors.field.caret,Re=L??q.components.input?.borderRadius,Ve=q.components.input?.tintLabelOnFocus??!1,ke=U&&Ve?q.colors.field.borderFocused:q.colors.field.label,Ae=ye.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Ce=Boolean(m)||Boolean(x)||ie,Ne="underline"===K,De=g?$.iconSize+q.spacing.md+1+q.spacing.md:0,He=useFloatingLabel({label:i,enabled:he,floated:pe,required:T,variant:K,sizeTokens:$,leadingOffset:De,trailingOffset:Ce?$.iconSize+q.spacing.sm:0,textAlign:V,paddingLeft:Ne?0:$.paddingHorizontal,lineHeight:oe?J:void 0,restNudge:ne,floatTrim:oe?2:0,color:ke,style:D}),Le=resolveFieldTextStyle(q,{disabled:f}),Pe=Le.color,Ee=Le.placeholderColor,Me=T&&!ce&&!le&&"string"==typeof n&&n.length>0,Be=se?s:a,Oe=R&&"number"==typeof I&&"string"==typeof l?`${l.length} / ${I}`:null,Ge=se?q.colors.field.message:q.colors.text.secondary,qe=useNotationInk(H,$.messageFontSize,Ge),We=M??fieldTextAsString(i)??n,$e=q.colors.field,Xe=f?$e.iconDisabled:U?$e.iconFocused:$e.icon,Je={focused:U,disabled:f,error:se,color:Xe,size:$.iconSize},renderSlot=e=>renderSlotIcon(e,Je),Ke=(()=>{if(ie){const e=(Z?q.icons?.eyeOff:q.icons?.eye)??(Z?defaultIcons.eyeOff:defaultIcons.eye);return _jsx(Pressable,{onPress:ze,disabled:!fe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.iconSize,color:Xe})})}const e=x?_jsx(Text,{style:[W.unit,{fontSize:$.fontSize,color:Ee},h],children:x}):null,t=m?_jsx(View,{children:renderSlot(m)}):null;return e&&t?_jsxs(View,{style:W.trailingRow,children:[e,t]}):e??t})(),Qe=g?_jsx(View,{children:renderSlot(g)}):null,Ue=StyleSheet.flatten(S),Ye=Ue?.fontSize??$.fontSize,Ze=Ue?.color??Ee,et=useMemo(()=>({fontSize:Ye,color:Ze}),[Ye,Ze]),tt=ue?"string"==typeof y||"number"==typeof y?_jsx(Text,{style:[W.prefix,{fontSize:$.fontSize,color:Ee,marginRight:q.spacing.xs,lineHeight:oe?J:void 0,paddingTop:oe?ne:void 0},S],children:y}):_jsx(View,{style:[W.prefixNode,{marginRight:q.spacing.xs,minHeight:oe?J:void 0,justifyContent:"center",paddingTop:oe?ne:void 0}],children:_jsx(Text,{style:[W.prefix,{fontSize:$.fontSize,color:Ee,lineHeight:oe?J:void 0},S],children:_jsx(NotationInkContext.Provider,{value:et,children:y})})}):null,it=v?_jsx(Button,{variant:v.variant??"outline",tone:v.tone??"primary",size:F,title:v.label,leftIcon:v.icon,loading:v.loading,disabled:f||v.disabled,onPress:v.onPress,pressAnimation:!1,testID:v.testID,style:[W.action,{minHeight:$.minHeight,alignSelf:oe?"flex-start":"stretch"},j]}):null;return _jsxs(Animated.View,{style:[W.container,{transform:[{translateX:Ae}]},A],children:[ce&&!he?_jsx(FieldLabel,{size:F,required:T,help:o,color:ke,style:D,children:i}):null,_jsxs(View,{style:[W.fieldRow,{columnGap:q.spacing.sm,alignItems:oe?"flex-start":"stretch"}],children:[_jsxs(View,{style:W.fieldWrapper,children:[_jsxs(FieldBase,{size:F,variant:K,focused:U,disabled:f,error:se,filled:le,minHeight:oe?X:void 0,borderRadius:Re,fillOverrides:Te,leading:Qe,leadingDivider:null!=g,paddingLeft:Ne?0:void 0,trailing:Ke,slotAlign:oe?"top":"center",slotLineHeight:oe?J:void 0,topNotch:He.topNotch,onPress:xe,pressFeedback:!1,style:C,children:[tt,_jsxs(View,{style:W.inputWrap,children:[_jsx(TextInput,{ref:me,style:[W.input,{color:Pe,fontSize:$.fontSize,...Le.weightStyle,paddingLeft:Ne?0:void 0,minHeight:oe?X-2*$.paddingVertical:void 0,lineHeight:oe?J:void 0,paddingTop:oe?ne:void 0,textAlignVertical:oe?"top":"center"},N],textAlign:V,placeholder:he&&!pe||Me?void 0:n,placeholderTextColor:Ee,value:_&&null!=l?_(l):l,onChangeText:e=>{r&&r(k?k(e):e)},onFocus:Fe,onBlur:we,editable:fe,readOnly:b,secureTextEntry:te&&!Z,multiline:oe,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:I,selectionColor:Ie,accessibilityLabel:We,accessibilityState:{disabled:f},"aria-disabled":f,testID:B,...G}),Me?_jsx(RequiredPlaceholder,{text:n,color:Ee,fontSize:$.fontSize,weightStyle:Le.weightStyle,align:oe?"top":"center",paddingTop:oe?ne:void 0,textAlign:V}):null]})]}),He.node]}),it]}),de||Oe?_jsxs(View,{style:[W.footerRow,{marginTop:$.messageGap}],children:[de?_jsxs(Animated.View,{style:[W.messageRow,{columnGap:q.spacing.xs+2,opacity:Se}],accessibilityLiveRegion:se?"polite":"none",children:[se?_jsx(FieldErrorGlyph,{size:$.messageFontSize,color:Ge}):null,_jsx(Text,{style:[W.messageText,{color:Ge,fontSize:$.messageFontSize,...fontFor(q,"normal")},H],children:_jsx(NotationInkContext.Provider,{value:qe,children:Be})})]}):_jsx(View,{style:W.footerSpacer}),Oe?_jsx(Text,{style:[W.counterText,{color:q.colors.text.tertiary,fontSize:$.messageFontSize,...fontFor(q,"normal")}],children:Oe}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:0,margin:0,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:8},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});export{Input};export default Input;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveFieldSize,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const multilineMinHeightMap={sm:72,md:92,lg:110},Input=forwardRef((e,t)=>{const{label:i,help:n,placeholder:o,value:l,onChangeText:r,error:s,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:b,readOnly:v=!1,action:S,actionStyle:j,size:T="md",variant:w,labelMode:F,required:I=!1,maxLength:R,showCounter:_=!0,textAlign:V,format:k,parse:A,style:z,containerStyle:C,inputStyle:N,labelStyle:D,messageStyle:L,borderRadius:H,onFocus:P,onBlur:E,accessibilityLabel:M,testID:B,editable:O,...G}=e,q=useTheme(),W=useMemo(()=>buildStyles(q),[q]),X=resolveFieldSize(q,T),$=multilineMinHeightMap[T],Y=Math.round(1.4*X.text),J=w??q.components.input?.defaultVariant??q.components.field?.defaultVariant??"outlined",K=F??q.components.input?.defaultLabelMode??"top",[Q,U]=useState(!1),[Z,ee]=useState(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||f,oe=ne?Math.round(.1*X.text):0,le="string"==typeof l&&l.length>0,re=hasFieldText(s),se=!0===s||re,ae=hasFieldText(a),de=re||!se&&ae,ce=hasFieldText(i),ue=hasFieldText(y),pe=!p&&!1!==O,fe=Q||le||ue,ge=useRef(null),me=useMemo(()=>mergeRefs(ge,t),[t]),xe=useCallback(()=>{pe&&ge.current?.focus()},[pe]),he=ce&&"float"===K,ye=useRef(createAnimatedValue(0)).current,be=useRef(createAnimatedValue(de?1:0)).current;useEffect(()=>{const e=Animated.timing(be,{toValue:de?1:0,duration:q.motion.duration.fast,easing:Easing.bezier(...q.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,be,q.motion.duration.fast,q.motion.easing.standard]);const ve=useReducedMotion(),Se=q.components.input?.shakeOnError??!1,je=useRef(se);useEffect(()=>{if(!Se)return void(je.current=se);let e;return se&&!je.current&&(ve||(setNativeValue(ye,0),e=Animated.sequence([Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),triggerHaptic("notificationError")),je.current=se,()=>e?.stop()},[se,ye,Se,ve]);const Te=useCallback(e=>{U(!0),P?.(e)},[P]),we=useCallback(e=>{U(!1),E?.(e)},[E]),Fe=useCallback(()=>{triggerHaptic("selection"),ee(e=>!e)},[]),Ie=useMemo(()=>{const e=q.components.input?.fillColors?.[J];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[q.components.input?.fillColors,J]),Re=q.colors.field.caret,Ve=H??X.radius,ke=q.components.input?.tintLabelOnFocus??!1,Ae=Q&&ke?q.colors.field.borderFocused:q.colors.field.label,ze=ye.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Ce=Boolean(m)||Boolean(x)||ie,Ne="underline"===J,De=g?X.icon+q.spacing.md+1+q.spacing.md:0,Le=useFloatingLabel({label:i,enabled:he,floated:fe,required:I,variant:J,sizeTokens:X,leadingOffset:De,trailingOffset:Ce?X.icon+q.spacing.sm:0,textAlign:V,paddingLeft:Ne?q.spacing.none:X.paddingX,lineHeight:ne?Y:void 0,restNudge:oe,floatTrim:ne?2:0,color:Ae,style:D}),He=resolveFieldTextStyle(q,{disabled:p}),Pe=He.color,Ee=He.placeholderColor,Me=I&&!ce&&!le&&"string"==typeof o&&o.length>0,Be=se?s:a,Oe=_&&"number"==typeof R&&"string"==typeof l?`${l.length} / ${R}`:null,Ge=se?q.colors.field.message:q.colors.text.secondary,qe=useNotationInk(L,X.messageText,Ge),We=M??fieldTextAsString(i)??o,Xe=q.colors.field,$e=p?Xe.iconDisabled:Q?Xe.iconFocused:Xe.icon,Ye={focused:Q,disabled:p,error:se,color:$e,size:X.icon},renderSlot=e=>renderSlotIcon(e,Ye),Je=(()=>{if(ie){const e=(Z?q.icons?.eyeOff:q.icons?.eye)??(Z?defaultIcons.eyeOff:defaultIcons.eye);return _jsx(Pressable,{onPress:Fe,disabled:!pe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:X.icon,color:$e})})}const e=x?_jsx(Text,{style:[W.unit,{fontSize:X.text,color:Ee},h],children:x}):null,t=m?_jsx(View,{children:renderSlot(m)}):null;return e&&t?_jsxs(View,{style:W.trailingRow,children:[e,t]}):e??t})(),Ke=g?_jsx(View,{children:renderSlot(g)}):null,Qe=StyleSheet.flatten(b),Ue=Qe?.fontSize??X.text,Ze=Qe?.color??Ee,et=useMemo(()=>({fontSize:Ue,color:Ze}),[Ue,Ze]),tt=ue?"string"==typeof y||"number"==typeof y?_jsx(Text,{style:[W.prefix,{fontSize:X.text,color:Ee,marginRight:q.spacing.xs,lineHeight:ne?Y:void 0,paddingTop:ne?oe:void 0},b],children:y}):_jsx(View,{style:[W.prefixNode,{marginRight:q.spacing.xs,minHeight:ne?Y:void 0,justifyContent:"center",paddingTop:ne?oe:void 0}],children:_jsx(Text,{style:[W.prefix,{fontSize:X.text,color:Ee,lineHeight:ne?Y:void 0},b],children:_jsx(NotationInkContext.Provider,{value:et,children:y})})}):null,it=S?_jsx(Button,{variant:S.variant??"outline",tone:S.tone??"primary",size:T,title:S.label,leftIcon:S.icon,loading:S.loading,disabled:p||S.disabled,onPress:S.onPress,pressAnimation:!1,testID:S.testID,style:[W.action,{minHeight:X.minHeight,alignSelf:ne?"flex-start":"stretch"},j]}):null;return _jsxs(Animated.View,{style:[W.container,{transform:[{translateX:ze}]},z],children:[ce&&!he?_jsx(FieldLabel,{size:T,required:I,help:n,color:Ae,style:D,children:i}):null,_jsxs(View,{style:[W.fieldRow,{columnGap:q.spacing.sm,alignItems:ne?"flex-start":"stretch"}],children:[_jsxs(View,{style:W.fieldWrapper,children:[_jsxs(FieldBase,{size:T,variant:J,focused:Q,disabled:p,error:se,filled:le,minHeight:ne?$:void 0,borderRadius:Ve,fillOverrides:Ie,leading:Ke,leadingDivider:null!=g,paddingLeft:Ne?q.spacing.none:void 0,trailing:Je,slotAlign:ne?"top":"center",slotLineHeight:ne?Y:void 0,topNotch:Le.topNotch,onPress:xe,pressFeedback:!1,style:C,children:[tt,_jsxs(View,{style:W.inputWrap,children:[_jsx(TextInput,{ref:me,style:[W.input,{color:Pe,fontSize:X.text,...He.weightStyle,paddingLeft:Ne?q.spacing.none:void 0,minHeight:ne?$-2*X.paddingY:void 0,lineHeight:ne?Y:void 0,paddingTop:ne?oe:void 0,textAlignVertical:ne?"top":"center"},N],textAlign:V,placeholder:he&&!fe||Me?void 0:o,placeholderTextColor:Ee,value:k&&null!=l?k(l):l,onChangeText:e=>{r&&r(A?A(e):e)},onFocus:Te,onBlur:we,editable:pe,readOnly:v,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:R,selectionColor:Re,accessibilityLabel:We,accessibilityState:{disabled:p},"aria-disabled":p,testID:B,...G}),Me?_jsx(RequiredPlaceholder,{text:o,color:Ee,fontSize:X.text,weightStyle:He.weightStyle,align:ne?"top":"center",paddingTop:ne?oe:void 0,textAlign:V}):null]})]}),Le.node]}),it]}),de||Oe?_jsxs(View,{style:[W.footerRow,{marginTop:X.messageGap}],children:[de?_jsxs(Animated.View,{style:[W.messageRow,{columnGap:q.spacing.xs,opacity:be}],accessibilityLiveRegion:se?"polite":"none",children:[se?_jsx(FieldErrorGlyph,{size:X.messageText,color:Ge}):null,_jsx(Text,{style:[W.messageText,{color:Ge,fontSize:X.messageText,...fontFor(q,"normal")},L],children:_jsx(NotationInkContext.Provider,{value:qe,children:Be})})]}):_jsx(View,{style:W.footerSpacer}),Oe?_jsx(Text,{style:[W.counterText,{color:q.colors.text.tertiary,fontSize:X.messageText,...fontFor(q,"normal")}],children:Oe}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:e.spacing.none,margin:e.spacing.none,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:e.spacing.sm},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:e.spacing.sm},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});export{Input};export default Input;

package/lib/module/components/ListItem/ListItem.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_FALLBACK={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}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.listItem?.[t]??{}};return{paddingVertical:e.spacing[i.paddingVertical],titleSize:e.typography.fontSize[i.titleFontSize],subtitleSize:e.typography.fontSize[i.subtitleFontSize],minHeight:i.minHeight}},Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.icons?.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,DEFAULT_BOX_SIZE=20,SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=i.components.checkbox?.md?.boxSize??20,o=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.colors.border.width,borderRadius:i.radius.xs,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors.onPrimary,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:o,description:n,children:l,titleLines:r=1,subtitleLines:a=1,left:c,icon:d,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:g=!1,checked:p=!1,onCheckedChange:x,actions:b,onPress:y,haptic:f,selected:S=!1,disabled:j=!1,size:_="md",divider:w=!1,chevron:I=!1,leftActions:L,rightActions:k,contextMenu:v,accessibilityLabel:z,accessibilityHint:F,style:V,containerStyle:A,titleStyle:C,subtitleStyle:B,descriptionStyle:R,leftSlotStyle:H,rightSlotStyle:D,testID:P}=e,T=useTheme(),E=useMemo(()=>sizeFor(T,_),[T,_]),M=stylesFor(T),{fontScale:W}=useWindowDimensions(),O=!!h&&("below"===u||"auto"===u&&W>1.2),G=useContextMenu(j?void 0:v,{haptic:f||!1,testID:P}),Z=useMemo(()=>mergeRefs(t,G.hostRef),[t,G.hostRef]),N=g||!!y,K=N||G.enabled,U=K&&!j,{style:X,pressIn:q,pressOut:J}=usePressAnimation({enabled:U}),Q=useFlickGuard(),Y=z??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=c??(void 0===d?null:_jsx(IconBadge,{icon:d,tone:m,size:BADGE_SIZE[_]})),ee=g?_jsxs(View,{style:M.selectionLead,children:[_jsx(SelectionBox,{checked:p,disabled:j}),$?_jsx(View,{style:M.selectionLeadContent,children:$}):null]}):$,te=null!=b&&!1!==b&&!(Array.isArray(b)&&0===b.length),ie=w&&!te,se=_jsxs(View,{style:[M.row,{paddingVertical:E.paddingVertical,minHeight:E.minHeight,backgroundColor:S?T.colors.surface.selected:"transparent"},ie?M.divider:null,j?M.disabled:null,A],children:[ee?_jsx(View,{style:[M.leftSlot,H],children:ee}):null,_jsxs(View,{style:M.middle,children:[null==i||isText(i)?_jsx(Text,{style:[M.title,{fontSize:E.titleSize,...fontFor(T,"medium"),color:j?T.colors.text.disabled:T.colors.text.primary},C],numberOfLines:r,children:i??" "}):i,null==o||""===o?null:isText(o)?_jsx(Text,{style:[M.subtitle,{fontSize:E.subtitleSize,color:j?T.colors.text.disabled:T.colors.text.secondary},B],numberOfLines:a,children:o}):o,n?_jsx(Text,{style:[M.description,{fontSize:E.subtitleSize,color:j?T.colors.text.disabled:T.colors.text.tertiary},R],numberOfLines:2,children:n}):null,null!=l&&!1!==l?_jsx(View,{style:M.body,children:l}):null,O?_jsx(View,{style:[M.rightBelow,D],children:h}):null]}),h&&!O||I?_jsxs(View,{style:[M.rightSlot,O?null:D],children:[O?null:h,I?_jsx(View,{style:h&&!O?M.chevronWithRight:null,children:_jsx(Chevron,{color:j?T.colors.text.disabled:T.colors.text.tertiary})}):null]}):null]}),oe=K?_jsx(Animated.View,{style:[X,V],children:_jsx(Pressable,{ref:Z,onPress:e=>{U&&N&&!Q.isFlick(e)&&(f&&triggerHaptic(f),g?x?.(!p):y?.(e))},onPressIn:e=>{Q.onPressIn(e),q()},onPressOut:J,disabled:!U,accessibilityRole:g?"checkbox":y?"button":void 0,accessibilityLabel:Y,accessibilityHint:F,accessibilityState:g?{checked:p,disabled:!U}:{selected:S,disabled:!U},"aria-disabled":!U,...g?{"aria-checked":p}:{"aria-selected":S},testID:P,android_ripple:{color:T.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?M.pressed:null,...G.hostProps,children:se})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:Y,accessibilityHint:F,accessibilityState:{selected:S,disabled:j},"aria-selected":S,"aria-disabled":j,testID:P,style:V,children:se}),ne=L&&L.length>0||k&&k.length>0,le=te?_jsxs(View,{style:[S?{backgroundColor:T.colors.surface.selected}:null,w?M.divider:null],children:[oe,_jsx(View,{style:M.actions,children:renderActions(b)})]}):oe,re=ne?_jsx(Swipeable,{leftActions:L,rightActions:k,accessibilityLabel:Y,children:le}):le;return s?_jsx(ListItemSkeleton,{...e}):G.enabled?_jsxs(_Fragment,{children:[re,G.renderSurface(_jsx(View,{style:M.preview,children:se}))]}):re}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:o,chevron:n,size:l="md",containerStyle:r,style:a})=>{const c=useTheme(),d=sizeFor(c,l),m=Math.round(1.15*d.titleSize),h=Math.round(1.15*d.subtitleSize);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:c.spacing.md,paddingVertical:d.paddingVertical,minHeight:d.minHeight},r,a],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:c.spacing.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:c.spacing.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:c.spacing.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==o||n?_jsx(View,{style:{marginLeft:c.spacing.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.primary},pressed:{backgroundColor:e.colors.surface.pressed},disabled:{opacity:.55},leftSlot:{marginRight:e.spacing.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.spacing.sm},body:{marginTop:e.spacing.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.spacing.xs},rightSlot:{marginLeft:e.spacing.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.sm,paddingHorizontal:e.spacing.md,paddingBottom:e.spacing.md},chevronWithRight:{marginLeft:e.spacing.xs},preview:{flex:1,backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:2,...fontFor(e,"normal")},description:{marginTop:2,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveCheckboxSize,resolveListItemSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.icons?.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=resolveCheckboxSize(i,"md").boxSize,o=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.colors.border.width,borderRadius:i.radius.sm,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors.onPrimary,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:o,description:r,children:l,titleLines:n=1,subtitleLines:c=1,left:a,icon:d,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:g=!1,checked:p=!1,onCheckedChange:x,actions:y,onPress:b,haptic:f,selected:S=!1,disabled:j=!1,size:w="md",divider:_=!1,chevron:v=!1,leftActions:I,rightActions:k,contextMenu:L,accessibilityLabel:C,accessibilityHint:V,style:A,containerStyle:R,titleStyle:T,subtitleStyle:B,descriptionStyle:z,leftSlotStyle:D,rightSlotStyle:P,testID:F}=e,H=useTheme(),M=useMemo(()=>resolveListItemSize(H,w),[H,w]),W=stylesFor(H),{fontScale:E}=useWindowDimensions(),O=!!h&&("below"===u||"auto"===u&&E>1.2),G=useContextMenu(j?void 0:L,{haptic:f||!1,testID:F}),N=useMemo(()=>mergeRefs(t,G.hostRef),[t,G.hostRef]),Y=g||!!b,Z=Y||G.enabled,U=Z&&!j,{style:q,pressIn:J,pressOut:K}=usePressAnimation({enabled:U}),Q=useFlickGuard(),X=C??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=a??(void 0===d?null:_jsx(IconBadge,{icon:d,tone:m,size:BADGE_SIZE[w]})),ee=g?_jsxs(View,{style:W.selectionLead,children:[_jsx(SelectionBox,{checked:p,disabled:j}),$?_jsx(View,{style:W.selectionLeadContent,children:$}):null]}):$,te=null!=y&&!1!==y&&!(Array.isArray(y)&&0===y.length),ie=_&&!te,se=_jsxs(View,{style:[W.row,{paddingVertical:M.paddingY,minHeight:M.minHeight,backgroundColor:S?H.colors.surface.selected:"transparent"},ie?W.divider:null,j?W.disabled:null,R],children:[ee?_jsx(View,{style:[W.leftSlot,D],children:ee}):null,_jsxs(View,{style:W.middle,children:[null==i||isText(i)?_jsx(Text,{style:[W.title,{fontSize:M.titleText,...fontFor(H,"medium"),color:j?H.colors.text.disabled:H.colors.text.primary},T],numberOfLines:n,children:i??" "}):i,null==o||""===o?null:isText(o)?_jsx(Text,{style:[W.subtitle,{fontSize:M.subtitleText,color:j?H.colors.text.disabled:H.colors.text.secondary},B],numberOfLines:c,children:o}):o,r?_jsx(Text,{style:[W.description,{fontSize:M.subtitleText,color:j?H.colors.text.disabled:H.colors.text.tertiary},z],numberOfLines:2,children:r}):null,null!=l&&!1!==l?_jsx(View,{style:W.body,children:l}):null,O?_jsx(View,{style:[W.rightBelow,P],children:h}):null]}),h&&!O||v?_jsxs(View,{style:[W.rightSlot,O?null:P],children:[O?null:h,v?_jsx(View,{style:h&&!O?W.chevronWithRight:null,children:_jsx(Chevron,{color:j?H.colors.text.disabled:H.colors.text.tertiary})}):null]}):null]}),oe=Z?_jsx(Animated.View,{style:[q,A],children:_jsx(Pressable,{ref:N,onPress:e=>{U&&Y&&!Q.isFlick(e)&&(f&&triggerHaptic(f),g?x?.(!p):b?.(e))},onPressIn:e=>{Q.onPressIn(e),J()},onPressOut:K,disabled:!U,accessibilityRole:g?"checkbox":b?"button":void 0,accessibilityLabel:X,accessibilityHint:V,accessibilityState:g?{checked:p,disabled:!U}:{selected:S,disabled:!U},"aria-disabled":!U,...g?{"aria-checked":p}:{"aria-selected":S},testID:F,android_ripple:{color:H.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?W.pressed:null,...G.hostProps,children:se})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:X,accessibilityHint:V,accessibilityState:{selected:S,disabled:j},"aria-selected":S,"aria-disabled":j,testID:F,style:A,children:se}),re=I&&I.length>0||k&&k.length>0,le=te?_jsxs(View,{style:[S?{backgroundColor:H.colors.surface.selected}:null,_?W.divider:null],children:[oe,_jsx(View,{style:W.actions,children:renderActions(y)})]}):oe,ne=re?_jsx(Swipeable,{leftActions:I,rightActions:k,accessibilityLabel:X,children:le}):le;return s?_jsx(ListItemSkeleton,{...e}):G.enabled?_jsxs(_Fragment,{children:[ne,G.renderSurface(_jsx(View,{style:W.preview,children:se}))]}):ne}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:o,chevron:r,size:l="md",containerStyle:n,style:c})=>{const a=useTheme(),d=resolveListItemSize(a,l),m=Math.round(1.15*d.titleText),h=Math.round(1.15*d.subtitleText);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:a.spacing.md,paddingVertical:d.paddingY,minHeight:d.minHeight},n,c],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:a.spacing.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:a.spacing.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:a.spacing.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==o||r?_jsx(View,{style:{marginLeft:a.spacing.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.primary},pressed:{backgroundColor:e.colors.surface.pressed},disabled:{opacity:.55},leftSlot:{marginRight:e.spacing.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.spacing.sm},body:{marginTop:e.spacing.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.spacing.xs},rightSlot:{marginLeft:e.spacing.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.sm,paddingHorizontal:e.spacing.md,paddingBottom:e.spacing.md},chevronWithRight:{marginLeft:e.spacing.xs},preview:{flex:1,backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:e.spacing.xxs,...fontFor(e,"normal")},description:{marginTop:e.spacing.xxs,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;

package/lib/module/components/Markdown/Markdown.js

@@ -1 +1 @@
-"use strict";import{useMemo}from"react";import{Linking,Platform,StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{parseMarkdown}from"./parse.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const renderInline=(e,t,r,o="i")=>e.map((e,n)=>{const s=`${o}-${n}`;switch(e.type){case"text":return _jsx(Text,{children:e.value},s);case"strong":return _jsx(Text,{style:{fontWeight:t.typography.fontWeight.bold},children:renderInline(e.children,t,r,s)},s);case"em":return _jsx(Text,{style:{fontStyle:"italic"},children:renderInline(e.children,t,r,s)},s);case"strike":return _jsx(Text,{style:{textDecorationLine:"line-through"},children:renderInline(e.children,t,r,s)},s);case"code":return _jsx(Text,{style:{fontFamily:MONO,backgroundColor:t.colors.background.secondary,color:t.colors.text.primary},children:e.value},s);case"link":return _jsx(Text,{accessibilityRole:"link",onPress:()=>r(e.href),style:{color:t.colors.text.link,textDecorationLine:"underline"},children:renderInline(e.children,t,r,s)},s);default:return null}}),MONO=Platform.select({ios:"Menlo",android:"monospace",default:"monospace"}),HEADING_SCALE={1:"3xl",2:"2xl",3:"xl",4:"lg",5:"base",6:"sm"};export const Markdown=({children:e,onLinkPress:t,loading:r=!1,style:o,textStyle:n,testID:s})=>{const l=useTheme(),i=useMemo(()=>createStyles(l),[l]),c=useMemo(()=>parseMarkdown(e??""),[e]),handleLink=e=>{t?t(e):Linking.openURL(e).catch(()=>{})};return r?_jsx(MarkdownSkeleton,{style:o,testID:s}):0===c.length?null:_jsx(View,{style:o,testID:s,children:c.map((e,t)=>_jsx(MarkdownBlock,{block:e,theme:l,styles:i,textStyle:n,onLinkPress:handleLink},`b-${t}`))})};Markdown.displayName="Markdown";const MarkdownBlock=({block:e,theme:t,styles:r,textStyle:o,onLinkPress:n})=>{switch(e.type){case"heading":return _jsx(Text,{accessibilityRole:"header",style:[r.block,{fontSize:t.typography.fontSize[HEADING_SCALE[e.level]],fontWeight:t.typography.fontWeight.semibold,color:t.colors.text.primary},o],children:renderInline(e.children,t,n)});case"paragraph":return _jsx(Text,{style:[r.block,r.body,o],children:renderInline(e.children,t,n)});case"listItem":return _jsxs(View,{style:[r.listRow,{marginLeft:e.depth*t.spacing.md}],children:[_jsx(Text,{style:[r.body,r.bullet,o],children:e.ordered?`${e.index}.`:"•"}),_jsx(Text,{style:[r.body,r.listText,o],children:renderInline(e.children,t,n)})]});case"quote":return _jsx(View,{style:r.quote,children:_jsx(Text,{style:[r.body,r.quoteText,o],children:renderInline(e.children,t,n)})});case"codeBlock":return _jsx(View,{style:r.codeBlock,children:_jsx(Text,{style:r.codeText,children:e.value})});case"rule":return _jsx(View,{style:r.rule});default:return null}},MarkdownSkeleton=({style:e,testID:t})=>_jsxs(View,{style:e,testID:t,children:[_jsx(Skeleton,{shape:"text",width:"70%",height:20,style:{marginBottom:8}}),_jsx(Skeleton,{shape:"text",width:"100%",height:14,style:{marginBottom:6}}),_jsx(Skeleton,{shape:"text",width:"92%",height:14,style:{marginBottom:6}}),_jsx(Skeleton,{shape:"text",width:"60%",height:14})]}),createStyles=e=>StyleSheet.create({block:{marginBottom:e.spacing.sm},body:{fontSize:e.typography.fontSize.base,color:e.colors.text.primary,lineHeight:1.5*e.typography.fontSize.base},listRow:{flexDirection:"row",marginBottom:e.spacing.xs},bullet:{width:e.spacing.lg},listText:{flex:1},quote:{borderLeftWidth:3,borderLeftColor:e.colors.border.secondary,paddingLeft:e.spacing.sm,marginBottom:e.spacing.sm},quoteText:{color:e.colors.text.secondary,fontStyle:"italic"},codeBlock:{backgroundColor:e.colors.background.secondary,borderRadius:e.radius.sm,...smoothCorners,padding:e.spacing.sm,marginBottom:e.spacing.sm},codeText:{fontFamily:MONO,fontSize:e.typography.fontSize.sm,color:e.colors.text.primary},rule:{height:StyleSheet.hairlineWidth,backgroundColor:e.colors.border.primary,marginVertical:e.spacing.md}});
+"use strict";import{useMemo}from"react";import{Linking,Platform,StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{parseMarkdown}from"./parse.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const renderInline=(e,t,r,o="i")=>e.map((e,n)=>{const s=`${o}-${n}`;switch(e.type){case"text":return _jsx(Text,{children:e.value},s);case"strong":return _jsx(Text,{style:{fontWeight:t.typography.fontWeight.bold},children:renderInline(e.children,t,r,s)},s);case"em":return _jsx(Text,{style:{fontStyle:"italic"},children:renderInline(e.children,t,r,s)},s);case"strike":return _jsx(Text,{style:{textDecorationLine:"line-through"},children:renderInline(e.children,t,r,s)},s);case"code":return _jsx(Text,{style:{fontFamily:MONO,backgroundColor:t.colors.background.secondary,color:t.colors.text.primary},children:e.value},s);case"link":return _jsx(Text,{accessibilityRole:"link",onPress:()=>r(e.href),style:{color:t.colors.text.link,textDecorationLine:"underline"},children:renderInline(e.children,t,r,s)},s);default:return null}}),MONO=Platform.select({ios:"Menlo",android:"monospace",default:"monospace"}),HEADING_SCALE={1:"3xl",2:"2xl",3:"xl",4:"lg",5:"base",6:"sm"};export const Markdown=({children:e,onLinkPress:t,loading:r=!1,style:o,textStyle:n,testID:s})=>{const l=useTheme(),i=useMemo(()=>createStyles(l),[l]),c=useMemo(()=>parseMarkdown(e??""),[e]),handleLink=e=>{t?t(e):Linking.openURL(e).catch(()=>{})};return r?_jsx(MarkdownSkeleton,{style:o,testID:s}):0===c.length?null:_jsx(View,{style:o,testID:s,children:c.map((e,t)=>_jsx(MarkdownBlock,{block:e,theme:l,styles:i,textStyle:n,onLinkPress:handleLink},`b-${t}`))})};Markdown.displayName="Markdown";const MarkdownBlock=({block:e,theme:t,styles:r,textStyle:o,onLinkPress:n})=>{switch(e.type){case"heading":return _jsx(Text,{accessibilityRole:"header",style:[r.block,{fontSize:t.typography.fontSize[HEADING_SCALE[e.level]],fontWeight:t.typography.fontWeight.semibold,color:t.colors.text.primary},o],children:renderInline(e.children,t,n)});case"paragraph":return _jsx(Text,{style:[r.block,r.body,o],children:renderInline(e.children,t,n)});case"listItem":return _jsxs(View,{style:[r.listRow,{marginLeft:e.depth*t.spacing.md}],children:[_jsx(Text,{style:[r.body,r.bullet,o],children:e.ordered?`${e.index}.`:"•"}),_jsx(Text,{style:[r.body,r.listText,o],children:renderInline(e.children,t,n)})]});case"quote":return _jsx(View,{style:r.quote,children:_jsx(Text,{style:[r.body,r.quoteText,o],children:renderInline(e.children,t,n)})});case"codeBlock":return _jsx(View,{style:r.codeBlock,children:_jsx(Text,{style:r.codeText,children:e.value})});case"rule":return _jsx(View,{style:r.rule});default:return null}},MarkdownSkeleton=({style:e,testID:t})=>{const r=useTheme();return _jsxs(View,{style:e,testID:t,children:[_jsx(Skeleton,{shape:"text",width:"70%",height:20,style:{marginBottom:r.spacing.sm}}),_jsx(Skeleton,{shape:"text",width:"100%",height:14,style:{marginBottom:r.spacing.xs}}),_jsx(Skeleton,{shape:"text",width:"92%",height:14,style:{marginBottom:r.spacing.xs}}),_jsx(Skeleton,{shape:"text",width:"60%",height:14})]})},createStyles=e=>StyleSheet.create({block:{marginBottom:e.spacing.sm},body:{fontSize:e.typography.fontSize.base,color:e.colors.text.primary,lineHeight:1.5*e.typography.fontSize.base},listRow:{flexDirection:"row",marginBottom:e.spacing.xs},bullet:{width:e.spacing.lg},listText:{flex:1},quote:{borderLeftWidth:3,borderLeftColor:e.colors.border.secondary,paddingLeft:e.spacing.sm,marginBottom:e.spacing.sm},quoteText:{color:e.colors.text.secondary,fontStyle:"italic"},codeBlock:{backgroundColor:e.colors.background.secondary,borderRadius:e.radius.sm,...smoothCorners,padding:e.spacing.sm,marginBottom:e.spacing.sm},codeText:{fontFamily:MONO,fontSize:e.typography.fontSize.sm,color:e.colors.text.primary},rule:{height:StyleSheet.hairlineWidth,backgroundColor:e.colors.border.primary,marginVertical:e.spacing.md}});

package/lib/module/components/MessageBubble/MessageBubble.js

@@ -1 +1 @@
-"use strict";import{formatTime}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef}from"react";import{Pressable,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{Markdown}from"../Markdown/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_BUBBLE_LABELS=Object.freeze({you:"You",sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",retry:"Try again",copy:"Copy",replyTo:e=>e?`Reply to ${e}`:"Reply"});const RUN_GAP=2,MAX_WIDTH="85%",STATUS_ICON=14,statusIcon=e=>{switch(e){case"sending":return"clock";case"sent":return"check";case"failed":return"alert-circle";default:return"check-check"}},statusColour=(e,t)=>{switch(t){case"read":return e.colors.toneText.info;case"failed":return e.colors.toneText.error;default:return e.colors.text.tertiary}};export const MessageBubble=({side:e,text:t,children:s,markdown:o=!1,groupPosition:r="single",author:n,time:i,status:a,replyTo:l,streaming:c=!1,error:u,onRetry:d,actions:m,onCopy:p,onLongPress:b,footer:x,labels:y,haptic:f,style:h,testID:g})=>{const T=useTheme(),j=useMemo(()=>buildStyles(T),[T]),_=y?{...DEFAULT_MESSAGE_BUBBLE_LABELS,...y}:DEFAULT_MESSAGE_BUBBLE_LABELS,L="mine"===e,S="single"===r||"first"===r,P="single"===r||"last"===r,B=null==i?"":formatTime(i),M=("failed"===a||Boolean(u))&&Boolean(d),A=L?_.you:n??"",E=useMemo(()=>{const e=[];return p&&!m?.some(e=>"copy"===e.name)&&e.push({name:"copy",label:_.copy,onPress:()=>p(t)}),m&&e.push(...m),l?.onPress&&e.push({name:"openReply",label:_.replyTo(l.author),onPress:l.onPress}),M&&d&&e.push({name:"retry",label:_.retry,onPress:d}),e},[m,p,t,l,M,d,_]),v=(m?.length??0)>0||Boolean(p),I=useMemo(()=>v?{items:E.map(({name:e,label:t,onPress:s})=>({key:e,label:t,onPress:s}))}:void 0,[v,E]),R=useContextMenu(I,{haptic:f,testID:g}),k=R.hostProps.onLongPress,C=!s||(m?.length??0)>0,w=a&&L?_[a]:"",D=[A,B,t,l?`${_.replyTo(l.author)}: ${l.text}`:"",w].filter(Boolean).join(", "),$=useRef(c);useEffect(()=>{$.current&&!c&&!u&&t&&announce(A?`${A}, ${t}`:t),$.current=c},[c,u,t,A]);const U=useRef(u);useEffect(()=>{u&&u!==U.current&&announce(u,{polite:!1}),U.current=u},[u]);const z=useCallback(e=>{k?.(e),b?.()},[k,b]),H=useCallback(e=>{E.find(t=>t.name===e.nativeEvent.actionName)?.onPress()},[E]),V=T.radius.xl,F=T.radius.xs,O=L?{borderTopRightRadius:S?V:F,borderBottomRightRadius:P?V:F}:{borderTopLeftRadius:S?V:F,borderBottomLeftRadius:P?V:F},G=s??(o?_jsx(Markdown,{children:t}):_jsx(Text,{variant:"body",children:t})),N=l?_jsxs(Pressable,{onPress:l.onPress,disabled:!l.onPress,accessibilityRole:l.onPress?"button":void 0,accessibilityLabel:`${_.replyTo(l.author)}: ${l.text}`,style:j.quote,children:[l.author?_jsx(Text,{variant:"caption",weight:"semibold",color:"link",numberOfLines:1,children:l.author}):null,_jsx(Text,{variant:"bodySmall",color:"secondary",numberOfLines:2,children:l.text})]}):null,W=[j.bubble,L?j.mine:j.theirs,O],q=C?{accessible:!0,accessibilityLabel:D,accessibilityState:{busy:c},"aria-busy":c,accessibilityActions:E.map(({name:e,label:t})=>({name:e,label:t})),onAccessibilityAction:H}:{accessible:!1},X=v?_jsxs(Pressable,{ref:R.hostRef,...R.hostProps,onLongPress:z,delayLongPress:350,style:W,testID:g?`${g}-bubble`:void 0,...q,children:[N,G]}):_jsxs(View,{style:W,testID:g?`${g}-bubble`:void 0,...q,children:[N,G]}),Y=P&&(""!==B||L&&a);return _jsxs(View,{style:[j.root,L?j.rootMine:j.rootTheirs,{marginTop:S?T.spacing.sm:2},h],testID:g,children:[!L&&S&&n?_jsx(Text,{variant:"caption",color:"secondary",style:j.author,numberOfLines:1,importantForAccessibility:C?"no-hide-descendants":"auto",accessibilityElementsHidden:C,children:n}):null,X,R.renderSurface(),Y?_jsxs(View,{style:[j.meta,L?j.metaMine:null],importantForAccessibility:C?"no-hide-descendants":"auto",accessibilityElementsHidden:C,children:[B?_jsx(Text,{variant:"caption",color:"tertiary",children:B}):null,L&&a?_jsx(AppIcon,{name:statusIcon(a),size:14,color:statusColour(T,a),accessibilityLabel:_[a],testID:g?`${g}-status-${a}`:void 0}):null]}):null,u?_jsx(Text,{variant:"bodySmall",color:"error",style:L?j.endText:null,children:u}):null,M?_jsx(Button,{title:_.retry,variant:"link",size:"sm",leftIcon:"refresh-cw",onPress:d,testID:g?`${g}-retry`:void 0}):null,x]})};const buildStyles=e=>StyleSheet.create({root:{maxWidth:"85%",gap:e.spacing.xs},rootMine:{alignSelf:"flex-end",alignItems:"flex-end"},rootTheirs:{alignSelf:"flex-start",alignItems:"flex-start"},author:{paddingHorizontal:e.spacing.md},bubble:{borderRadius:e.radius.xl,...smoothCorners,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm,gap:e.spacing.xs},mine:{backgroundColor:e.colors.primaryMuted},theirs:{backgroundColor:e.colors.background.secondary},quote:{borderLeftWidth:3,borderLeftColor:e.colors.primary,paddingLeft:e.spacing.sm,paddingVertical:e.spacing.xs},meta:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs,paddingHorizontal:e.spacing.xs},metaMine:{justifyContent:"flex-end"},endText:{textAlign:"right"}});export default MessageBubble;
+"use strict";import{formatTime}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef}from"react";import{Pressable,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{Markdown}from"../Markdown/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_BUBBLE_LABELS=Object.freeze({you:"You",sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",retry:"Try again",copy:"Copy",replyTo:e=>e?`Reply to ${e}`:"Reply"});const MAX_WIDTH="85%",STATUS_ICON=14,statusIcon=e=>{switch(e){case"sending":return"clock";case"sent":return"check";case"failed":return"alert-circle";default:return"check-check"}},statusColour=(e,t)=>{switch(t){case"read":return e.colors.toneText.info;case"failed":return e.colors.toneText.error;default:return e.colors.text.tertiary}};export const MessageBubble=({side:e,text:t,children:s,markdown:o=!1,groupPosition:r="single",author:n,time:i,status:a,replyTo:l,streaming:c=!1,error:u,onRetry:d,actions:m,onCopy:p,onLongPress:b,footer:x,labels:y,haptic:f,style:h,testID:g})=>{const T=useTheme(),j=useMemo(()=>buildStyles(T),[T]),L=y?{...DEFAULT_MESSAGE_BUBBLE_LABELS,...y}:DEFAULT_MESSAGE_BUBBLE_LABELS,_="mine"===e,S="single"===r||"first"===r,B="single"===r||"last"===r,P=null==i?"":formatTime(i),M=("failed"===a||Boolean(u))&&Boolean(d),E=_?L.you:n??"",A=useMemo(()=>{const e=[];return p&&!m?.some(e=>"copy"===e.name)&&e.push({name:"copy",label:L.copy,onPress:()=>p(t)}),m&&e.push(...m),l?.onPress&&e.push({name:"openReply",label:L.replyTo(l.author),onPress:l.onPress}),M&&d&&e.push({name:"retry",label:L.retry,onPress:d}),e},[m,p,t,l,M,d,L]),v=(m?.length??0)>0||Boolean(p),I=useMemo(()=>v?{items:A.map(({name:e,label:t,onPress:s})=>({key:e,label:t,onPress:s}))}:void 0,[v,A]),k=useContextMenu(I,{haptic:f,testID:g}),C=k.hostProps.onLongPress,R=!s||(m?.length??0)>0,w=a&&_?L[a]:"",D=[E,P,t,l?`${L.replyTo(l.author)}: ${l.text}`:"",w].filter(Boolean).join(", "),$=useRef(c);useEffect(()=>{$.current&&!c&&!u&&t&&announce(E?`${E}, ${t}`:t),$.current=c},[c,u,t,E]);const U=useRef(u);useEffect(()=>{u&&u!==U.current&&announce(u,{polite:!1}),U.current=u},[u]);const z=useCallback(e=>{C?.(e),b?.()},[C,b]),H=useCallback(e=>{A.find(t=>t.name===e.nativeEvent.actionName)?.onPress()},[A]),V=T.radius.xl,F=T.radius.sm,O=_?{borderTopRightRadius:S?V:F,borderBottomRightRadius:B?V:F}:{borderTopLeftRadius:S?V:F,borderBottomLeftRadius:B?V:F},G=s??(o?_jsx(Markdown,{children:t}):_jsx(Text,{variant:"body",children:t})),N=l?_jsxs(Pressable,{onPress:l.onPress,disabled:!l.onPress,accessibilityRole:l.onPress?"button":void 0,accessibilityLabel:`${L.replyTo(l.author)}: ${l.text}`,style:j.quote,children:[l.author?_jsx(Text,{variant:"caption",weight:"semibold",color:"link",numberOfLines:1,children:l.author}):null,_jsx(Text,{variant:"bodySmall",color:"secondary",numberOfLines:2,children:l.text})]}):null,W=[j.bubble,_?j.mine:j.theirs,O],q=R?{accessible:!0,accessibilityLabel:D,accessibilityState:{busy:c},"aria-busy":c,accessibilityActions:A.map(({name:e,label:t})=>({name:e,label:t})),onAccessibilityAction:H}:{accessible:!1},X=v?_jsxs(Pressable,{ref:k.hostRef,...k.hostProps,onLongPress:z,delayLongPress:350,style:W,testID:g?`${g}-bubble`:void 0,...q,children:[N,G]}):_jsxs(View,{style:W,testID:g?`${g}-bubble`:void 0,...q,children:[N,G]}),Y=B&&(""!==P||_&&a);return _jsxs(View,{style:[j.root,_?j.rootMine:j.rootTheirs,{marginTop:S?T.spacing.sm:T.spacing.xxs},h],testID:g,children:[!_&&S&&n?_jsx(Text,{variant:"caption",color:"secondary",style:j.author,numberOfLines:1,importantForAccessibility:R?"no-hide-descendants":"auto",accessibilityElementsHidden:R,children:n}):null,X,k.renderSurface(),Y?_jsxs(View,{style:[j.meta,_?j.metaMine:null],importantForAccessibility:R?"no-hide-descendants":"auto",accessibilityElementsHidden:R,children:[P?_jsx(Text,{variant:"caption",color:"tertiary",children:P}):null,_&&a?_jsx(AppIcon,{name:statusIcon(a),size:14,color:statusColour(T,a),accessibilityLabel:L[a],testID:g?`${g}-status-${a}`:void 0}):null]}):null,u?_jsx(Text,{variant:"bodySmall",color:"error",style:_?j.endText:null,children:u}):null,M?_jsx(Button,{title:L.retry,variant:"link",size:"sm",leftIcon:"refresh-cw",onPress:d,testID:g?`${g}-retry`:void 0}):null,x]})};const buildStyles=e=>StyleSheet.create({root:{maxWidth:"85%",gap:e.spacing.xs},rootMine:{alignSelf:"flex-end",alignItems:"flex-end"},rootTheirs:{alignSelf:"flex-start",alignItems:"flex-start"},author:{paddingHorizontal:e.spacing.md},bubble:{borderRadius:e.radius.xl,...smoothCorners,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm,gap:e.spacing.xs},mine:{backgroundColor:e.colors.primaryMuted},theirs:{backgroundColor:e.colors.background.secondary},quote:{borderLeftWidth:3,borderLeftColor:e.colors.primary,paddingLeft:e.spacing.sm,paddingVertical:e.spacing.xs},meta:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs,paddingHorizontal:e.spacing.xs},metaMine:{justifyContent:"flex-end"},endText:{textAlign:"right"}});export default MessageBubble;

package/lib/module/components/MessageList/MessageList.js

@@ -1 +1 @@
-"use strict";import{formatDate}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{FlatList,StyleSheet,View}from"react-native";import{KeyboardChatScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Badge}from"../Badge/index.js";import{DateSeparator,dayLabel}from"../DateSeparator/index.js";import{IconButton}from"../IconButton/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_LIST_LABELS=Object.freeze({today:"Today",yesterday:"Yesterday",jumpToLatest:"Jump to the latest message",newMessages:e=>1===e?"1 new message":`${e} new messages`,unread:"New messages",loadingOlder:"Loading earlier messages"});const JUMP_AT=160,KEEP_POSITION={minIndexForVisible:0,autoscrollToTopThreshold:160},positionOf=(e,t)=>e?t?"middle":"last":t?"first":"single";export function MessageList({messages:e,keyExtractor:t,renderMessage:o,getAuthorKey:n,getDate:s,firstUnreadKey:r,onLoadOlder:a,loadingOlder:l=!1,hasOlder:i=!0,typing:d,empty:u,getAnnouncement:c,followNew:m,keyboardAware:p=!0,keyboardOffset:f,labels:g,now:y,onScroll:x,contentContainerStyle:b,style:j,testID:S,...h}){const _=useTheme(),w=useSafeAreaInsets(),L=useReducedMotion(),E=useMemo(()=>buildStyles(_),[_]),C=useMemo(()=>({...DEFAULT_MESSAGE_LIST_LABELS,...g}),[g]),v=f??w.bottom,I=useRef(null),T=useRef(!1),[k,M]=useState(!1),[O,D]=useState(0),A=useMemo(()=>{const o=s?e.map(e=>formatDate(s(e))):null,a=n?e.map(n):null,l=void 0===r?-1:e.findIndex(e=>t(e)===r);return e.map((t,n)=>{const r=n===e.length-1,i=null!==o&&(r||o[n]!==o[n+1]),d=null!==a&&!r&&a[n+1]===a[n]&&!i&&n!==l,u=null!==a&&n>0&&a[n-1]===a[n]&&(null===o||o[n-1]===o[n])&&n-1!==l;return{groupPosition:positionOf(d,u),day:i&&s?dayLabel(s(t),{now:y,labels:C}):null,unread:n===l}})},[e,s,n,r,t,y,C]),V=useCallback(()=>{I.current?.scrollToOffset({offset:0,animated:!L}),D(0)},[L]),F=e.length>0?t(e[0]):null,P=useRef(F);useEffect(()=>{const o=P.current;if(P.current=F,null===o||null===F||o===F)return;const n=e.findIndex(e=>t(e)===o);if(-1===n)return void D(0);const s=e.slice(0,n).reverse();for(const e of s){const t=c?.(e);t&&announce(t)}m&&s.some(m)?V():T.current&&D(e=>e+s.length)},[F]);const R=useCallback(e=>{const t=e.nativeEvent.contentOffset.y>160;t!==T.current&&(T.current=t,M(t),t||D(0)),x?.(e)},[x]),B=useCallback(()=>{i&&!l&&a?.()},[i,l,a]),K=useCallback(({item:e,index:t})=>{const n=A[t];return _jsxs(_Fragment,{children:[n?.day?_jsx(DateSeparator,{label:n.day}):null,n?.unread?_jsx(DateSeparator,{label:C.unread,emphasis:!0}):null,o({item:e,index:t,groupPosition:n?.groupPosition??"single"})]})},[A,C.unread,o]),z=useCallback(e=>t(e),[t]),N=useCallback(e=>_jsx(KeyboardChatScrollView,{...e,inverted:!0,offset:v}),[v]),U=O>0?`${C.newMessages(O)}. ${C.jumpToLatest}`:C.jumpToLatest;return _jsxs(View,{style:[E.root,j],children:[_jsx(FlatList,{keyboardShouldPersistTaps:"handled",maintainVisibleContentPosition:KEEP_POSITION,...h,ref:I,data:e,renderItem:K,keyExtractor:z,inverted:!0,onScroll:R,onEndReached:a?B:void 0,ListHeaderComponent:d?_jsx(_Fragment,{children:d}):null,ListFooterComponent:l?_jsx(Spinner,{size:"sm",accessibilityLabel:C.loadingOlder,style:E.older}):null,ListEmptyComponent:u?_jsx(View,{style:E.fill,children:u}):null,renderScrollComponent:p?N:void 0,contentContainerStyle:[E.content,0===e.length?E.grow:null,b],testID:S}),k?_jsxs(View,{style:E.jump,pointerEvents:"box-none",children:[_jsx(View,{style:E.jumpDisc,children:_jsx(IconButton,{icon:"arrow-down",accessibilityLabel:U,variant:"ghost",tone:"neutral",onPress:V,testID:S?`${S}-jump`:void 0})}),O>0?_jsx(View,{style:E.count,pointerEvents:"none",importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,children:_jsx(Badge,{value:O,max:99,tone:"primary",size:"sm"})}):null]}):null]})}const buildStyles=e=>StyleSheet.create({root:{flex:1},content:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},grow:{flexGrow:1},fill:{flex:1},older:{paddingVertical:e.spacing.md},jump:{position:"absolute",right:e.spacing.md,bottom:e.spacing.md},jumpDisc:{borderRadius:e.radius.full,...smoothCorners,backgroundColor:e.colors.background.elevated,...e.shadows.md},count:{position:"absolute",top:-e.spacing.xs,right:-e.spacing.xs}});export default MessageList;
+"use strict";import{formatDate}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{FlatList,StyleSheet,View}from"react-native";import{KeyboardChatScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Badge}from"../Badge/index.js";import{DateSeparator,dayLabel}from"../DateSeparator/index.js";import{IconButton}from"../IconButton/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_LIST_LABELS=Object.freeze({today:"Today",yesterday:"Yesterday",jumpToLatest:"Jump to the latest message",newMessages:e=>1===e?"1 new message":`${e} new messages`,unread:"New messages",loadingOlder:"Loading earlier messages"});const JUMP_AT=160,KEEP_POSITION={minIndexForVisible:0,autoscrollToTopThreshold:160},positionOf=(e,t)=>e?t?"middle":"last":t?"first":"single";export function MessageList({messages:e,keyExtractor:t,renderMessage:o,getAuthorKey:n,getDate:s,firstUnreadKey:r,onLoadOlder:a,loadingOlder:l=!1,hasOlder:i=!0,typing:d,empty:u,getAnnouncement:c,followNew:m,keyboardAware:p=!0,keyboardOffset:f,labels:g,now:y,onScroll:x,contentContainerStyle:b,style:j,testID:S,...h}){const _=useTheme(),w=useSafeAreaInsets(),L=useReducedMotion(),E=useMemo(()=>buildStyles(_),[_]),C=useMemo(()=>({...DEFAULT_MESSAGE_LIST_LABELS,...g}),[g]),v=f??w.bottom,I=useRef(null),T=useRef(!1),[k,M]=useState(!1),[O,D]=useState(0),A=useMemo(()=>{const o=s?e.map(e=>formatDate(s(e))):null,a=n?e.map(n):null,l=void 0===r?-1:e.findIndex(e=>t(e)===r);return e.map((t,n)=>{const r=n===e.length-1,i=null!==o&&(r||o[n]!==o[n+1]),d=null!==a&&!r&&a[n+1]===a[n]&&!i&&n!==l,u=null!==a&&n>0&&a[n-1]===a[n]&&(null===o||o[n-1]===o[n])&&n-1!==l;return{groupPosition:positionOf(d,u),day:i&&s?dayLabel(s(t),{now:y,labels:C}):null,unread:n===l}})},[e,s,n,r,t,y,C]),V=useCallback(()=>{I.current?.scrollToOffset({offset:0,animated:!L}),D(0)},[L]),F=e.length>0?t(e[0]):null,P=useRef(F);useEffect(()=>{const o=P.current;if(P.current=F,null===o||null===F||o===F)return;const n=e.findIndex(e=>t(e)===o);if(-1===n)return void D(0);const s=e.slice(0,n).reverse();for(const e of s){const t=c?.(e);t&&announce(t)}m&&s.some(m)?V():T.current&&D(e=>e+s.length)},[F]);const R=useCallback(e=>{const t=e.nativeEvent.contentOffset.y>160;t!==T.current&&(T.current=t,M(t),t||D(0)),x?.(e)},[x]),B=useCallback(()=>{i&&!l&&a?.()},[i,l,a]),K=useCallback(({item:e,index:t})=>{const n=A[t];return _jsxs(_Fragment,{children:[n?.day?_jsx(DateSeparator,{label:n.day}):null,n?.unread?_jsx(DateSeparator,{label:C.unread,emphasis:!0}):null,o({item:e,index:t,groupPosition:n?.groupPosition??"single"})]})},[A,C.unread,o]),z=useCallback(e=>t(e),[t]),N=useCallback(e=>_jsx(KeyboardChatScrollView,{...e,inverted:!0,offset:v}),[v]),U=O>0?`${C.newMessages(O)}. ${C.jumpToLatest}`:C.jumpToLatest;return _jsxs(View,{style:[E.root,j],children:[_jsx(FlatList,{keyboardShouldPersistTaps:"handled",maintainVisibleContentPosition:KEEP_POSITION,...h,ref:I,data:e,renderItem:K,keyExtractor:z,inverted:!0,onScroll:R,onEndReached:a?B:void 0,ListHeaderComponent:d?_jsx(_Fragment,{children:d}):null,ListFooterComponent:l?_jsx(Spinner,{size:"sm",accessibilityLabel:C.loadingOlder,style:E.older}):null,ListEmptyComponent:u?_jsx(View,{style:E.fill,children:u}):null,renderScrollComponent:p?N:void 0,contentContainerStyle:[E.content,0===e.length?E.grow:null,b],testID:S}),k?_jsxs(View,{style:E.jump,pointerEvents:"box-none",children:[_jsx(View,{style:E.jumpDisc,children:_jsx(IconButton,{icon:"arrow-down",accessibilityLabel:U,variant:"ghost",tone:"neutral",onPress:V,testID:S?`${S}-jump`:void 0})}),O>0?_jsx(View,{style:E.count,pointerEvents:"none",importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,children:_jsx(Badge,{value:O,max:99,tone:"primary",size:"sm"})}):null]}):null]})}const buildStyles=e=>StyleSheet.create({root:{flex:1},content:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},grow:{flexGrow:1},fill:{flex:1},older:{paddingVertical:e.spacing.md},jump:{position:"absolute",right:e.spacing.md,bottom:e.spacing.md},jumpDisc:{borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.background.elevated,...e.shadows.md},count:{position:"absolute",top:-e.spacing.xs,right:-e.spacing.xs}});export default MessageList;

package/lib/module/components/Modal/Modal.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Dimensions,Easing,Platform,Pressable,Modal as RNModal,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{squircleHostRadius}from"../../utils/squircle.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const MODAL_DISMISS_GRACE_MS=300;const Modal=forwardRef((e,t)=>{const{visible:s,onRequestClose:r,presentation:i="centered",backdropOpacity:o,backdropPressClose:a=!0,animationDuration:n,accessibilityLabel:l,hardwareBackPress:u=!0,children:c,contentStyle:d,backdropStyle:m,restoreFocusRef:f,onDismissed:p,haptic:g,testID:b}=e,h=useTheme(),v=usePresenceMotion(),[S,y]=useModalInsets(),x=n??v.duration("normal"),A=Dimensions.get("window").height,M=h.components.modal,R=M?.scaleStartValue??.9,V=useRef(createAnimatedValue(R)).current,j=useRef(createAnimatedValue(0)).current,C=useRef(createAnimatedValue(A)).current,k=useRef(createAnimatedValue(0)).current,w=useRef(null),T=useRef(!1),[D,_]=useState(s),E=useMemo(()=>buildStyles(h),[h]),I=useMemo(()=>{const e=h.colors.background.overlay;if("number"!=typeof o)return e;const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return e;const[s,r,i]=t[1].split(",").map(e=>e.trim());return`rgba(${s}, ${r}, ${i}, ${o})`},[h.colors.background.overlay,o]),N=useMemo(()=>k.interpolate({inputRange:[0,1],outputRange:[transparentOf(I),I]}),[k,I]);useEffect(()=>{s&&_(!0)},[s]),useEffect(()=>{const e=[];if(s&&D){const t=Animated.timing(k,{toValue:1,duration:v.duration("normal"),useNativeDriver:!1});if(t.start(),e.push(t),v.reduced){j.setValue(0),C.setValue(0),V.setValue(1);const t=Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0});t.start(),e.push(t)}else if("bottom"===i){j.setValue(1);const t=Animated.spring(C,{toValue:0,damping:h.motion.spring.gentle.damping,stiffness:h.motion.spring.gentle.stiffness,mass:h.motion.spring.gentle.mass,useNativeDriver:!0});t.start(),e.push(t)}else{const t=Animated.parallel([Animated.spring(V,{toValue:1,damping:h.motion.spring.gentle.damping,stiffness:h.motion.spring.gentle.stiffness,mass:h.motion.spring.gentle.mass,useNativeDriver:!0}),Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0})]);t.start(),e.push(t)}}else if(D){const t=v.duration("fast"),s=Easing.bezier(...h.motion.easing.accelerate),r=Animated.timing(j,{toValue:0,duration:t,easing:s,useNativeDriver:!0}),o=v.reduced?r:"bottom"===i?Animated.timing(C,{toValue:A,duration:t,easing:s,useNativeDriver:!0}):Animated.parallel([Animated.timing(V,{toValue:R,duration:t,easing:s,useNativeDriver:!0}),r]),a=Animated.parallel([o,Animated.timing(k,{toValue:0,duration:v.duration("normal"),useNativeDriver:!1})]);a.start(({finished:e})=>{e&&(C.setValue(A),_(!1))}),e.push(a)}return()=>e.forEach(e=>e.stop())},[s,D,i,x,V,j,k,C,A,h.motion.spring.gentle.damping,h.motion.spring.gentle.stiffness,h.motion.spring.gentle.mass,v,h.motion.easing.accelerate,R]),useEffect(()=>{if("web"===Platform.OS)return;let e,t;return s?(e=setTimeout(()=>{w.current&&AccessibilityInfo.sendAccessibilityEvent(w.current,"focus")},150),T.current=!0):T.current&&(T.current=!1,f&&f.current&&(t=setTimeout(()=>{const e=f.current;e&&AccessibilityInfo.sendAccessibilityEvent(e,"focus")},x))),()=>{e&&clearTimeout(e),t&&clearTimeout(t)}},[s,x,f]);const q=useRef(!1);useEffect(()=>{if(s)return void(q.current=!0);if(!q.current)return;if(q.current=!1,!p)return;const e=setTimeout(p,300);return()=>clearTimeout(e)},[s,p]);const P=useCallback(()=>{if(!a)return;const e=resolveHaptic(g,"selection");e&&triggerHaptic(e),r()},[a,r,g]),z=useCallback(()=>{u&&r()},[u,r]),H=useSquircle("bottom"!==i&&"fullScreen"!==i,h.radius.xl),$=useMemo(()=>"fullScreen"===i?[E.fullScreenContent,{backgroundColor:h.colors.background.elevated}]:"bottom"===i?[E.bottomContent,{backgroundColor:h.colors.background.elevated,borderTopLeftRadius:h.radius.xl,borderTopRightRadius:h.radius.xl,...smoothCorners,paddingTop:h.spacing.lg,paddingHorizontal:h.spacing.lg,paddingBottom:h.spacing.lg+S.bottom},h.shadows.xl]:[E.centeredContent,{backgroundColor:h.colors.background.elevated,borderRadius:H.active&&H.size?squircleHostRadius(H.size.width,H.size.height,h.radius.xl):h.radius.xl,...smoothCorners,padding:h.spacing.xl},h.shadows.xl],[i,h,E,S.bottom,H.active,H.size]),F=useMemo(()=>"bottom"===i?E.bottomWrapper:"fullScreen"===i?E.fullScreenWrapper:E.centeredWrapper,[i,E]),L=useMemo(()=>"bottom"===i?{opacity:j,transform:[{translateY:C}]}:"fullScreen"===i?{opacity:j}:{opacity:j,transform:[{scale:V}]},[i,V,j,C]);return _jsx(RNModal,{visible:D,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:z,testID:b,children:_jsx(View,{ref:e=>{w.current=e,"function"==typeof t?t(e):t&&(t.current=e)},style:E.root,accessible:!1,accessibilityViewIsModal:!0,accessibilityRole:"alert",accessibilityLabel:l,children:_jsxs(ModalSafeArea,{onInsets:y,children:[_jsxs(Animated.View,{collapsable:!1,style:[StyleSheet.absoluteFill,F,{backgroundColor:N},m],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:P,accessibilityRole:"button",accessibilityLabel:"Close modal",disabled:!a}),_jsxs(Animated.View,{style:[$,L,d],onLayout:H.onLayout,pointerEvents:"auto",children:[H.active&&H.size?_jsx(SquircleFill,{width:H.size.width,height:H.size.height,radius:h.radius.xl,fill:h.colors.background.elevated}):null,c]})]}),_jsx(ToastHost,{})]})})})});Modal.displayName="Modal";const transparentOf=e=>{const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return"transparent";const[s,r,i]=t[1].split(",").map(e=>e.trim());return`rgba(${s}, ${r}, ${i}, 0)`},buildStyles=e=>StyleSheet.create({root:{flex:1},centeredWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:16},centeredContent:{maxWidth:"90%",width:"90%"},bottomWrapper:{flex:1,justifyContent:"flex-end"},bottomContent:{width:"100%"},fullScreenWrapper:{flex:1},fullScreenContent:{flex:1}});export{Modal};export default Modal;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Dimensions,Easing,Platform,Pressable,Modal as RNModal,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{squircleHostRadius}from"../../utils/squircle.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const MODAL_DISMISS_GRACE_MS=300;const Modal=forwardRef((e,t)=>{const{visible:s,onRequestClose:r,presentation:i="centered",backdropOpacity:o,backdropPressClose:a=!0,animationDuration:n,accessibilityLabel:l,hardwareBackPress:u=!0,children:c,contentStyle:d,backdropStyle:m,restoreFocusRef:f,onDismissed:p,haptic:g,testID:b}=e,h=useTheme(),v=usePresenceMotion(),[S,y]=useModalInsets(),x=n??v.duration("normal"),A=Dimensions.get("window").height,M=h.components.modal,R=M?.scaleStartValue??.9,V=useRef(createAnimatedValue(R)).current,j=useRef(createAnimatedValue(0)).current,C=useRef(createAnimatedValue(A)).current,k=useRef(createAnimatedValue(0)).current,w=useRef(null),T=useRef(!1),[D,_]=useState(s),E=useMemo(()=>buildStyles(h),[h]),I=useMemo(()=>{const e=h.colors.background.overlay;if("number"!=typeof o)return e;const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return e;const[s,r,i]=t[1].split(",").map(e=>e.trim());return`rgba(${s}, ${r}, ${i}, ${o})`},[h.colors.background.overlay,o]),N=useMemo(()=>k.interpolate({inputRange:[0,1],outputRange:[transparentOf(I),I]}),[k,I]);useEffect(()=>{s&&_(!0)},[s]),useEffect(()=>{const e=[];if(s&&D){const t=Animated.timing(k,{toValue:1,duration:v.duration("normal"),useNativeDriver:!1});if(t.start(),e.push(t),v.reduced){j.setValue(0),C.setValue(0),V.setValue(1);const t=Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0});t.start(),e.push(t)}else if("bottom"===i){j.setValue(1);const t=Animated.spring(C,{toValue:0,damping:h.motion.spring.gentle.damping,stiffness:h.motion.spring.gentle.stiffness,mass:h.motion.spring.gentle.mass,useNativeDriver:!0});t.start(),e.push(t)}else{const t=Animated.parallel([Animated.spring(V,{toValue:1,damping:h.motion.spring.gentle.damping,stiffness:h.motion.spring.gentle.stiffness,mass:h.motion.spring.gentle.mass,useNativeDriver:!0}),Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0})]);t.start(),e.push(t)}}else if(D){const t=v.duration("fast"),s=Easing.bezier(...h.motion.easing.accelerate),r=Animated.timing(j,{toValue:0,duration:t,easing:s,useNativeDriver:!0}),o=v.reduced?r:"bottom"===i?Animated.timing(C,{toValue:A,duration:t,easing:s,useNativeDriver:!0}):Animated.parallel([Animated.timing(V,{toValue:R,duration:t,easing:s,useNativeDriver:!0}),r]),a=Animated.parallel([o,Animated.timing(k,{toValue:0,duration:v.duration("normal"),useNativeDriver:!1})]);a.start(({finished:e})=>{e&&(C.setValue(A),_(!1))}),e.push(a)}return()=>e.forEach(e=>e.stop())},[s,D,i,x,V,j,k,C,A,h.motion.spring.gentle.damping,h.motion.spring.gentle.stiffness,h.motion.spring.gentle.mass,v,h.motion.easing.accelerate,R]),useEffect(()=>{if("web"===Platform.OS)return;let e,t;return s?(e=setTimeout(()=>{w.current&&AccessibilityInfo.sendAccessibilityEvent(w.current,"focus")},150),T.current=!0):T.current&&(T.current=!1,f&&f.current&&(t=setTimeout(()=>{const e=f.current;e&&AccessibilityInfo.sendAccessibilityEvent(e,"focus")},x))),()=>{e&&clearTimeout(e),t&&clearTimeout(t)}},[s,x,f]);const q=useRef(!1);useEffect(()=>{if(s)return void(q.current=!0);if(!q.current)return;if(q.current=!1,!p)return;const e=setTimeout(p,300);return()=>clearTimeout(e)},[s,p]);const P=useCallback(()=>{if(!a)return;const e=resolveHaptic(g,"selection");e&&triggerHaptic(e),r()},[a,r,g]),z=useCallback(()=>{u&&r()},[u,r]),H=useSquircle("bottom"!==i&&"fullScreen"!==i,h.radius.xl),$=useMemo(()=>"fullScreen"===i?[E.fullScreenContent,{backgroundColor:h.colors.background.elevated}]:"bottom"===i?[E.bottomContent,{backgroundColor:h.colors.background.elevated,borderTopLeftRadius:h.radius.xl,borderTopRightRadius:h.radius.xl,...smoothCorners,paddingTop:h.spacing.lg,paddingHorizontal:h.spacing.lg,paddingBottom:h.spacing.lg+S.bottom},h.shadows.xl]:[E.centeredContent,{backgroundColor:h.colors.background.elevated,borderRadius:H.active&&H.size?squircleHostRadius(H.size.width,H.size.height,h.radius.xl):h.radius.xl,...smoothCorners,padding:h.spacing.xl},h.shadows.xl],[i,h,E,S.bottom,H.active,H.size]),F=useMemo(()=>"bottom"===i?E.bottomWrapper:"fullScreen"===i?E.fullScreenWrapper:E.centeredWrapper,[i,E]),L=useMemo(()=>"bottom"===i?{opacity:j,transform:[{translateY:C}]}:"fullScreen"===i?{opacity:j}:{opacity:j,transform:[{scale:V}]},[i,V,j,C]);return _jsx(RNModal,{visible:D,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:z,testID:b,children:_jsx(View,{ref:e=>{w.current=e,"function"==typeof t?t(e):t&&(t.current=e)},style:E.root,accessible:!1,accessibilityViewIsModal:!0,accessibilityRole:"alert",accessibilityLabel:l,children:_jsxs(ModalSafeArea,{onInsets:y,children:[_jsxs(Animated.View,{collapsable:!1,style:[StyleSheet.absoluteFill,F,{backgroundColor:N},m],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:P,accessibilityRole:"button",accessibilityLabel:"Close modal",disabled:!a}),_jsxs(Animated.View,{style:[$,L,d],onLayout:H.onLayout,pointerEvents:"auto",children:[H.active&&H.size?_jsx(SquircleFill,{width:H.size.width,height:H.size.height,radius:h.radius.xl,fill:h.colors.background.elevated}):null,c]})]}),_jsx(ToastHost,{})]})})})});Modal.displayName="Modal";const transparentOf=e=>{const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return"transparent";const[s,r,i]=t[1].split(",").map(e=>e.trim());return`rgba(${s}, ${r}, ${i}, 0)`},buildStyles=e=>StyleSheet.create({root:{flex:1},centeredWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:e.spacing.lg},centeredContent:{maxWidth:"90%",width:"90%"},bottomWrapper:{flex:1,justifyContent:"flex-end"},bottomContent:{width:"100%"},fullScreenWrapper:{flex:1},fullScreenContent:{flex:1}});export{Modal};export default Modal;

package/lib/module/components/NumberInput/NumberInput.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LONG_PRESS_DELAY=500,DEFAULT_LONG_PRESS_INTERVAL=80,roundToPrecision=(e,t)=>{if(!Number.isFinite(e))return 0;if(t<=0)return Math.round(e);const i=10**t;return Math.round(e*i)/i},clamp=(e,t,i)=>e<t?t:e>i?i:e,formatValue=(e,t,i)=>Number.isFinite(e)?t&&i>0?e.toFixed(i):String(Math.trunc(e)):"",sanitizeTyped=(e,t)=>{if(!e)return"";let i=e.replace(/[^0-9.-]/g,"");if(i=i.replace(/(?!^)-/g,""),t){const e=i.indexOf(".");-1!==e&&(i=i.slice(0,e+1)+i.slice(e+1).replace(/\./g,""))}else i=i.replace(/\./g,"");return i},NumberInput=forwardRef((e,t)=>{const{value:i,defaultValue:l,onChange:r,min:s=Number.NEGATIVE_INFINITY,max:n=Number.POSITIVE_INFINITY,step:a=1,allowDecimal:o=!1,precision:c=0,label:u,help:d,helperText:b,error:m,disabled:p=!1,size:f="md",variant:x="inline",unit:h,haptic:y,accessibilityLabel:g,style:S,containerStyle:T,inputStyle:I,buttonStyle:F,unitStyle:N,labelStyle:j,textInputProps:C,testID:v}=e,[z,_]=useControllableState({value:i,defaultValue:l??e.min??0,onChange:r}),P=useTheme(),R=resolveFieldSize(P,f),w=resolveFieldTextStyle(P,{disabled:p}),L=useMemo(()=>buildStyles(P),[P]),V=P.components.numberInput?.longPressDelayMs??500,k=P.components.numberInput?.longPressIntervalMs??80,E=useRef(null),[D,A]=useState(formatValue(z,o,c)),[M,H]=useState(!1),[B,O]=useState(!1),W=useCallback(()=>{p||E.current?.focus()},[p]),G=useRef(null),Y=useRef(null),U=useCallback(()=>{null!==G.current&&(clearTimeout(G.current),G.current=null),null!==Y.current&&(clearInterval(Y.current),Y.current=null)},[]);useEffect(()=>U,[U]),useEffect(()=>{M||A(formatValue(z,o,c))},[z,o,c,M]);const $=z<=s,q=z>=n,J=!p,K=useCallback(e=>{const t=roundToPrecision(e,o?c:0),i=clamp(t,s,n);i!==z&&_(i)},[o,n,s,_,c,z]),Q=useCallback(()=>{if(!J||$)return;const e=resolveHaptic(y,"selection");e&&triggerHaptic(e),K(z-a)},[$,J,y,K,a,z]),X=useCallback(()=>{if(!J||q)return;const e=resolveHaptic(y,"selection");e&&triggerHaptic(e),K(z+a)},[q,J,y,K,a,z]);React.useImperativeHandle(t,()=>({focus:()=>E.current?.focus(),blur:()=>E.current?.blur(),clear:()=>{A(""),Number.isFinite(s)&&s>0?_(s):_(0<s?s:0>n?n:0)}}),[n,s,_]);const Z=useCallback(e=>{J&&(U(),G.current=setTimeout(()=>{Y.current=setInterval(()=>{"inc"===e?X():Q()},k)},V))},[U,Q,X,J,V,k]),ee=useCallback(e=>{const t=sanitizeTyped(e,o);A(t);const i=Number(t);""!==t&&"-"!==t&&"."!==t&&Number.isFinite(i)&&i>=s&&i<=n&&i!==z&&_(roundToPrecision(i,o?c:0))},[o,n,s,_,c,z]),te=useCallback(()=>{H(!1),O(!1);const e=Number(D);if(""===D||!Number.isFinite(e))return void A(formatValue(z,o,c));const t=roundToPrecision(e,o?c:0),i=clamp(t,s,n);i!==z&&_(i),A(formatValue(i,o,c))},[o,D,n,s,_,c,z]),ie=useCallback(()=>{H(!0),O(!0)},[]),le=$||p?P.colors.text.disabled:P.colors.text.primary,re=q||p?P.colors.text.disabled:P.colors.text.primary,se=R.iconSize+8,renderStepper=(e,t,i,l,r,s)=>_jsx(Pressable,{onPress:t,onLongPress:()=>Z(e),onPressOut:U,delayLongPress:V,disabled:i,accessibilityRole:"button",accessibilityLabel:l,accessibilityState:{disabled:i},"aria-disabled":i,style:({pressed:e})=>[{width:se,height:se,alignItems:"center",justifyContent:"center",borderRadius:se/2,...smoothCorners},e&&!i?{backgroundColor:P.colors.surface.pressed}:null,F],testID:`${v??"numberinput"}-${"inc"===e?"plus":"minus"}`,children:_jsx(Text,{style:{fontSize:R.iconSize,color:r,fontWeight:P.typography.fontWeight.semibold,lineHeight:R.iconSize+2},children:s})}),ne=g??fieldTextAsString(u)??"Number input",ae=!0===m||hasFieldText(m),oe=_jsx(FieldBase,{size:f,disabled:p,error:ae,filled:!0,focused:B,onPress:W,pressFeedback:!1,leading:renderStepper("dec",Q,$||p,"Decrease",le,"−"),trailing:renderStepper("inc",X,q||p,"Increase",re,"+"),children:_jsxs(View,{style:L.inputRow,children:[_jsx(TextInput,{ref:E,value:D,onChangeText:ee,onFocus:ie,onBlur:te,editable:!p,keyboardType:o?"decimal-pad":"number-pad",selectTextOnFocus:!0,accessibilityRole:"adjustable",accessibilityLabel:ne,accessibilityValue:{now:Number.isFinite(z)?z:0},accessibilityState:{disabled:p},"aria-disabled":p,accessibilityActions:[{name:"increment",label:"Increase"},{name:"decrement",label:"Decrease"}],onAccessibilityAction:e=>{"increment"===e.nativeEvent.actionName&&X(),"decrement"===e.nativeEvent.actionName&&Q()},style:[L.input,{fontSize:R.fontSize,color:w.color,...w.weightStyle},I],...C}),h?_jsx(Text,{style:[L.unit,{fontSize:R.fontSize,color:w.placeholderColor},N],children:h}):null]})}),ce=hasFieldText(u)?_jsx(FieldLabel,{size:f,help:d,style:j,children:u}):null,ue=_jsx(FieldMessage,{size:f,error:ae,text:ae?m:b});return _jsxs(View,"horizontal"===x?{style:[L.horizontalContainer,S,T],testID:v,accessibilityState:{disabled:p},"aria-disabled":p,children:[_jsx(View,{style:L.horizontalLabelWrap,children:ce}),_jsxs(View,{children:[oe,ue]})]}:{style:[S,T],testID:v,accessibilityState:{disabled:p},"aria-disabled":p,children:[ce,oe,ue]})});NumberInput.displayName="NumberInput";const buildStyles=e=>StyleSheet.create({inputRow:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},input:{flex:1,textAlign:"center",padding:0,margin:0,includeFontPadding:!1},unit:{marginLeft:4},label:{marginBottom:6},helper:{marginTop:6},horizontalContainer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},horizontalLabelWrap:{flexShrink:1,paddingRight:12}});export{NumberInput};export default NumberInput;
+"use strict";import React,{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LONG_PRESS_DELAY=500,DEFAULT_LONG_PRESS_INTERVAL=80,roundToPrecision=(e,t)=>{if(!Number.isFinite(e))return 0;if(t<=0)return Math.round(e);const i=10**t;return Math.round(e*i)/i},clamp=(e,t,i)=>e<t?t:e>i?i:e,formatValue=(e,t,i)=>Number.isFinite(e)?t&&i>0?e.toFixed(i):String(Math.trunc(e)):"",sanitizeTyped=(e,t)=>{if(!e)return"";let i=e.replace(/[^0-9.-]/g,"");if(i=i.replace(/(?!^)-/g,""),t){const e=i.indexOf(".");-1!==e&&(i=i.slice(0,e+1)+i.slice(e+1).replace(/\./g,""))}else i=i.replace(/\./g,"");return i},NumberInput=forwardRef((e,t)=>{const{value:i,defaultValue:s,onChange:l,min:r=Number.NEGATIVE_INFINITY,max:n=Number.POSITIVE_INFINITY,step:a=1,allowDecimal:o=!1,precision:c=0,label:u,help:d,helperText:b,error:m,disabled:p=!1,size:f="md",variant:x="inline",unit:g,haptic:h,accessibilityLabel:y,style:S,containerStyle:T,inputStyle:I,buttonStyle:F,unitStyle:N,labelStyle:j,textInputProps:C,testID:v}=e,[_,P]=useControllableState({value:i,defaultValue:s??e.min??0,onChange:l}),R=useTheme(),w=resolveFieldSize(R,f),z=resolveFieldTextStyle(R,{disabled:p}),L=useMemo(()=>buildStyles(R),[R]),V=R.components.numberInput?.longPressDelayMs??500,k=R.components.numberInput?.longPressIntervalMs??80,E=useRef(null),[D,A]=useState(formatValue(_,o,c)),[M,H]=useState(!1),[B,O]=useState(!1),W=useCallback(()=>{p||E.current?.focus()},[p]),G=useRef(null),Y=useRef(null),U=useCallback(()=>{null!==G.current&&(clearTimeout(G.current),G.current=null),null!==Y.current&&(clearInterval(Y.current),Y.current=null)},[]);useEffect(()=>U,[U]),useEffect(()=>{M||A(formatValue(_,o,c))},[_,o,c,M]);const $=_<=r,q=_>=n,J=!p,K=useCallback(e=>{const t=roundToPrecision(e,o?c:0),i=clamp(t,r,n);i!==_&&P(i)},[o,n,r,P,c,_]),Q=useCallback(()=>{if(!J||$)return;const e=resolveHaptic(h,"selection");e&&triggerHaptic(e),K(_-a)},[$,J,h,K,a,_]),X=useCallback(()=>{if(!J||q)return;const e=resolveHaptic(h,"selection");e&&triggerHaptic(e),K(_+a)},[q,J,h,K,a,_]);React.useImperativeHandle(t,()=>({focus:()=>E.current?.focus(),blur:()=>E.current?.blur(),clear:()=>{A(""),Number.isFinite(r)&&r>0?P(r):P(0<r?r:0>n?n:0)}}),[n,r,P]);const Z=useCallback(e=>{J&&(U(),G.current=setTimeout(()=>{Y.current=setInterval(()=>{"inc"===e?X():Q()},k)},V))},[U,Q,X,J,V,k]),ee=useCallback(e=>{const t=sanitizeTyped(e,o);A(t);const i=Number(t);""!==t&&"-"!==t&&"."!==t&&Number.isFinite(i)&&i>=r&&i<=n&&i!==_&&P(roundToPrecision(i,o?c:0))},[o,n,r,P,c,_]),te=useCallback(()=>{H(!1),O(!1);const e=Number(D);if(""===D||!Number.isFinite(e))return void A(formatValue(_,o,c));const t=roundToPrecision(e,o?c:0),i=clamp(t,r,n);i!==_&&P(i),A(formatValue(i,o,c))},[o,D,n,r,P,c,_]),ie=useCallback(()=>{H(!0),O(!0)},[]),se=$||p?R.colors.text.disabled:R.colors.text.primary,le=q||p?R.colors.text.disabled:R.colors.text.primary,re=w.icon+8,renderStepper=(e,t,i,s,l,r)=>_jsx(Pressable,{onPress:t,onLongPress:()=>Z(e),onPressOut:U,delayLongPress:V,disabled:i,accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{disabled:i},"aria-disabled":i,style:({pressed:e})=>[{width:re,height:re,alignItems:"center",justifyContent:"center",borderRadius:R.radius.pill,...smoothCorners},e&&!i?{backgroundColor:R.colors.surface.pressed}:null,F],testID:`${v??"numberinput"}-${"inc"===e?"plus":"minus"}`,children:_jsx(Text,{style:{fontSize:w.icon,color:l,fontWeight:R.typography.fontWeight.semibold,lineHeight:w.icon+2},children:r})}),ne=y??fieldTextAsString(u)??"Number input",ae=!0===m||hasFieldText(m),oe=_jsx(FieldBase,{size:f,disabled:p,error:ae,filled:!0,focused:B,onPress:W,pressFeedback:!1,leading:renderStepper("dec",Q,$||p,"Decrease",se,"−"),trailing:renderStepper("inc",X,q||p,"Increase",le,"+"),children:_jsxs(View,{style:L.inputRow,children:[_jsx(TextInput,{ref:E,value:D,onChangeText:ee,onFocus:ie,onBlur:te,editable:!p,keyboardType:o?"decimal-pad":"number-pad",selectTextOnFocus:!0,accessibilityRole:"adjustable",accessibilityLabel:ne,accessibilityValue:{now:Number.isFinite(_)?_:0},accessibilityState:{disabled:p},"aria-disabled":p,accessibilityActions:[{name:"increment",label:"Increase"},{name:"decrement",label:"Decrease"}],onAccessibilityAction:e=>{"increment"===e.nativeEvent.actionName&&X(),"decrement"===e.nativeEvent.actionName&&Q()},style:[L.input,{fontSize:w.text,color:z.color,...z.weightStyle},I],...C}),g?_jsx(Text,{style:[L.unit,{fontSize:w.text,color:z.placeholderColor},N],children:g}):null]})}),ce=hasFieldText(u)?_jsx(FieldLabel,{size:f,help:d,style:j,children:u}):null,ue=_jsx(FieldMessage,{size:f,error:ae,text:ae?m:b});return _jsxs(View,"horizontal"===x?{style:[L.horizontalContainer,S,T],testID:v,accessibilityState:{disabled:p},"aria-disabled":p,children:[_jsx(View,{style:L.horizontalLabelWrap,children:ce}),_jsxs(View,{children:[oe,ue]})]}:{style:[S,T],testID:v,accessibilityState:{disabled:p},"aria-disabled":p,children:[ce,oe,ue]})});NumberInput.displayName="NumberInput";const buildStyles=e=>StyleSheet.create({inputRow:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},input:{flex:1,textAlign:"center",padding:e.spacing.none,margin:e.spacing.none,includeFontPadding:!1},unit:{marginLeft:e.spacing.xs},label:{marginBottom:e.spacing.xs},helper:{marginTop:e.spacing.xs},horizontalContainer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},horizontalLabelWrap:{flexShrink:1,paddingRight:e.spacing.md}});export{NumberInput};export default NumberInput;

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

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

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

package/lib/module/components/PaymentResult/PaymentResult.js

@@ -1 +1 @@
-"use strict";import{formatDateTime,formatMinor}from"@webority/mobile-core";import{useEffect,useMemo,useRef}from"react";import{StyleSheet,View}from"react-native";import Animated,{cancelAnimation,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useReducedMotion}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{Confetti}from"../Confetti/index.js";import{Descriptions}from"../Descriptions/index.js";import{StatusBadge}from"../StatusBadge/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const STATUS={success:{icon:"check-circle",badge:"Success",tone:"success",title:"Payment successful"},pending:{icon:"clock",badge:"Pending",tone:"neutral",title:"Payment pending"},failed:{icon:"x-circle",badge:"Failed",tone:"error",title:"Payment failed"},refunded:{icon:"refresh-cw",badge:"Refunded",tone:"info",title:"Payment refunded"}},MARK_SIZE=72,ICON_SIZE=36,TINT_OPACITY=.14,DEFAULT_REFUND_DAYS=5,CONFETTI_PIECES=60,SETTLE_WINDOW="Most payments confirm in a few minutes. Your bank can take up to 48 hours.",REFRESH_HINT="Tap Check status to see the latest.",PENDING_WARNING="Do not pay again. If money has left your account, it will either complete or come back to you.",istStamp=e=>formatDateTime(e,{zone:"IST",zoneLabel:!0}),markColors=(e,t)=>{const{colors:n}=e;switch(t){case"success":return{fill:tintOf(n.success,.14,n.background.secondary),ink:n.toneText.success};case"failed":return{fill:tintOf(n.error,.14,n.background.secondary),ink:n.toneText.error};case"refunded":return{fill:tintOf(n.info,.14,n.background.secondary),ink:n.toneText.info};default:return{fill:n.background.tertiary,ink:n.text.secondary}}},failedLead=(e,t,n,r)=>{if(!0===e){return`${t} will return to your account within ${n} working days.${r?` Reference ${r}.`:""}`}return!1===e?"No money was taken from your account. You can try again.":"We could not confirm whether money left your account. Check your bank statement before you try again."},leadFor=(e,t,n)=>{switch(e){case"success":return"Your payment has been received. Keep this receipt for your records.";case"pending":return"Your bank has not confirmed this payment yet.";case"refunded":return`${t} has been returned to your account.`;default:return n}},renderAction=e=>_jsx(Button,{title:e.title,size:"lg",fullWidth:!0,variant:e.variant,tone:e.tone,leftIcon:e.icon,loading:e.loading,onPress:e.onPress},e.key);export const PaymentResult=({status:e,amount:t,currency:n="INR",payee:r,reference:o,paidAt:i,method:a,rows:s,debited:l,refundDays:c=5,settlesBy:u,title:d,message:m,onShare:f,onDownload:p,onDone:h,onRetry:y,onRefresh:g,refreshing:b=!1,celebrate:x=!0,haptic:k=!0,style:j,testID:S})=>{const T=useTheme(),v=useReducedMotion(),w=useMemo(()=>buildStyles(T),[T]),_=useRef(null),I=useRef(null),A=STATUS[e],R=useMemo(()=>markColors(T,e),[T,e]),D=d??A.title,E=formatMinor(t,{currency:n,dropZeroDecimals:!0}),C=failedLead(l,E,c,o),P=m??leadFor(e,E,C),N=`${D}, ${E}${r&&"refunded"!==e?` to ${r}`:""}`,V=void 0===u?SETTLE_WINDOW:`Expected to settle by ${istStamp(u)}.`;useEffect(()=>{I.current!==e&&(I.current=e,announce(N,{polite:"failed"!==e}),k&&("success"===e?triggerHaptic("confirm"):"failed"===e&&triggerHaptic("reject")),"success"===e&&x&&_.current?.start())},[e]);const M=useSharedValue(.9),$=useSharedValue(0),W=T.motion.duration.normal;useEffect(()=>(v?(M.value=1,$.value=1):"success"===e?($.value=0,$.value=withTiming(1,{duration:W}),M.value=.6,M.value=withSpring(1,{damping:12,stiffness:160})):($.value=0,$.value=withTiming(1,{duration:W}),M.value=.9,M.value=withTiming(1,{duration:W})),()=>{cancelAnimation(M),cancelAnimation($)}),[e,v,M,$,W]);const F=useAnimatedStyle(()=>({opacity:$.value,transform:[{scale:M.value}]})),H=useMemo(()=>{const e=[];if(r&&e.push({key:"payee",label:"Paid to",value:r}),a&&e.push({key:"method",label:"Method",value:a}),o){const t=/^\d+$/.test(o);e.push({key:"reference",label:"Reference",value:_jsx(Text,{selectable:!0,accessibilityLabel:t?o.split("").join(" "):void 0,style:w.tabular,children:o})})}void 0!==i&&e.push({key:"paidAt",label:"Date and time",value:istStamp(i)});for(const t of s??[])void 0!==t.value&&null!==t.value&&""!==t.value&&e.push(t);return e},[r,a,o,i,s,w.tabular]),O="pending"===e&&g?{key:"refresh",title:"Check status",onPress:g,icon:"refresh-cw",loading:b}:null,B=h?{key:"done",title:"Done",onPress:h}:null,L=("failed"===e&&!1===l&&y?{key:"retry",title:"Try again",onPress:y,icon:"refresh-cw"}:null)??O??B,Y=B&&L!==B?{...B,variant:"ghost",tone:"neutral"}:null,z=[];return f&&z.push({key:"share",title:"Share receipt",onPress:f,icon:"share",variant:"outline",tone:"neutral"}),p&&z.push({key:"download",title:"Download",onPress:p,icon:"download",variant:"outline",tone:"neutral"}),_jsxs(View,{style:[w.root,j],testID:S,accessibilityRole:"summary",children:[_jsxs(View,{style:w.header,children:[_jsx(Animated.View,{style:[w.mark,{backgroundColor:R.fill},F],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsx(AppIcon,{name:A.icon,size:36,color:R.ink})}),_jsx(StatusBadge,{label:A.badge,tone:A.tone}),_jsx(Text,{variant:"h3",align:"center",children:D}),_jsx(Text,{variant:"h1",align:"center",style:w.tabular,children:E}),_jsx(Text,{variant:"body",color:"secondary",align:"center",children:P})]}),"pending"===e?_jsxs(View,{style:w.note,children:[_jsx(Text,{variant:"bodySmall",color:"secondary",children:V}),_jsx(Text,{variant:"bodySmall",weight:"semibold",children:PENDING_WARNING}),O?_jsx(Text,{variant:"bodySmall",color:"secondary",children:REFRESH_HINT}):null]}):null,H.length>0?_jsx(View,{style:w.receipt,children:_jsx(Descriptions,{items:H,columns:2,bordered:!0})}):null,L||z.length>0?_jsxs(View,{style:w.actions,children:[L?renderAction(L):null,z.length>0?_jsx(View,{style:w.pair,children:z.map(e=>_jsx(View,{style:w.pairItem,children:renderAction(e)},e.key))}):null,Y?renderAction(Y):null]}):null,"success"===e&&x?_jsx(Confetti,{ref:_,count:60,preset:"pop"}):null]})};const buildStyles=e=>StyleSheet.create({root:{gap:e.spacing.lg},header:{alignItems:"center",gap:e.spacing.sm},mark:{width:72,height:72,borderRadius:36,alignItems:"center",justifyContent:"center",marginBottom:e.spacing.xs,...smoothCorners},tabular:{fontVariant:["tabular-nums"]},note:{gap:e.spacing.xs,padding:e.spacing.md,borderRadius:e.radius.md,backgroundColor:e.colors.background.secondary,...smoothCorners},receipt:{paddingHorizontal:e.spacing.md,borderRadius:e.radius.lg,borderWidth:StyleSheet.hairlineWidth,borderColor:e.colors.border.secondary,backgroundColor:e.colors.background.primary,...smoothCorners},actions:{gap:e.spacing.sm},pair:{flexDirection:"row",gap:e.spacing.sm},pairItem:{flex:1}});export default PaymentResult;
+"use strict";import{formatDateTime,formatMinor}from"@webority/mobile-core";import{useEffect,useMemo,useRef}from"react";import{StyleSheet,View}from"react-native";import Animated,{cancelAnimation,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useReducedMotion}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{Confetti}from"../Confetti/index.js";import{Descriptions}from"../Descriptions/index.js";import{StatusBadge}from"../StatusBadge/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const STATUS={success:{icon:"check-circle",badge:"Success",tone:"success",title:"Payment successful"},pending:{icon:"clock",badge:"Pending",tone:"neutral",title:"Payment pending"},failed:{icon:"x-circle",badge:"Failed",tone:"error",title:"Payment failed"},refunded:{icon:"refresh-cw",badge:"Refunded",tone:"info",title:"Payment refunded"}},MARK_SIZE=72,ICON_SIZE=36,TINT_OPACITY=.14,DEFAULT_REFUND_DAYS=5,CONFETTI_PIECES=60,SETTLE_WINDOW="Most payments confirm in a few minutes. Your bank can take up to 48 hours.",REFRESH_HINT="Tap Check status to see the latest.",PENDING_WARNING="Do not pay again. If money has left your account, it will either complete or come back to you.",istStamp=e=>formatDateTime(e,{zone:"IST",zoneLabel:!0}),markColors=(e,t)=>{const{colors:n}=e;switch(t){case"success":return{fill:tintOf(n.success,.14,n.background.secondary),ink:n.toneText.success};case"failed":return{fill:tintOf(n.error,.14,n.background.secondary),ink:n.toneText.error};case"refunded":return{fill:tintOf(n.info,.14,n.background.secondary),ink:n.toneText.info};default:return{fill:n.background.tertiary,ink:n.text.secondary}}},failedLead=(e,t,n,r)=>{if(!0===e){return`${t} will return to your account within ${n} working days.${r?` Reference ${r}.`:""}`}return!1===e?"No money was taken from your account. You can try again.":"We could not confirm whether money left your account. Check your bank statement before you try again."},leadFor=(e,t,n)=>{switch(e){case"success":return"Your payment has been received. Keep this receipt for your records.";case"pending":return"Your bank has not confirmed this payment yet.";case"refunded":return`${t} has been returned to your account.`;default:return n}},renderAction=e=>_jsx(Button,{title:e.title,size:"lg",fullWidth:!0,variant:e.variant,tone:e.tone,leftIcon:e.icon,loading:e.loading,onPress:e.onPress},e.key);export const PaymentResult=({status:e,amount:t,currency:n="INR",payee:r,reference:o,paidAt:i,method:a,rows:s,debited:l,refundDays:c=5,settlesBy:u,title:d,message:m,onShare:f,onDownload:p,onDone:h,onRetry:y,onRefresh:g,refreshing:b=!1,celebrate:x=!0,haptic:k=!0,style:j,testID:S})=>{const T=useTheme(),v=useReducedMotion(),w=useMemo(()=>buildStyles(T),[T]),_=useRef(null),I=useRef(null),A=STATUS[e],R=useMemo(()=>markColors(T,e),[T,e]),D=d??A.title,E=formatMinor(t,{currency:n,dropZeroDecimals:!0}),C=failedLead(l,E,c,o),P=m??leadFor(e,E,C),N=`${D}, ${E}${r&&"refunded"!==e?` to ${r}`:""}`,V=void 0===u?SETTLE_WINDOW:`Expected to settle by ${istStamp(u)}.`;useEffect(()=>{I.current!==e&&(I.current=e,announce(N,{polite:"failed"!==e}),k&&("success"===e?triggerHaptic("confirm"):"failed"===e&&triggerHaptic("reject")),"success"===e&&x&&_.current?.start())},[e]);const M=useSharedValue(.9),$=useSharedValue(0),W=T.motion.duration.normal;useEffect(()=>(v?(M.value=1,$.value=1):"success"===e?($.value=0,$.value=withTiming(1,{duration:W}),M.value=.6,M.value=withSpring(1,{damping:12,stiffness:160})):($.value=0,$.value=withTiming(1,{duration:W}),M.value=.9,M.value=withTiming(1,{duration:W})),()=>{cancelAnimation(M),cancelAnimation($)}),[e,v,M,$,W]);const F=useAnimatedStyle(()=>({opacity:$.value,transform:[{scale:M.value}]})),H=useMemo(()=>{const e=[];if(r&&e.push({key:"payee",label:"Paid to",value:r}),a&&e.push({key:"method",label:"Method",value:a}),o){const t=/^\d+$/.test(o);e.push({key:"reference",label:"Reference",value:_jsx(Text,{selectable:!0,accessibilityLabel:t?o.split("").join(" "):void 0,style:w.tabular,children:o})})}void 0!==i&&e.push({key:"paidAt",label:"Date and time",value:istStamp(i)});for(const t of s??[])void 0!==t.value&&null!==t.value&&""!==t.value&&e.push(t);return e},[r,a,o,i,s,w.tabular]),O="pending"===e&&g?{key:"refresh",title:"Check status",onPress:g,icon:"refresh-cw",loading:b}:null,B=h?{key:"done",title:"Done",onPress:h}:null,L=("failed"===e&&!1===l&&y?{key:"retry",title:"Try again",onPress:y,icon:"refresh-cw"}:null)??O??B,Y=B&&L!==B?{...B,variant:"ghost",tone:"neutral"}:null,z=[];return f&&z.push({key:"share",title:"Share receipt",onPress:f,icon:"share",variant:"outline",tone:"neutral"}),p&&z.push({key:"download",title:"Download",onPress:p,icon:"download",variant:"outline",tone:"neutral"}),_jsxs(View,{style:[w.root,j],testID:S,accessibilityRole:"summary",children:[_jsxs(View,{style:w.header,children:[_jsx(Animated.View,{style:[w.mark,{backgroundColor:R.fill},F],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsx(AppIcon,{name:A.icon,size:36,color:R.ink})}),_jsx(StatusBadge,{label:A.badge,tone:A.tone}),_jsx(Text,{variant:"h3",align:"center",children:D}),_jsx(Text,{variant:"h1",align:"center",style:w.tabular,children:E}),_jsx(Text,{variant:"body",color:"secondary",align:"center",children:P})]}),"pending"===e?_jsxs(View,{style:w.note,children:[_jsx(Text,{variant:"bodySmall",color:"secondary",children:V}),_jsx(Text,{variant:"bodySmall",weight:"semibold",children:PENDING_WARNING}),O?_jsx(Text,{variant:"bodySmall",color:"secondary",children:REFRESH_HINT}):null]}):null,H.length>0?_jsx(View,{style:w.receipt,children:_jsx(Descriptions,{items:H,columns:2,bordered:!0})}):null,L||z.length>0?_jsxs(View,{style:w.actions,children:[L?renderAction(L):null,z.length>0?_jsx(View,{style:w.pair,children:z.map(e=>_jsx(View,{style:w.pairItem,children:renderAction(e)},e.key))}):null,Y?renderAction(Y):null]}):null,"success"===e&&x?_jsx(Confetti,{ref:_,count:60,preset:"pop"}):null]})};const buildStyles=e=>StyleSheet.create({root:{gap:e.spacing.lg},header:{alignItems:"center",gap:e.spacing.sm},mark:{width:72,height:72,borderRadius:e.radius.pill,alignItems:"center",justifyContent:"center",marginBottom:e.spacing.xs,...smoothCorners},tabular:{fontVariant:["tabular-nums"]},note:{gap:e.spacing.xs,padding:e.spacing.md,borderRadius:e.radius.md,backgroundColor:e.colors.background.secondary,...smoothCorners},receipt:{paddingHorizontal:e.spacing.md,borderRadius:e.radius.lg,borderWidth:StyleSheet.hairlineWidth,borderColor:e.colors.border.secondary,backgroundColor:e.colors.background.primary,...smoothCorners},actions:{gap:e.spacing.sm},pair:{flexDirection:"row",gap:e.spacing.sm},pairItem:{flex:1}});export default PaymentResult;

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,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,Ae=ce||Pe,we=Boolean(L)&&"float"===O&&Ee>0,ze=useFloatingLabel({label:L,enabled:we,floated:Ae,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),Re=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),ke=planOf(ue.iso),Me=I&&ke?formatPhoneAsTyped(ue.nationalNumber,ke):ue.nationalNumber,Ve=ee(ue.iso),De=0===ue.nationalNumber.length||pe||!Number.isFinite(Ve)?void 0:Me.length+Math.max(0,Ve-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const $e=ke?maxNationalNumberLength(ke,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Pe&&!Be&&(ge||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Je=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]),Qe=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({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Xe=R||E,Ze=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Te,topNotch:ze.topNotch,focused:ce,disabled:R,error:Ge,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Xe||(Ce.current=!0,Ne(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,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(Re,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:Me,maxLength:De,onChangeText:Je,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:we&&!Ae||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:[Ze,ze.node]}),_jsx(FieldMessage,{size:k,error:Ge,text:Ge?qe:_}),_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===Re?.iso,onSelect:Qe,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,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,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:C,renderCountry:N,countrySearchPlaceholder:x,showAlphabetIndex:S,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:k,disabled:M=!1,size:R="md",variant:V,borderRadius:D,countrySheetTitle:z="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),X=useRef(null),J=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),Q=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>J.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:J}]:void 0},[p,f,g,J]),Z=useCallback((e,t,o)=>{if(!e)return null;if(C)return C(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[C,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=J.find(e=>e.iso===v)??J[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,J,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(()=>{M||X.current?.focus()},[M]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ce]=useState(!1),Ne=useRef(!1);useEffect(()=>{ye||(Ne.current=!1)},[ye]);const xe=resolveFieldSize(Y,R),Se=resolveFieldTextStyle(Y,{disabled:M}),ve=V??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=D??xe.radius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=k&&!L&&!Pe&&j.length>0,Ae=ce||Pe,we=Boolean(L)&&"float"===O&&Ee>0,ke=useFloatingLabel({label:L,enabled:we,floated:Ae,required:k,variant:ve,sizeTokens:xe,leadingOffset:Oe,paddingLeft:Fe?Y.spacing.none:xe.paddingX,color:Y.colors.field.label,style:P}),Me=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),Ve=I&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,De=ee(ue.iso),ze=0===ue.nationalNumber.length||pe||!Number.isFinite(De)?void 0:Ve.length+Math.max(0,De-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const $e=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Pe&&!Be&&(ge||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Xe=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&J.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)})},[J,E,ue,oe,te,de]),Je=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ce(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>X.current?.focus(),blur:()=>X.current?.blur(),clear:()=>de({...Ke.current,nationalNumber:""}),isFocused:()=>X.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Qe=M||E,Ze=_jsx(FieldBase,{size:R,variant:ve,borderRadius:Te,topNotch:ke.topNotch,focused:ce,disabled:M,error:Ge,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?Y.spacing.none:void 0,leading:_jsxs(Pressable,{onPress:()=>{Qe||(Ne.current=!0,Ce(!0))},disabled:Qe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Qe},"aria-disabled":Qe,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(Me,xe.text,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:Se.color,fontSize:xe.text}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:M?Y.colors.field.iconDisabled:Y.colors.field.icon,size:xe.icon,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:X,value:Ve,maxLength:ze,onChangeText:Xe,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&&!Ne.current&&he(!0),W?.()},editable:!M,placeholder:we&&!Ae||je?void 0:j,placeholderTextColor:Se.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:Se.color,fontSize:xe.text,...Se.weightStyle,paddingLeft:Fe?Y.spacing.none:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:Se.placeholderColor,fontSize:xe.text,weightStyle:Se.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:R,required:k,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ze,ke.node]}),_jsx(FieldMessage,{size:R,error:Ge,text:Ge?qe:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ce(!1),title:z,options:J,sections:Q,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:N?(e,t)=>N(e,{selected:t.selected}):void 0,isSelected:e=>e===Me?.iso,onSelect:Je,searchable:J.length>8,searchPlaceholder:x,alphabetIndex:S??J.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:e.spacing.xxs},flag:{includeFontPadding:!1,marginRight:e.spacing.xs},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:e.spacing.none,margin:e.spacing.none,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;

package/lib/module/components/PickerTrigger/PickerTrigger.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const PickerTrigger=forwardRef((e,l)=>{const{value:i,placeholder:t,label:r,help:s,helperText:o,error:a,required:d=!1,onPress:n,clearable:c=!1,onClear:x,leadingIcon:g,trailing:u,disabled:y=!1,size:b="md",variant:h,style:S,triggerStyle:m,valueStyle:f,labelStyle:T,messageStyle:F,accessibilityLabel:j,testID:p}=e,v=useTheme(),z=useMemo(()=>buildStyles(v),[v]),P=resolveFieldSize(v,b),_=resolveFieldTextStyle(v,{disabled:y}),w="string"==typeof i&&i.length>0,R=!0===a||hasFieldText(a),k=hasFieldText(r),C=w?i:t??"Select…",L=w?_.color:_.placeholderColor,M=w?`${fieldTextAsString(r)??"Selection"}: ${i}`:t??"No selection",q=j??M,B={disabled:y},I=void 0===u,D=c&&w&&!y;return _jsxs(View,{style:[z.root,S],testID:p,children:[k?_jsx(FieldLabel,{size:b,required:d,help:s,style:T,children:r}):null,_jsx(FieldBase,{size:b,variant:h,disabled:y,error:R,filled:w,onPress:n,leading:g,trailing:D||I||null!==u?_jsxs(View,{style:z.trailingRow,children:[D?_jsx(Text,{onPress:()=>{y||x?.()},accessibilityRole:"button",accessibilityLabel:"Clear",style:{fontSize:P.iconSize,color:v.colors.text.secondary,paddingHorizontal:4},children:"×"}):null,void 0!==u?u:I?_jsx(Chevron,{size:P.iconSize,color:y?v.colors.text.disabled:v.colors.text.tertiary}):null]}):null,accessibilityLabel:q,accessibilityState:B,accessibilityRole:"button",style:m,children:_jsxs(Text,{numberOfLines:1,style:[z.valueText,{color:L,fontSize:P.fontSize,..._.weightStyle},f],children:[C,w||!d||k?null:_jsx(RequiredMark,{})]})}),_jsx(FieldMessage,{size:b,error:R,text:R?a:o,style:F})]})});PickerTrigger.displayName="PickerTrigger";const buildStyles=e=>StyleSheet.create({root:{width:"100%"},label:{includeFontPadding:!1},valueText:{flex:1,includeFontPadding:!1},message:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center"}});export{PickerTrigger};export default PickerTrigger;
+"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{resolveFieldSize,useTheme}from"../../theme/index.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const PickerTrigger=forwardRef((e,l)=>{const{value:i,placeholder:t,label:r,help:s,helperText:o,error:a,required:d=!1,onPress:n,clearable:c=!1,onClear:x,leadingIcon:g,trailing:u,disabled:y=!1,size:b="md",variant:h,style:m,triggerStyle:S,valueStyle:f,labelStyle:T,messageStyle:F,accessibilityLabel:j,testID:p}=e,v=useTheme(),P=useMemo(()=>buildStyles(v),[v]),_=resolveFieldSize(v,b),w=resolveFieldTextStyle(v,{disabled:y}),z="string"==typeof i&&i.length>0,R=!0===a||hasFieldText(a),k=hasFieldText(r),C=z?i:t??"Select…",L=z?w.color:w.placeholderColor,M=z?`${fieldTextAsString(r)??"Selection"}: ${i}`:t??"No selection",q=j??M,B={disabled:y},I=void 0===u,D=c&&z&&!y;return _jsxs(View,{style:[P.root,m],testID:p,children:[k?_jsx(FieldLabel,{size:b,required:d,help:s,style:T,children:r}):null,_jsx(FieldBase,{size:b,variant:h,disabled:y,error:R,filled:z,onPress:n,leading:g,trailing:D||I||null!==u?_jsxs(View,{style:P.trailingRow,children:[D?_jsx(Text,{onPress:()=>{y||x?.()},accessibilityRole:"button",accessibilityLabel:"Clear",style:{fontSize:_.icon,color:v.colors.text.secondary,paddingHorizontal:v.spacing.xs},children:"×"}):null,void 0!==u?u:I?_jsx(Chevron,{size:_.icon,color:y?v.colors.text.disabled:v.colors.text.tertiary}):null]}):null,accessibilityLabel:q,accessibilityState:B,accessibilityRole:"button",style:S,children:_jsxs(Text,{numberOfLines:1,style:[P.valueText,{color:L,fontSize:_.text,...w.weightStyle},f],children:[C,z||!d||k?null:_jsx(RequiredMark,{})]})}),_jsx(FieldMessage,{size:b,error:R,text:R?a:o,style:F})]})});PickerTrigger.displayName="PickerTrigger";const buildStyles=e=>StyleSheet.create({root:{width:"100%"},label:{includeFontPadding:!1},valueText:{flex:1,includeFontPadding:!1},message:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center"}});export{PickerTrigger};export default PickerTrigger;

package/lib/module/components/ProfileCompletion/ProfileCompletion.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_AVATAR_SIZE=56,DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,t)=>{const{progress:o,title:r,subtitle:i,description:s,source:n,ImageComponent:l,size:a=DEFAULT_AVATAR_SIZE,avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:p,ringWidth:d,ringGap:g=DEFAULT_RING_GAP,ringVariant:u="banded",tone:y,ringColor:f,animated:h=!0,showCompleteBadge:x=!0,trailing:b,accessibilityLabel:_,style:j,titleStyle:S,subtitleStyle:w,descriptionStyle:A,testID:I}=e,C=useTheme(),T=useMemo(()=>buildStyles(C),[C]),R=d??C.components.progressRing?.strokeWidth??3,D=a+2*(g+R),v=Math.min(100,Math.max(0,Number.isNaN(o)?0:o)),z=Math.round(v),P=_??`${r}, profile ${z}% complete`,V=I??"profile-completion",L=x&&v>=100,F=Math.max(16,Math.round(.3*D)),G=D/2*(1+Math.SQRT1_2)-R/2,E=f??("banded"===u&&null==y||"success"===y?C.colors.success:"warning"===y?C.colors.warning:"error"===y?C.colors.error:C.colors.primary);return _jsxs(View,{ref:t,style:[T.root,j],testID:I,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:P,accessibilityValue:{min:0,max:100,now:z},testID:`${V}-summary`,children:[_jsxs(View,{style:{width:D,height:D},children:[_jsx(ProgressRing,{progress:v/100,size:D,strokeWidth:R,tone:y??"primary",ringColor:f,colorByProgress:"banded"===u&&null==y&&null==f,animated:h,testID:`${V}-ring`,children:_jsx(Avatar,{name:r,source:n,ImageComponent:l,size:a,tone:c,backgroundColor:m,color:p,accessibilityLabel:`${r}'s avatar`})}),L?_jsx(View,{pointerEvents:"none",style:[T.badge,{width:F,height:F,borderRadius:F/2,...smoothCorners,left:G-F/2,top:G-F/2,backgroundColor:C.colors.background.elevated}],testID:`${V}-complete-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:F-2,color:E})}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{style:[T.title,S],numberOfLines:2,children:r}),i?_jsx(Text,{style:[T.subtitle,w],numberOfLines:1,children:i}):null,s?_jsx(Text,{style:[T.description,A],children:s}):null]})]}),null!=b?_jsx(View,{style:T.trailing,children:b}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},body:{flex:1,rowGap:2},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},title:{fontSize:e.typography.fontSize.xl,lineHeight:e.typography.fontSize.xl*e.typography.lineHeight.tight,color:e.colors.text.primary,...fontFor(e,"semibold")},subtitle:{fontSize:e.typography.fontSize.sm,color:e.colors.text.tertiary,textTransform:"uppercase",letterSpacing:e.typography.letterSpacing.wide,...fontFor(e,"medium")},description:{fontSize:e.typography.fontSize.base,color:e.colors.text.secondary,...fontFor(e,"normal")},trailing:{alignSelf:"flex-start"}});export{ProfileCompletion};export default ProfileCompletion;
+"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_AVATAR_SIZE=56,DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,t)=>{const{progress:o,title:r,subtitle:i,description:s,source:n,ImageComponent:l,size:a=DEFAULT_AVATAR_SIZE,avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:p,ringWidth:d,ringGap:g=DEFAULT_RING_GAP,ringVariant:u="banded",tone:y,ringColor:f,animated:x=!0,showCompleteBadge:h=!0,trailing:b,accessibilityLabel:_,style:j,titleStyle:S,subtitleStyle:w,descriptionStyle:A,testID:I}=e,C=useTheme(),T=useMemo(()=>buildStyles(C),[C]),R=d??C.components.progressRing?.strokeWidth??3,D=a+2*(g+R),v=Math.min(100,Math.max(0,Number.isNaN(o)?0:o)),z=Math.round(v),P=_??`${r}, profile ${z}% complete`,V=I??"profile-completion",L=h&&v>=100,F=Math.max(16,Math.round(.3*D)),G=D/2*(1+Math.SQRT1_2)-R/2,E=f??("banded"===u&&null==y||"success"===y?C.colors.success:"warning"===y?C.colors.warning:"error"===y?C.colors.error:C.colors.primary);return _jsxs(View,{ref:t,style:[T.root,j],testID:I,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:P,accessibilityValue:{min:0,max:100,now:z},testID:`${V}-summary`,children:[_jsxs(View,{style:{width:D,height:D},children:[_jsx(ProgressRing,{progress:v/100,size:D,strokeWidth:R,tone:y??"primary",ringColor:f,colorByProgress:"banded"===u&&null==y&&null==f,animated:x,testID:`${V}-ring`,children:_jsx(Avatar,{name:r,source:n,ImageComponent:l,size:a,tone:c,backgroundColor:m,color:p,accessibilityLabel:`${r}'s avatar`})}),L?_jsx(View,{pointerEvents:"none",style:[T.badge,{width:F,height:F,borderRadius:C.radius.pill,...smoothCorners,left:G-F/2,top:G-F/2,backgroundColor:C.colors.background.elevated}],testID:`${V}-complete-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:F-2,color:E})}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{style:[T.title,S],numberOfLines:2,children:r}),i?_jsx(Text,{style:[T.subtitle,w],numberOfLines:1,children:i}):null,s?_jsx(Text,{style:[T.description,A],children:s}):null]})]}),null!=b?_jsx(View,{style:T.trailing,children:b}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},body:{flex:1,rowGap:e.spacing.xxs},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},title:{fontSize:e.typography.fontSize.xl,lineHeight:e.typography.fontSize.xl*e.typography.lineHeight.tight,color:e.colors.text.primary,...fontFor(e,"semibold")},subtitle:{fontSize:e.typography.fontSize.sm,color:e.colors.text.tertiary,textTransform:"uppercase",letterSpacing:e.typography.letterSpacing.wide,...fontFor(e,"medium")},description:{fontSize:e.typography.fontSize.base,color:e.colors.text.secondary,...fontFor(e,"normal")},trailing:{alignSelf:"flex-start"}});export{ProfileCompletion};export default ProfileCompletion;

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

@@ -1 +1 @@
-"use strict";import{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.onNeutral};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: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:T,labels:I,haptic:F,onError:A,accessibilityLabel:P,style:w,testID:E}=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,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),[N,Z]=useState(!1),[q,G]=useState(o);o!==q&&(G(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)&&Z(!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||(Z(!1),"remove"===e.kind?ce():ue.current=e.source)},[ce]),pe=useCallback(()=>{const e=ue.current;ue.current=null,e&&le(e)},[le]),be=E??"profile-picker",ge=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:ge,accessibilityHint:fieldTextAsString(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},"aria-disabled":K?X:void 0,"aria-busy":l,testID:`${be}-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:ge},Q??"initials"):fe,l?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:re,...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: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:N,onClose:()=>Z(!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.toneText.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;
+"use strict";import{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.onNeutral};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),[N,Z]=useState(!1),[q,G]=useState(o);o!==q&&(G(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)&&Z(!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||(Z(!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},"aria-disabled":K?X:void 0,"aria-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:L.radius.pill,...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,marginTop:L.spacing.xxs,...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:N,onClose:()=>Z(!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.toneText.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},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;