@webority/mobile-ui 0.7.3 → 0.7.4

package/lib/commonjs/components/FilePicker/FilePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.matchesAccept=exports.formatFileSize=exports.default=exports.FilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index4=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(n,t,s):n[t]=e[t]);return n})(e,t)}let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`},formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,i=0;for(;r>=1024&&i<t.length-1;)r/=1024,i+=1;return`${r>=10||0===i?Math.round(r):Math.round(10*r)/10} ${t[i]}`};exports.formatFileSize=formatFileSize;const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));exports.matchesAccept=matchesAccept;const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=exports.FilePicker=(0,_react.forwardRef)((e,t)=>{const{files:r,defaultFiles:i,onChange:o,sources:s,maxFiles:n,maxSizeMB:l,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:m,disabled:h=!1,helperText:x,error:p,labels:_,haptic:y,onPick:b,onRemove:f,onError:j,onFilePress:v,onRetry:R,style:S,accessibilityLabel:T,testID:C}=e,w=(0,_index2.useTheme)(),k=(0,_react.useMemo)(()=>buildStyles(w),[w]),P=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,..._}),[_]),F=w.components.filePicker,N=F?.thumbnailSize??84,z=F?.borderRadius??w.radius.md,O=F?.dashedBorderColor??w.colors.primary,[I,M]=(0,_index.useControllableState)({value:r,defaultValue:i??[],onChange:o}),V=(0,_react.useRef)(I);V.current=I;const B=(0,_react.useCallback)(e=>{V.current=e,M(e)},[M]),[L,W]=(0,_react.useState)(null),[q,A]=(0,_react.useState)(!1),$=p??L??void 0,H="number"==typeof n&&I.length>=n,E=(0,_react.useCallback)((e,t)=>{0!==e.length&&(W(e[0]),e.forEach(e=>j?.(e,t)),!1!==y&&(0,_index3.triggerHaptic)("notificationError"))},[j,y]),D=(0,_react.useCallback)(async e=>{let t;try{t=await e.pick()}catch(e){return void E([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let i=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof n){const e=Math.max(0,n-V.current.length);i.length>e&&(r.push(P.errorTooMany(n)),i=i.slice(0,e))}const o=[];for(const e of i){if("number"==typeof l&&"number"==typeof e.size&&e.size>1024*l*1024){r.push(P.errorTooLarge(e.name,l));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):o.push(e)}if(E(r),0===o.length)return;if(!d){B([...V.current,...o]),W(r.length>0?r[0]:null);const e=(0,_index3.resolveHaptic)(y,"selection");return e&&(0,_index3.triggerHaptic)(e),void b?.(o)}const s=o.map(e=>({...e,status:"processing"}));B([...V.current,...s]);const u=[];for(const e of s)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};B(V.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){B(V.current.filter(t=>t.id!==e.id)),E([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&W(null);const e=(0,_index3.resolveHaptic)(y,"selection");e&&(0,_index3.triggerHaptic)(e),b?.(u)}},[n,l,a,c,d,P,E,B,b,y]),U=(0,_react.useCallback)(e=>{if(h||H)return;const t=e?s.find(t=>t.key===e):1===s.length?s[0]:void 0;t?D(t):s.length>1&&A(!0)},[h,H,s,D]),G=(0,_react.useCallback)(e=>{if(h)return;B(V.current.filter(t=>t.id!==e.id)),W(null);const t=(0,_index3.resolveHaptic)(y,"selection");t&&(0,_index3.triggerHaptic)(t),f?.(e)},[h,B,f,y]),K=(0,_react.useCallback)(()=>{B([]),W(null)},[B]);(0,_react.useImperativeHandle)(t,()=>({open:U,clear:K}),[U,K]);const Y=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,J=T??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=w.icons?.attachment??_defaultIcons.defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index4.Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.tileOverlayText,{color:w.colors.onOverlay}],children:`${t}%`}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressFill,{width:`${t}%`,backgroundColor:w.colors.primary}]})})]})}return"done"===e.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.doneBadge,{backgroundColor:w.colors.success}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.doneBadgeText,{color:w.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:t},style:k.thumbnailImage}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.extensionTile,{backgroundColor:w.colors.background.secondary}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.extensionText,{color:w.colors.text.secondary,...(0,_index2.fontFor)(w,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(e),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[k.removeButton,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.removeButtonText,{color:w.colors.onOverlay}],children:"×"})}),retryButton=e=>R&&"error"===e.status?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>R(e),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.retryText,{color:w.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:h,remove:()=>G(e),retry:R?()=>R(e):void 0},i=g?g(r):"card"===u?(e=>{const{file:t}=e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listRow,{borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary,backgroundColor:w.colors.background.primary}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listThumb,{borderRadius:w.radius.sm,..._corners.smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index4.Spinner,{size:"sm"})}):null]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.listTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"middle",style:[k.listName,{color:w.colors.text.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:t.name}),(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,style:[k.listSubtitle,{color:"error"===t.status?w.colors.error:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:w.colors.primary}]})}):null]}),retryButton(t),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(t),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.listRemoveText,{color:w.colors.text.tertiary}],children:"×"})})]})})(r);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:v?()=>v(e):void 0,disabled:h||!v,accessibilityLabel:fileA11yLabel(e),children:i},e.id)},X={open:U,disabled:h||H,fileCount:I.length,atCapacity:H},dashedTrigger=e=>(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>U(),disabled:h||H,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:h||H},style:({pressed:t})=>[k.trigger,e?k.triggerCompact:null,{borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:t?w.colors.surface.pressed:w.colors.background.primary,opacity:h||H?.55:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.triggerRow,children:[Q?Q({size:16,color:w.colors.primary}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.triggerText,{color:w.colors.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&x?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.helperText,{color:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:x}):null]}),Z=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>U(),disabled:h||H,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[k.tile,k.addTile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:e?w.colors.surface.pressed:"transparent",opacity:h||H?.55:1}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.addTileText,{color:w.colors.primary}],children:"+"})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.container,S],testID:C,accessibilityLabel:J,children:["card"===u?0===I.length?m?m(X):dashedTrigger(!1):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[k.strip,{columnGap:w.spacing.sm}],children:[I.map(renderOneFile),m?m(X):H||h?null:Z]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{rowGap:w.spacing.sm},children:[m?m(X):H?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),$?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessibilityLiveRegion:"polite",style:[k.errorText,{color:w.colors.error,fontSize:w.typography.fontSize.xs,marginTop:w.spacing.xxs}],children:$}):null,(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:q,onClose:()=>A(!1),title:P.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{A(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});var _default=exports.default=FilePicker;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.matchesAccept=exports.formatFileSize=exports.default=exports.FilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index4=require("../FieldBase/index.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index5=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(n,t,s):n[t]=e[t]);return n})(e,t)}let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`},formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,i=0;for(;r>=1024&&i<t.length-1;)r/=1024,i+=1;return`${r>=10||0===i?Math.round(r):Math.round(10*r)/10} ${t[i]}`};exports.formatFileSize=formatFileSize;const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));exports.matchesAccept=matchesAccept;const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=exports.FilePicker=(0,_react.forwardRef)((e,t)=>{const{files:r,defaultFiles:i,onChange:o,sources:s,maxFiles:n,maxSizeMB:l,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:h,disabled:m=!1,helperText:x,error:p,labels:_,haptic:y,onPick:b,onRemove:f,onError:j,onFilePress:v,onRetry:R,style:S,accessibilityLabel:T,testID:C}=e,w=(0,_index2.useTheme)(),k=(0,_react.useMemo)(()=>buildStyles(w),[w]),F=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,..._}),[_]),P=w.components.filePicker,N=P?.thumbnailSize??84,z=P?.borderRadius??w.radius.md,O=P?.dashedBorderColor??w.colors.primary,[I,M]=(0,_index.useControllableState)({value:r,defaultValue:i??[],onChange:o}),V=(0,_react.useRef)(I);V.current=I;const B=(0,_react.useCallback)(e=>{V.current=e,M(e)},[M]),[L,q]=(0,_react.useState)(null),[W,A]=(0,_react.useState)(!1),$=p??L??void 0,H="number"==typeof n&&I.length>=n,E=(0,_react.useCallback)((e,t)=>{0!==e.length&&(q(e[0]),e.forEach(e=>j?.(e,t)),!1!==y&&(0,_index3.triggerHaptic)("notificationError"))},[j,y]),D=(0,_react.useCallback)(async e=>{let t;try{t=await e.pick()}catch(e){return void E([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let i=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof n){const e=Math.max(0,n-V.current.length);i.length>e&&(r.push(F.errorTooMany(n)),i=i.slice(0,e))}const o=[];for(const e of i){if("number"==typeof l&&"number"==typeof e.size&&e.size>1024*l*1024){r.push(F.errorTooLarge(e.name,l));continue}if(!matchesAccept(e.type,a)){r.push(F.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):o.push(e)}if(E(r),0===o.length)return;if(!d){B([...V.current,...o]),q(r.length>0?r[0]:null);const e=(0,_index3.resolveHaptic)(y,"selection");return e&&(0,_index3.triggerHaptic)(e),void b?.(o)}const s=o.map(e=>({...e,status:"processing"}));B([...V.current,...s]);const u=[];for(const e of s)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};B(V.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){B(V.current.filter(t=>t.id!==e.id)),E([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&q(null);const e=(0,_index3.resolveHaptic)(y,"selection");e&&(0,_index3.triggerHaptic)(e),b?.(u)}},[n,l,a,c,d,F,E,B,b,y]),U=(0,_react.useCallback)(e=>{if(m||H)return;const t=e?s.find(t=>t.key===e):1===s.length?s[0]:void 0;t?D(t):s.length>1&&A(!0)},[m,H,s,D]),G=(0,_react.useCallback)(e=>{if(m)return;B(V.current.filter(t=>t.id!==e.id)),q(null);const t=(0,_index3.resolveHaptic)(y,"selection");t&&(0,_index3.triggerHaptic)(t),f?.(e)},[m,B,f,y]),K=(0,_react.useCallback)(()=>{B([]),q(null)},[B]);(0,_react.useImperativeHandle)(t,()=>({open:U,clear:K}),[U,K]);const Y=0===I.length?F.trigger:`${I.length} file${1===I.length?"":"s"} attached`,J=T??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=w.icons?.attachment??_defaultIcons.defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index5.Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.tileOverlayText,{color:w.colors.onOverlay}],children:`${t}%`}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressFill,{width:`${t}%`,backgroundColor:w.colors.primary}]})})]})}return"done"===e.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.doneBadge,{backgroundColor:w.colors.success}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.doneBadgeText,{color:w.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:t},style:k.thumbnailImage}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.extensionTile,{backgroundColor:w.colors.background.secondary}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.extensionText,{color:w.colors.text.secondary,...(0,_index2.fontFor)(w,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(e),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:F.removeFile(e.name),style:[k.removeButton,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.removeButtonText,{color:w.colors.onOverlay}],children:"×"})}),retryButton=e=>R&&"error"===e.status?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>R(e),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:F.retry,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.retryText,{color:w.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:m,remove:()=>G(e),retry:R?()=>R(e):void 0},i=g?g(r):"card"===u?(e=>{const{file:t}=e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listRow,{borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary,backgroundColor:w.colors.background.primary}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listThumb,{borderRadius:w.radius.sm,..._corners.smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index5.Spinner,{size:"sm"})}):null]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.listTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"middle",style:[k.listName,{color:w.colors.text.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:t.name}),(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,style:[k.listSubtitle,{color:"error"===t.status?w.colors.error:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:w.colors.primary}]})}):null]}),retryButton(t),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(t),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:F.removeFile(t.name),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.listRemoveText,{color:w.colors.text.tertiary}],children:"×"})})]})})(r);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:v?()=>v(e):void 0,disabled:m||!v,accessibilityLabel:fileA11yLabel(e),children:i},e.id)},X={open:U,disabled:m||H,fileCount:I.length,atCapacity:H},dashedTrigger=e=>(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>U(),disabled:m||H,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:m||H},style:({pressed:t})=>[k.trigger,e?k.triggerCompact:null,{borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:t?w.colors.surface.pressed:w.colors.background.primary,opacity:m||H?.55:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.triggerRow,children:[Q?Q({size:16,color:w.colors.primary}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.triggerText,{color:w.colors.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:0===I.length?F.trigger:F.addMore})]}),!e&&x?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.helperText,{color:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:x}):null]}),Z=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>U(),disabled:m||H,accessibilityRole:"button",accessibilityLabel:F.addMore,style:({pressed:e})=>[k.tile,k.addTile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:e?w.colors.surface.pressed:"transparent",opacity:m||H?.55:1}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.addTileText,{color:w.colors.primary}],children:"+"})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.container,S],testID:C,accessibilityLabel:J,children:["card"===u?0===I.length?h?h(X):dashedTrigger(!1):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[k.strip,{columnGap:w.spacing.sm}],children:[I.map(renderOneFile),h?h(X):H||m?null:Z]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{rowGap:w.spacing.sm},children:[h?h(X):H?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),(0,_index4.hasFieldText)($)?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessibilityLiveRegion:"polite",style:[k.errorText,{color:w.colors.error,fontSize:w.typography.fontSize.xs,marginTop:w.spacing.xxs}],children:$}):null,(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:W,onClose:()=>A(!1),title:F.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{A(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});var _default=exports.default=FilePicker;

package/lib/commonjs/components/Notation/Notation.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sym=exports.parseNotation=exports.default=exports.Notation=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,i,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(s=t?n:r){if(s.has(e))return s.get(e);s.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?s(o,t,i):o[t]=e[t]);return o})(e,t)}const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g,parseNotation=e=>{const t=String(e??""),r=[];let n=0;for(const e of t.matchAll(SUBSCRIPTED)){const s=e.index??0;s>n&&r.push({text:t.slice(n,s)}),r.push({text:e[1],sub:e[2]}),n=s+e[0].length}return n<t.length&&r.push({text:t.slice(n)}),r};exports.parseNotation=parseNotation;const Notation=({text:e,base:t,sub:r,desc:n,testID:s})=>{const i=(0,_index.useTheme)(),o={fontSize:Math.round(.75*i.typography.fontSize.sm),lineHeight:Math.round(.9*i.typography.fontSize.sm)};return null!=t?(0,_jsxRuntime.jsxs)(_Text.Text,{testID:s,children:[t,r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:o,children:r}):null,n?` ${n}`:null]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:s,children:parseNotation(e).map((e,t)=>e.sub?(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[e.text,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:o,children:e.sub})]},t):(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.text},t))})};exports.Notation=Notation;const sym=(e,t,r)=>(0,_jsxRuntime.jsx)(Notation,{base:e,sub:t,desc:r});exports.sym=sym;var _default=exports.default=Notation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sym=exports.parseNotation=exports.default=exports.Notation=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,s,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?i(o,t,s):o[t]=e[t]);return o})(e,t)}const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g,parseNotation=e=>{const t=String(e??""),r=[];let n=0;for(const e of t.matchAll(SUBSCRIPTED)){const i=e.index??0;i>n&&r.push({text:t.slice(n,i)}),r.push({text:e[1],sub:e[2]}),n=i+e[0].length}return n<t.length&&r.push({text:t.slice(n)}),r};exports.parseNotation=parseNotation;const SUB_DROP=.4,Subscript=({children:e,color:t})=>{const r=(0,_index.useTheme)(),n=Math.round(.75*r.typography.fontSize.sm);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{transform:[{translateY:Math.round(.4*n)}]},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{maxFontSizeMultiplier:r.maxFontSizeMultiplier,style:[styles.sub,{fontSize:n,lineHeight:n,color:t??r.colors.text.primary,...(0,_index.fontFor)(r,"normal")}],children:e})})},renderNotation=(e,t)=>parseNotation(e).map((e,r)=>e.sub?(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[e.text,(0,_jsxRuntime.jsx)(Subscript,{color:t,children:e.sub})]},r):(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.text},r)),Notation=({text:e,base:t,sub:r,desc:n,color:i,testID:s})=>null!=t?(0,_jsxRuntime.jsxs)(_Text.Text,{testID:s,children:[t,r?(0,_jsxRuntime.jsx)(Subscript,{color:i,children:r}):null,n?` ${n}`:null]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:s,children:"string"==typeof e||null==e?renderNotation(e??"",i):e.map((e,t)=>"string"==typeof e?(0,_jsxRuntime.jsx)(_react.Fragment,{children:renderNotation(e,i)},t):(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.verbatim},t))});exports.Notation=Notation;const sym=(e,t,r,n)=>(0,_jsxRuntime.jsx)(Notation,{base:e,sub:t,desc:r,color:n});exports.sym=sym;const styles=_reactNative.StyleSheet.create({sub:{includeFontPadding:!1}});var _default=exports.default=Notation;

package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js

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

package/lib/commonjs/components/ProfilePicker/ProfilePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProfilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index3=require("../AppIcon/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Avatar/index.js"),_index5=require("../FieldBase/index.js"),_FilePicker=require("../FilePicker/FilePicker.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index6=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=r?o:t){if(n.has(e))return n.get(e);n.set(e,s)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(i.get||i.set)?n(s,r,i):s[r]=e[r]);return s})(e,r)}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,t)=>Math.min(t,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,t,o)=>{const n=toneFor(e,r),i=o?.badgeColor??n.base,s=e.colors.background.primary,l="neutral"===r&&void 0===o?.badgeColor;let a;switch(t){case"soft":a={fill:l?e.colors.background.tertiary:(0,_color.blendOf)(i,.14,s,e.colors.background.secondary),ring:s,icon:i};break;case"outline":a={fill:s,ring:l?e.colors.border.primary:i,icon:i};break;default:a={fill:i,ring:s,icon:n.on}}return o?.badgeIconColor?{...a,icon:o.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=exports.ProfilePicker=(0,_react.forwardRef)((e,r)=>{const{value:t,name:o,sources:n,onPick:i,onRemove:s,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:_="circle",badgeIcon:m="camera",tone:p,variant:x,avatarTone:b,avatarBackgroundColor:g,avatarColor:f,label:h,required:y=!1,helperText:v,error:j,layout:k="stacked",title:C,subtitle:R,ImageComponent:S,labels:P,haptic:I,onError:T,accessibilityLabel:w,style:E,testID:M}=e,F=(0,_index.useTheme)(),A=F.components.profilePicker,O=p??A?.defaultTone??"primary",L=x??A?.defaultVariant??"solid",q=(0,_react.useMemo)(()=>badgeLookFor(F,O,L,A),[F,O,L,A]),N=b??A?.defaultAvatarTone,z=(0,_react.useMemo)(()=>{const e=N?(0,_index4.avatarToneColors)(F,N):null;return{background:g??e?.background??F.colors.background.tertiary,icon:f??e?.color??F.colors.text.tertiary}},[F,N,g,f]),V=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,...P}),[P]),[B,D]=(0,_react.useState)(null),[W,H]=(0,_react.useState)(null),[U,$]=(0,_react.useState)(!1),[Z,G]=(0,_react.useState)(t);t!==Z&&(G(t),D(null));const X=l||a,Q=B??t??null,Y=j??W??void 0,J=!X&&(null!==B||Boolean(t)&&Boolean(s)),K=n.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],re=resolveRadius(_,ee),te=re*(1-Math.SQRT1_2),oe=clamp(Math.round(.28*ee),24,44),ne=te-oe/2,ie=Math.max(0,-ne),se=(0,_react.useCallback)(e=>{H(e),T?.(e),!1!==I&&(0,_index2.triggerHaptic)("notificationError")},[T,I]),le=(0,_react.useCallback)(async e=>{let r;try{r=await e.pick()}catch(e){return void se(e instanceof Error?e.message:String(e))}const t=r?.[0];if(!t)return;if("number"==typeof u&&"number"==typeof t.size&&t.size>1024*u*1024)return void se(V.errorTooLarge(u));if(t.type&&!(0,_FilePicker.matchesAccept)(t.type,c))return void se(V.errorWrongType);H(null),D(t.uri);const o=(0,_index2.resolveHaptic)(I,"selection");o&&(0,_index2.triggerHaptic)(o),i?.(t)},[u,c,V,I,i,se]),ae=(0,_react.useCallback)(()=>{X||(de.current=null,1!==n.length||J?(n.length>0||J)&&$(!0):le(n[0]))},[X,n,J,le]),ce=(0,_react.useCallback)(()=>{D(null),H(null);const e=(0,_index2.resolveHaptic)(I,"selection");e&&(0,_index2.triggerHaptic)(e),s?.()},[I,s]),ue=(0,_react.useMemo)(()=>{const e=n.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[n,J]),de=(0,_react.useRef)(null),_e=(0,_react.useCallback)(e=>{de.current||($(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),me=(0,_react.useCallback)(()=>{const e=de.current;de.current=null,e&&le(e)},[le]),pe=M??"profile-picker",xe=w??(K?V.pick:o),be=(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners,backgroundColor:z.background}],children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"user",size:Math.round(.45*ee),color:z.icon})}),ge=(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:ee,height:ee,marginBottom:ie,marginRight:ie},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:xe,accessibilityHint:Y,accessibilityState:K?{disabled:X,busy:l}:{busy:l},testID:`${pe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||o?(0,_jsxRuntime.jsx)(_index4.Avatar,{source:Q?{uri:Q}:void 0,name:o,size:ee,shape:_,tone:N,backgroundColor:g,color:f,ImageComponent:S,accessibilityLabel:xe},Q??"initials"):be,l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,styles.overlay,{borderRadius:re,..._corners.smoothCorners,backgroundColor:F.colors.background.overlay}],testID:`${pe}-loading`,children:(0,_jsxRuntime.jsx)(_index6.Spinner,{size:ee>=100?"md":"sm",color:F.colors.onPrimary})}):null,!a&&K?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:`${pe}-badge`,style:[styles.badge,{width:oe,height:oe,borderRadius:oe/2,..._corners.smoothCorners,right:ne,bottom:ne,backgroundColor:q.fill,borderColor:q.ring}],children:(0,_slotIcon.renderSlotIcon)(m,{color:q.icon,size:Math.round(.55*oe),disabled:!1})}):null]})}),fe="stacked"!==k?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.meta,"profile"===k?styles.metaCentred:null],children:[C?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,"profile"===k?styles.textCentred:null,{color:F.colors.text.primary,fontSize:F.typography.fontSize.base,...(0,_index.fontFor)(F,"semibold")}],children:C}):null,R?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.subtitle,"profile"===k?styles.textCentred:null,{color:F.colors.text.secondary,fontSize:F.typography.fontSize.sm,...(0,_index.fontFor)(F,"normal")}],children:R}):null,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:Boolean(Y)})]}):(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:Boolean(Y)});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:E,testID:M,children:[h?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{required:y,children:h}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:"inline"===k?[styles.row,{columnGap:F.spacing.md}]:["profile"===k?styles.columnCentred:styles.column,{rowGap:F.spacing.xs}],children:[ge,fe]}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:U,onClose:()=>$(!1),onAfterClose:me,title:V.sheetTitle,options:ue,labelOf:e=>{const r=e;return"remove"===r.kind?V.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?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"trash",size:20,color:F.colors.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>_e(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=_reactNative.StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{..._reactNative.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"}});var _default=exports.default=ProfilePicker;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProfilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index3=require("../AppIcon/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Avatar/index.js"),_index5=require("../FieldBase/index.js"),_FilePicker=require("../FilePicker/FilePicker.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index6=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=r?o:t){if(i.has(e))return i.get(e);i.set(e,s)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(n.get||n.set)?i(s,r,n):s[r]=e[r]);return s})(e,r)}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,t)=>Math.min(t,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,t,o)=>{const i=toneFor(e,r),n=o?.badgeColor??i.base,s=e.colors.background.primary,l="neutral"===r&&void 0===o?.badgeColor;let a;switch(t){case"soft":a={fill:l?e.colors.background.tertiary:(0,_color.blendOf)(n,.14,s,e.colors.background.secondary),ring:s,icon:n};break;case"outline":a={fill:s,ring:l?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:s,icon:i.on}}return o?.badgeIconColor?{...a,icon:o.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=exports.ProfilePicker=(0,_react.forwardRef)((e,r)=>{const{value:t,name:o,sources:i,onPick:n,onRemove:s,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:_="circle",badgeIcon:m="camera",tone:p,variant:x,avatarTone:g,avatarBackgroundColor:b,avatarColor:f,label:h,required:y=!1,helperText:v,error:j,layout:k="stacked",title:C,subtitle:R,ImageComponent:S,labels:P,haptic:I,onError:T,accessibilityLabel:w,style:F,testID:E}=e,M=(0,_index.useTheme)(),A=M.components.profilePicker,O=p??A?.defaultTone??"primary",L=x??A?.defaultVariant??"solid",q=(0,_react.useMemo)(()=>badgeLookFor(M,O,L,A),[M,O,L,A]),N=g??A?.defaultAvatarTone,z=(0,_react.useMemo)(()=>{const e=N?(0,_index4.avatarToneColors)(M,N):null;return{background:b??e?.background??M.colors.background.tertiary,icon:f??e?.color??M.colors.text.tertiary}},[M,N,b,f]),V=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,...P}),[P]),[D,W]=(0,_react.useState)(null),[B,H]=(0,_react.useState)(null),[U,$]=(0,_react.useState)(!1),[Z,G]=(0,_react.useState)(t);t!==Z&&(G(t),W(null));const X=l||a,Q=D??t??null,Y=j??B??void 0,J=!X&&(null!==D||Boolean(t)&&Boolean(s)),K=i.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],re=resolveRadius(_,ee),te=re*(1-Math.SQRT1_2),oe=clamp(Math.round(.28*ee),24,44),ie=te-oe/2,ne=Math.max(0,-ie),se=(0,_react.useCallback)(e=>{H(e),T?.(e),!1!==I&&(0,_index2.triggerHaptic)("notificationError")},[T,I]),le=(0,_react.useCallback)(async e=>{let r;try{r=await e.pick()}catch(e){return void se(e instanceof Error?e.message:String(e))}const t=r?.[0];if(!t)return;if("number"==typeof u&&"number"==typeof t.size&&t.size>1024*u*1024)return void se(V.errorTooLarge(u));if(t.type&&!(0,_FilePicker.matchesAccept)(t.type,c))return void se(V.errorWrongType);H(null),W(t.uri);const o=(0,_index2.resolveHaptic)(I,"selection");o&&(0,_index2.triggerHaptic)(o),n?.(t)},[u,c,V,I,n,se]),ae=(0,_react.useCallback)(()=>{X||(de.current=null,1!==i.length||J?(i.length>0||J)&&$(!0):le(i[0]))},[X,i,J,le]),ce=(0,_react.useCallback)(()=>{W(null),H(null);const e=(0,_index2.resolveHaptic)(I,"selection");e&&(0,_index2.triggerHaptic)(e),s?.()},[I,s]),ue=(0,_react.useMemo)(()=>{const e=i.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[i,J]),de=(0,_react.useRef)(null),_e=(0,_react.useCallback)(e=>{de.current||($(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),me=(0,_react.useCallback)(()=>{const e=de.current;de.current=null,e&&le(e)},[le]),pe=E??"profile-picker",xe=w??(K?V.pick:o),ge=(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners,backgroundColor:z.background}],children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"user",size:Math.round(.45*ee),color:z.icon})}),be=(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:xe,accessibilityHint:(0,_index5.fieldTextAsString)(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},testID:`${pe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||o?(0,_jsxRuntime.jsx)(_index4.Avatar,{source:Q?{uri:Q}:void 0,name:o,size:ee,shape:_,tone:N,backgroundColor:b,color:f,ImageComponent:S,accessibilityLabel:xe},Q??"initials"):ge,l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,styles.overlay,{borderRadius:re,..._corners.smoothCorners,backgroundColor:M.colors.background.overlay}],testID:`${pe}-loading`,children:(0,_jsxRuntime.jsx)(_index6.Spinner,{size:ee>=100?"md":"sm",color:M.colors.onPrimary})}):null,!a&&K?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:`${pe}-badge`,style:[styles.badge,{width:oe,height:oe,borderRadius:oe/2,..._corners.smoothCorners,right:ie,bottom:ie,backgroundColor:q.fill,borderColor:q.ring}],children:(0,_slotIcon.renderSlotIcon)(m,{color:q.icon,size:Math.round(.55*oe),disabled:!1})}):null]})}),fe="stacked"!==k?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.meta,"profile"===k?styles.metaCentred:null],children:[C?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,"profile"===k?styles.textCentred:null,{color:M.colors.text.primary,fontSize:M.typography.fontSize.base,...(0,_index.fontFor)(M,"semibold")}],children:C}):null,R?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.subtitle,"profile"===k?styles.textCentred:null,{color:M.colors.text.secondary,fontSize:M.typography.fontSize.sm,...(0,_index.fontFor)(M,"normal")}],children:R}):null,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)})]}):(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:F,testID:E,children:[h?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{required:y,children:h}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:"inline"===k?[styles.row,{columnGap:M.spacing.md}]:["profile"===k?styles.columnCentred:styles.column,{rowGap:M.spacing.xs}],children:[be,fe]}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:U,onClose:()=>$(!1),onAfterClose:me,title:V.sheetTitle,options:ue,labelOf:e=>{const r=e;return"remove"===r.kind?V.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?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"trash",size:20,color:M.colors.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>_e(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=_reactNative.StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{..._reactNative.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"}});var _default=exports.default=ProfilePicker;

package/lib/commonjs/components/Radio/Radio.js

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

package/lib/commonjs/components/SliderField/SliderField.js

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

package/lib/commonjs/components/TagInput/TagInput.js

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

package/lib/module/components/FilePicker/FilePicker.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,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{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,r)=>`${e} is larger than ${r} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const r=["B","KB","MB","GB"];let t=e,o=0;for(;t>=1024&&o<r.length-1;)t/=1024,o+=1;return`${t>=10||0===o?Math.round(t):Math.round(10*t)/10} ${r[o]}`};export const matchesAccept=(e,r)=>!r||0===r.length||!!e&&r.some(r=>"*/*"===r||"*"===r||(r.endsWith("/*")?e.startsWith(r.slice(0,r.length-1)):e===r));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const r=e.lastIndexOf(".");return r<=0||r===e.length-1?"FILE":e.slice(r+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,r)=>{const{files:t,defaultFiles:o,onChange:i,sources:s,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:h,disabled:p=!1,helperText:m,error:y,labels:b,haptic:f,onPick:x,onRemove:S,onError:T,onFilePress:j,onRetry:C,style:v,accessibilityLabel:w,testID:k}=e,_=useTheme(),F=useMemo(()=>buildStyles(_),[_]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),z=_.components.filePicker,R=z?.thumbnailSize??84,I=z?.borderRadius??_.radius.md,V=z?.dashedBorderColor??_.colors.primary,[O,B]=useControllableState({value:t,defaultValue:o??[],onChange:i}),L=useRef(O);L.current=O;const M=useCallback(e=>{L.current=e,B(e)},[B]),[H,$]=useState(null),[A,E]=useState(!1),W=y??H??void 0,D="number"==typeof l&&O.length>=l,U=useCallback((e,r)=>{0!==e.length&&($(e[0]),e.forEach(e=>T?.(e,r)),!1!==f&&triggerHaptic("notificationError"))},[T,f]),G=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void U([e instanceof Error?e.message:String(e)])}if(!r||0===r.length)return;const t=[];let o=r.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-L.current.length);o.length>e&&(t.push(P.errorTooMany(l)),o=o.slice(0,e))}const i=[];for(const e of o){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){t.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){t.push(P.errorWrongType(e.name));continue}const r=c?.(e);r?t.push(r):i.push(e)}if(U(t),0===i.length)return;if(!d){M([...L.current,...i]),$(t.length>0?t[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void x?.(i)}const s=i.map(e=>({...e,status:"processing"}));M([...L.current,...s]);const u=[];for(const e of s)try{const r=await d({...e,status:"idle"}),t={...r,id:e.id,status:r.status??"idle"};M(L.current.map(r=>r.id===e.id?t:r)),u.push(t)}catch(r){M(L.current.filter(r=>r.id!==e.id)),U([r instanceof Error?r.message:String(r)],e)}if(u.length>0){0===t.length&&$(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),x?.(u)}},[l,n,a,c,d,P,U,M,x,f]),N=useCallback(e=>{if(p||D)return;const r=e?s.find(r=>r.key===e):1===s.length?s[0]:void 0;r?G(r):s.length>1&&E(!0)},[p,D,s,G]),q=useCallback(e=>{if(p)return;M(L.current.filter(r=>r.id!==e.id)),$(null);const r=resolveHaptic(f,"selection");r&&triggerHaptic(r),S?.(e)},[p,M,S,f]),K=useCallback(()=>{M([]),$(null)},[M]);useImperativeHandle(r,()=>({open:N,clear:K}),[N,K]);const Y=0===O.length?P.trigger:`${O.length} file${1===O.length?"":"s"} attached`,J=w??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=_.icons?.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const r=Math.round(100*(e.progress??0));return _jsxs(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:[_jsx(Text,{style:[F.tileOverlayText,{color:_.colors.onOverlay}],children:`${r}%`}),_jsx(View,{style:[F.tileProgressTrack,{backgroundColor:_.colors.border.primary}],children:_jsx(View,{style:[F.tileProgressFill,{width:`${r}%`,backgroundColor:_.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[F.doneBadge,{backgroundColor:_.colors.success}],children:_jsx(Text,{style:[F.doneBadgeText,{color:_.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const r=imageSourceOf(e);return r?_jsx(Image,{source:{uri:r},style:F.thumbnailImage}):_jsx(View,{style:[F.extensionTile,{backgroundColor:_.colors.background.secondary}],children:_jsx(Text,{style:[F.extensionText,{color:_.colors.text.secondary,...fontFor(_,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>q(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[F.removeButton,{backgroundColor:_.colors.background.overlay}],children:_jsx(Text,{style:[F.removeButtonText,{color:_.colors.onOverlay}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[F.retryText,{color:_.colors.primary}],children:"↻"})}):null,renderOneFile=(e,r)=>{const t={file:e,index:r,disabled:p,remove:()=>q(e),retry:C?()=>C(e):void 0},o=g?g(t):"card"===u?(e=>{const{file:r}=e;return _jsxs(View,{style:[F.tile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:"error"===r.status?_.colors.error:_.colors.border.primary}],children:[renderThumbnail(r),renderStatusOverlay(r),"error"===r.status?_jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:retryButton(r)}):null,removeButton(r)]})})(t):(e=>{const{file:r}=e,t=statusText(r);return _jsxs(View,{style:[F.listRow,{borderRadius:I,...smoothCorners,borderColor:"error"===r.status?_.colors.error:_.colors.border.primary,backgroundColor:_.colors.background.primary}],children:[_jsxs(View,{style:[F.listThumb,{borderRadius:_.radius.sm,...smoothCorners}],children:[renderThumbnail(r),"processing"===r.status?_jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:F.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[F.listName,{color:_.colors.text.primary,fontSize:_.typography.fontSize.sm,...fontFor(_,"medium")}],children:r.name}),_jsx(Text,{numberOfLines:1,style:[F.listSubtitle,{color:"error"===r.status?_.colors.error:_.colors.text.tertiary,fontSize:_.typography.fontSize.xs}],children:[formatFileSize(r.size),t].filter(Boolean).join(" · ")}),"uploading"===r.status?_jsx(View,{style:[F.listProgressTrack,{backgroundColor:_.colors.border.primary}],children:_jsx(View,{style:[F.listProgressFill,{width:`${Math.round(100*(r.progress??0))}%`,backgroundColor:_.colors.primary}]})}):null]}),retryButton(r),_jsx(Pressable,{onPress:()=>q(r),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(r.name),children:_jsx(Text,{style:[F.listRemoveText,{color:_.colors.text.tertiary}],children:"×"})})]})})(t);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:p||!j,accessibilityLabel:fileA11yLabel(e),children:o},e.id)},X={open:N,disabled:p||D,fileCount:O.length,atCapacity:D},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:p||D},style:({pressed:r})=>[F.trigger,e?F.triggerCompact:null,{borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:r?_.colors.surface.pressed:_.colors.background.primary,opacity:p||D?.55:1}],children:[_jsxs(View,{style:F.triggerRow,children:[Q?Q({size:16,color:_.colors.primary}):null,_jsx(Text,{style:[F.triggerText,{color:_.colors.primary,fontSize:_.typography.fontSize.sm,...fontFor(_,"medium")}],children:0===O.length?P.trigger:P.addMore})]}),!e&&m?_jsx(Text,{style:[F.helperText,{color:_.colors.text.tertiary,fontSize:_.typography.fontSize.xs}],children:m}):null]}),Z=_jsx(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[F.tile,F.addTile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:e?_.colors.surface.pressed:"transparent",opacity:p||D?.55:1}],children:_jsx(Text,{style:[F.addTileText,{color:_.colors.primary}],children:"+"})});return _jsxs(View,{style:[F.container,v],testID:k,accessibilityLabel:J,children:["card"===u?0===O.length?h?h(X):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[F.strip,{columnGap:_.spacing.sm}],children:[O.map(renderOneFile),h?h(X):D||p?null:Z]}):_jsxs(View,{style:{rowGap:_.spacing.sm},children:[h?h(X):D?null:dashedTrigger(O.length>0),O.map(renderOneFile)]}),W?_jsx(Text,{accessibilityLiveRegion:"polite",style:[F.errorText,{color:_.colors.error,fontSize:_.typography.fontSize.xs,marginTop:_.spacing.xxs}],children:W}):null,_jsx(OptionSheet,{open:A,onClose:()=>E(!1),title:P.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{E(!1),G(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,...smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,...smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;
+"use strict";import React,{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,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{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{hasFieldText}from"../FieldBase/index.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,r)=>`${e} is larger than ${r} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const r=["B","KB","MB","GB"];let t=e,o=0;for(;t>=1024&&o<r.length-1;)t/=1024,o+=1;return`${t>=10||0===o?Math.round(t):Math.round(10*t)/10} ${r[o]}`};export const matchesAccept=(e,r)=>!r||0===r.length||!!e&&r.some(r=>"*/*"===r||"*"===r||(r.endsWith("/*")?e.startsWith(r.slice(0,r.length-1)):e===r));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const r=e.lastIndexOf(".");return r<=0||r===e.length-1?"FILE":e.slice(r+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,r)=>{const{files:t,defaultFiles:o,onChange:i,sources:s,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:h,disabled:p=!1,helperText:m,error:y,labels:b,haptic:f,onPick:x,onRemove:S,onError:T,onFilePress:j,onRetry:C,style:v,accessibilityLabel:w,testID:F}=e,k=useTheme(),_=useMemo(()=>buildStyles(k),[k]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),z=k.components.filePicker,R=z?.thumbnailSize??84,I=z?.borderRadius??k.radius.md,V=z?.dashedBorderColor??k.colors.primary,[O,B]=useControllableState({value:t,defaultValue:o??[],onChange:i}),L=useRef(O);L.current=O;const M=useCallback(e=>{L.current=e,B(e)},[B]),[H,$]=useState(null),[A,E]=useState(!1),W=y??H??void 0,D="number"==typeof l&&O.length>=l,U=useCallback((e,r)=>{0!==e.length&&($(e[0]),e.forEach(e=>T?.(e,r)),!1!==f&&triggerHaptic("notificationError"))},[T,f]),G=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void U([e instanceof Error?e.message:String(e)])}if(!r||0===r.length)return;const t=[];let o=r.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-L.current.length);o.length>e&&(t.push(P.errorTooMany(l)),o=o.slice(0,e))}const i=[];for(const e of o){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){t.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){t.push(P.errorWrongType(e.name));continue}const r=c?.(e);r?t.push(r):i.push(e)}if(U(t),0===i.length)return;if(!d){M([...L.current,...i]),$(t.length>0?t[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void x?.(i)}const s=i.map(e=>({...e,status:"processing"}));M([...L.current,...s]);const u=[];for(const e of s)try{const r=await d({...e,status:"idle"}),t={...r,id:e.id,status:r.status??"idle"};M(L.current.map(r=>r.id===e.id?t:r)),u.push(t)}catch(r){M(L.current.filter(r=>r.id!==e.id)),U([r instanceof Error?r.message:String(r)],e)}if(u.length>0){0===t.length&&$(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),x?.(u)}},[l,n,a,c,d,P,U,M,x,f]),N=useCallback(e=>{if(p||D)return;const r=e?s.find(r=>r.key===e):1===s.length?s[0]:void 0;r?G(r):s.length>1&&E(!0)},[p,D,s,G]),q=useCallback(e=>{if(p)return;M(L.current.filter(r=>r.id!==e.id)),$(null);const r=resolveHaptic(f,"selection");r&&triggerHaptic(r),S?.(e)},[p,M,S,f]),K=useCallback(()=>{M([]),$(null)},[M]);useImperativeHandle(r,()=>({open:N,clear:K}),[N,K]);const Y=0===O.length?P.trigger:`${O.length} file${1===O.length?"":"s"} attached`,J=w??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=k.icons?.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[_.tileOverlay,{backgroundColor:k.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const r=Math.round(100*(e.progress??0));return _jsxs(View,{style:[_.tileOverlay,{backgroundColor:k.colors.background.overlay}],children:[_jsx(Text,{style:[_.tileOverlayText,{color:k.colors.onOverlay}],children:`${r}%`}),_jsx(View,{style:[_.tileProgressTrack,{backgroundColor:k.colors.border.primary}],children:_jsx(View,{style:[_.tileProgressFill,{width:`${r}%`,backgroundColor:k.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[_.doneBadge,{backgroundColor:k.colors.success}],children:_jsx(Text,{style:[_.doneBadgeText,{color:k.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const r=imageSourceOf(e);return r?_jsx(Image,{source:{uri:r},style:_.thumbnailImage}):_jsx(View,{style:[_.extensionTile,{backgroundColor:k.colors.background.secondary}],children:_jsx(Text,{style:[_.extensionText,{color:k.colors.text.secondary,...fontFor(k,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>q(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[_.removeButton,{backgroundColor:k.colors.background.overlay}],children:_jsx(Text,{style:[_.removeButtonText,{color:k.colors.onOverlay}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[_.retryText,{color:k.colors.primary}],children:"↻"})}):null,renderOneFile=(e,r)=>{const t={file:e,index:r,disabled:p,remove:()=>q(e),retry:C?()=>C(e):void 0},o=g?g(t):"card"===u?(e=>{const{file:r}=e;return _jsxs(View,{style:[_.tile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:"error"===r.status?k.colors.error:k.colors.border.primary}],children:[renderThumbnail(r),renderStatusOverlay(r),"error"===r.status?_jsx(View,{style:[_.tileOverlay,{backgroundColor:k.colors.background.overlay}],children:retryButton(r)}):null,removeButton(r)]})})(t):(e=>{const{file:r}=e,t=statusText(r);return _jsxs(View,{style:[_.listRow,{borderRadius:I,...smoothCorners,borderColor:"error"===r.status?k.colors.error:k.colors.border.primary,backgroundColor:k.colors.background.primary}],children:[_jsxs(View,{style:[_.listThumb,{borderRadius:k.radius.sm,...smoothCorners}],children:[renderThumbnail(r),"processing"===r.status?_jsx(View,{style:[_.tileOverlay,{backgroundColor:k.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:_.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[_.listName,{color:k.colors.text.primary,fontSize:k.typography.fontSize.sm,...fontFor(k,"medium")}],children:r.name}),_jsx(Text,{numberOfLines:1,style:[_.listSubtitle,{color:"error"===r.status?k.colors.error:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs}],children:[formatFileSize(r.size),t].filter(Boolean).join(" · ")}),"uploading"===r.status?_jsx(View,{style:[_.listProgressTrack,{backgroundColor:k.colors.border.primary}],children:_jsx(View,{style:[_.listProgressFill,{width:`${Math.round(100*(r.progress??0))}%`,backgroundColor:k.colors.primary}]})}):null]}),retryButton(r),_jsx(Pressable,{onPress:()=>q(r),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(r.name),children:_jsx(Text,{style:[_.listRemoveText,{color:k.colors.text.tertiary}],children:"×"})})]})})(t);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:p||!j,accessibilityLabel:fileA11yLabel(e),children:o},e.id)},X={open:N,disabled:p||D,fileCount:O.length,atCapacity:D},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:p||D},style:({pressed:r})=>[_.trigger,e?_.triggerCompact:null,{borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:r?k.colors.surface.pressed:k.colors.background.primary,opacity:p||D?.55:1}],children:[_jsxs(View,{style:_.triggerRow,children:[Q?Q({size:16,color:k.colors.primary}):null,_jsx(Text,{style:[_.triggerText,{color:k.colors.primary,fontSize:k.typography.fontSize.sm,...fontFor(k,"medium")}],children:0===O.length?P.trigger:P.addMore})]}),!e&&m?_jsx(Text,{style:[_.helperText,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs}],children:m}):null]}),Z=_jsx(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[_.tile,_.addTile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:e?k.colors.surface.pressed:"transparent",opacity:p||D?.55:1}],children:_jsx(Text,{style:[_.addTileText,{color:k.colors.primary}],children:"+"})});return _jsxs(View,{style:[_.container,v],testID:F,accessibilityLabel:J,children:["card"===u?0===O.length?h?h(X):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[_.strip,{columnGap:k.spacing.sm}],children:[O.map(renderOneFile),h?h(X):D||p?null:Z]}):_jsxs(View,{style:{rowGap:k.spacing.sm},children:[h?h(X):D?null:dashedTrigger(O.length>0),O.map(renderOneFile)]}),hasFieldText(W)?_jsx(Text,{accessibilityLiveRegion:"polite",style:[_.errorText,{color:k.colors.error,fontSize:k.typography.fontSize.xs,marginTop:k.spacing.xxs}],children:W}):null,_jsx(OptionSheet,{open:A,onClose:()=>E(!1),title:P.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{E(!1),G(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,...smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,...smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;

package/lib/module/components/Notation/Notation.js

@@ -1 +1 @@
-"use strict";import React,{Fragment}from"react";import{Text as RNText}from"react-native";import{useTheme}from"../../theme/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g;export const parseNotation=t=>{const e=String(t??""),s=[];let o=0;for(const t of e.matchAll(SUBSCRIPTED)){const n=t.index??0;n>o&&s.push({text:e.slice(o,n)}),s.push({text:t[1],sub:t[2]}),o=n+t[0].length}return o<e.length&&s.push({text:e.slice(o)}),s};export const Notation=({text:t,base:e,sub:s,desc:o,testID:n})=>{const r=useTheme(),x={fontSize:Math.round(.75*r.typography.fontSize.sm),lineHeight:Math.round(.9*r.typography.fontSize.sm)};return null!=e?_jsxs(Text,{testID:n,children:[e,s?_jsx(RNText,{style:x,children:s}):null,o?` ${o}`:null]}):_jsx(RNText,{testID:n,children:parseNotation(t).map((t,e)=>t.sub?_jsxs(Fragment,{children:[t.text,_jsx(RNText,{style:x,children:t.sub})]},e):_jsx(Fragment,{children:t.text},e))})};export const sym=(t,e,s)=>_jsx(Notation,{base:t,sub:e,desc:s});export default Notation;
+"use strict";import React,{Fragment}from"react";import{Text as RNText,StyleSheet,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g;export const parseNotation=t=>{const e=String(t??""),r=[];let s=0;for(const t of e.matchAll(SUBSCRIPTED)){const o=t.index??0;o>s&&r.push({text:e.slice(s,o)}),r.push({text:t[1],sub:t[2]}),s=o+t[0].length}return s<e.length&&r.push({text:e.slice(s)}),r};const SUB_DROP=.4,Subscript=({children:t,color:e})=>{const r=useTheme(),s=Math.round(.75*r.typography.fontSize.sm);return _jsx(View,{style:{transform:[{translateY:Math.round(.4*s)}]},children:_jsx(RNText,{maxFontSizeMultiplier:r.maxFontSizeMultiplier,style:[styles.sub,{fontSize:s,lineHeight:s,color:e??r.colors.text.primary,...fontFor(r,"normal")}],children:t})})},renderNotation=(t,e)=>parseNotation(t).map((t,r)=>t.sub?_jsxs(Fragment,{children:[t.text,_jsx(Subscript,{color:e,children:t.sub})]},r):_jsx(Fragment,{children:t.text},r));export const Notation=({text:t,base:e,sub:r,desc:s,color:o,testID:n})=>null!=e?_jsxs(Text,{testID:n,children:[e,r?_jsx(Subscript,{color:o,children:r}):null,s?` ${s}`:null]}):_jsx(RNText,{testID:n,children:"string"==typeof t||null==t?renderNotation(t??"",o):t.map((t,e)=>_jsx(Fragment,"string"==typeof t?{children:renderNotation(t,o)}:{children:t.verbatim},e))});export const sym=(t,e,r,s)=>_jsx(Notation,{base:t,sub:e,desc:r,color:s});const styles=StyleSheet.create({sub:{includeFontPadding:!1}});export default Notation;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",