@webority/mobile-ui 0.8.2 → 0.9.0

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

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

package/lib/module/components/LoaderOverlay/LoaderOverlay.js

@@ -1 +1 @@
-"use strict";import React,{useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,BackHandler,Easing,StyleSheet}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const DEFAULT_SHOW_DELAY_MS=150,DEFAULT_MIN_VISIBLE_MS=400;let state={refCount:0,message:void 0};const listeners=new Set,notify=()=>{for(const e of listeners)e()},subscribe=e=>(listeners.add(e),()=>{listeners.delete(e)}),getState=()=>state,show=e=>{state={refCount:state.refCount+1,message:e??state.message},notify()},hide=()=>{if(state.refCount<=0)return;const e=state.refCount-1;state={refCount:e,message:0===e?void 0:state.message},notify()},reset=()=>{0===state.refCount&&void 0===state.message||(state={refCount:0,message:void 0},notify())},isVisible=()=>state.refCount>0,wrap=async(e,t)=>{show(t);try{return await("function"==typeof e?e():e)}finally{hide()}};export const loader={show:show,hide:hide,wrap:wrap,isVisible:isVisible,reset:reset};export const useLoader=()=>loader;export const LoaderOverlay=({renderIndicator:e,backdropColor:t,showDelayMs:s=150,minVisibleMs:r=400,testID:n})=>{const i=useTheme(),o=useReducedMotion(),[u,a]=useState(getState),[c,l]=useState(!1),f=useRef(!1),d=useRef(null),m=useRef(null),y=useRef(null),b=useRef(createAnimatedValue(0)).current;useEffect(()=>subscribe(()=>a(getState())),[]),useEffect(()=>{f.current=c},[c]);const g=u.refCount>0;useEffect(()=>{if(g)return null!==m.current&&(clearTimeout(m.current),m.current=null),void(f.current||null!==d.current||(d.current=setTimeout(()=>{d.current=null,y.current=Date.now(),l(!0)},s)));if(null!==d.current)return clearTimeout(d.current),void(d.current=null);if(f.current&&null===m.current){const e=null!==y.current?Date.now()-y.current:r,t=Math.max(0,r-e);m.current=setTimeout(()=>{m.current=null,y.current=null,l(!1)},t)}},[g,s,r]),useEffect(()=>()=>{null!==d.current&&clearTimeout(d.current),null!==m.current&&clearTimeout(m.current)},[]),useEffect(()=>{c?o?b.setValue(1):Animated.timing(b,{toValue:1,duration:i.motion.duration.normal,easing:Easing.bezier(...i.motion.easing.standard),useNativeDriver:!0}).start():b.setValue(0)},[c,o,b,i]),useEffect(()=>{if(!c)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>!0);return()=>{e.remove()}},[c]);const S=u.message;useEffect(()=>{c&&S&&AccessibilityInfo.announceForAccessibility(S)},[c,S]);const p=useMemo(()=>buildStyles(),[]);return c?_jsx(Animated.View,{pointerEvents:"auto",testID:n,accessible:!0,accessibilityViewIsModal:!0,accessibilityLiveRegion:"polite",accessibilityLabel:S??"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},style:[p.overlay,{backgroundColor:t??i.colors.background.overlay,opacity:b}],children:e?e(S):_jsx(Spinner,{size:"lg",message:S})}):null};const buildStyles=()=>StyleSheet.create({overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3}});
+"use strict";import{useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,BackHandler,Easing,StyleSheet}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const DEFAULT_SHOW_DELAY_MS=150,DEFAULT_MIN_VISIBLE_MS=400;let state={refCount:0,message:void 0};const listeners=new Set,notify=()=>{for(const e of listeners)e()},subscribe=e=>(listeners.add(e),()=>{listeners.delete(e)}),getState=()=>state,show=e=>{state={refCount:state.refCount+1,message:e??state.message},notify()},hide=()=>{if(state.refCount<=0)return;const e=state.refCount-1;state={refCount:e,message:0===e?void 0:state.message},notify()},reset=()=>{0===state.refCount&&void 0===state.message||(state={refCount:0,message:void 0},notify())},isVisible=()=>state.refCount>0,wrap=async(e,t)=>{show(t);try{return await("function"==typeof e?e():e)}finally{hide()}};export const loader={show:show,hide:hide,wrap:wrap,isVisible:isVisible,reset:reset};export const useLoader=()=>loader;export const LoaderOverlay=({renderIndicator:e,backdropColor:t,showDelayMs:s=150,minVisibleMs:r=400,testID:n})=>{const i=useTheme(),o=useReducedMotion(),[u,a]=useState(getState),[c,l]=useState(!1),f=useRef(!1),d=useRef(null),m=useRef(null),y=useRef(null),b=useRef(createAnimatedValue(0)).current;useEffect(()=>subscribe(()=>a(getState())),[]),useEffect(()=>{f.current=c},[c]);const g=u.refCount>0;useEffect(()=>{if(g)return null!==m.current&&(clearTimeout(m.current),m.current=null),void(f.current||null!==d.current||(d.current=setTimeout(()=>{d.current=null,y.current=Date.now(),l(!0)},s)));if(null!==d.current)return clearTimeout(d.current),void(d.current=null);if(f.current&&null===m.current){const e=null!==y.current?Date.now()-y.current:r,t=Math.max(0,r-e);m.current=setTimeout(()=>{m.current=null,y.current=null,l(!1)},t)}},[g,s,r]),useEffect(()=>()=>{null!==d.current&&clearTimeout(d.current),null!==m.current&&clearTimeout(m.current)},[]),useEffect(()=>{c?o?b.setValue(1):Animated.timing(b,{toValue:1,duration:i.motion.duration.normal,easing:Easing.bezier(...i.motion.easing.standard),useNativeDriver:!0}).start():b.setValue(0)},[c,o,b,i]),useEffect(()=>{if(!c)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>!0);return()=>{e.remove()}},[c]);const S=u.message;useEffect(()=>{c&&S&&AccessibilityInfo.announceForAccessibility(S)},[c,S]);const p=useMemo(()=>buildStyles(),[]);return c?_jsx(Animated.View,{pointerEvents:"auto",testID:n,accessible:!0,accessibilityViewIsModal:!0,accessibilityLiveRegion:"polite",accessibilityLabel:S??"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,style:[p.overlay,{backgroundColor:t??i.colors.background.overlay,opacity:b}],children:e?e(S):_jsx(Spinner,{size:"lg",message:S})}):null};const buildStyles=()=>StyleSheet.create({overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3}});

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,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;
+"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},"aria-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,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;
+"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.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:b,variant:g,avatarTone:f,avatarBackgroundColor:h,avatarColor:y,label:x,required:k=!1,helperText:C,error:v,layout:S="stacked",title:_,subtitle:j,ImageComponent:T,labels:I,haptic:F,onError:A,accessibilityLabel:P,style:w,testID:E}=e,L=useTheme(),M=L.components.profilePicker,R=b??M?.defaultTone??"primary",O=g??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O,M),[L,R,O,M]),z=f??M?.defaultAvatarTone,D=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{background:h??e?.background??L.colors.background.tertiary,icon:y??e?.color??L.colors.text.tertiary}},[L,z,h,y]),B=useMemo(()=>({...DEFAULT_LABELS,...I}),[I]),[H,U]=useState(null),[W,$]=useState(null),[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]),be=E??"profile-picker",ge=P??(K?B.pick:t),fe=_jsx(View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,...smoothCorners,backgroundColor:D.background}],children:_jsx(AppIcon,{name:"user",size:Math.round(.45*ee),color:D.icon})}),he=_jsx(View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:_jsxs(Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:ge,accessibilityHint:fieldTextAsString(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},"aria-disabled":K?X:void 0,"aria-busy":l,testID:`${be}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||t?_jsx(Avatar,{source:Q?{uri:Q}:void 0,name:t,size:ee,shape:m,tone:z,backgroundColor:h,color:y,ImageComponent:T,accessibilityLabel:ge},Q??"initials"):fe,l?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:re,...smoothCorners,backgroundColor:L.colors.background.overlay}],testID:`${be}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors.onPrimary})}):null,!a&&K?_jsx(View,{pointerEvents:"none",testID:`${be}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:te/2,...smoothCorners,right:se,bottom:se,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==S?_jsxs(View,{style:[styles.meta,"profile"===S?styles.metaCentred:null],children:[_?_jsx(Text,{style:[styles.title,"profile"===S?styles.textCentred:null,{color:L.colors.text.primary,fontSize:L.typography.fontSize.base,...fontFor(L,"semibold")}],children:_}):null,j?_jsx(Text,{style:[styles.subtitle,"profile"===S?styles.textCentred:null,{color:L.colors.text.secondary,fontSize:L.typography.fontSize.sm,...fontFor(L,"normal")}],children:j}):null,_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)})]}):_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)});return _jsxs(View,{ref:r,style:w,testID:E,children:[x?_jsx(FieldLabel,{required:k,children:x}):null,_jsxs(View,{style:"inline"===S?[styles.row,{columnGap:L.spacing.md}]:["profile"===S?styles.columnCentred:styles.column,{rowGap:L.spacing.xs}],children:[he,ye]}),_jsx(OptionSheet,{open: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.toneText.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;

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{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;
+"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:i,disabled:s=!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||s,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):i?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:p??a,accessibilityHint:C.accessibilityHint??l,accessibilityState:{checked:g,disabled:j},"aria-checked":g,"aria-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/Radio/RadioDot.js

@@ -1 +1 @@
-"use strict";import React,{useEffect,useMemo,useRef}from"react";import{Animated,StyleSheet,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx}from"react/jsx-runtime";const sizeMap={sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12}};export const RadioDot=e=>{const{selected:t,color:o,disabled:r=!1,size:s="md",style:i,dotStyle:n}=e,a=useTheme(),m=useMemo(()=>buildStyles(),[]),d=o??a.colors.primary;let u,p;if("number"==typeof s)u=s,p=Math.round(s/2);else{const e=a.components.radio?.[s];u=e?.outer??sizeMap[s].outer,p=e?.inner??sizeMap[s].inner}const c=useRef(createAnimatedValue(t?1:0)).current;useEffect(()=>{const e=Animated.spring(c,{toValue:t?1:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[t,c,a.motion.spring.snappy]);const l=c.interpolate({inputRange:[0,1],outputRange:[0,1]}),f=r?a.colors.border.primary:t?d:a.colors.border.primary;return _jsx(View,{style:[m.outer,{width:u,height:u,borderWidth:a.colors.border.width,borderRadius:u/2,...smoothCorners,borderColor:f},i],children:_jsx(Animated.View,{style:[{width:p,height:p,borderRadius:p/2,...smoothCorners,backgroundColor:r?a.colors.text.disabled:d,opacity:c,transform:[{scale:l}]},n]})})};RadioDot.displayName="RadioDot";const buildStyles=()=>StyleSheet.create({outer:{alignItems:"center",justifyContent:"center"}});export default RadioDot;
+"use strict";import{useEffect,useMemo,useRef}from"react";import{Animated,StyleSheet,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx}from"react/jsx-runtime";const sizeMap={sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12}};export const RadioDot=e=>{const{selected:t,color:o,disabled:r=!1,size:s="md",style:i,dotStyle:n}=e,a=useTheme(),m=useMemo(()=>buildStyles(),[]),d=o??a.colors.primary;let u,p;if("number"==typeof s)u=s,p=Math.round(s/2);else{const e=a.components.radio?.[s];u=e?.outer??sizeMap[s].outer,p=e?.inner??sizeMap[s].inner}const l=useRef(createAnimatedValue(t?1:0)).current;useEffect(()=>{const e=Animated.spring(l,{toValue:t?1:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[t,l,a.motion.spring.snappy]);const c=l.interpolate({inputRange:[0,1],outputRange:[0,1]}),f=r?a.colors.border.primary:t?d:a.colors.border.primary;return _jsx(View,{style:[m.outer,{width:u,height:u,borderWidth:a.colors.border.width,borderRadius:u/2,...smoothCorners,borderColor:f},i],children:_jsx(Animated.View,{style:[{width:p,height:p,borderRadius:p/2,...smoothCorners,backgroundColor:r?a.colors.text.disabled:d,opacity:l,transform:[{scale:c}]},n]})})};RadioDot.displayName="RadioDot";const buildStyles=()=>StyleSheet.create({outer:{alignItems:"center",justifyContent:"center"}});export default RadioDot;

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

@@ -1 +1 @@
-"use strict";import React,{useMemo}from"react";import{View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{RadioGroupContext}from"./Radio.js";import{jsx as _jsx}from"react/jsx-runtime";const RadioGroup=({value:e,defaultValue:o,onChange:t,children:a,disabled:i=!1,accessibilityLabel:r,style:s,testID:l})=>{const[d,u]=useControllableState({value:e,defaultValue:o??void 0,onChange:t}),c=useMemo(()=>({selectedValue:d,onChange:u,disabled:i}),[d,u,i]);return _jsx(RadioGroupContext.Provider,{value:c,children:_jsx(View,{accessibilityRole:"radiogroup",accessibilityLabel:r,accessibilityState:{disabled:i},testID:l,style:s,children:a})})};RadioGroup.displayName="RadioGroup";export{RadioGroup};export default RadioGroup;
+"use strict";import{useMemo}from"react";import{View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{RadioGroupContext}from"./Radio.js";import{jsx as _jsx}from"react/jsx-runtime";const RadioGroup=({value:e,defaultValue:o,onChange:a,children:i,disabled:t=!1,accessibilityLabel:r,style:s,testID:l})=>{const[d,u]=useControllableState({value:e,defaultValue:o??void 0,onChange:a}),n=useMemo(()=>({selectedValue:d,onChange:u,disabled:t}),[d,u,t]);return _jsx(RadioGroupContext.Provider,{value:n,children:_jsx(View,{accessibilityRole:"radiogroup",accessibilityLabel:r,accessibilityState:{disabled:t},"aria-disabled":t,testID:l,style:s,children:i})})};RadioGroup.displayName="RadioGroup";export{RadioGroup};export default RadioGroup;

package/lib/module/components/Rating/Rating.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizePxMap={sm:16,md:24,lg:32},resolveSize=e=>"number"==typeof e?e:sizePxMap[e],toneColorFor=(e,t)=>"primary"===t?e.colors.primary:e.colors.warning,clampToStep=(e,t,i)=>{const s=Math.max(0,Math.min(t,e)),n=Math.round(s/i)*i;return Number(n.toFixed(2))},Star=({index:e,filled:t,size:i,filledColor:s,emptyColor:n,scale:a})=>{const o=Math.max(0,Math.min(1,t-e));return _jsxs(Animated.View,{style:[starStyles.starWrap,{width:i,height:i,transform:[{scale:a}]}],children:[_jsx(Text,{style:[starStyles.glyph,{color:n,fontSize:i,lineHeight:i}],accessible:!1,children:"☆"}),o>0?_jsx(View,{pointerEvents:"none",style:[starStyles.fillClip,{width:i*o,height:i}],children:_jsx(Text,{style:[starStyles.glyph,{color:s,fontSize:i,lineHeight:i}],accessible:!1,children:"★"})}):null]})},Rating=forwardRef((e,t)=>{const{value:i,onChange:s,max:n=5,allowHalf:a=!0,readonly:o=!1,size:l="md",tone:r="warning",label:c,loading:m=!1,haptic:d,accessibilityLabel:u,style:y,containerStyle:p,starContainerStyle:g,testID:f}=e,h=useTheme(),x=useMemo(()=>buildStyles(h),[h]),S=!o&&"function"==typeof s,b=a?.5:1,v=resolveSize(l),w=toneColorFor(h,r),j=h.colors.border.primary,R=useRef(v),k=useCallback(e=>{R.current=e.nativeEvent.layout.width},[]),C=useRef(new Map),_=useMemo(()=>{const e=C.current,t=[];for(let i=0;i<n;i+=1){let s=e.get(i);s||(s=new Animated.Value(1),e.set(i,s)),t.push(s)}for(const t of Array.from(e.keys()))t>=n&&e.delete(t);return t},[n]),z=h.components.rating?.pulseOnPress??!1,M=h.components.rating?.pulseScale??1.2,A=useCallback(e=>{const t=_[e];t&&Animated.sequence([Animated.timing(t,{toValue:M,duration:h.motion.duration.fast,easing:Easing.bezier(...h.motion.easing.standard),useNativeDriver:!0}),Animated.spring(t,{toValue:1,damping:h.motion.spring.bouncy.damping,stiffness:h.motion.spring.bouncy.stiffness,mass:h.motion.spring.bouncy.mass,useNativeDriver:!0})]).start()},[h.motion,M,_]),V=useCallback((e,t)=>{if(!S||!s)return;const i=clampToStep(e,n,b),a=resolveHaptic(d,"selection");a&&triggerHaptic(a),z&&"number"==typeof t&&A(t),s(i)},[S,s,n,b,A,d,z]),P=useCallback(e=>t=>{if(!S)return;const i=R.current||v,s=t.nativeEvent.locationX??i;let n;n=a&&s<i/2?e+.5:e+1,V(n,e)},[S,v,a,V]),T=useCallback(e=>{S&&("increment"===e.nativeEvent.actionName?V(i+b):"decrement"===e.nativeEvent.actionName&&V(i-b))},[S,i,b,V]),D=`${i} of ${n} stars`,E=u??c??D,H=[];for(let e=0;e<n;e+=1){const t=_[e];if(!t)continue;const s=_jsx(Star,{index:e,filled:i,size:v,filledColor:w,emptyColor:j,scale:t},e);H.push(S?_jsx(Pressable,{onPress:P(e),onLayout:0===e?k:void 0,hitSlop:4,accessible:!1,style:x.starPress,children:s},e):_jsx(View,{onLayout:0===e?k:void 0,style:x.starPress,children:s},e))}const N=_jsxs(View,{style:[x.wrapper,y,p],ref:t,testID:f,children:[c?_jsx(Text,{style:[x.label,{color:h.colors.text.secondary,fontSize:h.typography.fontSize.sm}],children:c}):null,_jsx(View,{style:[x.row,g],accessible:!0,accessibilityRole:S?"adjustable":"text",accessibilityLabel:E,accessibilityValue:S?{min:0,max:n,now:i,text:D}:void 0,accessibilityActions:S?[{name:"increment"},{name:"decrement"}]:void 0,onAccessibilityAction:S?T:void 0,children:H})]});return m?_jsx(RatingSkeleton,{...e}):N});Rating.displayName="Rating";const RatingSkeleton=({max:e=5,size:t="md",label:i,containerStyle:s,starContainerStyle:n,style:a})=>{const o=resolveSize(t),l=Math.max(1,e);return _jsxs(View,{style:[{alignItems:"flex-start"},s,a],accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[void 0!==i?_jsx(Skeleton,{shape:"text",width:80,height:14,style:{marginBottom:6}}):null,_jsx(View,{style:[{flexDirection:"row"},n],children:Array.from({length:l}).map((e,t)=>_jsx(Skeleton,{width:o,height:o,radius:Math.round(.25*o),style:t<l-1?{marginRight:4}:void 0},`sk-star-${t}`))})]})};RatingSkeleton.displayName="RatingSkeleton",Rating.Skeleton=RatingSkeleton;const starStyles=StyleSheet.create({starWrap:{position:"relative",alignItems:"flex-start",justifyContent:"center"},glyph:{textAlign:"left",includeFontPadding:!1},fillClip:{position:"absolute",top:0,left:0,overflow:"hidden"}}),buildStyles=e=>StyleSheet.create({wrapper:{flexDirection:"column"},row:{flexDirection:"row",alignItems:"center"},starPress:{marginRight:4},label:{marginBottom:6}});export{Rating};export default Rating;
+"use strict";import{forwardRef,useCallback,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizePxMap={sm:16,md:24,lg:32},resolveSize=e=>"number"==typeof e?e:sizePxMap[e],toneColorFor=(e,t)=>"primary"===t?e.colors.primary:e.colors.warning,clampToStep=(e,t,i)=>{const s=Math.max(0,Math.min(t,e)),n=Math.round(s/i)*i;return Number(n.toFixed(2))},Star=({index:e,filled:t,size:i,filledColor:s,emptyColor:n,scale:a})=>{const o=Math.max(0,Math.min(1,t-e));return _jsxs(Animated.View,{style:[starStyles.starWrap,{width:i,height:i,transform:[{scale:a}]}],children:[_jsx(Text,{style:[starStyles.glyph,{color:n,fontSize:i,lineHeight:i}],accessible:!1,children:"☆"}),o>0?_jsx(View,{pointerEvents:"none",style:[starStyles.fillClip,{width:i*o,height:i}],children:_jsx(Text,{style:[starStyles.glyph,{color:s,fontSize:i,lineHeight:i}],accessible:!1,children:"★"})}):null]})},Rating=forwardRef((e,t)=>{const{value:i,onChange:s,max:n=5,allowHalf:a=!0,readonly:o=!1,size:r="md",tone:l="warning",label:c,loading:m=!1,haptic:d,accessibilityLabel:u,style:y,containerStyle:p,starContainerStyle:g,testID:f}=e,h=useTheme(),x=useMemo(()=>buildStyles(h),[h]),b=!o&&"function"==typeof s,S=a?.5:1,v=resolveSize(r),w=toneColorFor(h,l),j=h.colors.border.primary,R=useRef(v),k=useCallback(e=>{R.current=e.nativeEvent.layout.width},[]),C=useRef(new Map),_=useMemo(()=>{const e=C.current,t=[];for(let i=0;i<n;i+=1){let s=e.get(i);s||(s=new Animated.Value(1),e.set(i,s)),t.push(s)}for(const t of Array.from(e.keys()))t>=n&&e.delete(t);return t},[n]),z=h.components.rating?.pulseOnPress??!1,M=h.components.rating?.pulseScale??1.2,A=useCallback(e=>{const t=_[e];t&&Animated.sequence([Animated.timing(t,{toValue:M,duration:h.motion.duration.fast,easing:Easing.bezier(...h.motion.easing.standard),useNativeDriver:!0}),Animated.spring(t,{toValue:1,damping:h.motion.spring.bouncy.damping,stiffness:h.motion.spring.bouncy.stiffness,mass:h.motion.spring.bouncy.mass,useNativeDriver:!0})]).start()},[h.motion,M,_]),V=useCallback((e,t)=>{if(!b||!s)return;const i=clampToStep(e,n,S),a=resolveHaptic(d,"selection");a&&triggerHaptic(a),z&&"number"==typeof t&&A(t),s(i)},[b,s,n,S,A,d,z]),P=useCallback(e=>t=>{if(!b)return;const i=R.current||v,s=t.nativeEvent.locationX??i;let n;n=a&&s<i/2?e+.5:e+1,V(n,e)},[b,v,a,V]),T=useCallback(e=>{b&&("increment"===e.nativeEvent.actionName?V(i+S):"decrement"===e.nativeEvent.actionName&&V(i-S))},[b,i,S,V]),D=`${i} of ${n} stars`,E=u??c??D,H=[];for(let e=0;e<n;e+=1){const t=_[e];if(!t)continue;const s=_jsx(Star,{index:e,filled:i,size:v,filledColor:w,emptyColor:j,scale:t},e);H.push(b?_jsx(Pressable,{onPress:P(e),onLayout:0===e?k:void 0,hitSlop:4,accessible:!1,style:x.starPress,children:s},e):_jsx(View,{onLayout:0===e?k:void 0,style:x.starPress,children:s},e))}const N=_jsxs(View,{style:[x.wrapper,y,p],ref:t,testID:f,children:[c?_jsx(Text,{style:[x.label,{color:h.colors.text.secondary,fontSize:h.typography.fontSize.sm}],children:c}):null,_jsx(View,{style:[x.row,g],accessible:!0,accessibilityRole:b?"adjustable":"text",accessibilityLabel:E,accessibilityValue:b?{min:0,max:n,now:i,text:D}:void 0,accessibilityActions:b?[{name:"increment"},{name:"decrement"}]:void 0,onAccessibilityAction:b?T:void 0,children:H})]});return m?_jsx(RatingSkeleton,{...e}):N});Rating.displayName="Rating";const RatingSkeleton=({max:e=5,size:t="md",label:i,containerStyle:s,starContainerStyle:n,style:a})=>{const o=resolveSize(t),r=Math.max(1,e);return _jsxs(View,{style:[{alignItems:"flex-start"},s,a],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==i?_jsx(Skeleton,{shape:"text",width:80,height:14,style:{marginBottom:6}}):null,_jsx(View,{style:[{flexDirection:"row"},n],children:Array.from({length:r}).map((e,t)=>_jsx(Skeleton,{width:o,height:o,radius:Math.round(.25*o),style:t<r-1?{marginRight:4}:void 0},`sk-star-${t}`))})]})};RatingSkeleton.displayName="RatingSkeleton",Rating.Skeleton=RatingSkeleton;const starStyles=StyleSheet.create({starWrap:{position:"relative",alignItems:"flex-start",justifyContent:"center"},glyph:{textAlign:"left",includeFontPadding:!1},fillClip:{position:"absolute",top:0,left:0,overflow:"hidden"}}),buildStyles=e=>StyleSheet.create({wrapper:{flexDirection:"column"},row:{flexDirection:"row",alignItems:"center"},starPress:{marginRight:4},label:{marginBottom:6}});export{Rating};export default Rating;

package/lib/module/components/Repeater/Repeater.js

@@ -1 +1 @@
-"use strict";import React,{useCallback,useMemo,useRef}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{IconButton}from"../IconButton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let rowIdCounter=0;const nextRowId=()=>(rowIdCounter+=1,`row-${rowIdCounter}`);export const Repeater=({value:e,onChange:t,createRow:r,renderRow:o,addLabel:n="Add another",rowLabel:s,renderRowHeader:i,onRemove:l,minRows:a=0,maxRows:c,removable:m=!0,emptyText:u,disabled:p=!1,haptic:d,style:x,testID:h})=>{const g=useTheme(),f=useMemo(()=>buildStyles(g),[g]),w=useRef([]);if(w.current.length<e.length)for(;w.current.length<e.length;)w.current.push(nextRowId());else w.current.length>e.length&&(w.current.length=e.length);const y="number"==typeof c&&e.length>=c,j=m&&e.length>a,b=useCallback(e=>{const t=resolveHaptic(d,e);t&&triggerHaptic(t)},[d]),I=useCallback(()=>{p||y||(t([...e,r()]),b("impactLight"))},[y,r,p,b,t,e]),R=useCallback((r,o)=>{t(e.map((e,t)=>t===r?o:e))},[t,e]),v=useCallback(r=>{!p&&j&&(w.current=w.current.filter((e,t)=>t!==r),l?.(r,e[r]),t(e.filter((e,t)=>t!==r)),b("notificationWarning"))},[j,p,b,t,l,e]);return _jsxs(View,{style:[{gap:g.spacing.md},x],testID:h,children:[0===e.length&&u?_jsx(Text,{style:[f.empty,{color:g.colors.text.tertiary,fontSize:g.typography.fontSize.sm}],children:u}):null,e.map((e,t)=>{const r={item:e,index:t,update:e=>R(t,e),remove:()=>v(t),canRemove:j};return _jsxs(View,{style:{gap:g.spacing.xs},children:[i?i(r):s||j&&!p?_jsxs(View,{style:f.rowHeader,children:[s?_jsx(Text,{style:[f.rowLabel,{color:g.colors.text.tertiary,fontSize:g.typography.fontSize.xs}],children:s(t)}):_jsx(View,{}),j&&!p?_jsx(IconButton,{icon:({color:e,size:t})=>_jsx(AppIcon,{name:"x",size:t,color:e}),onPress:()=>v(t),accessibilityLabel:`Remove ${s?s(t):`row ${t+1}`}`,size:"sm",tone:"error",variant:"ghost",haptic:d,testID:h?`${h}-remove-${t}`:void 0}):null]}):null,o(r)]},w.current[t])}),y||p?null:_jsx(Button,{title:n,onPress:I,variant:"outline",size:"sm",haptic:d,testID:h?`${h}-add`:void 0})]})};const buildStyles=e=>StyleSheet.create({rowHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",minHeight:24},rowLabel:{...fontFor(e,"semibold"),fontWeight:"600",letterSpacing:.5,textTransform:"uppercase"},empty:{...fontFor(e,"normal")}});export default Repeater;
+"use strict";import{useCallback,useMemo,useRef}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{IconButton}from"../IconButton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let rowIdCounter=0;const nextRowId=()=>(rowIdCounter+=1,`row-${rowIdCounter}`);export const Repeater=({value:e,onChange:t,createRow:r,renderRow:o,addLabel:n="Add another",rowLabel:s,renderRowHeader:i,onRemove:l,minRows:a=0,maxRows:c,removable:m=!0,emptyText:u,disabled:p=!1,haptic:d,style:x,testID:h})=>{const g=useTheme(),f=useMemo(()=>buildStyles(g),[g]),w=useRef([]);if(w.current.length<e.length)for(;w.current.length<e.length;)w.current.push(nextRowId());else w.current.length>e.length&&(w.current.length=e.length);const y="number"==typeof c&&e.length>=c,j=m&&e.length>a,b=useCallback(e=>{const t=resolveHaptic(d,e);t&&triggerHaptic(t)},[d]),I=useCallback(()=>{p||y||(t([...e,r()]),b("impactLight"))},[y,r,p,b,t,e]),v=useCallback((r,o)=>{t(e.map((e,t)=>t===r?o:e))},[t,e]),R=useCallback(r=>{!p&&j&&(w.current=w.current.filter((e,t)=>t!==r),l?.(r,e[r]),t(e.filter((e,t)=>t!==r)),b("notificationWarning"))},[j,p,b,t,l,e]);return _jsxs(View,{style:[{gap:g.spacing.md},x],testID:h,children:[0===e.length&&u?_jsx(Text,{style:[f.empty,{color:g.colors.text.tertiary,fontSize:g.typography.fontSize.sm}],children:u}):null,e.map((e,t)=>{const r={item:e,index:t,update:e=>v(t,e),remove:()=>R(t),canRemove:j};return _jsxs(View,{style:{gap:g.spacing.xs},children:[i?i(r):s||j&&!p?_jsxs(View,{style:f.rowHeader,children:[s?_jsx(Text,{style:[f.rowLabel,{color:g.colors.text.tertiary,fontSize:g.typography.fontSize.xs}],children:s(t)}):_jsx(View,{}),j&&!p?_jsx(IconButton,{icon:({color:e,size:t})=>_jsx(AppIcon,{name:"x",size:t,color:e}),onPress:()=>R(t),accessibilityLabel:`Remove ${s?s(t):`row ${t+1}`}`,size:"sm",tone:"error",variant:"ghost",haptic:d,testID:h?`${h}-remove-${t}`:void 0}):null]}):null,o(r)]},w.current[t])}),y||p?null:_jsx(Button,{title:n,onPress:I,variant:"outline",size:"sm",haptic:d,testID:h?`${h}-add`:void 0})]})};const buildStyles=e=>StyleSheet.create({rowHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",minHeight:24},rowLabel:{...fontFor(e,"semibold"),fontWeight:"600",letterSpacing:.5,textTransform:"uppercase"},empty:{...fontFor(e,"normal")}});export default Repeater;

package/lib/module/components/RichTextEditor/RichTextEditor.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{applyMarkdownAction,normalizeSelection}from"./markdownActions.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:i,placeholder:l,actions:r=DEFAULT_ACTIONS,disabled:s=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:c=!1,accessibilityLabel:d,haptic:h,style:u,toolbarStyle:p,inputStyle:b,testID:g}=e,m=useTheme(),y=useMemo(()=>buildStyles(m),[m]),x=o??"",[S,T]=useState({start:0,end:0}),[f,k]=useState(!1),[j,C]=useState(null),I=useCallback(e=>{T(e.nativeEvent.selection),C(null)},[]),_=useCallback(e=>{C(null),i?.(e)},[i]),H=useCallback(e=>{if(s)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:x,selection:normalizeSelection(S,x.length)},e);T(o.selection),C(o.selection),i?.(o.text)},[s,h,i,S,x]);return n?_jsx(RichTextEditorSkeleton,{actionCount:r.length,minHeight:a,style:u,testID:g}):_jsxs(View,{testID:g,style:[y.container,{borderColor:f?m.colors.border.focus:m.colors.border.primary,opacity:s?.55:1},u],children:[_jsx(View,{style:[y.toolbar,p],children:r.map(e=>_jsx(ToolbarButton,{action:e,disabled:s,onPress:H,styles:y,theme:m,testID:g?`${g}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:x,onChangeText:_,onSelectionChange:I,onFocus:()=>k(!0),onBlur:()=>k(!1),selection:j??void 0,editable:!s,autoFocus:c,multiline:!0,textAlignVertical:"top",placeholder:l,placeholderTextColor:m.colors.text.tertiary,accessibilityLabel:d,style:[y.input,{minHeight:a},b],testID:g?`${g}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:i,theme:l,testID:r})=>{const s=ACTION_META[e],n={color:t?l.colors.text.disabled:l.colors.text.primary};return"bold"===e&&(n.fontWeight=l.typography.fontWeight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:s.label,accessibilityState:{disabled:t},hitSlop:4,testID:r,style:({pressed:e})=>[i.button,{backgroundColor:e?l.colors.surface.pressed:l.colors.background.secondary}],children:_jsx(Text,{allowFontScaling:!1,style:[i.buttonLabel,n],children:s.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:i})=>{const l=useTheme(),r=useMemo(()=>buildStyles(l),[l]),s=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:i,style:[r.container,o],children:[_jsx(View,{style:r.toolbar,children:s.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[r.skeletonBody,{minHeight:t}],children:[_jsx(Skeleton,{shape:"text",width:"94%",height:14}),_jsx(Skeleton,{shape:"text",width:"100%",height:14}),_jsx(Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>StyleSheet.create({container:{borderWidth:e.colors.border.width,borderColor:e.colors.border.primary,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.background.primary,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,padding:e.spacing.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.secondary,backgroundColor:e.colors.background.secondary},button:{minWidth:34,height:30,paddingHorizontal:e.spacing.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.typography.fontSize.sm},input:{...fontFor(e,"normal"),color:e.colors.text.primary,fontSize:e.typography.fontSize.base,lineHeight:1.5*e.typography.fontSize.base,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},skeletonBody:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm,gap:e.spacing.sm}});export default RichTextEditor;
+"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{applyMarkdownAction,normalizeSelection}from"./markdownActions.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:i,placeholder:l,actions:r=DEFAULT_ACTIONS,disabled:s=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:c=!1,accessibilityLabel:d,haptic:h,style:u,toolbarStyle:p,inputStyle:b,testID:g}=e,m=useTheme(),y=useMemo(()=>buildStyles(m),[m]),x=o??"",[S,T]=useState({start:0,end:0}),[f,k]=useState(!1),[j,C]=useState(null),I=useCallback(e=>{T(e.nativeEvent.selection),C(null)},[]),_=useCallback(e=>{C(null),i?.(e)},[i]),H=useCallback(e=>{if(s)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:x,selection:normalizeSelection(S,x.length)},e);T(o.selection),C(o.selection),i?.(o.text)},[s,h,i,S,x]);return n?_jsx(RichTextEditorSkeleton,{actionCount:r.length,minHeight:a,style:u,testID:g}):_jsxs(View,{testID:g,style:[y.container,{borderColor:f?m.colors.border.focus:m.colors.border.primary,opacity:s?.55:1},u],children:[_jsx(View,{style:[y.toolbar,p],children:r.map(e=>_jsx(ToolbarButton,{action:e,disabled:s,onPress:H,styles:y,theme:m,testID:g?`${g}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:x,onChangeText:_,onSelectionChange:I,onFocus:()=>k(!0),onBlur:()=>k(!1),selection:j??void 0,editable:!s,autoFocus:c,multiline:!0,textAlignVertical:"top",placeholder:l,placeholderTextColor:m.colors.text.tertiary,accessibilityLabel:d,style:[y.input,{minHeight:a},b],testID:g?`${g}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:i,theme:l,testID:r})=>{const s=ACTION_META[e],n={color:t?l.colors.text.disabled:l.colors.text.primary};return"bold"===e&&(n.fontWeight=l.typography.fontWeight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:s.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:r,style:({pressed:e})=>[i.button,{backgroundColor:e?l.colors.surface.pressed:l.colors.background.secondary}],children:_jsx(Text,{allowFontScaling:!1,style:[i.buttonLabel,n],children:s.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:i})=>{const l=useTheme(),r=useMemo(()=>buildStyles(l),[l]),s=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:i,style:[r.container,o],children:[_jsx(View,{style:r.toolbar,children:s.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[r.skeletonBody,{minHeight:t}],children:[_jsx(Skeleton,{shape:"text",width:"94%",height:14}),_jsx(Skeleton,{shape:"text",width:"100%",height:14}),_jsx(Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>StyleSheet.create({container:{borderWidth:e.colors.border.width,borderColor:e.colors.border.primary,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.background.primary,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,padding:e.spacing.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.secondary,backgroundColor:e.colors.background.secondary},button:{minWidth:34,height:30,paddingHorizontal:e.spacing.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.typography.fontSize.sm},input:{...fontFor(e,"normal"),color:e.colors.text.primary,fontSize:e.typography.fontSize.base,lineHeight:1.5*e.typography.fontSize.base,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},skeletonBody:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm,gap:e.spacing.sm}});export default RichTextEditor;

package/lib/module/components/SearchBar/SearchBar.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SearchBar=forwardRef((e,o)=>{const{value:l,onChangeText:s,onSubmit:i,placeholder:t="Search…",autoFocus:r=!1,disabled:a=!1,onClear:n,leftIcon:c,debounceMs:d,size:u="md",variant:f,borderRadius:p,label:b,labelMode:m="top",labelStyle:h,haptic:S,style:g,inputStyle:y,accessibilityLabel:v,testID:x,...j}=e,F=useTheme(),z=f??F.components.searchBar?.defaultVariant??F.components.field?.defaultVariant??"filled",I="underline"===z,B=resolveFieldSize(F,u),C={...B,...F.components.searchBar?.[u]??{}},R=resolveFieldTextStyle(F,{disabled:a}),w=useRef(null),T=useMemo(()=>mergeRefs(w,o),[o]),L=useCallback(()=>{a||w.current?.focus()},[a]),H=useMemo(()=>buildStyles(F),[F]),_="string"==typeof l?l:"",[k,V]=useState(!1),[D,M]=useState(_),P=useDebounce(D,d??0);useEffect(()=>{void 0!==d&&_!==D&&M(_)},[_,d]);const E=useRef(_);useEffect(()=>{void 0!==d&&P!==E.current&&(E.current=P,s(P))},[P,d,s]);const N=useCallback(e=>{void 0===d?s(e):M(e)},[d,s]),A=useCallback(()=>{const e=resolveHaptic(S,"selection");e&&triggerHaptic(e),void 0!==d&&(M(""),E.current=""),s(""),n?.()},[S,d,s,n]),O=useCallback(()=>{i?.(void 0!==d?D:_)},[i,d,D,_]),W=void 0!==d?D:_,K=W.length>0,U={size:C.iconSize,color:a?F.colors.text.disabled:F.colors.text.tertiary,disabled:a},q=c?renderSlotIcon(c,U):(F.icons?.search??defaultIcons.search)(U),G=Boolean(b)&&"float"===m,J=useFloatingLabel({label:b,enabled:G,floated:k||K,variant:z,sizeTokens:{...B,...C},leadingOffset:C.iconSize+F.spacing.md,trailingOffset:K?C.iconSize+F.spacing.md:0,paddingLeft:I?0:C.paddingHorizontal,color:F.colors.field.label,style:h}),Q=K&&!a?_jsx(Pressable,{onPress:A,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(F.icons?.close??defaultIcons.close)({size:C.iconSize,color:F.colors.text.secondary})}):null;return _jsxs(View,{style:g,testID:x,children:[b&&!G?_jsx(FieldLabel,{size:u,style:h,children:b}):null,_jsx(View,{style:H.root,children:_jsxs(View,{style:H.fieldWrap,children:[_jsx(FieldBase,{size:u,variant:z,focused:k,disabled:a,filled:K,minHeight:C.minHeight,paddingHorizontal:I?0:C.paddingHorizontal,borderRadius:p??C.borderRadius,leading:q,trailing:Q,topNotch:J.topNotch,onPress:L,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:v??t,children:_jsx(TextInput,{ref:T,style:[H.input,{fontSize:C.fontSize,color:R.color,...R.weightStyle},y],value:W,onChangeText:N,onSubmitEditing:O,onFocus:()=>V(!0),onBlur:()=>V(!1),placeholder:!G||k||K?t:void 0,placeholderTextColor:R.placeholderColor,autoFocus:r,editable:!a,returnKeyType:"search",selectionColor:resolveVariantColors(F,z).borderFocusedRepresentative,accessibilityLabel:v??t,accessibilityState:{disabled:a},...j})}),J.node]})})]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SearchBar=forwardRef((e,o)=>{const{value:l,onChangeText:i,onSubmit:s,placeholder:t="Search…",autoFocus:a=!1,disabled:r=!1,onClear:n,leftIcon:c,debounceMs:d,size:u="md",variant:f,borderRadius:p,label:b,labelMode:m="top",labelStyle:h,haptic:S,style:g,inputStyle:y,accessibilityLabel:v,testID:x,...j}=e,F=useTheme(),z=f??F.components.searchBar?.defaultVariant??F.components.field?.defaultVariant??"filled",I="underline"===z,B=resolveFieldSize(F,u),C={...B,...F.components.searchBar?.[u]??{}},R=resolveFieldTextStyle(F,{disabled:r}),w=useRef(null),T=useMemo(()=>mergeRefs(w,o),[o]),L=useCallback(()=>{r||w.current?.focus()},[r]),H=useMemo(()=>buildStyles(F),[F]),_="string"==typeof l?l:"",[k,V]=useState(!1),[D,M]=useState(_),P=useDebounce(D,d??0);useEffect(()=>{void 0!==d&&_!==D&&M(_)},[_,d]);const E=useRef(_);useEffect(()=>{void 0!==d&&P!==E.current&&(E.current=P,i(P))},[P,d,i]);const N=useCallback(e=>{void 0===d?i(e):M(e)},[d,i]),A=useCallback(()=>{const e=resolveHaptic(S,"selection");e&&triggerHaptic(e),void 0!==d&&(M(""),E.current=""),i(""),n?.()},[S,d,i,n]),O=useCallback(()=>{s?.(void 0!==d?D:_)},[s,d,D,_]),W=void 0!==d?D:_,K=W.length>0,U={size:C.iconSize,color:r?F.colors.text.disabled:F.colors.text.tertiary,disabled:r},q=c?renderSlotIcon(c,U):(F.icons?.search??defaultIcons.search)(U),G=Boolean(b)&&"float"===m,J=useFloatingLabel({label:b,enabled:G,floated:k||K,variant:z,sizeTokens:{...B,...C},leadingOffset:C.iconSize+F.spacing.md,trailingOffset:K?C.iconSize+F.spacing.md:0,paddingLeft:I?0:C.paddingHorizontal,color:F.colors.field.label,style:h}),Q=K&&!r?_jsx(Pressable,{onPress:A,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(F.icons?.close??defaultIcons.close)({size:C.iconSize,color:F.colors.text.secondary})}):null;return _jsxs(View,{style:g,testID:x,children:[b&&!G?_jsx(FieldLabel,{size:u,style:h,children:b}):null,_jsx(View,{style:H.root,children:_jsxs(View,{style:H.fieldWrap,children:[_jsx(FieldBase,{size:u,variant:z,focused:k,disabled:r,filled:K,minHeight:C.minHeight,paddingHorizontal:I?0:C.paddingHorizontal,borderRadius:p??C.borderRadius,leading:q,trailing:Q,topNotch:J.topNotch,onPress:L,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:v??t,children:_jsx(TextInput,{ref:T,style:[H.input,{fontSize:C.fontSize,color:R.color,...R.weightStyle},y],value:W,onChangeText:N,onSubmitEditing:O,onFocus:()=>V(!0),onBlur:()=>V(!1),placeholder:!G||k||K?t:void 0,placeholderTextColor:R.placeholderColor,autoFocus:a,editable:!r,returnKeyType:"search",selectionColor:resolveVariantColors(F,z).borderFocusedRepresentative,accessibilityLabel:v??t,accessibilityState:{disabled:r},"aria-disabled":r,...j})}),J.node]})})]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;

package/lib/module/components/SectionHeader/SectionHeader.js

@@ -1 +1 @@
-"use strict";import React,{useMemo}from"react";import{useTheme}from"../../theme/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const SectionHeader=({children:e,variant:t="title",flush:i=!1,required:r=!1,style:s,testID:o})=>{const a=useTheme(),l=useMemo(()=>({marginTop:i?0:a.spacing.lg,marginBottom:a.spacing.sm}),[a,i]),n="caps"===t?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===t?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0};return _jsxs(Text,{variant:n.variant,color:n.color,weight:n.weight,accessibilityRole:"header",accessibilityLabel:r&&"string"==typeof e?`${e}, required`:void 0,style:[l,s],testID:o,children:[e,r?_jsx(RequiredMark,{}):null]})};export default SectionHeader;
+"use strict";import{useMemo}from"react";import{useTheme}from"../../theme/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const SectionHeader=({children:e,variant:t="title",flush:i=!1,required:r=!1,style:s,testID:o})=>{const a=useTheme(),l=useMemo(()=>({marginTop:i?0:a.spacing.lg,marginBottom:a.spacing.sm}),[a,i]),n="caps"===t?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===t?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0};return _jsxs(Text,{variant:n.variant,color:n.color,weight:n.weight,accessibilityRole:"header",accessibilityLabel:r&&"string"==typeof e?`${e}, required`:void 0,style:[l,s],testID:o,children:[e,r?_jsx(RequiredMark,{}):null]})};export default SectionHeader;

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const segmentedControlSizes={sm:{height:32,fontSize:12,paddingHorizontal:10,iconSize:14},md:{height:40,fontSize:14,paddingHorizontal:14,iconSize:16},lg:{height:48,fontSize:16,paddingHorizontal:18,iconSize:18}};export const segmentedControlTrackPadding=4;const sizeMap=segmentedControlSizes,TRACK_PADDING=4,SegmentedControl=forwardRef((e,t)=>{const{segments:i,label:o,helperText:r,error:s,value:l,defaultValue:n,onChange:a,size:d="md",fullWidth:c=!0,disabled:m=!1,tone:u="primary",variant:g="segmented",radius:h,haptic:p,accessibilityLabel:f,style:S,containerStyle:b,segmentStyle:y,selectedIndicatorStyle:x,textStyle:z,labelStyle:v,testID:C}=e,[j,w]=useControllableState({value:l,defaultValue:n??i[0]?.value,onChange:a}),F=useTheme(),I=F.components.segmentedControl,k=useMemo(()=>buildStyles(F),[F]),H=sizeMap[d],_={height:I?.[d]?.height??H.height,fontSize:I?.[d]?.fontSize??H.fontSize,paddingHorizontal:I?.[d]?.paddingHorizontal??H.paddingHorizontal,iconSize:I?.[d]?.iconSize??H.iconSize},T="segmented"===g,V="underline"===g,L="pills"===g,M=T?I?.trackPadding??4:0,R=I?.underlineHeight??2,A=I?.pillInset??4,D="number"==typeof h?h:h?F.radius[h]:I?.radius,P=D??F.radius.md,q=void 0===D?F.radius.sm:Math.max(D-M,0),W=D??F.radius.full,E=D??0,[B,N]=useState(0),G=useRef(createAnimatedValue(0)).current,K=Math.max(0,i.findIndex(e=>e.value===j)),O=B>0?(B-2*M)/Math.max(i.length,1):0,X=useCallback((e,t)=>{if(t<=0)return;const i=t*e,o=F.motion.spring.snappy,r=Animated.spring(G,{toValue:i,damping:o.damping,stiffness:o.stiffness,mass:o.mass,overshootClamping:!0,useNativeDriver:!0});return r.start(),r},[F.motion.spring.snappy,G]);useEffect(()=>{if(O>0){const e=X(K,O);return()=>e?.stop()}},[K,O,X]);const J=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==B&&N(t)},[B]),Q=useCallback(e=>{if(m)return;if(e.value===j)return;const t=resolveHaptic(p,"selection");t&&triggerHaptic(t),w(e.value)},[m,w,j,p]),U=T?F.colors.background.elevated:L?F.colors.primaryMuted:F.colors.primary,Y=T?q:L?W:E,Z="neutral"===u?F.colors.text.primary:F.colors.primary,$=F.colors.background.tertiary,ee=useSquircle(T,P,J),te=hasFieldText(o),ie=hasFieldText(s)?s:r,oe=hasFieldText(ie),re=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:f??("string"==typeof o?o:void 0),testID:C,style:[k.track,{height:_.height,opacity:m?.55:1,alignSelf:c?"stretch":"flex-start"},T?{borderRadius:P,...smoothCorners,backgroundColor:ee.active?"transparent":$,padding:M}:V?{borderBottomColor:F.colors.border.secondary,borderBottomWidth:StyleSheet.hairlineWidth}:null,b,S],onLayout:ee.onLayout,children:[ee.active&&ee.size?_jsx(SquircleFill,{width:ee.size.width,height:ee.size.height,radius:P,fill:$}):null,_jsxs(View,{style:k.row,children:[O>0?_jsx(Animated.View,{pointerEvents:"none",style:[k.thumb,T?{top:0,height:_.height-2*M}:L?{top:A,bottom:A}:{bottom:0,height:R},{width:O,borderRadius:Y,...smoothCorners,backgroundColor:U,transform:[{translateX:G}]},x]}):null,i.map(e=>{const t=e.value===j,i=t?Z:F.colors.text.tertiary,o=renderSlotIcon(e.icon,{color:i,size:_.iconSize,selected:t,disabled:m});return _jsxs(Pressable,{onPress:()=>Q(e),disabled:m,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:m},style:({pressed:e})=>[k.segment,{paddingHorizontal:_.paddingHorizontal,opacity:e&&!t?.7:1},y],children:[o?_jsx(View,{style:k.segmentIcon,children:o}):null,_jsx(Text,{style:[k.segmentLabel,{color:i,fontSize:_.fontSize,fontWeight:t?F.typography.fontWeight.semibold:F.typography.fontWeight.medium},z,v],numberOfLines:1,children:e.label})]},String(e.value))})]})]});return te||oe?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[te?_jsx(FieldLabel,{size:d,children:o}):null,re,oe?_jsx(FieldMessage,{size:d,text:ie,error:hasFieldText(s)}):null]}):re});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>StyleSheet.create({track:{flexDirection:"row",alignItems:"stretch",position:"relative"},row:{flex:1,flexDirection:"row",alignItems:"stretch",position:"relative",overflow:"hidden"},thumb:{position:"absolute",left:0},segment:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},segmentIcon:{marginRight:6},segmentLabel:{includeFontPadding:!1}});export{SegmentedControl};export default SegmentedControl;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const segmentedControlSizes={sm:{height:32,fontSize:12,paddingHorizontal:10,iconSize:14},md:{height:40,fontSize:14,paddingHorizontal:14,iconSize:16},lg:{height:48,fontSize:16,paddingHorizontal:18,iconSize:18}};export const segmentedControlTrackPadding=4;const LABEL_LINE_HEIGHT_RATIO=1.25,sizeMap=segmentedControlSizes,TRACK_PADDING=4,SegmentedControl=forwardRef((e,t)=>{const{segments:i,label:o,helperText:l,error:r,value:s,defaultValue:n,onChange:a,size:d="md",fullWidth:c=!0,disabled:m=!1,tone:u="primary",variant:g="segmented",radius:h,labelLines:p=1,haptic:f,accessibilityLabel:b,style:S,containerStyle:x,segmentStyle:y,selectedIndicatorStyle:z,textStyle:v,labelStyle:C,testID:j}=e,[w,I]=useControllableState({value:s,defaultValue:n??i[0]?.value,onChange:a}),k=useTheme(),H=k.components.segmentedControl,L=useMemo(()=>buildStyles(k),[k]),_=sizeMap[d],F={height:H?.[d]?.height??_.height,fontSize:H?.[d]?.fontSize??_.fontSize,paddingHorizontal:H?.[d]?.paddingHorizontal??_.paddingHorizontal,iconSize:H?.[d]?.iconSize??_.iconSize},M=p>=2?2:1,T=M>1,V="segmented"===g,A="underline"===g,R="pills"===g,D=V?H?.trackPadding??4:0,E=Math.ceil(1.25*F.fontSize)*(M-1),P=H?.underlineHeight??2,q=H?.pillInset??4,W="number"==typeof h?h:h?k.radius[h]:H?.radius,B=W??k.radius.md,N=void 0===W?k.radius.sm:Math.max(W-D,0),G=W??k.radius.full,O=W??0,[K,X]=useState(0),J=useRef(createAnimatedValue(0)).current,Q=Math.max(0,i.findIndex(e=>e.value===w)),U=K>0?(K-2*D)/Math.max(i.length,1):0,Y=useCallback((e,t)=>{if(t<=0)return;const i=t*e,o=k.motion.spring.snappy,l=Animated.spring(J,{toValue:i,damping:o.damping,stiffness:o.stiffness,mass:o.mass,overshootClamping:!0,useNativeDriver:!0});return l.start(),l},[k.motion.spring.snappy,J]);useEffect(()=>{if(U>0){const e=Y(Q,U);return()=>e?.stop()}},[Q,U,Y]);const Z=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==K&&X(t)},[K]),$=useCallback(e=>{if(m)return;if(e.value===w)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),I(e.value)},[m,I,w,f]),ee=V?k.colors.background.elevated:R?k.colors.primaryMuted:k.colors.primary,te=V?N:R?G:O,ie="neutral"===u?k.colors.text.primary:k.colors.primary,oe=k.colors.background.tertiary,le=useSquircle(V,B,Z),re=hasFieldText(o),se=hasFieldText(r)?r:l,ne=hasFieldText(se),ae=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:b??("string"==typeof o?o:void 0),testID:j,style:[L.track,{...T?{minHeight:F.height+E}:{height:F.height},opacity:m?.55:1,alignSelf:c?"stretch":"flex-start"},V?{borderRadius:B,...smoothCorners,backgroundColor:le.active?"transparent":oe,padding:D}:A?{borderBottomColor:k.colors.border.secondary,borderBottomWidth:StyleSheet.hairlineWidth}:null,x,S],onLayout:le.onLayout,children:[le.active&&le.size?_jsx(SquircleFill,{width:le.size.width,height:le.size.height,radius:B,fill:oe}):null,_jsxs(View,{style:L.row,children:[U>0?_jsx(Animated.View,{pointerEvents:"none",style:[L.thumb,V?T?{top:0,bottom:0}:{top:0,height:F.height-2*D}:R?{top:q,bottom:q}:{bottom:0,height:P},{width:U,borderRadius:te,...smoothCorners,backgroundColor:ee,transform:[{translateX:J}]},z]}):null,i.map(e=>{const t=e.value===w,i=t?ie:k.colors.text.tertiary,o=renderSlotIcon(e.icon,{color:i,size:F.iconSize,selected:t,disabled:m});return _jsxs(Pressable,{onPress:()=>$(e),disabled:m,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{checked:t,selected:t,disabled:m},"aria-checked":t,"aria-disabled":m,style:({pressed:e})=>[L.segment,T?L.segmentMultiline:null,{paddingHorizontal:F.paddingHorizontal,opacity:e&&!t?.7:1},y],children:[o?_jsx(View,{style:L.segmentIcon,children:o}):null,_jsx(Text,{style:[L.segmentLabel,T?L.segmentLabelMultiline:null,{color:i,fontSize:F.fontSize,fontWeight:t?k.typography.fontWeight.semibold:k.typography.fontWeight.medium},v,C],numberOfLines:M,children:e.label})]},String(e.value))})]})]});return re||ne?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[re?_jsx(FieldLabel,{size:d,children:o}):null,ae,ne?_jsx(FieldMessage,{size:d,text:se,error:hasFieldText(r)}):null]}):ae});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>StyleSheet.create({track:{flexDirection:"row",alignItems:"stretch",position:"relative"},row:{flex:1,flexDirection:"row",alignItems:"stretch",position:"relative",overflow:"hidden"},thumb:{position:"absolute",left:0},segment:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},segmentIcon:{marginRight:6},segmentMultiline:{paddingVertical:6},segmentLabel:{includeFontPadding:!1},segmentLabelMultiline:{flexShrink:1,textAlign:"center"}});export{SegmentedControl};export default SegmentedControl;

package/lib/module/components/Select/Select.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sameSelectValue=(e,l)=>String(e)===String(l),containsValue=(e,l)=>e.some(e=>sameSelectValue(e,l)),Select=forwardRef((e,l)=>{const{options:t,getOptionLabel:i,getOptionValue:o,getOptionDisabled:r,getOptionDescription:s,getOptionIcon:n,placeholder:a,searchable:c=!1,haptic:d,label:u,help:p,title:f,required:S=!1,error:b,helperText:g,prefix:h,numberOfLines:x=1,disabled:m=!1,size:v="md",variant:y,leftIcon:j,rightIcon:F,chevronColor:C,chevronSize:O,borderRadius:T,accessibilityLabel:V,labelStyle:k,style:z,triggerStyle:_,textStyle:I,optionStyle:H,selectedOptionStyle:R,optionTextStyle:w,selectedOptionTextStyle:L,testID:M}=e,D=!0===e.multi,B=useCallback(e=>i?i(e):e.label??"",[i]),P=useCallback(e=>o?o(e):e.value,[o]),q=useCallback(e=>r?r(e):!0===e.disabled,[r]),A=useCallback(e=>s?s(e):e.description,[s]),E=useCallback(e=>n?n(e):e.icon,[n]),N=useTheme(),$=useMemo(()=>buildStyles(N),[N]),G=resolveFieldSize(N,v),J=resolveFieldTextStyle(N,{disabled:m}),K=y??N.components.select?.defaultVariant??N.components.field?.defaultVariant??"outlined",Q=useMemo(()=>{const e=N.components.select?.fillColors?.[K];if(!e)return;const l={};return void 0!==e.idleEmpty&&(l.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(l.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(l.backgroundFocused=e.focus),void 0!==e.error&&(l.backgroundError=e.error),void 0!==e.disabled&&(l.backgroundDisabled=e.disabled),Object.keys(l).length>0?l:void 0},[N.components.select?.fillColors,K]),U=T??N.components.select?.borderRadius,[W,X]=useState(!1),Y=useCallback(l=>{if(D){const t=e.value??[];return containsValue(t,l)}return null!=e.value&&sameSelectValue(e.value,l)},[D,e.value]),Z=useMemo(()=>{if(D){const l=e.value??[];return t.filter(e=>containsValue(l,P(e)))}const l=e.value;if(null==l)return[];const i=t.find(e=>sameSelectValue(P(e),l));return i?[i]:[]},[D,t,e.value,P]),ee=useCallback(()=>{if(m)return;const e=resolveHaptic(d,"selection");e&&triggerHaptic(e),X(!0)},[m,d]),le=useCallback(()=>{X(!1)},[]),te=useCallback(l=>{if(q(l))return;const t=P(l),i=resolveHaptic(d,"selection");if(i&&triggerHaptic(i),D){const l=e.value??[],i=containsValue(l,t)?l.filter(e=>!sameSelectValue(e,t)):[...l,t];return void e.onChange(i)}e.onChange(t),le()},[D,e,le,q,P,d]),ie=0===Z.length?a??"Select…":Z.map(e=>B(e)).join(", "),oe=0===Z.length,re=!0===b||hasFieldText(b),se=hasFieldText(u),ne=fieldTextAsString(u),ae=Math.round(1.4*G.fontSize),ce={color:m?N.colors.field.iconDisabled:W?N.colors.field.iconFocused:N.colors.field.icon,size:G.iconSize,disabled:m,focused:W,error:re},de=0===Z.length?a??"No selection":`Selected: ${Z.map(e=>B(e)).join(", ")}`,ue=V??`${ne??"Select"}. ${de}`;return _jsxs(View,{style:[$.container,z],testID:M,children:[se?_jsx(FieldLabel,{size:v,required:S,help:p,style:k,children:u}):null,_jsx(View,{ref:l,collapsable:!1,children:_jsxs(FieldBase,{size:v,variant:K,disabled:m,error:re,filled:Z.length>0,onPress:ee,borderRadius:U,fillOverrides:Q,paddingHorizontal:"underline"===K?0:void 0,accessibilityRole:"button",accessibilityLabel:ue,accessibilityState:{disabled:m,expanded:W},style:_,slotAlign:1===x?"center":"top",slotLineHeight:1===x?void 0:ae,leading:j?_jsx(View,{children:renderSlotIcon(j,ce)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,ce)}):_jsx(Chevron,{color:C??(m?N.colors.text.disabled:N.colors.text.tertiary),size:O??G.iconSize,open:W,style:$.chevron}),children:[hasFieldText(h)?"string"==typeof h||"number"==typeof h?_jsx(Text,{style:[$.prefix,{color:J.placeholderColor,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,marginRight:N.spacing.xs}],children:h}):_jsx(View,{style:[$.prefixNode,{minHeight:1===x?void 0:ae,justifyContent:"center",marginRight:N.spacing.xs}],children:h}):null,_jsxs(Text,{style:[$.triggerText,{color:oe?J.placeholderColor:J.color,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,...J.weightStyle},I],numberOfLines:x,children:[ie,oe&&S&&!se?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:v,error:re,text:re?b:g}),_jsx(OptionSheet,{open:W,onClose:le,title:f??ne,accessibilityLabel:ne??(se?f:void 0)??a??"Options",options:t,labelOf:B,getValue:P,disabledOf:q,descriptionOf:A,iconOf:E,isSelected:Y,onSelect:te,multi:D,searchable:c,optionStyle:H,selectedOptionStyle:R,optionTextStyle:w,selectedOptionTextStyle:L,searchSelectionColor:resolveVariantColors(N,K,Q).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:8}});export{Select};export default Select;
+"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sameSelectValue=(e,l)=>String(e)===String(l),containsValue=(e,l)=>e.some(e=>sameSelectValue(e,l)),Select=forwardRef((e,l)=>{const{options:t,getOptionLabel:i,getOptionValue:o,getOptionDisabled:r,getOptionDescription:s,getOptionIcon:n,placeholder:a,searchable:d=!1,haptic:c,label:u,help:p,title:f,required:S=!1,error:b,helperText:g,prefix:h,numberOfLines:x=1,disabled:m=!1,size:v="md",variant:y,leftIcon:j,rightIcon:F,chevronColor:C,chevronSize:O,borderRadius:T,accessibilityLabel:V,labelStyle:k,style:z,triggerStyle:_,textStyle:I,optionStyle:H,selectedOptionStyle:R,optionTextStyle:w,selectedOptionTextStyle:L,testID:M}=e,D=!0===e.multi,B=useCallback(e=>i?i(e):e.label??"",[i]),P=useCallback(e=>o?o(e):e.value,[o]),q=useCallback(e=>r?r(e):!0===e.disabled,[r]),A=useCallback(e=>s?s(e):e.description,[s]),E=useCallback(e=>n?n(e):e.icon,[n]),N=useTheme(),$=useMemo(()=>buildStyles(N),[N]),G=resolveFieldSize(N,v),J=resolveFieldTextStyle(N,{disabled:m}),K=y??N.components.select?.defaultVariant??N.components.field?.defaultVariant??"outlined",Q=useMemo(()=>{const e=N.components.select?.fillColors?.[K];if(!e)return;const l={};return void 0!==e.idleEmpty&&(l.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(l.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(l.backgroundFocused=e.focus),void 0!==e.error&&(l.backgroundError=e.error),void 0!==e.disabled&&(l.backgroundDisabled=e.disabled),Object.keys(l).length>0?l:void 0},[N.components.select?.fillColors,K]),U=T??N.components.select?.borderRadius,[W,X]=useState(!1),Y=useCallback(l=>{if(D){const t=e.value??[];return containsValue(t,l)}return null!=e.value&&sameSelectValue(e.value,l)},[D,e.value]),Z=useMemo(()=>{if(D){const l=e.value??[];return t.filter(e=>containsValue(l,P(e)))}const l=e.value;if(null==l)return[];const i=t.find(e=>sameSelectValue(P(e),l));return i?[i]:[]},[D,t,e.value,P]),ee=useCallback(()=>{if(m)return;const e=resolveHaptic(c,"selection");e&&triggerHaptic(e),X(!0)},[m,c]),le=useCallback(()=>{X(!1)},[]),te=useCallback(l=>{if(q(l))return;const t=P(l),i=resolveHaptic(c,"selection");if(i&&triggerHaptic(i),D){const l=e.value??[],i=containsValue(l,t)?l.filter(e=>!sameSelectValue(e,t)):[...l,t];return void e.onChange(i)}e.onChange(t),le()},[D,e,le,q,P,c]),ie=0===Z.length?a??"Select…":Z.map(e=>B(e)).join(", "),oe=0===Z.length,re=!0===b||hasFieldText(b),se=hasFieldText(u),ne=fieldTextAsString(u),ae=Math.round(1.4*G.fontSize),de={color:m?N.colors.field.iconDisabled:W?N.colors.field.iconFocused:N.colors.field.icon,size:G.iconSize,disabled:m,focused:W,error:re},ce=0===Z.length?a??"No selection":`Selected: ${Z.map(e=>B(e)).join(", ")}`,ue=V??`${ne??"Select"}. ${ce}`;return _jsxs(View,{style:[$.container,z],testID:M,children:[se?_jsx(FieldLabel,{size:v,required:S,help:p,style:k,children:u}):null,_jsx(View,{ref:l,collapsable:!1,children:_jsxs(FieldBase,{size:v,variant:K,disabled:m,error:re,filled:Z.length>0,onPress:ee,borderRadius:U,fillOverrides:Q,paddingHorizontal:"underline"===K?0:void 0,accessibilityRole:"button",accessibilityLabel:ue,accessibilityState:{disabled:m,expanded:W},"aria-disabled":m,"aria-expanded":W,style:_,slotAlign:1===x?"center":"top",slotLineHeight:1===x?void 0:ae,leading:j?_jsx(View,{children:renderSlotIcon(j,de)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,de)}):_jsx(Chevron,{color:C??(m?N.colors.text.disabled:N.colors.text.tertiary),size:O??G.iconSize,open:W,style:$.chevron}),children:[hasFieldText(h)?"string"==typeof h||"number"==typeof h?_jsx(Text,{style:[$.prefix,{color:J.placeholderColor,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,marginRight:N.spacing.xs}],children:h}):_jsx(View,{style:[$.prefixNode,{minHeight:1===x?void 0:ae,justifyContent:"center",marginRight:N.spacing.xs}],children:h}):null,_jsxs(Text,{style:[$.triggerText,{color:oe?J.placeholderColor:J.color,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,...J.weightStyle},I],numberOfLines:x,children:[ie,oe&&S&&!se?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:v,error:re,text:re?b:g}),_jsx(OptionSheet,{open:W,onClose:le,title:f??ne,accessibilityLabel:ne??(se?f:void 0)??a??"Options",options:t,labelOf:B,getValue:P,disabledOf:q,descriptionOf:A,iconOf:E,isSelected:Y,onSelect:te,multi:D,searchable:d,optionStyle:H,selectedOptionStyle:R,optionTextStyle:w,selectedOptionTextStyle:L,searchSelectionColor:resolveVariantColors(N,K,Q).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:8}});export{Select};export default Select;