@webority/mobile-ui 0.12.0 → 0.12.1

package/lib/module/components/Slider/Slider.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,Easing,runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{sliderToneInk}from"./valueText.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_MAP={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},VARIANT_SIZE_MAP={inset:{sm:{trackHeight:14,thumbDiameter:10},md:{trackHeight:20,thumbDiameter:14},lg:{trackHeight:26,thumbDiameter:18}},minimal:{sm:{trackHeight:2,thumbDiameter:14},md:{trackHeight:3,thumbDiameter:18},lg:{trackHeight:4,thumbDiameter:22}},bar:{sm:{trackHeight:20,thumbDiameter:20},md:{trackHeight:28,thumbDiameter:28},lg:{trackHeight:36,thumbDiameter:36}}},INSET_RING_RATIO=.3,MIN_THUMB_TOUCH=44,TONE_TO_COLOR_KEY={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),snapToStep=(e,t,a,r)=>{if(r<=0)return clamp(e,t,a);const i=Math.round((e-t)/r)*r+t,s=String(r).split(".")[1]?.length??0,n=s>0?Number(i.toFixed(s)):i;return clamp(n,t,a)},BUBBLE_GAP=2,BUBBLE_CARET=8,BUBBLE_WRAP_WIDTH=160,NO_SHADOW={shadowOpacity:0,elevation:0},defaultFormatLabel=e=>String(e),Slider=forwardRef((e,t)=>{const{min:a=0,max:r=100,step:i=1,disabled:s=!1,tone:n="primary",size:o="md",variant:l="default",showLabel:u=!1,snapThumb:c=!1,formatLabel:m=defaultFormatLabel,renderLabel:d,accessibilityLabel:h,haptic:b,style:g,containerStyle:p,trackStyle:f,fillStyle:y,thumbStyle:v,labelStyle:w,thumbPressScale:S,labelShowDuration:k,labelOpacity:C,testID:x}=e,_=useTheme(),A=_.components.slider,D=A?.[o],H=useMemo(()=>"default"===l?{trackHeight:D?.trackHeight??SIZE_MAP[o].trackHeight,thumbDiameter:D?.thumbDiameter??SIZE_MAP[o].thumbDiameter}:VARIANT_SIZE_MAP[l][o],[D,o,l]),M="inset"===l?H.trackHeight/2:0,O=A?.thumbPressAnimation??!1,E=S??A?.thumbPressScale??1.1,j=k??A?.labelShowDuration??_.motion.duration.fast,T=C??A?.labelOpacity??1,V=useMemo(()=>buildStyles(_,H),[_,H]),R=useMemo(()=>({damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass}),[_.motion.spring.snappy]),[I,P]=useState(0),W=_.colors[TONE_TO_COLOR_KEY[n]],L=sliderToneInk(_,n),N=!0===e.range,[X,B]=useControllableState({value:e.value,defaultValue:e.defaultValue??(N?[a,r]:a),onChange:e.onChange}),F=useSharedValue(0),G=useSharedValue(0),J=useSharedValue(N?X[0]:X),U=useSharedValue(N?X[1]:X),z=useSharedValue(0),Z=useSharedValue(0),K=useSharedValue(1),Y=useSharedValue(1),$="always"===u,q=useSharedValue($?1:0),Q=useSharedValue($?1:0),ee=useMemo(()=>10**(String(i).split(".")[1]?.length??0),[i]);useEffect(()=>()=>{cancelAnimation(F),cancelAnimation(G),cancelAnimation(K),cancelAnimation(Y),cancelAnimation(q),cancelAnimation(Q)},[F,G,K,Y,q,Q]);const te=useCallback((e,t)=>{const i=t-2*M;return r===a||i<=0?M:M+(e-a)/(r-a)*i},[a,r,M]),ae=useCallback((e,t)=>{const s=t-2*M;if(s<=0)return a;const n=clamp((e-M)/s,0,1);return snapToStep(a+n*(r-a),a,r,i)},[a,r,i,M]),re=useRef(!1),ie=_.motion.duration.fast,se=useRef(X);se.current=X;const ne=useRef(I);ne.current=I;const oe=useCallback((e=!1)=>{const t=ne.current;if(t<=0)return;const place=t=>e?withTiming(t,{duration:ie,easing:Easing.out(Easing.cubic)}):t,a=se.current;if(N){const[e,r]=a,i=Math.min(e,r),s=Math.max(e,r);J.value=i,U.value=s,F.value=place(te(i,t)),G.value=place(te(s,t))}else{const e=a;J.value=e,U.value=e,F.value=place(te(e,t))}},[N,te,J,U,F,G,ie]),[le,ue]=useState(0),ce=useRef(!1),me=useCallback(e=>{re.current=e,e||(ce.current=!0,ue(e=>e+1))},[]);useEffect(()=>{if(re.current)return;const e=ce.current;ce.current=!1,oe(e)},[JSON.stringify(X),I,le,oe]);const de=useCallback(e=>{const t=e.nativeEvent.layout.width;Z.value=t,P(t)},[Z]),he=useCallback((e,t)=>{B(N?[e,t]:e)},[N,B]),be=useCallback(()=>{const e=resolveHaptic(b,"selection");e&&triggerHaptic(e)},[b]),ge=useRef(he);ge.current=he;const pe=useRef(be);pe.current=be;const fe=useCallback((e,t)=>ge.current(e,t),[]),ye=useCallback(()=>pe.current(),[]),ve=Math.max(0,(44-H.thumbDiameter)/2),we=ve>0?ve:void 0,Se=useCallback(e=>{const t="low"===e?F:G,n="low"===e?J:U,o="low"===e?U:J,l="low"===e?K:Y,m="low"===e?q:Q,d="low"===e,h=a,b=r,g=i,p=ee,f=N,y=E,v=O,w=!0===u,S=c,k=T,C=j,x=R,_=M,follow=e=>{"worklet";const a=Z.value-2*_;if(a<=0||!Number.isFinite(e))return;const r=Math.min(Math.max(z.value+e,_),Z.value-_);let i=h+(r-_)/a*(b-h);g>0&&(i=Math.round((i-h)/g)*g+h,i=Math.round(i*p)/p),i=Math.min(Math.max(i,h),b),f&&(d&&i>o.value&&(i=o.value),!d&&i<o.value&&(i=o.value)),t.value=S||b===h?b===h?_:_+(i-h)/(b-h)*a:f?d?Math.min(r,G.value):Math.max(r,F.value):r,i!==n.value&&(n.value=i,i!==h&&i!==b||runOnJS(ye)(),runOnJS(fe)(J.value,U.value))},A=Gesture.Pan().enabled(!s).minDistance(0);return(void 0===we?A:A.hitSlop(we)).onStart(()=>{"worklet";runOnJS(me)(!0),z.value=t.value,v&&(l.value=withSpring(y,x)),w&&(m.value=withTiming(k,{duration:C,easing:Easing.out(Easing.cubic)})),runOnJS(ye)()}).onUpdate(e=>{"worklet";follow(e.translationX)}).onEnd(e=>{"worklet";follow(e.translationX),v&&(l.value=withSpring(1,x)),w&&(m.value=withTiming(0,{duration:C,easing:Easing.out(Easing.cubic)}))}).onFinalize(()=>{"worklet";runOnJS(me)(!1)})},[s,a,r,i,ee,N,E,O,u,c,T,j,R,M,we,fe,ye,me,F,G,J,U,K,Y,q,Q,z,Z]),ke=useMemo(()=>Se("low"),[Se]),Ce=useMemo(()=>Se("high"),[Se]),xe=useCallback(e=>{if(s||N||I<=0)return;const t=clamp(e.nativeEvent.locationX,0,I),a=ae(t,I);a!==J.value&&(be(),J.value=a,F.value=withTiming(te(a,I),{duration:_.motion.duration.fast,easing:Easing.out(Easing.cubic)}),he(a,a))},[s,N,I,ae,te,he,be,F,J,_.motion.duration.fast]),_e=useCallback(e=>{if(s)return;const t="increment"===e.nativeEvent.actionName?i:-i,n=i>0?Math.round(t*ee)/ee:t;if(N){const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,U.value);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,U.value))}else{const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,r);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,t))}},[s,i,ee,N,a,r,te,I,F,J,U,he,be]),Ae=H.thumbDiameter/2,De=s?_.colors.surface.disabled:W,He="inset"===l?{backgroundColor:De,borderColor:_.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*H.thumbDiameter)),...NO_SHADOW}:"minimal"===l?{backgroundColor:De,borderWidth:0}:"bar"===l?{backgroundColor:"transparent",borderWidth:0,...NO_SHADOW}:{backgroundColor:_.colors.background.elevated,borderColor:De},Me=useAnimatedStyle(()=>{const e=Z.value;if(e<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const t=s?.55:1;if(N){const a=Math.max(0,G.value-F.value+2*M);return{opacity:t,transform:[{translateX:F.value-M},{scaleX:a/e}]}}return{opacity:t,transform:[{translateX:F.value+M-e},{scaleX:1}]}}),Oe=useAnimatedStyle(()=>({transform:[{translateX:F.value-Ae},{scale:K.value}]})),Ee=useAnimatedStyle(()=>({transform:[{translateX:G.value-Ae},{scale:Y.value}]})),je=useAnimatedStyle(()=>({opacity:q.value})),Te=useAnimatedStyle(()=>({opacity:Q.value})),clampDisplay=e=>clamp(e,a,r),Ve=clampDisplay(N?Math.min(...X):X),Re=clampDisplay(N?Math.max(...X):X);return _jsx(View,{ref:t,style:[V.container,p,g],testID:x,accessibilityRole:"adjustable",accessibilityLabel:h,accessibilityState:{disabled:s},"aria-disabled":s,accessibilityValue:N?{min:a,max:r,now:Ve,text:`${Ve} to ${Re}`}:{min:a,max:r,now:Ve},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:_e,children:_jsx(Pressable,{onPress:xe,disabled:s||N,style:V.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsxs(View,{style:V.trackWrap,onLayout:de,children:[_jsxs(View,{style:V.trackClip,pointerEvents:"none",children:[_jsx(View,{style:[V.track,{backgroundColor:s?_.colors.surface.disabled:_.colors.border.primary},f]}),_jsx(Animated.View,{style:[V.fill,{backgroundColor:s?_.colors.surface.disabled:W},y,Me]})]}),_jsx(GestureDetector,{gesture:ke,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:Ae,...smoothCorners,opacity:s?.55:1},He,v,Oe],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,je],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Ve):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Ve)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}),N?_jsx(GestureDetector,{gesture:Ce,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:Ae,...smoothCorners,opacity:s?.55:1},He,v,Ee],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Te],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Re):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Re)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}):null]})})})});Slider.displayName="Slider";const buildStyles=(e,t)=>{const a=e.shadows.md,r=Math.max(t.thumbDiameter,t.trackHeight),i=r/2+4;return StyleSheet.create({container:{width:"100%",paddingVertical:i,justifyContent:"center"},trackTouch:{width:"100%",justifyContent:"center"},trackWrap:{width:"100%",height:r,justifyContent:"center"},trackClip:{position:"absolute",left:0,right:0,height:t.trackHeight,top:(r-t.trackHeight)/2,borderRadius:t.trackHeight/2,...smoothCorners,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:t.trackHeight/2,...smoothCorners},fill:{position:"absolute",top:0,left:0,width:"100%",height:t.trackHeight,borderRadius:t.trackHeight/2,...smoothCorners,transformOrigin:"left"},thumb:{position:"absolute",top:(r-t.thumbDiameter)/2,left:0,borderWidth:2,shadowColor:a.shadowColor,shadowOffset:a.shadowOffset,shadowOpacity:a.shadowOpacity,shadowRadius:a.shadowRadius,elevation:a.elevation,alignItems:"center",justifyContent:"center"},bubbleWrap:{position:"absolute",bottom:t.thumbDiameter+2,left:t.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,...smoothCorners,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.xxs,borderRadius:e.radius.md,...smoothCorners,minWidth:36,alignItems:"center",justifyContent:"center",...Platform.select({ios:{shadowColor:e.shadows.sm.shadowColor,shadowOffset:e.shadows.sm.shadowOffset,shadowOpacity:e.shadows.sm.shadowOpacity,shadowRadius:e.shadows.sm.shadowRadius},android:{elevation:e.shadows.sm.elevation},default:{}})},bubbleText:{color:e.colors.onPrimary,fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.semibold}})};export{Slider};export default Slider;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,Easing,runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{sliderToneInk}from"./valueText.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_MAP={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},VARIANT_SIZE_MAP={inset:{sm:{trackHeight:14,thumbDiameter:10},md:{trackHeight:20,thumbDiameter:14},lg:{trackHeight:26,thumbDiameter:18}},minimal:{sm:{trackHeight:2,thumbDiameter:14},md:{trackHeight:3,thumbDiameter:18},lg:{trackHeight:4,thumbDiameter:22}},bar:{sm:{trackHeight:20,thumbDiameter:20},md:{trackHeight:28,thumbDiameter:28},lg:{trackHeight:36,thumbDiameter:36}}},INSET_RING_RATIO=.3,MIN_THUMB_TOUCH=44,TONE_TO_COLOR_KEY={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),snapToStep=(e,t,a,r)=>{if(r<=0)return clamp(e,t,a);const i=Math.round((e-t)/r)*r+t,s=String(r).split(".")[1]?.length??0,n=s>0?Number(i.toFixed(s)):i;return clamp(n,t,a)},BUBBLE_GAP=2,BUBBLE_CARET=8,BUBBLE_WRAP_WIDTH=160,NO_SHADOW={shadowOpacity:0,elevation:0},defaultFormatLabel=e=>String(e),Slider=forwardRef((e,t)=>{const{min:a=0,max:r=100,step:i=1,disabled:s=!1,tone:n="primary",size:o="md",variant:l="default",showLabel:u=!1,snapThumb:c=!1,formatLabel:m=defaultFormatLabel,renderLabel:d,accessibilityLabel:h,haptic:b,style:g,containerStyle:p,trackStyle:f,fillStyle:y,thumbStyle:v,labelStyle:w,thumbPressScale:S,labelShowDuration:k,labelOpacity:C,testID:x}=e,_=useTheme(),A=_.components.slider,D=A?.[o],H=useMemo(()=>"default"===l?{trackHeight:D?.trackHeight??SIZE_MAP[o].trackHeight,thumbDiameter:D?.thumbDiameter??SIZE_MAP[o].thumbDiameter}:VARIANT_SIZE_MAP[l][o],[D,o,l]),M="inset"===l?H.trackHeight/2:0,O=A?.thumbPressAnimation??!1,E=S??A?.thumbPressScale??1.1,j=k??A?.labelShowDuration??_.motion.duration.fast,T=C??A?.labelOpacity??1,V=useMemo(()=>buildStyles(_,H),[_,H]),R=useMemo(()=>({damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass}),[_.motion.spring.snappy]),[I,P]=useState(0),W=_.colors[TONE_TO_COLOR_KEY[n]],L=sliderToneInk(_,n),N=!0===e.range,[X,B]=useControllableState({value:e.value,defaultValue:e.defaultValue??(N?[a,r]:a),onChange:e.onChange}),F=useSharedValue(0),G=useSharedValue(0),J=useSharedValue(N?X[0]:X),U=useSharedValue(N?X[1]:X),z=useSharedValue(0),Z=useSharedValue(0),K=useSharedValue(1),Y=useSharedValue(1),$="always"===u,q=useSharedValue($?1:0),Q=useSharedValue($?1:0),ee=useMemo(()=>10**(String(i).split(".")[1]?.length??0),[i]);useEffect(()=>()=>{cancelAnimation(F),cancelAnimation(G),cancelAnimation(K),cancelAnimation(Y),cancelAnimation(q),cancelAnimation(Q)},[F,G,K,Y,q,Q]);const te=useCallback((e,t)=>{const i=t-2*M;return r===a||i<=0?M:M+(e-a)/(r-a)*i},[a,r,M]),ae=useCallback((e,t)=>{const s=t-2*M;if(s<=0)return a;const n=clamp((e-M)/s,0,1);return snapToStep(a+n*(r-a),a,r,i)},[a,r,i,M]),re=useRef(!1),ie=_.motion.duration.fast,se=useRef(X);se.current=X;const ne=useRef(I);ne.current=I;const oe=useCallback((e=!1)=>{const t=ne.current;if(t<=0)return;const place=t=>e?withTiming(t,{duration:ie,easing:Easing.out(Easing.cubic)}):t,a=se.current;if(N){const[e,r]=a,i=Math.min(e,r),s=Math.max(e,r);J.value=i,U.value=s,F.value=place(te(i,t)),G.value=place(te(s,t))}else{const e=a;J.value=e,U.value=e,F.value=place(te(e,t))}},[N,te,J,U,F,G,ie]),[le,ue]=useState(0),ce=useRef(!1),me=useCallback(e=>{re.current=e,e||(ce.current=!0,ue(e=>e+1))},[]);useEffect(()=>{if(re.current)return;const e=ce.current;ce.current=!1,oe(e)},[JSON.stringify(X),I,le,oe]);const de=useCallback(e=>{const t=e.nativeEvent.layout.width;Z.value=t,P(t)},[Z]),he=useCallback((e,t)=>{B(N?[e,t]:e)},[N,B]),be=useCallback(()=>{const e=resolveHaptic(b,"selection");e&&triggerHaptic(e)},[b]),ge=useRef(he);ge.current=he;const pe=useRef(be);pe.current=be;const fe=useCallback((e,t)=>ge.current(e,t),[]),ye=useCallback(()=>pe.current(),[]),ve=Math.max(0,(44-H.thumbDiameter)/2),we=ve>0?ve:void 0,Se=useCallback(e=>{const t="low"===e?F:G,n="low"===e?J:U,o="low"===e?U:J,l="low"===e?K:Y,m="low"===e?q:Q,d="low"===e,h=a,b=r,g=i,p=ee,f=N,y=E,v=O,w=!0===u,S=c,k=T,C=j,x=R,_=M,follow=e=>{"worklet";const a=Z.value-2*_;if(a<=0||!Number.isFinite(e))return;const r=Math.min(Math.max(z.value+e,_),Z.value-_);let i=h+(r-_)/a*(b-h);g>0&&(i=Math.round((i-h)/g)*g+h,i=Math.round(i*p)/p),i=Math.min(Math.max(i,h),b),f&&(d&&i>o.value&&(i=o.value),!d&&i<o.value&&(i=o.value)),t.value=S||b===h?b===h?_:_+(i-h)/(b-h)*a:f?d?Math.min(r,G.value):Math.max(r,F.value):r,i!==n.value&&(n.value=i,i!==h&&i!==b||runOnJS(ye)(),runOnJS(fe)(J.value,U.value))},A=Gesture.Pan().enabled(!s).minDistance(0);return(void 0===we?A:A.hitSlop(we)).onStart(()=>{"worklet";runOnJS(me)(!0),z.value=t.value,v&&(l.value=withSpring(y,x)),w&&(m.value=withTiming(k,{duration:C,easing:Easing.out(Easing.cubic)})),runOnJS(ye)()}).onUpdate(e=>{"worklet";follow(e.translationX)}).onEnd(e=>{"worklet";follow(e.translationX),v&&(l.value=withSpring(1,x)),w&&(m.value=withTiming(0,{duration:C,easing:Easing.out(Easing.cubic)}))}).onFinalize(()=>{"worklet";runOnJS(me)(!1)})},[s,a,r,i,ee,N,E,O,u,c,T,j,R,M,we,fe,ye,me,F,G,J,U,K,Y,q,Q,z,Z]),ke=useMemo(()=>Se("low"),[Se]),Ce=useMemo(()=>Se("high"),[Se]),xe=useCallback(e=>{if(s||N||I<=0)return;const t=clamp(e.nativeEvent.locationX,0,I),a=ae(t,I);a!==J.value&&(be(),J.value=a,F.value=withTiming(te(a,I),{duration:_.motion.duration.fast,easing:Easing.out(Easing.cubic)}),he(a,a))},[s,N,I,ae,te,he,be,F,J,_.motion.duration.fast]),Ae=useCallback(e=>{if(s)return;const t="increment"===e.nativeEvent.actionName?i:-i,n=i>0?Math.round(t*ee)/ee:t;if(N){const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,U.value);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,U.value))}else{const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,r);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,t))}},[s,i,ee,N,a,r,te,I,F,J,U,he,be]),De=H.thumbDiameter/2,He=s?_.colors.surface.disabled:W,Me="inset"===l?{backgroundColor:He,borderColor:_.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*H.thumbDiameter)),...NO_SHADOW}:"minimal"===l?{backgroundColor:He,borderWidth:0}:"bar"===l?{backgroundColor:"transparent",borderWidth:0,...NO_SHADOW}:{backgroundColor:_.colors.background.elevated,borderColor:He},Oe=useAnimatedStyle(()=>{const e=Z.value;if(e<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const t=s?.55:1;if(N){const a=Math.max(0,G.value-F.value+2*M);return{opacity:t,transform:[{translateX:F.value-M},{scaleX:a/e}]}}return{opacity:t,transform:[{translateX:F.value+M-e},{scaleX:1}]}}),Ee=useAnimatedStyle(()=>({transform:[{translateX:F.value-De},{scale:K.value}]})),je=useAnimatedStyle(()=>({transform:[{translateX:G.value-De},{scale:Y.value}]})),Te=useAnimatedStyle(()=>({opacity:q.value})),Ve=useAnimatedStyle(()=>({opacity:Q.value})),clampDisplay=e=>clamp(e,a,r),Re=clampDisplay(N?Math.min(...X):X),Ie=clampDisplay(N?Math.max(...X):X);return _jsx(View,{ref:t,style:[V.container,p,g],testID:x,accessibilityRole:"adjustable",accessibilityLabel:h,accessibilityState:{disabled:s},"aria-disabled":s,accessibilityValue:N?{min:a,max:r,now:Re,text:`${Re} to ${Ie}`}:{min:a,max:r,now:Re},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:Ae,children:_jsx(Pressable,{onPress:xe,disabled:s||N,style:V.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsxs(View,{style:V.trackWrap,onLayout:de,children:[_jsxs(View,{style:V.trackClip,pointerEvents:"none",children:[_jsx(View,{style:[V.track,{backgroundColor:s?_.colors.surface.disabled:_.colors.border.primary},f]}),_jsx(Animated.View,{style:[V.fill,{backgroundColor:s?_.colors.surface.disabled:W},y,Oe]})]}),_jsx(GestureDetector,{gesture:ke,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:De,...smoothCorners,opacity:s?.55:1},Me,v,Ee],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Te],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Re):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Re)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}),N?_jsx(GestureDetector,{gesture:Ce,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:De,...smoothCorners,opacity:s?.55:1},Me,v,je],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Ve],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Ie):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Ie)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}):null]})})})});Slider.displayName="Slider";const buildStyles=(e,t)=>{const a=e.shadows.md,r=Math.max(t.thumbDiameter,t.trackHeight),i=r/2+4;return StyleSheet.create({container:{width:"100%",paddingVertical:i,justifyContent:"center"},trackTouch:{width:"100%",justifyContent:"center"},trackWrap:{width:"100%",height:r,justifyContent:"center"},trackClip:{position:"absolute",left:0,right:0,height:t.trackHeight,top:(r-t.trackHeight)/2,borderRadius:t.trackHeight/2,...smoothCorners,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:t.trackHeight/2,...smoothCorners},fill:{position:"absolute",top:0,left:0,width:"100%",height:t.trackHeight,borderRadius:t.trackHeight/2,...smoothCorners,transformOrigin:"left"},thumb:{position:"absolute",top:(r-t.thumbDiameter)/2,left:0,borderWidth:2,shadowColor:a.shadowColor,shadowOffset:a.shadowOffset,shadowOpacity:a.shadowOpacity,shadowRadius:a.shadowRadius,elevation:a.elevation,alignItems:"center",justifyContent:"center"},bubbleWrap:{position:"absolute",bottom:t.thumbDiameter+2,left:t.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,...smoothCorners,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.xxs,borderRadius:e.radius.md,...smoothCorners,minWidth:36,alignItems:"center",justifyContent:"center",...Platform.select({ios:{shadowColor:e.shadows.sm.shadowColor,shadowOffset:e.shadows.sm.shadowOffset,shadowOpacity:e.shadows.sm.shadowOpacity,shadowRadius:e.shadows.sm.shadowRadius},android:{elevation:e.shadows.sm.elevation},default:{}})},bubbleText:{color:e.colors.onPrimary,fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.semibold}})};export{Slider};export default Slider;

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{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Button from"../Button/Button.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 range=(e,t,i=1)=>{const r=[];for(let a=e;a<=t;a+=i)r.push(a);return r},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:r,onClose:a,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:S,onClear:j,formatValue:T,triggerStyle:w,haptic:C}=e,D=void 0!==e.visible,[H,P]=useState(!1),A=D?t:H,V=D?m:m?`${m}-modal`:void 0,_=useTheme(),R=useSafeAreaInsets(),B=useMemo(()=>buildStyles(_),[_]),N=useRef(createAnimatedValue(0)).current,$=useRef(createAnimatedValue(40)).current,I=useRef(createAnimatedValue(0)).current,L=useRef(0),z=useCallback(()=>{D?a?.():P(!1)},[D,a]),F=useCallback(()=>{Animated.parallel([Animated.timing(N,{toValue:0,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!1}),Animated.timing($,{toValue:40,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>z())},[z,N,$,_.motion.duration.fast,_.motion.easing.accelerate]),{handleGesture:O}=useDragToDismiss({drag:I,travel:()=>L.current||320,onDismiss:F}),W=useMemo(()=>"24h"===s?range(0,23):range(1,12),[s]),E=useMemo(()=>range(0,59,o),[o]),G=useMemo(()=>["AM","PM"],[]),q=useMemo(()=>{const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),r=clampMinuteToStep(t,o),{displayHour:a,period:n}=from24h(e,s);return{displayHour:a,minute:r,period:n,hour24:e}},[i,s,o]),[U,Y]=useState(()=>{const e=W.indexOf(q.displayHour);return e>=0?e:0}),[J,K]=useState(()=>{const e=E.indexOf(q.minute);return e>=0?e:0}),[Q,X]=useState(()=>"PM"===q.period?1:0);useEffect(()=>{if(!A)return;const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),r=clampMinuteToStep(t,o),{displayHour:a,period:n}=from24h(e,s),l=W.indexOf(a);Y(l>=0?l:0);const u=E.indexOf(r);K(u>=0?u:0),X("PM"===n?1:0)},[A,i,s,o,W,E]),useEffect(()=>{let e;return A?(e=Animated.parallel([Animated.timing(N,{toValue:1,duration:_.motion.duration.normal,easing:Easing.out(Easing.cubic),useNativeDriver:!1}),Animated.spring($,{toValue:0,damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()):(N.setValue(0),setNativeValue($,40),setNativeValue(I,0)),()=>e?.stop()},[A,N,$,I,_.motion]);const Z=useCallback((e,t)=>{"hour"===e?Y(Math.max(0,W.indexOf(Number(t)))):"minute"===e?K(Math.max(0,E.indexOf(Number(t)))):X("PM"===t?1:0)},[W,E]),ee=useCallback(()=>{!1!==C&&triggerHaptic("selection"),F()},[F,C]),te=useCallback(()=>{const e=W[U]??0,t=G[Q]??"AM",i=to24h(e,t,s),a=E[J]??0;!1!==C&&triggerHaptic("notificationSuccess"),r?.({hour:i,minute:a}),F()},[W,U,G,Q,E,J,s,r,F,C]),ie=useMemo(()=>{const e=W[U]??0,t=E[J]??0;if("24h"===s)return`${pad2(e)}:${pad2(t)}`;const i=G[Q]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[W,U,E,J,G,Q,s]),re=useMemo(()=>W.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[W]),ae=useMemo(()=>E.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[E]),se=useMemo(()=>G.map(e=>({value:e,label:e})),[G]),oe=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:re,value:W[U]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:ae,value:E[J]??0,gapAfter:"12h"===s?_.spacing.md:void 0,testID:"time-picker-minute"}];return"12h"===s&&e.push({key:"period",label:"Period",items:se,value:G[Q]??"AM",testID:"time-picker-period"}),e},[re,ae,se,W,U,E,J,G,Q,s,_.spacing.md]),ne=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]),le=!D&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(T??ne)(i):void 0,ue=_jsx(Modal,{visible:A,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:F,testID:V,children:_jsxs(GestureHandlerRootView,{collapsable:!1,style:B.backdrop,children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:F,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsxs(Animated.View,{style:[B.sheet,{paddingBottom:Math.max(R.bottom,_.spacing.lg),transform:[{translateY:Animated.add($,I)}]},c,d],onLayout:e=>{L.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:n,children:[_jsx(GestureDetector,{gesture:O,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 ${ie}`,children:_jsx(Text,{style:B.summary,children:ie})}),_jsx(WheelPicker,{columns:oe,onChange:Z,haptic:C,style:B.wheels}),_jsxs(View,{style:B.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:ee,style:[B.footerBtn,g],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:te,style:[B.footerBtn,g],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]}),_jsx(ToastHost,{})]})});return D?ue:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:h,placeholder:f,helperText:y,error:b,required:x,disabled:v,size:M,variant:k,clearable:S,onClear:j,value:le,onPress:()=>P(!0),triggerStyle:w,testID:m}),ue]})},buildStyles=e=>{const t=e.shadows.xl;return StyleSheet.create({backdrop:{flex:1,backgroundColor:e.colors.background.overlay,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.full,...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{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 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:M,size:v,variant:S,clearable:k,onClear:j,formatValue:T,triggerStyle:w,haptic:A}=e,C=void 0!==e.visible,[D,H]=useState(!1),P=C?t:D,V=C?m:m?`${m}-modal`:void 0,_=useTheme(),[R,B]=useModalInsets(),N=useMemo(()=>buildStyles(_),[_]),I=useRef(createAnimatedValue(0)).current,$=useRef(createAnimatedValue(40)).current,L=useRef(createAnimatedValue(0)).current,z=useRef(0),F=useCallback(()=>{C?r?.():H(!1)},[C,r]),O=useCallback(()=>{Animated.parallel([Animated.timing(I,{toValue:0,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!1}),Animated.timing($,{toValue:40,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>F())},[F,I,$,_.motion.duration.fast,_.motion.easing.accelerate]),{handleGesture:W}=useDragToDismiss({drag:L,travel:()=>z.current||320,onDismiss:O}),E=useMemo(()=>"24h"===s?range(0,23):range(1,12),[s]),G=useMemo(()=>range(0,59,o),[o]),q=useMemo(()=>["AM","PM"],[]),U=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]),[Y,J]=useState(()=>{const e=E.indexOf(U.displayHour);return e>=0?e:0}),[K,Q]=useState(()=>{const e=G.indexOf(U.minute);return e>=0?e:0}),[X,Z]=useState(()=>"PM"===U.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:r,period:n}=from24h(e,s),l=E.indexOf(r);J(l>=0?l:0);const u=G.indexOf(a);Q(u>=0?u:0),Z("PM"===n?1:0)},[P,i,s,o,E,G]),useEffect(()=>{let e;return P?(e=Animated.parallel([Animated.timing(I,{toValue:1,duration:_.motion.duration.normal,easing:Easing.out(Easing.cubic),useNativeDriver:!1}),Animated.spring($,{toValue:0,damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()):(I.setValue(0),setNativeValue($,40),setNativeValue(L,0)),()=>e?.stop()},[P,I,$,L,_.motion]);const ee=useCallback((e,t)=>{"hour"===e?J(Math.max(0,E.indexOf(Number(t)))):"minute"===e?Q(Math.max(0,G.indexOf(Number(t)))):Z("PM"===t?1:0)},[E,G]),te=useCallback(()=>{!1!==A&&triggerHaptic("selection"),O()},[O,A]),ie=useCallback(()=>{const e=E[Y]??0,t=q[X]??"AM",i=to24h(e,t,s),r=G[K]??0;!1!==A&&triggerHaptic("notificationSuccess"),a?.({hour:i,minute:r}),O()},[E,Y,q,X,G,K,s,a,O,A]),ae=useMemo(()=>{const e=E[Y]??0,t=G[K]??0;if("24h"===s)return`${pad2(e)}:${pad2(t)}`;const i=q[X]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[E,Y,G,K,q,X,s]),re=useMemo(()=>E.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[E]),se=useMemo(()=>G.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[G]),oe=useMemo(()=>q.map(e=>({value:e,label:e})),[q]),ne=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:re,value:E[Y]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:se,value:G[K]??0,gapAfter:"12h"===s?_.spacing.md:void 0,testID:"time-picker-minute"}];return"12h"===s&&e.push({key:"period",label:"Period",items:oe,value:q[X]??"AM",testID:"time-picker-period"}),e},[re,se,oe,E,Y,G,K,q,X,s,_.spacing.md]),le=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]),ue=!C&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(T??le)(i):void 0,me=_jsx(Modal,{visible:P,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:O,testID:V,children:_jsx(ModalSafeArea,{onInsets:B,children:_jsxs(GestureHandlerRootView,{collapsable:!1,style:N.backdrop,children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:O,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsxs(Animated.View,{style:[N.sheet,{paddingBottom:Math.max(R.bottom,_.spacing.lg),transform:[{translateY:Animated.add($,L)}]},c,d],onLayout:e=>{z.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:N.handle}),_jsx(Text,{style:[N.title,p],accessibilityRole:"header",children:n})]})}),_jsx(View,{style:N.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${ae}`,children:_jsx(Text,{style:N.summary,children:ae})}),_jsx(WheelPicker,{columns:ne,onChange:ee,haptic:A,style:N.wheels}),_jsxs(View,{style:N.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:te,style:[N.footerBtn,g],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:ie,style:[N.footerBtn,g],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]}),_jsx(ToastHost,{})]})})});return C?me:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:h,placeholder:f,helperText:y,error:b,required:x,disabled:M,size:v,variant:S,clearable:k,onClear:j,value:ue,onPress:()=>H(!0),triggerStyle:w,testID:m}),me]})},buildStyles=e=>{const t=e.shadows.xl;return StyleSheet.create({backdrop:{flex:1,backgroundColor:e.colors.background.overlay,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.full,...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;

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

package/lib/module/form/useForm.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{valuesEqual}from"./equal.js";import{getPath,setPath}from"./path.js";const rulesFor=(e,r)=>{if(!e||"function"==typeof e)return[];const t=e[r];return t?Array.isArray(t)?t:[t]:[]};export function useForm(e){const r=useRef(e);r.current=e;const t=useRef(e.initialValues),[u,n]=useState(e.initialValues),[s,c]=useState({}),[a,o]=useState({}),[l,i]=useState(!1),[f,d]=useState(!1),[v,b]=useState(0),h=useRef({values:u,errors:s,touched:a,submitCount:v});h.current={values:u,errors:s,touched:a,submitCount:v};const C=useRef(new Map),m=useRef([]),k=useRef(null),y=useRef({values:e.initialValues,version:0});valuesEqual(e.initialValues,y.current.values)||(y.current={values:e.initialValues,version:y.current.version+1});const g=y.current.version;useEffect(()=>{if(!r.current.enableReinitialize)return;const e=r.current.initialValues;t.current=e,h.current.values=e,h.current.errors={},h.current.touched={},n(e),c({}),o({})},[g]);const p=useCallback(async e=>{const t=r.current.validate,u=h.current.values;if("function"==typeof t){return(await t(u)??{})[e]||void 0}const n=getPath(u,e);for(const r of rulesFor(t,e)){const e=await r(n,u);if(e)return e}},[]),F=useCallback(async e=>{const t=r.current.validate;if(!t)return{};if("function"==typeof t)return await t(e)??{};const u={};return await Promise.all(Object.keys(t).map(async r=>{const n=getPath(e,r);for(const s of rulesFor(t,r)){const t=await s(n,e);if(t){u[r]=t;break}}})),u},[]),w=useCallback(async e=>{const r=await p(e);c(t=>{if(t[e]===r)return t;const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[p]),E=useCallback(async()=>{d(!0);const e=await F(h.current.values);return d(!1),h.current.errors=e,c(e),e},[F]),P=useCallback((e,t,u)=>{const s=setPath(h.current.values,e,t);h.current.values=s,n(s);const c=r.current,a=Boolean(h.current.errors[e])&&"blur"===c.revalidateOn;(u??(!a&&(h.current.touched[e]||h.current.submitCount>0||"change"===c.validateOn)))&&w(e)},[w]),S=useCallback(e=>{o(r=>{if(r[e])return r;const t={...r,[e]:!0};return h.current.touched=t,t}),w(e)},[w]),V=useCallback((e,r=!0,t)=>{const u={...h.current.touched,[e]:r};h.current.touched=u,o(u),(t??r)&&w(e)},[w]),O=useCallback((e,r)=>{c(t=>{const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[]),R=useCallback(e=>{h.current.errors=e,c(e)},[]),j=useCallback((e,r)=>{const t="function"==typeof e?e(h.current.values):{...h.current.values,...e};h.current.values=t,n(t),r&&E()},[E]),M=useCallback(e=>{const r=e?{...t.current,...e}:t.current;t.current=r,h.current.values=r,h.current.errors={},h.current.touched={},h.current.submitCount=0,n(r),c({}),o({}),b(0)},[]),q=useCallback((e,r)=>{r?(C.current.set(e,r),m.current.includes(e)||m.current.push(e)):(C.current.delete(e),m.current=m.current.filter(r=>r!==e))},[]),x=useCallback(e=>{k.current=e},[]),B=useCallback(e=>{const r=m.current,t=k.current,u=t?r.indexOf(t):-1,n=r[u+e];n&&(k.current=n,C.current.get(n)?.focus?.())},[]),A=useCallback(()=>B(1),[B]),T=useCallback(()=>B(-1),[B]),z=useMemo(()=>({setErrors:R,setFieldError:O,reset:M,setSubmitting:i}),[R,O,M]),N=useCallback(()=>{(async()=>{const e=r.current,t=h.current.values;h.current.submitCount+=1,b(e=>e+1),d(!0);const u=await F(t);d(!1);const n=new Set([...m.current,...Object.keys(u)]),s={...h.current.touched};n.forEach(e=>{s[e]=!0}),h.current.touched=s,h.current.errors=u,o(s),c(u);const a=m.current.find(e=>u[e])??Object.keys(u).find(e=>u[e]);if(a)C.current.get(a)?.focus?.();else{i(!0);try{await e.onSubmit(t,z)}finally{i(!1)}}})()},[F,z]),D=useMemo(()=>{const e={};for(const r of Object.keys(s))s[r]&&(a[r]||v>0)&&(e[r]=s[r]);return e},[s,a,v]),G=useMemo(()=>{const e=r.current.validate;if(!e)return!0;if("function"==typeof e)return Object.values(s).every(e=>!e);for(const r of Object.keys(e)){const t=getPath(u,r);for(const n of rulesFor(e,r)){const e=n(t,u);if("string"==typeof e&&e)return!1}}return!0},[u,s]),H=useMemo(()=>!valuesEqual(u,t.current),[u]);return{values:u,errors:D,rawErrors:s,touched:a,dirty:H,isValid:G,isSubmitting:l,isValidating:f,submitCount:v,setFieldValue:P,setFieldTouched:V,setFieldError:O,setValues:j,setErrors:R,reset:M,validate:E,validateField:p,submit:N,handleBlur:S,focusNext:A,focusPrev:T,registerField:q,getFieldState:e=>{const r=getPath(u,e),n=s[e],c=!!a[e];return{value:r,error:c||v>0?n:void 0,rawError:n,touched:c,dirty:!valuesEqual(r,getPath(t.current,e))}},getFieldProps:e=>({name:e,value:getPath(u,e),error:a[e]||v>0?s[e]:void 0,touched:!!a[e],onChange:r=>P(e,r),onChangeText:r=>P(e,r),onBlur:()=>S(e),onFocus:()=>x(e),setValue:(r,t)=>P(e,r,t)})}}
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{valuesEqual}from"./equal.js";import{getPath,setPath}from"./path.js";const rulesFor=(e,r)=>{if(!e||"function"==typeof e)return[];const t=e[r];return t?Array.isArray(t)?t:[t]:[]};export function useForm(e){const r=useRef(e);r.current=e;const t=useRef(e.initialValues),[u,n]=useState(e.initialValues),[s,c]=useState({}),[a,o]=useState({}),[l,i]=useState(!1),[f,d]=useState(!1),[v,b]=useState(0),h=useRef({values:u,errors:s,touched:a,submitCount:v});h.current={values:u,errors:s,touched:a,submitCount:v};const y=useRef(new Map),C=useRef([]),m=useRef(null),k=useRef({values:e.initialValues,version:0});valuesEqual(e.initialValues,k.current.values)||(k.current={values:e.initialValues,version:k.current.version+1});const g=k.current.version;useEffect(()=>{if(!r.current.enableReinitialize)return;const e=r.current.initialValues;t.current=e,h.current.values=e,h.current.errors={},h.current.touched={},n(e),c({}),o({})},[g]);const p=useCallback(async e=>{const t=r.current.validate,u=h.current.values;if("function"==typeof t){return(await t(u)??{})[e]||void 0}const n=getPath(u,e);for(const r of rulesFor(t,e)){const e=await r(n,u);if(e)return e}},[]),F=useCallback(async e=>{const t=r.current.validate;if(!t)return{};if("function"==typeof t)return await t(e)??{};const u={};return await Promise.all(Object.keys(t).map(async r=>{const n=getPath(e,r);for(const s of rulesFor(t,r)){const t=await s(n,e);if(t){u[r]=t;break}}})),u},[]),w=useCallback(async e=>{const r=await p(e);c(t=>{if(t[e]===r)return t;const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[p]),E=useCallback(async()=>{d(!0);const e=await F(h.current.values);return d(!1),h.current.errors=e,c(e),e},[F]),P=useCallback((e,t,u)=>{const s=setPath(h.current.values,e,t);h.current.values=s,n(s);const c=r.current,a=Boolean(h.current.errors[e])&&"blur"===c.revalidateOn;(u??(!a&&(h.current.touched[e]||h.current.submitCount>0||"change"===c.validateOn)))&&w(e)},[w]),S=useCallback(e=>{o(r=>{if(r[e])return r;const t={...r,[e]:!0};return h.current.touched=t,t}),w(e)},[w]),V=useCallback((e,r=!0,t)=>{const u={...h.current.touched,[e]:r};h.current.touched=u,o(u),(t??r)&&w(e)},[w]),R=useCallback((e,r)=>{c(t=>{const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[]),O=useCallback(e=>{h.current.errors=e,c(e)},[]),j=useCallback((e,r)=>{const t="function"==typeof e?e(h.current.values):{...h.current.values,...e};h.current.values=t,n(t),r&&E()},[E]),M=useCallback(e=>{const r=e?{...t.current,...e}:t.current;t.current=r,h.current.values=r,h.current.errors={},h.current.touched={},h.current.submitCount=0,n(r),c({}),o({}),b(0)},[]),q=useCallback((e,r)=>{r?(y.current.set(e,r),C.current.includes(e)||C.current.push(e)):(y.current.delete(e),C.current=C.current.filter(r=>r!==e))},[]),x=useCallback(e=>{m.current=e},[]),B=useCallback(e=>{const r=C.current,t=m.current,u=t?r.indexOf(t):-1,n=r[u+e];n&&(m.current=n,y.current.get(n)?.focus?.())},[]),A=useCallback(()=>B(1),[B]),T=useCallback(()=>B(-1),[B]),z=useMemo(()=>({setErrors:O,setFieldError:R,reset:M,setSubmitting:i}),[O,R,M]),N=useRef(!1),D=useCallback(()=>{N.current||(N.current=!0,(async()=>{try{const e=r.current,t=h.current.values;let u;h.current.submitCount+=1,b(e=>e+1),d(!0);try{u=await F(t)}finally{d(!1)}const n=new Set([...C.current,...Object.keys(u)]),s={...h.current.touched};n.forEach(e=>{s[e]=!0}),h.current.touched=s,h.current.errors=u,o(s),c(u);const a=C.current.find(e=>u[e])??Object.keys(u).find(e=>u[e]);if(a)return void y.current.get(a)?.focus?.();i(!0);try{await e.onSubmit(t,z)}finally{i(!1)}}finally{N.current=!1}})())},[F,z]),G=useMemo(()=>{const e={};for(const r of Object.keys(s))s[r]&&(a[r]||v>0)&&(e[r]=s[r]);return e},[s,a,v]),H=useMemo(()=>{const e=r.current.validate;if(!e)return!0;if("function"==typeof e)return Object.values(s).every(e=>!e);for(const r of Object.keys(e)){const t=getPath(u,r);for(const n of rulesFor(e,r)){const e=n(t,u);if("string"==typeof e&&e)return!1}}return!0},[u,s]),I=useMemo(()=>!valuesEqual(u,t.current),[u]);return{values:u,errors:G,rawErrors:s,touched:a,dirty:I,isValid:H,isSubmitting:l,isValidating:f,submitCount:v,setFieldValue:P,setFieldTouched:V,setFieldError:R,setValues:j,setErrors:O,reset:M,validate:E,validateField:p,submit:D,handleBlur:S,focusNext:A,focusPrev:T,registerField:q,getFieldState:e=>{const r=getPath(u,e),n=s[e],c=!!a[e];return{value:r,error:c||v>0?n:void 0,rawError:n,touched:c,dirty:!valuesEqual(r,getPath(t.current,e))}},getFieldProps:e=>({name:e,value:getPath(u,e),error:a[e]||v>0?s[e]:void 0,touched:!!a[e],onChange:r=>P(e,r),onChangeText:r=>P(e,r),onBlur:()=>S(e),onFocus:()=>x(e),setValue:(r,t)=>P(e,r,t)})}}

package/lib/module/hooks/useDragToDismiss.js

@@ -1 +1 @@
-"use strict";import{useMemo}from"react";import{Animated,Easing}from"react-native";import{Gesture}from"react-native-gesture-handler";import{setNativeValue,useTheme}from"../theme/index.js";export const DRAG_DISMISS_DISTANCE=100;export const DRAG_DISMISS_VELOCITY=.5;export const createDragToDismissController=({drag:e,travel:t,onDismiss:s},n)=>{const{snappy:a}=n.spring,springBack=()=>Animated.spring(e,{toValue:0,damping:a.damping,stiffness:a.stiffness,mass:a.mass,useNativeDriver:!0}).start();return{move:t=>{setNativeValue(e,Math.max(0,t))},release:(a,r)=>{a>100||r>.5?Animated.timing(e,{toValue:"function"==typeof t?t():t,duration:n.duration.fast,easing:Easing.bezier(...n.easing.accelerate),useNativeDriver:!0}).start(()=>s()):springBack()},cancel:springBack}};export const useDragToDismiss=e=>{const{drag:t,travel:s,onDismiss:n,contentAtTop:a,scrollGesture:r}=e,{motion:i}=useTheme();return useMemo(()=>{const e=createDragToDismissController({drag:t,travel:s,onDismiss:n},i),o=Gesture.Pan().runOnJS(!0).activeOffsetY(6).failOffsetX([-12,12]).onUpdate(t=>e.move(t.translationY)).onEnd(t=>e.release(t.translationY,t.velocityY/1e3)).onFinalize((t,s)=>{s||e.cancel()});let l=0,m=!1;const u=Gesture.Pan().runOnJS(!0).activeOffsetY(8).failOffsetX([-12,12]).onBegin(()=>{l=0,m=!1}).onUpdate(t=>{if(!m){if(a&&!a())return;m=!0,l=t.translationY}e.move(t.translationY-l)}).onEnd(t=>{m&&e.release(t.translationY-l,t.velocityY/1e3)}).onFinalize((t,s)=>{!s&&m&&e.cancel()});return r&&u.simultaneousWithExternalGesture(r),{handleGesture:o,sheetGesture:u}},[t,s,n,a,r,i])};
+"use strict";import{useMemo}from"react";import{Animated,Easing}from"react-native";import{Gesture}from"react-native-gesture-handler";import{setNativeValue,useTheme}from"../theme/index.js";export const DRAG_DISMISS_DISTANCE=100;export const DRAG_DISMISS_VELOCITY=.5;export const createDragToDismissController=({drag:e,travel:t,onDismiss:s},n)=>{const{snappy:a}=n.spring,springBack=()=>Animated.spring(e,{toValue:0,damping:a.damping,stiffness:a.stiffness,mass:a.mass,useNativeDriver:!0}).start();return{move:t=>{setNativeValue(e,Math.max(0,t))},release:(a,r)=>{a>100||r>.5?Animated.timing(e,{toValue:"function"==typeof t?t():t,duration:n.duration.fast,easing:Easing.bezier(...n.easing.accelerate),useNativeDriver:!0}).start(()=>s()):springBack()},cancel:springBack}};export const useDragToDismiss=e=>{const{drag:t,travel:s,onDismiss:n,contentAtTop:a,scrollGesture:r}=e,{motion:i}=useTheme();return useMemo(()=>{const e=createDragToDismissController({drag:t,travel:s,onDismiss:n},i),o=Gesture.Pan().runOnJS(!0).activeOffsetY(6).failOffsetX([-12,12]).onUpdate(t=>e.move(t.translationY)).onEnd(t=>e.release(t.translationY,t.velocityY/1e3)).onFinalize((_e,t)=>{t||e.cancel()});let l=0,m=!1;const u=Gesture.Pan().runOnJS(!0).activeOffsetY(8).failOffsetX([-12,12]).onBegin(()=>{l=0,m=!1}).onUpdate(t=>{if(!m){if(a&&!a())return;m=!0,l=t.translationY}e.move(t.translationY-l)}).onEnd(t=>{m&&e.release(t.translationY-l,t.velocityY/1e3)}).onFinalize((_e,t)=>{!t&&m&&e.cancel()});return r&&u.simultaneousWithExternalGesture(r),{handleGesture:o,sheetGesture:u}},[t,s,n,a,r,i])};

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

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
+export interface ModalInsets {
+    top: number;
+    bottom: number;
+}
+/**
+ * Top and bottom insets of the window a native Modal draws in, seeded from the
+ * app-level provider and corrected once the Modal's own provider reports.
+ * Pass the setter to `ModalSafeArea` as `onInsets`.
+ */
+export declare const useModalInsets: () => [ModalInsets, Dispatch<SetStateAction<ModalInsets>>];
+/** Reports the nearest provider's top and bottom insets up; renders nothing. */
+export declare const InsetsProbe: React.FC<{
+    onChange: Dispatch<SetStateAction<ModalInsets>>;
+}>;
+/**
+ * Wrap a native Modal's content in this: the app-level provider measures the
+ * app window (bottom inset 0 under Android's navigation bar when the app is
+ * not edge to edge), not the translucent Modal window the content is drawn in.
+ */
+export declare const ModalSafeArea: React.FC<{
+    onInsets: Dispatch<SetStateAction<ModalInsets>>;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ModalSafeArea.d.ts.map

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

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
+export interface ModalInsets {
+    top: number;
+    bottom: number;
+}
+/**
+ * Top and bottom insets of the window a native Modal draws in, seeded from the
+ * app-level provider and corrected once the Modal's own provider reports.
+ * Pass the setter to `ModalSafeArea` as `onInsets`.
+ */
+export declare const useModalInsets: () => [ModalInsets, Dispatch<SetStateAction<ModalInsets>>];
+/** Reports the nearest provider's top and bottom insets up; renders nothing. */
+export declare const InsetsProbe: React.FC<{
+    onChange: Dispatch<SetStateAction<ModalInsets>>;
+}>;
+/**
+ * Wrap a native Modal's content in this: the app-level provider measures the
+ * app window (bottom inset 0 under Android's navigation bar when the app is
+ * not edge to edge), not the translucent Modal window the content is drawn in.
+ */
+export declare const ModalSafeArea: React.FC<{
+    onInsets: Dispatch<SetStateAction<ModalInsets>>;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ModalSafeArea.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -107,7 +107,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.12.0"
+    "@webority/mobile-core": "0.12.1"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",