@webority/mobile-ui 0.11.1 → 0.12.1

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

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

package/lib/module/components/Menu/MenuSurface.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{claimAnchoredSurface,computePlacement,PLACEMENT_MARGIN,placementRoom}from"../../utils/placement.js";import{Breakpoints}from"../../utils/responsive.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Divider}from"../Divider/index.js";import{OptionSheet}from"../OptionSheet/index.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{FOCUS_DELAY_MS,focusHost}from"./focusHost.js";import{visibleGroups,visibleTopActions,wantsSheet}from"./menuModel.js";import{webOnly}from"./webOnly.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,ROW_MIN_HEIGHT=48,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:",WEB_CHECKABLE_ROLE=webOnly({role:"menuitemcheckbox"});export const MenuSurface=e=>{const{open:t,anchor:s,items:i,title:o,topActions:r,placement:n,presentation:l,unavailable:a,context:c=!1,preview:u,onClose:d,restoreFocusTo:m,haptic:p,accessibilityLabel:b,closeLabel:f,backLabel:h,testID:y}=e,x=useTheme(),g=useMemo(()=>buildStyles(x),[x]),_=useSafeAreaInsets(),v=useWindowDimensions(),w=useReducedMotion(),j=useMemo(()=>visibleGroups(i,a),[i,a]),A=useMemo(()=>visibleTopActions(r,a),[r,a]),k="sheet"===l||"auto"===l&&v.width<Breakpoints.lg&&wantsSheet(j,A),[I,S]=useState(null),[E,R]=useState(null),T=useRef(d);T.current=d;const C=useRef(m);C.current=m;const L=useRef(null),D=useRef(!1),M=useRef(!1),O=useRef(new Map),P=useRef(null),H=useCallback(()=>{if(!D.current)return;D.current=!1;const e=L.current;L.current=null,e?e():focusHost(C.current?.())},[]);useEffect(()=>{if(t)return M.current=!0,D.current=!1,L.current=null,claimAnchoredSurface(()=>T.current());M.current&&(M.current=!1,D.current=!0,S(null),R(null),k||"ios"===Platform.OS||H())},[t]);const V=useCallback(e=>{if(e.disabled)return;const t=resolveHaptic(p,"selection");t&&triggerHaptic(t),e.key!==BACK_KEY?e.submenu?S(e):(L.current=e.onPress??null,T.current()):S(null)},[p]),B=useMemo(()=>({width:v.width,height:v.height,insets:_}),[v.width,v.height,_]),N=useMemo(()=>{if(!s||!E)return null;const e=s.x+s.width/2>B.width/2?"end":"start";return computePlacement(s,E,B,n,{align:e})},[s,E,B,n]);let F=B.height-_.top-_.bottom-2*PLACEMENT_MARGIN;if(s&&N){const e=placementRoom(s,B);F="top"===N.placement?e.above:e.below}const K=Math.min(280,B.width-_.left-_.right-2*PLACEMENT_MARGIN),W=t&&null!==N,G=useRef(createAnimatedValue(0)).current,z=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!W)return setNativeValue(G,0),void setNativeValue(z,1);const e=[Animated.timing(G,{toValue:1,duration:x.motion.duration.fast,easing:Easing.bezier(...x.motion.easing.decelerate),useNativeDriver:!0})];c&&!w&&e.push(Animated.spring(z,{toValue:1.02,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0}));const t=Animated.parallel(e);return t.start(),()=>t.stop()},[W,c,w,G,z,x.motion]);const $=useCallback(e=>{const{width:t,height:s}=e.nativeEvent.layout;R(e=>e&&e.width===t&&e.height===s?e:{width:t,height:s})},[]),Y=c&&"top"===N?.placement,U=I?.submenu?[I.submenu]:j,X=Y?[...U].reverse().map(e=>[...e].reverse()):U,q=[];if(I)q.push({key:BACK_KEY,label:I.label});else for(const e of A)q.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of X)for(const t of e)q.push({key:t.key,label:t.label,item:t});const Z=q[0]?.key;useEffect(()=>{if(!W||k||!Z)return;const e=setTimeout(()=>focusHost(O.current.get(Z)),FOCUS_DELAY_MS);return()=>clearTimeout(e)},[W,k,Z]);const setItemRef=e=>t=>{t?O.current.set(e,t):O.current.delete(e)},J=webOnly({onKeyDown:e=>{const t=e.key??e.nativeEvent?.key??"",s=q.length,i=q.findIndex(e=>e.key===P.current);let o=-1;if("ArrowDown"===t)o=(i+1)%s;else if("ArrowUp"===t)o=i<=0?s-1:i-1;else if("Home"===t)o=0;else if("End"===t)o=s-1;else{if("ArrowLeft"===t&&I)return e.preventDefault?.(),void S(null);if("ArrowRight"===t&&q[i]?.item?.submenu)return e.preventDefault?.(),void V(q[i].item);if(1===t.length&&""!==t.trim()){const e=t.toLowerCase();for(let t=1;t<=s;t+=1){const r=(i+t)%s;if(q[r].label.toLowerCase().startsWith(e)){o=r;break}}}}o>=0&&(e.preventDefault?.(),(e=>{const t=q[e];t&&focusHost(O.current.get(t.key))})(o))}});if(k){const e=I?.submenu?[{key:BACK_KEY,label:h,icon:"chevron-left"},...I.submenu]:[...A,...j.flat()],s=new Set(e.filter(e=>e.checked).map(e=>e.key));return _jsx(OptionSheet,{open:t,onClose:d,onAfterClose:H,title:I?.label??o,options:e,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),descriptionOf:e=>e.description,iconOf:e=>{const t=e;return renderSlotIcon(t.icon,{color:t.destructive?x.colors.toneText.error:x.colors.text.secondary,size:20,disabled:Boolean(t.disabled)})},isSelected:e=>s.has(String(e)),onSelect:e=>V(e),accessibilityLabel:b??o,testID:y?`${y}-sheet`:void 0})}const inkFor=e=>e.disabled?x.colors.text.disabled:e.destructive?x.colors.toneText.error:x.colors.text.primary,Q=_jsxs(_Fragment,I?{children:[_jsxs(Pressable,{ref:setItemRef(BACK_KEY),onPress:()=>S(null),onFocus:()=>{P.current=BACK_KEY},accessibilityRole:"menuitem",accessibilityLabel:`${h}, ${I.label}`,android_ripple:{color:x.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[g.row,e?g.pressed:null],children:[_jsx(View,{style:g.icon,children:_jsx(AppIcon,{name:"chevron-left",size:20,color:x.colors.text.secondary})}),_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:1,style:g.labels,children:I.label})]}),_jsx(Divider,{spacing:"none"})]}:{children:[o?_jsx(Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:g.title,children:o}):null,A.length>0?_jsxs(_Fragment,{children:[_jsx(View,{style:g.topRow,children:A.map(e=>{const t=`${TOP_PREFIX}${e.key}`,s=Boolean(e.disabled),i=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(t),onPress:()=>V(e),onFocus:()=>{P.current=t},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s},"aria-disabled":s,testID:e.testID,style:({pressed:e})=>[g.topAction,e?g.pressed:null],children:[renderSlotIcon(e.icon,{color:i,size:20,disabled:s}),_jsx(Text,{variant:"caption",color:i,numberOfLines:1,children:e.label})]},t)})}),_jsx(Divider,{spacing:"none"})]}):null]});return _jsxs(Modal,{visible:t,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:H,children:[_jsx(Pressable,{style:[StyleSheet.absoluteFill,c?g.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:f,testID:y?`${y}-scrim`:void 0}),c&&u&&s?_jsx(Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[g.preview,{left:s.x,top:s.y,width:s.width,height:s.height,transform:[{scale:z}]}],children:u}):null,_jsx(Animated.View,{accessibilityRole:"menu",accessibilityLabel:I?.label??b??o,onLayout:$,testID:y?`${y}-menu`:void 0,...J,style:[g.anchored,{left:N?.x??0,top:N?.y??0,maxWidth:K,opacity:W?G:0}],children:_jsx(View,{style:g.surface,children:_jsxs(View,{style:[g.clip,{maxHeight:F}],children:[Q,_jsx(ScrollView,{style:g.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:X.map((e,t)=>{const s=e.some(e=>null!=e.icon);return _jsxs(View,{children:[t>0?_jsx(Divider,{spacing:"none"}):null,e.map(e=>((e,t)=>{const s=Boolean(e.disabled),i=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(e.key),onPress:()=>V(e),onFocus:()=>{P.current=e.key},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s,checked:e.checked},"aria-disabled":s,"aria-checked":e.checked,...void 0!==e.checked?WEB_CHECKABLE_ROLE:null,android_ripple:{color:x.colors.surface.pressed,borderless:!1},testID:e.testID,style:({pressed:e})=>[g.row,e?g.pressed:null],children:[t?_jsx(View,{style:g.icon,children:renderSlotIcon(e.icon,{color:i,size:20,disabled:s})}):null,_jsxs(View,{style:g.labels,children:[_jsx(Text,{variant:"body",color:i,numberOfLines:2,children:e.label}),e.description?_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):null]}),e.detail?_jsx(Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?_jsx(AppIcon,{name:"check",size:20,color:x.colors.primary}):null,e.submenu?_jsx(AppIcon,{name:"chevron-right",size:20,color:x.colors.text.tertiary}):null]},e.key)})(e,s))]},e[0].key)})})]})})}),_jsx(ToastHost,{})]})};const buildStyles=e=>StyleSheet.create({scrim:{backgroundColor:e.colors.background.overlay},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,...e.shadows.lg},clip:{borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.spacing.md,paddingTop:e.spacing.sm,paddingBottom:e.spacing.xs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,minHeight:48,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},pressed:{backgroundColor:e.colors.surface.pressed},icon:{width:20,alignItems:"center"},labels:{flexGrow:1,flexShrink:1},topRow:{flexDirection:"row",padding:e.spacing.xs,gap:e.spacing.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.spacing.xs,minHeight:64,borderRadius:e.radius.sm,...smoothCorners}});
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{claimAnchoredSurface,computePlacement,PLACEMENT_MARGIN,placementRoom}from"../../utils/placement.js";import{Breakpoints}from"../../utils/responsive.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Divider}from"../Divider/index.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{OptionSheet}from"../OptionSheet/index.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{FOCUS_DELAY_MS,focusHost}from"./focusHost.js";import{visibleGroups,visibleTopActions,wantsSheet}from"./menuModel.js";import{webOnly}from"./webOnly.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,ROW_MIN_HEIGHT=48,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:",WEB_CHECKABLE_ROLE=webOnly({role:"menuitemcheckbox"});export const MenuSurface=e=>{const{open:t,anchor:s,items:o,title:i,topActions:r,placement:n,presentation:l,unavailable:a,context:c=!1,preview:u,onClose:d,restoreFocusTo:m,haptic:p,accessibilityLabel:b,closeLabel:f,backLabel:h,testID:y}=e,x=useTheme(),g=useMemo(()=>buildStyles(x),[x]),_=useSafeAreaInsets(),[v,w]=useModalInsets(),j=useMemo(()=>({..._,top:v.top,bottom:v.bottom}),[_,v]),A=useWindowDimensions(),S=useReducedMotion(),I=useMemo(()=>visibleGroups(o,a),[o,a]),k=useMemo(()=>visibleTopActions(r,a),[r,a]),E="sheet"===l||"auto"===l&&A.width<Breakpoints.lg&&wantsSheet(I,k),[R,T]=useState(null),[M,C]=useState(null),L=useRef(d);L.current=d;const D=useRef(m);D.current=m;const O=useRef(null),P=useRef(!1),H=useRef(!1),V=useRef(new Map),B=useRef(null),N=useCallback(()=>{if(!P.current)return;P.current=!1;const e=O.current;O.current=null,e?e():focusHost(D.current?.())},[]);useEffect(()=>{if(t)return H.current=!0,P.current=!1,O.current=null,claimAnchoredSurface(()=>L.current());H.current&&(H.current=!1,P.current=!0,T(null),C(null),E||"ios"===Platform.OS||N())},[t]);const F=useCallback(e=>{if(e.disabled)return;const t=resolveHaptic(p,"selection");t&&triggerHaptic(t),e.key!==BACK_KEY?e.submenu?T(e):(O.current=e.onPress??null,L.current()):T(null)},[p]),K=useMemo(()=>({width:A.width,height:A.height,insets:j}),[A.width,A.height,j]),W=useMemo(()=>{if(!s||!M)return null;const e=s.x+s.width/2>K.width/2?"end":"start";return computePlacement(s,M,K,n,{align:e})},[s,M,K,n]);let G=K.height-j.top-j.bottom-2*PLACEMENT_MARGIN;if(s&&W){const e=placementRoom(s,K);G="top"===W.placement?e.above:e.below}const z=Math.min(280,K.width-j.left-j.right-2*PLACEMENT_MARGIN),$=t&&null!==W,Y=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!$)return setNativeValue(Y,0),void setNativeValue(U,1);const e=[Animated.timing(Y,{toValue:1,duration:x.motion.duration.fast,easing:Easing.bezier(...x.motion.easing.decelerate),useNativeDriver:!0})];c&&!S&&e.push(Animated.spring(U,{toValue:1.02,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0}));const t=Animated.parallel(e);return t.start(),()=>t.stop()},[$,c,S,Y,U,x.motion]);const X=useCallback(e=>{const{width:t,height:s}=e.nativeEvent.layout;C(e=>e&&e.width===t&&e.height===s?e:{width:t,height:s})},[]),q=c&&"top"===W?.placement,Z=R?.submenu?[R.submenu]:I,J=q?[...Z].reverse().map(e=>[...e].reverse()):Z,Q=[];if(R)Q.push({key:BACK_KEY,label:R.label});else for(const e of k)Q.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of J)for(const t of e)Q.push({key:t.key,label:t.label,item:t});const ee=Q[0]?.key;useEffect(()=>{if(!$||E||!ee)return;const e=setTimeout(()=>focusHost(V.current.get(ee)),FOCUS_DELAY_MS);return()=>clearTimeout(e)},[$,E,ee]);const setItemRef=e=>t=>{t?V.current.set(e,t):V.current.delete(e)},te=webOnly({onKeyDown:e=>{const t=e.key??e.nativeEvent?.key??"",s=Q.length,o=Q.findIndex(e=>e.key===B.current);let i=-1;if("ArrowDown"===t)i=(o+1)%s;else if("ArrowUp"===t)i=o<=0?s-1:o-1;else if("Home"===t)i=0;else if("End"===t)i=s-1;else{if("ArrowLeft"===t&&R)return e.preventDefault?.(),void T(null);if("ArrowRight"===t&&Q[o]?.item?.submenu)return e.preventDefault?.(),void F(Q[o].item);if(1===t.length&&""!==t.trim()){const e=t.toLowerCase();for(let t=1;t<=s;t+=1){const r=(o+t)%s;if(Q[r].label.toLowerCase().startsWith(e)){i=r;break}}}}i>=0&&(e.preventDefault?.(),(e=>{const t=Q[e];t&&focusHost(V.current.get(t.key))})(i))}});if(E){const e=R?.submenu?[{key:BACK_KEY,label:h,icon:"chevron-left"},...R.submenu]:[...k,...I.flat()],s=new Set(e.filter(e=>e.checked).map(e=>e.key));return _jsx(OptionSheet,{open:t,onClose:d,onAfterClose:N,title:R?.label??i,options:e,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),descriptionOf:e=>e.description,iconOf:e=>{const t=e;return renderSlotIcon(t.icon,{color:t.destructive?x.colors.toneText.error:x.colors.text.secondary,size:20,disabled:Boolean(t.disabled)})},isSelected:e=>s.has(String(e)),onSelect:e=>F(e),accessibilityLabel:b??i,testID:y?`${y}-sheet`:void 0})}const inkFor=e=>e.disabled?x.colors.text.disabled:e.destructive?x.colors.toneText.error:x.colors.text.primary,se=_jsxs(_Fragment,R?{children:[_jsxs(Pressable,{ref:setItemRef(BACK_KEY),onPress:()=>T(null),onFocus:()=>{B.current=BACK_KEY},accessibilityRole:"menuitem",accessibilityLabel:`${h}, ${R.label}`,android_ripple:{color:x.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[g.row,e?g.pressed:null],children:[_jsx(View,{style:g.icon,children:_jsx(AppIcon,{name:"chevron-left",size:20,color:x.colors.text.secondary})}),_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:1,style:g.labels,children:R.label})]}),_jsx(Divider,{spacing:"none"})]}:{children:[i?_jsx(Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:g.title,children:i}):null,k.length>0?_jsxs(_Fragment,{children:[_jsx(View,{style:g.topRow,children:k.map(e=>{const t=`${TOP_PREFIX}${e.key}`,s=Boolean(e.disabled),o=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(t),onPress:()=>F(e),onFocus:()=>{B.current=t},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s},"aria-disabled":s,testID:e.testID,style:({pressed:e})=>[g.topAction,e?g.pressed:null],children:[renderSlotIcon(e.icon,{color:o,size:20,disabled:s}),_jsx(Text,{variant:"caption",color:o,numberOfLines:1,children:e.label})]},t)})}),_jsx(Divider,{spacing:"none"})]}):null]});return _jsx(Modal,{visible:t,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:N,children:_jsxs(ModalSafeArea,{onInsets:w,children:[_jsx(Pressable,{style:[StyleSheet.absoluteFill,c?g.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:f,testID:y?`${y}-scrim`:void 0}),c&&u&&s?_jsx(Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[g.preview,{left:s.x,top:s.y,width:s.width,height:s.height,transform:[{scale:U}]}],children:u}):null,_jsx(Animated.View,{accessibilityRole:"menu",accessibilityLabel:R?.label??b??i,onLayout:X,testID:y?`${y}-menu`:void 0,...te,style:[g.anchored,{left:W?.x??0,top:W?.y??0,maxWidth:z,opacity:$?Y:0}],children:_jsx(View,{style:g.surface,children:_jsxs(View,{style:[g.clip,{maxHeight:G}],children:[se,_jsx(ScrollView,{style:g.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:J.map((e,t)=>{const s=e.some(e=>null!=e.icon);return _jsxs(View,{children:[t>0?_jsx(Divider,{spacing:"none"}):null,e.map(e=>((e,t)=>{const s=Boolean(e.disabled),o=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(e.key),onPress:()=>F(e),onFocus:()=>{B.current=e.key},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s,checked:e.checked},"aria-disabled":s,"aria-checked":e.checked,...void 0!==e.checked?WEB_CHECKABLE_ROLE:null,android_ripple:{color:x.colors.surface.pressed,borderless:!1},testID:e.testID,style:({pressed:e})=>[g.row,e?g.pressed:null],children:[t?_jsx(View,{style:g.icon,children:renderSlotIcon(e.icon,{color:o,size:20,disabled:s})}):null,_jsxs(View,{style:g.labels,children:[_jsx(Text,{variant:"body",color:o,numberOfLines:2,children:e.label}),e.description?_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):null]}),e.detail?_jsx(Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?_jsx(AppIcon,{name:"check",size:20,color:x.colors.primary}):null,e.submenu?_jsx(AppIcon,{name:"chevron-right",size:20,color:x.colors.text.tertiary}):null]},e.key)})(e,s))]},e[0].key)})})]})})}),_jsx(ToastHost,{})]})})};const buildStyles=e=>StyleSheet.create({scrim:{backgroundColor:e.colors.background.overlay},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,...e.shadows.lg},clip:{borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.spacing.md,paddingTop:e.spacing.sm,paddingBottom:e.spacing.xs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,minHeight:48,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},pressed:{backgroundColor:e.colors.surface.pressed},icon:{width:20,alignItems:"center"},labels:{flexGrow:1,flexShrink:1},topRow:{flexDirection:"row",padding:e.spacing.xs,gap:e.spacing.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.spacing.xs,minHeight:64,borderRadius:e.radius.sm,...smoothCorners}});

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

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

package/lib/module/components/ModalSafeArea/ModalSafeArea.js

@@ -0,0 +1 @@
+"use strict";import{useEffect,useState}from"react";import{StyleSheet}from"react-native";import{SafeAreaProvider,useSafeAreaInsets}from"react-native-safe-area-context";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const useModalInsets=()=>{const{top:e,bottom:t}=useSafeAreaInsets();return useState({top:e,bottom:t})};export const InsetsProbe=({onChange:e})=>{const{top:t,bottom:s}=useSafeAreaInsets();return useEffect(()=>{e(e=>e.top===t&&e.bottom===s?e:{top:t,bottom:s})},[t,s,e]),null};export const ModalSafeArea=({onInsets:e,children:t})=>_jsxs(SafeAreaProvider,{style:styles.fill,children:[_jsx(InsetsProbe,{onChange:e}),t]});const styles=StyleSheet.create({fill:{flex:1}});

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

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

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

@@ -1 +1 @@
-"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?oe(i,t.iso)??t:i??t},[m,Q,v,i,oe]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?isValidNationalNumber(e.nationalNumber,t,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===le);return{callingCode:t?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,te]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:o??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=V??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,_e=ce||Pe,Ae=Boolean(L)&&"float"===O&&Ee>0,we=useFloatingLabel({label:L,enabled:Ae,floated:_e,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),ze=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),Re=planOf(ue.iso),ke=I&&Re?formatPhoneAsTyped(ue.nationalNumber,Re):ue.nationalNumber,Me=ee(ue.iso),Ve=0===ue.nationalNumber.length||pe||!Number.isFinite(Me)?void 0:ke.length+Math.max(0,Me-ue.nationalNumber.length),De=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const Be=Re?maxNationalNumberLength(Re,!1===F?"any":F):Number.POSITIVE_INFINITY,$e=ue.nationalNumber.length>=Be,He=!1!==F&&!1!==w&&Pe&&!De&&(ge||$e),Ue="mobile"===F?"Enter a valid mobile number":"Enter a valid number",We=hasFieldText(A)?A:He?w||Ue:void 0,qe=!0===A||hasFieldText(We),Ge=useRef(De),Ye=useRef(ue);Ye.current=ue,useEffect(()=>{Ge.current!==De&&(Ge.current=De,b?.(De),De&&c?.(formatE164(Ye.current)))},[De,c,b]);const Ke=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Je=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ne(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...Ye.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ye.current,getE164:()=>formatE164(Ye.current),getFormatted:()=>{const e=Ye.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ye.current),getCountry:()=>m.find(e=>e.iso===Ye.current.iso)}),[m,ne,de]);const Qe=R||E,Xe=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Te,topNotch:we.topNotch,focused:ce,disabled:R,error:qe,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Qe||(Ce.current=!0,Ne(!0))},disabled:Qe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Qe},"aria-disabled":Qe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(ze,Se.fontSize,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:xe.color,fontSize:Se.fontSize}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:R?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Se.iconSize,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:ke,maxLength:Ve,onChangeText:Ke,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ce.current&&he(!0),W?.()},editable:!R,placeholder:Ae&&!_e||je?void 0:j,placeholderTextColor:xe.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:xe.color,fontSize:Se.fontSize,...xe.weightStyle,paddingLeft:Fe?0:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:xe.placeholderColor,fontSize:Se.fontSize,weightStyle:xe.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:k,required:z,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Xe,we.node]}),_jsx(FieldMessage,{size:k,error:qe,text:qe?We:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ne(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===ze?.iso,onSelect:Je,searchable:Q.length>8,searchPlaceholder:S,alphabetIndex:x??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;
+"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?oe(i,t.iso)??t:i??t},[m,Q,v,i,oe]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?isValidNationalNumber(e.nationalNumber,t,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===le);return{callingCode:t?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,te]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:o??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=V??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,Ae=ce||Pe,we=Boolean(L)&&"float"===O&&Ee>0,ze=useFloatingLabel({label:L,enabled:we,floated:Ae,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),Re=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),ke=planOf(ue.iso),Me=I&&ke?formatPhoneAsTyped(ue.nationalNumber,ke):ue.nationalNumber,Ve=ee(ue.iso),De=0===ue.nationalNumber.length||pe||!Number.isFinite(Ve)?void 0:Me.length+Math.max(0,Ve-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const $e=ke?maxNationalNumberLength(ke,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Pe&&!Be&&(ge||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Je=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Qe=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ne(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Xe=R||E,Ze=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Te,topNotch:ze.topNotch,focused:ce,disabled:R,error:Ge,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Xe||(Ce.current=!0,Ne(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(Re,Se.fontSize,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:xe.color,fontSize:Se.fontSize}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:R?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Se.iconSize,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:Me,maxLength:De,onChangeText:Je,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ce.current&&he(!0),W?.()},editable:!R,placeholder:we&&!Ae||je?void 0:j,placeholderTextColor:xe.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:xe.color,fontSize:Se.fontSize,...xe.weightStyle,paddingLeft:Fe?0:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:xe.placeholderColor,fontSize:Se.fontSize,weightStyle:xe.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:k,required:z,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ze,ze.node]}),_jsx(FieldMessage,{size:k,error:Ge,text:Ge?qe:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ne(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===Re?.iso,onSelect:Qe,searchable:Q.length>8,searchPlaceholder:S,alphabetIndex:x??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;

package/lib/module/components/ProgressBar/ProgressBar.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,fontFor,Gradient,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.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}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=forwardRef((e,t)=>{const r=useTheme(),{progress:s,label:o,showPercent:a=!1,indeterminate:i,height:n=6,radius:l,tone:u="primary",trackColor:c,barColor:d,gradient:m,segments:p,animated:g=!0,style:h,containerStyle:f,barStyle:y,accessibilityLabel:b,testID:w}=e,x=i??"number"!=typeof s,V=clampProgress(s),j=useRef(createAnimatedValue(V)).current,R=useRef(createAnimatedValue(0)).current,v=useRef(createAnimatedValue(0)).current,A=useRef(0),C=r.components.progressBar?.determinateAnimationDuration??400,B=r.components.progressBar?.indeterminateLoopDuration??1500,S=r.components.progressBar?.indeterminateWidth??"30%",_=useMemo(()=>buildStyles(r),[r]),N=l??r.radius.full,P=c??r.colors.surface.disabled,k=d??toneColor(r,u),D=useMemo(()=>m?"string"==typeof m?r.gradients[m]??null:m:null,[m,r.gradients]),E=Array.isArray(p)&&p.length>0;useEffect(()=>{x||(g?Animated.timing(j,{toValue:V,duration:C,easing:Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():j.setValue(V))},[g,V,C,j,x,r]),useEffect(()=>{if(!x)return;setNativeValue(R,0);const e=Animated.loop(Animated.timing(R,{toValue:1,duration:B,easing:Easing.inOut(Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[x,R,B]);const L=j.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),M=R.interpolate({inputRange:[0,1],outputRange:[-1,1]}),T=a&&!x&&!E,F=null!=o||T,z=_jsx(View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:b??("string"==typeof o?o:void 0),accessibilityValue:x?{text:"Loading"}:{min:0,max:100,now:Math.round(100*V)},testID:w,onLayout:e=>{const t=e.nativeEvent.layout.width;A.current=t,setNativeValue(v,t)},style:[_.track,{height:n,borderRadius:N,...smoothCorners,backgroundColor:P},h,f],children:E?_jsx(View,{style:[_.segments,{height:n}],children:(p??[]).map((e,t)=>_jsx(View,{style:{width:100*clampProgress(e.value)+"%",height:n,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):_jsx(Animated.View,x?{style:[_.indeterminateBar,{height:n,borderRadius:N,...smoothCorners,backgroundColor:k,width:S,transform:[{translateX:Animated.multiply(M,v)}]},y]}:{style:[_.determinateBar,{height:n,borderRadius:N,...smoothCorners,backgroundColor:D?"transparent":k,width:L,overflow:D?"hidden":void 0},y],children:D?_jsx(Gradient,{gradient:D,style:StyleSheet.absoluteFill}):null})});if(!F)return z;const G={fontSize:r.typography.fontSize.sm,...fontFor(r,"medium")};return _jsxs(View,{style:_.wrapper,children:[_jsxs(View,{style:[_.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof o||"number"==typeof o?_jsx(Text,{style:[_.label,G,{color:r.colors.text.primary}],children:o}):_jsx(View,{style:_.label,children:o}),T?_jsx(Text,{accessible:!1,importantForAccessibility:"no",style:[G,{color:r.colors.text.secondary}],children:`${Math.round(100*V)}%`}):null]}),z]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});export{ProgressBar};export default ProgressBar;
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,fontFor,Gradient,setNativeValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.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}},GLOW_LOCATIONS=[0,.35,.5,.65,1],glowOf=e=>{const t=tintOf(e,0,"transparent"),r=tintOf(e,.6,e);return{colors:[t,r,e,r,t],locations:GLOW_LOCATIONS,start:{x:0,y:.5},end:{x:1,y:.5}}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=forwardRef((e,t)=>{const r=useTheme(),s=useReducedMotion(),{progress:o,label:i,showPercent:n=!1,indeterminate:a,height:l=6,radius:u,tone:c="primary",trackColor:d,barColor:m,gradient:p,segments:g,animated:f=!0,style:h,containerStyle:y,barStyle:b,accessibilityLabel:w,testID:x}=e,j=a??"number"!=typeof o,R=clampProgress(o),V=useRef(createAnimatedValue(R)).current,S=useRef(createAnimatedValue(0)).current,A=useRef(createAnimatedValue(0)).current,v=useRef(0),_=r.components.progressBar?.determinateAnimationDuration??400,C=r.components.progressBar?.indeterminateLoopDuration??1500,B=r.components.progressBar?.indeterminateWidth??"30%",O=useMemo(()=>buildStyles(r),[r]),N=u??r.radius.full,L=d??r.colors.surface.disabled,M=m??toneColor(r,c),P=useMemo(()=>p?"string"==typeof p?r.gradients[p]??null:p:null,[p,r.gradients]),k=useMemo(()=>glowOf(M),[M]),D=Array.isArray(g)&&g.length>0;useEffect(()=>{j||(f?Animated.timing(V,{toValue:R,duration:_,easing:Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():V.setValue(R))},[f,R,_,V,j,r]),useEffect(()=>{if(!j||s)return;setNativeValue(S,0);const e=Animated.loop(Animated.timing(S,{toValue:1,duration:C,easing:Easing.inOut(Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[j,s,S,C]);const E=V.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),T=S.interpolate({inputRange:[0,1],outputRange:[-1,1]}),G=n&&!j&&!D,F=null!=i||G,I=_jsx(View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:w??("string"==typeof i?i:void 0),accessibilityValue:j?{text:"Loading"}:{min:0,max:100,now:Math.round(100*R)},testID:x,onLayout:e=>{const t=e.nativeEvent.layout.width;v.current=t,setNativeValue(A,t)},style:[O.track,{height:l,borderRadius:N,...smoothCorners,backgroundColor:L},h,y],children:D?_jsx(View,{style:[O.segments,{height:l}],children:(g??[]).map((e,t)=>_jsx(View,{style:{width:100*clampProgress(e.value)+"%",height:l,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):_jsx(Animated.View,j?{style:[O.indeterminateBar,{height:l,width:s?"100%":B,transform:s?[]:[{translateX:Animated.multiply(T,A)}]},b],children:_jsx(Gradient,{gradient:k,style:StyleSheet.absoluteFill})}:{style:[O.determinateBar,{height:l,borderRadius:N,...smoothCorners,backgroundColor:P?"transparent":M,width:E,overflow:P?"hidden":void 0},b],children:P?_jsx(Gradient,{gradient:P,style:StyleSheet.absoluteFill}):null})});if(!F)return I;const z={fontSize:r.typography.fontSize.sm,...fontFor(r,"medium")};return _jsxs(View,{style:O.wrapper,children:[_jsxs(View,{style:[O.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof i||"number"==typeof i?_jsx(Text,{style:[O.label,z,{color:r.colors.text.primary}],children:i}):_jsx(View,{style:O.label,children:i}),G?_jsx(Text,{accessible:!1,importantForAccessibility:"no",style:[z,{color:r.colors.text.secondary}],children:`${Math.round(100*R)}%`}):null]}),I]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});export{ProgressBar};export default ProgressBar;

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

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,l)=>{const{value:o,onChangeText:s,onSubmit:t,onFocus:a,onBlur:i,placeholder:n="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:b,size:f="md",variant:p,borderRadius:S,label:m,labelMode:g="top",labelStyle:h,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:z,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:T,style:E,inputStyle:I,accessibilityLabel:H,testID:w,...D}=e,A=useTheme(),P=p??A.components.searchBar?.defaultVariant??A.components.field?.defaultVariant??"filled",V="underline"===P,M=resolveFieldSize(A,f),N={...M,...A.components.searchBar?.[f]??{}},O=resolveFieldTextStyle(A,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,l),[l]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(A),[A]),K="string"==typeof o?o:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),i?.(e)},[i]),[Y,Z]=useState(K),ee=useDebounce(Y,b??0);useEffect(()=>{void 0!==b&&K!==Y&&Z(K)},[K,b]);const le=useRef(K);useEffect(()=>{void 0!==b&&ee!==le.current&&(le.current=ee,s(ee))},[ee,b,s]);const oe=useCallback(e=>{void 0===b?s(e):Z(e)},[b,s]),se=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e),void 0!==b&&(Z(""),le.current=""),s(""),u?.()},[T,b,s,u]),te=useCallback(()=>{t?.(void 0!==b?Y:K)},[t,b,Y,K]),ae=void 0!==b?Y:K,ie=ae.length>0,[ne,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const l=v?.find(l=>l.value===e)?.label;l&&announce(`Searching ${l}`)},[v,re]),[ue,de]=useState(!1),be=useRef(null),fe=useCallback(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),pe=useCallback(()=>{fe(),de(!0)},[fe]),Se=useCallback(()=>{fe(),be.current=setTimeout(()=>de(!1),50)},[fe]);useEffect(()=>fe,[fe]);const me=!c&&(G||ue),ge=useMemo(()=>(R??[]).slice(0,j),[R,j]),he=useMemo(()=>(z??[]).slice(0,L).map(normalizeSuggestion),[z,L]),ve=me&&!ie&&ge.length>0,xe=me&&ie&&he.length>0,Ce=xe?he.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e)},[T]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),_e={size:N.iconSize,color:c?A.colors.text.disabled:A.colors.text.tertiary,disabled:c},ze=d?renderSlotIcon(d,_e):(A.icons?.search??defaultIcons.search)(_e),Le=Boolean(m)&&"float"===g,Be=useFloatingLabel({label:m,enabled:Le,floated:G||ie,variant:P,sizeTokens:{...M,...N},leadingOffset:N.iconSize+A.spacing.md,trailingOffset:ie?N.iconSize+A.spacing.md:0,paddingLeft:V?0:N.paddingHorizontal,color:A.colors.field.label,style:h}),Te=ie&&!c?_jsx(Pressable,{onPress:se,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(A.icons?.close??defaultIcons.close)({size:N.iconSize,color:A.colors.text.secondary})}):null;return _jsxs(View,{style:E,testID:w,children:[m&&!Le?_jsx(FieldLabel,{size:f,style:h,children:m}):null,_jsx(View,{style:q.root,children:_jsxs(View,{style:q.fieldWrap,children:[_jsx(FieldBase,{size:f,variant:P,focused:G,disabled:c,filled:ie,minHeight:N.minHeight,paddingHorizontal:V?0:N.paddingHorizontal,borderRadius:S??N.borderRadius,leading:ze,trailing:Te,topNotch:Be.topNotch,onPress:$,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:H??n,children:_jsx(TextInput,{ref:U,style:[q.input,{fontSize:N.fontSize,color:O.color,...O.weightStyle},I],value:ae,onChangeText:oe,onSubmitEditing:te,onFocus:Q,onBlur:X,placeholder:!Le||G||ie?n:void 0,placeholderTextColor:O.placeholderColor,autoFocus:r,editable:!c,returnKeyType:"search",selectionColor:resolveVariantColors(A,P).borderFocusedRepresentative,accessibilityLabel:H??n,accessibilityState:{disabled:c},"aria-disabled":c,...D})}),Be.node]})}),v&&v.length>0?_jsx(SearchScopeBar,{scopes:v,scope:ne||(v[0]?.value??""),disabled:c,haptic:T,onChange:ce}):null,ve?_jsx(SearchRecents,{recents:ge,title:y,onSelect:ye,onRemove:k?Fe:void 0,onClear:_?ke:void 0,onHold:pe,onRelease:Se}):null,xe?_jsx(SearchSuggestions,{suggestions:he,query:ae,onSelect:je,onHold:pe,onRelease:Se}):null]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,l)=>{const{value:o,onChangeText:s,onSubmit:t,onFocus:a,onBlur:i,placeholder:n="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:b,size:f="md",variant:p,borderRadius:S,label:m,labelMode:g="top",labelStyle:h,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:z,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:T,style:E,inputStyle:I,accessibilityLabel:H,testID:w,...D}=e,A=useTheme(),P=p??A.components.searchBar?.defaultVariant??A.components.field?.defaultVariant??"filled",V="underline"===P,M=resolveFieldSize(A,f),N={...M,...A.components.searchBar?.[f]??{}},O=resolveFieldTextStyle(A,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,l),[l]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(A),[A]),K="string"==typeof o?o:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),i?.(e)},[i]),[Y,Z]=useState(K),ee=useDebounce(Y,b??0);useEffect(()=>{void 0!==b&&K!==Y&&Z(K)},[K,b]);const le=useRef(K);useEffect(()=>{void 0!==b&&ee!==le.current&&(le.current=ee,s(ee))},[ee,b,s]);const oe=useCallback(e=>{void 0===b?s(e):Z(e)},[b,s]),se=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e),void 0!==b&&(Z(""),le.current=""),s(""),u?.()},[T,b,s,u]),te=useCallback(()=>{t?.(void 0!==b?Y:K)},[t,b,Y,K]),ae=void 0!==b?Y:K,ie=ae.length>0,[ne,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const l=v?.find(l=>l.value===e)?.label;l&&announce(`Searching ${l}`)},[v,re]),[ue,de]=useState(!1),be=useRef(null),fe=useCallback(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),pe=useCallback(()=>{fe(),de(!0)},[fe]),Se=useCallback(()=>{fe(),be.current=setTimeout(()=>de(!1),50)},[fe]);useEffect(()=>fe,[fe]);const me=!c&&(G||ue),ge=useMemo(()=>(R??[]).slice(0,j),[R,j]),he=useMemo(()=>(z??[]).slice(0,L).map(normalizeSuggestion),[z,L]),ve=me&&!ie&&ge.length>0,xe=me&&ie&&he.length>0,Ce=xe?he.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e)},[T]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),ze={size:N.iconSize,color:c?A.colors.text.disabled:A.colors.text.tertiary,disabled:c},Le=d?renderSlotIcon(d,ze):(A.icons?.search??defaultIcons.search)(ze),Be=Boolean(m)&&"float"===g,Te=useFloatingLabel({label:m,enabled:Be,floated:G||ie,variant:P,sizeTokens:{...M,...N},leadingOffset:N.iconSize+A.spacing.md,trailingOffset:ie?N.iconSize+A.spacing.md:0,paddingLeft:V?0:N.paddingHorizontal,color:A.colors.field.label,style:h}),Ee=ie&&!c?_jsx(Pressable,{onPress:se,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(A.icons?.close??defaultIcons.close)({size:N.iconSize,color:A.colors.text.secondary})}):null;return _jsxs(View,{style:E,testID:w,children:[m&&!Be?_jsx(FieldLabel,{size:f,style:h,children:m}):null,_jsx(View,{style:q.root,children:_jsxs(View,{style:q.fieldWrap,children:[_jsx(FieldBase,{size:f,variant:P,focused:G,disabled:c,filled:ie,minHeight:N.minHeight,paddingHorizontal:V?0:N.paddingHorizontal,borderRadius:S??N.borderRadius,leading:Le,trailing:Ee,topNotch:Te.topNotch,onPress:$,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:H??n,children:_jsx(TextInput,{ref:U,style:[q.input,{fontSize:N.fontSize,color:O.color,...O.weightStyle},I],value:ae,onChangeText:oe,onSubmitEditing:te,onFocus:Q,onBlur:X,placeholder:!Be||G||ie?n:void 0,placeholderTextColor:O.placeholderColor,autoFocus:r,editable:!c,returnKeyType:"search",selectionColor:resolveVariantColors(A,P).borderFocusedRepresentative,accessibilityLabel:H??n,accessibilityState:{disabled:c},"aria-disabled":c,...D})}),Te.node]})}),v&&v.length>0?_jsx(SearchScopeBar,{scopes:v,scope:ne||(v[0]?.value??""),disabled:c,haptic:T,onChange:ce}):null,ve?_jsx(SearchRecents,{recents:ge,title:y,onSelect:ye,onRemove:k?Fe:void 0,onClear:_?ke:void 0,onHold:pe,onRelease:Se}):null,xe?_jsx(SearchSuggestions,{suggestions:he,query:ae,onSelect:je,onHold:pe,onRelease:Se}):null]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;

package/lib/module/components/SignaturePad/SignaturePad.js

@@ -1 +1 @@
-"use strict";import{formatDateTime}from"@webority/mobile-core";import{forwardRef,memo,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{AccessibilityInfo,PixelRatio,Platform,StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Svg,{Path,Rect,Text as SvgText}from"react-native-svg";import{lightTheme,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Input}from"../Input/index.js";import{Text}from"../Text/index.js";import{BASELINE_RATIO,buildSignatureSvg,distanceBetween,FALLBACK_WIDTH,pointOf,strokePath,typedFontSize}from"./signatureGeometry.js";import{writePng}from"./writePng";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pad:"Signature pad",padHint:"Draw with one finger. To sign without drawing, use the type your name action.",caption:"Sign above the line. To start with an up or down stroke, rest your finger a moment first.",typedCaption:"Your typed name is used as your signature.",undo:"Undo",clear:"Clear",typeInstead:"Type your name instead",drawInstead:"Draw instead",typedLabel:"Type your name",typedPlaceholder:"Your full name",empty:"Not signed",signed:"Signed",typingAnnouncement:"Signing by typing your name. Your typed name is used as your signature. Choose Draw instead to sign with your finger.",drawingAnnouncement:"Signing by drawing. Use one finger on the pad.",clearedAnnouncement:"Signature cleared",undoneAnnouncement:"Last stroke removed",emptyError:"Add a signature first."},STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,DEFAULT_NAME_LENGTH=100,MAX_EXPORT_SCALE=3,MIN_TARGET=44,BASELINE_OPACITY=.3,DISABLED_OPACITY=.5,TARGET_STYLE={minHeight:44},defaultScriptFont=()=>Platform.select({ios:"Snell Roundhand",default:"cursive"}),cssFontStack=e=>"cursive"===e?"cursive":`'${e}', cursive`,useScreenReader=()=>{const[e,t]=useState(!1);return useEffect(()=>{let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(n=>{e&&t(n)});const n=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,n.remove()}},[]),e},StrokePath=memo(({points:e,color:t})=>_jsx(Path,{d:strokePath(e),stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}));StrokePath.displayName="SignaturePadStroke";const SignaturePad=forwardRef((e,t)=>{const{initialStrokes:n,onChange:r,initialTypedName:a="",onTypedNameChange:o,defaultMode:i="draw",onModeChange:s,onEmptyChange:l,allowTyped:d=!0,signedBy:c,signedAt:u,height:p=DEFAULT_HEIGHT,maxNameLength:m=DEFAULT_NAME_LENGTH,inkColor:g,paperColor:h,scriptFontFamily:y,labels:f,haptic:S="selection",disabled:T=!1,style:w,testID:b}=e,E=useTheme(),A=g??lightTheme.colors.text.primary,x=h??lightTheme.colors.background.elevated,_=y??defaultScriptFont(),C=useMemo(()=>({...DEFAULT_LABELS,...f}),[f]),v=useScreenReader(),I=useRef(null),[L,R]=useState(0),[P,j]=useState(()=>(n??[]).map((e,t)=>({id:t+1,points:[...e]}))),D=useRef(P),k=useRef(P.length),N=useRef(null),F=useRef(null),[M,B]=useState(d?i:"draw"),[O,G]=useState(a),[H,Y]=useState(null),U=useRef(!1),W=useRef({onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l});useEffect(()=>{W.current={onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l}});const $="draw"===M&&!T,z="draw"===M?0===P.length:0===O.trim().length,V=useRef(null);useEffect(()=>{V.current!==z&&(V.current=z,W.current.onEmptyChange?.(z))},[z]);const K=useCallback(e=>{D.current=e,j(e)},[]),X=useCallback(()=>{Y(Date.now()),W.current.onChange?.(D.current.map(e=>e.points))},[]),J=useMemo(()=>{const pan=e=>Gesture.Pan().enabled($).runOnJS(!0).onBegin(e=>{N.current=pointOf(e.x,e.y)}).onStart(t=>{F.current=e,k.current+=1;const n=pointOf(t.x,t.y);K([...D.current,{id:k.current,points:[N.current??n,n]}])}).onUpdate(t=>{if(F.current!==e)return;const n=D.current[D.current.length-1],r=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],r)<.8||K([...D.current.slice(0,-1),{...n,points:[...n.points,r]}])}).onFinalize(()=>{F.current===e&&(F.current=null,X())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[$,K,X]),q=useCallback(e=>{B(e),W.current.onModeChange?.(e),announce("type"===e?C.typingAnnouncement:C.drawingAnnouncement)},[C.typingAnnouncement,C.drawingAnnouncement]);useEffect(()=>{v&&d&&!U.current&&"draw"===M&&0===D.current.length&&q("type")},[v,d,M,q]);const Q=useCallback(()=>{U.current=!0,q("draw"===M?"type":"draw")},[M,q]),Z=useCallback(e=>{G(e),Y(Date.now()),W.current.onTypedNameChange?.(e)},[]),ee=useCallback(()=>{"type"===M?Z(""):(K([]),X()),announce(C.clearedAnnouncement)},[M,Z,K,X,C.clearedAnnouncement]),te=useCallback(()=>{"draw"===M&&0!==D.current.length&&(K(D.current.slice(0,-1)),X(),announce(C.undoneAnnouncement))},[M,K,X,C.undoneAnnouncement]),ne=L||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(z)return void t(new Error(C.emptyError));if(!I.current)return void t(new Error("The signature pad is not on screen."));const n=Math.min(3,Math.max(1,PixelRatio.get()));I.current.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:ne*n,height:p*n})}),toSvg:()=>buildSignatureSvg({width:ne,height:p,mode:M,strokes:P.map(e=>e.points),typedName:O,ink:A,paper:x,strokeWidth:2.5,fontFamily:cssFontStack(_)}),clear:ee,undo:te,isEmpty:()=>z}),[z,C.emptyError,ne,p,M,P,O,A,x,_,ee,te]);const re=useMemo(()=>[{name:"undo",label:C.undo},{name:"clear",label:C.clear},...d?[{name:"toggleMode",label:"draw"===M?C.typeInstead:C.drawInstead}]:[]],[C.undo,C.clear,C.typeInstead,C.drawInstead,d,M]),ae=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?te():"clear"===t?ee():"toggleMode"===t&&d&&Q()},[T,te,ee,Q,d]),oe=useCallback(e=>{R(e.nativeEvent.layout.width)},[]),ie=useMemo(()=>StyleSheet.create({root:{gap:E.spacing.sm},pad:{height:p,borderWidth:E.colors.border.width,borderColor:E.colors.border.primary,borderRadius:E.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:x,opacity:T?.5:1},baseline:{position:"absolute",left:E.spacing.md,right:E.spacing.md,top:p*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:A,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:E.spacing.xs},trailing:{flexDirection:"row",alignItems:"center",gap:E.spacing.xs}}),[E,p,x,A,T]),se=O.trim(),le=u??H,de=c&&!z?`Signed by ${c}${le?`, ${formatDateTime(le)}`:""}`:null,ce="type"===M&&se?`${C.pad}. ${se}`:C.pad;return _jsxs(View,{style:[ie.root,w],testID:b,children:[_jsx(GestureDetector,{gesture:J,children:_jsxs(View,{style:ie.pad,onLayout:oe,accessible:!0,accessibilityRole:"image",accessibilityLabel:ce,accessibilityHint:"draw"===M?C.padHint:void 0,accessibilityValue:{text:z?C.empty:C.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:re,onAccessibilityAction:ae,children:[_jsxs(Svg,{ref:I,width:"100%",height:p,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:x}),"draw"===M?P.map(e=>_jsx(StrokePath,{points:e.points,color:A},e.id)):null,"type"===M&&se?_jsx(SvgText,{x:ne/2,y:p*BASELINE_RATIO,fontSize:typedFontSize(ne,se),fontFamily:_,textAnchor:"middle",fill:A,children:se}):null]}),_jsx(View,{pointerEvents:"none",style:ie.baseline})]})}),"type"===M?_jsx(Input,{label:C.typedLabel,placeholder:C.typedPlaceholder,value:O,onChangeText:Z,maxLength:m,disabled:T,autoComplete:"name",textContentType:"name",autoCapitalize:"words",autoCorrect:!1,returnKeyType:"done",testID:b?`${b}-name`:void 0}):null,_jsx(Text,{variant:"caption",color:"tertiary",children:"draw"===M?C.caption:C.typedCaption}),_jsxs(View,{style:ie.actions,children:[d?_jsx(Button,{title:"draw"===M?C.typeInstead:C.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:Q,testID:b?`${b}-mode`:void 0}):_jsx(View,{}),"draw"===M&&P.length>0?_jsxs(View,{style:ie.trailing,children:[_jsx(Button,{title:C.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:te,testID:b?`${b}-undo`:void 0}),_jsx(Button,{title:C.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:ee,testID:b?`${b}-clear`:void 0})]}):null,"type"===M&&se?_jsx(Button,{title:C.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:ee,testID:b?`${b}-clear`:void 0}):null]}),de?_jsx(Text,{variant:"caption",color:"secondary",children:de}):null]})});SignaturePad.displayName="SignaturePad";export{SignaturePad};export default SignaturePad;
+"use strict";import{formatDateTime}from"@webority/mobile-core";import{forwardRef,memo,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{AccessibilityInfo,PixelRatio,Platform,StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Svg,{Path,Rect,Text as SvgText}from"react-native-svg";import{lightTheme,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Input}from"../Input/index.js";import{Text}from"../Text/index.js";import{BASELINE_RATIO,buildSignatureSvg,distanceBetween,FALLBACK_WIDTH,pointOf,strokePath,typedFontSize}from"./signatureGeometry.js";import{writePng}from"./writePng";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pad:"Signature pad",padHint:"Draw with one finger. To sign without drawing, use the type your name action.",caption:"Sign above the line. To start with an up or down stroke, rest your finger a moment first.",typedCaption:"Your typed name is used as your signature.",undo:"Undo",clear:"Clear",typeInstead:"Type your name instead",drawInstead:"Draw instead",typedLabel:"Type your name",typedPlaceholder:"Your full name",empty:"Not signed",signed:"Signed",typingAnnouncement:"Signing by typing your name. Your typed name is used as your signature. Choose Draw instead to sign with your finger.",drawingAnnouncement:"Signing by drawing. Use one finger on the pad.",clearedAnnouncement:"Signature cleared",undoneAnnouncement:"Last stroke removed",emptyError:"Add a signature first."},STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,DEFAULT_NAME_LENGTH=100,MAX_EXPORT_SCALE=3,MIN_TARGET=44,BASELINE_OPACITY=.3,DISABLED_OPACITY=.5,TARGET_STYLE={minHeight:44},defaultScriptFont=()=>Platform.select({ios:"Snell Roundhand",default:"cursive"}),cssFontStack=e=>"cursive"===e?"cursive":`'${e}', cursive`,useScreenReader=()=>{const[e,t]=useState(!1);return useEffect(()=>{let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(n=>{e&&t(n)});const n=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,n.remove()}},[]),e},StrokePath=memo(({points:e,color:t})=>_jsx(Path,{d:strokePath(e),stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}));StrokePath.displayName="SignaturePadStroke";const Marks=({mode:e,strokes:t,name:n,color:r,fontFamily:a,width:o,height:i})=>"draw"===e?_jsx(_Fragment,{children:t.map(e=>_jsx(StrokePath,{points:e.points,color:r},e.id))}):n?_jsx(SvgText,{x:o/2,y:i*BASELINE_RATIO,fontSize:typedFontSize(o,n),fontFamily:a,textAnchor:"middle",fill:r,children:n}):null,SignaturePad=forwardRef((e,t)=>{const{initialStrokes:n,onChange:r,initialTypedName:a="",onTypedNameChange:o,defaultMode:i="draw",onModeChange:s,onEmptyChange:l,allowTyped:d=!0,signedBy:c,signedAt:u,height:m=DEFAULT_HEIGHT,maxNameLength:p=DEFAULT_NAME_LENGTH,inkColor:h,paperColor:g,scriptFontFamily:y,labels:f,haptic:S="selection",disabled:T=!1,style:w,testID:x}=e,b=useTheme(),_=void 0===h&&void 0===g,E=_?b.colors.text.primary:h??lightTheme.colors.text.primary,A=_?b.colors.background.elevated:g??lightTheme.colors.background.elevated,v=_?lightTheme.colors.text.primary:E,C=_?lightTheme.colors.background.elevated:A,I=v!==E||C!==A,R=y??defaultScriptFont(),L=useMemo(()=>({...DEFAULT_LABELS,...f}),[f]),k=useScreenReader(),j=useRef(null),P=useRef(null),[D,F]=useState(0),[M,N]=useState(()=>(n??[]).map((e,t)=>({id:t+1,points:[...e]}))),B=useRef(M),O=useRef(M.length),G=useRef(null),H=useRef(null),[Y,U]=useState(d?i:"draw"),[W,$]=useState(a),[z,V]=useState(null),K=useRef(!1),X=useRef({onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l});useEffect(()=>{X.current={onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l}});const J="draw"===Y&&!T,q="draw"===Y?0===M.length:0===W.trim().length,Q=useRef(null);useEffect(()=>{Q.current!==q&&(Q.current=q,X.current.onEmptyChange?.(q))},[q]);const Z=useCallback(e=>{B.current=e,N(e)},[]),ee=useCallback(()=>{V(Date.now()),X.current.onChange?.(B.current.map(e=>e.points))},[]),te=useMemo(()=>{const pan=e=>Gesture.Pan().enabled(J).runOnJS(!0).onBegin(e=>{G.current=pointOf(e.x,e.y)}).onStart(t=>{H.current=e,O.current+=1;const n=pointOf(t.x,t.y);Z([...B.current,{id:O.current,points:[G.current??n,n]}])}).onUpdate(t=>{if(H.current!==e)return;const n=B.current[B.current.length-1],r=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],r)<.8||Z([...B.current.slice(0,-1),{...n,points:[...n.points,r]}])}).onFinalize(()=>{H.current===e&&(H.current=null,ee())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[J,Z,ee]),ne=useCallback(e=>{U(e),X.current.onModeChange?.(e),announce("type"===e?L.typingAnnouncement:L.drawingAnnouncement)},[L.typingAnnouncement,L.drawingAnnouncement]);useEffect(()=>{k&&d&&!K.current&&"draw"===Y&&0===B.current.length&&ne("type")},[k,d,Y,ne]);const re=useCallback(()=>{K.current=!0,ne("draw"===Y?"type":"draw")},[Y,ne]),ae=useCallback(e=>{$(e),V(Date.now()),X.current.onTypedNameChange?.(e)},[]),oe=useCallback(()=>{"type"===Y?ae(""):(Z([]),ee()),announce(L.clearedAnnouncement)},[Y,ae,Z,ee,L.clearedAnnouncement]),ie=useCallback(()=>{"draw"===Y&&0!==B.current.length&&(Z(B.current.slice(0,-1)),ee(),announce(L.undoneAnnouncement))},[Y,Z,ee,L.undoneAnnouncement]),se=D||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(q)return void t(new Error(L.emptyError));const n=I?P.current:j.current;if(!n)return void t(new Error("The signature pad is not on screen."));const r=Math.min(3,Math.max(1,PixelRatio.get()));n.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:se*r,height:m*r})}),toSvg:()=>buildSignatureSvg({width:se,height:m,mode:Y,strokes:M.map(e=>e.points),typedName:W,ink:v,paper:C,strokeWidth:2.5,fontFamily:cssFontStack(R)}),clear:oe,undo:ie,isEmpty:()=>q}),[q,L.emptyError,se,m,Y,M,W,I,v,C,R,oe,ie]);const le=useMemo(()=>[{name:"undo",label:L.undo},{name:"clear",label:L.clear},...d?[{name:"toggleMode",label:"draw"===Y?L.typeInstead:L.drawInstead}]:[]],[L.undo,L.clear,L.typeInstead,L.drawInstead,d,Y]),de=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?ie():"clear"===t?oe():"toggleMode"===t&&d&&re()},[T,ie,oe,re,d]),ce=useCallback(e=>{F(e.nativeEvent.layout.width)},[]),ue=useMemo(()=>StyleSheet.create({root:{gap:b.spacing.sm},pad:{height:m,borderWidth:b.colors.border.width,borderColor:b.colors.border.primary,borderRadius:b.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:A,opacity:T?.5:1},baseline:{position:"absolute",left:b.spacing.md,right:b.spacing.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:E,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:b.spacing.xs},trailing:{flexDirection:"row",alignItems:"center",gap:b.spacing.xs}}),[b,m,A,E,T]),me=W.trim(),pe=u??z,he=c&&!q?`Signed by ${c}${pe?`, ${formatDateTime(pe)}`:""}`:null,ge="type"===Y&&me?`${L.pad}. ${me}`:L.pad;return _jsxs(View,{style:[ue.root,w],testID:x,children:[_jsx(GestureDetector,{gesture:te,children:_jsxs(View,{style:ue.pad,onLayout:ce,accessible:!0,accessibilityRole:"image",accessibilityLabel:ge,accessibilityHint:"draw"===Y?L.padHint:void 0,accessibilityValue:{text:q?L.empty:L.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:le,onAccessibilityAction:de,children:[I?_jsxs(Svg,{ref:P,style:StyleSheet.absoluteFill,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:C}),_jsx(Marks,{mode:Y,strokes:M,name:me,color:v,fontFamily:R,width:se,height:m})]}):null,_jsxs(Svg,{ref:j,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:A}),_jsx(Marks,{mode:Y,strokes:M,name:me,color:E,fontFamily:R,width:se,height:m})]}),_jsx(View,{pointerEvents:"none",style:ue.baseline})]})}),"type"===Y?_jsx(Input,{label:L.typedLabel,placeholder:L.typedPlaceholder,value:W,onChangeText:ae,maxLength:p,disabled:T,autoComplete:"name",textContentType:"name",autoCapitalize:"words",autoCorrect:!1,returnKeyType:"done",testID:x?`${x}-name`:void 0}):null,_jsx(Text,{variant:"caption",color:"tertiary",children:"draw"===Y?L.caption:L.typedCaption}),_jsxs(View,{style:ue.actions,children:[d?_jsx(Button,{title:"draw"===Y?L.typeInstead:L.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:re,testID:x?`${x}-mode`:void 0}):_jsx(View,{}),"draw"===Y&&M.length>0?_jsxs(View,{style:ue.trailing,children:[_jsx(Button,{title:L.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:ie,testID:x?`${x}-undo`:void 0}),_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:oe,testID:x?`${x}-clear`:void 0})]}):null,"type"===Y&&me?_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:oe,testID:x?`${x}-clear`:void 0}):null]}),he?_jsx(Text,{variant:"caption",color:"secondary",children:he}):null]})});SignaturePad.displayName="SignaturePad";export{SignaturePad};export default SignaturePad;

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/SquircleView/SquircleView.js

@@ -0,0 +1 @@
+"use strict";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{smoothCorners}from"../../utils/corners.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const PER_EDGE_KEYS=["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderTopStartRadius","borderTopEndRadius","borderBottomStartRadius","borderBottomEndRadius","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStartWidth","borderEndWidth","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","borderStartColor","borderEndColor"],readShape=r=>{const{borderRadius:e,backgroundColor:o,borderColor:t,borderWidth:i=0,borderStyle:d}=r;if("number"!=typeof e||e<=0||"hidden"===r.overflow||(r.elevation??0)>0||void 0!==d&&"solid"!==d||PER_EDGE_KEYS.some(e=>void 0!==r[e]))return null;const s="string"==typeof o&&"transparent"!==o,l=i>0&&"string"==typeof t&&"transparent"!==t;return void 0!==o&&"string"!=typeof o||i>0&&void 0!==t&&"string"!=typeof t||!s&&!l?null:{radius:e,fill:s?o:"transparent",stroke:l?t:void 0,strokeWidth:l?i:0,outset:i}},SquircleView=forwardRef(({style:r,children:e,onLayout:o,...t},i)=>{const d=StyleSheet.flatten(r)??{},s=readShape(d),l="number"==typeof d.borderRadius?d.borderRadius:0,a=useSquircle(l>0,l,o),n=a.active?a.size:null,u=null!==s&&null!==n;return _jsxs(View,{ref:i,...t,onLayout:a.onLayout,style:[l>0?smoothCorners:null,r,u?styles.hostTransparent:null],children:[s&&n?_jsx(SquircleFill,{width:n.width,height:n.height,radius:s.radius,fill:s.fill,stroke:s.stroke,strokeWidth:s.strokeWidth,outset:s.outset}):null,e]})});SquircleView.displayName="SquircleView";const styles=StyleSheet.create({hostTransparent:{backgroundColor:"transparent",borderColor:"transparent"}});export{SquircleView};export default SquircleView;

package/lib/module/components/SquircleView/index.js

@@ -0,0 +1 @@
+"use strict";export{SquircleView}from"./SquircleView.js";

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/components/index.js

@@ -1 +1 @@
-"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar}from"./AppBar/index.js";export{AsyncBlock}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete}from"./Autocomplete/index.js";export{Avatar,AvatarGroup}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Banner}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation}from"./BottomNavigation/index.js";export{BottomSheet,useBottomSheet,useSheetSwap}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button}from"./Button/index.js";export{Calendar}from"./Calendar/index.js";export{Card}from"./Card/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{DatePicker}from"./DatePicker/index.js";export{DateRangePicker}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DecimalInput,parseDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{ImageGallery}from"./ImageGallery/index.js";export{InlineSelect}from"./InlineSelect/index.js";export{Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{NumberInput}from"./NumberInput/index.js";export{OnboardingPager}from"./OnboardingPager/index.js";export{OptionSheet}from"./OptionSheet/index.js";export{OTPInput}from"./OTPInput/index.js";export{PaymentResult}from"./PaymentResult/index.js";export{PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{PickerTrigger}from"./PickerTrigger/index.js";export{ProfileCompletion}from"./ProfileCompletion/index.js";export{ProfilePicker}from"./ProfilePicker/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{Rating}from"./Rating/index.js";export{Repeater}from"./Repeater/index.js";export{applyMarkdownAction,RichTextEditor}from"./RichTextEditor/index.js";export{ScannerOverlay}from"./ScannerOverlay/index.js";export{SearchBar,useRecentSearches}from"./SearchBar/index.js";export{SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{Select}from"./Select/index.js";export{SignaturePad}from"./SignaturePad/index.js";export{Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useReduceMotion,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{SliderField}from"./SliderField/index.js";export{SlideToConfirm}from"./SlideToConfirm/index.js";export{Sparkline}from"./Sparkline/index.js";export{Spinner}from"./Spinner/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{TimePicker}from"./TimePicker/index.js";export{Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{Tooltip}from"./Tooltip/index.js";export{Tour}from"./Tour/index.js";export{TypingIndicator}from"./TypingIndicator/index.js";export{WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";
+"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar}from"./AppBar/index.js";export{AsyncBlock}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete}from"./Autocomplete/index.js";export{Avatar,AvatarGroup}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Banner}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation}from"./BottomNavigation/index.js";export{BottomSheet,useBottomSheet,useSheetSwap}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button}from"./Button/index.js";export{Calendar}from"./Calendar/index.js";export{Card}from"./Card/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{DatePicker}from"./DatePicker/index.js";export{DateRangePicker}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DecimalInput,parseDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FilterChipRow}from"./FilterChipRow/index.js";export{FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{ImageGallery}from"./ImageGallery/index.js";export{InlineSelect}from"./InlineSelect/index.js";export{Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{NumberInput}from"./NumberInput/index.js";export{OnboardingPager}from"./OnboardingPager/index.js";export{OptionSheet}from"./OptionSheet/index.js";export{OTPInput}from"./OTPInput/index.js";export{PaymentResult}from"./PaymentResult/index.js";export{PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{PickerTrigger}from"./PickerTrigger/index.js";export{ProfileCompletion}from"./ProfileCompletion/index.js";export{ProfilePicker}from"./ProfilePicker/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{Rating}from"./Rating/index.js";export{Repeater}from"./Repeater/index.js";export{applyMarkdownAction,RichTextEditor}from"./RichTextEditor/index.js";export{ScannerOverlay}from"./ScannerOverlay/index.js";export{SearchBar,useRecentSearches}from"./SearchBar/index.js";export{SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{Select}from"./Select/index.js";export{SignaturePad}from"./SignaturePad/index.js";export{Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useReduceMotion,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{SliderField}from"./SliderField/index.js";export{SlideToConfirm}from"./SlideToConfirm/index.js";export{Sparkline}from"./Sparkline/index.js";export{Spinner}from"./Spinner/index.js";export{SquircleView}from"./SquircleView/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{TimePicker}from"./TimePicker/index.js";export{Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{Tooltip}from"./Tooltip/index.js";export{Tour}from"./Tour/index.js";export{TypingIndicator}from"./TypingIndicator/index.js";export{WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";