@webority/mobile-ui 0.104.1 → 0.107.0

package/lib/module/components/ScannerOverlay/ScannerOverlay.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{EmptyState}from"../EmptyState/index.js";import{IconButton}from"../IconButton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MIN_FRAME=240,DEFAULT_FRAME=260,MARK_LENGTH=32,MARK_THICKNESS=4,LIFT=.06,BREATHE_SCALE=1.03,SNAP_SCALE=1.08,T=4,CORNERS=[{key:"tl",style:{top:0,left:0,borderTopWidth:4,borderLeftWidth:4}},{key:"tr",style:{top:0,right:0,borderTopWidth:4,borderRightWidth:4}},{key:"bl",style:{bottom:0,left:0,borderBottomWidth:4,borderLeftWidth:4}},{key:"br",style:{bottom:0,right:0,borderBottomWidth:4,borderRightWidth:4}}],DEFAULT_LABELS={found:"Code found",invalid:"This code cannot be used. Try another.",torchOn:"Turn torch on",torchOff:"Turn torch off",manualEntry:"Enter code instead",gallery:"Upload from gallery",noPermissionTitle:"Camera access is off",noPermissionMessage:"Allow camera access to scan a code.",permissionAction:"Allow camera access",noCameraTitle:"No camera found",noCameraMessage:"This device has no camera available. You can still add the code another way."},ScannerOverlay=forwardRef((e,t)=>{const{children:o,state:n="scanning",hint:i="Point the camera at the code",labels:s,torch:r=!1,onTorchChange:a,onManualEntry:l,onGallery:c,onPermissionAction:d,frameSize:m=DEFAULT_FRAME,haptic:u,style:h,testID:f}=e,p=useTheme(),g=useSafeAreaInsets(),y=useReducedMotion(),b=useMemo(()=>buildStyles(p),[p]),x={...DEFAULT_LABELS,...s},[j,S]=useState({width:0,height:0}),v="scanning"===n||"found"===n||"invalid"===n,w=useRef(createAnimatedValue(1)).current,A=p.motion.duration.slower,E=p.motion.duration.default;useEffect(()=>{if(w.setValue(1),y)return;let e;return"scanning"===n&&A>0?e=Animated.loop(Animated.sequence([Animated.timing(w,{toValue:1.03,duration:2*A,useNativeDriver:!0}),Animated.timing(w,{toValue:1,duration:2*A,useNativeDriver:!0})])):"found"===n&&E>0&&(w.setValue(1.08),e=Animated.timing(w,{toValue:1,duration:E,useNativeDriver:!0})),e?.start(),()=>e?.stop()},[n,y,A,E,w]);const _=useRef(n);useEffect(()=>{_.current!==n&&(_.current=n,!1!==u&&("found"===n?triggerHaptic("notificationSuccess"):"invalid"===n&&triggerHaptic("notificationError")))},[n,u]);const{found:V,invalid:C}=x,{noPermissionTitle:R,noPermissionMessage:M}=x,{noCameraTitle:I,noCameraMessage:k}=x;useEffect(()=>{switch(n){case"scanning":announce(i);break;case"found":announce(V);break;case"invalid":announce(C,{polite:!1});break;case"noPermission":announce(`${R}. ${M}`);break;case"noCamera":announce(`${I}. ${k}`)}},[n,i,V,C,R,M,I,k]);const L=Math.max(240,Math.min(m,j.width-2*p.space.xl)),P=(j.width-L)/2,F=Math.max(p.space.md,(j.height-L)/2-.06*j.height),B=j.width>0&&j.height>0,N={borderColor:"found"===n?p.colors.success:"invalid"===n?p.colors.danger:p.colors["on-scrim"],width:32,height:32},O="found"===n||"invalid"===n?_jsx(View,{style:[b.pill,{backgroundColor:"found"===n?p.colors.success:p.colors.danger}],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",color:"found"===n?p.colors["on-success"]:p.colors["on-danger"],children:"found"===n?V:C})}):_jsx(Text,{variant:"bodySmall",align:"center",color:p.colors["on-scrim"],children:i}),D=v&&null!=a,H=v?"glass":"outline";return _jsxs(View,{ref:t,testID:f,onLayout:e=>{const{width:t,height:o}=e.nativeEvent.layout;S(e=>e.width===t&&e.height===o?e:{width:t,height:o})},style:[b.root,!v&&{backgroundColor:p.colors.bg},h],children:[v?_jsx(View,{style:StyleSheet.absoluteFill,children:o}):null,v&&B?_jsxs(_Fragment,{children:[_jsxs(View,{pointerEvents:"none",style:StyleSheet.absoluteFill,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants","aria-hidden":!0,children:[_jsx(View,{style:[b.scrim,{left:0,right:0,top:0,height:F}]}),_jsx(View,{style:[b.scrim,{left:0,right:0,top:F+L,bottom:0}]}),_jsx(View,{style:[b.scrim,{left:0,width:P,top:F,height:L}]}),_jsx(View,{style:[b.scrim,{left:P+L,right:0,top:F,height:L}]}),_jsx(Animated.View,{style:{position:"absolute",left:P,top:F,width:L,height:L,transform:[{scale:w}]},children:CORNERS.map(e=>_jsx(View,{style:[b.mark,N,e.style]},e.key))})]}),_jsx(View,{pointerEvents:"none",style:[b.message,{top:F+L+p.space.md}],children:O})]}):null,v?null:_jsx(View,{style:b.panel,children:_jsx(EmptyState,{fill:!0,icon:_jsx(AppIcon,{name:"noPermission"===n?"camera":"camera-slash",size:48,color:p.colors["text-subtle"]}),title:"noPermission"===n?R:I,description:"noPermission"===n?M:k,action:"noPermission"===n&&d?{label:x.permissionAction,onPress:d}:void 0})}),_jsxs(View,{pointerEvents:"box-none",style:[b.bar,{paddingBottom:Math.max(g.bottom,p.space.md)}],children:[D?_jsx(IconButton,{icon:r?"flash":"flash-slash",variant:"glass",size:"lg",active:r,haptic:u,accessibilityLabel:r?x.torchOff:x.torchOn,onPress:()=>a?.(!r)}):null,c?_jsx(Button,{title:x.gallery,leftIcon:"gallery",variant:H,tone:"neutral",size:"lg",haptic:u,onPress:c}):null,l?_jsx(Button,{title:x.manualEntry,leftIcon:"keyboard",variant:H,tone:"neutral",size:"lg",haptic:u,onPress:l}):null]})]})});ScannerOverlay.displayName="ScannerOverlay";const buildStyles=e=>StyleSheet.create({root:{flex:1,overflow:"hidden"},scrim:{position:"absolute",backgroundColor:e.colors.scrim},mark:{position:"absolute"},message:{position:"absolute",left:0,right:0,alignItems:"center",paddingHorizontal:e.space.xl},pill:{paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners},panel:{...StyleSheet.absoluteFill,justifyContent:"center"},bar:{position:"absolute",left:0,right:0,bottom:0,flexDirection:"row",flexWrap:"wrap",alignItems:"center",justifyContent:"center",gap:e.space.sm,paddingHorizontal:e.space.md}});export{ScannerOverlay};export default ScannerOverlay;
+"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/index.js";import{Button}from"../Button/index.js";import{EmptyState}from"../EmptyState/index.js";import{IconButton}from"../IconButton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MIN_FRAME=240,DEFAULT_FRAME=260,MARK_LENGTH=32,MARK_THICKNESS=4,LIFT=.06,BREATHE_SCALE=1.03,SNAP_SCALE=1.08,T=4,CORNERS=[{key:"tl",style:{top:0,left:0,borderTopWidth:4,borderLeftWidth:4}},{key:"tr",style:{top:0,right:0,borderTopWidth:4,borderRightWidth:4}},{key:"bl",style:{bottom:0,left:0,borderBottomWidth:4,borderLeftWidth:4}},{key:"br",style:{bottom:0,right:0,borderBottomWidth:4,borderRightWidth:4}}];export const DEFAULT_SCANNER_OVERLAY_LABELS=Object.freeze({hint:"Point the camera at the code",found:"Code found",invalid:"This code cannot be used. Try another.",torchOn:"Turn torch on",torchOff:"Turn torch off",manualEntry:"Enter code instead",gallery:"Upload from gallery",noPermissionTitle:"Camera access is off",noPermissionMessage:"Allow camera access to scan a code.",permissionAction:"Allow camera access",noCameraTitle:"No camera found",noCameraMessage:"This device has no camera available. You can still add the code another way."});const ScannerOverlay=forwardRef((e,t)=>{warnInvalidValue("ScannerOverlay","state",e.state,["scanning","found","invalid","noPermission","noCamera"]);const{children:o,state:n="scanning",helperText:i,labels:s,torch:a=!1,onTorchChange:r,onManualEntry:l,onGallery:c,onPermissionAction:d,frameSize:m=DEFAULT_FRAME,haptic:u,style:h,testID:f}=e,p=useTheme(),g=useSafeAreaInsets(),y=useReducedMotion(),b=useMemo(()=>buildStyles(p),[p]),x=useMemo(()=>({...DEFAULT_SCANNER_OVERLAY_LABELS,...s}),[s]),j=i??x.hint,[v,S]=useState({width:0,height:0}),A="scanning"===n||"found"===n||"invalid"===n,w=useRef(createAnimatedValue(1)).current,E=p.motion.duration.slower,_=p.motion.duration.default;useEffect(()=>{if(w.setValue(1),y)return;let e;return"scanning"===n&&E>0?e=Animated.loop(Animated.sequence([Animated.timing(w,{toValue:1.03,duration:2*E,useNativeDriver:!0}),Animated.timing(w,{toValue:1,duration:2*E,useNativeDriver:!0})])):"found"===n&&_>0&&(w.setValue(1.08),e=Animated.timing(w,{toValue:1,duration:_,useNativeDriver:!0})),e?.start(),()=>e?.stop()},[n,y,E,_,w]);const V=useRef(n);useEffect(()=>{V.current!==n&&(V.current=n,!1!==u&&("found"===n?triggerHaptic("notificationSuccess"):"invalid"===n&&triggerHaptic("notificationError")))},[n,u]);const{found:R,invalid:C}=x,{noPermissionTitle:M,noPermissionMessage:I}=x,{noCameraTitle:L,noCameraMessage:P}=x;useEffect(()=>{switch(n){case"scanning":announce(j);break;case"found":announce(R);break;case"invalid":announce(C,{polite:!1});break;case"noPermission":announce(`${M}. ${I}`);break;case"noCamera":announce(`${L}. ${P}`)}},[n,j,R,C,M,I,L,P]);const k=Math.max(240,Math.min(m,v.width-2*p.space.xl)),F=(v.width-k)/2,N=Math.max(p.space.md,(v.height-k)/2-.06*v.height),O=v.width>0&&v.height>0,B={borderColor:"found"===n?p.colors.success:"invalid"===n?p.colors.danger:p.colors["on-scrim"],width:32,height:32},D="found"===n||"invalid"===n?_jsx(View,{style:[b.pill,{backgroundColor:"found"===n?p.colors.success:p.colors.danger}],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",style:{color:"found"===n?p.colors["on-success"]:p.colors["on-danger"]},children:"found"===n?R:C})}):_jsx(Text,{variant:"bodySmall",align:"center",style:{color:p.colors["on-scrim"]},children:j}),H=A&&null!=r,z=A?"glass":"outline";return _jsxs(View,{ref:t,testID:f,onLayout:e=>{const{width:t,height:o}=e.nativeEvent.layout;S(e=>e.width===t&&e.height===o?e:{width:t,height:o})},style:[b.root,!A&&{backgroundColor:p.colors.bg},h],children:[A?_jsx(View,{style:StyleSheet.absoluteFill,children:o}):null,A&&O?_jsxs(_Fragment,{children:[_jsxs(View,{pointerEvents:"none",style:StyleSheet.absoluteFill,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants","aria-hidden":!0,children:[_jsx(View,{style:[b.scrim,{left:0,right:0,top:0,height:N}]}),_jsx(View,{style:[b.scrim,{left:0,right:0,top:N+k,bottom:0}]}),_jsx(View,{style:[b.scrim,{left:0,width:F,top:N,height:k}]}),_jsx(View,{style:[b.scrim,{left:F+k,right:0,top:N,height:k}]}),_jsx(Animated.View,{style:{position:"absolute",left:F,top:N,width:k,height:k,transform:[{scale:w}]},children:CORNERS.map(e=>_jsx(View,{style:[b.mark,B,e.style]},e.key))})]}),_jsx(View,{pointerEvents:"none",style:[b.message,{top:N+k+p.space.md}],children:D})]}):null,A?null:_jsx(View,{style:b.panel,children:_jsx(EmptyState,{fill:!0,icon:_jsx(AppIcon,{name:"noPermission"===n?"camera":"camera-slash",size:48,color:p.colors["text-subtle"]}),title:"noPermission"===n?M:L,description:"noPermission"===n?I:P,action:"noPermission"===n&&d?{label:x.permissionAction,onPress:d}:void 0})}),_jsxs(View,{pointerEvents:"box-none",style:[b.bar,{paddingBottom:Math.max(g.bottom,p.space.md)}],children:[H?_jsx(IconButton,{icon:a?"flash":"flash-slash",variant:"glass",size:"lg",active:a,haptic:u,accessibilityLabel:a?x.torchOff:x.torchOn,onPress:()=>r?.(!a)}):null,c?_jsx(Button,{label:x.gallery,leftIcon:"gallery",variant:z,tone:"neutral",size:"lg",haptic:u,onPress:c}):null,l?_jsx(Button,{label:x.manualEntry,leftIcon:"keyboard",variant:z,tone:"neutral",size:"lg",haptic:u,onPress:l}):null]})]})});ScannerOverlay.displayName="ScannerOverlay";const buildStyles=e=>StyleSheet.create({root:{flex:1,overflow:"hidden"},scrim:{position:"absolute",backgroundColor:e.colors.scrim},mark:{position:"absolute"},message:{position:"absolute",left:0,right:0,alignItems:"center",paddingHorizontal:e.space.xl},pill:{paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners},panel:{...StyleSheet.absoluteFill,justifyContent:"center"},bar:{position:"absolute",left:0,right:0,bottom:0,flexDirection:"row",flexWrap:"wrap",alignItems:"center",justifyContent:"center",gap:e.space.sm,paddingHorizontal:e.space.md}});export{ScannerOverlay};export default ScannerOverlay;

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

@@ -1 +1 @@
-"use strict";export{default,ScannerOverlay}from"./ScannerOverlay.js";
+"use strict";export{DEFAULT_SCANNER_OVERLAY_LABELS,default,ScannerOverlay}from"./ScannerOverlay.js";

package/lib/module/components/Screen/Screen.js

@@ -1 +1 @@
-"use strict";import{cloneElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{},buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:i,children:s,onRefresh:a,refreshing:d=!1,footer:c,footerStyle:f,scroll:u=!0,list:p,edges:h=DEFAULT_EDGES,keyboardToolbar:m=!0,contentContainerStyle:g,style:y,testID:b}=e,S=useTheme(),v=useSafeAreaInsets(),x=useMemo(()=>buildStyles(S),[S]),[T]=useState(()=>new Animated.Value(0)),[j,E]=useState(0),A=void 0!==n,C=useRef(n);C.current=n;const k=Boolean(t||o||n||i||l?.length),w=r&&void 0!==t,_=w&&(void 0!==p||u),B=_?j:0,L=void 0!==c,{refreshControl:R}=useRefreshControl({onRefresh:a??noop,refreshing:d}),V=a?cloneElement(R,{progressViewOffset:B}):void 0,K=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:T}}}],{useNativeDriver:!1}),[T]),D=useCallback(e=>{const{height:t}=e.nativeEvent.layout;E(e=>Math.max(e,t))},[]);useEffect(()=>{if(!A)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(C.current?.(),!0));return()=>e.remove()},[A]);const F=h.includes("left")?v.left:0,I=h.includes("right")?v.right:0,M=h.includes("bottom")?v.bottom:0,O=h.includes("top")&&!k?v.top:0,H=h.filter(e=>"top"!==e&&!("bottom"===e&&L)),G=k?_jsx(View,{style:_?x.overlay:void 0,onLayout:_?D:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:w?"large":"default",scrollY:_?T:void 0,onBack:n,rightActions:l,leading:i})}):null;let N;N=void 0!==p?_jsx(FlatList,{keyboardShouldPersistTaps:"handled",...p,refreshControl:V,onScroll:_?K:void 0,scrollEventThrottle:16,style:x.flex,contentContainerStyle:[{paddingTop:B,paddingLeft:F,paddingRight:I},{paddingBottom:L?0:M},p.contentContainerStyle,g]}):u?_jsx(KeyboardAwareScrollView,{refreshControl:V,onScroll:_?K:void 0,safeAreaEdges:H,style:x.flex,contentContainerStyle:[{paddingTop:B},g],children:s}):_jsx(View,{style:[x.flex,{paddingLeft:F,paddingRight:I,paddingBottom:L?0:M},g],children:s});const P=L?_jsx(KeyboardStickyView,{style:[x.footer,{paddingLeft:F,paddingRight:I,paddingBottom:M},f],children:c}):null;return _jsxs(View,{testID:b,style:[x.root,{paddingTop:O},y],children:[_?null:G,N,P,_?G:null,m?_jsx(KeyboardToolbar,{}):null]})}
+"use strict";import{cloneElement,createElement,isValidElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{AsyncBlock}from"../AsyncBlock/index.js";import{EmptyState}from"../EmptyState/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{PagedListFooter}from"../PagedListFooter/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return isValidElement(e)?e:e?createElement(e):null}const buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:s,children:i,onRefresh:a,refreshing:d=!1,footer:c,scroll:m=!0,list:f,edges:p=DEFAULT_EDGES,keyboardToolbar:u=!0,bottomInset:h=0,scrollRef:g,onScroll:y,contentContainerStyle:x,testID:b}=e,S=useTheme(),v=useSafeAreaInsets(),E=useMemo(()=>buildStyles(S),[S]),[j]=useState(()=>new Animated.Value(0)),[T,_]=useState(0),k=void 0!==n,C=useRef(n);C.current=n;const R=Boolean(t||o||n||s||l?.length),A=r&&void 0!==t,L=A&&(void 0!==f||m),w=L?T:0,B=void 0!==c,{refreshControl:F}=useRefreshControl({onRefresh:a??noop,refreshing:d}),V=a?cloneElement(F,{progressViewOffset:w}):void 0,K=useRef(y);K.current=y;const M=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:j}}}],{useNativeDriver:!1,listener:e=>K.current?.(e)}),[j]),D=useCallback(e=>{const{height:t}=e.nativeEvent.layout;_(e=>Math.max(e,t))},[]);useEffect(()=>{if(!k)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(C.current?.(),!0));return()=>e.remove()},[k]);const I=p.includes("left")?v.left:0,P=p.includes("right")?v.right:0,O=p.includes("bottom")?v.bottom:0,H=p.includes("top")&&!R?v.top:0,G=p.filter(e=>"top"!==e&&!("bottom"===e&&B)),N=R?_jsx(View,{style:L?E.overlay:void 0,onLayout:L?D:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:A?"large":"default",scrollY:L?j:void 0,onBack:n,rightActions:l,leading:s})}):null,U=L||y?M:void 0;let W;if(void 0!==f){const{state:e,paging:t,...o}=f,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),o.onEndReached?.(e)},r=_jsx(FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...o,ref:g,refreshControl:V,onScroll:U,onEndReached:t?handleEndReached:o.onEndReached,ListEmptyComponent:e?.empty?_jsx(EmptyState,{...e.empty}):void 0,ListFooterComponent:t||o.ListFooterComponent?_jsxs(_Fragment,{children:[renderFooter(o.ListFooterComponent),t?_jsx(PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:16,style:E.flex,contentContainerStyle:[{paddingTop:w,paddingLeft:I,paddingRight:P},{paddingBottom:(B?0:O)+h},o.contentContainerStyle,x]});W=e?_jsx(AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[E.flex,{paddingTop:w}],children:r}):r}else W=m?_jsxs(KeyboardAwareScrollView,{ref:g,refreshControl:V,onScroll:U,safeAreaEdges:G,style:E.flex,contentContainerStyle:[{paddingTop:w},x],children:[i,h>0?_jsx(View,{style:{height:h}}):null]}):_jsx(View,{style:[E.flex,{paddingLeft:I,paddingRight:P,paddingBottom:(B?0:O)+h},x],children:i});const Y=B?_jsx(KeyboardStickyView,{style:[E.footer,{paddingLeft:I,paddingRight:P,paddingBottom:O+h}],children:c}):null;return _jsxs(View,{testID:b,style:[E.root,{paddingTop:H}],children:[L?null:N,W,Y,void 0!==f?i:null,L?N:null,u?_jsx(KeyboardToolbar,{}):null]})}

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

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

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

@@ -1 +1 @@
-"use strict";import{memo,useMemo}from"react";import{Pressable,Text as RNText,ScrollView,StyleSheet,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chip}from"../Chip/index.js";import{Text}from"../Text/index.js";import{splitHighlight}from"./highlight.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TOUCH=44,ICON=18;export const normalizeSuggestion=e=>"string"==typeof e?{text:e}:e;export const SearchScopeBar=({scopes:e,scope:s,disabled:t,haptic:o,onChange:l})=>{const i=useTheme(),r=useMemo(()=>buildStyles(i),[i]);return _jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,keyboardShouldPersistTaps:"handled",contentContainerStyle:r.scopes,accessibilityLabel:"Search scope",children:e.map(e=>_jsx(Chip,{label:e.label,selected:e.value===s,disabled:t,haptic:o,onPress:()=>l(e.value),containerStyle:r.scopeChip},e.value))})};export const SearchRecents=({recents:e,title:s,onSelect:t,onRemove:o,onClear:l,onHold:i,onRelease:r})=>{const n=useTheme(),c=useMemo(()=>buildStyles(n),[n]);return _jsxs(View,{style:c.list,children:[_jsxs(View,{style:c.header,children:[_jsx(Text,{variant:"label",accessibilityRole:"header",style:c.headerTitle,children:s}),l?_jsx(Pressable,{onPress:l,onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:"Clear all recent searches",style:c.clearAll,children:_jsx(Text,{variant:"label",color:"link",children:"Clear all"})}):null]}),e.map(e=>_jsxs(View,{style:c.row,children:[_jsxs(Pressable,{onPress:()=>t(e),onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:e,accessibilityHint:"Searches again",android_ripple:{color:n.colors["surface-pressed"]},style:({pressed:e})=>[c.rowMain,e?{backgroundColor:n.colors["surface-pressed"]}:null],children:[_jsx(AppIcon,{name:"history",size:18,color:n.colors["text-subtle"]}),_jsx(Text,{variant:"body",numberOfLines:1,style:c.rowText,children:e})]}),o?_jsx(Pressable,{onPress:()=>o(e),onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:`Remove ${e} from recent searches`,style:c.remove,children:_jsx(AppIcon,{name:"x",size:18,color:n.colors["text-muted"]})}):null]},e))]})};const SuggestionRow=memo(({item:e,query:s,onSelect:t,onHold:o,onRelease:l,theme:i,styles:r})=>{const n=splitHighlight(e.text,s),c=e.icon?renderSlotIcon(e.icon,{size:18,color:i.colors["text-subtle"],disabled:!1}):_jsx(AppIcon,{name:"search",size:18,color:i.colors["text-subtle"]});return _jsxs(Pressable,{onPress:()=>t(e),onPressIn:o,onPressOut:l,accessibilityRole:"button",accessibilityLabel:e.subtitle?`${e.text}, ${e.subtitle}`:e.text,android_ripple:{color:i.colors["surface-pressed"]},style:({pressed:e})=>[r.rowMain,r.suggestion,e?{backgroundColor:i.colors["surface-pressed"]}:null],children:[c,_jsxs(View,{style:r.rowText,children:[_jsx(Text,{variant:"body",color:"secondary",numberOfLines:1,children:n.map(e=>_jsx(RNText,{style:e.match?r.match:void 0,children:e.text},e.start))}),e.subtitle?_jsx(Text,{variant:"caption",numberOfLines:1,children:e.subtitle}):null]})]})});SuggestionRow.displayName="SuggestionRow";export const SearchSuggestions=({suggestions:e,query:s,onSelect:t,onHold:o,onRelease:l})=>{const i=useTheme(),r=useMemo(()=>buildStyles(i),[i]);return _jsx(View,{style:r.list,children:e.map(e=>_jsx(SuggestionRow,{item:e,query:s,onSelect:t,onHold:o,onRelease:l,theme:i,styles:r},e.id??e.text))})};const buildStyles=e=>({...StyleSheet.create({scopes:{flexDirection:"row",alignItems:"center",gap:e.space.sm,paddingTop:e.space.sm},scopeChip:{minHeight:44},list:{width:"100%",paddingTop:e.space.xs},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",minHeight:44,paddingHorizontal:e.space.xs},headerTitle:{flex:1},clearAll:{minHeight:44,minWidth:44,justifyContent:"center",alignItems:"flex-end"},row:{flexDirection:"row",alignItems:"center"},rowMain:{flex:1,flexDirection:"row",alignItems:"center",gap:e.space.md,minHeight:44,paddingHorizontal:e.space.xs},suggestion:{paddingVertical:e.space.xs},rowText:{flex:1},remove:{width:44,height:44,alignItems:"center",justifyContent:"center"}}),match:{...fontFor(e,"bold"),color:e.colors["text-body"]}});
+"use strict";import{memo,useMemo}from"react";import{Pressable,ScrollView,StyleSheet,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chip}from"../Chip/index.js";import{Text}from"../Text/index.js";import{splitHighlight}from"./highlight.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TOUCH=44,ICON=18;export const normalizeSuggestion=e=>"string"==typeof e?{text:e}:e;export const SearchScopeBar=({scopes:e,scope:s,disabled:t,haptic:o,labels:l,onChange:i})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]);return _jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,keyboardShouldPersistTaps:"handled",contentContainerStyle:n.scopes,accessibilityLabel:l.scope,children:e.map(e=>_jsx(Chip,{label:e.label,selected:e.value===s,disabled:t,haptic:o,onPress:()=>i(e.value),containerStyle:n.scopeChip},e.value))})};export const SearchRecents=({recents:e,labels:s,onSelect:t,onRemove:o,onClear:l,onHold:i,onRelease:r})=>{const n=useTheme(),c=useMemo(()=>buildStyles(n),[n]);return _jsxs(View,{style:c.list,children:[_jsxs(View,{style:c.header,children:[_jsx(Text,{variant:"label",accessibilityRole:"header",style:c.headerTitle,children:s.recents}),l?_jsx(Pressable,{onPress:l,onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:s.clearAllRecents,style:c.clearAll,children:_jsx(Text,{variant:"label",color:"link",children:s.clearAll})}):null]}),e.map(e=>_jsxs(View,{style:c.row,children:[_jsxs(Pressable,{onPress:()=>t(e),onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:e,accessibilityHint:s.searchAgain,android_ripple:{color:n.colors["surface-pressed"]},style:({pressed:e})=>[c.rowMain,e?{backgroundColor:n.colors["surface-pressed"]}:null],children:[_jsx(AppIcon,{name:"history",size:18,color:n.colors["text-subtle"]}),_jsx(Text,{variant:"body",numberOfLines:1,style:c.rowText,children:e})]}),o?_jsx(Pressable,{onPress:()=>o(e),onPressIn:i,onPressOut:r,accessibilityRole:"button",accessibilityLabel:s.removeRecent(e),style:c.remove,children:_jsx(AppIcon,{name:"x",size:18,color:n.colors["text-muted"]})}):null]},e))]})};const SuggestionRow=memo(({item:e,query:s,onSelect:t,onHold:o,onRelease:l,theme:i,styles:r})=>{const n=splitHighlight(e.text,s),c=e.icon?renderSlotIcon(e.icon,{size:18,color:i.colors["text-subtle"],disabled:!1}):_jsx(AppIcon,{name:"search",size:18,color:i.colors["text-subtle"]});return _jsxs(Pressable,{onPress:()=>t(e),onPressIn:o,onPressOut:l,accessibilityRole:"button",accessibilityLabel:e.subtitle?`${e.text}, ${e.subtitle}`:e.text,android_ripple:{color:i.colors["surface-pressed"]},style:({pressed:e})=>[r.rowMain,r.suggestion,e?{backgroundColor:i.colors["surface-pressed"]}:null],children:[c,_jsxs(View,{style:r.rowText,children:[_jsx(Text,{variant:"body",color:"secondary",numberOfLines:1,children:n.map(e=>_jsx(Text,{variant:"body",color:"secondary",style:e.match?r.match:void 0,children:e.text},e.start))}),e.subtitle?_jsx(Text,{variant:"caption",numberOfLines:1,children:e.subtitle}):null]})]})});SuggestionRow.displayName="SuggestionRow";export const SearchSuggestions=({suggestions:e,query:s,onSelect:t,onHold:o,onRelease:l})=>{const i=useTheme(),r=useMemo(()=>buildStyles(i),[i]);return _jsx(View,{style:r.list,children:e.map(e=>_jsx(SuggestionRow,{item:e,query:s,onSelect:t,onHold:o,onRelease:l,theme:i,styles:r},e.id??e.text))})};const buildStyles=e=>({...StyleSheet.create({scopes:{flexDirection:"row",alignItems:"center",gap:e.space.sm,paddingTop:e.space.sm},scopeChip:{minHeight:44},list:{width:"100%",paddingTop:e.space.xs},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",minHeight:44,paddingHorizontal:e.space.xs},headerTitle:{flex:1},clearAll:{minHeight:44,minWidth:44,justifyContent:"center",alignItems:"flex-end"},row:{flexDirection:"row",alignItems:"center"},rowMain:{flex:1,flexDirection:"row",alignItems:"center",gap:e.space.md,minHeight:44,paddingHorizontal:e.space.xs},suggestion:{paddingVertical:e.space.xs},rowText:{flex:1},remove:{width:44,height:44,alignItems:"center",justifyContent:"center"}}),match:{...fontFor(e,"bold"),color:e.colors["text-body"]}});

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

@@ -1 +1 @@
-"use strict";export{default,SearchBar}from"./SearchBar.js";export{useRecentSearches}from"./useRecentSearches.js";
+"use strict";export{DEFAULT_SEARCH_BAR_LABELS,default,SearchBar}from"./SearchBar.js";export{useRecentSearches}from"./useRecentSearches.js";

package/lib/module/components/SectionHeader/SectionHeader.js

@@ -1 +1 @@
-"use strict";import{useMemo}from"react";import{useTheme}from"../../theme/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const SectionHeader=({children:e,variant:t="title",flush:r=!1,required:i=!1,style:s,testID:o})=>{const a=useTheme(),l=useMemo(()=>({marginTop:r?0:a.space.lg,marginBottom:a.space.sm}),[a,r]),m="caps"===t?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===t?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0};return _jsxs(Text,{variant:m.variant,color:m.color,weight:m.weight,accessibilityRole:"header",accessibilityLabel:i&&"string"==typeof e?`${e}, required`:void 0,style:[l,s],testID:o,children:[e,i?_jsx(RequiredMark,{}):null]})};export default SectionHeader;
+"use strict";import{useMemo}from"react";import{useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SECTION_HEADER_LABELS=Object.freeze({required:e=>`${e}, required`});export const SectionHeader=e=>{const{children:r,variant:t="title",flush:i=!1,required:a=!1,labels:s,style:o,testID:l}=e;warnInvalidValue("SectionHeader","variant",e.variant,["title","caps","sub"]);const n=useTheme(),c=useMemo(()=>({...DEFAULT_SECTION_HEADER_LABELS,...s}),[s]),m=useMemo(()=>({marginTop:i?0:n.space.lg,marginBottom:n.space.sm}),[n,i]),d="caps"===t?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===t?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0};return _jsxs(Text,{variant:d.variant,color:d.color,weight:d.weight,accessibilityRole:"header",accessibilityLabel:a&&"string"==typeof r?c.required(r):void 0,style:[m,o],testID:l,children:[r,a?_jsx(RequiredMark,{}):null]})};export default SectionHeader;

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

@@ -1 +1 @@
-"use strict";export{default,SectionHeader}from"./SectionHeader.js";
+"use strict";export{DEFAULT_SECTION_HEADER_LABELS,default,SectionHeader}from"./SectionHeader.js";

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveSegmentedControlSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const LABEL_LINE_HEIGHT_RATIO=1.25,SegmentedControl=forwardRef((e,t)=>{const{segments:i,label:l,helperText:s,error:r,value:o,defaultValue:n,onChange:a,size:d="md",fullWidth:c=!0,disabled:u=!1,tone:m="primary",variant:h="segmented",radius:g,labelLines:p=1,haptic:b,accessibilityLabel:f,style:x,containerStyle:y,segmentStyle:S,selectedIndicatorStyle:v,textStyle:C,labelStyle:j,testID:w}=e,[I,L]=useControllableState({value:o,defaultValue:n??i[0]?.value,onChange:a}),_=useTheme(),k=_.components["segmented-control"],F=useMemo(()=>buildStyles(_),[_]),V=useMemo(()=>resolveSegmentedControlSize(_,d),[_,d]),M=p>=2?2:1,z=M>1,R="segmented"===h,T="underline"===h,A="pills"===h,E=R?_.space[k["track-padding"]]:0,H=Math.ceil(1.25*V.text)*(M-1),q=k["underline-height"],D=_.space[k["pill-inset"]],W="number"==typeof g?g:g?_.radius[g]:void 0,B=W??_.radius.md,P=void 0===W?_.radius.sm:Math.max(W-E,0),N=W??_.radius.pill,O=W??_.radius.none,[G,X]=useState(0),J=useRef(createAnimatedValue(0)).current,K=Math.max(0,i.findIndex(e=>e.value===I)),Q=G>0?(G-2*E)/Math.max(i.length,1):0,U=useCallback((e,t)=>{if(t<=0)return;const i=t*e,l=_.motion.spring.snappy,s=Animated.spring(J,{toValue:i,damping:l.damping,stiffness:l.stiffness,mass:l.mass,overshootClamping:!0,useNativeDriver:!0});return s.start(),s},[_.motion.spring.snappy,J]),Y=useRef(null);useEffect(()=>{if(Q<=0)return;const e=null!==Y.current&&Y.current!==K;if(Y.current=K,!e)return void J.setValue(Q*K);const t=U(K,Q);return()=>t?.stop()},[K,Q,U,J]);const Z=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==G&&X(t)},[G]),$=useCallback(e=>{if(u)return;if(e.value===I)return;const t=resolveHaptic(b,"selection");t&&triggerHaptic(t),L(e.value)},[u,L,I,b]),ee=R?_.colors.surface:A?_.colors["primary-soft"]:_.colors.primary,te=R?P:A?N:O,ie="neutral"===m?_.colors["text-body"]:_.colors.primary,le=_.colors["bg-muted"],se=useSquircle(R,B,Z),re=!0===r||hasFieldText(r),oe=re&&!u,ne=_.colors["field-border-error"],ae=_.size.border,de=hasFieldText(l),ce=re?r:s,ue=hasFieldText(ce),me=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:f??("string"==typeof l?l:void 0),testID:w,style:[F.track,{...z?{minHeight:V.height+H}:{height:V.height},opacity:u?.55:1,alignSelf:c?"stretch":"flex-start"},R?{borderRadius:B,...smoothCorners,backgroundColor:se.active?"transparent":le,padding:E}:T?{borderBottomColor:oe?ne:_.colors["border-subtle"],borderBottomWidth:StyleSheet.hairlineWidth}:null,y,x],onLayout:se.onLayout,children:[se.active&&se.size?_jsx(SquircleFill,{width:se.size.width,height:se.size.height,radius:B,fill:le,stroke:oe?ne:void 0,strokeWidth:ae}):null,_jsxs(View,{style:F.row,children:[Q>0?_jsx(Animated.View,{pointerEvents:"none",style:[F.thumb,R?z?{top:0,bottom:0}:{top:0,height:V.height-2*E}:A?{top:D,bottom:D}:{bottom:0,height:q},{width:Q,borderRadius:te,...smoothCorners,backgroundColor:ee,transform:[{translateX:J}]},v]}):null,i.map(e=>{const t=e.value===I,i=t?ie:_.colors["text-subtle"],l=renderSlotIcon(e.icon,{color:i,size:V.icon,selected:t,disabled:u});return _jsxs(Pressable,{onPress:()=>$(e),disabled:u,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{checked:t,selected:t,disabled:u},"aria-checked":t,"aria-disabled":u,style:({pressed:e})=>[F.segment,z?F.segmentMultiline:null,{paddingHorizontal:V["padding-x"],opacity:e&&!t?.7:1},S],children:[l?_jsx(View,{style:F.segmentIcon,children:l}):null,_jsx(Text,{style:[F.segmentLabel,z?F.segmentLabelMultiline:null,{color:i,fontSize:V.text,fontWeight:t?_.weight.semibold:_.weight.medium},C,j],numberOfLines:M,children:e.label})]},String(e.value))})]}),!oe||T||se.active?null:_jsx(View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{borderWidth:ae,borderColor:ne,borderRadius:R?B:N,...smoothCorners}]})]});return de||ue?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[de?_jsx(FieldLabel,{size:d,children:l}):null,me,ue?_jsx(FieldMessage,{size:d,text:ce,error:re}):null]}):me});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>StyleSheet.create({track:{flexDirection:"row",alignItems:"stretch",position:"relative"},row:{flex:1,flexDirection:"row",alignItems:"stretch",position:"relative",overflow:"hidden"},thumb:{position:"absolute",left:0},segment:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},segmentIcon:{marginRight:e.space.xs},segmentMultiline:{paddingVertical:e.space.xs},segmentLabel:{includeFontPadding:!1},segmentLabelMultiline:{flexShrink:1,textAlign:"center"}});export{SegmentedControl};export default SegmentedControl;
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveSegmentedControlSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const LABEL_LINE_HEIGHT_RATIO=1.25,activeInkFor=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"neutral":return e.colors["text-body"];case"success":return e.colors["success-text"];case"warning":return e.colors["warning-text"];case"danger":return e.colors["danger-text"];default:return e.colors["info-text"]}},SegmentedControl=forwardRef((e,t)=>{const{segments:r,label:i,helperText:s,error:l,value:n,defaultValue:o,onChange:a,size:d="md",fullWidth:c=!0,disabled:u=!1,tone:m="primary",variant:g="segmented",radius:h,labelLines:p=1,haptic:f,accessibilityLabel:b,style:x,containerStyle:S,segmentStyle:y,selectedIndicatorStyle:v,textStyle:w,labelStyle:C,testID:j}=e;warnInvalidValue("SegmentedControl","size",e.size,["sm","md","lg"]),warnInvalidValue("SegmentedControl","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("SegmentedControl","variant",e.variant,["underline","pills","segmented"]);const[I,V]=useControllableState({value:n,defaultValue:o??r[0]?.value,onChange:a}),k=useTheme(),F=k.components["segmented-control"],L=useMemo(()=>buildStyles(k),[k]),_=useMemo(()=>resolveSegmentedControlSize(k,d),[k,d]),z=p>=2?2:1,M=z>1,R="segmented"===g,T="underline"===g,A="pills"===g,E=R?k.space[F["track-padding"]]:0,H=Math.ceil(1.25*_.text)*(z-1),q=F["underline-height"],D=k.space[F["pill-inset"]],W="number"==typeof h?h:h?k.radius[h]:void 0,B=W??k.radius.md,P=void 0===W?k.radius.sm:Math.max(W-E,0),N=W??k.radius.pill,O=W??k.radius.none,[G,X]=useState(0),J=useRef(createAnimatedValue(0)).current,K=Math.max(0,r.findIndex(e=>e.value===I)),Q=G>0?(G-2*E)/Math.max(r.length,1):0,U=useCallback((e,t)=>{if(t<=0)return;const r=t*e,i=k.motion.spring.snappy,s=Animated.spring(J,{toValue:r,damping:i.damping,stiffness:i.stiffness,mass:i.mass,overshootClamping:!0,useNativeDriver:!0});return s.start(),s},[k.motion.spring.snappy,J]),Y=useRef(null);useEffect(()=>{if(Q<=0)return;const e=null!==Y.current&&Y.current!==K;if(Y.current=K,!e)return void J.setValue(Q*K);const t=U(K,Q);return()=>t?.stop()},[K,Q,U,J]);const Z=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==G&&X(t)},[G]),$=useCallback(e=>{if(u)return;if(e.value===I)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),V(e.value)},[u,V,I,f]),ee=R?k.colors.surface:A?k.colors["primary-soft"]:k.colors.primary,te=R?P:A?N:O,re=activeInkFor(k,m),ie=k.colors["bg-muted"],se=useSquircle(R,B,Z),le=!0===l||hasFieldText(l),ne=le&&!u,oe=k.colors["field-border-error"],ae=k.size.border,de=hasFieldText(i),ce=le?l:s,ue=hasFieldText(ce),me=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:b??("string"==typeof i?i:void 0),testID:j,style:[L.track,{...M?{minHeight:_.height+H}:{height:_.height},opacity:u?.55:1,alignSelf:c?"stretch":"flex-start"},R?{borderRadius:B,...smoothCorners,backgroundColor:se.active?"transparent":ie,padding:E}:T?{borderBottomColor:ne?oe:k.colors["border-subtle"],borderBottomWidth:StyleSheet.hairlineWidth}:null,S,x],onLayout:se.onLayout,children:[se.active&&se.size?_jsx(SquircleFill,{width:se.size.width,height:se.size.height,radius:B,fill:ie,stroke:ne?oe:void 0,strokeWidth:ae}):null,_jsxs(View,{style:L.row,children:[Q>0?_jsx(Animated.View,{pointerEvents:"none",style:[L.thumb,R?M?{top:0,bottom:0}:{top:0,height:_.height-2*E}:A?{top:D,bottom:D}:{bottom:0,height:q},{width:Q,borderRadius:te,...smoothCorners,backgroundColor:ee,transform:[{translateX:J}]},v]}):null,r.map(e=>{const t=e.value===I,r=t?re:k.colors["text-subtle"],i=renderSlotIcon(e.icon,{color:r,size:_.icon,selected:t,disabled:u});return _jsxs(Pressable,{onPress:()=>$(e),disabled:u,accessibilityRole:"radio",accessibilityLabel:e.label,accessibilityState:{checked:t,selected:t,disabled:u},"aria-checked":t,"aria-disabled":u,style:({pressed:e})=>[L.segment,M?L.segmentMultiline:null,{paddingHorizontal:_["padding-x"],opacity:e&&!t?.7:1},y],children:[i?_jsx(View,{style:L.segmentIcon,children:i}):null,_jsx(Text,{variant:"label",weight:t?"semibold":"medium",style:[L.segmentLabel,M?L.segmentLabelMultiline:null,{color:r,fontSize:_.text},w,C],numberOfLines:z,children:e.label})]},String(e.value))})]}),!ne||T||se.active?null:_jsx(View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{borderWidth:ae,borderColor:oe,borderRadius:R?B:N,...smoothCorners}]})]});return de||ue?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[de?_jsx(FieldLabel,{size:d,children:i}):null,me,ue?_jsx(FieldMessage,{size:d,text:ce,error:le}):null]}):me});SegmentedControl.displayName="SegmentedControl";const buildStyles=e=>StyleSheet.create({track:{flexDirection:"row",alignItems:"stretch",position:"relative"},row:{flex:1,flexDirection:"row",alignItems:"stretch",position:"relative",overflow:"hidden"},thumb:{position:"absolute",left:0},segment:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},segmentIcon:{marginRight:e.space.xs},segmentMultiline:{paddingVertical:e.space.xs},segmentLabel:{includeFontPadding:!1},segmentLabelMultiline:{flexShrink:1,textAlign:"center"}});export{SegmentedControl};export default SegmentedControl;

package/lib/module/components/Select/Select.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{NotationInkContext}from"../Notation/Notation.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sameSelectValue=(e,t)=>String(e)===String(t),containsValue=(e,t)=>e.some(e=>sameSelectValue(e,t)),Select=forwardRef((e,t)=>{const{options:l,getOptionLabel:i,getOptionValue:o,getOptionDisabled:r,getOptionDescription:n,getOptionIcon:s,placeholder:a,onOpenChange:c,searchable:d=!1,haptic:u,label:p,help:x,title:h,required:f=!1,error:S,helperText:g,prefix:b,numberOfLines:m=1,disabled:v=!1,size:y="md",variant:j,leftIcon:C,rightIcon:F,chevronColor:O,chevronSize:T,borderRadius:V,accessibilityLabel:_,labelStyle:k,style:z,triggerStyle:H,textStyle:I,optionStyle:w,selectedOptionStyle:L,optionTextStyle:R,selectedOptionTextStyle:M,testID:N}=e,P=!0===e.multi,B=useCallback(e=>i?i(e):e.label??"",[i]),q=useCallback(e=>o?o(e):e.value,[o]),A=useCallback(e=>r?r(e):!0===e.disabled,[r]),D=useCallback(e=>n?n(e):e.description,[n]),$=useCallback(e=>s?s(e):e.icon,[s]),E=useTheme(),G=useMemo(()=>buildStyles(E),[E]),J=resolveFieldSize(E,y),K=resolveFieldTextStyle(E,{disabled:v}),Q=j??E.settings.components.select?.defaultVariant??E.settings.components.field?.defaultVariant??"outlined",U=V??J.radius,[W,X]=useState(!1),Y=useCallback(t=>{if(P){const l=e.value??[];return containsValue(l,t)}return null!=e.value&&sameSelectValue(e.value,t)},[P,e.value]),Z=useMemo(()=>{if(P){const t=e.value??[];return l.filter(e=>containsValue(t,q(e)))}const t=e.value;if(null==t)return[];const i=l.find(e=>sameSelectValue(q(e),t));return i?[i]:[]},[P,l,e.value,q]),ee=useCallback(()=>{if(v)return;const e=resolveHaptic(u,"selection");e&&triggerHaptic(e),X(!0)},[v,u]),te=useCallback(()=>{X(!1)},[]),le=useCallback(t=>{if(A(t))return;const l=q(t),i=resolveHaptic(u,"selection");if(i&&triggerHaptic(i),P){const t=e.value??[],i=containsValue(t,l)?t.filter(e=>!sameSelectValue(e,l)):[...t,l];return void e.onChange(i)}e.onChange(l),te()},[P,e,te,A,q,u]),ie=0===Z.length?a??"Select…":Z.map(e=>B(e)).join(", "),oe=0===Z.length,re=!0===S||hasFieldText(S),ne=hasFieldText(p),se=fieldTextAsString(p),ae=Math.round(1.4*J.text),ce=useMemo(()=>({fontSize:J.text,color:K.placeholderColor}),[J.text,K.placeholderColor]),de={color:v?E.colors["field-icon-disabled"]:W?E.colors["field-icon-focus"]:E.colors["field-icon"],size:J.icon,disabled:v,focused:W,error:re},ue=0===Z.length?a??"No selection":`Selected: ${Z.map(e=>B(e)).join(", ")}`,pe=_??`${se??"Select"}. ${ue}`;return _jsxs(View,{style:[G.container,z],testID:N,children:[ne?_jsx(FieldLabel,{size:y,required:f,help:x,style:k,children:p}):null,_jsx(View,{ref:t,collapsable:!1,children:_jsxs(FieldBase,{size:y,variant:Q,disabled:v,error:re,filled:Z.length>0,onPress:ee,borderRadius:U,paddingHorizontal:"underline"===Q?E.space.none:void 0,accessibilityRole:"button",accessibilityLabel:pe,accessibilityState:{disabled:v,expanded:W},"aria-disabled":v,"aria-expanded":W,style:H,slotAlign:1===m?"center":"top",slotLineHeight:1===m?void 0:ae,leading:C?_jsx(View,{children:renderSlotIcon(C,de)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,de)}):_jsx(Chevron,{color:O??(v?E.colors["text-disabled"]:E.colors["text-subtle"]),size:T??J.icon,open:W,style:G.chevron}),children:[hasFieldText(b)?"string"==typeof b||"number"==typeof b?_jsx(Text,{style:[G.prefix,{color:K.placeholderColor,fontSize:J.text,lineHeight:1===m?void 0:ae,marginRight:E.space.xs}],children:b}):_jsx(View,{style:[G.prefixNode,{minHeight:1===m?void 0:ae,justifyContent:"center",marginRight:E.space.xs}],children:_jsx(Text,{style:[G.prefix,{color:K.placeholderColor,fontSize:J.text,lineHeight:1===m?void 0:ae}],children:_jsx(NotationInkContext.Provider,{value:ce,children:b})})}):null,_jsxs(Text,{style:[G.triggerText,{color:oe?K.placeholderColor:K.color,fontSize:J.text,lineHeight:1===m?void 0:ae,...K.weightStyle},I],numberOfLines:m,children:[ie,oe&&f&&!ne?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:y,error:re,text:re?S:g}),_jsx(OptionSheet,{open:W,onClose:te,onOpenChange:c,title:h??se,accessibilityLabel:se??(ne?h:void 0)??a??"Options",options:l,labelOf:B,getValue:q,disabledOf:A,descriptionOf:D,iconOf:$,isSelected:Y,onSelect:le,multi:P,searchable:d,optionStyle:w,selectedOptionStyle:L,optionTextStyle:R,selectedOptionTextStyle:M,searchSelectionColor:resolveVariantColors(E,Q).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:e.space.sm}});export{Select};export default Select;
+"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import{resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{NotationInkContext}from"../Notation/Notation.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SELECT_LABELS={placeholder:"Select…",noSelection:"No selection",selected:e=>`Selected: ${e}`,fallbackName:"Select",sheetName:"Options"};const sameSelectValue=(e,t)=>String(e)===String(t),containsValue=(e,t)=>e.some(e=>sameSelectValue(e,t)),Select=forwardRef((e,t)=>{warnInvalidValue("Select","size",e.size,["sm","md","lg"]),warnInvalidValue("Select","variant",e.variant,["outline","filled","underline"]);const{options:l,getOptionLabel:i,getOptionValue:o,isOptionDisabled:n,getOptionDescription:r,getOptionIcon:s,placeholder:a,onVisibleChange:c,searchable:d=!1,haptic:p,labels:u,label:x,help:h,title:S,required:f=!1,error:g,helperText:m,prefix:b,numberOfLines:v=1,disabled:y=!1,size:C="md",variant:j,leftIcon:T,rightIcon:F,chevronColor:V,chevronSize:L,borderRadius:_,accessibilityLabel:O,labelStyle:k,style:I,triggerStyle:z,textStyle:w,optionStyle:E,selectedOptionStyle:H,optionTextStyle:N,selectedOptionTextStyle:A,testID:R}=e,D=!0===e.multi,M=u?{...DEFAULT_SELECT_LABELS,...u}:DEFAULT_SELECT_LABELS,B=useCallback(e=>i?i(e):e.label??"",[i]),P=useCallback(e=>o?o(e):e.value,[o]),q=useCallback(e=>n?n(e):!0===e.disabled,[n]),U=useCallback(e=>r?r(e):e.description,[r]),$=useCallback(e=>s?s(e):e.icon,[s]),G=useTheme(),J=useMemo(()=>buildStyles(G),[G]),K=resolveFieldSize(G,C),Q=resolveFieldTextStyle(G,{disabled:y}),W=j??G.settings.components.select?.defaultVariant??G.settings.components.field?.defaultVariant??"outline",X=_??K.radius,[Y,Z]=useState(!1),ee=useMemo(()=>{if(D){const t=e.value??[];return l.filter(e=>containsValue(t,P(e)))}const t=e.value;if(null==t)return[];const i=l.find(e=>sameSelectValue(P(e),t));return i?[i]:[]},[D,l,e.value,P]),te=useCallback(()=>{if(y)return;const e=resolveHaptic(p,"selection");e&&triggerHaptic(e),Z(!0)},[y,p]),le=useCallback(()=>{Z(!1)},[]),ie=useCallback(t=>{if(q(t))return;const l=P(t),i=resolveHaptic(p,"selection");if(i&&triggerHaptic(i),D){const t=e.value??[],i=containsValue(t,l)?t.filter(e=>!sameSelectValue(e,l)):[...t,l];return void e.onChange(i)}e.onChange(l),le()},[D,e,le,q,P,p]),oe=0===ee.length?a??M.placeholder:ee.map(e=>B(e)).join(", "),ne=0===ee.length,re=!0===g||hasFieldText(g),se=hasFieldText(x),ae=fieldTextAsString(x),ce=Math.round(1.4*K.text),de=useMemo(()=>({fontSize:K.text,color:Q.placeholderColor}),[K.text,Q.placeholderColor]),pe={color:y?G.colors["field-icon-disabled"]:Y?G.colors["field-icon-focus"]:G.colors["field-icon"],size:K.icon,disabled:y,focused:Y,error:re},ue=0===ee.length?a??M.noSelection:M.selected(ee.map(e=>B(e)).join(", ")),xe=O??`${ae??M.fallbackName}. ${ue}`;return _jsxs(View,{style:[J.container,I],testID:R,children:[se?_jsx(FieldLabel,{size:C,required:f,help:h,style:k,children:x}):null,_jsx(View,{ref:t,collapsable:!1,children:_jsxs(FieldBase,{size:C,variant:W,disabled:y,error:re,filled:ee.length>0,onPress:te,borderRadius:X,paddingHorizontal:"underline"===W?G.space.none:void 0,accessibilityRole:"button",accessibilityLabel:xe,accessibilityState:{disabled:y,expanded:Y},"aria-disabled":y,"aria-expanded":Y,style:z,slotAlign:1===v?"center":"top",slotLineHeight:1===v?void 0:ce,leading:T?_jsx(View,{children:renderSlotIcon(T,pe)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,pe)}):_jsx(Chevron,{color:V??(y?G.colors["text-disabled"]:G.colors["text-subtle"]),size:L??K.icon,open:Y,style:J.chevron}),children:[hasFieldText(b)?"string"==typeof b||"number"==typeof b?_jsx(Text,{variant:"body",style:[J.prefix,{color:Q.placeholderColor,fontSize:K.text,lineHeight:1===v?void 0:ce,marginRight:G.space.xs}],children:b}):_jsx(View,{style:[J.prefixNode,{minHeight:1===v?void 0:ce,justifyContent:"center",marginRight:G.space.xs}],children:_jsx(Text,{variant:"body",style:[J.prefix,{color:Q.placeholderColor,fontSize:K.text,lineHeight:1===v?void 0:ce}],children:_jsx(NotationInkContext.Provider,{value:de,children:b})})}):null,_jsxs(Text,{variant:"body",style:[J.triggerText,{color:ne?Q.placeholderColor:Q.color,fontSize:K.text,lineHeight:1===v?void 0:ce,...Q.weightStyle},w],numberOfLines:v,children:[oe,ne&&f&&!se?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:C,error:re,text:re?g:m}),_jsx(OptionSheet,{visible:Y,onClose:le,onVisibleChange:c,haptic:p,title:S??ae,accessibilityLabel:ae??(se?S:void 0)??a??M.sheetName,options:l,getOptionLabel:B,getOptionValue:P,isOptionDisabled:q,getOptionDescription:U,getOptionIcon:$,value:e.value,onChange:(e,t)=>ie(t),multi:D,searchable:d,optionStyle:E,selectedOptionStyle:H,optionTextStyle:N,selectedOptionTextStyle:A,searchSelectionColor:resolveVariantColors(G,W).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:e.space.sm}});export{Select};export default Select;

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

@@ -1 +1 @@
-"use strict";export{default,Select}from"./Select.js";
+"use strict";export{DEFAULT_SELECT_LABELS,default,Select}from"./Select.js";

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,Modal,PixelRatio,Platform,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}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.",expand:"Expand",done:"Done",close:"Close"},STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,EXPANDED_CHROME=200,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:a,fontFamily:r,width:o,height:i})=>"draw"===e?_jsx(_Fragment,{children:t.map(e=>_jsx(StrokePath,{points:e.points,color:a},e.id))}):n?_jsx(SvgText,{x:o/2,y:i*BASELINE_RATIO,fontSize:typedFontSize(o,n),fontFamily:r,textAnchor:"middle",fill:a,children:n}):null,SignaturePadSurface=forwardRef((e,t)=>{const{expandable:n,initialStrokes:a,onChange:r,initialTypedName:o="",onTypedNameChange:i,defaultMode:s="draw",onModeChange:l,onEmptyChange:d,allowTyped:c=!0,signedBy:u,signedAt:p,height:m=DEFAULT_HEIGHT,maxNameLength:h=DEFAULT_NAME_LENGTH,inkColor:g,paperColor:y,scriptFontFamily:f,labels:S,haptic:x="selection",disabled:T=!1,style:w,testID:_}=e,b=useTheme(),E=void 0===g&&void 0===y,A=E?b.colors["text-body"]:g??lightTheme.colors["text-body"],C=E?b.colors.surface:y??lightTheme.colors.surface,v=E?lightTheme.colors["text-body"]:A,R=E?lightTheme.colors.surface:C,I=v!==A||R!==C,j=f??defaultScriptFont(),L=useMemo(()=>({...DEFAULT_LABELS,...S}),[S]),P=useScreenReader(),D=useRef(null),k=useRef(null),[F,M]=useState(0),[B,G]=useState(()=>(a??[]).map((e,t)=>({id:t+1,points:[...e]}))),N=useRef(B),H=useRef(B.length),O=useRef(null),Y=useRef(null),[$,z]=useState(c?s:"draw"),[W,U]=useState(o),[V,K]=useState(null),X=useRef(!1),{height:q}=useWindowDimensions(),[J,Q]=useState(!1),[Z,ee]=useState([]),te=useRef({onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d});useEffect(()=>{te.current={onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d}});const ne="draw"===$&&!T,ae="draw"===$?0===B.length:0===W.trim().length,re=useRef(null);useEffect(()=>{re.current!==ae&&(re.current=ae,te.current.onEmptyChange?.(ae))},[ae]);const oe=useCallback(e=>{N.current=e,G(e)},[]),ie=useCallback(()=>{K(Date.now()),te.current.onChange?.(N.current.map(e=>e.points))},[]),se=useMemo(()=>{const pan=e=>Gesture.Pan().enabled(ne).runOnJS(!0).onBegin(e=>{O.current=pointOf(e.x,e.y)}).onStart(t=>{Y.current=e,H.current+=1;const n=pointOf(t.x,t.y);oe([...N.current,{id:H.current,points:[O.current??n,n]}])}).onUpdate(t=>{if(Y.current!==e)return;const n=N.current[N.current.length-1],a=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],a)<.8||oe([...N.current.slice(0,-1),{...n,points:[...n.points,a]}])}).onFinalize(()=>{Y.current===e&&(Y.current=null,ie())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[ne,oe,ie]),le=useCallback(e=>{z(e),te.current.onModeChange?.(e),announce("type"===e?L.typingAnnouncement:L.drawingAnnouncement)},[L.typingAnnouncement,L.drawingAnnouncement]);useEffect(()=>{P&&c&&!X.current&&"draw"===$&&0===N.current.length&&le("type")},[P,c,$,le]);const de=useCallback(()=>{X.current=!0,le("draw"===$?"type":"draw")},[$,le]),ce=useCallback(e=>{U(e),K(Date.now()),te.current.onTypedNameChange?.(e)},[]),ue=useCallback(()=>{"type"===$?ce(""):(oe([]),ie()),announce(L.clearedAnnouncement)},[$,ce,oe,ie,L.clearedAnnouncement]),pe=useCallback(()=>{"draw"===$&&0!==N.current.length&&(oe(N.current.slice(0,-1)),ie(),announce(L.undoneAnnouncement))},[$,oe,ie,L.undoneAnnouncement]),me=useCallback(()=>{ee(N.current.map(e=>e.points)),Q(!0)},[]),he=useCallback(()=>{Q(!1)},[]),ge=useCallback(()=>{oe(Z.map(e=>(H.current+=1,{id:H.current,points:[...e]}))),ie(),Q(!1)},[Z,oe,ie]),ye=F||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(ae)return void t(new Error(L.emptyError));const n=I?k.current:D.current;if(!n)return void t(new Error("The signature pad is not on screen."));const a=Math.min(3,Math.max(1,PixelRatio.get()));n.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:ye*a,height:m*a})}),toSvg:()=>buildSignatureSvg({width:ye,height:m,mode:$,strokes:B.map(e=>e.points),typedName:W,ink:v,paper:R,strokeWidth:2.5,fontFamily:cssFontStack(j)}),clear:ue,undo:pe,isEmpty:()=>ae}),[ae,L.emptyError,ye,m,$,B,W,I,v,R,j,ue,pe]);const fe=useMemo(()=>[{name:"undo",label:L.undo},{name:"clear",label:L.clear},...c?[{name:"toggleMode",label:"draw"===$?L.typeInstead:L.drawInstead}]:[]],[L.undo,L.clear,L.typeInstead,L.drawInstead,c,$]),Se=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?pe():"clear"===t?ue():"toggleMode"===t&&c&&de()},[T,pe,ue,de,c]),xe=useCallback(e=>{M(e.nativeEvent.layout.width)},[]),Te=useMemo(()=>StyleSheet.create({root:{gap:b.space.sm},pad:{height:m,borderWidth:b.size.border,borderColor:b.colors.border,borderRadius:b.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:C,opacity:T?.5:1},baseline:{position:"absolute",left:b.space.md,right:b.space.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:A,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:b.space.xs},trailing:{flexDirection:"row",alignItems:"center",gap:b.space.xs},expandedRoot:{flex:1,padding:b.space.md,gap:b.space.sm,backgroundColor:b.colors.bg},expandedBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}),[b,m,C,A,T]),we=W.trim(),be=p??V,Ee=u&&!ae?`Signed by ${u}${be?`, ${formatDateTime(be)}`:""}`:null,Ae="type"===$&&we?`${L.pad}. ${we}`:L.pad;return _jsxs(View,{style:[Te.root,w],testID:_,children:[_jsx(GestureDetector,{gesture:se,children:_jsxs(View,{style:Te.pad,onLayout:xe,accessible:!0,accessibilityRole:"image",accessibilityLabel:Ae,accessibilityHint:"draw"===$?L.padHint:void 0,accessibilityValue:{text:ae?L.empty:L.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:fe,onAccessibilityAction:Se,children:[I?_jsxs(Svg,{ref:k,style:StyleSheet.absoluteFill,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:R}),_jsx(Marks,{mode:$,strokes:B,name:we,color:v,fontFamily:j,width:ye,height:m})]}):null,_jsxs(Svg,{ref:D,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:C}),_jsx(Marks,{mode:$,strokes:B,name:we,color:A,fontFamily:j,width:ye,height:m})]}),_jsx(View,{pointerEvents:"none",style:Te.baseline})]})}),"type"===$?_jsx(Input,{label:L.typedLabel,placeholder:L.typedPlaceholder,value:W,onChangeText:ce,maxLength:h,disabled:T,autoComplete:"name",textContentType:"name",autoCapitalize:"words",autoCorrect:!1,returnKeyType:"done",testID:_?`${_}-name`:void 0}):null,_jsx(Text,{variant:"caption",color:"tertiary",children:"draw"===$?L.caption:L.typedCaption}),_jsxs(View,{style:Te.actions,children:[c?_jsx(Button,{title:"draw"===$?L.typeInstead:L.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:de,testID:_?`${_}-mode`:void 0}):_jsx(View,{}),"draw"===$?_jsxs(View,{style:Te.trailing,children:[B.length>0?_jsxs(_Fragment,{children:[_jsx(Button,{title:L.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:pe,testID:_?`${_}-undo`:void 0}),_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:_?`${_}-clear`:void 0})]}):null,n?_jsx(Button,{title:L.expand,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:me,testID:_?`${_}-expand`:void 0}):null]}):null,"type"===$&&we?_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:_?`${_}-clear`:void 0}):null]}),Ee?_jsx(Text,{variant:"caption",color:"secondary",children:Ee}):null,n?_jsx(Modal,{visible:J,animationType:"slide",presentationStyle:"fullScreen",onRequestClose:he,children:_jsxs(ExpandedRoot,{style:Te.expandedRoot,children:[_jsxs(View,{style:Te.expandedBar,children:[_jsx(Button,{title:L.close,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:he,testID:_?`${_}-close`:void 0}),_jsx(Button,{title:L.done,variant:"solid",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:ge,testID:_?`${_}-done`:void 0})]}),J?_jsx(SignaturePadSurface,{expandable:!1,defaultMode:"draw",allowTyped:!1,initialStrokes:Z,onChange:ee,height:Math.max(DEFAULT_HEIGHT,q-200),inkColor:g,paperColor:y,scriptFontFamily:f,labels:S,haptic:x,testID:_?`${_}-expanded`:void 0}):null]})}):null]})});SignaturePadSurface.displayName="SignaturePadSurface";const ExpandedRoot="android"===Platform.OS?GestureHandlerRootView:View,SignaturePad=forwardRef((e,t)=>_jsx(SignaturePadSurface,{...e,expandable:!0,ref:t}));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,Modal,PixelRatio,Platform,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}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{warnInvalidValue}from"../../utils/warnInvalidValue.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";export const DEFAULT_SIGNATURE_PAD_LABELS=Object.freeze({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.",expand:"Expand",done:"Done",close:"Close"});const STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,EXPANDED_CHROME=200,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:a,fontFamily:r,width:o,height:i})=>"draw"===e?_jsx(_Fragment,{children:t.map(e=>_jsx(StrokePath,{points:e.points,color:a},e.id))}):n?_jsx(SvgText,{x:o/2,y:i*BASELINE_RATIO,fontSize:typedFontSize(o,n),fontFamily:r,textAnchor:"middle",fill:a,children:n}):null,SignaturePadSurface=forwardRef((e,t)=>{const{expandable:n,initialStrokes:a,onChange:r,initialTypedName:o="",onTypedNameChange:i,defaultMode:s="draw",onModeChange:l,onEmptyChange:d,allowTyped:c=!0,signedBy:u,signedAt:p,height:m=DEFAULT_HEIGHT,maxNameLength:h=DEFAULT_NAME_LENGTH,inkColor:g,paperColor:y,scriptFontFamily:f,labels:S,haptic:x="selection",disabled:T=!1,style:w,testID:b}=e;warnInvalidValue("SignaturePad","defaultMode",e.defaultMode,["draw","type"]);const _=useTheme(),E=void 0===g&&void 0===y,A=E?_.colors["text-body"]:g??lightTheme.colors["text-body"],C=E?_.colors.surface:y??lightTheme.colors.surface,v=E?lightTheme.colors["text-body"]:A,I=E?lightTheme.colors.surface:C,R=v!==A||I!==C,j=f??defaultScriptFont(),P=useMemo(()=>({...DEFAULT_SIGNATURE_PAD_LABELS,...S}),[S]),D=useScreenReader(),L=useRef(null),k=useRef(null),[F,M]=useState(0),[G,N]=useState(()=>(a??[]).map((e,t)=>({id:t+1,points:[...e]}))),B=useRef(G),O=useRef(G.length),H=useRef(null),V=useRef(null),[Y,$]=useState(c?s:"draw"),[z,U]=useState(o),[W,K]=useState(null),X=useRef(!1),{height:q}=useWindowDimensions(),[J,Q]=useState(!1),[Z,ee]=useState([]),te=useRef({onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d});useEffect(()=>{te.current={onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d}});const ne="draw"===Y&&!T,ae="draw"===Y?0===G.length:0===z.trim().length,re=useRef(null);useEffect(()=>{re.current!==ae&&(re.current=ae,te.current.onEmptyChange?.(ae))},[ae]);const oe=useCallback(e=>{B.current=e,N(e)},[]),ie=useCallback(()=>{K(Date.now()),te.current.onChange?.(B.current.map(e=>e.points))},[]),se=useMemo(()=>{const pan=e=>Gesture.Pan().enabled(ne).runOnJS(!0).onBegin(e=>{H.current=pointOf(e.x,e.y)}).onStart(t=>{V.current=e,O.current+=1;const n=pointOf(t.x,t.y);oe([...B.current,{id:O.current,points:[H.current??n,n]}])}).onUpdate(t=>{if(V.current!==e)return;const n=B.current[B.current.length-1],a=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],a)<.8||oe([...B.current.slice(0,-1),{...n,points:[...n.points,a]}])}).onFinalize(()=>{V.current===e&&(V.current=null,ie())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[ne,oe,ie]),le=useCallback(e=>{$(e),te.current.onModeChange?.(e),announce("type"===e?P.typingAnnouncement:P.drawingAnnouncement)},[P.typingAnnouncement,P.drawingAnnouncement]);useEffect(()=>{D&&c&&!X.current&&"draw"===Y&&0===B.current.length&&le("type")},[D,c,Y,le]);const de=useCallback(()=>{X.current=!0,le("draw"===Y?"type":"draw")},[Y,le]),ce=useCallback(e=>{U(e),K(Date.now()),te.current.onTypedNameChange?.(e)},[]),ue=useCallback(()=>{"type"===Y?ce(""):(oe([]),ie()),announce(P.clearedAnnouncement)},[Y,ce,oe,ie,P.clearedAnnouncement]),pe=useCallback(()=>{"draw"===Y&&0!==B.current.length&&(oe(B.current.slice(0,-1)),ie(),announce(P.undoneAnnouncement))},[Y,oe,ie,P.undoneAnnouncement]),me=useCallback(()=>{ee(B.current.map(e=>e.points)),Q(!0)},[]),he=useCallback(()=>{Q(!1)},[]),ge=useCallback(()=>{oe(Z.map(e=>(O.current+=1,{id:O.current,points:[...e]}))),ie(),Q(!1)},[Z,oe,ie]),ye=F||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(ae)return void t(new Error(P.emptyError));const n=R?k.current:L.current;if(!n)return void t(new Error("The signature pad is not on screen."));const a=Math.min(3,Math.max(1,PixelRatio.get()));n.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:ye*a,height:m*a})}),toSvg:()=>buildSignatureSvg({width:ye,height:m,mode:Y,strokes:G.map(e=>e.points),typedName:z,ink:v,paper:I,strokeWidth:2.5,fontFamily:cssFontStack(j)}),clear:ue,undo:pe,isEmpty:()=>ae}),[ae,P.emptyError,ye,m,Y,G,z,R,v,I,j,ue,pe]);const fe=useMemo(()=>[{name:"undo",label:P.undo},{name:"clear",label:P.clear},...c?[{name:"toggleMode",label:"draw"===Y?P.typeInstead:P.drawInstead}]:[]],[P.undo,P.clear,P.typeInstead,P.drawInstead,c,Y]),Se=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?pe():"clear"===t?ue():"toggleMode"===t&&c&&de()},[T,pe,ue,de,c]),xe=useCallback(e=>{M(e.nativeEvent.layout.width)},[]),Te=useMemo(()=>StyleSheet.create({root:{gap:_.space.sm},pad:{height:m,borderWidth:_.size.border,borderColor:_.colors.border,borderRadius:_.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:C,opacity:T?.5:1},baseline:{position:"absolute",left:_.space.md,right:_.space.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:A,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:_.space.xs},trailing:{flexDirection:"row",alignItems:"center",gap:_.space.xs},expandedRoot:{flex:1,padding:_.space.md,gap:_.space.sm,backgroundColor:_.colors.bg},expandedBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}),[_,m,C,A,T]),we=z.trim(),be=p??W,Ee=u&&!ae?`Signed by ${u}${be?`, ${formatDateTime(be)}`:""}`:null,Ae="type"===Y&&we?`${P.pad}. ${we}`:P.pad;return _jsxs(View,{style:[Te.root,w],testID:b,children:[_jsx(GestureDetector,{gesture:se,children:_jsxs(View,{style:Te.pad,onLayout:xe,accessible:!0,accessibilityRole:"image",accessibilityLabel:Ae,accessibilityHint:"draw"===Y?P.padHint:void 0,accessibilityValue:{text:ae?P.empty:P.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:fe,onAccessibilityAction:Se,children:[R?_jsxs(Svg,{ref:k,style:StyleSheet.absoluteFill,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:I}),_jsx(Marks,{mode:Y,strokes:G,name:we,color:v,fontFamily:j,width:ye,height:m})]}):null,_jsxs(Svg,{ref:L,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:C}),_jsx(Marks,{mode:Y,strokes:G,name:we,color:A,fontFamily:j,width:ye,height:m})]}),_jsx(View,{pointerEvents:"none",style:Te.baseline})]})}),"type"===Y?_jsx(Input,{label:P.typedLabel,placeholder:P.typedPlaceholder,value:z,onChangeText:ce,maxLength:h,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"===Y?P.caption:P.typedCaption}),_jsxs(View,{style:Te.actions,children:[c?_jsx(Button,{label:"draw"===Y?P.typeInstead:P.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:de,testID:b?`${b}-mode`:void 0}):_jsx(View,{}),"draw"===Y?_jsxs(View,{style:Te.trailing,children:[G.length>0?_jsxs(_Fragment,{children:[_jsx(Button,{label:P.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:pe,testID:b?`${b}-undo`:void 0}),_jsx(Button,{label:P.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:b?`${b}-clear`:void 0})]}):null,n?_jsx(Button,{label:P.expand,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:me,testID:b?`${b}-expand`:void 0}):null]}):null,"type"===Y&&we?_jsx(Button,{label:P.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:b?`${b}-clear`:void 0}):null]}),Ee?_jsx(Text,{variant:"caption",color:"secondary",children:Ee}):null,n?_jsx(Modal,{visible:J,animationType:"slide",presentationStyle:"fullScreen",onRequestClose:he,children:_jsxs(ExpandedRoot,{style:Te.expandedRoot,children:[_jsxs(View,{style:Te.expandedBar,children:[_jsx(Button,{label:P.close,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:he,testID:b?`${b}-close`:void 0}),_jsx(Button,{label:P.done,variant:"solid",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:ge,testID:b?`${b}-done`:void 0})]}),J?_jsx(SignaturePadSurface,{expandable:!1,defaultMode:"draw",allowTyped:!1,initialStrokes:Z,onChange:ee,height:Math.max(DEFAULT_HEIGHT,q-200),inkColor:g,paperColor:y,scriptFontFamily:f,labels:S,haptic:x,testID:b?`${b}-expanded`:void 0}):null]})}):null]})});SignaturePadSurface.displayName="SignaturePadSurface";const ExpandedRoot="android"===Platform.OS?GestureHandlerRootView:View,SignaturePad=forwardRef((e,t)=>_jsx(SignaturePadSurface,{...e,expandable:!0,ref:t}));SignaturePad.displayName="SignaturePad";export{SignaturePad};export default SignaturePad;

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

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

package/lib/module/components/Skeleton/Skeleton.js

@@ -1 +1 @@
-"use strict";import{useMemo,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{toBackgroundImage}from"../../theme/Gradient.js";import{useScreenDimensions}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{useSkeletonClock}from"./SkeletonClock.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,s,o,i)=>{if(void 0!==i)return resolveRadius(e,i);switch(t){case"circle":return"number"==typeof s?Math.min(s,o)/2:o/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=({shape:e="rect",width:t="100%",height:s=16,radius:o,variant:i,speed:r,colors:n,style:a,testID:l})=>{const u=useTheme(),m=useSkeletonDefaults(),d=useSkeletonClock(),c=useReducedMotion(),h=i??m.variant??"shimmer",p=c&&"auto"===(m.animation??"auto");let S=h;d.enabled?p&&"shimmer"===h&&(S="pulse"):S="none";const k=n?.background??m.colors?.background??u.colors.skeleton,y=n?.highlight??m.colors?.highlight??u.colors["skeleton-highlight"],{responsive:g}=useScreenDimensions(),b=useMemo(()=>buildStyles(),[]),x=resolveWidth(t),f=g.size(s),v=radiusForShape(u,e,x,f,o),[j,w]=useState(0),R=useMemo(()=>j<=0?0:Math.max(48,.7*j),[j]),C=useMemo(()=>j<=0?0:d.shimmer.interpolate({inputRange:[0,1],outputRange:[-R,j]}),[d.shimmer,R,j]),M=useMemo(()=>"none"===S?null:"pulse"===S?_jsx(Animated.View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{backgroundColor:y,opacity:d.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):j<=0?null:_jsx(Animated.View,{pointerEvents:"none",style:[b.shimmerBand,{width:R,transform:[{translateX:C}],experimental_backgroundImage:[toBackgroundImage({colors:["transparent",y,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[S,y,d.pulse,j,b.shimmerBand,R,C]);return _jsx(View,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==j&&w(t)},accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",testID:l,style:[b.base,{width:x,height:f,borderRadius:v,...smoothCorners,backgroundColor:k},a],children:M})};Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...s})=>{const{responsive:o}=useScreenDimensions(),i=o.size(e);return _jsx(Skeleton,{...s,shape:"circle",width:i,height:e,style:t})};SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:s,fontSize:o,variant:i,speed:r,radius:n="sm",width:a="100%",style:l,testID:u})=>{const m=useTheme(),d=s??m.space.xs,c=Math.max(1,e);return _jsx(View,{style:l,testID:u,children:Array.from({length:c}).map((e,s)=>_jsx(Skeleton,{shape:"text",width:s===c-1&&c>1?t:a,height:o??m.text.base.size,radius:n,variant:i,speed:r,style:s<c-1?{marginBottom:d}:void 0},s))})};SkeletonText.displayName="SkeletonText";const buildStyles=()=>StyleSheet.create({base:{overflow:"hidden"},shimmerBand:{position:"absolute",top:0,bottom:0,left:0}});export{Skeleton,SkeletonCircle,SkeletonText};export default Skeleton;
+"use strict";import{useMemo,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{toBackgroundImage}from"../../theme/Gradient.js";import{useScreenDimensions}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{useSkeletonClock}from"./SkeletonClock.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";export const DEFAULT_SKELETON_LABELS=Object.freeze({loading:"Loading"});const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,s,o,i)=>{if(void 0!==i)return resolveRadius(e,i);switch(t){case"circle":return"number"==typeof s?Math.min(s,o)/2:o/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=e=>{const{shape:t="rect",width:s="100%",height:o=16,radius:i,variant:n,speed:r,colors:a,labels:l,style:u,testID:m}=e;warnInvalidValue("Skeleton","shape",e.shape,["rect","rounded","circle","text"]),warnInvalidValue("Skeleton","variant",e.variant,["shimmer","pulse","none"]),warnInvalidValue("Skeleton","speed",e.speed,["slow","normal","fast"]);const d=useTheme(),c=useSkeletonDefaults(),h=useSkeletonClock(),p=useReducedMotion(),S=n??c.variant??"shimmer",k=p&&"auto"===(c.animation??"auto");let g=S;h.enabled?k&&"shimmer"===S&&(g="pulse"):g="none";const y=a?.background??c.colors?.background??d.colors.skeleton,b=a?.highlight??c.colors?.highlight??d.colors["skeleton-highlight"],{responsive:v}=useScreenDimensions(),x=useMemo(()=>buildStyles(),[]),f=useMemo(()=>({...DEFAULT_SKELETON_LABELS,...l}),[l]),w=resolveWidth(s),j=v.size(o),L=radiusForShape(d,t,w,j,i),[I,M]=useState(0),R=useMemo(()=>I<=0?0:Math.max(48,.7*I),[I]),_=useMemo(()=>I<=0?0:h.shimmer.interpolate({inputRange:[0,1],outputRange:[-R,I]}),[h.shimmer,R,I]),C=useMemo(()=>"none"===g?null:"pulse"===g?_jsx(Animated.View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{backgroundColor:b,opacity:h.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):I<=0?null:_jsx(Animated.View,{pointerEvents:"none",style:[x.shimmerBand,{width:R,transform:[{translateX:_}],experimental_backgroundImage:[toBackgroundImage({colors:["transparent",b,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[g,b,h.pulse,I,x.shimmerBand,R,_]);return _jsx(View,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==I&&M(t)},accessible:!0,accessibilityLabel:f.loading,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",testID:m,style:[x.base,{width:w,height:j,borderRadius:L,...smoothCorners,backgroundColor:y},u],children:C})};Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...s})=>{const{responsive:o}=useScreenDimensions(),i=o.size(e);return _jsx(Skeleton,{...s,shape:"circle",width:i,height:e,style:t})};SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:s,fontSize:o,variant:i,speed:n,radius:r="sm",width:a="100%",labels:l,style:u,testID:m})=>{const d=useTheme(),c=s??d.space.xs,h=Math.max(1,e);return _jsx(View,{style:u,testID:m,children:Array.from({length:h}).map((e,s)=>_jsx(Skeleton,{shape:"text",width:s===h-1&&h>1?t:a,height:o??d.text.base.size,radius:r,variant:i,speed:n,labels:l,style:s<h-1?{marginBottom:c}:void 0},s))})};SkeletonText.displayName="SkeletonText";const buildStyles=()=>StyleSheet.create({base:{overflow:"hidden"},shimmerBand:{position:"absolute",top:0,bottom:0,left:0}});export{Skeleton,SkeletonCircle,SkeletonText};export default Skeleton;

package/lib/module/components/Skeleton/SkeletonContent.js

@@ -1 +1 @@
-"use strict";import React,{Children,cloneElement,isValidElement,useEffect,useRef}from"react";import{Animated,Image,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{Skeleton}from"./Skeleton.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{SkeletonSkip}from"./SkeletonSkip.js";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_REVEAL_FADE_MS=300,flattenStyle=e=>{if(!e)return{};return StyleSheet.flatten(e)??{}},resolveWidth=(e,t)=>"number"==typeof e?e:"string"!=typeof e||"auto"!==e&&"100%"!==e&&!/^\d+(\.\d+)?%$/.test(e)?t:e,resolveRadius=(e,t)=>"number"==typeof e?e:t,skeletonizeNode=(e,t,i,r,n,s="r")=>{if(null==t||"boolean"==typeof t)return null;if("string"==typeof t||"number"==typeof t)return _jsx(Skeleton,{shape:"text",width:"60%",height:14,variant:i,speed:r,colors:n},`${s}-text`);if(Array.isArray(t))return Children.map(t,(t,o)=>skeletonizeNode(e,t,i,r,n,`${s}-${o}`));if(!isValidElement(t))return null;const o=t,l=o.props??{},a=o.type;if(a===SkeletonSkip)return cloneElement(o,{key:`${s}-skip`});if("function"==typeof a||"object"==typeof a){const e=a.Skeleton;if(e){return _jsx(e,{...l},`${s}-self`)}}if(a===Image){const e=flattenStyle(l.style),t=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:120,a=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:t,height:o,radius:a,variant:i,speed:r,colors:n,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${s}-img`)}if(a===Text){const t=flattenStyle(l.style),o="number"==typeof t.fontSize?t.fontSize:e.text.base.size,a=resolveWidth(t.width,"85%");return _jsx(Skeleton,{shape:"text",width:a,height:Math.round(1.15*o),variant:i,speed:r,colors:n,style:{marginVertical:e.space.xxs}},`${s}-txt`)}if(null!=l.children)return cloneElement(o,{key:`${s}-w`},skeletonizeNode(e,l.children,i,r,n,`${s}-c`));if(a===View){const e=flattenStyle(l.style);if(null!=e.width||null!=e.height){const t=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:20,l=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:t,height:o,radius:l,variant:i,speed:r,colors:n},`${s}-vw`)}}return cloneElement(o,{key:`${s}-leaf`})},SkeletonContent=({loading:e,children:t,placeholder:i,variant:r,speed:n,count:s=1,colors:o,fadeDuration:l,style:a,testID:u})=>{const c=useTheme(),d=useSkeletonDefaults(),f=usePresenceMotion(),m=l??d.fadeDuration??(f.reduced?f.duration("default"):300),h=useRef(e),y=useRef(createAnimatedValue(e?0:1)).current;if(useEffect(()=>{let t;return h.current&&!e?(y.setValue(0),t=Animated.timing(y,{toValue:1,duration:m,useNativeDriver:!0}),t.start()):!h.current&&e&&y.setValue(1),h.current=e,()=>t?.stop()},[e,y,m]),!e)return m<=0?_jsx(_Fragment,{children:t}):_jsx(Animated.View,{style:[a,{opacity:y}],testID:u,children:t});if(void 0!==i){const e=s>1?Array.from({length:s},(e,t)=>_jsx(React.Fragment,{children:i},`sk-ph-${t}`)):i;return _jsx(View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:e})}const p=s>1?Array.from({length:s},(e,i)=>_jsx(React.Fragment,{children:t},`sk-rep-${i}`)):t;return _jsx(View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:skeletonizeNode(c,p,r,n,o)})};SkeletonContent.displayName="SkeletonContent";export{SkeletonContent};export default SkeletonContent;
+"use strict";import React,{Children,cloneElement,isValidElement,useEffect,useMemo,useRef}from"react";import{Animated,Image,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Text as LibraryText}from"../Text/index.js";import{DEFAULT_SKELETON_LABELS,Skeleton}from"./Skeleton.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{SkeletonSkip}from"./SkeletonSkip.js";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_REVEAL_FADE_MS=300,flattenStyle=e=>{if(!e)return{};return StyleSheet.flatten(e)??{}},resolveWidth=(e,t)=>"number"==typeof e?e:"string"!=typeof e||"auto"!==e&&"100%"!==e&&!/^\d+(\.\d+)?%$/.test(e)?t:e,resolveRadius=(e,t)=>"number"==typeof e?e:t,skeletonizeNode=(e,t,i,n,r,s="r")=>{if(null==t||"boolean"==typeof t)return null;if("string"==typeof t||"number"==typeof t)return _jsx(Skeleton,{shape:"text",width:"60%",height:14,variant:i,speed:n,colors:r},`${s}-text`);if(Array.isArray(t))return Children.map(t,(t,o)=>skeletonizeNode(e,t,i,n,r,`${s}-${o}`));if(!isValidElement(t))return null;const o=t,l=o.props??{},a=o.type;if(a===SkeletonSkip)return cloneElement(o,{key:`${s}-skip`});if("function"==typeof a||"object"==typeof a){const e=a.Skeleton;if(e){return _jsx(e,{...l},`${s}-self`)}}if(a===Image){const e=flattenStyle(l.style),t=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:120,a=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:t,height:o,radius:a,variant:i,speed:n,colors:r,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${s}-img`)}if(a===Text||a===LibraryText){const t=flattenStyle(l.style),o="number"==typeof t.fontSize?t.fontSize:e.text.base.size,a=resolveWidth(t.width,"85%");return _jsx(Skeleton,{shape:"text",width:a,height:Math.round(1.15*o),variant:i,speed:n,colors:r,style:{marginVertical:e.space.xxs}},`${s}-txt`)}if(null!=l.children)return cloneElement(o,{key:`${s}-w`},skeletonizeNode(e,l.children,i,n,r,`${s}-c`));if(a===View){const e=flattenStyle(l.style);if(null!=e.width||null!=e.height){const t=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:20,l=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:t,height:o,radius:l,variant:i,speed:n,colors:r},`${s}-vw`)}}return cloneElement(o,{key:`${s}-leaf`})},SkeletonContent=e=>{const{loading:t,children:i,placeholder:n,variant:r,speed:s,count:o=1,colors:l,labels:a,fadeDuration:u,style:c,testID:d}=e;warnInvalidValue("SkeletonContent","variant",e.variant,["shimmer","pulse","none"]),warnInvalidValue("SkeletonContent","speed",e.speed,["slow","normal","fast"]);const m=useTheme(),f=useMemo(()=>({...DEFAULT_SKELETON_LABELS,...a}),[a]),h=useSkeletonDefaults(),p=usePresenceMotion(),y=u??h.fadeDuration??(p.reduced?p.duration("default"):300),S=useRef(t),k=useRef(createAnimatedValue(t?0:1)).current;if(useEffect(()=>{let e;return S.current&&!t?(k.setValue(0),e=Animated.timing(k,{toValue:1,duration:y,useNativeDriver:!0}),e.start()):!S.current&&t&&k.setValue(1),S.current=t,()=>e?.stop()},[t,k,y]),!t)return y<=0?_jsx(_Fragment,{children:i}):_jsx(Animated.View,{style:[c,{opacity:k}],testID:d,children:i});if(void 0!==n){const e=o>1?Array.from({length:o},(e,t)=>_jsx(React.Fragment,{children:n},`sk-ph-${t}`)):n;return _jsx(View,{style:c,testID:d,accessible:!0,accessibilityLabel:f.loading,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:e})}const b=o>1?Array.from({length:o},(e,t)=>_jsx(React.Fragment,{children:i},`sk-rep-${t}`)):i;return _jsx(View,{style:c,testID:d,accessible:!0,accessibilityLabel:f.loading,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:skeletonizeNode(m,b,r,s,l)})};SkeletonContent.displayName="SkeletonContent";export{SkeletonContent};export default SkeletonContent;

package/lib/module/components/Skeleton/SkeletonList.js

@@ -1 +1 @@
-"use strict";import React from"react";import{FlatList,View}from"react-native";import{SkeletonContent}from"./SkeletonContent.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";function SkeletonListInner(e){const{loading:t,data:n,renderItem:o,renderPlaceholder:r,placeholderCount:l,variant:s,speed:i,colors:a,placeholderContainerStyle:c,horizontal:m,contentContainerStyle:d,style:u,testID:f,...S}=e,h=useSkeletonDefaults(),p=l??h.placeholderCount??3;if(t){const e=Array.from({length:Math.max(0,p)},(e,t)=>_jsx(React.Fragment,{children:r?r(t):null},`sk-list-${t}`));return _jsx(SkeletonContent,{loading:!0,variant:s,speed:i,colors:a,style:u,testID:f,children:_jsx(View,{style:[m?styles.row:styles.column,c],children:e})})}return _jsx(FlatList,{data:n??[],renderItem:o,horizontal:m,contentContainerStyle:d,style:u,testID:f,...S})}const styles={row:{flexDirection:"row"},column:{flexDirection:"column"}};export const SkeletonList=SkeletonListInner;
+"use strict";import React from"react";import{FlatList,View}from"react-native";import{SkeletonContent}from"./SkeletonContent.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";function SkeletonListInner(e){const{loading:t,data:n,renderItem:o,renderPlaceholder:r,placeholderCount:l,variant:s,speed:a,colors:i,labels:c,placeholderContainerStyle:m,horizontal:d,contentContainerStyle:u,style:f,testID:S,...h}=e,p=useSkeletonDefaults(),x=l??p.placeholderCount??3;if(t){const e=Array.from({length:Math.max(0,x)},(e,t)=>_jsx(React.Fragment,{children:r?r(t):null},`sk-list-${t}`));return _jsx(SkeletonContent,{loading:!0,variant:s,speed:a,colors:i,labels:c,style:f,testID:S,children:_jsx(View,{style:[d?styles.row:styles.column,m],children:e})})}return _jsx(FlatList,{data:n??[],renderItem:o,horizontal:d,contentContainerStyle:u,style:f,testID:S,...h})}const styles={row:{flexDirection:"row"},column:{flexDirection:"column"}};export const SkeletonList=SkeletonListInner;

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

@@ -1 +1 @@
-"use strict";export{default,Skeleton,SkeletonCircle,SkeletonText}from"./Skeleton.js";export{SkeletonClockProvider,useSkeletonClock}from"./SkeletonClock.js";export{SkeletonContent}from"./SkeletonContent.js";export{SkeletonList}from"./SkeletonList.js";export{SkeletonProvider,useSkeletonDefaults}from"./SkeletonProvider.js";export{SkeletonSkip}from"./SkeletonSkip.js";
+"use strict";export{DEFAULT_SKELETON_LABELS,default,Skeleton,SkeletonCircle,SkeletonText}from"./Skeleton.js";export{SkeletonClockProvider,useSkeletonClock}from"./SkeletonClock.js";export{SkeletonContent}from"./SkeletonContent.js";export{SkeletonList}from"./SkeletonList.js";export{SkeletonProvider,useSkeletonDefaults}from"./SkeletonProvider.js";export{SkeletonSkip}from"./SkeletonSkip.js";

package/lib/module/components/SlideToConfirm/SlideToConfirm.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{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{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_MAP={sm:{height:44,pad:"xxs"},md:{height:56,pad:"xs"},lg:{height:64,pad:"sm"}},Chevron=({color:e,size:t})=>_jsx(View,{style:{width:0,height:0,borderTopWidth:.4*t,borderBottomWidth:.4*t,borderLeftWidth:.55*t,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:e,marginLeft:.2*t}}),ACCESSIBILITY_ACTIONS=[{name:"activate",label:"Confirm"},{name:"increment",label:"Confirm"}],SlideToConfirm=forwardRef((e,t)=>{const{onConfirm:i,label:a="Slide to confirm",confirmedLabel:r="Confirmed",tone:o="primary",size:s="md",disabled:n=!1,threshold:l=.9,resetAfter:u=!1,haptic:c,icon:d,style:m,trackStyle:h,handleStyle:f,labelStyle:b,testID:p}=e,S=useTheme(),g=SIZE_MAP[s],C=S.space[g.pad],v=g.height-2*C,y=useMemo(()=>buildStyles(S,g),[S,g]),x=S.colors[o],[w,A]=useState(!1),T=useSharedValue(0),j=useSharedValue(0),k=useSharedValue(0),_=useRef(null),E=useCallback(()=>{const e=resolveHaptic(c,"notificationSuccess");e&&triggerHaptic(e)},[c]),I=useCallback(()=>{A(!1),T.value=withSpring(0,{damping:18,stiffness:160,mass:1})},[T]),R=useCallback(()=>{A(!0),E(),i(),!1!==u&&(_.current&&clearTimeout(_.current),_.current=setTimeout(I,u))},[E,i,u,I]),V=useCallback(e=>{if(n||w)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||R()},[n,w,R]);React.useEffect(()=>()=>{cancelAnimation(T),_.current&&clearTimeout(_.current)},[T]);const L=useCallback(e=>{j.value=Math.max(0,e.nativeEvent.layout.width-v-2*C)},[j,v,C]),M=useMemo(()=>{const e=l,t={damping:18,stiffness:160,mass:1},i={duration:S.motion.duration.fast,easing:Easing.out(Easing.cubic)};return Gesture.Pan().enabled(!n&&!w).minDistance(0).onStart(()=>{"worklet";k.value=T.value}).onUpdate(e=>{"worklet";T.value=Math.min(Math.max(k.value+e.translationX,0),j.value)}).onEnd(()=>{"worklet";j.value>0&&T.value>=j.value*e?(T.value=withTiming(j.value,i),runOnJS(R)()):T.value=withSpring(0,t)})},[n,w,l,T,j,k,R,S.motion.duration.fast]),z=useAnimatedStyle(()=>({transform:[{translateX:T.value}]})),D=useAnimatedStyle(()=>({width:T.value+v+C})),O=useAnimatedStyle(()=>{const e=j.value>0?j.value:1;return{opacity:Math.max(0,1-T.value/(.6*e))}});return _jsxs(View,{ref:t,style:[y.track,{backgroundColor:S.colors["bg-subtle"]},h,m],onLayout:L,testID:p,accessibilityRole:"adjustable",accessibilityLabel:w?r:a,accessibilityState:{disabled:n},"aria-disabled":n,accessibilityActions:ACCESSIBILITY_ACTIONS,onAccessibilityAction:V,children:[_jsx(Animated.View,{style:[y.fill,{backgroundColor:x,opacity:n?.5:1},D],pointerEvents:"none"}),_jsx(Animated.View,{style:[y.labelWrap,O],pointerEvents:"none",children:_jsx(Text,{style:[y.label,{color:S.colors["text-muted"],fontSize:S.text.base.size},b],numberOfLines:1,children:w?r:a})}),_jsx(GestureDetector,{gesture:M,children:_jsx(Animated.View,{style:[y.handle,{width:v,height:v,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:S.colors.surface,opacity:n?.5:1,...S.shadow.card},f,z],children:d??_jsx(Chevron,{color:x,size:.5*v})})})]})});SlideToConfirm.displayName="SlideToConfirm";const buildStyles=(e,t)=>StyleSheet.create({track:{height:t.height,borderRadius:e.radius.pill,...smoothCorners,justifyContent:"center",overflow:"hidden",padding:e.space[t.pad]},fill:{position:"absolute",left:0,top:0,bottom:0,borderRadius:e.radius.pill,...smoothCorners},labelWrap:{position:"absolute",left:t.height,right:t.height},label:{textAlign:"center",includeFontPadding:!1},handle:{alignItems:"center",justifyContent:"center"}});export{SlideToConfirm};export default SlideToConfirm;
+"use strict";import React,{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,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{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SLIDE_TO_CONFIRM_LABELS=Object.freeze({slide:"Slide to confirm",confirmed:"Confirmed",confirmAction:"Confirm"});const SIZE_MAP={sm:{height:44,pad:"xxs"},md:{height:56,pad:"xs"},lg:{height:64,pad:"sm"}},Chevron=({color:e,size:t})=>_jsx(View,{style:{width:0,height:0,borderTopWidth:.4*t,borderBottomWidth:.4*t,borderLeftWidth:.55*t,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:e,marginLeft:.2*t}}),SlideToConfirm=forwardRef((e,t)=>{const{onConfirm:i,label:a,tone:r="primary",size:o="md",disabled:n=!1,threshold:s=.9,resetAfter:l=!1,haptic:c,icon:d,labels:u,style:m,trackStyle:h,handleStyle:f,labelStyle:p,testID:b}=e;warnInvalidValue("SlideToConfirm","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("SlideToConfirm","size",e.size,["sm","md","lg"]);const g=useMemo(()=>({...DEFAULT_SLIDE_TO_CONFIRM_LABELS,...u}),[u]),S=useMemo(()=>[{name:"activate",label:g.confirmAction},{name:"increment",label:g.confirmAction}],[g.confirmAction]),v=useTheme(),y=SIZE_MAP[o],C=v.space[y.pad],x=y.height-2*C,w=useMemo(()=>buildStyles(v,y),[v,y]),A=v.colors[r],[T,j]=useState(!1),_=useSharedValue(0),E=useSharedValue(0),k=useSharedValue(0),L=useRef(null),V=useCallback(()=>{const e=resolveHaptic(c,"notificationSuccess");e&&triggerHaptic(e)},[c]),I=useCallback(()=>{j(!1),_.value=withSpring(0,{damping:18,stiffness:160,mass:1})},[_]),M=useCallback(()=>{j(!0),V(),i(),!1!==l&&(L.current&&clearTimeout(L.current),L.current=setTimeout(I,l))},[V,i,l,I]),R=useCallback(e=>{if(n||T)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||M()},[n,T,M]);React.useEffect(()=>()=>{cancelAnimation(_),L.current&&clearTimeout(L.current)},[_]);const D=useCallback(e=>{E.value=Math.max(0,e.nativeEvent.layout.width-x-2*C)},[E,x,C]),O=useMemo(()=>{const e=s,t={damping:18,stiffness:160,mass:1},i={duration:v.motion.duration.fast,easing:Easing.out(Easing.cubic)};return Gesture.Pan().enabled(!n&&!T).minDistance(0).onStart(()=>{"worklet";k.value=_.value}).onUpdate(e=>{"worklet";_.value=Math.min(Math.max(k.value+e.translationX,0),E.value)}).onEnd(()=>{"worklet";E.value>0&&_.value>=E.value*e?(_.value=withTiming(E.value,i),runOnJS(M)()):_.value=withSpring(0,t)})},[n,T,s,_,E,k,M,v.motion.duration.fast]),z=useAnimatedStyle(()=>({transform:[{translateX:_.value}]})),F=useAnimatedStyle(()=>({width:_.value+x+C})),W=useAnimatedStyle(()=>{const e=E.value>0?E.value:1;return{opacity:Math.max(0,1-_.value/(.6*e))}});return _jsxs(View,{ref:t,style:[w.track,{backgroundColor:v.colors["bg-subtle"]},h,m],onLayout:D,testID:b,accessibilityRole:"adjustable",accessibilityLabel:T?g.confirmed:a??g.slide,accessibilityState:{disabled:n},"aria-disabled":n,accessibilityActions:S,onAccessibilityAction:R,children:[_jsx(Animated.View,{style:[w.fill,{backgroundColor:A,opacity:n?.5:1},F],pointerEvents:"none"}),_jsx(Animated.View,{style:[w.labelWrap,W],pointerEvents:"none",children:_jsx(Text,{variant:"body",style:[w.label,{color:v.colors["text-muted"]},p],numberOfLines:1,children:T?g.confirmed:a??g.slide})}),_jsx(GestureDetector,{gesture:O,children:_jsx(Animated.View,{style:[w.handle,{width:x,height:x,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:v.colors.surface,opacity:n?.5:1,...v.shadow.card},f,z],children:d??_jsx(Chevron,{color:A,size:.5*x})})})]})});SlideToConfirm.displayName="SlideToConfirm";const buildStyles=(e,t)=>StyleSheet.create({track:{height:t.height,borderRadius:e.radius.pill,...smoothCorners,justifyContent:"center",overflow:"hidden",padding:e.space[t.pad]},fill:{position:"absolute",left:0,top:0,bottom:0,borderRadius:e.radius.pill,...smoothCorners},labelWrap:{position:"absolute",left:t.height,right:t.height},label:{textAlign:"center",includeFontPadding:!1},handle:{alignItems:"center",justifyContent:"center"}});export{SlideToConfirm};export default SlideToConfirm;

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

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

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

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

@@ -1 +1 @@
-"use strict";import{memo,useEffect,useRef,useState}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const sliderToneInk=(t,e)=>{switch(e){case"success":return t.colors["on-success"];case"warning":return t.colors["on-warning"];case"danger":return t.colors["on-danger"];default:return t.colors["on-primary"]}};export const clampValue=(t,e,n)=>Math.min(Math.max(t,e),n);export const snapValue=(t,e,n,r)=>{if(r<=0)return clampValue(t,e,n);const o=String(r).split(".")[1]?.length??0,s=Math.round((t-e)/r)*r+e;return clampValue(o>0?Number(s.toFixed(o)):s,e,n)};export const parseTyped=t=>{const e=t.replace(/[^\d.-]/g,"");if(""===e||"."===e||"-"===e)return null;const n=Number.parseFloat(e);return Number.isFinite(n)?n:null};const easeOutCubic=t=>1-(1-t)**3,roundTo=(t,e)=>{const n=10**e;return Math.round(t*n)/n};export const CountingText=memo(({value:t,format:e,decimals:n=2,duration:r,jumpKey:o="",style:s,testID:l})=>{const[a,u]=useState(t),i=useRef(t),c=useRef(o);return useEffect(()=>{const e=c.current!==o;c.current=o;const n=i.current;if(e||r<=0||n===t)return i.current=t,void u(t);const s=Date.now();let l=0;const tick=()=>{const e=Math.min(1,(Date.now()-s)/r),o=n+(t-n)*easeOutCubic(e);i.current=o,u(o),e<1&&(l=requestAnimationFrame(tick))};return l=requestAnimationFrame(tick),()=>cancelAnimationFrame(l)},[t,o,r]),_jsx(Text,{style:s,testID:l,children:e(roundTo(a,n))})});CountingText.displayName="CountingText";export const useValueDraft=({value:t,min:e,max:n,step:r,format:o,parse:s=parseTyped,onChange:l})=>{const[a,u]=useState(null);return{text:a??o(t),editing:null!==a,onFocus:()=>u(o(t)),onChangeText:t=>{u(t);const r=s(t);null!==r&&l(clampValue(r,e,n))},onBlur:()=>{if(null===a)return;const o=s(a);u(null);const i=snapValue(o??e,e,n,r);i!==t&&l(i)}}};const ROLL_TRAVEL_RATIO=1.2,RollingSlot=memo(({text:t,direction:e,duration:n,style:r,testID:o})=>{const[s,l]=useState(null),a=useRef(t),u=useRef(new Animated.Value(1)).current,i=1.2*(StyleSheet.flatten(r)?.fontSize??14);useEffect(()=>{if(a.current===t)return;const e=a.current;if(a.current=t,n<=0)return void l(null);l(e),u.setValue(0);const r=Animated.timing(u,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return r.start(({finished:t})=>{t&&l(null)}),()=>r.stop()},[t,n,u]);const c="up"===e?-1:1,m=null===s?null:{opacity:u,transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[-c*i,0]})}]},p={opacity:u.interpolate({inputRange:[0,1],outputRange:[1,0]}),transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[0,c*i]})}]};return _jsxs(View,{style:rollStyles.slot,children:[_jsx(Animated.Text,{style:[r,m],testID:o,children:t}),null!==s?_jsx(Animated.Text,{style:[r,rollStyles.leaving,p],testID:o?`${o}-leaving`:void 0,children:s}):null]})});RollingSlot.displayName="RollingSlot";export const RollingText=memo(({text:t,direction:e="up",duration:n,perCharacter:r=!0,style:o,testID:s})=>{const l=useRef(t),a=r?Math.max(t.length,l.current.length):1;return useEffect(()=>{l.current=t},[t]),_jsx(View,{style:rollStyles.row,testID:s,children:r?Array.from({length:a},(r,l)=>_jsx(RollingSlot,{text:t[l]??"",direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0},l)):_jsx(RollingSlot,{text:t,direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0})})});RollingText.displayName="RollingText";const rollStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"baseline"},slot:{overflow:"hidden"},leaving:{position:"absolute",left:0,top:0}});
+"use strict";import{memo,useEffect,useRef,useState}from"react";import{Animated,Easing,StyleSheet,View}from"react-native";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const sliderToneInk=(t,e)=>{switch(e){case"success":return t.colors["on-success"];case"warning":return t.colors["on-warning"];case"danger":return t.colors["on-danger"];case"info":return t.colors["on-info"];case"neutral":return t.colors["on-neutral"];default:return t.colors["on-primary"]}};export const clampValue=(t,e,n)=>Math.min(Math.max(t,e),n);export const snapValue=(t,e,n,r)=>{if(r<=0)return clampValue(t,e,n);const o=String(r).split(".")[1]?.length??0,s=Math.round((t-e)/r)*r+e;return clampValue(o>0?Number(s.toFixed(o)):s,e,n)};export const parseTyped=t=>{const e=t.replace(/[^\d.-]/g,"");if(""===e||"."===e||"-"===e)return null;const n=Number.parseFloat(e);return Number.isFinite(n)?n:null};const easeOutCubic=t=>1-(1-t)**3,roundTo=(t,e)=>{const n=10**e;return Math.round(t*n)/n};export const CountingText=memo(({value:t,format:e,decimals:n=2,duration:r,jumpKey:o="",style:s,testID:l})=>{const[a,i]=useState(t),u=useRef(t),c=useRef(o);return useEffect(()=>{const e=c.current!==o;c.current=o;const n=u.current;if(e||r<=0||n===t)return u.current=t,void i(t);const s=Date.now();let l=0;const tick=()=>{const e=Math.min(1,(Date.now()-s)/r),o=n+(t-n)*easeOutCubic(e);u.current=o,i(o),e<1&&(l=requestAnimationFrame(tick))};return l=requestAnimationFrame(tick),()=>cancelAnimationFrame(l)},[t,o,r]),_jsx(Text,{variant:"caption",weight:"semibold",style:s,testID:l,children:e(roundTo(a,n))})});CountingText.displayName="CountingText";export const useValueDraft=({value:t,min:e,max:n,step:r,format:o,parse:s=parseTyped,onChange:l})=>{const[a,i]=useState(null);return{text:a??o(t),editing:null!==a,onFocus:()=>i(o(t)),onChangeText:t=>{i(t);const r=s(t);null!==r&&l(clampValue(r,e,n))},onBlur:()=>{if(null===a)return;const o=s(a);i(null);const u=snapValue(o??e,e,n,r);u!==t&&l(u)}}};const ROLL_TRAVEL_RATIO=1.2,RollingSlot=memo(({text:t,direction:e,duration:n,style:r,testID:o})=>{const[s,l]=useState(null),a=useRef(t),i=useRef(new Animated.Value(1)).current,u=1.2*(StyleSheet.flatten(r)?.fontSize??14);useEffect(()=>{if(a.current===t)return;const e=a.current;if(a.current=t,n<=0)return void l(null);l(e),i.setValue(0);const r=Animated.timing(i,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return r.start(({finished:t})=>{t&&l(null)}),()=>r.stop()},[t,n,i]);const c="up"===e?-1:1,m=null===s?null:{opacity:i,transform:[{translateY:i.interpolate({inputRange:[0,1],outputRange:[-c*u,0]})}]},p={opacity:i.interpolate({inputRange:[0,1],outputRange:[1,0]}),transform:[{translateY:i.interpolate({inputRange:[0,1],outputRange:[0,c*u]})}]};return _jsxs(View,{style:rollStyles.slot,children:[_jsx(Animated.Text,{style:[r,m],testID:o,children:t}),null!==s?_jsx(Animated.Text,{style:[r,rollStyles.leaving,p],testID:o?`${o}-leaving`:void 0,children:s}):null]})});RollingSlot.displayName="RollingSlot";export const RollingText=memo(({text:t,direction:e="up",duration:n,perCharacter:r=!0,style:o,testID:s})=>{const l=useRef(t),a=r?Math.max(t.length,l.current.length):1;return useEffect(()=>{l.current=t},[t]),_jsx(View,{style:rollStyles.row,testID:s,children:r?Array.from({length:a},(r,l)=>_jsx(RollingSlot,{text:t[l]??"",direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0},l)):_jsx(RollingSlot,{text:t,direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0})})});RollingText.displayName="RollingText";const rollStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"baseline"},slot:{overflow:"hidden"},leaving:{position:"absolute",left:0,top:0}});

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

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

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

@@ -1 +1 @@
-"use strict";export{default,SliderField}from"./SliderField.js";
+"use strict";export{DEFAULT_SLIDER_FIELD_LABELS,default,SliderField}from"./SliderField.js";