@webority/mobile-ui 0.96.0 → 0.98.0

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;

package/lib/module/components/Switch/Switch.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveSwitchSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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}},Switch=forwardRef((e,t)=>{const{value:s,defaultValue:i,onChange:r,disabled:a=!1,size:o="md",tone:n="primary",label:l,description:c,error:d,labelLines:u,layout:m="inline",accessibilityLabel:p,haptic:h="selection",bounce:f=!1,style:b,containerStyle:g,trackStyle:y,thumbStyle:w,testID:x,...S}=e,[C,j]=useControllableState({value:s,defaultValue:i??!1,onChange:r}),R=useTheme(),v=useMemo(()=>resolveSwitchSize(R,o),[R,o]),T=R.colors.thumb,A=useMemo(()=>buildStyles(R),[R]),V="dark"===R.mode?R.colors.neutral:R.colors["surface-disabled"],k=toneColor(R,n),D=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(D,{toValue:C?1:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,D,R.motion.spring.snappy]);const _=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(_,{toValue:C?1:0,duration:R.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,_,R.motion.duration.fast]);const L=v.padding,E=v["track-width"]-v["thumb-size"]-v.padding,z=D.interpolate({inputRange:[0,1],outputRange:[L,E]}),F=_.interpolate({inputRange:[0,1],outputRange:[V,k]}),H=useRef(createAnimatedValue(1)).current,P=useRef(!0);useEffect(()=>{if(!f)return;if(P.current)return void(P.current=!1);const e=Animated.sequence([Animated.spring(H,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(H,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,f,H]);const handlePress=e=>{a||(!1!==h&&triggerHaptic(h),j(!C),S.onPressOut?.(e))},I=p??fieldTextAsString(l),N=hasFieldText(l)||hasChoiceDetail(c,d),B=(!0===d||hasFieldText(d))&&!C&&!a,M="row"===m&&N,q=_jsxs(Animated.View,{style:[A.track,{width:v["track-width"],height:v["track-height"],borderRadius:R.radius.pill,...smoothCorners,backgroundColor:F},y],children:[B?_jsx(View,{pointerEvents:"none",style:[A.errorRing,{borderRadius:R.radius.pill,...smoothCorners,borderWidth:R.size.border,borderColor:R.colors["field-border-error"]}]}):null,_jsx(Animated.View,{style:[A.thumb,R.shadow.card,{backgroundColor:T,width:v["thumb-size"],height:v["thumb-size"],borderRadius:R.radius.pill,...smoothCorners,transform:[{translateX:z},{scale:H}]},w]})]});if(M)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:I,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,...S,style:({pressed:e})=>[A.row,A.spreadRow,hasChoiceDetail(c,d)?A.rowTop:null,{opacity:a?.55:e?.9:1},g,b],children:[_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.spreadText}),q]});const O=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:I,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:8,...S,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},N?null:b],children:q});return N?_jsxs(View,{style:[A.row,hasChoiceDetail(c,d)?A.rowTop:null,g,b],children:[O,_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.text})]}):g?_jsx(View,{style:g,children:O}):O});Switch.displayName="Switch";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},track:{justifyContent:"center"},thumb:{position:"absolute",top:2},errorRing:{...StyleSheet.absoluteFill},rowTop:{alignItems:"flex-start"},text:{marginLeft:e.space.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.space.md}});export{Switch};export default Switch;
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveSwitchSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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}},Switch=forwardRef((e,t)=>{const{value:i,defaultValue:s,onChange:r,disabled:a=!1,size:o="md",tone:n="primary",label:l,description:c,error:d,labelLines:u,layout:p="inline",accessibilityLabel:m,haptic:h="selection",bounce:f=!1,style:b,containerStyle:g,trackStyle:y,thumbStyle:w,testID:x,hitSlop:S,...j}=e,[C,R]=useControllableState({value:i,defaultValue:s??!1,onChange:r}),v=useTheme(),T=useMemo(()=>resolveSwitchSize(v,o),[v,o]),k=v.colors.thumb,A=useMemo(()=>buildStyles(v),[v]),V="dark"===v.mode?v.colors.neutral:v.colors["surface-disabled"],D=toneColor(v,n),_=S??8,L=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(L,{toValue:C?1:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,L,v.motion.spring.snappy]);const E=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(E,{toValue:C?1:0,duration:v.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,E,v.motion.duration.fast]);const z=T.padding,F=T["track-width"]-T["thumb-size"]-T.padding,H=L.interpolate({inputRange:[0,1],outputRange:[z,F]}),M=E.interpolate({inputRange:[0,1],outputRange:[V,D]}),P=useRef(createAnimatedValue(1)).current,I=useRef(!0);useEffect(()=>{if(!f)return;if(I.current)return void(I.current=!1);const e=Animated.sequence([Animated.spring(P,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(P,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,f,P]);const handlePress=e=>{a||(!1!==h&&triggerHaptic(h),R(!C),j.onPressOut?.(e))},N=m??fieldTextAsString(l),B=hasFieldText(l)||hasChoiceDetail(c,d),q=(!0===d||hasFieldText(d))&&!C&&!a,O="row"===p&&B,U=_jsxs(Animated.View,{style:[A.track,{width:T["track-width"],height:T["track-height"],borderRadius:v.radius.pill,...smoothCorners,backgroundColor:M},y],children:[q?_jsx(View,{pointerEvents:"none",style:[A.errorRing,{borderRadius:v.radius.pill,...smoothCorners,borderWidth:v.size.border,borderColor:v.colors["field-border-error"]}]}):null,_jsx(Animated.View,{style:[A.thumb,v.shadow.card,{backgroundColor:k,width:T["thumb-size"],height:T["thumb-size"],borderRadius:v.radius.pill,...smoothCorners,transform:[{translateX:H},{scale:P}]},w]})]});if(O)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:N,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:S,...null==S?{}:hitSlopMarker(S),...j,style:({pressed:e})=>[A.row,A.spreadRow,hasChoiceDetail(c,d)?A.rowTop:null,{opacity:a?.55:e?.9:1},g,b],children:[_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.spreadText}),U]});const W=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:N,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:_,...hitSlopMarker(_),...j,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},B?null:b],children:U});return B?_jsxs(View,{style:[A.row,hasChoiceDetail(c,d)?A.rowTop:null,g,b],children:[W,_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.text})]}):g?_jsx(View,{style:g,children:W}):W});Switch.displayName="Switch";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},track:{justifyContent:"center"},thumb:{position:"absolute",top:2},errorRing:{...StyleSheet.absoluteFill},rowTop:{alignItems:"flex-start"},text:{marginLeft:e.space.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.space.md}});export{Switch};export default Switch;

package/lib/module/components/Text/Text.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"display",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"heading",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"body",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"body",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"body",color:"secondary"},caption:{size:"xs",weight:"normal",line:"body",color:"tertiary"},label:{size:"sm",weight:"medium",line:"body",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"body",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLE_COLOR={textStrong:"text",primary:"text-body",secondary:"text-muted",tertiary:"text-subtle",inverse:"text-inverse",disabled:"text-disabled",link:"link"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0};export const resolveColor=(e,i)=>Object.hasOwn(TEXT_ROLE_COLOR,i)?e.colors[TEXT_ROLE_COLOR[i]]:Object.hasOwn(SEMANTIC,i)?e.colors[`${i}-text`]:i;const Text=forwardRef((e,i)=>{const{variant:t="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:d,children:c,...m}=e,y=useTheme(),p=Object.hasOwn(VARIANTS,t),g=y.settings.textVariants,h=!p&&g&&Object.hasOwn(g,t)?g[t]:void 0;p||h||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(g??{})]);const x=useMemo(()=>{if(h){const e="string"==typeof n?n:h.size,i="number"==typeof n?n:y.text[e].size;return{fontSize:i,lineHeight:h.lineHeight??("number"==typeof n?void 0:Math.round(i*y.leading[h.heading?"heading":"body"])),color:void 0!==o?resolveColor(y,o):h.color?y.colors[h.color]:resolveColor(y,"primary"),textAlign:l,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:h.letterSpacing?y["letter-spacing"][h.letterSpacing]:void 0,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[p?t:"body"],i="number"==typeof n?n:y.text[n??e.size].size;return{fontSize:i,lineHeight:Math.round(i*y.leading[e.line]),color:resolveColor(y,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,h,p,t,o,r,n,l,a,s]),b=p?VARIANTS[t].heading:h?.heading;return _jsx(RNText,{ref:i,style:[x,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:b?"header":m.accessibilityRole,...m,children:c})});Text.displayName="Text";export{Text};export default Text;
+"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"display",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"heading",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"body",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"body",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"body",color:"secondary"},caption:{size:"xs",weight:"normal",line:"body",color:"tertiary"},label:{size:"sm",weight:"medium",line:"body",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"body",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLE_COLOR={textStrong:"text",primary:"text-body",secondary:"text-muted",tertiary:"text-subtle",inverse:"text-inverse",disabled:"text-disabled",link:"link"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0};export const resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;const Text=forwardRef((e,t)=>{const{variant:i="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:d,children:c,...m}=e,y=useTheme(),p=Object.hasOwn(VARIANTS,i),g=y.settings.textVariants,x=!p&&g&&Object.hasOwn(g,i)?g[i]:void 0;p||x||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(g??{})]);const h=useMemo(()=>{if(x){const e="string"==typeof n?n:x.size,t="number"==typeof n?n:y.text[e].size;return{fontSize:t,lineHeight:x.lineHeight??("number"==typeof n?void 0:Math.round(t*y.leading[x.heading?"heading":"body"])),color:void 0!==o?resolveColor(y,o):x.color?y.colors[x.color]:resolveColor(y,"primary"),textAlign:l,textTransform:x.uppercase?"uppercase":void 0,letterSpacing:x.letterSpacing?y["letter-spacing"][x.letterSpacing]:void 0,fontStyle:a||x.italic?"italic":void 0,fontVariant:x.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??x.weight??"normal",x.fontFamily)}}const e=VARIANTS[p?i:"body"],t="number"==typeof n?n:y.text[n??e.size].size;return{fontSize:t,lineHeight:Math.round(t*y.leading[e.line]),color:resolveColor(y,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,x,p,i,o,r,n,l,a,s]),b=useNotationInk([h,d],y.text.base.size,y.colors["text-body"]),f=p?VARIANTS[i].heading:x?.heading,u="string"==typeof c||"number"==typeof c;return _jsx(RNText,{ref:t,style:[h,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:f?"header":m.accessibilityRole,...m,children:u?c:_jsx(NotationInkContext.Provider,{value:b,children:c})})});Text.displayName="Text";export{Text};export default Text;

package/lib/module/components/Toast/Toast.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,PanResponder,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SWIPE_DISMISS_THRESHOLD=80,SWIPE_VELOCITY_THRESHOLD=.5,STACK_OFFSET=8,STACK_SCALE_STEP=.04,DEFAULT_AUTO_DISMISS_MS=3e3,WEB_ACTION_MIN_DURATION_MS=8e3,COUNTDOWN_BAR_HEIGHT=3,ACTION_HIT_SLOP={top:10,bottom:10,left:10,right:10},DISMISS_ACTIONS=[{name:"dismiss",label:"Dismiss"}],Toast=({toast:e,index:t,onDismiss:n,shownAt:i,runtime:s})=>{const a=useTheme(),r=usePresenceMotion(),o=r.duration("fast"),l=e.variant??"default",c=e.position??"bottom",u=useMemo(()=>buildStyles(a),[a]),d=useMemo(()=>tintFor(a,l),[a,l]),m=useMemo(()=>inkFor(a,l),[a,l]),p=a.components.toast["icon-circle-size"],g=a.text[a.components.toast["icon-glyph-text"]].size,h=a.components.toast["tint-bar-width"],f=a.settings.components.toast?.defaultDurationMs??3e3,b=a.settings.components.toast?.enableSwipeDismiss??!0,x="top"===c?-120:120,v=useRef(createAnimatedValue(r.reduced?0:x)).current,A=useRef(createAnimatedValue(0)).current,S=useRef(createAnimatedValue(0)).current,y=useRef(!1),w="top"===c?8*t:8*-t,M=Math.max(1-.04*t,.9),T=useRef(createAnimatedValue(w)).current;useEffect(()=>{setNativeValue(T,w)},[w,T]);const V=useMemo(()=>Animated.add(v,T),[v,T]),_=void 0!==e.action,D=e.duration??f,R=D>0&&_&&"web"===Platform.OS?Math.max(D,8e3):D,C=R<=0||_&&!0===s?.screenReaderOn,N=!0===e.countdown&&!C,E=useRef(createAnimatedValue(1)).current,I=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),P=useRef({touch:!1,pan:!1,hover:!1}),j=useRef(()=>{}),k=useRef({id:e.id,totalMs:R,shownAt:i,runtime:s,persistent:C,animateBar:!1});k.current={id:e.id,totalMs:R,shownAt:i,runtime:s,persistent:C,animateBar:N&&!r.reduced};const O=useCallback(()=>{const e=I.current,t=k.current,n=P.current;if(!e.initialised){e.initialised=!0;const n=t.runtime?.readRemaining(t.id),i=void 0===t.shownAt?0:Date.now()-t.shownAt;e.remaining=n??(t.totalMs>0?Math.max(t.totalMs-i,0):0),t.totalMs>0&&e.remaining<t.totalMs&&setNativeValue(E,e.remaining/t.totalMs)}const i=!(t.persistent||y.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,j.current()},e.remaining),t.animateBar&&Animated.timing(E,{toValue:0,duration:e.remaining,easing:Easing.linear,useNativeDriver:!0}).start()):i||null===e.timer||(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0),E.stopAnimation())},[E]),dismiss=()=>{if(y.current)return;y.current=!0,O();const t=[Animated.timing(S,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})];r.reduced||t.push(Animated.timing(v,{toValue:x,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};j.current=dismiss,useEffect(()=>{const e=r.reduced?Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(v,{toValue:0,damping:18,stiffness:180,mass:1,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{O()},[C,O]),useEffect(()=>()=>{const e=I.current,t=k.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),E.stopAnimation(),e.initialised&&t.totalMs>0&&!y.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[E]);const L=useCallback((e,t)=>{P.current[e]=t,O()},[O]),H=useCallback(()=>L("touch",!0),[L]),F=useCallback(e=>L("touch",(e.nativeEvent.touches?.length??0)>0),[L]),z=useCallback(()=>L("hover",!0),[L]),B=useCallback(()=>L("hover",!1),[L]),G=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>L("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(A,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(S,n)},onPanResponderTerminate:()=>{if(L("pan",!1),r.reduced)return setNativeValue(A,0),void Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(A,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>80||Math.abs(i.vx)>.5){const t=i.dx>=0?1:-1;y.current=!0,L("pan",!1);const s=[Animated.timing(S,{toValue:0,duration:o,useNativeDriver:!0})];r.reduced||s.push(Animated.timing(A,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(s).start(()=>n(e.id))}else L("pan",!1),r.reduced?(setNativeValue(A,0),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(A,{toValue:0,useNativeDriver:!0}),Animated.spring(S,{toValue:1,useNativeDriver:!0})]).start()}}),[A,S,L,o,r.reduced,a.motion.duration.fast,a.motion.spring.snappy.damping,a.motion.spring.snappy.stiffness,a.motion.spring.snappy.mass,n,e.id]),W={accessibilityActions:DISMISS_ACTIONS,onAccessibilityAction:e=>{"dismiss"===e.nativeEvent.actionName&&dismiss()}},[U,$]=useState(0),K=useMemo(()=>E.interpolate({inputRange:[0,1],outputRange:[-U,0]}),[E,U]),X=e.description?`${e.message}. ${e.description}`:e.message,Y=e.action&&N?`${e.action.label}, ${Math.ceil(R/1e3)} seconds`:e.action?.label;return _jsxs(Animated.View,{...b?G.panHandlers:{},..._?{}:{accessible:!0,...W},..."web"===Platform.OS?{onPointerEnter:z,onPointerLeave:B}:{},onTouchStart:H,onTouchEnd:F,onTouchCancel:F,accessibilityLabel:X,testID:e.testID,style:[u.container,{backgroundColor:a.colors.surface,borderRadius:a.radius.lg,...smoothCorners,padding:a.space.md,...a.shadow.elevated,opacity:S,transform:[{translateY:V},{translateX:A},{scale:M}]},e.style,e.containerStyle],children:[h>0?_jsx(View,{style:[u.tintBar,{width:h,backgroundColor:d}]}):null,_jsxs(View,{style:u.row,children:[(()=>{if(e.icon)return e.icon;const t=defaultGlyph(l);return t?_jsx(View,{style:[u.iconCircle,{width:p,height:p,borderRadius:a.radius.pill,...smoothCorners,backgroundColor:d+"22"},e.iconCircleStyle],children:_jsx(Text,{style:[u.iconGlyph,{color:m,fontSize:g}],accessible:!1,children:t})}):null})(),_jsxs(View,{style:u.textBlock,children:[_jsx(Text,{style:[u.message,{color:a.colors["text-body"],fontSize:a.text.base.size,...fontFor(a,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?_jsx(Text,{style:[u.description,{color:a.colors["text-muted"],fontSize:a.text.sm.size}],numberOfLines:3,children:e.description}):null]}),e.action?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:Y,hitSlop:ACTION_HIT_SLOP,...W,onPress:()=>{e.action?.onPress(),dismiss()},style:({pressed:t})=>[u.actionBtn,{backgroundColor:t?a.colors["surface-pressed"]:"transparent"},e.actionButtonStyle],children:_jsx(Text,{style:{color:d,fontSize:a.text.sm.size,...fontFor(a,"semibold")},numberOfLines:1,children:e.action.label})}):null]}),N?_jsxs(View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",onLayout:e=>$(e.nativeEvent.layout.width),testID:"toast-countdown",style:[u.countdownTrack,{backgroundColor:d+"22"}],children:[r.reduced?_jsx(View,{style:[u.countdownFill,{backgroundColor:d}]}):null,!r.reduced&&U>0?_jsx(Animated.View,{style:[u.countdownFill,{backgroundColor:d,transform:[{translateX:K}]}]}):null]}):null]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"danger":return e.colors.danger;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors["text-body"]}},inkFor=(e,t)=>{switch(t){case"success":return e.colors["success-text"];case"danger":return e.colors["danger-text"];case"warning":return e.colors["warning-text"];case"info":return e.colors["info-text"];default:return e.colors["text-body"]}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"danger":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>StyleSheet.create({container:{overflow:"hidden",marginVertical:e.space.xs},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:e.space.sm},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:e.space.md},iconGlyph:{fontWeight:"700",lineHeight:19},textBlock:{flex:1,paddingRight:e.space.sm},message:{lineHeight:20},description:{marginTop:e.space.xxs,lineHeight:18},countdownTrack:{position:"absolute",left:0,right:0,bottom:0,height:3,overflow:"hidden"},countdownFill:{position:"absolute",left:0,right:0,top:0,bottom:0},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,minHeight:e.components.toast["action-min-height"],borderRadius:e.radius.md,...smoothCorners,marginLeft:e.space.sm}});export{Toast};export default Toast;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,PanResponder,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SWIPE_DISMISS_THRESHOLD=80,SWIPE_VELOCITY_THRESHOLD=.5,STACK_OFFSET=8,STACK_SCALE_STEP=.04,DEFAULT_AUTO_DISMISS_MS=3e3,WEB_ACTION_MIN_DURATION_MS=8e3,COUNTDOWN_BAR_HEIGHT=3,ACTION_HIT_SLOP={top:10,bottom:10,left:10,right:10},DISMISS_ACTIONS=[{name:"dismiss",label:"Dismiss"}],Toast=({toast:e,index:t,onDismiss:n,shownAt:i,runtime:s})=>{const a=useTheme(),r=usePresenceMotion(),o=r.duration("fast"),l=e.variant??"default",c=e.position??"bottom",u=useMemo(()=>buildStyles(a),[a]),d=useMemo(()=>tintFor(a,l),[a,l]),m=useMemo(()=>inkFor(a,l),[a,l]),p=a.components.toast["icon-circle-size"],g=a.text[a.components.toast["icon-glyph-text"]].size,h=a.components.toast["tint-bar-width"],f=a.settings.components.toast?.defaultDurationMs??3e3,b=a.settings.components.toast?.enableSwipeDismiss??!0,x="top"===c?-120:120,v=useRef(createAnimatedValue(r.reduced?0:x)).current,A=useRef(createAnimatedValue(0)).current,S=useRef(createAnimatedValue(0)).current,y=useRef(!1),w="top"===c?8*t:8*-t,M=Math.max(1-.04*t,.9),T=useRef(createAnimatedValue(w)).current;useEffect(()=>{setNativeValue(T,w)},[w,T]);const V=useMemo(()=>Animated.add(v,T),[v,T]),_=void 0!==e.action,D=e.duration??f,C=D>0&&_&&"web"===Platform.OS?Math.max(D,8e3):D,R=C<=0||_&&!0===s?.screenReaderOn,N=!0===e.countdown&&!R,I=useRef(createAnimatedValue(1)).current,E=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),P=useRef({touch:!1,pan:!1,hover:!1}),j=useRef(()=>{}),k=useRef({id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:!1});k.current={id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:N&&!r.reduced};const O=useCallback(()=>{const e=E.current,t=k.current,n=P.current;if(!e.initialised){e.initialised=!0;const n=t.runtime?.readRemaining(t.id),i=void 0===t.shownAt?0:Date.now()-t.shownAt;e.remaining=n??(t.totalMs>0?Math.max(t.totalMs-i,0):0),t.totalMs>0&&e.remaining<t.totalMs&&setNativeValue(I,e.remaining/t.totalMs)}const i=!(t.persistent||y.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,j.current()},e.remaining),t.animateBar&&Animated.timing(I,{toValue:0,duration:e.remaining,easing:Easing.linear,useNativeDriver:!0}).start()):i||null===e.timer||(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0),I.stopAnimation())},[I]),dismiss=()=>{if(y.current)return;y.current=!0,O();const t=[Animated.timing(S,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})];r.reduced||t.push(Animated.timing(v,{toValue:x,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};j.current=dismiss,useEffect(()=>{const e=r.reduced?Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(v,{toValue:0,damping:18,stiffness:180,mass:1,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{O()},[R,O]),useEffect(()=>()=>{const e=E.current,t=k.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),I.stopAnimation(),e.initialised&&t.totalMs>0&&!y.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[I]);const L=useCallback((e,t)=>{P.current[e]=t,O()},[O]),H=useCallback(()=>L("touch",!0),[L]),F=useCallback(e=>L("touch",(e.nativeEvent.touches?.length??0)>0),[L]),z=useCallback(()=>L("hover",!0),[L]),B=useCallback(()=>L("hover",!1),[L]),G=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>L("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(A,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(S,n)},onPanResponderTerminate:()=>{if(L("pan",!1),r.reduced)return setNativeValue(A,0),void Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(A,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>80||Math.abs(i.vx)>.5){const t=i.dx>=0?1:-1;y.current=!0,L("pan",!1);const s=[Animated.timing(S,{toValue:0,duration:o,useNativeDriver:!0})];r.reduced||s.push(Animated.timing(A,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(s).start(()=>n(e.id))}else L("pan",!1),r.reduced?(setNativeValue(A,0),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(A,{toValue:0,useNativeDriver:!0}),Animated.spring(S,{toValue:1,useNativeDriver:!0})]).start()}}),[A,S,L,o,r.reduced,a.motion.duration.fast,a.motion.spring.snappy.damping,a.motion.spring.snappy.stiffness,a.motion.spring.snappy.mass,n,e.id]),W={accessibilityActions:DISMISS_ACTIONS,onAccessibilityAction:e=>{"dismiss"===e.nativeEvent.actionName&&dismiss()}},[U,$]=useState(0),K=useMemo(()=>I.interpolate({inputRange:[0,1],outputRange:[-U,0]}),[I,U]),X=e.description?`${e.message}. ${e.description}`:e.message,Y=e.action&&N?`${e.action.label}, ${Math.ceil(C/1e3)} seconds`:e.action?.label;return _jsxs(Animated.View,{...b?G.panHandlers:{},..._?{}:{accessible:!0,...W},..."web"===Platform.OS?{onPointerEnter:z,onPointerLeave:B}:{},onTouchStart:H,onTouchEnd:F,onTouchCancel:F,accessibilityLabel:X,testID:e.testID,style:[u.container,{backgroundColor:a.colors.surface,borderRadius:a.radius.lg,...smoothCorners,padding:a.space.md,...a.shadow.elevated,opacity:S,transform:[{translateY:V},{translateX:A},{scale:M}]},e.style,e.containerStyle],children:[h>0?_jsx(View,{style:[u.tintBar,{width:h,backgroundColor:d}]}):null,_jsxs(View,{style:u.row,children:[(()=>{if(e.icon)return e.icon;const t=defaultGlyph(l);return t?_jsx(View,{style:[u.iconCircle,{width:p,height:p,borderRadius:a.radius.pill,...smoothCorners,backgroundColor:d+"22"},e.iconCircleStyle],children:_jsx(Text,{style:[u.iconGlyph,{color:m,fontSize:g}],accessible:!1,children:t})}):null})(),_jsxs(View,{style:u.textBlock,children:[_jsx(Text,{style:[u.message,{color:a.colors["text-body"],fontSize:a.text.base.size,...fontFor(a,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?_jsx(Text,{style:[u.description,{color:a.colors["text-muted"],fontSize:a.text.sm.size}],numberOfLines:3,children:e.description}):null]}),e.action?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:Y,hitSlop:ACTION_HIT_SLOP,...hitSlopMarker(ACTION_HIT_SLOP),...W,onPress:()=>{e.action?.onPress(),dismiss()},style:({pressed:t})=>[u.actionBtn,{backgroundColor:t?a.colors["surface-pressed"]:"transparent"},e.actionButtonStyle],children:_jsx(Text,{style:{color:d,fontSize:a.text.sm.size,...fontFor(a,"semibold")},numberOfLines:1,children:e.action.label})}):null]}),N?_jsxs(View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",onLayout:e=>$(e.nativeEvent.layout.width),testID:"toast-countdown",style:[u.countdownTrack,{backgroundColor:d+"22"}],children:[r.reduced?_jsx(View,{style:[u.countdownFill,{backgroundColor:d}]}):null,!r.reduced&&U>0?_jsx(Animated.View,{style:[u.countdownFill,{backgroundColor:d,transform:[{translateX:K}]}]}):null]}):null]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"danger":return e.colors.danger;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors["text-body"]}},inkFor=(e,t)=>{switch(t){case"success":return e.colors["success-text"];case"danger":return e.colors["danger-text"];case"warning":return e.colors["warning-text"];case"info":return e.colors["info-text"];default:return e.colors["text-body"]}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"danger":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>StyleSheet.create({container:{overflow:"hidden",marginVertical:e.space.xs},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:e.space.sm},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:e.space.md},iconGlyph:{fontWeight:"700",lineHeight:19},textBlock:{flex:1,paddingRight:e.space.sm},message:{lineHeight:20},description:{marginTop:e.space.xxs,lineHeight:18},countdownTrack:{position:"absolute",left:0,right:0,bottom:0,height:3,overflow:"hidden"},countdownFill:{position:"absolute",left:0,right:0,top:0,bottom:0},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,minHeight:e.components.toast["action-min-height"],borderRadius:e.radius.md,...smoothCorners,marginLeft:e.space.sm}});export{Toast};export default Toast;

package/lib/module/index.js

@@ -1 +1 @@
-"use strict";export*from"./components/index.js";export{APP_ICON_SIZES,AppIcon,CURATED_ICON_NAMES,defaultIcons,ICON_NAMES,ICONSAX_SUFFIX,renderSlotIcon}from"./components/AppIcon/index.js";export{deletePath,Form,getPath,HookFormField,isFieldFilled,rules,setPath,useField,useFieldArray,useForm,useFormCompletion,useFormContext,useHookFormField,useOptionalFormContext}from"./form/index.js";export{FLICK_TOLERANCE,PRESENCE_REDUCE_MOTION,PRESS_ANIMATION_PRESETS,useControllableState,useDebounce,useFieldChain,useFlickGuard,usePresenceMotion,usePressAnimation,useReducedMotion,useRefreshControl,useScrollDirection,useToggle}from"./hooks/index.js";export{initUI}from"./initUI.js";export{NetworkStatusBanner}from"./network/index.js";export{COLOR_NAMES,DURATION_NAMES,darkTheme,EASE_NAMES,FONT_NAMES,getColorMode,getTheme,LEADING_NAMES,LETTER_SPACING_NAMES,lightTheme,mergeBrand,RADIUS_NAMES,radiusOf,resetTheme,resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,SHADOW_NAMES,SIZE_NAMES,SPACE_NAMES,setColorMode,setTheme,spaceOf,subscribeTheme,TEXT_NAMES,ThemeProvider,textOf,useTheme,useThemeMode,WEIGHT_NAMES}from"./theme/index.js";export{announce,Breakpoints,configureFeedback,feedback,hapticForIntent,isFeedbackEnabled,isScreenSize,isTablet,Responsive,ScreenDimensions,SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,setHapticImplementation,shadowStyle,smoothCorners,squircleApplies,squircleHostRadius,squirclePath,triggerHaptic,useScreenDimensions,warnUnknownProps}from"./utils/index.js";
+"use strict";export{PHONE_CHROME_INSETS}from"./canvasKit/index.js";export*from"./components/index.js";export{APP_ICON_SIZES,AppIcon,CURATED_ICON_NAMES,defaultIcons,ICON_NAMES,ICONSAX_SUFFIX,renderSlotIcon}from"./components/AppIcon/index.js";export{deletePath,Form,getPath,HookFormField,isFieldFilled,rules,setPath,useField,useFieldArray,useForm,useFormCompletion,useFormContext,useHookFormField,useOptionalFormContext}from"./form/index.js";export{FLICK_TOLERANCE,PRESENCE_REDUCE_MOTION,PRESS_ANIMATION_PRESETS,useControllableState,useDebounce,useFieldChain,useFlickGuard,usePresenceMotion,usePressAnimation,useReducedMotion,useRefreshControl,useScrollDirection,useToggle}from"./hooks/index.js";export{NetworkStatusBanner}from"./network/index.js";export{COLOR_NAMES,DURATION_NAMES,darkTheme,EASE_NAMES,FONT_NAMES,LEADING_NAMES,LETTER_SPACING_NAMES,lightTheme,mergeBrand,RADIUS_NAMES,radiusOf,resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,SHADOW_NAMES,SIZE_NAMES,SPACE_NAMES,spaceOf,TEXT_NAMES,ThemeProvider,textOf,useTheme,useThemeMode,WEIGHT_NAMES}from"./theme/index.js";export{announce,Breakpoints,configureFeedback,feedback,hapticForIntent,isFeedbackEnabled,isScreenSize,isTablet,Responsive,ScreenDimensions,SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,setHapticImplementation,shadowStyle,smoothCorners,squircleApplies,squircleHostRadius,squirclePath,triggerHaptic,useScreenDimensions,warnUnknownProps}from"./utils/index.js";

package/lib/module/theme/index.js

@@ -1 +1 @@
-"use strict";import{mergeBrand}from"./merge.js";import{darkTheme,lightTheme}from"./tokens.js";let brandGlobal,settingsGlobal,currentMode="light",currentTheme=lightTheme;const subscribers=new Set,recompute=()=>{const e="dark"===currentMode?darkTheme:lightTheme;currentTheme=brandGlobal||settingsGlobal?mergeBrand(e,brandGlobal,settingsGlobal):e,subscribers.forEach(e=>e())};export const setTheme=(e,r)=>{brandGlobal=e,settingsGlobal=r,recompute()};export const setColorMode=e=>{currentMode=e,recompute()};export const getColorMode=()=>currentMode;export const getTheme=()=>currentTheme;export const resetTheme=()=>{currentMode="light",brandGlobal=void 0,settingsGlobal=void 0,recompute()};export const subscribeTheme=e=>(subscribers.add(e),()=>{subscribers.delete(e)});export{createAnimatedValue,setNativeValue}from"./animatedValue.js";export{resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,validateComponentTokens}from"./componentSizes.js";export{Gradient,gradientAngle,toBackgroundImage}from"./Gradient.js";export{mergeBrand}from"./merge.js";export{radiusOf,spaceOf,textOf}from"./scale.js";export{ThemeProvider,useTheme,useThemeMode}from"./ThemeContext.js";export{fontFor}from"./textStyle.js";export{darkTheme,lightTheme}from"./tokens.js";export{COLOR_NAMES,DURATION_NAMES,EASE_NAMES,FONT_NAMES,LEADING_NAMES,LETTER_SPACING_NAMES,RADIUS_NAMES,SHADOW_NAMES,SIZE_NAMES,SPACE_NAMES,TEXT_NAMES,WEIGHT_NAMES}from"./tokens.generated.js";
+"use strict";export{createAnimatedValue,setNativeValue}from"./animatedValue.js";export{resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,validateComponentTokens}from"./componentSizes.js";export{Gradient,gradientAngle,toBackgroundImage}from"./Gradient.js";export{mergeBrand}from"./merge.js";export{radiusOf,spaceOf,textOf}from"./scale.js";export{ThemeProvider,useTheme,useThemeMode}from"./ThemeContext.js";export{fontFor}from"./textStyle.js";export{darkTheme,lightTheme}from"./tokens.js";export{COLOR_NAMES,DURATION_NAMES,EASE_NAMES,FONT_NAMES,LEADING_NAMES,LETTER_SPACING_NAMES,RADIUS_NAMES,SHADOW_NAMES,SIZE_NAMES,SPACE_NAMES,TEXT_NAMES,WEIGHT_NAMES}from"./tokens.generated.js";

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

@@ -2,11 +2,27 @@ import { type ReactNode } from "react";
 import { View } from "react-native";
 import type { ColorMode } from "../theme/types";
 export type PhoneChromeOs = "Ios" | "Android";
+export declare const PHONE_CHROME_INSETS: {
+    readonly Ios: {
+        readonly top: 54;
+        readonly bottom: 34;
+    };
+    readonly Android: {
+        readonly top: 24;
+        readonly bottom: 0;
+    };
+};
 export interface StatusBarProps {
     os: PhoneChromeOs;
     colorMode?: ColorMode;
+    /** The clock as shown, such as 9:41. */
+    time?: string;
+    /** Signal strength in bars, 0 to 4. */
+    signal?: number;
+    /** Battery level in percent, 0 to 100. */
+    battery?: number;
 }
-export declare const StatusBar: ({ os, colorMode }: StatusBarProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export declare const StatusBar: ({ os, colorMode, time, signal, battery }: StatusBarProps) => import("react").CElement<import("react-native").ViewProps, View>;
 export interface HomeIndicatorProps {
     os: PhoneChromeOs;
     colorMode?: ColorMode;
@@ -31,9 +47,10 @@ export interface KeyboardFrameProps {
 export declare const KeyboardFrame: ({ colorMode, previewOs, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
 export interface PhoneChromeManifestProp {
     name: string;
-    type: "enum";
-    enum: string[];
+    type: "enum" | "string" | "number";
+    enum?: string[];
     required: boolean;
+    description?: string;
 }
 export interface PhoneChromeManifestComponent {
     name: string;

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

@@ -24,6 +24,7 @@ export interface AppBarRightAction extends AppBarAction {
 }
 export interface AppBarProps {
     title?: string;
+    /** One line, two on the large variant; longer text ends in an ellipsis. */
     subtitle?: string;
     titleAlignment?: AppBarTitleAlignment;
     leftAction?: AppBarAction;

package/lib/typescript/commonjs/components/Button/Button.meta.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from "./Button";
-export declare const meta: import("../../canvasKit/meta").PhoneMeta<ButtonProps, "gradient" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "haptic" | "pressRetentionOffset" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "pressAnimation", never>;
+export declare const meta: import("../../canvasKit/meta").PhoneMeta<ButtonProps, "gradient" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "pressRetentionOffset" | "haptic" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "pressAnimation", never>;
 //# sourceMappingURL=Button.meta.d.ts.map

package/lib/typescript/commonjs/components/Card/Card.meta.d.ts

@@ -1,3 +1,3 @@
 import type { CardProps } from "./Card";
-export declare const meta: import("../../canvasKit/meta").PhoneMeta<CardProps, "gradient" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "haptic" | "pressRetentionOffset" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "imageSource", never>;
+export declare const meta: import("../../canvasKit/meta").PhoneMeta<CardProps, "gradient" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "pressRetentionOffset" | "haptic" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "imageSource", never>;
 //# sourceMappingURL=Card.meta.d.ts.map

package/lib/typescript/commonjs/components/Checkbox/Checkbox.meta.d.ts

@@ -1,3 +1,3 @@
 import type { CheckboxProps } from "./Checkbox";
-export declare const meta: import("../../canvasKit/meta").PhoneMeta<CheckboxProps, "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "haptic" | "pressRetentionOffset" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay", never>;
+export declare const meta: import("../../canvasKit/meta").PhoneMeta<CheckboxProps, "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "pressRetentionOffset" | "haptic" | "delayLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay", never>;
 //# sourceMappingURL=Checkbox.meta.d.ts.map

package/lib/typescript/commonjs/components/DecimalInput/DecimalInput.meta.d.ts

@@ -1,3 +1,3 @@
 import type { DecimalInputProps } from "./DecimalInput";
-export declare const meta: import("../../canvasKit/meta").PhoneMeta<DecimalInputProps, "maxFontSizeMultiplier" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "textAlign" | "textAlignVertical" | "verticalAlign" | "selection" | "scrollEnabled" | "allowFontScaling" | "numberOfLines" | "lineBreakStrategyIOS" | "selectionColor" | "textBreakStrategy" | "defaultValue" | "returnKeyType" | "submitBehavior" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "inputMode" | "placeholderTextColor" | "enterKeyHint" | "selectTextOnFocus" | "inputAccessoryViewID" | "inputAccessoryViewButtonLabel" | "disableKeyboardShortcuts" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "lineBreakModeIOS" | "smartInsertDelete" | "cursorColor" | "selectionHandleColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus", never>;
+export declare const meta: import("../../canvasKit/meta").PhoneMeta<DecimalInputProps, "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "accessible" | "accessibilityActions" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "maxFontSizeMultiplier" | "textAlign" | "textAlignVertical" | "verticalAlign" | "numberOfLines" | "allowFontScaling" | "lineBreakStrategyIOS" | "selectionColor" | "textBreakStrategy" | "selection" | "scrollEnabled" | "defaultValue" | "returnKeyType" | "submitBehavior" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "inputMode" | "placeholderTextColor" | "enterKeyHint" | "selectTextOnFocus" | "inputAccessoryViewID" | "inputAccessoryViewButtonLabel" | "disableKeyboardShortcuts" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "lineBreakModeIOS" | "smartInsertDelete" | "cursorColor" | "selectionHandleColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus", never>;
 //# sourceMappingURL=DecimalInput.meta.d.ts.map