@webority/mobile-ui 0.88.1 → 0.90.0

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

package/lib/module/components/Swipeable/Swipeable.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.secondary}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors.onPrimary;case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onSecondary}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:s,threshold:i,fullSwipeThreshold:o,onSwipeOpen:r,onSwipeClose:a,disabled:l=!1,haptic:c,containerStyle:u,contentStyle:h,actionStyle:d,accessibilityLabel:m,testID:p}=e,S=useTheme(),f=S.components.swipeable,g=i??f?.threshold??80,b=o??f?.fullSwipeThreshold??200,y=f?.dragActivationOffset??10,w=f?.rubberBandFactor??.35,v=f?.failOffsetY??15,x=useMemo(()=>({damping:f?.springDamping??SPRING_CONFIG.damping,stiffness:f?.springStiffness??SPRING_CONFIG.stiffness,mass:f?.springMass??SPRING_CONFIG.mass}),[f]),A=useMemo(()=>buildStyles(S),[S]),_=useMemo(()=>buildActionStyles(S),[S]),O=!!n&&n.length>0,C=!!s&&s.length>0,I=Dimensions.get("window").width,G=O?g*(n?.length??0):0,j=C?g*(s?.length??0):0,N=useSharedValue(0),R=useSharedValue(0),P=useRef(null);useEffect(()=>()=>{cancelAnimation(N),cancelAnimation(R)},[N,R]);const k=useCallback(e=>{P.current!==e&&(P.current=e,r?.(e))},[r]),T=useCallback(()=>{null!==P.current&&(P.current=null,a?.())},[a]),F=useCallback(e=>{const t="left"===e?n:s,i=t?.[0];i&&(!1!==c&&triggerHaptic("notificationSuccess"),i.onPress(),N.value=withSpring(0,x),P.current=null,a?.())},[n,s,N,a,x,c]),E=useCallback(()=>{N.value=withSpring(0,x),T()},[N,T,x]),D=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),E()},[E,c]),M=useMemo(()=>{const e=G,t=j,n=b,s=-b,i=I,o=-I,r=g,a=O,c=C;return Gesture.Pan().enabled(!l).withTestId(p?`${p}-gesture`:"swipeable-gesture").activeOffsetX([-y,y]).failOffsetY([-v,v]).onStart(()=>{"worklet";R.value=N.value}).onUpdate(n=>{"worklet";const s=R.value+n.translationX;N.value=s>0&&!a||s<0&&!c?0:s>e&&a?e+(s-e)*w:s<-t&&c?(s+t)*w-t:s}).onEnd(()=>{"worklet";const l=N.value;return a&&l>=n?(N.value=withSpring(i,SPRING_CONFIG),void runOnJS(F)("left")):c&&l<=s?(N.value=withSpring(o,SPRING_CONFIG),void runOnJS(F)("right")):a&&l>=r?(N.value=withSpring(e,SPRING_CONFIG),void runOnJS(k)("left")):c&&l<=-r?(N.value=withSpring(-t,SPRING_CONFIG),void runOnJS(k)("right")):(N.value=withSpring(0,x),void runOnJS(T)())})},[l,R,F,b,O,C,G,T,k,j,I,g,N,y,v,w,x,p]),V=useAnimatedStyle(()=>({transform:[{translateX:N.value}]})),B=useAnimatedStyle(()=>({opacity:G>0?Math.min(1,Math.max(0,N.value/G)):0})),H=useAnimatedStyle(()=>({opacity:j>0?Math.min(1,Math.max(0,-N.value/j)):0})),L=useMemo(()=>{const e=[];return n?.forEach(t=>e.push({name:t.key,label:t.label})),s?.forEach(t=>e.push({name:t.key,label:t.label})),e},[n,s]),J=useCallback(e=>{const t=e.nativeEvent.actionName,i=[...n??[],...s??[]].find(e=>e.key===t);i&&(!1!==c&&triggerHaptic("selection"),i.onPress())},[n,s,c]);return O||C?_jsxs(View,{style:[A.root,u],testID:p,accessibilityLabel:m,accessibilityActions:L,onAccessibilityAction:J,children:[O?_jsx(Animated.View,{style:[A.actionsRow,A.actionsLeft,{width:G},d,B],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:S,actionStyles:_,width:g,onPress:D},e.key))}):null,C?_jsx(Animated.View,{style:[A.actionsRow,A.actionsRight,{width:j},d,H],pointerEvents:"box-none",children:s?.map(e=>_jsx(ActionButton,{action:e,theme:S,actionStyles:_,width:g,onPress:D},e.key))}):null,_jsx(GestureDetector,{gesture:M,children:_jsx(Animated.View,{style:[A.content,h,V],children:t})})]}):_jsx(View,{style:u,testID:p,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:s,onPress:i})=>{const o=e.tone??"neutral",r=toneToBg(t,o);return _jsxs(Pressable,{onPress:()=>i(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:s,backgroundColor:r,paddingHorizontal:t.spacing.sm}],children:[e.icon?_jsx(View,{style:n.icon,children:e.icon}):null,_jsx(Text,{style:[n.label,{color:toneToOnColor(t,o),fontSize:t.typography.fontSize.sm,fontWeight:t.typography.fontWeight.semibold}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.spacing.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;
+"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.neutral}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors["on-primary"];case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-neutral"]}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:i,threshold:s,fullSwipeThreshold:o,onSwipeOpen:r,onSwipeClose:l,disabled:a=!1,haptic:c,containerStyle:u,contentStyle:d,actionStyle:h,accessibilityLabel:m,testID:S}=e,p=useTheme(),g=s??80,w=o??200,b=useMemo(()=>buildStyles(p),[p]),f=useMemo(()=>buildActionStyles(p),[p]),y=!!n&&n.length>0,x=!!i&&i.length>0,v=Dimensions.get("window").width,A=y?g*(n?.length??0):0,_=x?g*(i?.length??0):0,C=useSharedValue(0),I=useSharedValue(0),O=useRef(null);useEffect(()=>()=>{cancelAnimation(C),cancelAnimation(I)},[C,I]);const G=useCallback(e=>{O.current!==e&&(O.current=e,r?.(e))},[r]),j=useCallback(()=>{null!==O.current&&(O.current=null,l?.())},[l]),N=useCallback(e=>{const t="left"===e?n:i,s=t?.[0];s&&(!1!==c&&triggerHaptic("notificationSuccess"),s.onPress(),C.value=withSpring(0,SPRING_CONFIG),O.current=null,l?.())},[n,i,C,l,c]),R=useCallback(()=>{C.value=withSpring(0,SPRING_CONFIG),j()},[C,j]),k=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),R()},[R,c]),P=useMemo(()=>{const e=A,t=_,n=w,i=-w,s=v,o=-v,r=g,l=y,c=x;return Gesture.Pan().enabled(!a).withTestId(S?`${S}-gesture`:"swipeable-gesture").activeOffsetX([-10,10]).failOffsetY([-15,15]).onStart(()=>{"worklet";I.value=C.value}).onUpdate(n=>{"worklet";const i=I.value+n.translationX;C.value=i>0&&!l||i<0&&!c?0:i>e&&l?e+.35*(i-e):i<-t&&c?.35*(i+t)-t:i}).onEnd(()=>{"worklet";const a=C.value;return l&&a>=n?(C.value=withSpring(s,SPRING_CONFIG),void runOnJS(N)("left")):c&&a<=i?(C.value=withSpring(o,SPRING_CONFIG),void runOnJS(N)("right")):l&&a>=r?(C.value=withSpring(e,SPRING_CONFIG),void runOnJS(G)("left")):c&&a<=-r?(C.value=withSpring(-t,SPRING_CONFIG),void runOnJS(G)("right")):(C.value=withSpring(0,SPRING_CONFIG),void runOnJS(j)())})},[a,I,N,w,y,x,A,j,G,_,v,g,C,S]),T=useAnimatedStyle(()=>({transform:[{translateX:C.value}]})),F=useAnimatedStyle(()=>({opacity:A>0?Math.min(1,Math.max(0,C.value/A)):0})),E=useAnimatedStyle(()=>({opacity:_>0?Math.min(1,Math.max(0,-C.value/_)):0})),V=useMemo(()=>{const e=[];return n?.forEach(t=>e.push({name:t.key,label:t.label})),i?.forEach(t=>e.push({name:t.key,label:t.label})),e},[n,i]),D=useCallback(e=>{const t=e.nativeEvent.actionName,s=[...n??[],...i??[]].find(e=>e.key===t);s&&(!1!==c&&triggerHaptic("selection"),s.onPress())},[n,i,c]);return y||x?_jsxs(View,{style:[b.root,u],testID:S,accessibilityLabel:m,accessibilityActions:V,onAccessibilityAction:D,children:[y?_jsx(Animated.View,{style:[b.actionsRow,b.actionsLeft,{width:A},h,F],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,x?_jsx(Animated.View,{style:[b.actionsRow,b.actionsRight,{width:_},h,E],pointerEvents:"box-none",children:i?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,_jsx(GestureDetector,{gesture:P,children:_jsx(Animated.View,{style:[b.content,d,T],children:t})})]}):_jsx(View,{style:u,testID:S,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:i,onPress:s})=>{const o=e.tone??"neutral",r=toneToBg(t,o);return _jsxs(Pressable,{onPress:()=>s(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:i,backgroundColor:r,paddingHorizontal:t.space.sm}],children:[e.icon?_jsx(View,{style:n.icon,children:e.icon}):null,_jsx(Text,{style:[n.label,{color:toneToOnColor(t,o),fontSize:t.text.sm.size,fontWeight:t.weight.semibold}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.space.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;

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"error":return e.colors.error;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.components.switch?.thumbColor??"#FFFFFF",A=useMemo(()=>buildStyles(R),[R]),V="dark"===R.mode?R.colors.secondary:R.colors.surface.disabled,k=toneColor(R,n),F=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(F,{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,F,R.motion.spring.snappy]);const D=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(D,{toValue:C?1:0,duration:R.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,D,R.motion.duration.fast]);const _=v.padding,E=v.trackWidth-v.thumbSize-v.padding,L=F.interpolate({inputRange:[0,1],outputRange:[_,E]}),H=D.interpolate({inputRange:[0,1],outputRange:[V,k]}),z=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(z,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(z,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,f,z]);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,W=_jsxs(Animated.View,{style:[A.track,{width:v.trackWidth,height:v.trackHeight,borderRadius:R.radius.pill,...smoothCorners,backgroundColor:H},y],children:[B?_jsx(View,{pointerEvents:"none",style:[A.errorRing,{borderRadius:R.radius.pill,...smoothCorners,borderWidth:R.colors.border.width,borderColor:R.colors.field.borderError}]}):null,_jsx(Animated.View,{style:[A.thumb,R.shadows.sm,{backgroundColor:T,width:v.thumbSize,height:v.thumbSize,borderRadius:R.radius.pill,...smoothCorners,transform:[{translateX:L},{scale:z}]},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}),W]});const q=_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:W});return N?_jsxs(View,{style:[A.row,hasChoiceDetail(c,d)?A.rowTop:null,g,b],children:[q,_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:q}):q});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.spacing.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.spacing.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{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;

package/lib/module/components/Tabs/Tabs.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,radiusOf,resolveSegmentedControlSize,resolveTabsSize,spaceOf,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Tabs=forwardRef((e,t)=>{const{tabs:i,activeKey:r,onChange:a,variant:o="underline",radius:s,size:n="md",scrollable:l=!1,align:d="left",style:c,containerStyle:u,tabStyle:p,tabLabelStyle:m,tabIconStyle:b,tabBadgeStyle:g,dividerStyle:f,indicatorStyle:h,progress:y,haptic:x,accessibilityLabel:S,testID:v}=e,j=useTheme(),w=useMemo(()=>buildStyles(j),[j]),k=j.components.tabs,C=useMemo(()=>resolveTabsSize(j,n),[j,n]),z=l?C.scrollablePaddingX:C.paddingX,I=C.paddingY,_=C.text,R=spaceOf(j,k.iconGap,"components.tabs.iconGap"),T=C.icon,V=k?.underlineHeight??2,L=spaceOf(j,k.pillInset,"components.tabs.pillInset"),F=k?.disabledOpacity??.45,O=spaceOf(j,k.badgeGap,"components.tabs.badgeGap"),P="segmented"===o,A=useMemo(()=>resolveSegmentedControlSize(j,n),[j,n]),H=spaceOf(j,k.trackPadding,"components.tabs.trackPadding"),M=void 0===k.radius?void 0:radiusOf(j,k.radius,"components.tabs.radius"),W="number"==typeof s?s:s?j.radius[s]:M,q=W??j.radius.md,D=void 0===W?j.radius.sm:Math.max(W-H,0),B=W??j.radius.pill,E=W??j.radius.none,G=j.colors.background.tertiary,X=useSquircle(P,q),[N,U]=useState({}),K=useRef(createAnimatedValue(0)).current,Y=useRef(createAnimatedValue(0)).current,J=N[r],Q=i.every(e=>void 0!==N[e.key]),Z=void 0!==y&&Q&&i.length>1,$=useMemo(()=>Z&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>N[e.key].x),extrapolate:"clamp"}):null,[Z,y,i,N]),ee=useMemo(()=>Z&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>N[e.key].width),extrapolate:"clamp"}):null,[Z,y,i,N]);useEffect(()=>{if(!J)return;if(Z)return;const e=j.motion.spring.snappy,t=Animated.parallel([Animated.spring(K,{toValue:J.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(Y,{toValue:J.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[J,r,K,Y,j.motion.spring.snappy,Z]);const te=useCallback(e=>t=>{const{x:i,width:r}=t.nativeEvent.layout;U(t=>{const a=t[e];return a&&a.x===i&&a.width===r?t:{...t,[e]:{x:i,width:r}}})},[]),ie=useCallback(e=>{if(e.disabled)return;if(e.key===r)return;const t=resolveHaptic(x,"selection");t&&triggerHaptic(t),a(e.key)},[r,a,x]),re="pills"===o,ae=_jsx(Animated.View,{pointerEvents:"none",style:[P?w.indicatorThumb:re?w.indicatorPill:w.indicatorUnderline,P?null:re?{top:L,bottom:L}:{height:V},{width:ee??Y,transform:[{translateX:$??K}],backgroundColor:P?j.colors.background.elevated:re?j.colors.primaryMuted:j.colors.primary,borderRadius:P?D:re?B:E,...smoothCorners},h]}),renderTabs=()=>i.map(e=>{const t=e.key===r,i=!0===e.disabled,a=t?j.colors.primary:j.colors.text.tertiary,o=renderSlotIcon(e.icon,{color:a,size:T,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>ie(e),onLayout:te(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},"aria-selected":t,"aria-disabled":i,android_ripple:P?void 0:{color:j.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[w.tab,l?null:w.tabFlex,P?{paddingHorizontal:A.paddingX,height:A.height-2*H}:{paddingHorizontal:z,paddingVertical:I},{opacity:i?F:e&&P&&!t?.7:1,backgroundColor:e&&!P?j.colors.surface.pressed:"transparent"},p],children:[o?_jsx(View,{style:[w.tabIcon,{marginRight:R},b],children:o}):null,_jsx(Text,{style:[w.tabLabel,{color:a,fontSize:P?A.text:_,fontWeight:t?j.typography.fontWeight.semibold:j.typography.fontWeight.medium},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?_jsx(View,{style:[w.tabBadge,{marginLeft:O,backgroundColor:j.colors.primaryMuted,borderRadius:j.radius.pill,...smoothCorners,paddingHorizontal:j.spacing.xs},g],children:_jsx(Text,{style:{color:j.colors.primary,fontSize:j.typography.fontSize.xs,fontWeight:j.typography.fontWeight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),oe={flexDirection:"row",alignItems:"stretch",justifyContent:l?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},se=_jsxs(_Fragment,P?{children:[ae,renderTabs()]}:{children:[renderTabs(),ae]});return _jsxs(View,{ref:t,style:[w.container,{borderBottomColor:j.colors.border.secondary,borderBottomWidth:"underline"===o?StyleSheet.hairlineWidth:0},"underline"===o?f:null,P?{padding:H,borderRadius:q,...smoothCorners,backgroundColor:X.active?"transparent":G}:null,c,u],onLayout:X.onLayout,accessibilityRole:"tablist",accessibilityLabel:S,testID:v,children:[X.active&&X.size?_jsx(SquircleFill,{width:X.size.width,height:X.size.height,radius:q,fill:G}):null,l?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[oe],keyboardShouldPersistTaps:"handled",children:se}):_jsx(View,{style:oe,children:se})]})});Tabs.displayName="Tabs";const buildStyles=e=>StyleSheet.create({container:{width:"100%",position:"relative"},tab:{flexDirection:"row",alignItems:"center",justifyContent:"center"},tabFlex:{flex:1},tabIcon:{},tabLabel:{includeFontPadding:!1,flexShrink:1},tabBadge:{minWidth:18,alignItems:"center",justifyContent:"center"},indicatorUnderline:{position:"absolute",left:0,bottom:0},indicatorPill:{position:"absolute",left:0,zIndex:-1},indicatorThumb:{position:"absolute",left:0,top:0,bottom:0}});export{Tabs};export default Tabs;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,resolveSegmentedControlSize,resolveTabsSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Tabs=forwardRef((e,t)=>{const{tabs:i,activeKey:s,onChange:r,variant:o="underline",radius:a,size:l="md",scrollable:n=!1,align:d="left",style:c,containerStyle:u,tabStyle:m,tabLabelStyle:p,tabIconStyle:b,tabBadgeStyle:g,dividerStyle:h,indicatorStyle:f,progress:y,haptic:x,accessibilityLabel:S,testID:v}=e,w=useTheme(),j=useMemo(()=>buildStyles(w),[w]),C=w.components.tabs,k=useMemo(()=>resolveTabsSize(w,l),[w,l]),z=n?k["scrollable-padding-x"]:k["padding-x"],_=k["padding-y"],R=k.text,T=w.space[C["icon-gap"]],I=k.icon,V=C["underline-height"],L=w.space[C["pill-inset"]],F=C["disabled-opacity"],A=w.space[C["badge-gap"]],H="segmented"===o,M=useMemo(()=>resolveSegmentedControlSize(w,l),[w,l]),P=w.space[C["track-padding"]],q="number"==typeof a?a:a?w.radius[a]:void 0,D=q??w.radius.md,B=void 0===q?w.radius.sm:Math.max(q-P,0),W=q??w.radius.pill,E=q??w.radius.none,N=w.colors["bg-muted"],O=useSquircle(H,D),[U,K]=useState({}),X=useRef(createAnimatedValue(0)).current,G=useRef(createAnimatedValue(0)).current,J=U[s],Q=i.every(e=>void 0!==U[e.key]),Y=void 0!==y&&Q&&i.length>1,Z=useMemo(()=>Y&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].x),extrapolate:"clamp"}):null,[Y,y,i,U]),$=useMemo(()=>Y&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].width),extrapolate:"clamp"}):null,[Y,y,i,U]);useEffect(()=>{if(!J)return;if(Y)return;const e=w.motion.spring.snappy,t=Animated.parallel([Animated.spring(X,{toValue:J.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(G,{toValue:J.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[J,s,X,G,w.motion.spring.snappy,Y]);const ee=useCallback(e=>t=>{const{x:i,width:s}=t.nativeEvent.layout;K(t=>{const r=t[e];return r&&r.x===i&&r.width===s?t:{...t,[e]:{x:i,width:s}}})},[]),te=useCallback(e=>{if(e.disabled)return;if(e.key===s)return;const t=resolveHaptic(x,"selection");t&&triggerHaptic(t),r(e.key)},[s,r,x]),ie="pills"===o,se=_jsx(Animated.View,{pointerEvents:"none",style:[H?j.indicatorThumb:ie?j.indicatorPill:j.indicatorUnderline,H?null:ie?{top:L,bottom:L}:{height:V},{width:$??G,transform:[{translateX:Z??X}],backgroundColor:H?w.colors.surface:ie?w.colors["primary-soft"]:w.colors.primary,borderRadius:H?B:ie?W:E,...smoothCorners},f]}),renderTabs=()=>i.map(e=>{const t=e.key===s,i=!0===e.disabled,r=t?w.colors.primary:w.colors["text-subtle"],o=renderSlotIcon(e.icon,{color:r,size:I,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>te(e),onLayout:ee(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},"aria-selected":t,"aria-disabled":i,android_ripple:H?void 0:{color:w.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[j.tab,n?null:j.tabFlex,H?{paddingHorizontal:M["padding-x"],height:M.height-2*P}:{paddingHorizontal:z,paddingVertical:_},{opacity:i?F:e&&H&&!t?.7:1,backgroundColor:e&&!H?w.colors["surface-pressed"]:"transparent"},m],children:[o?_jsx(View,{style:[j.tabIcon,{marginRight:T},b],children:o}):null,_jsx(Text,{style:[j.tabLabel,{color:r,fontSize:H?M.text:R,fontWeight:t?w.weight.semibold:w.weight.medium},p],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?_jsx(View,{style:[j.tabBadge,{marginLeft:A,backgroundColor:w.colors["primary-soft"],borderRadius:w.radius.pill,...smoothCorners,paddingHorizontal:w.space.xs},g],children:_jsx(Text,{style:{color:w.colors.primary,fontSize:w.text.xs.size,fontWeight:w.weight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),re={flexDirection:"row",alignItems:"stretch",justifyContent:n?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},oe=_jsxs(_Fragment,H?{children:[se,renderTabs()]}:{children:[renderTabs(),se]});return _jsxs(View,{ref:t,style:[j.container,{borderBottomColor:w.colors["border-subtle"],borderBottomWidth:"underline"===o?StyleSheet.hairlineWidth:0},"underline"===o?h:null,H?{padding:P,borderRadius:D,...smoothCorners,backgroundColor:O.active?"transparent":N}:null,c,u],onLayout:O.onLayout,accessibilityRole:"tablist",accessibilityLabel:S,testID:v,children:[O.active&&O.size?_jsx(SquircleFill,{width:O.size.width,height:O.size.height,radius:D,fill:N}):null,n?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[re],keyboardShouldPersistTaps:"handled",children:oe}):_jsx(View,{style:re,children:oe})]})});Tabs.displayName="Tabs";const buildStyles=e=>StyleSheet.create({container:{width:"100%",position:"relative"},tab:{flexDirection:"row",alignItems:"center",justifyContent:"center"},tabFlex:{flex:1},tabIcon:{},tabLabel:{includeFontPadding:!1,flexShrink:1},tabBadge:{minWidth:18,alignItems:"center",justifyContent:"center"},indicatorUnderline:{position:"absolute",left:0,bottom:0},indicatorPill:{position:"absolute",left:0,zIndex:-1},indicatorThumb:{position:"absolute",left:0,top:0,bottom:0}});export{Tabs};export default Tabs;

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

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

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{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"tight",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"normal",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"normal",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"normal",color:"secondary"},caption:{size:"xs",weight:"normal",line:"normal",color:"tertiary"},label:{size:"sm",weight:"medium",line:"normal",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"normal",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLES={primary:!0,secondary:!0,tertiary:!0,inverse:!0,disabled:!0,link:!0,textStrong:!0},TEXT_ROLE_KEY={textStrong:"strong"},SEMANTIC={success:!0,warning:!0,error:!0,info:!0};export const resolveColor=(e,i)=>TEXT_ROLES[i]?e.colors.text[TEXT_ROLE_KEY[i]??i]:SEMANTIC[i]?e.colors.toneText[i]:i;const Text=forwardRef((e,i)=>{const{variant:t="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:c,children:m,...p}=e,d=useTheme(),y=Object.hasOwn(VARIANTS,t),g=d.textVariants,h=!y&&g&&Object.hasOwn(g,t)?g[t]:void 0,f=useMemo(()=>{if(h){const{typography:e}=d,i="number"==typeof h.size?h.size:e.fontSize[h.size],t="number"==typeof n?n:n?e.fontSize[n]:i,c=h.lineHeight,m=h.letterSpacing;return{fontSize:t,lineHeight:"number"==typeof c?c:c?Math.round(t*e.lineHeight[c]):void 0,color:resolveColor(d,o??h.color??"primary"),textAlign:l,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:"number"!=typeof m&&m?e.letterSpacing[m]:m,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(d,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[y?t:"body"],i="number"==typeof n?n:d.typography.fontSize[n??e.size];return{fontSize:i,lineHeight:Math.round(i*d.typography.lineHeight[e.line]),color:resolveColor(d,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?d.typography.letterSpacing[e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(d,r??e.weight,e.fontFamily)}},[d,h,y,t,o,r,n,l,a,s]),x=y?VARIANTS[t].heading:h?.heading;return _jsx(RNText,{ref:i,style:[f,c],maxFontSizeMultiplier:d.maxFontSizeMultiplier,accessibilityRole:x?"header":p.accessibilityRole,...p,children:m})});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{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"tight",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"normal",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"normal",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"normal",color:"secondary"},caption:{size:"xs",weight:"normal",line:"normal",color:"tertiary"},label:{size:"sm",weight:"medium",line:"normal",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"normal",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:l,align:n,italic:a,underline:s,style:c,children:d,...m}=e,g=useTheme(),p=Object.hasOwn(VARIANTS,i),x=g.settings.textVariants,h=!p&&x&&Object.hasOwn(x,i)?x[i]:void 0,y=useMemo(()=>{if(h){const e="string"==typeof l?l:h.size;return{fontSize:"number"==typeof l?l:g.text[e].size,lineHeight:h.lineHeight??("number"==typeof l?void 0:g.text[e].lineHeight),color:void 0!==o?resolveColor(g,o):h.color?g.colors[h.color]:resolveColor(g,"primary"),textAlign:n,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:h.letterSpacing?g["letter-spacing"][h.letterSpacing]:void 0,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(g,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[p?i:"body"],t="number"==typeof l?l:g.text[l??e.size].size;return{fontSize:t,lineHeight:Math.round(t*g.leading[e.line]),color:resolveColor(g,o??e.color),textAlign:n,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?g["letter-spacing"][e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(g,r??e.weight,e.fontFamily)}},[g,h,p,i,o,r,l,n,a,s]),f=p?VARIANTS[i].heading:h?.heading;return _jsx(RNText,{ref:t,style:[y,c],maxFontSizeMultiplier:g.settings.maxFontSizeMultiplier,accessibilityRole:f?"header":m.accessibilityRole,...m,children:d})});Text.displayName="Text";export{Text};export default Text;

package/lib/module/components/TimePicker/TimePicker.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Pressable,StyleSheet,Text,View}from"react-native";import{GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Button from"../Button/Button.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{PickerTrigger}from"../PickerTrigger/PickerTrigger.js";import{ToastHost}from"../Toast/ToastProvider.js";import{WheelPicker}from"../WheelPicker/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),transparentOf=e=>{const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return"transparent";const[i,a,r]=t[1].split(",").map(e=>e.trim());return`rgba(${i}, ${a}, ${r}, 0)`},range=(e,t,i=1)=>{const a=[];for(let r=e;r<=t;r+=i)a.push(r);return a},pad2=e=>e.toString().padStart(2,"0"),to24h=(e,t,i)=>"24h"===i?e:"AM"===t?12===e?0:e:12===e?12:e+12,from24h=(e,t)=>"24h"===t?{displayHour:e,period:"AM"}:0===e?{displayHour:12,period:"AM"}:12===e?{displayHour:12,period:"PM"}:e>12?{displayHour:e-12,period:"PM"}:{displayHour:e,period:"AM"},clampMinuteToStep=(e,t)=>{const i=Math.round(e/t)*t;return Math.min(59,Math.max(0,i))},TimePicker=e=>{const{visible:t,value:i,onChange:a,onClose:r,format:s="12h",minuteStep:o=1,title:n="Select Time",confirmLabel:l="Confirm",cancelLabel:u="Cancel",testID:m,style:c,containerStyle:d,headerLabelStyle:p,footerButtonStyle:g,label:h,placeholder:f,helperText:y,error:b,required:x,disabled:v,size:M,variant:k,clearable:A,onClear:S,formatValue:j,triggerStyle:T,haptic:w}=e,D=void 0!==e.visible,[P,V]=useState(!1),C=D?t:P,H=D?m:m?`${m}-modal`:void 0,R=useTheme(),_=usePresenceMotion(),[N,$]=useModalInsets(),B=useMemo(()=>buildStyles(R),[R]),I=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(0)).current,L=useRef(createAnimatedValue(40)).current,z=useRef(createAnimatedValue(0)).current,F=useRef(0),W=useCallback(()=>{D?r?.():V(!1)},[D,r]),E=useCallback(()=>{const e=Animated.timing(I,{toValue:0,duration:_.duration("fast"),easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0}),t=Animated.timing(O,{toValue:0,duration:_.duration("normal"),useNativeDriver:!1});(_.reduced?Animated.parallel([e,t]):Animated.parallel([e,t,Animated.timing(L,{toValue:40,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0})])).start(()=>W())},[O,W,I,_,L,R.motion.duration.fast,R.motion.easing.accelerate]),{handleGesture:G,opacity:q}=useDragToDismiss({drag:z,travel:()=>F.current||320,onDismiss:E}),U=useMemo(()=>Animated.multiply(I,q),[I,q]),Y=useMemo(()=>O.interpolate({inputRange:[0,1],outputRange:[transparentOf(R.colors.background.overlay),R.colors.background.overlay]}),[O,R.colors.background.overlay]),J=useMemo(()=>"24h"===s?range(0,23):range(1,12),[s]),K=useMemo(()=>range(0,59,o),[o]),Q=useMemo(()=>["AM","PM"],[]),X=useMemo(()=>{const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:r,period:n}=from24h(e,s);return{displayHour:r,minute:a,period:n,hour24:e}},[i,s,o]),[Z,ee]=useState(()=>{const e=J.indexOf(X.displayHour);return e>=0?e:0}),[te,ie]=useState(()=>{const e=K.indexOf(X.minute);return e>=0?e:0}),[ae,re]=useState(()=>"PM"===X.period?1:0);useEffect(()=>{if(!C)return;const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:r,period:n}=from24h(e,s),l=J.indexOf(r);ee(l>=0?l:0);const u=K.indexOf(a);ie(u>=0?u:0),re("PM"===n?1:0)},[C,i,s,o,J,K]),useEffect(()=>{let e;if(C){const t=Animated.timing(I,{toValue:1,duration:_.duration("normal"),easing:Easing.out(Easing.cubic),useNativeDriver:!0}),i=Animated.timing(O,{toValue:1,duration:_.duration("normal"),useNativeDriver:!1});_.reduced?(setNativeValue(L,0),e=Animated.parallel([t,i])):e=Animated.parallel([t,i,Animated.spring(L,{toValue:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()}else I.setValue(0),O.setValue(0),setNativeValue(L,40),setNativeValue(z,0),setNativeValue(q,1);return()=>e?.stop()},[C,I,O,_,L,z,q,R.motion]);const se=useCallback((e,t)=>{"hour"===e?ee(Math.max(0,J.indexOf(Number(t)))):"minute"===e?ie(Math.max(0,K.indexOf(Number(t)))):re("PM"===t?1:0)},[J,K]),oe=useCallback(()=>{!1!==w&&triggerHaptic("selection"),E()},[E,w]),ne=useCallback(()=>{const e=J[Z]??0,t=Q[ae]??"AM",i=to24h(e,t,s),r=K[te]??0;!1!==w&&triggerHaptic("notificationSuccess"),a?.({hour:i,minute:r}),E()},[J,Z,Q,ae,K,te,s,a,E,w]),le=useMemo(()=>{const e=J[Z]??0,t=K[te]??0;if("24h"===s)return`${pad2(e)}:${pad2(t)}`;const i=Q[ae]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[J,Z,K,te,Q,ae,s]),ue=useMemo(()=>J.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[J]),me=useMemo(()=>K.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[K]),ce=useMemo(()=>Q.map(e=>({value:e,label:e})),[Q]),de=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:ue,value:J[Z]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:me,value:K[te]??0,gapAfter:"12h"===s?R.spacing.md:void 0,testID:"time-picker-minute"}];return"12h"===s&&e.push({key:"period",label:"Period",items:ce,value:Q[ae]??"AM",testID:"time-picker-period"}),e},[ue,me,ce,J,Z,K,te,Q,ae,s,R.spacing.md]),pe=useCallback(e=>{if("24h"===s)return`${pad2(e.hour)}:${pad2(e.minute)}`;const{displayHour:t,period:i}=from24h(e.hour,"12h");return`${t}:${pad2(e.minute)} ${i}`},[s]),ge=!D&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(j??pe)(i):void 0,he=_jsx(Modal,{visible:C,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:E,testID:H,children:_jsx(ModalSafeArea,{onInsets:$,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,style:[B.backdrop,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:E,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsx(Animated.View,{style:_.reduced?{opacity:U}:void 0,children:_jsxs(Animated.View,{style:[B.sheet,{paddingBottom:Math.max(N.bottom,R.spacing.lg),transform:[{translateY:Animated.add(L,z)}]},c,d],onLayout:e=>{F.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:n,children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:B.handle}),_jsx(Text,{style:[B.title,p],accessibilityRole:"header",children:n})]})}),_jsx(View,{style:B.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${le}`,children:_jsx(Text,{style:B.summary,children:le})}),_jsx(WheelPicker,{columns:de,onChange:se,haptic:w,style:B.wheels}),_jsxs(View,{style:B.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:oe,style:[B.footerBtn,g],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:ne,style:[B.footerBtn,g],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]})}),_jsx(ToastHost,{})]})})});return D?he:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:h,placeholder:f,helperText:y,error:b,required:x,disabled:v,size:M,variant:k,clearable:A,onClear:S,value:ge,onPress:()=>V(!0),triggerStyle:T,testID:m}),he]})},buildStyles=e=>{const t=e.shadows.xl;return StyleSheet.create({backdrop:{flex:1,justifyContent:"flex-end"},sheet:{backgroundColor:e.colors.background.elevated,borderTopLeftRadius:e.radius.xl,borderTopRightRadius:e.radius.xl,...smoothCorners,paddingTop:e.spacing.sm,paddingHorizontal:e.spacing.lg,paddingBottom:e.spacing.xl,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},handle:{alignSelf:"center",width:e.components.timePicker?.handleWidth??36,height:e.components.timePicker?.handleHeight??4,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.border.secondary,marginBottom:e.spacing.sm},title:{textAlign:"center",fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.primary,marginBottom:e.spacing.sm},summaryWrap:{alignItems:"center",marginBottom:e.spacing.md},summary:{fontSize:e.typography.fontSize["2xl"],fontWeight:e.typography.fontWeight.bold,color:e.colors.primary,letterSpacing:e.typography.letterSpacing.wide},wheels:{marginBottom:e.spacing.lg},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:e.spacing.sm},footerBtn:{paddingHorizontal:e.spacing.lg}})};export{TimePicker};export default TimePicker;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Pressable,StyleSheet,Text,View}from"react-native";import{GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";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{triggerHaptic}from"../../utils/hapticUtils.js";import Button from"../Button/Button.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{PickerTrigger}from"../PickerTrigger/PickerTrigger.js";import{ToastHost}from"../Toast/ToastProvider.js";import{WheelPicker}from"../WheelPicker/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),range=(e,t,i=1)=>{const a=[];for(let s=e;s<=t;s+=i)a.push(s);return a},pad2=e=>e.toString().padStart(2,"0"),to24h=(e,t,i)=>"24h"===i?e:"AM"===t?12===e?0:e:12===e?12:e+12,from24h=(e,t)=>"24h"===t?{displayHour:e,period:"AM"}:0===e?{displayHour:12,period:"AM"}:12===e?{displayHour:12,period:"PM"}:e>12?{displayHour:e-12,period:"PM"}:{displayHour:e,period:"AM"},clampMinuteToStep=(e,t)=>{const i=Math.round(e/t)*t;return Math.min(59,Math.max(0,i))},TimePicker=e=>{const{visible:t,value:i,onChange:a,onClose:s,format:r="12h",minuteStep:o=1,title:n="Select Time",confirmLabel:l="Confirm",cancelLabel:u="Cancel",testID:m,style:c,containerStyle:d,headerLabelStyle:p,footerButtonStyle:h,label:g,placeholder:f,helperText:b,error:y,required:x,disabled:M,size:v,variant:A,clearable:j,onClear:S,formatValue:k,triggerStyle:w,haptic:T}=e,D=void 0!==e.visible,[V,C]=useState(!1),P=D?t:V,H=D?m:m?`${m}-modal`:void 0,R=useTheme(),_=usePresenceMotion(),[N,B]=useModalInsets(),I=useMemo(()=>buildStyles(R),[R]),$=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(0)).current,L=useRef(createAnimatedValue(40)).current,z=useRef(createAnimatedValue(0)).current,F=useRef(0),E=useCallback(()=>{D?s?.():C(!1)},[D,s]),G=useCallback(()=>{const e=Animated.timing($,{toValue:0,duration:_.duration("fast"),easing:Easing.bezier(...R.motion.ease.accelerate),useNativeDriver:!0}),t=Animated.timing(O,{toValue:0,duration:_.duration("default"),useNativeDriver:!1});(_.reduced?Animated.parallel([e,t]):Animated.parallel([e,t,Animated.timing(L,{toValue:40,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.ease.accelerate),useNativeDriver:!0})])).start(()=>E())},[O,E,$,_,L,R.motion.duration.fast,R.motion.ease.accelerate]),{handleGesture:W,opacity:q}=useDragToDismiss({drag:z,travel:()=>F.current||320,onDismiss:G}),U=useMemo(()=>Animated.multiply($,q),[$,q]),Y=useMemo(()=>O.interpolate({inputRange:[0,1],outputRange:[transparentOf(R.colors.scrim),R.colors.scrim]}),[O,R.colors.scrim]),J=useMemo(()=>"24h"===r?range(0,23):range(1,12),[r]),K=useMemo(()=>range(0,59,o),[o]),Q=useMemo(()=>["AM","PM"],[]),X=useMemo(()=>{const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:s,period:n}=from24h(e,r);return{displayHour:s,minute:a,period:n,hour24:e}},[i,r,o]),[Z,ee]=useState(()=>{const e=J.indexOf(X.displayHour);return e>=0?e:0}),[te,ie]=useState(()=>{const e=K.indexOf(X.minute);return e>=0?e:0}),[ae,se]=useState(()=>"PM"===X.period?1:0);useEffect(()=>{if(!P)return;const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:s,period:n}=from24h(e,r),l=J.indexOf(s);ee(l>=0?l:0);const u=K.indexOf(a);ie(u>=0?u:0),se("PM"===n?1:0)},[P,i,r,o,J,K]),useEffect(()=>{let e;if(P){const t=Animated.timing($,{toValue:1,duration:_.duration("default"),easing:Easing.out(Easing.cubic),useNativeDriver:!0}),i=Animated.timing(O,{toValue:1,duration:_.duration("default"),useNativeDriver:!1});_.reduced?(setNativeValue(L,0),e=Animated.parallel([t,i])):e=Animated.parallel([t,i,Animated.spring(L,{toValue:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()}else $.setValue(0),O.setValue(0),setNativeValue(L,40),setNativeValue(z,0),setNativeValue(q,1);return()=>e?.stop()},[P,$,O,_,L,z,q,R.motion]);const re=useCallback((e,t)=>{"hour"===e?ee(Math.max(0,J.indexOf(Number(t)))):"minute"===e?ie(Math.max(0,K.indexOf(Number(t)))):se("PM"===t?1:0)},[J,K]),oe=useCallback(()=>{!1!==T&&triggerHaptic("selection"),G()},[G,T]),ne=useCallback(()=>{const e=J[Z]??0,t=Q[ae]??"AM",i=to24h(e,t,r),s=K[te]??0;!1!==T&&triggerHaptic("notificationSuccess"),a?.({hour:i,minute:s}),G()},[J,Z,Q,ae,K,te,r,a,G,T]),le=useMemo(()=>{const e=J[Z]??0,t=K[te]??0;if("24h"===r)return`${pad2(e)}:${pad2(t)}`;const i=Q[ae]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[J,Z,K,te,Q,ae,r]),ue=useMemo(()=>J.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[J]),me=useMemo(()=>K.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[K]),ce=useMemo(()=>Q.map(e=>({value:e,label:e})),[Q]),de=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:ue,value:J[Z]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:me,value:K[te]??0,gapAfter:"12h"===r?R.space.md:void 0,testID:"time-picker-minute"}];return"12h"===r&&e.push({key:"period",label:"Period",items:ce,value:Q[ae]??"AM",testID:"time-picker-period"}),e},[ue,me,ce,J,Z,K,te,Q,ae,r,R.space.md]),pe=useCallback(e=>{if("24h"===r)return`${pad2(e.hour)}:${pad2(e.minute)}`;const{displayHour:t,period:i}=from24h(e.hour,"12h");return`${t}:${pad2(e.minute)} ${i}`},[r]),he=!D&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(k??pe)(i):void 0,ge=_jsx(Modal,{visible:P,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:G,testID:H,children:_jsx(ModalSafeArea,{onInsets:B,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,style:[I.backdrop,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:G,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsx(Animated.View,{style:_.reduced?{opacity:U}:void 0,children:_jsxs(Animated.View,{style:[I.sheet,{paddingBottom:Math.max(N.bottom,R.space.lg),transform:[{translateY:Animated.add(L,z)}]},c,d],onLayout:e=>{F.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:n,children:[_jsx(GestureDetector,{gesture:W,children:_jsxs(View,{children:[_jsx(View,{style:I.handle}),_jsx(Text,{style:[I.title,p],accessibilityRole:"header",children:n})]})}),_jsx(View,{style:I.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${le}`,children:_jsx(Text,{style:I.summary,children:le})}),_jsx(WheelPicker,{columns:de,onChange:re,haptic:T,style:I.wheels}),_jsxs(View,{style:I.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:oe,style:[I.footerBtn,h],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:ne,style:[I.footerBtn,h],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]})}),_jsx(ToastHost,{})]})})});return D?ge:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:g,placeholder:f,helperText:b,error:y,required:x,disabled:M,size:v,variant:A,clearable:j,onClear:S,value:he,onPress:()=>C(!0),triggerStyle:w,testID:m}),ge]})},buildStyles=e=>{const t=e.shadow.modal;return StyleSheet.create({backdrop:{flex:1,justifyContent:"flex-end"},sheet:{backgroundColor:e.colors.surface,borderTopLeftRadius:e.radius.xl,borderTopRightRadius:e.radius.xl,...smoothCorners,paddingTop:e.space.sm,paddingHorizontal:e.space.lg,paddingBottom:e.space.xl,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},handle:{alignSelf:"center",width:36,height:4,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors["border-subtle"],marginBottom:e.space.sm},title:{textAlign:"center",fontSize:e.text.lg.size,fontWeight:e.weight.semibold,color:e.colors["text-body"],marginBottom:e.space.sm},summaryWrap:{alignItems:"center",marginBottom:e.space.md},summary:{fontSize:e.text["2xl"].size,fontWeight:e.weight.bold,color:e.colors.primary,letterSpacing:e["letter-spacing"].wide},wheels:{marginBottom:e.space.lg},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:e.space.sm},footerBtn:{paddingHorizontal:e.space.lg}})};export{TimePicker};export default TimePicker;

package/lib/module/components/Timeline/Timeline.js

@@ -1 +1 @@
-"use strict";import{useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,spaceOf,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DOT=12,HALO=6,RAIL=2,GUTTER=28,HALO_OPACITY=.16;export const Timeline=({items:e,variant:t="feed",orientation:r="vertical",style:o,testID:s})=>{const n=useTheme(),i=n.components.timeline,l=i?.dotSize??12,a=i?.haloWidth??6,c=spaceOf(n,i?.connectorGap??"xs","components.timeline.connectorGap"),d=l+2*a,m=useMemo(()=>buildStyles(n,l,d,c),[n,l,d,c]),h="horizontal"===r,u=n.colors.border.primary,[g,p]=useState(0),x=useCallback(e=>{const{width:t}=e.nativeEvent.layout;p(e=>e===t?e:t)},[]),y=h&&g>0&&e.length>0?g/e.length:0,renderDisc=(e,t)=>e.icon?_jsx(View,{style:m.disc,children:e.icon}):_jsx(View,{style:[m.disc,{backgroundColor:tintOf(t,.16,n.colors.background.tertiary)}],children:_jsx(View,{style:[m.dot,{backgroundColor:t}]})}),renderText=(e,t)=>_jsxs(_Fragment,{children:[_jsx(Text,{style:[m.title,{fontSize:h?n.typography.fontSize.sm:n.typography.fontSize.base,color:"upcoming"===t?n.colors.text.secondary:n.colors.text.primary},h?m.centred:null],children:e.title}),e.meta?_jsx(Text,{style:[m.meta,{fontSize:n.typography.fontSize.xs,color:n.colors.text.tertiary},h?m.centred:null],children:e.meta}):null,e.description?_jsx(Text,{style:[m.description,{fontSize:n.typography.fontSize.sm,color:n.colors.text.secondary},h?m.centred:null],children:e.description}):null,e.children]}),f=e.map((r,o)=>{const s=r.status??("feed"===t?"done":"upcoming"),i=r.color??(e=>{switch(e){case"done":return n.colors.success;case"current":return n.colors.warning;case"onHold":return n.colors.info;case"rejected":return n.colors.error;case"cancelled":case"skipped":return n.colors.text.tertiary;default:return n.colors.text.disabled}})(s),l=0===o,a=o===e.length-1,d=r.key??`${r.title}-${o}`;return _jsxs(View,h?{style:[m.hColumn,y>0?{width:y,flex:0}:null],children:[_jsxs(View,{style:m.hDotRow,children:[_jsx(View,{style:[m.hSegment,{marginRight:c,backgroundColor:l?"transparent":u}]}),renderDisc(r,i),_jsx(View,{style:[m.hSegment,{marginLeft:c,backgroundColor:a?"transparent":u}]})]}),_jsx(View,{style:m.hBody,children:renderText(r,s)})]}:{style:m.row,children:[_jsxs(View,{style:m.gutter,children:[renderDisc(r,i),a?null:_jsx(View,{style:[m.rail,{backgroundColor:u}]})]}),_jsx(View,{style:[m.body,{paddingBottom:a?0:n.spacing.lg}],children:renderText(r,s)})]},d)});return _jsx(View,{style:[h?m.hRow:null,o],onLayout:h?x:void 0,testID:s,children:f})};const buildStyles=(e,t,r,o)=>StyleSheet.create({row:{flexDirection:"row"},gutter:{width:Math.max(28,r+4),alignItems:"center"},disc:{width:r,height:r,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dot:{width:t,height:t,borderRadius:e.radius.pill,...smoothCorners},rail:{width:2,flex:1,marginTop:o,borderRadius:e.radius.pill,...smoothCorners},body:{flex:1,gap:e.spacing.xxs,paddingLeft:e.spacing.sm},hRow:{flexDirection:"row",alignItems:"flex-start"},hColumn:{flex:1,minWidth:0,alignItems:"center"},hDotRow:{alignSelf:"stretch",flexDirection:"row",alignItems:"center"},hSegment:{flex:1,height:2,borderRadius:e.radius.pill,...smoothCorners},hBody:{alignSelf:"stretch",alignItems:"center",paddingHorizontal:e.spacing.xs,marginTop:e.spacing.sm,gap:e.spacing.xxs},centred:{textAlign:"center"},title:{...fontFor(e,"semibold"),fontWeight:"600"},meta:{...fontFor(e,"normal")},description:{...fontFor(e,"normal")}});export default Timeline;
+"use strict";import{useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DOT=12,HALO=6,RAIL=2,GUTTER=28,DISC=24,HALO_OPACITY=.16;export const Timeline=({items:e,variant:t="feed",orientation:s="vertical",style:r,testID:o})=>{const i=useTheme(),l=i.space.xs,n=useMemo(()=>buildStyles(i),[i]),c="horizontal"===s,a=i.colors.border,[d,m]=useState(0),u=useCallback(e=>{const{width:t}=e.nativeEvent.layout;m(e=>e===t?e:t)},[]),h=c&&d>0&&e.length>0?d/e.length:0,renderDisc=(e,t)=>e.icon?_jsx(View,{style:n.disc,children:e.icon}):_jsx(View,{style:[n.disc,{backgroundColor:tintOf(t,.16,i.colors["bg-muted"])}],children:_jsx(View,{style:[n.dot,{backgroundColor:t}]})}),renderText=(e,t)=>_jsxs(_Fragment,{children:[_jsx(Text,{style:[n.title,{fontSize:c?i.text.sm.size:i.text.base.size,color:"upcoming"===t?i.colors["text-muted"]:i.colors["text-body"]},c?n.centred:null],children:e.title}),e.meta?_jsx(Text,{style:[n.meta,{fontSize:i.text.xs.size,color:i.colors["text-subtle"]},c?n.centred:null],children:e.meta}):null,e.description?_jsx(Text,{style:[n.description,{fontSize:i.text.sm.size,color:i.colors["text-muted"]},c?n.centred:null],children:e.description}):null,e.children]}),x=e.map((s,r)=>{const o=s.status??("feed"===t?"done":"upcoming"),d=s.color??(e=>{switch(e){case"done":return i.colors.success;case"current":return i.colors.warning;case"onHold":return i.colors.info;case"rejected":return i.colors.danger;case"cancelled":case"skipped":return i.colors["text-subtle"];default:return i.colors["text-disabled"]}})(o),m=0===r,u=r===e.length-1,x=s.key??`${s.title}-${r}`;return _jsxs(View,c?{style:[n.hColumn,h>0?{width:h,flex:0}:null],children:[_jsxs(View,{style:n.hDotRow,children:[_jsx(View,{style:[n.hSegment,{marginRight:l,backgroundColor:m?"transparent":a}]}),renderDisc(s,d),_jsx(View,{style:[n.hSegment,{marginLeft:l,backgroundColor:u?"transparent":a}]})]}),_jsx(View,{style:n.hBody,children:renderText(s,o)})]}:{style:n.row,children:[_jsxs(View,{style:n.gutter,children:[renderDisc(s,d),u?null:_jsx(View,{style:[n.rail,{backgroundColor:a}]})]}),_jsx(View,{style:[n.body,{paddingBottom:u?0:i.space.lg}],children:renderText(s,o)})]},x)});return _jsx(View,{style:[c?n.hRow:null,r],onLayout:c?u:void 0,testID:o,children:x})};const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row"},gutter:{width:Math.max(28,28),alignItems:"center"},disc:{width:24,height:24,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dot:{width:12,height:12,borderRadius:e.radius.pill,...smoothCorners},rail:{width:2,flex:1,marginTop:e.space.xs,borderRadius:e.radius.pill,...smoothCorners},body:{flex:1,gap:e.space.xxs,paddingLeft:e.space.sm},hRow:{flexDirection:"row",alignItems:"flex-start"},hColumn:{flex:1,minWidth:0,alignItems:"center"},hDotRow:{alignSelf:"stretch",flexDirection:"row",alignItems:"center"},hSegment:{flex:1,height:2,borderRadius:e.radius.pill,...smoothCorners},hBody:{alignSelf:"stretch",alignItems:"center",paddingHorizontal:e.space.xs,marginTop:e.space.sm,gap:e.space.xxs},centred:{textAlign:"center"},title:{...fontFor(e,"semibold"),fontWeight:"600"},meta:{...fontFor(e,"normal")},description:{...fontFor(e,"normal")}});export default Timeline;

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,fontSizeOf,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_SWIPE_DISMISS_THRESHOLD=80,DEFAULT_SWIPE_VELOCITY_THRESHOLD=.5,DEFAULT_STACK_OFFSET=8,DEFAULT_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,g=p?.iconCircleSize??28,h=fontSizeOf(a,p.iconGlyphText,"components.toast.iconGlyphText"),f=p?.tintBarWidth??0,S=p?.swipeDismissThreshold??80,b=p?.swipeVelocityThreshold??.5,A=p?.stackOffset??8,v=p?.stackScaleStep??.04,x=p?.stackMinScale??.9,y=p?.defaultDurationMs??3e3,w=p?.enableSwipeDismiss??!0,T=p?.enterSpringDamping??18,M=p?.enterSpringStiffness??180,D=p?.enterSpringMass??1,_="top"===c?-120:120,V=useRef(createAnimatedValue(r.reduced?0:_)).current,C=useRef(createAnimatedValue(0)).current,R=useRef(createAnimatedValue(0)).current,E=useRef(!1),N="top"===c?t*A:-t*A,I=Math.max(1-t*v,x),k=useRef(createAnimatedValue(N)).current;useEffect(()=>{setNativeValue(k,N)},[N,k]);const O=useMemo(()=>Animated.add(V,k),[V,k]),P=void 0!==e.action,j=e.duration??y,L=j>0&&P&&"web"===Platform.OS?Math.max(j,8e3):j,F=L<=0||P&&!0===s?.screenReaderOn,H=!0===e.countdown&&!F,z=useRef(createAnimatedValue(1)).current,B=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),G=useRef({touch:!1,pan:!1,hover:!1}),U=useRef(()=>{}),W=useRef({id:e.id,totalMs:L,shownAt:i,runtime:s,persistent:F,animateBar:!1});W.current={id:e.id,totalMs:L,shownAt:i,runtime:s,persistent:F,animateBar:H&&!r.reduced};const $=useCallback(()=>{const e=B.current,t=W.current,n=G.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(z,e.remaining/t.totalMs)}const i=!(t.persistent||E.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,U.current()},e.remaining),t.animateBar&&Animated.timing(z,{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),z.stopAnimation())},[z]),dismiss=()=>{if(E.current)return;E.current=!0,$();const t=[Animated.timing(R,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.easing.accelerate),useNativeDriver:!0})];r.reduced||t.push(Animated.timing(V,{toValue:_,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.easing.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};U.current=dismiss,useEffect(()=>{const e=r.reduced?Animated.timing(R,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(V,{toValue:0,damping:T,stiffness:M,mass:D,useNativeDriver:!0}),Animated.timing(R,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{$()},[F,$]),useEffect(()=>()=>{const e=B.current,t=W.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),z.stopAnimation(),e.initialised&&t.totalMs>0&&!E.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[z]);const K=useCallback((e,t)=>{G.current[e]=t,$()},[$]),X=useCallback(()=>K("touch",!0),[K]),Y=useCallback(e=>K("touch",(e.nativeEvent.touches?.length??0)>0),[K]),q=useCallback(()=>K("hover",!0),[K]),J=useCallback(()=>K("hover",!1),[K]),Q=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>K("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(C,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(R,n)},onPanResponderTerminate:()=>{if(K("pan",!1),r.reduced)return setNativeValue(C,0),void Animated.timing(R,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(C,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(R,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>S||Math.abs(i.vx)>b){const t=i.dx>=0?1:-1;E.current=!0,K("pan",!1);const s=[Animated.timing(R,{toValue:0,duration:o,useNativeDriver:!0})];r.reduced||s.push(Animated.timing(C,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(s).start(()=>n(e.id))}else K("pan",!1),r.reduced?(setNativeValue(C,0),Animated.timing(R,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(C,{toValue:0,useNativeDriver:!0}),Animated.spring(R,{toValue:1,useNativeDriver:!0})]).start()}}),[C,R,K,S,b,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]),Z={accessibilityActions:DISMISS_ACTIONS,onAccessibilityAction:e=>{"dismiss"===e.nativeEvent.actionName&&dismiss()}},[ee,te]=useState(0),ne=useMemo(()=>z.interpolate({inputRange:[0,1],outputRange:[-ee,0]}),[z,ee]),ie=e.description?`${e.message}. ${e.description}`:e.message,se=e.action&&H?`${e.action.label}, ${Math.ceil(L/1e3)} seconds`:e.action?.label;return _jsxs(Animated.View,{...w?Q.panHandlers:{},...P?{}:{accessible:!0,...Z},..."web"===Platform.OS?{onPointerEnter:q,onPointerLeave:J}:{},onTouchStart:X,onTouchEnd:Y,onTouchCancel:Y,accessibilityLabel:ie,testID:e.testID,style:[u.container,{backgroundColor:a.colors.background.elevated,borderRadius:a.radius.lg,...smoothCorners,padding:a.spacing.md,...a.shadows.md,shadowColor:a.shadows.md.shadowColor,opacity:R,transform:[{translateY:O},{translateX:C},{scale:I}]},e.style,e.containerStyle],children:[f>0?_jsx(View,{style:[u.tintBar,{width:f,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:g,height:g,borderRadius:a.radius.pill,...smoothCorners,backgroundColor:d+"22"},e.iconCircleStyle],children:_jsx(Text,{style:[u.iconGlyph,{color:m,fontSize:h}],accessible:!1,children:t})}):null})(),_jsxs(View,{style:u.textBlock,children:[_jsx(Text,{style:[u.message,{color:a.colors.text.primary,fontSize:a.typography.fontSize.base,...fontFor(a,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?_jsx(Text,{style:[u.description,{color:a.colors.text.secondary,fontSize:a.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]}),e.action?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:se,hitSlop:ACTION_HIT_SLOP,...Z,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.typography.fontSize.sm,...fontFor(a,"semibold")},numberOfLines:1,children:e.action.label})}):null]}),H?_jsxs(View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",onLayout:e=>te(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&&ee>0?_jsx(Animated.View,{style:[u.countdownFill,{backgroundColor:d,transform:[{translateX:ne}]}]}):null]}):null]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"error":return e.colors.error;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors.text.primary}},inkFor=(e,t)=>{switch(t){case"success":return e.colors.toneText.success;case"error":return e.colors.toneText.error;case"warning":return e.colors.toneText.warning;case"info":return e.colors.toneText.info;default:return e.colors.text.primary}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"error":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>StyleSheet.create({container:{overflow:"hidden",marginVertical:e.spacing.xs},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:e.spacing.sm},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:e.spacing.md},iconGlyph:{fontWeight:"700",lineHeight:19},textBlock:{flex:1,paddingRight:e.spacing.sm},message:{lineHeight:20},description:{marginTop:e.spacing.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.spacing.sm,paddingVertical:e.spacing.xs,minHeight:e.components.toast.actionMinHeight,borderRadius:e.radius.md,...smoothCorners,marginLeft:e.spacing.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{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;

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

@@ -1 +1 @@
-"use strict";import{Logger}from"@webority/mobile-core";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Platform,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Toast from"./Toast.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=createContext(null),ToastHostContext=createContext(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const o=e?.[t??"default"];return void 0===o?defaultHaptic(t):o};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=useState(!1);return useEffect(()=>{if("web"===Platform.OS)return;let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(o=>{e&&t(o)});const o=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,o.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi;export const ToastProvider=({children:e,maxVisible:t=3,topOffset:o,bottomOffset:s,defaultDuration:r,haptics:n})=>{const i=useRef({defaultDuration:r,haptics:n});i.current={defaultDuration:r,haptics:n};const[a,u]=useState([]),[c,d]=useState([]),l=useScreenReaderEnabled(),f=useRef(new Map),m=useRef(new Map);useEffect(()=>{const e=new Set(a.map(e=>e.id));for(const[t,o]of[...f.current])e.has(t)||(f.current.delete(t),o());for(const t of[...m.current.keys()])e.has(t)||m.current.delete(t)},[a]),useEffect(()=>{const e=f.current;return()=>{for(const[t,o]of[...e])e.delete(t),o()}},[]);const p=useMemo(()=>({screenReaderOn:l,readRemaining:e=>m.current.get(e),writeRemaining:(e,t)=>{m.current.set(e,t)}}),[l]),h=useCallback(e=>{u(t=>t.filter(t=>t.id!==e))},[]),g=useCallback(()=>{u([])},[]),x=useCallback(e=>{const o=makeId(),{defaultDuration:s,haptics:r}=i.current,n={...e,duration:e.duration??s,id:o,shownAt:Date.now()},a=void 0!==e.haptic?e.haptic:resolveHaptics(r,e.variant);return!1!==a&&triggerHaptic(a),announce(e.description?`${e.message}. ${e.description}`:e.message,{polite:"error"!==e.variant}),u(o=>{const s=[...void 0===e.key?o:o.filter(t=>t.key!==e.key),n];return s.length>t?s.slice(s.length-t):s}),o},[t]),v=useCallback((e,t)=>{const{onUndo:o,onCommit:s,undoLabel:r,duration:n,...i}=t,a={id:""},u=x({...i,message:e,duration:0===n?0:Math.max(n??6e3,6e3),countdown:!0,action:{label:r??"Undo",onPress:()=>{f.current.delete(a.id),o()}}});return a.id=u,s&&f.current.set(u,s),u},[x]),w=useMemo(()=>({show:x,undo:v,hide:h,hideAll:g}),[x,v,h,g]);useEffect(()=>(providerCount+=1,setActiveApi(w),()=>{providerCount-=1,providerCount<=0&&(providerCount=0,setActiveApi(null))}),[w]);const b=useCallback(e=>{d(t=>[...t,e])},[]),_=useCallback(e=>{d(t=>t.filter(t=>t!==e))},[]),y=c.length>0?c[c.length-1]:null,A=useMemo(()=>({register:b,unregister:_,activeHostId:y,queue:a,hide:h,topOffset:o,bottomOffset:s,runtime:p}),[b,_,y,a,h,o,s,p]);return _jsx(ToastContext.Provider,{value:w,children:_jsxs(ToastHostContext.Provider,{value:A,children:[e,null===y?_jsx(ToastLayers,{queue:a,onDismiss:h,topOffset:o,bottomOffset:s,runtime:p}):null]})})};let warnedHost=!1;const warnHostWithoutProvider=()=>{warnedHost||(warnedHost=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))};export const ToastHost=()=>{const e=useContext(ToastHostContext),[t]=useState(makeHostId),o=e?.register,s=e?.unregister;return useEffect(()=>{if(o&&s)return o(t),()=>s(t);warnHostWithoutProvider()},[o,s,t]),e&&e.activeHostId===t?_jsx(ToastLayers,{queue:e.queue,onDismiss:e.hide,topOffset:e.topOffset,bottomOffset:e.bottomOffset,runtime:e.runtime}):null};const ToastLayers=({queue:e,onDismiss:t,topOffset:o,bottomOffset:s,runtime:r})=>{const n=useTheme(),i=useSafeAreaInsets(),a=useMemo(()=>buildStyles(),[]),u=e.filter(e=>"top"===(e.position??"bottom")),c=e.filter(e=>"bottom"===(e.position??"bottom"));return _jsxs(_Fragment,{children:[_jsx(View,{testID:"toast-layer-top",pointerEvents:"box-none",style:[a.layer,a.top,{top:(o??i.top)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:u.map((e,o)=>_jsx(Toast,{toast:e,index:u.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))}),_jsx(View,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[a.layer,a.bottom,{bottom:(s??i.bottom)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:c.map((e,o)=>_jsx(Toast,{toast:e,index:c.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))})]})};export const useToast=()=>{const e=useContext(ToastContext);if(!e)throw new Error("useToast must be used within a <ToastProvider>.");return e};let warned=!1;const warnNoProvider=()=>{warned||(warned=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root."))},proxy=e=>{const t=getActiveApi();return t?e(t):(warnNoProvider(),"")};export const toast={show:e=>proxy(t=>t.show(e)),undo:(e,t)=>proxy(o=>o.undo(e,t)),success:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"success"})),error:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"error"})),warning:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"warning"})),info:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"info"})),hideAll:()=>{const e=getActiveApi();e?e.hideAll():warnNoProvider()}};const buildStyles=()=>StyleSheet.create({layer:{position:"absolute",left:0,right:0},top:{alignItems:"stretch"},bottom:{alignItems:"stretch"}});
+"use strict";import{Logger}from"@webority/mobile-core";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Platform,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Toast from"./Toast.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=createContext(null),ToastHostContext=createContext(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"danger":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const o=e?.[t??"default"];return void 0===o?defaultHaptic(t):o};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=useState(!1);return useEffect(()=>{if("web"===Platform.OS)return;let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(o=>{e&&t(o)});const o=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,o.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi;export const ToastProvider=({children:e,maxVisible:t=3,topOffset:o,bottomOffset:s,defaultDuration:r,haptics:n})=>{const a=useRef({defaultDuration:r,haptics:n});a.current={defaultDuration:r,haptics:n};const[i,u]=useState([]),[c,d]=useState([]),l=useScreenReaderEnabled(),f=useRef(new Map),m=useRef(new Map);useEffect(()=>{const e=new Set(i.map(e=>e.id));for(const[t,o]of[...f.current])e.has(t)||(f.current.delete(t),o());for(const t of[...m.current.keys()])e.has(t)||m.current.delete(t)},[i]),useEffect(()=>{const e=f.current;return()=>{for(const[t,o]of[...e])e.delete(t),o()}},[]);const p=useMemo(()=>({screenReaderOn:l,readRemaining:e=>m.current.get(e),writeRemaining:(e,t)=>{m.current.set(e,t)}}),[l]),h=useCallback(e=>{u(t=>t.filter(t=>t.id!==e))},[]),g=useCallback(()=>{u([])},[]),x=useCallback(e=>{const o=makeId(),{defaultDuration:s,haptics:r}=a.current,n={...e,duration:e.duration??s,id:o,shownAt:Date.now()},i=void 0!==e.haptic?e.haptic:resolveHaptics(r,e.variant);return!1!==i&&triggerHaptic(i),announce(e.description?`${e.message}. ${e.description}`:e.message,{polite:"danger"!==e.variant}),u(o=>{const s=[...void 0===e.key?o:o.filter(t=>t.key!==e.key),n];return s.length>t?s.slice(s.length-t):s}),o},[t]),v=useCallback((e,t)=>{const{onUndo:o,onCommit:s,undoLabel:r,duration:n,...a}=t,i={id:""},u=x({...a,message:e,duration:0===n?0:Math.max(n??6e3,6e3),countdown:!0,action:{label:r??"Undo",onPress:()=>{f.current.delete(i.id),o()}}});return i.id=u,s&&f.current.set(u,s),u},[x]),w=useMemo(()=>({show:x,undo:v,hide:h,hideAll:g}),[x,v,h,g]);useEffect(()=>(providerCount+=1,setActiveApi(w),()=>{providerCount-=1,providerCount<=0&&(providerCount=0,setActiveApi(null))}),[w]);const b=useCallback(e=>{d(t=>[...t,e])},[]),_=useCallback(e=>{d(t=>t.filter(t=>t!==e))},[]),y=c.length>0?c[c.length-1]:null,A=useMemo(()=>({register:b,unregister:_,activeHostId:y,queue:i,hide:h,topOffset:o,bottomOffset:s,runtime:p}),[b,_,y,i,h,o,s,p]);return _jsx(ToastContext.Provider,{value:w,children:_jsxs(ToastHostContext.Provider,{value:A,children:[e,null===y?_jsx(ToastLayers,{queue:i,onDismiss:h,topOffset:o,bottomOffset:s,runtime:p}):null]})})};let warnedHost=!1;const warnHostWithoutProvider=()=>{warnedHost||(warnedHost=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))};export const ToastHost=()=>{const e=useContext(ToastHostContext),[t]=useState(makeHostId),o=e?.register,s=e?.unregister;return useEffect(()=>{if(o&&s)return o(t),()=>s(t);warnHostWithoutProvider()},[o,s,t]),e&&e.activeHostId===t?_jsx(ToastLayers,{queue:e.queue,onDismiss:e.hide,topOffset:e.topOffset,bottomOffset:e.bottomOffset,runtime:e.runtime}):null};const ToastLayers=({queue:e,onDismiss:t,topOffset:o,bottomOffset:s,runtime:r})=>{const n=useTheme(),a=useSafeAreaInsets(),i=useMemo(()=>buildStyles(),[]),u=e.filter(e=>"top"===(e.position??"bottom")),c=e.filter(e=>"bottom"===(e.position??"bottom"));return _jsxs(_Fragment,{children:[_jsx(View,{testID:"toast-layer-top",pointerEvents:"box-none",style:[i.layer,i.top,{top:(o??a.top)+n.space.sm,paddingHorizontal:n.space.md}],children:u.map((e,o)=>_jsx(Toast,{toast:e,index:u.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))}),_jsx(View,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[i.layer,i.bottom,{bottom:(s??a.bottom)+n.space.sm,paddingHorizontal:n.space.md}],children:c.map((e,o)=>_jsx(Toast,{toast:e,index:c.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))})]})};export const useToast=()=>{const e=useContext(ToastContext);if(!e)throw new Error("useToast must be used within a <ToastProvider>.");return e};let warned=!1;const warnNoProvider=()=>{warned||(warned=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root."))},proxy=e=>{const t=getActiveApi();return t?e(t):(warnNoProvider(),"")};export const toast={show:e=>proxy(t=>t.show(e)),undo:(e,t)=>proxy(o=>o.undo(e,t)),success:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"success"})),error:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"danger"})),warning:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"warning"})),info:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"info"})),hideAll:()=>{const e=getActiveApi();e?e.hideAll():warnNoProvider()}};const buildStyles=()=>StyleSheet.create({layer:{position:"absolute",left:0,right:0},top:{alignItems:"stretch"},bottom:{alignItems:"stretch"}});

package/lib/module/components/Tooltip/RichTooltipBody.js

@@ -1 +1 @@
-"use strict";import{useMemo}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RichTooltipBody=({title:e,content:t,action:s,onAction:o,focusRef:i,actionRef:r,messageStyle:n})=>{const a=useTheme(),l=useMemo(()=>buildStyles(a),[a]);return _jsxs(View,{style:l.card,children:[e?_jsx(Text,{ref:i,variant:"label",weight:"semibold",accessibilityRole:"header",children:e}):null,"string"==typeof t?_jsx(Text,{ref:e?void 0:i,variant:"bodySmall",color:"secondary",style:n,children:t}):t,s?_jsx(View,{style:l.actions,children:_jsx(Button,{ref:r,title:s.label,variant:"ghost",size:"sm",accessibilityLabel:s.accessibilityLabel,onPress:o})}):null]})};const buildStyles=e=>StyleSheet.create({card:{gap:e.spacing.xs,paddingHorizontal:e.spacing.md,paddingTop:e.spacing.md,paddingBottom:e.spacing.sm,backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,...e.shadows.lg},actions:{flexDirection:"row",justifyContent:"flex-end",marginTop:e.spacing.xs}});
+"use strict";import{useMemo}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RichTooltipBody=({title:e,content:t,action:s,onAction:o,focusRef:i,actionRef:r,messageStyle:a})=>{const n=useTheme(),l=useMemo(()=>buildStyles(n),[n]);return _jsxs(View,{style:l.card,children:[e?_jsx(Text,{ref:i,variant:"label",weight:"semibold",accessibilityRole:"header",children:e}):null,"string"==typeof t?_jsx(Text,{ref:e?void 0:i,variant:"bodySmall",color:"secondary",style:a,children:t}):t,s?_jsx(View,{style:l.actions,children:_jsx(Button,{ref:r,title:s.label,variant:"ghost",size:"sm",accessibilityLabel:s.accessibilityLabel,onPress:o})}):null]})};const buildStyles=e=>StyleSheet.create({card:{gap:e.space.xs,paddingHorizontal:e.space.md,paddingTop:e.space.md,paddingBottom:e.space.sm,backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,...e.shadow.popover},actions:{flexDirection:"row",justifyContent:"flex-end",marginTop:e.space.xs}});

package/lib/module/components/Tooltip/Tooltip.js

@@ -1 +1 @@
-"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,spaceOf,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,S="rich"===r,R=e.trigger??(S?"press":"longPress"),T=useTheme(),_=usePresenceMotion(),A=useSafeAreaInsets(),[w,x]=useModalInsets(),v=useMemo(()=>({...A,top:w.top,bottom:w.bottom}),[A,w]),j=useWindowDimensions(),P=useMemo(()=>buildStyles(T),[T]),C=T.components.tooltip,E=spaceOf(T,C?.gap??"sm","components.tooltip.gap"),M=spaceOf(T,C?.screenPadding??"sm","components.tooltip.screenPadding"),D=C?.pressAutoHideMs??4e3,H=C?.arrowHalfWidth??4,L=C?.arrowHeight??6,O=C?.arrowCornerPadding??12,W=C?.lineHeight??18,I=c??(S?280:C?.maxWidth??240),V="press"===R&&!S,F=(C?.enableScaleAnimation??!1)&&!_.reduced,k=C?.exitDurationMs??150,N="manual"===R||"boolean"==typeof a,[U,B]=useState(!1),z=N?Boolean(a):U,[G,X]=useState(null),[Y,q]=useState({width:0,height:0}),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(null),ee=useRef(!1),te=useRef(!1),oe=useRef(createAnimatedValue(z||!F?1:.85)).current,re=useRef(createAnimatedValue(z?1:0)).current,se=useRef(null),ne=useRef(!1),[ie,ae]=useState(z),le=useCallback(e=>{N||B(e),l?.(e)},[N,l]),ue=useCallback(()=>{J.current&&J.current.measureInWindow((e,t,o,r)=>{X({x:e,y:t,width:o,height:r})})},[]),ce=useCallback(e=>{ue(),le(!0)},[ue,le]),me=useCallback(()=>{le(!1)},[le]),de=useRef(me);de.current=me;const fe=useCallback(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():S&&focusHost(K.current??J.current)},[S]);useEffect(()=>{if(z)return te.current=!0,ee.current=!1,claimAnchoredSurface(()=>de.current());te.current&&(te.current=!1,ee.current=!0)},[z]),useEffect(()=>{z&&ae(!0)},[z]);const pe=useRef(ie);useEffect(()=>{pe.current&&!ie&&"ios"!==Platform.OS&&fe(),pe.current=ie},[ie,fe]);const he=useCallback(()=>{$.current=n?.onPress??null,me()},[n,me]);useEffect(()=>{if(!ne.current)return ne.current=!0,z&&(ue(),V&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},D))),()=>{se.current&&(clearTimeout(se.current),se.current=null)};let e;if(z){ue();const t=[Animated.timing(re,{toValue:1,duration:_.duration("fast"),useNativeDriver:!0})];F?t.push(Animated.spring(oe,{toValue:1,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(oe,1),e=Animated.parallel(t),e.start(),V&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},D))}else{const t=[Animated.timing(re,{toValue:0,duration:_.reduced?_.duration("fast"):k,easing:Easing.bezier(...T.motion.easing.accelerate),useNativeDriver:!0})];F&&t.push(Animated.timing(oe,{toValue:.85,duration:k,easing:Easing.bezier(...T.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ae(!1)}),se.current&&(clearTimeout(se.current),se.current=null)}return()=>{e?.stop(),se.current&&(clearTimeout(se.current),se.current=null)}},[z]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===Y.width&&o===Y.height||q({width:t,height:o})},ge=useMemo(()=>resolveTooltipPosition({anchor:G,size:Y,placement:i,rich:S,viewport:{width:j.width,height:j.height,insets:v},maxWidth:I,gap:E,padding:M,arrowCornerPadding:O}),[G,Y,i,S,j.width,j.height,v,I,E,M,O]),be=null!==G&&Y.width>0,ye=z&&be;useEffect(()=>{if(!S||!ye)return;const e="web"===Platform.OS?Z:Q,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[S,ye]),useEffect(()=>{!S&&ye&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[S,ye,t]);const Se=o.props,Re=useMemo(()=>mergeRefs(Se.ref,K),[Se.ref]),Te={};"longPress"!==R||Se.contextMenu?"press"===R&&(Te.onPress=e=>{Se.onPress?.(e),ce(e)}):(Te.onLongPress=ce,Te.accessibilityHint="Long press for more info"),S&&(Te.ref=Re);const Ae=React.cloneElement(o,Te),we=d??("string"==typeof t?t:"Tooltip"),xe=useMemo(()=>{if(!m)return null;const e=S?T.colors.background.elevated:T.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:H,borderRightWidth:H,borderBottomWidth:L,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-L,left:ge.arrowOffset-H,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-L,left:ge.arrowOffset-H}:"left"===ge.placement?{...t,right:-L,top:ge.arrowOffset-H,transform:[{rotate:"90deg"}]}:{...t,left:-L,top:ge.arrowOffset-H,transform:[{rotate:"-90deg"}]}},[m,ge,T,S,H,L]),ve={position:"absolute",top:ge.top,left:ge.left,maxWidth:I,opacity:z&&!be?0:re,transform:[{scale:oe}]},je=xe?_jsx(View,{style:[xe,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:J,collapsable:!1,onLayout:ue,testID:y,children:Ae}),_jsx(Modal,{visible:ie,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:me,onDismiss:fe,children:_jsxs(ModalSafeArea,{onInsets:x,children:[S?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button"}),ie?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:he,focusRef:Q,actionRef:Z,messageStyle:g}),je]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button",children:ie?_jsxs(Animated.View,{accessibilityRole:"web"===Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:we,onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(View,{style:[P.tooltip,{backgroundColor:T.colors.background.inverse,borderRadius:T.radius.md,...smoothCorners,paddingHorizontal:T.spacing.md,paddingVertical:T.spacing.sm,...T.shadows.lg,shadowColor:T.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:T.colors.text.inverse,fontSize:T.typography.fontSize.sm,lineHeight:W},g],children:t}):t}),je]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;
+"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const PRESS_AUTO_HIDE_MS=4e3,ARROW_HALF_WIDTH=4,ARROW_HEIGHT=6,ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,MESSAGE_LINE_HEIGHT=18,EXIT_DURATION_MS=150,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:f,style:d,containerStyle:p,arrowStyle:h,messageStyle:b,closeLabel:g="Close tooltip",testID:y}=e,S="rich"===r,R=e.trigger??(S?"press":"longPress"),T=useTheme(),_=usePresenceMotion(),A=useSafeAreaInsets(),[w,v]=useModalInsets(),x=useMemo(()=>({...A,top:w.top,bottom:w.bottom}),[A,w]),j=useWindowDimensions(),P=useMemo(()=>buildStyles(T),[T]),C=T.space.sm,M=T.space.sm,E=c??(S?280:240),D="press"===R&&!S,H=(T.settings.components.tooltip?.enableScaleAnimation??!1)&&!_.reduced,I="manual"===R||"boolean"==typeof a,[L,O]=useState(!1),V=I?Boolean(a):L,[W,F]=useState(null),[k,N]=useState({width:0,height:0}),B=useRef(null),z=useRef(null),U=useRef(null),G=useRef(null),X=useRef(null),Y=useRef(!1),q=useRef(!1),J=useRef(createAnimatedValue(V||!H?1:.85)).current,K=useRef(createAnimatedValue(V?1:0)).current,Q=useRef(null),Z=useRef(!1),[$,ee]=useState(V),te=useCallback(e=>{I||O(e),l?.(e)},[I,l]),oe=useCallback(()=>{B.current&&B.current.measureInWindow((e,t,o,r)=>{F({x:e,y:t,width:o,height:r})})},[]),re=useCallback(e=>{oe(),te(!0)},[oe,te]),se=useCallback(()=>{te(!1)},[te]),ne=useRef(se);ne.current=se;const ie=useCallback(()=>{if(!Y.current)return;Y.current=!1;const e=X.current;X.current=null,e?e():S&&focusHost(z.current??B.current)},[S]);useEffect(()=>{if(V)return q.current=!0,Y.current=!1,claimAnchoredSurface(()=>ne.current());q.current&&(q.current=!1,Y.current=!0)},[V]),useEffect(()=>{V&&ee(!0)},[V]);const ae=useRef($);useEffect(()=>{ae.current&&!$&&"ios"!==Platform.OS&&ie(),ae.current=$},[$,ie]);const le=useCallback(()=>{X.current=n?.onPress??null,se()},[n,se]);useEffect(()=>{if(!Z.current)return Z.current=!0,V&&(oe(),D&&(Q.current&&clearTimeout(Q.current),Q.current=setTimeout(()=>{se()},4e3))),()=>{Q.current&&(clearTimeout(Q.current),Q.current=null)};let e;if(V){oe();const t=[Animated.timing(K,{toValue:1,duration:_.duration("fast"),useNativeDriver:!0})];H?t.push(Animated.spring(J,{toValue:1,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(J,1),e=Animated.parallel(t),e.start(),D&&(Q.current&&clearTimeout(Q.current),Q.current=setTimeout(()=>{se()},4e3))}else{const t=[Animated.timing(K,{toValue:0,duration:_.reduced?_.duration("fast"):150,easing:Easing.bezier(...T.motion.ease.accelerate),useNativeDriver:!0})];H&&t.push(Animated.timing(J,{toValue:.85,duration:150,easing:Easing.bezier(...T.motion.ease.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ee(!1)}),Q.current&&(clearTimeout(Q.current),Q.current=null)}return()=>{e?.stop(),Q.current&&(clearTimeout(Q.current),Q.current=null)}},[V]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===k.width&&o===k.height||N({width:t,height:o})},ue=useMemo(()=>resolveTooltipPosition({anchor:W,size:k,placement:i,rich:S,viewport:{width:j.width,height:j.height,insets:x},maxWidth:E,gap:C,padding:M,arrowCornerPadding:12}),[W,k,i,S,j.width,j.height,x,E,C,M]),ce=null!==W&&k.width>0,me=V&&ce;useEffect(()=>{if(!S||!me)return;const e="web"===Platform.OS?G:U,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[S,me]),useEffect(()=>{!S&&me&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[S,me,t]);const fe=o.props,de=useMemo(()=>mergeRefs(fe.ref,z),[fe.ref]),pe={};"longPress"!==R||fe.contextMenu?"press"===R&&(pe.onPress=e=>{fe.onPress?.(e),re(e)}):(pe.onLongPress=re,pe.accessibilityHint="Long press for more info"),S&&(pe.ref=de);const he=React.cloneElement(o,pe),be=f??("string"==typeof t?t:"Tooltip"),ge=useMemo(()=>{if(!m)return null;const e={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:4,borderRightWidth:4,borderBottomWidth:6,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:S?T.colors.surface:T.colors["surface-inverse"]};return"top"===ue.placement?{...e,bottom:-6,left:ue.arrowOffset-4,transform:[{rotate:"180deg"}]}:"bottom"===ue.placement?{...e,top:-6,left:ue.arrowOffset-4}:"left"===ue.placement?{...e,right:-6,top:ue.arrowOffset-4,transform:[{rotate:"90deg"}]}:{...e,left:-6,top:ue.arrowOffset-4,transform:[{rotate:"-90deg"}]}},[m,ue,T,S]),ye={position:"absolute",top:ue.top,left:ue.left,maxWidth:E,opacity:V&&!ce?0:K,transform:[{scale:J}]},Se=ge?_jsx(View,{style:[ge,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:B,collapsable:!1,onLayout:oe,testID:y,children:he}),_jsx(Modal,{visible:$,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:se,onDismiss:ie,children:_jsxs(ModalSafeArea,{onInsets:v,children:[S?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?se:void 0,accessibilityLabel:g,accessibilityRole:"button"}),$?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ye,d,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:le,focusRef:U,actionRef:G,messageStyle:b}),Se]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?se:void 0,accessibilityLabel:g,accessibilityRole:"button",children:$?_jsxs(Animated.View,{accessibilityRole:"web"===Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:be,onLayout:handleContentLayout,style:[ye,d,p],children:[_jsx(View,{style:[P.tooltip,{backgroundColor:T.colors["surface-inverse"],borderRadius:T.radius.md,...smoothCorners,paddingHorizontal:T.space.md,paddingVertical:T.space.sm,...T.shadow.popover,shadowColor:T.shadow.popover.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:T.colors["text-inverse"],fontSize:T.text.sm.size,lineHeight:18},b],children:t}):t}),Se]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;

package/lib/module/components/Tour/Tour.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,spaceOf,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,s,n)=>t({x:e,y:i,width:s,height:n})):t(null)}),isOnScreen=(e,t)=>e.width>0&&e.height>0&&e.x<t.width&&e.y<t.height&&e.x+e.width>0&&e.y+e.height>0,Tour=({tourId:e,steps:t,visible:i,onClose:s,seenStore:n,labels:o,haptic:r,testID:a})=>{const l=useTheme(),c=usePresenceMotion().duration("fast"),d=useMemo(()=>buildStyles(l),[l]),u=useWindowDimensions(),h=useRef(u);h.current=u;const p=spaceOf(l,l.components.tooltip?.gap??"sm","components.tooltip.gap"),m=spaceOf(l,l.components.tooltip?.screenPadding??"sm","components.tooltip.screenPadding"),[x,g]=useState(null),[y,f]=useState(0),b=useRef(createAnimatedValue(0)).current,w=useRef(t);w.current=t;const S=useRef(s);S.current=s;const j=useRef(n);j.current=n;const k=useCallback(async(e,t)=>{for(let i=e;i>=0&&i<w.current.length;i+=t){const e=await measureInWindow(w.current[i].target);if(e&&isOnScreen(e,h.current))return{index:i,rect:e}}return null},[]);useEffect(()=>{if(!i)return void g(null);let t=!1;return(async()=>{const i=j.current;if(i&&await i.isSeen(e))return void(t||S.current("alreadySeen"));const s=await k(0,1);t||(s?(f(s.index),g(s)):S.current("noTargets"))})(),()=>{t=!0}},[i,e,k]),useEffect(()=>{if(!x)return;const e=w.current[x.index],t=`Step ${x.index+1} of ${w.current.length}`;AccessibilityInfo.announceForAccessibility([t,e.title,e.description].filter(Boolean).join(". ")),b.setValue(0);const i=Animated.timing(b,{toValue:1,duration:c,useNativeDriver:!0});return i.start(),()=>i.stop()},[x,b,c]);const v=useCallback(async t=>{g(null),await(j.current?.markSeen(e)),S.current(t)},[e]),_=useCallback(async()=>{if(!x)return;const e=await k(x.index+1,1);e?g(e):await v("finished")},[x,k,v]),C=useCallback(async()=>{if(!x)return;const e=await k(x.index-1,-1);e&&g(e)},[x,k]),I=useCallback(()=>{v("skipped")},[v]),M=x?t[x.index]:void 0,D=!!x&&x.index===t.length-1,R=l.spacing.xs,T=x?{x:x.rect.x-R,y:x.rect.y-R,width:x.rect.width+2*R,height:x.rect.height+2*R}:null,V=Math.min(u.width-2*m,360),W=T?(()=>{const e=T.x+T.width/2,t=Math.max(m,Math.min(e-V/2,u.width-V-m)),i=T.y,s=u.height-(T.y+T.height);return s>=i?{left:t,top:T.y+T.height+p,maxHeight:Math.max(s-p-m,0)}:{left:t,bottom:u.height-T.y+p,maxHeight:Math.max(i-p-m,0)}})():null,A=l.colors.background.overlay,P=T?Math.min(M?.radius?l.radius[M.radius]+R:l.radius.md,Math.min(T.width,T.height)/2):0,z=Math.max(u.width,u.height);return _jsx(Modal,{visible:null!==x,onRequestClose:I,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:d.transparent,contentStyle:d.transparent,accessibilityLabel:M?.title??M?.description,haptic:r,testID:a,children:T&&W&&M?_jsxs(View,{style:StyleSheet.absoluteFill,children:[_jsx(View,{style:[d.dim,{borderColor:A,borderWidth:z,top:T.y-z,left:T.x-z,width:T.width+2*z,height:T.height+2*z,borderRadius:P+z}]}),_jsx(View,{pointerEvents:"none",style:[d.highlight,{top:T.y,left:T.x,width:T.width,height:T.height,borderRadius:P}]}),_jsxs(Animated.View,{accessibilityLiveRegion:"polite",style:[d.card,W,{width:V,opacity:b}],testID:a?`${a}-card`:void 0,children:[_jsx(Text,{style:d.position,children:`Step ${(x?.index??0)+1} of ${t.length}`}),M.title?_jsx(Text,{style:d.title,accessibilityRole:"header",children:M.title}):null,_jsx(Text,{style:d.description,children:M.description}),_jsxs(View,{style:d.actions,children:[_jsx(Button,{title:o?.skip??"Skip",variant:"ghost",size:"sm",haptic:r,onPress:I,testID:a?`${a}-skip`:void 0}),_jsxs(View,{style:d.navigation,children:[x&&x.index>y?_jsx(Button,{title:o?.back??"Back",variant:"outline",size:"sm",haptic:r,onPress:()=>{C()},testID:a?`${a}-back`:void 0}):null,_jsx(Button,{title:D?o?.done??"Done":o?.next??"Next",size:"sm",haptic:r,onPress:()=>{_()},testID:a?`${a}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=e=>StyleSheet.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:e.colors.primary,borderRadius:e.radius.md,...smoothCorners},card:{position:"absolute",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,padding:e.spacing.lg,gap:e.spacing.sm,...e.shadows.lg},position:{color:e.colors.text.tertiary,fontSize:e.typography.fontSize.xs},title:{color:e.colors.text.primary,fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold},description:{color:e.colors.text.secondary,fontSize:e.typography.fontSize.sm},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:e.spacing.xs},navigation:{flexDirection:"row",gap:e.spacing.sm}});export{Tour};export default Tour;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,s,n)=>t({x:e,y:i,width:s,height:n})):t(null)}),isOnScreen=(e,t)=>e.width>0&&e.height>0&&e.x<t.width&&e.y<t.height&&e.x+e.width>0&&e.y+e.height>0,Tour=({tourId:e,steps:t,visible:i,onClose:s,seenStore:n,labels:r,haptic:o,testID:a})=>{const l=useTheme(),c=usePresenceMotion().duration("fast"),u=useMemo(()=>buildStyles(l),[l]),d=useWindowDimensions(),h=useRef(d);h.current=d;const m=l.space.sm,x=l.space.sm,[p,f]=useState(null),[g,y]=useState(0),b=useRef(createAnimatedValue(0)).current,w=useRef(t);w.current=t;const S=useRef(s);S.current=s;const j=useRef(n);j.current=n;const k=useCallback(async(e,t)=>{for(let i=e;i>=0&&i<w.current.length;i+=t){const e=await measureInWindow(w.current[i].target);if(e&&isOnScreen(e,h.current))return{index:i,rect:e}}return null},[]);useEffect(()=>{if(!i)return void f(null);let t=!1;return(async()=>{const i=j.current;if(i&&await i.isSeen(e))return void(t||S.current("alreadySeen"));const s=await k(0,1);t||(s?(y(s.index),f(s)):S.current("noTargets"))})(),()=>{t=!0}},[i,e,k]),useEffect(()=>{if(!p)return;const e=w.current[p.index],t=`Step ${p.index+1} of ${w.current.length}`;AccessibilityInfo.announceForAccessibility([t,e.title,e.description].filter(Boolean).join(". ")),b.setValue(0);const i=Animated.timing(b,{toValue:1,duration:c,useNativeDriver:!0});return i.start(),()=>i.stop()},[p,b,c]);const v=useCallback(async t=>{f(null),await(j.current?.markSeen(e)),S.current(t)},[e]),_=useCallback(async()=>{if(!p)return;const e=await k(p.index+1,1);e?f(e):await v("finished")},[p,k,v]),C=useCallback(async()=>{if(!p)return;const e=await k(p.index-1,-1);e&&f(e)},[p,k]),I=useCallback(()=>{v("skipped")},[v]),M=p?t[p.index]:void 0,D=!!p&&p.index===t.length-1,R=l.space.xs,T=p?{x:p.rect.x-R,y:p.rect.y-R,width:p.rect.width+2*R,height:p.rect.height+2*R}:null,V=Math.min(d.width-2*x,360),A=T?(()=>{const e=T.x+T.width/2,t=Math.max(x,Math.min(e-V/2,d.width-V-x)),i=T.y,s=d.height-(T.y+T.height);return s>=i?{left:t,top:T.y+T.height+m,maxHeight:Math.max(s-m-x,0)}:{left:t,bottom:d.height-T.y+m,maxHeight:Math.max(i-m-x,0)}})():null,W=l.colors.scrim,z=T?Math.min(M?.radius?l.radius[M.radius]+R:l.radius.md,Math.min(T.width,T.height)/2):0,B=Math.max(d.width,d.height);return _jsx(Modal,{visible:null!==p,onRequestClose:I,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:u.transparent,contentStyle:u.transparent,accessibilityLabel:M?.title??M?.description,haptic:o,testID:a,children:T&&A&&M?_jsxs(View,{style:StyleSheet.absoluteFill,children:[_jsx(View,{style:[u.dim,{borderColor:W,borderWidth:B,top:T.y-B,left:T.x-B,width:T.width+2*B,height:T.height+2*B,borderRadius:z+B}]}),_jsx(View,{pointerEvents:"none",style:[u.highlight,{top:T.y,left:T.x,width:T.width,height:T.height,borderRadius:z}]}),_jsxs(Animated.View,{accessibilityLiveRegion:"polite",style:[u.card,A,{width:V,opacity:b}],testID:a?`${a}-card`:void 0,children:[_jsx(Text,{style:u.position,children:`Step ${(p?.index??0)+1} of ${t.length}`}),M.title?_jsx(Text,{style:u.title,accessibilityRole:"header",children:M.title}):null,_jsx(Text,{style:u.description,children:M.description}),_jsxs(View,{style:u.actions,children:[_jsx(Button,{title:r?.skip??"Skip",variant:"ghost",size:"sm",haptic:o,onPress:I,testID:a?`${a}-skip`:void 0}),_jsxs(View,{style:u.navigation,children:[p&&p.index>g?_jsx(Button,{title:r?.back??"Back",variant:"outline",size:"sm",haptic:o,onPress:()=>{C()},testID:a?`${a}-back`:void 0}):null,_jsx(Button,{title:D?r?.done??"Done":r?.next??"Next",size:"sm",haptic:o,onPress:()=>{_()},testID:a?`${a}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=e=>StyleSheet.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:e.colors.primary,borderRadius:e.radius.md,...smoothCorners},card:{position:"absolute",backgroundColor:e.colors.surface,borderRadius:e.radius.lg,...smoothCorners,padding:e.space.lg,gap:e.space.sm,...e.shadow.popover},position:{color:e.colors["text-subtle"],fontSize:e.text.xs.size},title:{color:e.colors["text-body"],fontSize:e.text.lg.size,fontWeight:e.weight.semibold},description:{color:e.colors["text-muted"],fontSize:e.text.sm.size},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:e.space.xs},navigation:{flexDirection:"row",gap:e.space.sm}});export{Tour};export default Tour;

package/lib/module/components/TypingIndicator/TypingIndicator.js

@@ -1 +1 @@
-"use strict";import{useEffect,useMemo}from"react";import{StyleSheet,View}from"react-native";import Animated,{cancelAnimation,useAnimatedStyle,useSharedValue,withDelay,withRepeat,withSequence,withTiming}from"react-native-reanimated";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DOT=6,DIM=.3,PULSE_MS=400,STAGGER_MS=160,STILL_OPACITY=[1,.65,.3],Dot=({index:e,still:t,colour:i,dotStyle:s})=>{const o=useSharedValue(.3);useEffect(()=>{if(!t)return o.value=withDelay(160*e,withRepeat(withSequence(withTiming(1,{duration:400}),withTiming(.3,{duration:400})),-1)),()=>cancelAnimation(o)},[t,e,o]);const r=useAnimatedStyle(()=>({opacity:o.value}));return _jsx(Animated.View,{style:[s,{backgroundColor:i},t?{opacity:STILL_OPACITY[e]}:r]})};export const TypingIndicator=({label:e,accessibilityLabel:t,bubble:i=!0,style:s,testID:o})=>{const r=useTheme(),a=useMemo(()=>buildStyles(r),[r]),n=useReducedMotion(),l=r.colors.text.tertiary;return _jsxs(View,{style:[a.root,i?a.bubble:null,s],accessible:!0,accessibilityRole:"progressbar",accessibilityLabel:e??t??"Typing",accessibilityState:{busy:!0},"aria-busy":!0,testID:o,children:[_jsx(View,{style:a.dots,children:[0,1,2].map(e=>_jsx(Dot,{index:e,still:n,colour:l,dotStyle:a.dot},e))}),e?_jsx(Text,{variant:"bodySmall",color:"secondary",children:e}):null]})};const buildStyles=e=>StyleSheet.create({dot:{width:6,height:6,borderRadius:e.radius.pill,...smoothCorners},root:{flexDirection:"row",alignItems:"center",alignSelf:"flex-start",gap:e.spacing.sm,marginTop:e.spacing.sm},bubble:{backgroundColor:e.colors.background.secondary,borderRadius:e.radius.xl,...smoothCorners,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm+e.spacing.xs},dots:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs}});export default TypingIndicator;
+"use strict";import{useEffect,useMemo}from"react";import{StyleSheet,View}from"react-native";import Animated,{cancelAnimation,useAnimatedStyle,useSharedValue,withDelay,withRepeat,withSequence,withTiming}from"react-native-reanimated";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DOT=6,DIM=.3,PULSE_MS=400,STAGGER_MS=160,STILL_OPACITY=[1,.65,.3],Dot=({index:e,still:t,colour:i,dotStyle:s})=>{const o=useSharedValue(.3);useEffect(()=>{if(!t)return o.value=withDelay(160*e,withRepeat(withSequence(withTiming(1,{duration:400}),withTiming(.3,{duration:400})),-1)),()=>cancelAnimation(o)},[t,e,o]);const r=useAnimatedStyle(()=>({opacity:o.value}));return _jsx(Animated.View,{style:[s,{backgroundColor:i},t?{opacity:STILL_OPACITY[e]}:r]})};export const TypingIndicator=({label:e,accessibilityLabel:t,bubble:i=!0,style:s,testID:o})=>{const r=useTheme(),a=useMemo(()=>buildStyles(r),[r]),l=useReducedMotion(),n=r.colors["text-subtle"];return _jsxs(View,{style:[a.root,i?a.bubble:null,s],accessible:!0,accessibilityRole:"progressbar",accessibilityLabel:e??t??"Typing",accessibilityState:{busy:!0},"aria-busy":!0,testID:o,children:[_jsx(View,{style:a.dots,children:[0,1,2].map(e=>_jsx(Dot,{index:e,still:l,colour:n,dotStyle:a.dot},e))}),e?_jsx(Text,{variant:"bodySmall",color:"secondary",children:e}):null]})};const buildStyles=e=>StyleSheet.create({dot:{width:6,height:6,borderRadius:e.radius.pill,...smoothCorners},root:{flexDirection:"row",alignItems:"center",alignSelf:"flex-start",gap:e.space.sm,marginTop:e.space.sm},bubble:{backgroundColor:e.colors["bg-subtle"],borderRadius:e.radius.xl,...smoothCorners,paddingHorizontal:e.space.md,paddingVertical:e.space.sm+e.space.xs},dots:{flexDirection:"row",alignItems:"center",gap:e.space.xs}});export default TypingIndicator;

package/lib/module/components/WheelPicker/Wheel.js

@@ -1 +1 @@
-"use strict";import{memo,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Platform,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{createAnimatedValue,setNativeValue}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const WHEEL_VISIBLE_ITEMS=5;export const WHEEL_CENTER_OFFSET=Math.floor(2.5);const HAPTIC_DEBOUNCE_MS=35,WEB_SETTLE_MS=120,SCALE_STOPS=[-2,-1,0,1,2],WheelRow=memo(({label:e,index:t,scrollY:n,itemHeight:a,selected:r,theme:i,reducedMotion:s,onPress:l,editor:o})=>{const{opacity:c,scale:u}=useMemo(()=>{const e=Animated.subtract(Animated.divide(n,a),t);return{opacity:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.3,.6,1,.6,.3],extrapolate:"clamp"}),scale:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.85,.95,1.05,.95,.85],extrapolate:"clamp"})}},[n,a,t]),m=_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:1.5,style:{fontSize:i.typography.fontSize.xl,color:r?i.colors.text.primary:i.colors.text.secondary,fontWeight:r?i.typography.fontWeight.semibold:i.typography.fontWeight.medium,letterSpacing:i.typography.letterSpacing.normal},children:e});return _jsx(Animated.View,{style:[styles.row,{height:a},s?{opacity:c}:{opacity:c,transform:[{scale:u}]}],accessible:!1,importantForAccessibility:"no",children:o??(l?_jsx(Pressable,{focusable:!1,accessible:!1,onPress:()=>l(t),style:styles.rowPress,children:m}):m)})});export const Wheel=({label:e,items:t,selectedIndex:n,onIndexChange:a,itemHeight:r,width:i,theme:s,haptic:l,disabled:o,reducedMotion:c,typeable:u,testID:m})=>{const d="web"===Platform.OS,[f,y]=useState(null),p=useRef(!1),b=useRef(null),h=useRef(createAnimatedValue(n*r)).current,x=useRef(n*r),g=useRef(n*r),S=useRef(n),E=useRef(0),v=useRef(null),T=useRef(()=>{}),M=s.components.timePicker?.hapticDebounceMs??35,w=t.length-1;useEffect(()=>{S.current=n;const e=n*r;if(g.current===e)return;if(g.current=e,Math.abs(x.current-e)<1)return;x.current=e,d||setNativeValue(h,e);const t=requestAnimationFrame(()=>{b.current?.scrollToOffset({offset:e,animated:!1})});return()=>cancelAnimationFrame(t)},[n,r,h,d]),useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const A=useCallback((e,r)=>{if(!(e===n||e<0||e>w)){if("accessibility"===r){const e=resolveHaptic(l,"denseTick");e&&triggerHaptic(e)}if("keyboard"!==r){const n=t[e];n&&announce(n.accessibilityLabel??n.label)}a(e)}},[n,w,t,l,a]),_=useCallback(()=>{!o&&u&&(p.current=!0,y(String(t[n]?.value??"")))},[o,u,t,n]),C=useCallback(e=>{if(!p.current)return;p.current=!1,y(null);const n=e.trim();if(!/^\d+$/.test(n))return;const a=Number(n),r=t.findIndex(e=>e.value===a);r>=0&&A(r,"keyboard")},[t,A]);T.current=()=>{v.current=null;const e=Math.max(0,Math.min(w,Math.round(x.current/r))),t=e*r;Math.abs(x.current-t)>=1&&b.current?.scrollToOffset({offset:t,animated:!c}),A(e,"scroll")};const R=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:h}}}],{useNativeDriver:!d,listener:e=>{const t=e.nativeEvent.contentOffset.y;x.current=t;const n=Math.round(t/r);if(n!==S.current&&n>=0&&n<=w){const e=Date.now();if(e-E.current>=M){const t=resolveHaptic(l,"denseTick");t&&triggerHaptic(t),E.current=e}S.current=n}d&&(v.current&&clearTimeout(v.current),v.current=setTimeout(()=>T.current(),120))}}),[h,r,w,l,M,d]),j=useCallback(e=>{const t=e.nativeEvent.contentOffset.y;A(Math.max(0,Math.min(w,Math.round(t/r))),"scroll")},[A,w,r]),k=useCallback(e=>{if(o)return;const t=e.nativeEvent.actionName;"increment"===t?A(Math.min(w,n+1),"accessibility"):"decrement"===t&&A(Math.max(0,n-1),"accessibility")},[o,A,w,n]),I=useCallback(e=>{o||b.current?.scrollToOffset({offset:e*r,animated:!c})},[o,r,c]),L=useCallback(({item:t,index:a})=>{const i=a===n,l=i&&null!==f;return _jsx(WheelRow,{label:t.label,index:a,scrollY:h,itemHeight:r,selected:i,theme:s,reducedMotion:c,onPress:i&&u?_:d?I:void 0,editor:l?_jsx(TextInput,{autoFocus:!0,selectTextOnFocus:!0,keyboardType:"number-pad",returnKeyType:"done",accessibilityLabel:e,value:f,onChangeText:y,onSubmitEditing:()=>C(f),onBlur:()=>C(f),style:{width:"100%",padding:s.spacing.none,textAlign:"center",fontSize:s.typography.fontSize.xl,color:s.colors.text.primary,fontWeight:s.typography.fontWeight.semibold,letterSpacing:s.typography.letterSpacing.normal}}):void 0})},[h,r,n,s,c,d,I,u,_,f,C,e]),P=useCallback((e,t)=>`${String(e.value)}-${t}`,[]),F=useCallback((e,t)=>({length:r,offset:r*t,index:t}),[r]),O=t[n]?t[n].accessibilityLabel??t[n].label:"",H=d?{focusable:!0,role:"spinbutton","aria-label":e,"aria-valuetext":O,"aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":w,"aria-disabled":o,onKeyDown:e=>{if(o)return;const t={ArrowDown:Math.min(w,n+1),PageDown:Math.min(w,n+1),ArrowUp:Math.max(0,n-1),PageUp:Math.max(0,n-1),Home:0,End:w}[e.key];void 0!==t&&(e.preventDefault?.(),A(t,"keyboard"))}}:void 0;return _jsxs(View,{style:[void 0===i?styles.columnFlex:{width:i},{height:5*r},styles.column,o?styles.disabled:null],testID:m,...H,children:[d?null:_jsx(View,{pointerEvents:"none",style:styles.a11yLayer,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:e,accessibilityValue:{text:O},accessibilityState:{disabled:Boolean(o)},"aria-disabled":Boolean(o),accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:k}),_jsx(Animated.FlatList,{ref:b,data:t,keyExtractor:P,renderItem:L,getItemLayout:F,showsVerticalScrollIndicator:!1,snapToInterval:r,snapToAlignment:"start",decelerationRate:"fast",bounces:!1,scrollEnabled:!o,nestedScrollEnabled:!0,scrollEventThrottle:16,onScroll:R,onMomentumScrollEnd:j,contentContainerStyle:{paddingVertical:r*WHEEL_CENTER_OFFSET},initialScrollIndex:n,style:[styles.list,{height:5*r}],importantForAccessibility:"no-hide-descendants","aria-hidden":!0})]})};const styles=StyleSheet.create({column:{overflow:"hidden"},columnFlex:{flex:1},disabled:{opacity:.5},list:{flexGrow:0},row:{alignItems:"center",justifyContent:"center"},rowPress:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",flex:1},a11yLayer:{...StyleSheet.absoluteFill,zIndex:2}});
+"use strict";import{memo,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Platform,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{createAnimatedValue,setNativeValue}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const WHEEL_VISIBLE_ITEMS=5;export const WHEEL_CENTER_OFFSET=Math.floor(2.5);const HAPTIC_DEBOUNCE_MS=35,WEB_SETTLE_MS=120,SCALE_STOPS=[-2,-1,0,1,2],WheelRow=memo(({label:e,index:t,scrollY:n,itemHeight:a,selected:s,theme:i,reducedMotion:r,onPress:l,editor:o})=>{const{opacity:c,scale:u}=useMemo(()=>{const e=Animated.subtract(Animated.divide(n,a),t);return{opacity:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.3,.6,1,.6,.3],extrapolate:"clamp"}),scale:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.85,.95,1.05,.95,.85],extrapolate:"clamp"})}},[n,a,t]),d=_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:1.5,style:{fontSize:i.text.xl.size,color:s?i.colors["text-body"]:i.colors["text-muted"],fontWeight:s?i.weight.semibold:i.weight.medium,letterSpacing:i["letter-spacing"].normal},children:e});return _jsx(Animated.View,{style:[styles.row,{height:a},r?{opacity:c}:{opacity:c,transform:[{scale:u}]}],accessible:!1,importantForAccessibility:"no",children:o??(l?_jsx(Pressable,{focusable:!1,accessible:!1,onPress:()=>l(t),style:styles.rowPress,children:d}):d)})});export const Wheel=({label:e,items:t,selectedIndex:n,onIndexChange:a,itemHeight:s,width:i,theme:r,haptic:l,disabled:o,reducedMotion:c,typeable:u,testID:d})=>{const m="web"===Platform.OS,[f,b]=useState(null),y=useRef(!1),h=useRef(null),x=useRef(createAnimatedValue(n*s)).current,p=useRef(n*s),g=useRef(n*s),S=useRef(n),E=useRef(0),v=useRef(null),T=useRef(()=>{}),w=t.length-1;useEffect(()=>{S.current=n;const e=n*s;if(g.current===e)return;if(g.current=e,Math.abs(p.current-e)<1)return;p.current=e,m||setNativeValue(x,e);const t=requestAnimationFrame(()=>{h.current?.scrollToOffset({offset:e,animated:!1})});return()=>cancelAnimationFrame(t)},[n,s,x,m]),useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const M=useCallback((e,s)=>{if(!(e===n||e<0||e>w)){if("accessibility"===s){const e=resolveHaptic(l,"denseTick");e&&triggerHaptic(e)}if("keyboard"!==s){const n=t[e];n&&announce(n.accessibilityLabel??n.label)}a(e)}},[n,w,t,l,a]),A=useCallback(()=>{!o&&u&&(y.current=!0,b(String(t[n]?.value??"")))},[o,u,t,n]),_=useCallback(e=>{if(!y.current)return;y.current=!1,b(null);const n=e.trim();if(!/^\d+$/.test(n))return;const a=Number(n),s=t.findIndex(e=>e.value===a);s>=0&&M(s,"keyboard")},[t,M]);T.current=()=>{v.current=null;const e=Math.max(0,Math.min(w,Math.round(p.current/s))),t=e*s;Math.abs(p.current-t)>=1&&h.current?.scrollToOffset({offset:t,animated:!c}),M(e,"scroll")};const C=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:x}}}],{useNativeDriver:!m,listener:e=>{const t=e.nativeEvent.contentOffset.y;p.current=t;const n=Math.round(t/s);if(n!==S.current&&n>=0&&n<=w){const e=Date.now();if(e-E.current>=35){const t=resolveHaptic(l,"denseTick");t&&triggerHaptic(t),E.current=e}S.current=n}m&&(v.current&&clearTimeout(v.current),v.current=setTimeout(()=>T.current(),120))}}),[x,s,w,l,m]),R=useCallback(e=>{const t=e.nativeEvent.contentOffset.y;M(Math.max(0,Math.min(w,Math.round(t/s))),"scroll")},[M,w,s]),j=useCallback(e=>{if(o)return;const t=e.nativeEvent.actionName;"increment"===t?M(Math.min(w,n+1),"accessibility"):"decrement"===t&&M(Math.max(0,n-1),"accessibility")},[o,M,w,n]),I=useCallback(e=>{o||h.current?.scrollToOffset({offset:e*s,animated:!c})},[o,s,c]),k=useCallback(({item:t,index:a})=>{const i=a===n,l=i&&null!==f;return _jsx(WheelRow,{label:t.label,index:a,scrollY:x,itemHeight:s,selected:i,theme:r,reducedMotion:c,onPress:i&&u?A:m?I:void 0,editor:l?_jsx(TextInput,{autoFocus:!0,selectTextOnFocus:!0,keyboardType:"number-pad",returnKeyType:"done",accessibilityLabel:e,value:f,onChangeText:b,onSubmitEditing:()=>_(f),onBlur:()=>_(f),style:{width:"100%",padding:r.space.none,textAlign:"center",fontSize:r.text.xl.size,color:r.colors["text-body"],fontWeight:r.weight.semibold,letterSpacing:r["letter-spacing"].normal}}):void 0})},[x,s,n,r,c,m,I,u,A,f,_,e]),L=useCallback((e,t)=>`${String(e.value)}-${t}`,[]),F=useCallback((e,t)=>({length:s,offset:s*t,index:t}),[s]),O=t[n]?t[n].accessibilityLabel??t[n].label:"",P=m?{focusable:!0,role:"spinbutton","aria-label":e,"aria-valuetext":O,"aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":w,"aria-disabled":o,onKeyDown:e=>{if(o)return;const t={ArrowDown:Math.min(w,n+1),PageDown:Math.min(w,n+1),ArrowUp:Math.max(0,n-1),PageUp:Math.max(0,n-1),Home:0,End:w}[e.key];void 0!==t&&(e.preventDefault?.(),M(t,"keyboard"))}}:void 0;return _jsxs(View,{style:[void 0===i?styles.columnFlex:{width:i},{height:5*s},styles.column,o?styles.disabled:null],testID:d,...P,children:[m?null:_jsx(View,{pointerEvents:"none",style:styles.a11yLayer,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:e,accessibilityValue:{text:O},accessibilityState:{disabled:Boolean(o)},"aria-disabled":Boolean(o),accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:j}),_jsx(Animated.FlatList,{ref:h,data:t,keyExtractor:L,renderItem:k,getItemLayout:F,showsVerticalScrollIndicator:!1,snapToInterval:s,snapToAlignment:"start",decelerationRate:"fast",bounces:!1,scrollEnabled:!o,nestedScrollEnabled:!0,scrollEventThrottle:16,onScroll:C,onMomentumScrollEnd:R,contentContainerStyle:{paddingVertical:s*WHEEL_CENTER_OFFSET},initialScrollIndex:n,style:[styles.list,{height:5*s}],importantForAccessibility:"no-hide-descendants","aria-hidden":!0})]})};const styles=StyleSheet.create({column:{overflow:"hidden"},columnFlex:{flex:1},disabled:{opacity:.5},list:{flexGrow:0},row:{alignItems:"center",justifyContent:"center"},rowPress:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",flex:1},a11yLayer:{...StyleSheet.absoluteFill,zIndex:2}});