@webority/mobile-ui 0.96.0 → 0.99.0

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -1 +1 @@
-"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,Modal as RNModal,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Carousel}from"../Carousel/index.js";import{Skeleton}from"../Skeleton/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:u,containerStyle:c,testID:h})=>{const d=useTheme(),m=useMemo(()=>buildStyles(d),[d]),[g,p]=useState(clamp(t,0,Math.max(0,e.length-1))),[b,S]=useState(!1),x=useCallback(e=>{p(e),o?.(e)},[o]),v=useCallback(()=>{if(!l)return;const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!0)},[l,n]),I=useCallback(()=>{const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!1)},[n]),y=useCallback((t,a)=>{const i=t.alt??`Image ${a+1} of ${e.length}`;return _jsx(Pressable,{onPress:v,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:l?"Tap to open fullscreen":void 0,style:m.imageWrap,children:_jsx(Image,{source:t.source,style:m.image,resizeMode:"cover"})})},[l,e.length,v,m]),w=useCallback(e=>_jsx(Image,{source:e.source,style:m.thumbnailImage,resizeMode:"cover"}),[m]),C=_jsxs(View,{style:[m.container,c],testID:h,accessibilityLabel:u??"Image gallery",children:[_jsxs(View,{style:m.carouselWrap,children:[_jsx(Carousel,{data:e,defaultIndex:t,onIndexChange:x,renderItem:y,showPagination:!1,showThumbnails:a,renderThumbnail:w,haptic:n}),i&&e.length>0?_jsx(View,{style:m.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[m.counterText,{color:d.colors["on-scrim"]}],accessibilityLabel:`Image ${g+1} of ${e.length}`,children:`${g+1} / ${e.length}`})}):null]}),l?_jsx(Lightbox,{visible:b,images:e,initialIndex:g,enablePinchZoom:s,showCounter:i,onClose:I,onIndexChange:x,haptic:n}):null]});return r?_jsx(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:i,containerStyle:c,testID:h}):C};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:i,testID:l})=>{const s=useTheme(),o=Math.min(e?.length||4,6);return _jsxs(View,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[_jsxs(View,{style:{position:"relative"},children:[_jsx(Skeleton,{width:"100%",height:280,radius:"lg"}),a?_jsx(View,{style:{position:"absolute",top:12,right:12},children:_jsx(Skeleton,{width:44,height:22,radius:"pill"})}):null]}),t?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.md},children:Array.from({length:o}).map((e,t)=>_jsx(Skeleton,{width:64,height:64,radius:"md",style:{marginRight:s.space.sm}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:i,showCounter:l,onClose:s,onIndexChange:o,haptic:n})=>{const r=useTheme(),u=useMemo(()=>buildLightboxStyles(r),[r]),c=useRef(null),[h,d]=useState(a),m=useCallback(e=>{if(e!==h){const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),d(e),o(e)}},[h,o,n]),g=useCallback((e,a)=>_jsx(ZoomableImage,{image:e,index:a,total:t.length,active:a===h,enabled:i,maxScale:4,minScale:1,doubleTapScale:2,haptic:n}),[h,i,t.length,n]),p=t[h]?.caption;return _jsx(RNModal,{visible:e,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"fade",onRequestClose:s,accessibilityViewIsModal:!0,children:_jsxs(View,{style:u.backdrop,accessibilityViewIsModal:!0,children:[_jsx(Carousel,{ref:c,data:t,defaultIndex:a,onIndexChange:m,renderItem:g,showPagination:!1,haptic:n}),l&&t.length>0?_jsx(View,{style:u.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[u.counterText,{color:r.colors["on-scrim"]}],accessibilityLabel:`Image ${h+1} of ${t.length}`,children:`${h+1} / ${t.length}`})}):null,_jsx(Pressable,{onPress:s,accessibilityRole:"button",accessibilityLabel:"Close gallery",style:u.closeButton,hitSlop:12,children:(r.settings.icons.close??defaultIcons.close)({size:24,color:r.colors["on-scrim"]})}),p?_jsx(Animated.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:_jsx(Text,{style:u.captionText,numberOfLines:3,children:p})}):null,_jsx(ToastHost,{})]})})},ZoomableImage=({image:e,index:t,total:a,active:i,enabled:l,maxScale:s,minScale:o,doubleTapScale:n,haptic:r})=>{const u=Dimensions.get("window"),c=useSharedValue(1),h=useSharedValue(1),d=useSharedValue(0),m=useSharedValue(0),g=useSharedValue(0),p=useSharedValue(0),b=useCallback(()=>{c.value=withSpring(1,SPRING_CONFIG),h.value=1,d.value=withSpring(0,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),g.value=0,p.value=0},[c,h,d,m,g,p]);React.useEffect(()=>{i||(c.value=withTiming(1,{duration:150}),d.value=withTiming(0,{duration:150}),m.value=withTiming(0,{duration:150}),h.value=1,g.value=0,p.value=0)},[i,c,d,m,h,g,p]);const S=useCallback(()=>{!1!==r&&triggerHaptic("impactLight")},[r]),x=useMemo(()=>Gesture.Pinch().enabled(l).onStart(()=>{"worklet";h.value=c.value}).onUpdate(e=>{"worklet";const t=h.value*e.scale;c.value=t<o?o+.3*(t-o):t>s?s+.2*(t-s):t}).onEnd(()=>{"worklet";return c.value<o?(c.value=withSpring(o,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),h.value=o,g.value=0,void(p.value=0)):c.value>s?(c.value=withSpring(s,SPRING_CONFIG),void(h.value=s)):void(h.value=c.value)}),[l,c,h,d,m,g,p,o,s]),v=useMemo(()=>Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";g.value=d.value,p.value=m.value}).onUpdate(e=>{"worklet";c.value<=1||(d.value=g.value+e.translationX,m.value=p.value+e.translationY)}).onEnd(()=>{"worklet";g.value=d.value,p.value=m.value}),[c,d,m,g,p]),I=useMemo(()=>Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(S)(),c.value>1?(c.value=withSpring(1,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),h.value=1,g.value=0,p.value=0):(c.value=withSpring(n,SPRING_CONFIG),h.value=n)}),[c,h,d,m,g,p,S,n]),y=useMemo(()=>Gesture.Race(x,v,I),[x,v,I]),w=useAnimatedStyle(()=>({transform:[{translateX:d.value},{translateY:m.value},{scale:c.value}]}));React.useEffect(()=>{i||b()},[i,b]);const C=e.alt??`Image ${t+1} of ${a}`;return _jsx(GestureDetector,{gesture:y,children:_jsx(Animated.View,{style:[lightboxImageStyles.container,{width:u.width}],children:_jsx(Animated.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,w],accessibilityLabel:C,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,...smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold}}),buildLightboxStyles=e=>StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:"#FFFFFF",fontSize:e.text.base.size,lineHeight:21,textAlign:"center"}}),lightboxImageStyles=StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;
+"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,Modal as RNModal,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Carousel}from"../Carousel/index.js";import{Skeleton}from"../Skeleton/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:u,containerStyle:c,testID:h})=>{const m=useTheme(),d=useMemo(()=>buildStyles(m),[m]),[g,p]=useState(clamp(t,0,Math.max(0,e.length-1))),[b,S]=useState(!1),x=useCallback(e=>{p(e),o?.(e)},[o]),v=useCallback(()=>{if(!l)return;const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!0)},[l,n]),I=useCallback(()=>{const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!1)},[n]),y=useCallback((t,a)=>{const i=t.alt??`Image ${a+1} of ${e.length}`;return _jsx(Pressable,{onPress:v,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:l?"Tap to open fullscreen":void 0,style:d.imageWrap,children:_jsx(Image,{source:t.source,style:d.image,resizeMode:"cover"})})},[l,e.length,v,d]),w=useCallback(e=>_jsx(Image,{source:e.source,style:d.thumbnailImage,resizeMode:"cover"}),[d]),C=_jsxs(View,{style:[d.container,c],testID:h,accessibilityLabel:u??"Image gallery",children:[_jsxs(View,{style:d.carouselWrap,children:[_jsx(Carousel,{data:e,defaultIndex:t,onIndexChange:x,renderItem:y,showPagination:!1,showThumbnails:a,renderThumbnail:w,haptic:n}),i&&e.length>0?_jsx(View,{style:d.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[d.counterText,{color:m.colors["on-scrim"]}],accessibilityLabel:`Image ${g+1} of ${e.length}`,children:`${g+1} / ${e.length}`})}):null]}),l?_jsx(Lightbox,{visible:b,images:e,initialIndex:g,enablePinchZoom:s,showCounter:i,onClose:I,onIndexChange:x,haptic:n}):null]});return r?_jsx(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:i,containerStyle:c,testID:h}):C};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:i,testID:l})=>{const s=useTheme(),o=Math.min(e?.length||4,6);return _jsxs(View,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[_jsxs(View,{style:{position:"relative"},children:[_jsx(Skeleton,{width:"100%",height:280,radius:"lg"}),a?_jsx(View,{style:{position:"absolute",top:12,right:12},children:_jsx(Skeleton,{width:44,height:22,radius:"pill"})}):null]}),t?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.md},children:Array.from({length:o}).map((e,t)=>_jsx(Skeleton,{width:64,height:64,radius:"md",style:{marginRight:s.space.sm}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:i,showCounter:l,onClose:s,onIndexChange:o,haptic:n})=>{const r=useTheme(),u=useMemo(()=>buildLightboxStyles(r),[r]),c=useRef(null),[h,m]=useState(a),d=useCallback(e=>{if(e!==h){const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),m(e),o(e)}},[h,o,n]),g=useCallback((e,a)=>_jsx(ZoomableImage,{image:e,index:a,total:t.length,active:a===h,enabled:i,maxScale:4,minScale:1,doubleTapScale:2,haptic:n}),[h,i,t.length,n]),p=t[h]?.caption;return _jsx(RNModal,{visible:e,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"fade",onRequestClose:s,accessibilityViewIsModal:!0,children:_jsxs(View,{style:u.backdrop,accessibilityViewIsModal:!0,children:[_jsx(Carousel,{ref:c,data:t,defaultIndex:a,onIndexChange:d,renderItem:g,showPagination:!1,haptic:n}),l&&t.length>0?_jsx(View,{style:u.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[u.counterText,{color:r.colors["on-scrim"]}],accessibilityLabel:`Image ${h+1} of ${t.length}`,children:`${h+1} / ${t.length}`})}):null,_jsx(Pressable,{onPress:s,accessibilityRole:"button",accessibilityLabel:"Close gallery",style:u.closeButton,hitSlop:12,...hitSlopMarker(12),children:(r.settings.icons.close??defaultIcons.close)({size:24,color:r.colors["on-scrim"]})}),p?_jsx(Animated.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:_jsx(Text,{style:u.captionText,numberOfLines:3,children:p})}):null,_jsx(ToastHost,{})]})})},ZoomableImage=({image:e,index:t,total:a,active:i,enabled:l,maxScale:s,minScale:o,doubleTapScale:n,haptic:r})=>{const u=Dimensions.get("window"),c=useSharedValue(1),h=useSharedValue(1),m=useSharedValue(0),d=useSharedValue(0),g=useSharedValue(0),p=useSharedValue(0),b=useCallback(()=>{c.value=withSpring(1,SPRING_CONFIG),h.value=1,m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),g.value=0,p.value=0},[c,h,m,d,g,p]);React.useEffect(()=>{i||(c.value=withTiming(1,{duration:150}),m.value=withTiming(0,{duration:150}),d.value=withTiming(0,{duration:150}),h.value=1,g.value=0,p.value=0)},[i,c,m,d,h,g,p]);const S=useCallback(()=>{!1!==r&&triggerHaptic("impactLight")},[r]),x=useMemo(()=>Gesture.Pinch().enabled(l).onStart(()=>{"worklet";h.value=c.value}).onUpdate(e=>{"worklet";const t=h.value*e.scale;c.value=t<o?o+.3*(t-o):t>s?s+.2*(t-s):t}).onEnd(()=>{"worklet";return c.value<o?(c.value=withSpring(o,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),h.value=o,g.value=0,void(p.value=0)):c.value>s?(c.value=withSpring(s,SPRING_CONFIG),void(h.value=s)):void(h.value=c.value)}),[l,c,h,m,d,g,p,o,s]),v=useMemo(()=>Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";g.value=m.value,p.value=d.value}).onUpdate(e=>{"worklet";c.value<=1||(m.value=g.value+e.translationX,d.value=p.value+e.translationY)}).onEnd(()=>{"worklet";g.value=m.value,p.value=d.value}),[c,m,d,g,p]),I=useMemo(()=>Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(S)(),c.value>1?(c.value=withSpring(1,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),h.value=1,g.value=0,p.value=0):(c.value=withSpring(n,SPRING_CONFIG),h.value=n)}),[c,h,m,d,g,p,S,n]),y=useMemo(()=>Gesture.Race(x,v,I),[x,v,I]),w=useAnimatedStyle(()=>({transform:[{translateX:m.value},{translateY:d.value},{scale:c.value}]}));React.useEffect(()=>{i||b()},[i,b]);const C=e.alt??`Image ${t+1} of ${a}`;return _jsx(GestureDetector,{gesture:y,children:_jsx(Animated.View,{style:[lightboxImageStyles.container,{width:u.width}],children:_jsx(Animated.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,w],accessibilityLabel:C,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,...smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold}}),buildLightboxStyles=e=>StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:"#FFFFFF",fontSize:e.text.base.size,lineHeight:21,textAlign:"center"}}),lightboxImageStyles=StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;

package/lib/module/components/InlineSelect/InlineSelect.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldLabel}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const InlineSelect=forwardRef((e,t)=>{const{options:l,getOptionLabel:i,getOptionValue:s,getOptionDisabled:o,getOptionDescription:a,getOptionIcon:r,value:n,onChange:c,placeholder:d,label:p,title:b,searchable:u=!1,haptic:S,disabled:m=!1,size:x="md",color:f,chevronColor:g,chevronSize:h,textStyle:y,style:O,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F,accessibilityLabel:_,testID:k}=e,I=useTheme(),T=useMemo(()=>buildStyles(I),[I]),z=resolveFieldSize(I,x),L=useCallback(e=>i?i(e):e.label??"",[i]),H=useCallback(e=>s?s(e):e.value,[s]),w=useCallback(e=>o?o(e):!0===e.disabled,[o]),D=useCallback(e=>a?a(e):e.description,[a]),P=useCallback(e=>r?r(e):e.icon,[r]),[V,B]=useState(!1),M=useMemo(()=>{if(null!=n)return l.find(e=>H(e)===n)},[l,n,H]),R=useCallback(e=>n===e,[n]),$=useCallback(()=>{if(m)return;const e=resolveHaptic(S,"selection");e&&triggerHaptic(e),B(!0)},[m,S]),N=useCallback(()=>{B(!1)},[]),G=useCallback(e=>{if(w(e))return;const t=resolveHaptic(S,"selection");t&&triggerHaptic(t),c(H(e)),N()},[w,H,c,N,S]),q=m?I.colors["text-disabled"]:f??I.colors.primary,A=void 0!==M?L(M):d??"Select",E=void 0!==M?`Selected: ${L(M)}`:d??"No selection",J=_jsxs(Pressable,{ref:t,onPress:$,disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:_??`${p??b??"Select"}. ${E}`,accessibilityState:{disabled:m,expanded:V},"aria-disabled":m,"aria-expanded":V,testID:k,style:({pressed:e})=>[T.trigger,{columnGap:I.space.xs,opacity:e&&!m?.6:1},O],children:[_jsx(Text,{style:[T.triggerText,{color:q,fontSize:z.text,...fontFor(I,"medium")},y],numberOfLines:1,children:A}),_jsx(Chevron,{color:g??q,size:h??z.icon,open:V})]});return _jsxs(_Fragment,{children:[p?_jsxs(View,{style:T.labelled,children:[_jsx(FieldLabel,{size:x,children:p}),J]}):J,_jsx(OptionSheet,{open:V,onClose:N,title:b,accessibilityLabel:p??b??d??"Options",options:l,labelOf:L,getValue:H,disabledOf:w,descriptionOf:D,iconOf:P,isSelected:R,onSelect:G,searchable:u,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F})]})});InlineSelect.displayName="InlineSelect";const buildStyles=e=>StyleSheet.create({labelled:{alignItems:"flex-start"},trigger:{flexDirection:"row",alignItems:"center"},triggerText:{includeFontPadding:!1}});export{InlineSelect};export default InlineSelect;
+"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldLabel}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const InlineSelect=forwardRef((e,t)=>{const{options:l,getOptionLabel:i,getOptionValue:s,getOptionDisabled:o,getOptionDescription:r,getOptionIcon:a,value:n,onChange:c,placeholder:d,label:p,title:b,searchable:S=!1,haptic:u,disabled:m=!1,size:x="md",color:f,chevronColor:h,chevronSize:g,textStyle:y,style:O,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F,accessibilityLabel:k,testID:_}=e,I=useTheme(),T=useMemo(()=>buildStyles(I),[I]),z=resolveFieldSize(I,x),L=useCallback(e=>i?i(e):e.label??"",[i]),H=useCallback(e=>s?s(e):e.value,[s]),w=useCallback(e=>o?o(e):!0===e.disabled,[o]),D=useCallback(e=>r?r(e):e.description,[r]),M=useCallback(e=>a?a(e):e.icon,[a]),[P,V]=useState(!1),B=useMemo(()=>{if(null!=n)return l.find(e=>H(e)===n)},[l,n,H]),R=useCallback(e=>n===e,[n]),$=useCallback(()=>{if(m)return;const e=resolveHaptic(u,"selection");e&&triggerHaptic(e),V(!0)},[m,u]),N=useCallback(()=>{V(!1)},[]),G=useCallback(e=>{if(w(e))return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),c(H(e)),N()},[w,H,c,N,u]),q=m?I.colors["text-disabled"]:f??I.colors.primary,A=void 0!==B?L(B):d??"Select",E=void 0!==B?`Selected: ${L(B)}`:d??"No selection",J=k??`${p??b??"Select"}. ${E}`,K=_jsxs(Pressable,{ref:t,onPress:$,disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:m,expanded:P},"aria-disabled":m,"aria-expanded":P,testID:_,style:({pressed:e})=>[T.trigger,{columnGap:I.space.xs,opacity:e&&!m?.6:1},O],children:[_jsx(Text,{style:[T.triggerText,{color:q,fontSize:z.text,...fontFor(I,"medium")},y],numberOfLines:1,children:A}),_jsx(Chevron,{color:h??q,size:g??z.icon,open:P})]});return _jsxs(_Fragment,{children:[p?_jsxs(View,{style:T.labelled,children:[_jsx(FieldLabel,{size:x,children:p}),K]}):K,_jsx(OptionSheet,{open:P,onClose:N,title:b,accessibilityLabel:p??b??d??"Options",options:l,labelOf:L,getValue:H,disabledOf:w,descriptionOf:D,iconOf:M,isSelected:R,onSelect:G,searchable:S,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F})]})});InlineSelect.displayName="InlineSelect";const buildStyles=e=>StyleSheet.create({labelled:{alignItems:"flex-start"},trigger:{flexDirection:"row",alignItems:"center"},triggerText:{includeFontPadding:!1}});export{InlineSelect};export default InlineSelect;

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

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

package/lib/module/components/KeyboardToolbar/KeyboardToolbar.js

@@ -1 +1 @@
-"use strict";import{Pressable,StyleSheet,View}from"react-native";import{KeyboardController,KeyboardStickyView,useKeyboardState}from"react-native-keyboard-controller";import{useOptionalFormContext}from"../../form/FormContext.js";import{useTheme}from"../../theme/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NavButton=({label:e,accessibilityLabel:o,onPress:t,theme:s})=>_jsx(Pressable,{onPress:t,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,style:{paddingHorizontal:s.space.sm},children:_jsx(Text,{variant:"body",weight:"semibold",size:"lg",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:o="Done",showNavigation:t=!0,onDone:s,onNext:r,onPrev:i,leading:l,style:a,testID:n}=e,c=useTheme(),b=useOptionalFormContext();if(!useKeyboardState(e=>e.isVisible))return null;const d=s??(()=>{KeyboardController.dismiss()}),y=i??b?.focusPrev??(()=>KeyboardController.setFocusTo("prev")),x=r??b?.focusNext??(()=>KeyboardController.setFocusTo("next"));return _jsx(KeyboardStickyView,{style:styles.anchor,children:_jsxs(View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.surface,borderTopColor:c.colors.border,paddingHorizontal:c.space.md},a],children:[t?_jsxs(View,{style:styles.nav,children:[_jsx(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:y,theme:c}),_jsx(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:x,theme:c})]}):_jsx(View,{}),l,_jsx(View,{style:styles.spacer}),_jsx(Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,children:_jsx(Text,{variant:"body",weight:"semibold",color:"link",children:o})})]})})},styles=StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});export{KeyboardToolbar};export default KeyboardToolbar;
+"use strict";import{Pressable,StyleSheet,View}from"react-native";import{KeyboardController,KeyboardStickyView,useKeyboardState}from"react-native-keyboard-controller";import{useOptionalFormContext}from"../../form/FormContext.js";import{useTheme}from"../../theme/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NavButton=({label:e,accessibilityLabel:o,onPress:t,theme:s})=>_jsx(Pressable,{onPress:t,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,...hitSlopMarker(8),style:{paddingHorizontal:s.space.sm},children:_jsx(Text,{variant:"body",weight:"semibold",size:"lg",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:o="Done",showNavigation:t=!0,onDone:s,onNext:r,onPrev:i,leading:l,style:a,testID:n}=e,c=useTheme(),b=useOptionalFormContext();if(!useKeyboardState(e=>e.isVisible))return null;const d=s??(()=>{KeyboardController.dismiss()}),y=i??b?.focusPrev??(()=>KeyboardController.setFocusTo("prev")),x=r??b?.focusNext??(()=>KeyboardController.setFocusTo("next"));return _jsx(KeyboardStickyView,{style:styles.anchor,children:_jsxs(View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.surface,borderTopColor:c.colors.border,paddingHorizontal:c.space.md},a],children:[t?_jsxs(View,{style:styles.nav,children:[_jsx(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:y,theme:c}),_jsx(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:x,theme:c})]}):_jsx(View,{}),l,_jsx(View,{style:styles.spacer}),_jsx(Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,...hitSlopMarker(8),children:_jsx(Text,{variant:"body",weight:"semibold",color:"link",children:o})})]})})},styles=StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});export{KeyboardToolbar};export default KeyboardToolbar;

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:s,onAfterClose:o,onOpenChange:i,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:b,descriptionOf:f,iconOf:x,isSelected:y,onSelect:S,multi:T=!1,searchable:j=!1,searchSelectionColor:w,accessibilityLabel:C,optionStyle:R,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,v=useTheme(),z=usePresenceMotion(),[M,D]=useModalInsets(),A=useMemo(()=>buildStyles(v),[v]),[L,P]=useState(""),H=Dimensions.get("window").height,O=Math.round(.7*H),[E,W]=useState(t),B=useRef(createAnimatedValue(0)).current,F=useRef(createAnimatedValue(O)).current,N=useRef(createAnimatedValue(0)).current,G=useMemo(()=>z.reduced?N:Animated.add(F,N),[z.reduced,F,N]),$=useMemo(()=>z.reduced?F.interpolate({inputRange:[0,O],outputRange:[1,0],extrapolate:"clamp"}):1,[z.reduced,F,O]),{handleGesture:J,opacity:K}=useDragToDismiss({drag:N,travel:O,onDismiss:s}),U=useMemo(()=>Animated.multiply($,K),[$,K]),Y=useMemo(()=>{const e=v.colors.scrim;return B.interpolate({inputRange:[0,1],outputRange:[transparentOf(e),e]})},[B,v.colors.scrim]);useEffect(()=>{t&&W(!0)},[t]);const Z=useRef(i);Z.current=i;const q=useRef(!1);useEffect(()=>{q.current!==t&&(q.current=t,Z.current?.(t))},[t]);const Q=useRef(o);Q.current=o;const X=useRef(E);useEffect(()=>{X.current&&!E&&"ios"!==Platform.OS&&Q.current?.(),X.current=E},[E]),useEffect(()=>{if(!E)return;t&&(setNativeValue(N,0),setNativeValue(K,1));const e=t?Animated.parallel([Animated.timing(B,{toValue:1,duration:z.duration("default"),easing:Easing.bezier(...v.motion.ease["in-out"]),useNativeDriver:!1}),z.reduced?Animated.timing(F,{toValue:0,duration:z.duration("default"),easing:Easing.bezier(...v.motion.ease["in-out"]),useNativeDriver:!0}):Animated.spring(F,{toValue:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(B,{toValue:0,duration:z.duration("default"),easing:Easing.bezier(...v.motion.ease["in-out"]),useNativeDriver:!1}),Animated.timing(F,{toValue:O,duration:z.duration("fast"),easing:Easing.bezier(...v.motion.ease.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,E,B,F,N,K,O,z,v.motion.ease["in-out"],v.motion.ease.accelerate,v.motion.spring.snappy]);const ee=useMemo(()=>Gesture.Native(),[]),[te,se]=useState(0),oe=useKeyboardState(e=>e.height),ie=E?Math.max(0,Math.round(oe)):0,re=Math.max(M.top,StatusBar.currentHeight??0)+v.space.sm,ne=ie>0,ae=ne?Math.max(0,Math.min(O,(te>0?te:H)-ie-re)):O;useEffect(()=>{t||P("")},[t]);const le=useMemo(()=>{const e=j?L.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(f(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,s)=>{const o=e.options.filter(matches);if(0!==o.length){t.push({kind:"header",title:e.title});for(const e of o)t.push({kind:"option",option:e,section:s})}}),t},[j,L,n,a,m,f]),ce=useCallback(()=>{s()},[s]),de=useRef(null),ue=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=le.length-1;e>=0;e-=1)if("header"===le[e].kind){t=e+1;break}for(let s=t;s<le.length;s+=1){const t=le[s];if("option"!==t.kind)continue;const o=m(t.option).trim().charAt(0).toUpperCase(),i=/^[A-Z]$/.test(o)?o:"#";e.has(i)||e.set(i,s)}return e},[d,le,a,m]),pe=d&&ue.size>0&&0===L.trim().length,me=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ue.has("#")?["#"]:[]],[ue]),he=useCallback(e=>{const t=ue.get(e);void 0!==t&&de.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ue]),ge=useRef(null),be=useCallback(()=>{null!==ge.current&&(clearTimeout(ge.current),ge.current=null)},[]),fe=useCallback(e=>{de.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),be(),ge.current=setTimeout(()=>{ge.current=null,de.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[be]);useEffect(()=>(E||be(),be),[E,be]);return _jsx(Modal,{visible:E,transparent:!0,animationType:"none",onRequestClose:ce,onDismiss:()=>Q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsx(ModalSafeArea,{onInsets:D,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,onLayout:e=>se(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ce,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:C??r??"Options",style:[A.sheet,{maxHeight:ae,bottom:ie,paddingBottom:ne?v.space.lg:M.bottom+v.space.lg,backgroundColor:v.colors.surface,borderTopLeftRadius:v.radius.xl,borderTopRightRadius:v.radius.xl,...smoothCorners,opacity:U,transform:[{translateY:G}],...v.shadow.modal}],children:[_jsx(GestureDetector,{gesture:J,children:_jsxs(View,{children:[_jsx(View,{style:A.sheetHandleRow,children:_jsx(View,{style:[A.sheetHandle,{backgroundColor:v.colors.border}]})}),r?_jsx(Text,{style:[A.sheetTitle,{color:v.colors["text-body"],fontSize:v.text.lg.size,fontWeight:v.weight.semibold,paddingHorizontal:v.space.lg,marginBottom:v.space.sm}],children:r}):null]})}),j?_jsx(View,{style:[A.searchWrap,{marginHorizontal:v.space.lg,marginBottom:v.space.sm}],children:_jsxs(View,{style:[A.searchBox,{backgroundColor:v.colors["bg-subtle"],borderColor:v.colors.border,borderRadius:v.radius.md,...smoothCorners,paddingHorizontal:v.space.md,gap:v.space.sm}],children:[(v.settings.icons.search??defaultIcons.search)({size:18,color:v.colors["text-subtle"]}),_jsx(TextInput,{value:L,onChangeText:P,placeholder:u,placeholderTextColor:v.colors["text-subtle"],selectionColor:w??v.colors["focus-ring"],accessibilityLabel:"Search options",style:[A.searchInput,{color:v.colors["text-body"],fontSize:v.text.base.size,paddingVertical:v.space.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>P(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(v.settings.icons.close??defaultIcons.close)({size:18,color:v.colors["text-muted"]})}):null]})}):null,_jsxs(View,{style:[A.listWrap,pe?A.listRow:null],children:[_jsx(GestureDetector,{gesture:ee,children:_jsx(FlatList,{ref:de,data:le,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[A.sectionHeader,{paddingHorizontal:v.space.lg,paddingTop:v.space.md}],children:l?l(e.title):_jsx(Text,{style:[A.sectionTitle,{color:v.colors["text-subtle"],fontSize:v.text.xs.size,fontWeight:v.weight.semibold}],children:e.title.toUpperCase()})});const t=e.option,s=m(t),o=h(t),i=f(t),r=x(t),n=y(o),a=g(t),d=b?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:v.colors["surface-pressed"],borderless:!1},accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[A.optionRow,{backgroundColor:n?v.colors["surface-selected"]:e?v.colors["surface-pressed"]:"transparent",opacity:a?.5:1,paddingHorizontal:v.space.lg,paddingVertical:v.space.md},R,n?_:null],children:[c?_jsx(View,{style:A.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:A.optionIcon,children:r}):null,_jsxs(View,{style:A.optionTextWrap,children:[_jsx(Text,{style:[A.optionLabel,{color:d?v.colors["danger-text"]:n?v.colors.primary:v.colors["text-body"],fontSize:v.text.base.size,fontWeight:n?v.weight.semibold:v.weight.medium},V,n?k:null],children:s}),i?_jsx(Text,{style:[A.optionDescription,{color:v.colors["text-subtle"],fontSize:v.text.sm.size}],numberOfLines:2,children:i}):null]})]}),T?_jsx(View,{style:[A.checkbox,{borderColor:n?v.colors.primary:v.colors.border,backgroundColor:n?v.colors.primary:"transparent"}],children:n?_jsx(View,{style:A.checkboxTick}):null}):n?"icon"===v.settings.components["option-sheet"]?.selectedMarker?_jsx(View,{style:A.singleSelectedIcon,children:(v.settings.icons.selectedTick??defaultIcons.selectedTick)({size:20,color:v.colors.primary})}):_jsx(View,{style:[A.singleSelectedDot,{backgroundColor:v.colors.primary}]}):null]})},onScrollToIndexFailed:fe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!pe,style:pe?A.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[A.empty,{color:v.colors["text-subtle"],fontSize:v.text.sm.size,paddingVertical:v.space.xl}],children:p})})}),pe?_jsx(View,{style:[A.rail,{paddingRight:v.space.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:me.map(e=>{const t=ue.has(e);return _jsx(Pressable,{onPress:()=>he(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:A.railLetter,children:_jsx(Text,{style:[A.railLetterText,{color:t?v.colors.primary:v.colors["text-subtle"],fontSize:v.text.xs.size,fontWeight:v.weight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),T?_jsx(View,{style:[A.sheetFooter,{borderTopColor:v.colors["border-subtle"],paddingHorizontal:v.space.lg,paddingVertical:v.space.md}],children:_jsx(Pressable,{onPress:ce,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[A.doneButton,{backgroundColor:e?v.colors["primary-pressed"]:v.colors.primary,borderRadius:v.radius.md,...smoothCorners,paddingVertical:v.space.sm,paddingHorizontal:v.space.lg}],children:_jsx(Text,{style:{color:v.colors["on-primary"],fontSize:v.text.base.size,fontWeight:v.weight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:e.space.lg,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:e.space.sm,paddingBottom:e.space.sm},sheetHandle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:e.space.xs},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:e.space.xs},railLetter:{paddingHorizontal:e.space.xs,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:e.space.md},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:e.space.xxs},checkbox:{width:22,height:22,borderRadius:e.radius.sm,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:e.space.md},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors["on-primary"],transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:e.radius.pill,...smoothCorners,marginLeft:e.space.md},singleSelectedIcon:{marginLeft:e.space.md},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:s,onAfterClose:o,onOpenChange:i,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:b,descriptionOf:f,iconOf:x,isSelected:y,onSelect:S,multi:j=!1,searchable:T=!1,searchSelectionColor:w,accessibilityLabel:C,optionStyle:R,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,M=useTheme(),v=usePresenceMotion(),[z,D]=useModalInsets(),A=useMemo(()=>buildStyles(M),[M]),[L,P]=useState(""),H=Dimensions.get("window").height,O=Math.round(.7*H),[E,W]=useState(t),B=useRef(createAnimatedValue(0)).current,F=useRef(createAnimatedValue(O)).current,N=useRef(createAnimatedValue(0)).current,G=useMemo(()=>v.reduced?N:Animated.add(F,N),[v.reduced,F,N]),$=useMemo(()=>v.reduced?F.interpolate({inputRange:[0,O],outputRange:[1,0],extrapolate:"clamp"}):1,[v.reduced,F,O]),{handleGesture:J,opacity:K}=useDragToDismiss({drag:N,travel:O,onDismiss:s}),U=useMemo(()=>Animated.multiply($,K),[$,K]),Y=useMemo(()=>{const e=M.colors.scrim;return B.interpolate({inputRange:[0,1],outputRange:[transparentOf(e),e]})},[B,M.colors.scrim]);useEffect(()=>{t&&W(!0)},[t]);const Z=useRef(i);Z.current=i;const q=useRef(!1);useEffect(()=>{q.current!==t&&(q.current=t,Z.current?.(t))},[t]);const Q=useRef(o);Q.current=o;const X=useRef(E);useEffect(()=>{X.current&&!E&&"ios"!==Platform.OS&&Q.current?.(),X.current=E},[E]),useEffect(()=>{if(!E)return;t&&(setNativeValue(N,0),setNativeValue(K,1));const e=t?Animated.parallel([Animated.timing(B,{toValue:1,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),v.reduced?Animated.timing(F,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!0}):Animated.spring(F,{toValue:0,damping:M.motion.spring.snappy.damping,stiffness:M.motion.spring.snappy.stiffness,mass:M.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(B,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),Animated.timing(F,{toValue:O,duration:v.duration("fast"),easing:Easing.bezier(...M.motion.ease.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,E,B,F,N,K,O,v,M.motion.ease["in-out"],M.motion.ease.accelerate,M.motion.spring.snappy]);const ee=useMemo(()=>Gesture.Native(),[]),[te,se]=useState(0),oe=useKeyboardState(e=>e.height),ie=E?Math.max(0,Math.round(oe)):0,re=Math.max(z.top,StatusBar.currentHeight??0)+M.space.sm,ne=ie>0,ae=ne?Math.max(0,Math.min(O,(te>0?te:H)-ie-re)):O;useEffect(()=>{t||P("")},[t]);const le=useMemo(()=>{const e=T?L.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(f(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,s)=>{const o=e.options.filter(matches);if(0!==o.length){t.push({kind:"header",title:e.title});for(const e of o)t.push({kind:"option",option:e,section:s})}}),t},[T,L,n,a,m,f]),ce=useCallback(()=>{s()},[s]),de=useRef(null),ue=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=le.length-1;e>=0;e-=1)if("header"===le[e].kind){t=e+1;break}for(let s=t;s<le.length;s+=1){const t=le[s];if("option"!==t.kind)continue;const o=m(t.option).trim().charAt(0).toUpperCase(),i=/^[A-Z]$/.test(o)?o:"#";e.has(i)||e.set(i,s)}return e},[d,le,a,m]),pe=d&&ue.size>0&&0===L.trim().length,me=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ue.has("#")?["#"]:[]],[ue]),he=useCallback(e=>{const t=ue.get(e);void 0!==t&&de.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ue]),ge=useRef(null),be=useCallback(()=>{null!==ge.current&&(clearTimeout(ge.current),ge.current=null)},[]),fe=useCallback(e=>{de.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),be(),ge.current=setTimeout(()=>{ge.current=null,de.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[be]);useEffect(()=>(E||be(),be),[E,be]);return _jsx(Modal,{visible:E,transparent:!0,animationType:"none",onRequestClose:ce,onDismiss:()=>Q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsx(ModalSafeArea,{onInsets:D,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,onLayout:e=>se(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ce,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:C??r??"Options",style:[A.sheet,{maxHeight:ae,bottom:ie,paddingBottom:ne?M.space.lg:z.bottom+M.space.lg,backgroundColor:M.colors.surface,borderTopLeftRadius:M.radius.xl,borderTopRightRadius:M.radius.xl,...smoothCorners,opacity:U,transform:[{translateY:G}],...M.shadow.modal}],children:[_jsx(GestureDetector,{gesture:J,children:_jsxs(View,{children:[_jsx(View,{style:A.sheetHandleRow,children:_jsx(View,{style:[A.sheetHandle,{backgroundColor:M.colors.border}]})}),r?_jsx(Text,{style:[A.sheetTitle,{color:M.colors["text-body"],fontSize:M.text.lg.size,fontWeight:M.weight.semibold,paddingHorizontal:M.space.lg,marginBottom:M.space.sm}],children:r}):null]})}),T?_jsx(View,{style:[A.searchWrap,{marginHorizontal:M.space.lg,marginBottom:M.space.sm}],children:_jsxs(View,{style:[A.searchBox,{backgroundColor:M.colors["bg-subtle"],borderColor:M.colors.border,borderRadius:M.radius.md,...smoothCorners,paddingHorizontal:M.space.md,gap:M.space.sm}],children:[(M.settings.icons.search??defaultIcons.search)({size:18,color:M.colors["text-subtle"]}),_jsx(TextInput,{value:L,onChangeText:P,placeholder:u,placeholderTextColor:M.colors["text-subtle"],selectionColor:w??M.colors["focus-ring"],accessibilityLabel:"Search options",style:[A.searchInput,{color:M.colors["text-body"],fontSize:M.text.base.size,paddingVertical:M.space.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>P(""),hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:"Clear search",children:(M.settings.icons.close??defaultIcons.close)({size:18,color:M.colors["text-muted"]})}):null]})}):null,_jsxs(View,{style:[A.listWrap,pe?A.listRow:null],children:[_jsx(GestureDetector,{gesture:ee,children:_jsx(FlatList,{ref:de,data:le,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[A.sectionHeader,{paddingHorizontal:M.space.lg,paddingTop:M.space.md}],children:l?l(e.title):_jsx(Text,{style:[A.sectionTitle,{color:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold}],children:e.title.toUpperCase()})});const t=e.option,s=m(t),o=h(t),i=f(t),r=x(t),n=y(o),a=g(t),d=b?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:M.colors["surface-pressed"],borderless:!1},accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[A.optionRow,{backgroundColor:n?M.colors["surface-selected"]:e?M.colors["surface-pressed"]:"transparent",opacity:a?.5:1,paddingHorizontal:M.space.lg,paddingVertical:M.space.md},R,n?_:null],children:[c?_jsx(View,{style:A.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:A.optionIcon,children:r}):null,_jsxs(View,{style:A.optionTextWrap,children:[_jsx(Text,{style:[A.optionLabel,{color:d?M.colors["danger-text"]:n?M.colors.primary:M.colors["text-body"],fontSize:M.text.base.size,fontWeight:n?M.weight.semibold:M.weight.medium},V,n?k:null],children:s}),i?_jsx(Text,{style:[A.optionDescription,{color:M.colors["text-subtle"],fontSize:M.text.sm.size}],numberOfLines:2,children:i}):null]})]}),j?_jsx(View,{style:[A.checkbox,{borderColor:n?M.colors.primary:M.colors.border,backgroundColor:n?M.colors.primary:"transparent"}],children:n?_jsx(View,{style:A.checkboxTick}):null}):n?"icon"===M.settings.components["option-sheet"]?.selectedMarker?_jsx(View,{style:A.singleSelectedIcon,children:(M.settings.icons.selectedTick??defaultIcons.selectedTick)({size:20,color:M.colors.primary})}):_jsx(View,{style:[A.singleSelectedDot,{backgroundColor:M.colors.primary}]}):null]})},onScrollToIndexFailed:fe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!pe,style:pe?A.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[A.empty,{color:M.colors["text-subtle"],fontSize:M.text.sm.size,paddingVertical:M.space.xl}],children:p})})}),pe?_jsx(View,{style:[A.rail,{paddingRight:M.space.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:me.map(e=>{const t=ue.has(e);return _jsx(Pressable,{onPress:()=>he(e),disabled:!t,hitSlop:{left:8,right:8},...hitSlopMarker({left:8,right:8}),accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:A.railLetter,children:_jsx(Text,{style:[A.railLetterText,{color:t?M.colors.primary:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),j?_jsx(View,{style:[A.sheetFooter,{borderTopColor:M.colors["border-subtle"],paddingHorizontal:M.space.lg,paddingVertical:M.space.md}],children:_jsx(Pressable,{onPress:ce,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[A.doneButton,{backgroundColor:e?M.colors["primary-pressed"]:M.colors.primary,borderRadius:M.radius.md,...smoothCorners,paddingVertical:M.space.sm,paddingHorizontal:M.space.lg}],children:_jsx(Text,{style:{color:M.colors["on-primary"],fontSize:M.text.base.size,fontWeight:M.weight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:e.space.lg,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:e.space.sm,paddingBottom:e.space.sm},sheetHandle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:e.space.xs},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:e.space.xs},railLetter:{paddingHorizontal:e.space.xs,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:e.space.md},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:e.space.xxs},checkbox:{width:22,height:22,borderRadius:e.radius.sm,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:e.space.md},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors["on-primary"],transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:e.radius.pill,...smoothCorners,marginLeft:e.space.md},singleSelectedIcon:{marginLeft:e.space.md},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,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:C,renderCountry:N,countrySearchPlaceholder:x,showAlphabetIndex:S,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:k,disabled:M=!1,size:R="md",variant:V,borderRadius:z,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(C)return C(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[C,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=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(()=>{M||J.current?.focus()},[M]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ce]=useState(!1),Ne=useRef(!1);useEffect(()=>{ye||(Ne.current=!1)},[ye]);const xe=resolveFieldSize(Y,R),Se=resolveFieldTextStyle(Y,{disabled:M}),ve=V??Y.settings.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=z??xe.radius,Ie=Y.space.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=k&&!L&&!Pe&&j.length>0,Ae=ce||Pe,we=Boolean(L)&&"float"===O&&Ee>0,ke=useFloatingLabel({label:L,enabled:we,floated:Ae,required:k,variant:ve,sizeTokens:xe,leadingOffset:Oe,paddingLeft:Fe?Y.space.none:xe["padding-x"],color:Y.colors["field-label"],style:P}),Me=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),Ve=I&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,ze=ee(ue.iso),De=0===ue.nationalNumber.length||pe||!Number.isFinite(ze)?void 0:Ve.length+Math.max(0,ze-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const $e=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Pe&&!Be&&(ge||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Je=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Qe=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ce(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Xe=M||E,Ze=_jsx(FieldBase,{size:R,variant:ve,borderRadius:Te,topNotch:ke.topNotch,focused:ce,disabled:M,error:Ge,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?Y.space.none:void 0,leading:_jsxs(Pressable,{onPress:()=>{Xe||(Ne.current=!0,Ce(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(Me,xe.text,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:Se.color,fontSize:xe.text}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:M?Y.colors["field-icon-disabled"]:Y.colors["field-icon"],size:xe.icon,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:Ve,maxLength:De,onChangeText:Je,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ne.current&&he(!0),W?.()},editable:!M,placeholder:we&&!Ae||je?void 0:j,placeholderTextColor:Se.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors["field-caret"],keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:Se.color,fontSize:xe.text,...Se.weightStyle,paddingLeft:Fe?Y.space.none:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:Se.placeholderColor,fontSize:xe.text,weightStyle:Se.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:R,required:k,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ze,ke.node]}),_jsx(FieldMessage,{size:R,error:Ge,text:Ge?qe:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ce(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.text.lg.size),renderOption:N?(e,t)=>N(e,{selected:t.selected}):void 0,isSelected:e=>e===Me?.iso,onSelect:Qe,searchable:Q.length>8,searchPlaceholder:x,alphabetIndex:S??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:e.space.xxs},flag:{includeFontPadding:!1,marginRight:e.space.xs},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:e.space.none,margin:e.space.none,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;
+"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:h="All countries",hiddenCountries:g,showFlag:y=!0,renderFlag:C,renderCountry:N,countrySearchPlaceholder:x,showAlphabetIndex:S,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:j="top",labelStyle:O,placeholder:P="Phone number",helperText:_,error:A,invalidMessage:w,required:k,disabled:M=!1,size:R="md",variant:V,borderRadius:z,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(()=>g?.length?m.filter(e=>!g.includes(e.iso)):m,[m,g]),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:h,options:Q}]:void 0},[p,f,h,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(C)return C(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[C,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=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(()=>{M||J.current?.focus()},[M]),[pe,fe]=useState(!1),[he,ge]=useState(!1),[ye,Ce]=useState(!1),Ne=useRef(!1);useEffect(()=>{ye||(Ne.current=!1)},[ye]);const xe=resolveFieldSize(Y,R),Se=resolveFieldTextStyle(Y,{disabled:M}),ve=V??Y.settings.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=z??xe.radius,Ie=Y.space.md,[Ee,Le]=useState(0),je=Ee+Ie+1+Ie,Oe=ue.nationalNumber.length>0,Pe=k&&!L&&!Oe&&P.length>0,Ae=ce||Oe,we=Boolean(L)&&"float"===j&&Ee>0,ke=useFloatingLabel({label:L,enabled:we,floated:Ae,required:k,variant:ve,sizeTokens:xe,leadingOffset:je,paddingLeft:Fe?Y.space.none:xe["padding-x"],color:Y.colors["field-label"],style:O}),Me=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),Ve=I&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,ze=ee(ue.iso),De=0===ue.nationalNumber.length||pe||!Number.isFinite(ze)?void 0:Ve.length+Math.max(0,ze-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Oe||ge(!1)},[Oe]);const $e=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Oe&&!Be&&(he||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Je=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Qe=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ce(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Xe=M||E,Ze=_jsx(FieldBase,{size:R,variant:ve,borderRadius:Te,topNotch:ke.topNotch,focused:ce,disabled:M,error:Ge,filled:Oe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?Y.space.none:void 0,leading:_jsxs(Pressable,{onPress:()=>{Xe||(Ne.current=!0,Ce(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,hitSlop:6,...hitSlopMarker(6),onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(Me,xe.text,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:Se.color,fontSize:xe.text}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:M?Y.colors["field-icon-disabled"]:Y.colors["field-icon"],size:xe.icon,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:Ve,maxLength:De,onChangeText:Je,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Oe&&!Ne.current&&ge(!0),W?.()},editable:!M,placeholder:we&&!Ae||Pe?void 0:P,placeholderTextColor:Se.placeholderColor,accessibilityLabel:$??L??P,selectionColor:Y.colors["field-caret"],keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:Se.color,fontSize:xe.text,...Se.weightStyle,paddingLeft:Fe?Y.space.none:void 0}],testID:G?`${G}-input`:void 0}),Pe?_jsx(RequiredPlaceholder,{text:P,color:Se.placeholderColor,fontSize:xe.text,weightStyle:Se.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===j?_jsx(FieldLabel,{size:R,required:k,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ze,ke.node]}),_jsx(FieldMessage,{size:R,error:Ge,text:Ge?qe:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ce(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.text.lg.size),renderOption:N?(e,t)=>N(e,{selected:t.selected}):void 0,isSelected:e=>e===Me?.iso,onSelect:Qe,searchable:Q.length>8,searchPlaceholder:x,alphabetIndex:S??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:e.space.xxs},flag:{includeFontPadding:!1,marginRight:e.space.xs},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:e.space.none,margin:e.space.none,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;

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

@@ -1 +1 @@
-"use strict";import{Logger}from"@webority/mobile-core";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{spaceOf,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{fieldTextAsString,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"danger":return e.colors.danger;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:i,onChange:r,disabled:s=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:b,circleStyle:x,dotStyle:h,labelStyle:f,testID:y,...g}=e,S=useTheme(),w=useMemo(()=>buildStyles(S),[S]),C=useRadioGroup();__DEV__&&void 0===o&&Logger.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const R=C?C.selectedValue===o:!!i,j=C&&C.disabled||s,T=toneColor(S,d),D=spaceOf(S,S.components.radio["label-gap"]),_=p??fieldTextAsString(a),v=!0===C?.error||!0===c||hasFieldText(c);return _jsxs(Pressable,{ref:t,onPress:e=>{if(j)return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),C?C.onChange(o):r?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:_,accessibilityHint:g.accessibilityHint??fieldTextAsString(l),accessibilityState:{checked:R,disabled:j},"aria-checked":R,"aria-disabled":j,testID:y,hitSlop:6,...g,style:({pressed:e})=>[w.row,hasChoiceDetail(l,c)?w.rowTop:null,{opacity:j?.55:e?.85:1},m,b],children:[_jsx(RadioDot,{selected:R,color:T,disabled:j&&!R,size:n,style:[!v||R||j?null:{borderColor:S.colors["field-border-error"]},x],dotStyle:h}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:j,labelLines:2,style:{marginLeft:D},labelStyle:f})]})});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{Logger}from"@webority/mobile-core";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{spaceOf,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{fieldTextAsString,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"danger":return e.colors.danger;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:i,onChange:r,disabled:s=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:m,style:u,containerStyle:h,circleStyle:b,dotStyle:x,labelStyle:f,testID:y,hitSlop:g,...S}=e,w=useTheme(),C=useMemo(()=>buildStyles(w),[w]),R=useRadioGroup();__DEV__&&void 0===o&&Logger.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const j=R?R.selectedValue===o:!!i,T=R&&R.disabled||s,D=toneColor(w,d),_=spaceOf(w,w.components.radio["label-gap"]),v=g??6,H=p??fieldTextAsString(a),L=!0===R?.error||!0===c||hasFieldText(c);return _jsxs(Pressable,{ref:t,onPress:e=>{if(T)return;const t=resolveHaptic(m,"selection");t&&triggerHaptic(t),R?R.onChange(o):r?.(o)},disabled:T,accessibilityRole:"radio",accessibilityLabel:H,accessibilityHint:S.accessibilityHint??fieldTextAsString(l),accessibilityState:{checked:j,disabled:T},"aria-checked":j,"aria-disabled":T,testID:y,hitSlop:v,...hitSlopMarker(v),...S,style:({pressed:e})=>[C.row,hasChoiceDetail(l,c)?C.rowTop:null,{opacity:T?.55:e?.85:1},u,h],children:[_jsx(RadioDot,{selected:j,color:D,disabled:T&&!j,size:n,style:[!L||j||T?null:{borderColor:w.colors["field-border-error"]},b],dotStyle:x}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:T,labelLines:2,style:{marginLeft:_},labelStyle:f})]})});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/Rating/Rating.js

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

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

@@ -1 +1 @@
-"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,TOOLBAR_GLYPH_MAX_SCALE=1.5;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:l,placeholder:i,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:d=!1,accessibilityLabel:c,haptic:h,style:u,toolbarStyle:b,inputStyle:p,testID:m}=e,g=useTheme(),x=useMemo(()=>buildStyles(g),[g]),y=o??"",[S,T]=useState({start:0,end:0}),[k,f]=useState(!1),[_,j]=useState(null),C=useCallback(e=>{T(e.nativeEvent.selection),j(null)},[]),I=useCallback(e=>{j(null),l?.(e)},[l]),H=useCallback(e=>{if(r)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:y,selection:normalizeSelection(S,y.length)},e);T(o.selection),j(o.selection),l?.(o.text)},[r,h,l,S,y]);return n?_jsx(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:u,testID:m}):_jsxs(View,{testID:m,style:[x.container,{borderColor:k?g.colors["focus-ring"]:g.colors.border,opacity:r?.55:1},u],children:[_jsx(View,{style:[x.toolbar,b],children:s.map(e=>_jsx(ToolbarButton,{action:e,disabled:r,onPress:H,styles:x,theme:g,testID:m?`${m}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:y,onChangeText:I,onSelectionChange:C,onFocus:()=>f(!0),onBlur:()=>f(!1),selection:_??void 0,editable:!r,autoFocus:d,multiline:!0,textAlignVertical:"top",placeholder:i,placeholderTextColor:g.colors["text-subtle"],accessibilityLabel:c,style:[x.input,{minHeight:a},p],testID:m?`${m}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:l,theme:i,testID:s})=>{const r=ACTION_META[e],n={color:t?i.colors["text-disabled"]:i.colors["text-body"]};return"bold"===e&&(n.fontWeight=i.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:s,style:({pressed:e})=>[l.button,{backgroundColor:e?i.colors["surface-pressed"]:i.colors["bg-subtle"]}],children:_jsx(Text,{maxFontSizeMultiplier:Math.min(i.settings.maxFontSizeMultiplier??1.5,1.5),style:[l.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:l})=>{const i=useTheme(),s=useMemo(()=>buildStyles(i),[i]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:l,style:[s.container,o],children:[_jsx(View,{style:s.toolbar,children:r.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[s.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.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.text.sm.size},input:{...fontFor(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.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{hitSlopMarker}from"../../utils/hitSlop.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,TOOLBAR_GLYPH_MAX_SCALE=1.5;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:i,placeholder:l,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:d=!1,accessibilityLabel:c,haptic:h,style:u,toolbarStyle:b,inputStyle:p,testID:m}=e,g=useTheme(),x=useMemo(()=>buildStyles(g),[g]),y=o??"",[S,T]=useState({start:0,end:0}),[k,f]=useState(!1),[_,j]=useState(null),C=useCallback(e=>{T(e.nativeEvent.selection),j(null)},[]),I=useCallback(e=>{j(null),i?.(e)},[i]),H=useCallback(e=>{if(r)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:y,selection:normalizeSelection(S,y.length)},e);T(o.selection),j(o.selection),i?.(o.text)},[r,h,i,S,y]);return n?_jsx(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:u,testID:m}):_jsxs(View,{testID:m,style:[x.container,{borderColor:k?g.colors["focus-ring"]:g.colors.border,opacity:r?.55:1},u],children:[_jsx(View,{style:[x.toolbar,b],children:s.map(e=>_jsx(ToolbarButton,{action:e,disabled:r,onPress:H,styles:x,theme:g,testID:m?`${m}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:y,onChangeText:I,onSelectionChange:C,onFocus:()=>f(!0),onBlur:()=>f(!1),selection:_??void 0,editable:!r,autoFocus:d,multiline:!0,textAlignVertical:"top",placeholder:l,placeholderTextColor:g.colors["text-subtle"],accessibilityLabel:c,style:[x.input,{minHeight:a},p],testID:m?`${m}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:i,theme:l,testID:s})=>{const r=ACTION_META[e],n={color:t?l.colors["text-disabled"]:l.colors["text-body"]};return"bold"===e&&(n.fontWeight=l.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,...hitSlopMarker(4),testID:s,style:({pressed:e})=>[i.button,{backgroundColor:e?l.colors["surface-pressed"]:l.colors["bg-subtle"]}],children:_jsx(Text,{maxFontSizeMultiplier:Math.min(l.settings.maxFontSizeMultiplier??1.5,1.5),style:[i.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:i})=>{const l=useTheme(),s=useMemo(()=>buildStyles(l),[l]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:i,style:[s.container,o],children:[_jsx(View,{style:s.toolbar,children:r.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[s.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.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.text.sm.size},input:{...fontFor(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.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{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{radiusOf,resolveFieldSize,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.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,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,s)=>{const{value:l,onChangeText:o,onSubmit:t,onFocus:a,onBlur:n,placeholder:i="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:b,size:p="md",variant:f,borderRadius:g,label:m,labelMode:h="top",labelStyle:S,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:L,maxSuggestions:T=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:E,style:I,inputStyle:z,accessibilityLabel:w,testID:H,...D}=e,A=useTheme(),P=f??A.settings.components["search-bar"]?.defaultVariant??A.settings.components.field?.defaultVariant??"filled",V="underline"===P,M=resolveFieldSize(A,p),O=radiusOf(A,A.components["search-bar"][p].radius),N=resolveFieldTextStyle(A,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,s),[s]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(A),[A]),K="string"==typeof l?l:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),n?.(e)},[n]),[Y,Z]=useState(K),ee=useDebounce(Y,b??0);useEffect(()=>{void 0!==b&&K!==Y&&Z(K)},[K,b]);const se=useRef(K);useEffect(()=>{void 0!==b&&ee!==se.current&&(se.current=ee,o(ee))},[ee,b,o]);const le=useCallback(e=>{void 0===b?o(e):Z(e)},[b,o]),oe=useCallback(()=>{const e=resolveHaptic(E,"selection");e&&triggerHaptic(e),void 0!==b&&(Z(""),se.current=""),o(""),u?.()},[E,b,o,u]),te=useCallback(()=>{t?.(void 0!==b?Y:K)},[t,b,Y,K]),ae=void 0!==b?Y:K,ne=ae.length>0,[ie,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const s=v?.find(s=>s.value===e)?.label;s&&announce(`Searching ${s}`)},[v,re]),[ue,de]=useState(!1),be=useRef(null),pe=useCallback(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),fe=useCallback(()=>{pe(),de(!0)},[pe]),ge=useCallback(()=>{pe(),be.current=setTimeout(()=>de(!1),50)},[pe]);useEffect(()=>pe,[pe]);const me=!c&&(G||ue),he=useMemo(()=>(R??[]).slice(0,j),[R,j]),Se=useMemo(()=>(L??[]).slice(0,T).map(normalizeSuggestion),[L,T]),ve=me&&!ne&&he.length>0,xe=me&&ne&&Se.length>0,Ce=xe?Se.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(E,"selection");e&&triggerHaptic(e)},[E]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),Le={size:M.icon,color:c?A.colors["text-disabled"]:A.colors["text-subtle"],disabled:c},Te=d?renderSlotIcon(d,Le):(A.settings.icons.search??defaultIcons.search)(Le),Be=Boolean(m)&&"float"===h,Ee=useFloatingLabel({label:m,enabled:Be,floated:G||ne,variant:P,sizeTokens:M,leadingOffset:M.icon+A.space.md,trailingOffset:ne?M.icon+A.space.md:0,paddingLeft:V?A.space.none:M["padding-x"],color:A.colors["field-label"],style:S}),Ie=ne&&!c?_jsx(Pressable,{onPress:oe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(A.settings.icons.close??defaultIcons.close)({size:M.icon,color:A.colors["text-muted"]})}):null;return _jsxs(View,{style:I,testID:H,children:[m&&!Be?_jsx(FieldLabel,{size:p,style:S,children:m}):null,_jsx(View,{style:q.root,children:_jsxs(View,{style:q.fieldWrap,children:[_jsx(FieldBase,{size:p,variant:P,focused:G,disabled:c,filled:ne,minHeight:M["min-height"],paddingHorizontal:V?A.space.none:M["padding-x"],borderRadius:g??O,leading:Te,trailing:Ie,topNotch:Ee.topNotch,onPress:$,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:w??i,children:_jsx(TextInput,{ref:U,style:[q.input,{fontSize:M.text,color:N.color,...N.weightStyle},z],value:ae,onChangeText:le,onSubmitEditing:te,onFocus:Q,onBlur:X,placeholder:!Be||G||ne?i:void 0,placeholderTextColor:N.placeholderColor,autoFocus:r,editable:!c,returnKeyType:"search",selectionColor:resolveVariantColors(A,P).borderFocusedRepresentative,accessibilityLabel:w??i,accessibilityState:{disabled:c},"aria-disabled":c,...D})}),Ee.node]})}),v&&v.length>0?_jsx(SearchScopeBar,{scopes:v,scope:ie||(v[0]?.value??""),disabled:c,haptic:E,onChange:ce}):null,ve?_jsx(SearchRecents,{recents:he,title:y,onSelect:ye,onRemove:k?Fe:void 0,onClear:_?ke:void 0,onHold:fe,onRelease:ge}):null,xe?_jsx(SearchSuggestions,{suggestions:Se,query:ae,onSelect:je,onHold:fe,onRelease:ge}):null]})});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:e.space.none,margin:e.space.none,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{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{radiusOf,resolveFieldSize,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,s)=>{const{value:l,onChangeText:o,onSubmit:t,onFocus:a,onBlur:n,placeholder:i="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:p,size:b="md",variant:f,borderRadius:m,label:g,labelMode:h="top",labelStyle:S,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:L,maxSuggestions:T=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:E,style:I,inputStyle:z,accessibilityLabel:w,testID:H,...D}=e,M=useTheme(),A=f??M.settings.components["search-bar"]?.defaultVariant??M.settings.components.field?.defaultVariant??"filled",P="underline"===A,V=resolveFieldSize(M,b),O=radiusOf(M,M.components["search-bar"][b].radius),N=resolveFieldTextStyle(M,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,s),[s]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(M),[M]),K="string"==typeof l?l:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),n?.(e)},[n]),[Y,Z]=useState(K),ee=useDebounce(Y,p??0);useEffect(()=>{void 0!==p&&K!==Y&&Z(K)},[K,p]);const se=useRef(K);useEffect(()=>{void 0!==p&&ee!==se.current&&(se.current=ee,o(ee))},[ee,p,o]);const le=useCallback(e=>{void 0===p?o(e):Z(e)},[p,o]),oe=useCallback(()=>{const e=resolveHaptic(E,"selection");e&&triggerHaptic(e),void 0!==p&&(Z(""),se.current=""),o(""),u?.()},[E,p,o,u]),te=useCallback(()=>{t?.(void 0!==p?Y:K)},[t,p,Y,K]),ae=void 0!==p?Y:K,ne=ae.length>0,[ie,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const s=v?.find(s=>s.value===e)?.label;s&&announce(`Searching ${s}`)},[v,re]),[ue,de]=useState(!1),pe=useRef(null),be=useCallback(()=>{pe.current&&(clearTimeout(pe.current),pe.current=null)},[]),fe=useCallback(()=>{be(),de(!0)},[be]),me=useCallback(()=>{be(),pe.current=setTimeout(()=>de(!1),50)},[be]);useEffect(()=>be,[be]);const ge=!c&&(G||ue),he=useMemo(()=>(R??[]).slice(0,j),[R,j]),Se=useMemo(()=>(L??[]).slice(0,T).map(normalizeSuggestion),[L,T]),ve=ge&&!ne&&he.length>0,xe=ge&&ne&&Se.length>0,Ce=xe?Se.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(E,"selection");e&&triggerHaptic(e)},[E]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),Le={size:V.icon,color:c?M.colors["text-disabled"]:M.colors["text-subtle"],disabled:c},Te=d?renderSlotIcon(d,Le):(M.settings.icons.search??defaultIcons.search)(Le),Be=Boolean(g)&&"float"===h,Ee=useFloatingLabel({label:g,enabled:Be,floated:G||ne,variant:A,sizeTokens:V,leadingOffset:V.icon+M.space.md,trailingOffset:ne?V.icon+M.space.md:0,paddingLeft:P?M.space.none:V["padding-x"],color:M.colors["field-label"],style:S}),Ie=ne&&!c?_jsx(Pressable,{onPress:oe,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:"Clear search",children:(M.settings.icons.close??defaultIcons.close)({size:V.icon,color:M.colors["text-muted"]})}):null;return _jsxs(View,{style:I,testID:H,children:[g&&!Be?_jsx(FieldLabel,{size:b,style:S,children:g}):null,_jsx(View,{style:q.root,children:_jsxs(View,{style:q.fieldWrap,children:[_jsx(FieldBase,{size:b,variant:A,focused:G,disabled:c,filled:ne,minHeight:V["min-height"],paddingHorizontal:P?M.space.none:V["padding-x"],borderRadius:m??O,leading:Te,trailing:Ie,topNotch:Ee.topNotch,onPress:$,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:w??i,children:_jsx(TextInput,{ref:U,style:[q.input,{fontSize:V.text,color:N.color,...N.weightStyle},z],value:ae,onChangeText:le,onSubmitEditing:te,onFocus:Q,onBlur:X,placeholder:!Be||G||ne?i:void 0,placeholderTextColor:N.placeholderColor,autoFocus:r,editable:!c,returnKeyType:"search",selectionColor:resolveVariantColors(M,A).borderFocusedRepresentative,accessibilityLabel:w??i,accessibilityState:{disabled:c},"aria-disabled":c,...D})}),Ee.node]})}),v&&v.length>0?_jsx(SearchScopeBar,{scopes:v,scope:ie||(v[0]?.value??""),disabled:c,haptic:E,onChange:ce}):null,ve?_jsx(SearchRecents,{recents:he,title:y,onSelect:ye,onRemove:k?Fe:void 0,onClear:_?ke:void 0,onHold:fe,onRelease:me}):null,xe?_jsx(SearchSuggestions,{suggestions:Se,query:ae,onSelect:je,onHold:fe,onRelease:me}):null]})});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:e.space.none,margin:e.space.none,includeFontPadding:!1}});export{SearchBar};export default SearchBar;

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

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

package/lib/module/components/Stepper/Stepper.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.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 CIRCLE_SIZE=24,SEGMENT_HEIGHT=4,PULSE_SIZE=32,PULSE_DURATION=1100,toneColorFor=(e,t)=>"success"===t?e.colors.success:e.colors.primary,toneOnColorFor=(e,t)=>"success"===t?e.colors["on-success"]:e.colors["on-primary"],StepCircle=({index:e,step:t,status:i,toneColor:s,upcomingColor:o,upcomingFillColor:l,textOnColor:r,upcomingTextColor:n,interactive:a,canPress:c,totalSteps:d,onPress:u,pulseEnabled:p,circleStyles:h,circleSlotStyle:m})=>{const y="active"===i,x=useTheme(),g=useRef(createAnimatedValue(1)).current,b=useRef(createAnimatedValue(.5)).current;useEffect(()=>{if(!y||!p)return g.setValue(1),void b.setValue(0);const e=Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(g,{toValue:1.4,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(g,{toValue:1,duration:0,useNativeDriver:!0})]),Animated.sequence([Animated.timing(b,{toValue:0,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(b,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[y,g,b,p]);const S="upcoming"===i?l:s,f="upcoming"===i?o:s,w="upcoming"===i?n:r,C="complete"===i,v=`Step ${e+1} of ${d}, ${t.label}, ${i}`,j=_jsxs(View,{style:h.relative,children:[y&&p?_jsx(Animated.View,{pointerEvents:"none",style:[h.pulse,{width:32,height:32,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:s,opacity:b,transform:[{scale:g}]}]}):null,_jsx(View,{style:[h.circle,{width:24,height:24,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:S,borderColor:f},m],children:t.icon?t.icon:_jsx(Text,C?{style:[h.glyph,{color:w}],children:"✓"}:{style:[h.glyph,{color:w}],children:e+1})})]});return a?_jsx(Pressable,{onPress:()=>u(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:v,accessibilityState:{selected:y,disabled:!c},"aria-selected":y,"aria-disabled":!c,hitSlop:8,children:j}):_jsx(View,{accessibilityRole:"text",accessibilityLabel:v,accessibilityState:{selected:y},"aria-selected":y,children:j})},buildCircleStyles=e=>StyleSheet.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{fontSize:e.text.sm.size,fontWeight:"600",includeFontPadding:!1}}),Stepper=forwardRef((e,t)=>{const{steps:i,activeStep:s,defaultActiveStep:o=0,pressMode:l="none",onStepPress:r,onActiveStepChange:n,variant:a="horizontal",tone:c="primary",formatCaption:d,showCaption:u=!0,loading:p=!1,accessibilityLabel:h,style:m,containerStyle:y,circleStyle:x,labelStyle:g,connectorStyle:b,haptic:S,testID:f}=e,w=useTheme(),C=w.settings.components.stepper?.pulseAnimation??!1,v=resolveHaptic(S,"selection"),j=useMemo(()=>buildStyles(w),[w]),_=useMemo(()=>buildCircleStyles(w),[w]),V=toneColorFor(w,c),k=w.colors.border,R=w.colors.bg,I=w.colors["text-muted"],A=toneOnColorFor(w,c),E=i.length,L="none"!==l,T=void 0!==s,[$,D]=useState(o),P=T?s:$,F=null==P||P<0?null:P,z=i.map((e,t)=>(e=>null===F?"upcoming":e<F?"complete":e===F?"active":"upcoming")(t)),B=z.filter(e=>"upcoming"!==e).length,O=z.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===l?"complete"===e:L,handleStepPress=e=>{if(!canPressStatus(z[e]))return;v&&triggerHaptic(v),r?.(e);const t="select"===l&&e===F?null:e;T||D(t),n?.(t)},N=useRef(createAnimatedValue(B)).current,M=useRef(B);useEffect(()=>{const e=M.current;if(e===B)return;M.current=B;const t=Animated.timing(N,{toValue:B,duration:w.motion.duration.default*Math.abs(B-e),easing:Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[B,N,w.motion]);const sliceOf=e=>N.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),H=E<=1?"0%":N.interpolate({inputRange:[1,E],outputRange:["0%","100%"],extrapolate:"clamp"}),U=null!==F&&F<E?F:null,G=h??(null!==U?`Progress: step ${U+1} of ${E}`:`Progress: ${O} of ${E} steps done`),[W,q]=useState(0),Z=E>0&&W>0?W/(2*E):0,J=_jsx(View,{ref:t,style:[j.container,y,m],testID:f,accessibilityRole:"progressbar",accessibilityLabel:G,accessibilityValue:{min:0,max:E,now:B},children:"segmented"===a?(()=>{const e=null!==U?i[U]:void 0,t=u?d?d(U,E,e):null!==U?`Step ${U+1} of ${E}${e?.label?` · ${e.label}`:""}`:`${O} of ${E} done`:"";return _jsxs(View,{children:[u?_jsx(Text,{style:[j.sCaption,{color:w.colors["text-muted"],fontSize:w.text.sm.size,marginBottom:w.space.sm},g],numberOfLines:1,children:t}):null,_jsx(View,{style:j.sRow,children:i.map((e,t)=>{const i=z[t],s=`Step ${t+1} of ${E}, ${e.label}, ${i}`,o=_jsx(View,{testID:f?`${f}-segment-${t}`:void 0,style:[j.sTrack,{backgroundColor:k},b],children:_jsx(Animated.View,{style:[j.sFill,{backgroundColor:V,width:sliceOf(t)}]})});if(L){const l=canPressStatus(i);return _jsx(Pressable,{style:j.sItem,onPress:()=>handleStepPress(t),disabled:!l,accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:"active"===i,disabled:!l},"aria-selected":"active"===i,"aria-disabled":!l,hitSlop:{top:12,bottom:12},children:o},e.key)}return _jsx(View,{style:j.sItem,accessibilityRole:"text",accessibilityLabel:s,accessibilityState:{selected:"active"===i},"aria-selected":"active"===i,children:o},e.key)})})]})})():"vertical"===a?_jsx(View,{style:j.vCol,children:i.map((e,t)=>{const i=z[t],s=t===E-1;return _jsxs(View,{style:j.vRow,children:[_jsxs(View,{style:j.vLeft,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),s?null:_jsxs(View,{style:[j.vConnectorContainer,b],children:[_jsx(View,{style:[j.vConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.vConnectorFill,{backgroundColor:V,height:sliceOf(t+1)}]})]})]}),_jsxs(View,{style:j.vBody,children:[_jsx(Text,{style:[j.vLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.base.size,fontWeight:w.weight.semibold},g],numberOfLines:1,children:e?.label??" "}),e.description?_jsx(Text,{style:[j.vDescription,{color:w.colors["text-muted"],fontSize:w.text.sm.size}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):_jsxs(View,{style:j.hRow,onLayout:e=>q(e.nativeEvent.layout.width),children:[_jsxs(View,{pointerEvents:"none",style:[j.hConnectorContainer,{left:Z,right:Z},b],children:[_jsx(View,{style:[j.hConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.hConnectorFill,{backgroundColor:V,width:H}]})]}),i.map((e,t)=>{const i=z[t];return _jsxs(View,{style:j.hStepItem,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),_jsx(Text,{style:[j.hLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.xs.size},g],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return p?_jsx(StepperSkeleton,{...e}):J});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:i=!0,containerStyle:s,style:o,testID:l})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]),a=useMemo(()=>buildSkeletonStyles(r),[r]),c=e.length||3;return"segmented"===t?_jsxs(View,{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:r.space.sm}}):null,_jsx(View,{style:n.sRow,children:Array.from({length:c}).map((e,t)=>_jsx(View,{style:n.sItem,children:_jsx(Skeleton,{width:"100%",height:4,radius:"pill"})},`sk-step-${t}`))})]}):_jsx(View,"vertical"===t?{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsx(View,{style:a.vCol,children:Array.from({length:c}).map((e,t)=>{const i=t===c-1;return _jsxs(View,{style:a.vRow,children:[_jsxs(View,{style:[a.vLeft,{width:32}],children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),i?null:_jsx(Skeleton,{width:2,height:36})]}),_jsxs(View,{style:a.vBody,children:[_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:r.space.xs}}),_jsx(Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsxs(View,{style:n.hRow,children:[_jsx(View,{pointerEvents:"none",style:[n.hConnectorContainer,{left:50/c+"%",right:50/c+"%"}],children:_jsx(Skeleton,{width:"100%",height:2,radius:"pill"})}),Array.from({length:c}).map((e,t)=>_jsxs(View,{style:n.hStepItem,children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),_jsx(Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:r.space.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",Stepper.Skeleton=StepperSkeleton;const buildSkeletonStyles=e=>StyleSheet.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:e.space.md,paddingBottom:e.space.lg}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},hRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",position:"relative"},hConnectorContainer:{position:"absolute",top:11,height:2,flexDirection:"row",alignItems:"center"},hConnectorTrack:{position:"absolute",left:0,right:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hStepItem:{alignItems:"center",flex:1},hLabel:{marginTop:e.space.xs,textAlign:"center"},vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center",alignSelf:"stretch",width:32},vConnectorContainer:{flex:1,width:2,minHeight:32,position:"relative",alignSelf:"center"},vConnectorTrack:{position:"absolute",top:0,bottom:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vBody:{flex:1,paddingLeft:e.space.sm,paddingBottom:e.space.md},vLabel:{marginBottom:e.space.xxs},vDescription:{},sCaption:{includeFontPadding:!1},sRow:{flexDirection:"row",columnGap:e.space.xs},sItem:{flex:1},sTrack:{height:4,borderRadius:e.radius.pill,overflow:"hidden"},sFill:{height:4,borderRadius:e.radius.pill}});export{Stepper};export default Stepper;
+"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const CIRCLE_SIZE=24,SEGMENT_HEIGHT=4,PULSE_SIZE=32,PULSE_DURATION=1100,toneColorFor=(e,t)=>"success"===t?e.colors.success:e.colors.primary,toneOnColorFor=(e,t)=>"success"===t?e.colors["on-success"]:e.colors["on-primary"],StepCircle=({index:e,step:t,status:i,toneColor:s,upcomingColor:o,upcomingFillColor:l,textOnColor:r,upcomingTextColor:n,interactive:a,canPress:c,totalSteps:d,onPress:p,pulseEnabled:u,circleStyles:h,circleSlotStyle:m})=>{const y="active"===i,x=useTheme(),g=useRef(createAnimatedValue(1)).current,b=useRef(createAnimatedValue(.5)).current;useEffect(()=>{if(!y||!u)return g.setValue(1),void b.setValue(0);const e=Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(g,{toValue:1.4,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(g,{toValue:1,duration:0,useNativeDriver:!0})]),Animated.sequence([Animated.timing(b,{toValue:0,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(b,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[y,g,b,u]);const S="upcoming"===i?l:s,f="upcoming"===i?o:s,w="upcoming"===i?n:r,C="complete"===i,v=`Step ${e+1} of ${d}, ${t.label}, ${i}`,j=_jsxs(View,{style:h.relative,children:[y&&u?_jsx(Animated.View,{pointerEvents:"none",style:[h.pulse,{width:32,height:32,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:s,opacity:b,transform:[{scale:g}]}]}):null,_jsx(View,{style:[h.circle,{width:24,height:24,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:S,borderColor:f},m],children:t.icon?t.icon:_jsx(Text,C?{style:[h.glyph,{color:w}],children:"✓"}:{style:[h.glyph,{color:w}],children:e+1})})]});return a?_jsx(Pressable,{onPress:()=>p(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:v,accessibilityState:{selected:y,disabled:!c},"aria-selected":y,"aria-disabled":!c,hitSlop:8,...hitSlopMarker(8),children:j}):_jsx(View,{accessibilityRole:"text",accessibilityLabel:v,accessibilityState:{selected:y},"aria-selected":y,children:j})},buildCircleStyles=e=>StyleSheet.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{fontSize:e.text.sm.size,fontWeight:"600",includeFontPadding:!1}}),Stepper=forwardRef((e,t)=>{const{steps:i,activeStep:s,defaultActiveStep:o=0,pressMode:l="none",onStepPress:r,onActiveStepChange:n,variant:a="horizontal",tone:c="primary",formatCaption:d,showCaption:p=!0,loading:u=!1,accessibilityLabel:h,style:m,containerStyle:y,circleStyle:x,labelStyle:g,connectorStyle:b,haptic:S,testID:f}=e,w=useTheme(),C=w.settings.components.stepper?.pulseAnimation??!1,v=resolveHaptic(S,"selection"),j=useMemo(()=>buildStyles(w),[w]),_=useMemo(()=>buildCircleStyles(w),[w]),V=toneColorFor(w,c),k=w.colors.border,R=w.colors.bg,I=w.colors["text-muted"],A=toneOnColorFor(w,c),E=i.length,L="none"!==l,T=void 0!==s,[$,D]=useState(o),P=T?s:$,F=null==P||P<0?null:P,z=i.map((e,t)=>(e=>null===F?"upcoming":e<F?"complete":e===F?"active":"upcoming")(t)),M=z.filter(e=>"upcoming"!==e).length,B=z.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===l?"complete"===e:L,handleStepPress=e=>{if(!canPressStatus(z[e]))return;v&&triggerHaptic(v),r?.(e);const t="select"===l&&e===F?null:e;T||D(t),n?.(t)},O=useRef(createAnimatedValue(M)).current,N=useRef(M);useEffect(()=>{const e=N.current;if(e===M)return;N.current=M;const t=Animated.timing(O,{toValue:M,duration:w.motion.duration.default*Math.abs(M-e),easing:Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[M,O,w.motion]);const sliceOf=e=>O.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),H=E<=1?"0%":O.interpolate({inputRange:[1,E],outputRange:["0%","100%"],extrapolate:"clamp"}),U=null!==F&&F<E?F:null,G=h??(null!==U?`Progress: step ${U+1} of ${E}`:`Progress: ${B} of ${E} steps done`),[W,q]=useState(0),Z=E>0&&W>0?W/(2*E):0,J=_jsx(View,{ref:t,style:[j.container,y,m],testID:f,accessibilityRole:"progressbar",accessibilityLabel:G,accessibilityValue:{min:0,max:E,now:M},children:"segmented"===a?(()=>{const e=null!==U?i[U]:void 0,t=p?d?d(U,E,e):null!==U?`Step ${U+1} of ${E}${e?.label?` · ${e.label}`:""}`:`${B} of ${E} done`:"";return _jsxs(View,{children:[p?_jsx(Text,{style:[j.sCaption,{color:w.colors["text-muted"],fontSize:w.text.sm.size,marginBottom:w.space.sm},g],numberOfLines:1,children:t}):null,_jsx(View,{style:j.sRow,children:i.map((e,t)=>{const i=z[t],s=`Step ${t+1} of ${E}, ${e.label}, ${i}`,o=_jsx(View,{testID:f?`${f}-segment-${t}`:void 0,style:[j.sTrack,{backgroundColor:k},b],children:_jsx(Animated.View,{style:[j.sFill,{backgroundColor:V,width:sliceOf(t)}]})});if(L){const l=canPressStatus(i);return _jsx(Pressable,{style:j.sItem,onPress:()=>handleStepPress(t),disabled:!l,accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:"active"===i,disabled:!l},"aria-selected":"active"===i,"aria-disabled":!l,hitSlop:{top:12,bottom:12},...hitSlopMarker({top:12,bottom:12}),children:o},e.key)}return _jsx(View,{style:j.sItem,accessibilityRole:"text",accessibilityLabel:s,accessibilityState:{selected:"active"===i},"aria-selected":"active"===i,children:o},e.key)})})]})})():"vertical"===a?_jsx(View,{style:j.vCol,children:i.map((e,t)=>{const i=z[t],s=t===E-1;return _jsxs(View,{style:j.vRow,children:[_jsxs(View,{style:j.vLeft,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),s?null:_jsxs(View,{style:[j.vConnectorContainer,b],children:[_jsx(View,{style:[j.vConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.vConnectorFill,{backgroundColor:V,height:sliceOf(t+1)}]})]})]}),_jsxs(View,{style:j.vBody,children:[_jsx(Text,{style:[j.vLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.base.size,fontWeight:w.weight.semibold},g],numberOfLines:1,children:e?.label??" "}),e.description?_jsx(Text,{style:[j.vDescription,{color:w.colors["text-muted"],fontSize:w.text.sm.size}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):_jsxs(View,{style:j.hRow,onLayout:e=>q(e.nativeEvent.layout.width),children:[_jsxs(View,{pointerEvents:"none",style:[j.hConnectorContainer,{left:Z,right:Z},b],children:[_jsx(View,{style:[j.hConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.hConnectorFill,{backgroundColor:V,width:H}]})]}),i.map((e,t)=>{const i=z[t];return _jsxs(View,{style:j.hStepItem,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),_jsx(Text,{style:[j.hLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.xs.size},g],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return u?_jsx(StepperSkeleton,{...e}):J});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:i=!0,containerStyle:s,style:o,testID:l})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]),a=useMemo(()=>buildSkeletonStyles(r),[r]),c=e.length||3;return"segmented"===t?_jsxs(View,{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:r.space.sm}}):null,_jsx(View,{style:n.sRow,children:Array.from({length:c}).map((e,t)=>_jsx(View,{style:n.sItem,children:_jsx(Skeleton,{width:"100%",height:4,radius:"pill"})},`sk-step-${t}`))})]}):_jsx(View,"vertical"===t?{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsx(View,{style:a.vCol,children:Array.from({length:c}).map((e,t)=>{const i=t===c-1;return _jsxs(View,{style:a.vRow,children:[_jsxs(View,{style:[a.vLeft,{width:32}],children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),i?null:_jsx(Skeleton,{width:2,height:36})]}),_jsxs(View,{style:a.vBody,children:[_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:r.space.xs}}),_jsx(Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsxs(View,{style:n.hRow,children:[_jsx(View,{pointerEvents:"none",style:[n.hConnectorContainer,{left:50/c+"%",right:50/c+"%"}],children:_jsx(Skeleton,{width:"100%",height:2,radius:"pill"})}),Array.from({length:c}).map((e,t)=>_jsxs(View,{style:n.hStepItem,children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),_jsx(Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:r.space.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",Stepper.Skeleton=StepperSkeleton;const buildSkeletonStyles=e=>StyleSheet.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:e.space.md,paddingBottom:e.space.lg}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},hRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",position:"relative"},hConnectorContainer:{position:"absolute",top:11,height:2,flexDirection:"row",alignItems:"center"},hConnectorTrack:{position:"absolute",left:0,right:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hStepItem:{alignItems:"center",flex:1},hLabel:{marginTop:e.space.xs,textAlign:"center"},vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center",alignSelf:"stretch",width:32},vConnectorContainer:{flex:1,width:2,minHeight:32,position:"relative",alignSelf:"center"},vConnectorTrack:{position:"absolute",top:0,bottom:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vBody:{flex:1,paddingLeft:e.space.sm,paddingBottom:e.space.md},vLabel:{marginBottom:e.space.xxs},vDescription:{},sCaption:{includeFontPadding:!1},sRow:{flexDirection:"row",columnGap:e.space.xs},sItem:{flex:1},sTrack:{height:4,borderRadius:e.radius.pill,overflow:"hidden"},sFill:{height:4,borderRadius:e.radius.pill}});export{Stepper};export default Stepper;