@webority/mobile-ui 0.88.0 → 0.89.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:r,torch:s=!1,onTorchChange:a,onManualEntry:l,onGallery:c,onPermissionAction:d,frameSize:m=DEFAULT_FRAME,haptic:u,style:h,testID:p}=e,f=useTheme(),g=useSafeAreaInsets(),y=useReducedMotion(),b=useMemo(()=>buildStyles(f),[f]),x={...DEFAULT_LABELS,...r},[j,v]=useState({width:0,height:0}),S="scanning"===n||"found"===n||"invalid"===n,w=useRef(createAnimatedValue(1)).current,A=f.motion.duration.slower,E=f.motion.duration.normal;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:k,noCameraMessage:I}=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(`${k}. ${I}`)}},[n,i,V,C,R,M,k,I]);const L=Math.max(240,Math.min(m,j.width-2*f.spacing.xl)),P=(j.width-L)/2,F=Math.max(f.spacing.md,(j.height-L)/2-.06*j.height),B=j.width>0&&j.height>0,O={borderColor:"found"===n?f.colors.success:"invalid"===n?f.colors.error:f.colors.onOverlay,width:32,height:32},N="found"===n||"invalid"===n?_jsx(View,{style:[b.pill,{backgroundColor:"found"===n?f.colors.success:f.colors.error}],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",color:"found"===n?f.colors.onSuccess:f.colors.onError,children:"found"===n?V:C})}):_jsx(Text,{variant:"bodySmall",align:"center",color:f.colors.onOverlay,children:i}),D=S&&null!=a,H=S?"glass":"outline";return _jsxs(View,{ref:t,testID:p,onLayout:e=>{const{width:t,height:o}=e.nativeEvent.layout;v(e=>e.width===t&&e.height===o?e:{width:t,height:o})},style:[b.root,!S&&{backgroundColor:f.colors.background.primary},h],children:[S?_jsx(View,{style:StyleSheet.absoluteFill,children:o}):null,S&&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,O,e.style]},e.key))})]}),_jsx(View,{pointerEvents:"none",style:[b.message,{top:F+L+f.spacing.md}],children:N})]}):null,S?null:_jsx(View,{style:b.panel,children:_jsx(EmptyState,{fill:!0,icon:_jsx(AppIcon,{name:"noPermission"===n?"camera":"camera-slash",size:48,color:f.colors.text.tertiary}),title:"noPermission"===n?R:k,description:"noPermission"===n?M:I,action:"noPermission"===n&&d?{label:x.permissionAction,onPress:d}:void 0})}),_jsxs(View,{pointerEvents:"box-none",style:[b.bar,{paddingBottom:Math.max(g.bottom,f.spacing.md)}],children:[D?_jsx(IconButton,{icon:s?"flash":"flash-slash",variant:"glass",size:"lg",active:s,haptic:u,accessibilityLabel:s?x.torchOff:x.torchOn,onPress:()=>a?.(!s)}):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.background.overlay},mark:{position:"absolute"},message:{position:"absolute",left:0,right:0,alignItems:"center",paddingHorizontal:e.spacing.xl},pill:{paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.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.spacing.sm,paddingHorizontal:e.spacing.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{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;

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.background.primary},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.background.primary,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border.primary}});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:m=DEFAULT_EDGES,keyboardToolbar:h=!0,contentContainerStyle:y,style:g,testID:b}=e,S=useTheme(),v=useSafeAreaInsets(),x=useMemo(()=>buildStyles(S),[S]),[T]=useState(()=>new Animated.Value(0)),[j,E]=useState(0),k=void 0!==n,A=useRef(n);A.current=n;const C=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(!k)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(A.current?.(),!0));return()=>e.remove()},[k]);const F=m.includes("left")?v.left:0,I=m.includes("right")?v.right:0,M=m.includes("bottom")?v.bottom:0,O=m.includes("top")&&!C?v.top:0,H=m.filter(e=>"top"!==e&&!("bottom"===e&&L)),G=C?_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,y]}):u?_jsx(KeyboardAwareScrollView,{refreshControl:V,onScroll:_?K:void 0,safeAreaEdges:H,style:x.flex,contentContainerStyle:[{paddingTop:B},y],children:s}):_jsx(View,{style:[x.flex,{paddingLeft:F,paddingRight:I,paddingBottom:L?0:M},y],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},g],children:[_?null:G,N,P,_?G:null,h?_jsx(KeyboardToolbar,{}):null]})}
+"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]})}

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

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

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:i})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]);return _jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,keyboardShouldPersistTaps:"handled",contentContainerStyle:n.scopes,accessibilityLabel:"Search 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,title:s,onSelect:t,onRemove:o,onClear:i,onHold:r,onRelease:n})=>{const l=useTheme(),c=useMemo(()=>buildStyles(l),[l]);return _jsxs(View,{style:c.list,children:[_jsxs(View,{style:c.header,children:[_jsx(Text,{variant:"label",accessibilityRole:"header",style:c.headerTitle,children:s}),i?_jsx(Pressable,{onPress:i,onPressIn:r,onPressOut:n,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:r,onPressOut:n,accessibilityRole:"button",accessibilityLabel:e,accessibilityHint:"Searches again",android_ripple:{color:l.colors.surface.pressed},style:({pressed:e})=>[c.rowMain,e?{backgroundColor:l.colors.surface.pressed}:null],children:[_jsx(AppIcon,{name:"history",size:18,color:l.colors.text.tertiary}),_jsx(Text,{variant:"body",numberOfLines:1,style:c.rowText,children:e})]}),o?_jsx(Pressable,{onPress:()=>o(e),onPressIn:r,onPressOut:n,accessibilityRole:"button",accessibilityLabel:`Remove ${e} from recent searches`,style:c.remove,children:_jsx(AppIcon,{name:"x",size:18,color:l.colors.text.secondary})}):null]},e))]})};const SuggestionRow=memo(({item:e,query:s,onSelect:t,onHold:o,onRelease:i,theme:r,styles:n})=>{const l=splitHighlight(e.text,s),c=e.icon?renderSlotIcon(e.icon,{size:18,color:r.colors.text.tertiary,disabled:!1}):_jsx(AppIcon,{name:"search",size:18,color:r.colors.text.tertiary});return _jsxs(Pressable,{onPress:()=>t(e),onPressIn:o,onPressOut:i,accessibilityRole:"button",accessibilityLabel:e.subtitle?`${e.text}, ${e.subtitle}`:e.text,android_ripple:{color:r.colors.surface.pressed},style:({pressed:e})=>[n.rowMain,n.suggestion,e?{backgroundColor:r.colors.surface.pressed}:null],children:[c,_jsxs(View,{style:n.rowText,children:[_jsx(Text,{variant:"body",color:"secondary",numberOfLines:1,children:l.map(e=>_jsx(RNText,{style:e.match?n.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:i})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]);return _jsx(View,{style:n.list,children:e.map(e=>_jsx(SuggestionRow,{item:e,query:s,onSelect:t,onHold:o,onRelease:i,theme:r,styles:n},e.id??e.text))})};const buildStyles=e=>({...StyleSheet.create({scopes:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm,paddingTop:e.spacing.sm},scopeChip:{minHeight:44},list:{width:"100%",paddingTop:e.spacing.xs},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",minHeight:44,paddingHorizontal:e.spacing.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.spacing.md,minHeight:44,paddingHorizontal:e.spacing.xs},suggestion:{paddingVertical:e.spacing.xs},rowText:{flex:1},remove:{width:44,height:44,alignItems:"center",justifyContent:"center"}}),match:{...fontFor(e,"bold"),color:e.colors.text.primary}});
+"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"]}});

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:i=!1,required:r=!1,style:s,testID:o})=>{const a=useTheme(),l=useMemo(()=>({marginTop:i?0:a.spacing.lg,marginBottom:a.spacing.sm}),[a,i]),n="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:n.variant,color:n.color,weight:n.weight,accessibilityRole:"header",accessibilityLabel:r&&"string"==typeof e?`${e}, required`:void 0,style:[l,s],testID:o,children:[e,r?_jsx(RequiredMark,{}):null]})};export default SectionHeader;
+"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;

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,radiusOf,resolveSegmentedControlSize,spaceOf,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{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:r,helperText:s,error:l,value:o,defaultValue:n,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:y,segmentStyle:S,selectedIndicatorStyle:v,textStyle:C,labelStyle:j,testID:w}=e,[k,I]=useControllableState({value:o,defaultValue:n??i[0]?.value,onChange:a}),L=useTheme(),_=L.components.segmentedControl,F=useMemo(()=>buildStyles(L),[L]),M=useMemo(()=>resolveSegmentedControlSize(L,d),[L,d]),V=p>=2?2:1,z=V>1,R="segmented"===g,T="underline"===g,A="pills"===g,E=R?spaceOf(L,_.trackPadding,"components.segmentedControl.trackPadding"):0,H=Math.ceil(1.25*M.text)*(V-1),W=_?.underlineHeight??2,O=spaceOf(L,_.pillInset,"components.segmentedControl.pillInset"),q=void 0===_.radius?void 0:radiusOf(L,_.radius,"components.segmentedControl.radius"),D="number"==typeof h?h:h?L.radius[h]:q,P=D??L.radius.md,B=void 0===D?L.radius.sm:Math.max(D-E,0),N=D??L.radius.pill,X=D??L.radius.none,[G,J]=useState(0),K=useRef(createAnimatedValue(0)).current,Q=Math.max(0,i.findIndex(e=>e.value===k)),U=G>0?(G-2*E)/Math.max(i.length,1):0,Y=useCallback((e,t)=>{if(t<=0)return;const i=t*e,r=L.motion.spring.snappy,s=Animated.spring(K,{toValue:i,damping:r.damping,stiffness:r.stiffness,mass:r.mass,overshootClamping:!0,useNativeDriver:!0});return s.start(),s},[L.motion.spring.snappy,K]);useEffect(()=>{if(U>0){const e=Y(Q,U);return()=>e?.stop()}},[Q,U,Y]);const Z=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==G&&J(t)},[G]),$=useCallback(e=>{if(u)return;if(e.value===k)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),I(e.value)},[u,I,k,f]),ee=R?L.colors.background.elevated:A?L.colors.primaryMuted:L.colors.primary,te=R?B:A?N:X,ie="neutral"===m?L.colors.text.primary:L.colors.primary,re=L.colors.background.tertiary,se=useSquircle(R,P,Z),le=!0===l||hasFieldText(l),oe=le&&!u,ne=L.colors.field.borderError,ae=L.colors.border.width,de=hasFieldText(r),ce=le?l:s,ue=hasFieldText(ce),me=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:b??("string"==typeof r?r:void 0),testID:w,style:[F.track,{...z?{minHeight:M.height+H}:{height:M.height},opacity:u?.55:1,alignSelf:c?"stretch":"flex-start"},R?{borderRadius:P,...smoothCorners,backgroundColor:se.active?"transparent":re,padding:E}:T?{borderBottomColor:oe?ne:L.colors.border.secondary,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:P,fill:re,stroke:oe?ne:void 0,strokeWidth:ae}):null,_jsxs(View,{style:F.row,children:[U>0?_jsx(Animated.View,{pointerEvents:"none",style:[F.thumb,R?z?{top:0,bottom:0}:{top:0,height:M.height-2*E}:A?{top:O,bottom:O}:{bottom:0,height:W},{width:U,borderRadius:te,...smoothCorners,backgroundColor:ee,transform:[{translateX:K}]},v]}):null,i.map(e=>{const t=e.value===k,i=t?ie:L.colors.text.tertiary,r=renderSlotIcon(e.icon,{color:i,size:M.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:M.paddingX,opacity:e&&!t?.7:1},S],children:[r?_jsx(View,{style:F.segmentIcon,children:r}):null,_jsx(Text,{style:[F.segmentLabel,z?F.segmentLabelMultiline:null,{color:i,fontSize:M.text,fontWeight:t?L.typography.fontWeight.semibold:L.typography.fontWeight.medium},C,j],numberOfLines:V,children:e.label})]},String(e.value))})]}),!oe||T||se.active?null:_jsx(View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{borderWidth:ae,borderColor:ne,borderRadius:R?P:N,...smoothCorners}]})]});return de||ue?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[de?_jsx(FieldLabel,{size:d,children:r}):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.spacing.xs},segmentMultiline:{paddingVertical:e.spacing.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,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:s,helperText:l,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(_),[_]),M=useMemo(()=>resolveSegmentedControlSize(_,d),[_,d]),V=p>=2?2:1,z=V>1,R="segmented"===h,T="underline"===h,A="pills"===h,E=R?_.space[k["track-padding"]]:0,H=Math.ceil(1.25*M.text)*(V-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,s=_.motion.spring.snappy,l=Animated.spring(J,{toValue:i,damping:s.damping,stiffness:s.stiffness,mass:s.mass,overshootClamping:!0,useNativeDriver:!0});return l.start(),l},[_.motion.spring.snappy,J]);useEffect(()=>{if(Q>0){const e=U(K,Q);return()=>e?.stop()}},[K,Q,U]);const Y=useCallback(e=>{const t=e.nativeEvent.layout.width;t!==G&&X(t)},[G]),Z=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]),$=R?_.colors.surface:A?_.colors["primary-soft"]:_.colors.primary,ee=R?P:A?N:O,te="neutral"===m?_.colors["text-body"]:_.colors.primary,ie=_.colors["bg-muted"],se=useSquircle(R,B,Y),le=!0===r||hasFieldText(r),re=le&&!u,oe=_.colors["field-border-error"],ne=_.size.border,ae=hasFieldText(s),de=le?r:l,ce=hasFieldText(de),ue=_jsxs(View,{ref:t,accessibilityRole:"radiogroup",accessibilityLabel:f??("string"==typeof s?s:void 0),testID:w,style:[F.track,{...z?{minHeight:M.height+H}:{height:M.height},opacity:u?.55:1,alignSelf:c?"stretch":"flex-start"},R?{borderRadius:B,...smoothCorners,backgroundColor:se.active?"transparent":ie,padding:E}:T?{borderBottomColor:re?oe:_.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:ie,stroke:re?oe:void 0,strokeWidth:ne}):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:M.height-2*E}:A?{top:D,bottom:D}:{bottom:0,height:q},{width:Q,borderRadius:ee,...smoothCorners,backgroundColor:$,transform:[{translateX:J}]},v]}):null,i.map(e=>{const t=e.value===I,i=t?te:_.colors["text-subtle"],s=renderSlotIcon(e.icon,{color:i,size:M.icon,selected:t,disabled:u});return _jsxs(Pressable,{onPress:()=>Z(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:M["padding-x"],opacity:e&&!t?.7:1},S],children:[s?_jsx(View,{style:F.segmentIcon,children:s}):null,_jsx(Text,{style:[F.segmentLabel,z?F.segmentLabelMultiline:null,{color:i,fontSize:M.text,fontWeight:t?_.weight.semibold:_.weight.medium},C,j],numberOfLines:V,children:e.label})]},String(e.value))})]}),!re||T||se.active?null:_jsx(View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{borderWidth:ne,borderColor:oe,borderRadius:R?B:N,...smoothCorners}]})]});return ae||ce?_jsxs(View,{style:{alignSelf:c?"stretch":"flex-start"},children:[ae?_jsx(FieldLabel,{size:d,children:s}):null,ue,ce?_jsx(FieldMessage,{size:d,text:de,error:le}):null]}):ue});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:d,searchable:c=!1,haptic:u,label:p,help:x,title:h,required:f=!1,error:g,helperText:S,prefix:b,numberOfLines:m=1,disabled:v=!1,size:y="md",variant:C,leftIcon:j,rightIcon:F,chevronColor:O,chevronSize:k,borderRadius:T,accessibilityLabel:V,labelStyle:_,style:z,triggerStyle:I,textStyle:H,optionStyle:w,selectedOptionStyle:L,optionTextStyle:M,selectedOptionTextStyle:R,testID:N}=e,D=!0===e.multi,P=useCallback(e=>i?i(e):e.label??"",[i]),B=useCallback(e=>o?o(e):e.value,[o]),q=useCallback(e=>r?r(e):!0===e.disabled,[r]),A=useCallback(e=>n?n(e):e.description,[n]),E=useCallback(e=>s?s(e):e.icon,[s]),$=useTheme(),G=useMemo(()=>buildStyles($),[$]),J=resolveFieldSize($,y),K=resolveFieldTextStyle($,{disabled:v}),Q=C??$.components.select?.defaultVariant??$.components.field?.defaultVariant??"outlined",U=useMemo(()=>{const e=$.components.select?.fillColors?.[Q];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[$.components.select?.fillColors,Q]),W=T??J.radius,[X,Y]=useState(!1),Z=useCallback(t=>{if(D){const l=e.value??[];return containsValue(l,t)}return null!=e.value&&sameSelectValue(e.value,t)},[D,e.value]),ee=useMemo(()=>{if(D){const t=e.value??[];return l.filter(e=>containsValue(t,B(e)))}const t=e.value;if(null==t)return[];const i=l.find(e=>sameSelectValue(B(e),t));return i?[i]:[]},[D,l,e.value,B]),te=useCallback(()=>{if(v)return;const e=resolveHaptic(u,"selection");e&&triggerHaptic(e),Y(!0)},[v,u]),le=useCallback(()=>{Y(!1)},[]),ie=useCallback(t=>{if(q(t))return;const l=B(t),i=resolveHaptic(u,"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,B,u]),oe=0===ee.length?a??"Select…":ee.map(e=>P(e)).join(", "),re=0===ee.length,ne=!0===g||hasFieldText(g),se=hasFieldText(p),ae=fieldTextAsString(p),de=Math.round(1.4*J.text),ce=useMemo(()=>({fontSize:J.text,color:K.placeholderColor}),[J.text,K.placeholderColor]),ue={color:v?$.colors.field.iconDisabled:X?$.colors.field.iconFocused:$.colors.field.icon,size:J.icon,disabled:v,focused:X,error:ne},pe=0===ee.length?a??"No selection":`Selected: ${ee.map(e=>P(e)).join(", ")}`,xe=V??`${ae??"Select"}. ${pe}`;return _jsxs(View,{style:[G.container,z],testID:N,children:[se?_jsx(FieldLabel,{size:y,required:f,help:x,style:_,children:p}):null,_jsx(View,{ref:t,collapsable:!1,children:_jsxs(FieldBase,{size:y,variant:Q,disabled:v,error:ne,filled:ee.length>0,onPress:te,borderRadius:W,fillOverrides:U,paddingHorizontal:"underline"===Q?$.spacing.none:void 0,accessibilityRole:"button",accessibilityLabel:xe,accessibilityState:{disabled:v,expanded:X},"aria-disabled":v,"aria-expanded":X,style:I,slotAlign:1===m?"center":"top",slotLineHeight:1===m?void 0:de,leading:j?_jsx(View,{children:renderSlotIcon(j,ue)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,ue)}):_jsx(Chevron,{color:O??(v?$.colors.text.disabled:$.colors.text.tertiary),size:k??J.icon,open:X,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:de,marginRight:$.spacing.xs}],children:b}):_jsx(View,{style:[G.prefixNode,{minHeight:1===m?void 0:de,justifyContent:"center",marginRight:$.spacing.xs}],children:_jsx(Text,{style:[G.prefix,{color:K.placeholderColor,fontSize:J.text,lineHeight:1===m?void 0:de}],children:_jsx(NotationInkContext.Provider,{value:ce,children:b})})}):null,_jsxs(Text,{style:[G.triggerText,{color:re?K.placeholderColor:K.color,fontSize:J.text,lineHeight:1===m?void 0:de,...K.weightStyle},H],numberOfLines:m,children:[oe,re&&f&&!se?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:y,error:ne,text:ne?g:S}),_jsx(OptionSheet,{open:X,onClose:le,onOpenChange:d,title:h??ae,accessibilityLabel:ae??(se?h:void 0)??a??"Options",options:l,labelOf:P,getValue:B,disabledOf:q,descriptionOf:A,iconOf:E,isSelected:Z,onSelect:ie,multi:D,searchable:c,optionStyle:w,selectedOptionStyle:L,optionTextStyle:M,selectedOptionTextStyle:R,searchSelectionColor:resolveVariantColors($,Q,U).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.spacing.sm}});export{Select};export default Select;
+"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;

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:g=DEFAULT_NAME_LENGTH,inkColor:h,paperColor:y,scriptFontFamily:f,labels:S,haptic:x="selection",disabled:T=!1,style:w,testID:_}=e,b=useTheme(),E=void 0===h&&void 0===y,A=E?b.colors.text.primary:h??lightTheme.colors.text.primary,C=E?b.colors.background.elevated:y??lightTheme.colors.background.elevated,v=E?lightTheme.colors.text.primary:A,R=E?lightTheme.colors.background.elevated:C,I=v!==A||R!==C,j=f??defaultScriptFont(),k=useMemo(()=>({...DEFAULT_LABELS,...S}),[S]),L=useScreenReader(),P=useRef(null),D=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),[$,W]=useState(c?s:"draw"),[z,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===z.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=>{W(e),te.current.onModeChange?.(e),announce("type"===e?k.typingAnnouncement:k.drawingAnnouncement)},[k.typingAnnouncement,k.drawingAnnouncement]);useEffect(()=>{L&&c&&!X.current&&"draw"===$&&0===N.current.length&&le("type")},[L,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(k.clearedAnnouncement)},[$,ce,oe,ie,k.clearedAnnouncement]),pe=useCallback(()=>{"draw"===$&&0!==N.current.length&&(oe(N.current.slice(0,-1)),ie(),announce(k.undoneAnnouncement))},[$,oe,ie,k.undoneAnnouncement]),me=useCallback(()=>{ee(N.current.map(e=>e.points)),Q(!0)},[]),ge=useCallback(()=>{Q(!1)},[]),he=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(k.emptyError));const n=I?D.current:P.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:z,ink:v,paper:R,strokeWidth:2.5,fontFamily:cssFontStack(j)}),clear:ue,undo:pe,isEmpty:()=>ae}),[ae,k.emptyError,ye,m,$,B,z,I,v,R,j,ue,pe]);const fe=useMemo(()=>[{name:"undo",label:k.undo},{name:"clear",label:k.clear},...c?[{name:"toggleMode",label:"draw"===$?k.typeInstead:k.drawInstead}]:[]],[k.undo,k.clear,k.typeInstead,k.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.spacing.sm},pad:{height:m,borderWidth:b.colors.border.width,borderColor:b.colors.border.primary,borderRadius:b.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:C,opacity:T?.5:1},baseline:{position:"absolute",left:b.spacing.md,right:b.spacing.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:A,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:b.spacing.xs},trailing:{flexDirection:"row",alignItems:"center",gap:b.spacing.xs},expandedRoot:{flex:1,padding:b.spacing.md,gap:b.spacing.sm,backgroundColor:b.colors.background.primary},expandedBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}),[b,m,C,A,T]),we=z.trim(),be=p??V,Ee=u&&!ae?`Signed by ${u}${be?`, ${formatDateTime(be)}`:""}`:null,Ae="type"===$&&we?`${k.pad}. ${we}`:k.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"===$?k.padHint:void 0,accessibilityValue:{text:ae?k.empty:k.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:fe,onAccessibilityAction:Se,children:[I?_jsxs(Svg,{ref:D,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:P,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:k.typedLabel,placeholder:k.typedPlaceholder,value:z,onChangeText:ce,maxLength:g,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"===$?k.caption:k.typedCaption}),_jsxs(View,{style:Te.actions,children:[c?_jsx(Button,{title:"draw"===$?k.typeInstead:k.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:k.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:pe,testID:_?`${_}-undo`:void 0}),_jsx(Button,{title:k.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:k.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:k.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:ge,children:_jsxs(ExpandedRoot,{style:Te.expandedRoot,children:[_jsxs(View,{style:Te.expandedBar,children:[_jsx(Button,{title:k.close,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:ge,testID:_?`${_}-close`:void 0}),_jsx(Button,{title:k.done,variant:"solid",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:he,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:h,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{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;

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:n,colors:r,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=r?.background??m.colors?.background??u.colors.skeleton.background,g=r?.highlight??m.colors?.highlight??u.colors.skeleton.highlight,{responsive:y}=useScreenDimensions(),b=useMemo(()=>buildStyles(),[]),x=resolveWidth(t),f=y.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:g,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",g,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[S,g,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:n,radius:r="sm",width:a="100%",style:l,testID:u})=>{const m=useTheme(),d=s??m.spacing.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.typography.fontSize.base,radius:r,variant:i,speed:n,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{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;

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.typography.fontSize.base,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.spacing.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("normal"):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,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;

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:a,label:i="Slide to confirm",confirmedLabel:r="Confirmed",tone:o="primary",size:n="md",disabled:s=!1,threshold:l=.9,resetAfter:c=!1,haptic:u,icon:d,style:m,trackStyle:h,handleStyle:f,labelStyle:p,testID:b}=e,S=useTheme(),g=SIZE_MAP[n],y=S.spacing[g.pad],v=g.height-2*y,C=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(u,"notificationSuccess");e&&triggerHaptic(e)},[u]),I=useCallback(()=>{A(!1),T.value=withSpring(0,{damping:18,stiffness:160,mass:1})},[T]),R=useCallback(()=>{A(!0),E(),a(),!1!==c&&(_.current&&clearTimeout(_.current),_.current=setTimeout(I,c))},[E,a,c,I]),V=useCallback(e=>{if(s||w)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||R()},[s,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*y)},[j,v,y]),M=useMemo(()=>{const e=l,t={damping:18,stiffness:160,mass:1},a={duration:S.motion.duration.fast,easing:Easing.out(Easing.cubic)};return Gesture.Pan().enabled(!s&&!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,a),runOnJS(R)()):T.value=withSpring(0,t)})},[s,w,l,T,j,k,R,S.motion.duration.fast]),z=useAnimatedStyle(()=>({transform:[{translateX:T.value}]})),D=useAnimatedStyle(()=>({width:T.value+v+y})),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:[C.track,{backgroundColor:S.colors.background.secondary},h,m],onLayout:L,testID:b,accessibilityRole:"adjustable",accessibilityLabel:w?r:i,accessibilityState:{disabled:s},"aria-disabled":s,accessibilityActions:ACCESSIBILITY_ACTIONS,onAccessibilityAction:V,children:[_jsx(Animated.View,{style:[C.fill,{backgroundColor:x,opacity:s?.5:1},D],pointerEvents:"none"}),_jsx(Animated.View,{style:[C.labelWrap,O],pointerEvents:"none",children:_jsx(Text,{style:[C.label,{color:S.colors.text.secondary,fontSize:S.typography.fontSize.base},p],numberOfLines:1,children:w?r:i})}),_jsx(GestureDetector,{gesture:M,children:_jsx(Animated.View,{style:[C.handle,{width:v,height:v,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:S.colors.background.elevated,opacity:s?.5:1,...S.shadows.sm},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.spacing[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,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;

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

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.onSuccess;case"warning":return t.colors.onWarning;case"error":return t.colors.onError;default:return t.colors.onPrimary}};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,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}});

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

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

package/lib/module/components/Sparkline/Sparkline.js

@@ -1 +1 @@
-"use strict";import{formatNumber}from"@webority/mobile-core";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import Svg,{Circle,Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{finiteValues,sparklineGeometry}from"./geometry.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DOT_RADIUS=3,lineColor=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText[t],defaultFormat=e=>formatNumber(e),Sparkline=forwardRef((e,t)=>{const{data:r,tone:i="primary",color:o,fill:l=!1,highlightLast:s=!0,height:a=32,width:n,strokeWidth:m=2,label:h,formatLabel:c=defaultFormat,accessibilityLabel:f,style:u,testID:d}=e,y=useTheme(),[p,x]=useState(0),g=n??p,k=useCallback(e=>{if(void 0===n){const t=Math.round(e.nativeEvent.layout.width);x(e=>e===t?e:t)}},[n]),S=Math.max(3,m/2)+1,b=useMemo(()=>sparklineGeometry(r,g,a,S),[r,g,a,S]),v=o??lineColor(y,i),j=useMemo(()=>{if(void 0!==f)return f;const e=finiteValues(r),t=h?`${h}, `:"";if(0===e.length)return`${t}no data`;if(1===e.length)return`${t}${c(e[0])}`;return`${t}from ${c(e[0])} to ${c(e[e.length-1])}, low ${c(Math.min(...e))}, high ${c(Math.max(...e))}`},[f,r,c,h]);return _jsx(View,{ref:t,accessible:!0,accessibilityRole:"image",accessibilityLabel:j,testID:d,onLayout:k,style:[styles.root,void 0===n?styles.stretch:{width:n},{height:a},u],children:""===b.line?null:_jsxs(Svg,{width:g,height:a,viewBox:`0 0 ${g} ${a}`,children:[l?_jsx(Path,{d:b.area,fill:v,fillOpacity:.14,stroke:"none"}):null,_jsx(Path,{d:b.line,fill:"none",stroke:v,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",testID:d?`${d}-line`:void 0}),s&&b.last?_jsx(Circle,{cx:b.last.x,cy:b.last.y,r:3,fill:v,testID:d?`${d}-dot`:void 0}):null]})})});Sparkline.displayName="Sparkline";const styles=StyleSheet.create({root:{overflow:"hidden"},stretch:{alignSelf:"stretch"}});export{Sparkline};export default Sparkline;
+"use strict";import{formatNumber}from"@webority/mobile-core";import{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import Svg,{Circle,Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{finiteValues,sparklineGeometry}from"./geometry.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DOT_RADIUS=3,lineColor=(e,t)=>"neutral"===t?e.colors["text-muted"]:e.colors[`${t}-text`],defaultFormat=e=>formatNumber(e),Sparkline=forwardRef((e,t)=>{const{data:r,tone:i="primary",color:o,fill:l=!1,highlightLast:s=!0,height:a=32,width:n,strokeWidth:m=2,label:h,formatLabel:c=defaultFormat,accessibilityLabel:u,style:f,testID:d}=e,y=useTheme(),[p,x]=useState(0),g=n??p,k=useCallback(e=>{if(void 0===n){const t=Math.round(e.nativeEvent.layout.width);x(e=>e===t?e:t)}},[n]),S=Math.max(3,m/2)+1,b=useMemo(()=>sparklineGeometry(r,g,a,S),[r,g,a,S]),v=o??lineColor(y,i),$=useMemo(()=>{if(void 0!==u)return u;const e=finiteValues(r),t=h?`${h}, `:"";if(0===e.length)return`${t}no data`;if(1===e.length)return`${t}${c(e[0])}`;return`${t}from ${c(e[0])} to ${c(e[e.length-1])}, low ${c(Math.min(...e))}, high ${c(Math.max(...e))}`},[u,r,c,h]);return _jsx(View,{ref:t,accessible:!0,accessibilityRole:"image",accessibilityLabel:$,testID:d,onLayout:k,style:[styles.root,void 0===n?styles.stretch:{width:n},{height:a},f],children:""===b.line?null:_jsxs(Svg,{width:g,height:a,viewBox:`0 0 ${g} ${a}`,children:[l?_jsx(Path,{d:b.area,fill:v,fillOpacity:.14,stroke:"none"}):null,_jsx(Path,{d:b.line,fill:"none",stroke:v,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",testID:d?`${d}-line`:void 0}),s&&b.last?_jsx(Circle,{cx:b.last.x,cy:b.last.y,r:3,fill:v,testID:d?`${d}-dot`:void 0}):null]})})});Sparkline.displayName="Sparkline";const styles=StyleSheet.create({root:{overflow:"hidden"},stretch:{alignSelf:"stretch"}});export{Sparkline};export default Sparkline;

package/lib/module/components/Spinner/Spinner.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{squircleHostRadius}from"../../utils/squircle.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:20,md:32,lg:48},CONTAINER_RATIO=1.5,DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,DOT_GROW_SCALE=1.4,DOT_PULSE_MIN_OPACITY=.4,Dot=({size:e,color:t,delay:i,duration:n,reduced:r})=>{const o=useTheme(),s=useRef(createAnimatedValue(0)).current;useEffect(()=>{const e=Animated.loop(Animated.sequence([Animated.delay(i),Animated.timing(s,{toValue:1,duration:n/2,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(s,{toValue:0,duration:n/2,easing:Easing.in(Easing.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[s,i,n]);const a=useMemo(()=>({grow:s.interpolate({inputRange:[0,1],outputRange:[1,1.4]}),fade:s.interpolate({inputRange:[0,1],outputRange:[.4,1]})}),[s]);return _jsx(Animated.View,{style:{width:e,height:e,borderRadius:o.radius.pill,...smoothCorners,backgroundColor:t,...r?{opacity:a.fade}:{transform:[{scale:a.grow}]}}})},Spinner=forwardRef((e,t)=>{const{size:i="md",color:n,message:r,overlay:o=!1,backdropColor:s,variant:a="circular",accessibilityLabel:l,style:c,testID:u}=e,d="contained"===a,m=o&&!d,g=useTheme(),y=usePresenceMotion(),p=y.duration("normal"),f=useRef(createAnimatedValue(0)).current;useEffect(()=>{Animated.timing(f,{toValue:1,duration:p,easing:Easing.bezier(...g.motion.easing.standard),useNativeDriver:!0}).start()},[f,g,p]);const h=useMemo(()=>buildStyles(g),[g]),b=sizeMap[i],j=n??g.colors.primary,x=s??g.colors.background.overlay,C=useMemo(()=>{if("contained"===a){const e=Math.round(1.5*b);return _jsx(View,{style:[h.container,{width:e,height:e,borderRadius:g.radius.pill,backgroundColor:blendOf(j,.14,g.colors.background.elevated,g.colors.background.secondary)}],children:_jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})})}if("dots"===a){const e=Math.max(6,Math.round(b/4));return _jsx(View,{style:[h.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>_jsx(Dot,{size:e,color:j,delay:150*i,duration:600,reduced:y.reduced},i))})}return _jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})},[a,i,b,j,h.dotsRow,h.container,y.reduced,g.radius.pill,g.colors.background.elevated,g.colors.background.secondary]),S=l??r??"Loading",v=useRef(S);v.current=S,useEffect(()=>{d&&announce(v.current)},[d]);const R=useSquircle(m,g.radius.lg),_=R.active&&R.size?{borderRadius:squircleHostRadius(R.size.width,R.size.height,g.radius.lg)}:null;let w=h.inlineContent;m?w=h.overlayContent:d&&(w=h.containedContent);const A=_jsxs(Animated.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:d?"none":"polite",accessibilityLabel:S,accessibilityState:{busy:!0},"aria-busy":!0,testID:u,onLayout:R.onLayout,style:[w,_,{opacity:f}],children:[R.active&&R.size?_jsx(SquircleFill,{width:R.size.width,height:R.size.height,radius:g.radius.lg,fill:g.colors.background.elevated}):null,C,r?_jsx(Text,{style:[h.message,{color:g.colors.text.primary,fontSize:g.typography.fontSize.base,fontWeight:g.typography.fontWeight.medium,marginTop:g.spacing.md}],numberOfLines:2,children:r}):null]});return _jsx(View,m?{pointerEvents:"auto",style:[h.overlay,{backgroundColor:x},c],children:A}:{style:[d?h.containedFill:h.inline,c],children:A})});Spinner.displayName="Spinner";const buildStyles=e=>StyleSheet.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},containedFill:{flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",minHeight:Math.round(1.5*sizeMap.lg)+2*e.spacing.xl},containedContent:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.spacing.lg},container:{alignItems:"center",justifyContent:"center"},overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,paddingHorizontal:e.spacing.xl,paddingVertical:e.spacing.xl,minWidth:140,...e.shadows.lg},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});export{Spinner};export default Spinner;
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{squircleHostRadius}from"../../utils/squircle.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:20,md:32,lg:48},CONTAINER_RATIO=1.5,DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,DOT_GROW_SCALE=1.4,DOT_PULSE_MIN_OPACITY=.4,Dot=({size:e,color:t,delay:i,duration:n,reduced:s})=>{const r=useTheme(),o=useRef(createAnimatedValue(0)).current;useEffect(()=>{const e=Animated.loop(Animated.sequence([Animated.delay(i),Animated.timing(o,{toValue:1,duration:n/2,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(o,{toValue:0,duration:n/2,easing:Easing.in(Easing.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[o,i,n]);const a=useMemo(()=>({grow:o.interpolate({inputRange:[0,1],outputRange:[1,1.4]}),fade:o.interpolate({inputRange:[0,1],outputRange:[.4,1]})}),[o]);return _jsx(Animated.View,{style:{width:e,height:e,borderRadius:r.radius.pill,...smoothCorners,backgroundColor:t,...s?{opacity:a.fade}:{transform:[{scale:a.grow}]}}})},Spinner=forwardRef((e,t)=>{const{size:i="md",color:n,message:s,overlay:r=!1,backdropColor:o,variant:a="circular",accessibilityLabel:l,style:c,testID:u}=e,d="contained"===a,m=r&&!d,g=useTheme(),f=usePresenceMotion(),p=f.duration("default"),h=useRef(createAnimatedValue(0)).current;useEffect(()=>{Animated.timing(h,{toValue:1,duration:p,easing:Easing.bezier(...g.motion.ease["in-out"]),useNativeDriver:!0}).start()},[h,g,p]);const y=useMemo(()=>buildStyles(g),[g]),b=sizeMap[i],j=n??g.colors.primary,x=o??g.colors.scrim,C=useMemo(()=>{if("contained"===a){const e=Math.round(1.5*b);return _jsx(View,{style:[y.container,{width:e,height:e,borderRadius:g.radius.pill,backgroundColor:blendOf(j,.14,g.colors.surface,g.colors["bg-subtle"])}],children:_jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})})}if("dots"===a){const e=Math.max(6,Math.round(b/4));return _jsx(View,{style:[y.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>_jsx(Dot,{size:e,color:j,delay:150*i,duration:600,reduced:f.reduced},i))})}return _jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})},[a,i,b,j,y.dotsRow,y.container,f.reduced,g.radius.pill,g.colors.surface,g.colors["bg-subtle"]]),S=l??s??"Loading",R=useRef(S);R.current=S,useEffect(()=>{d&&announce(R.current)},[d]);const w=useSquircle(m,g.radius.lg),_=w.active&&w.size?{borderRadius:squircleHostRadius(w.size.width,w.size.height,g.radius.lg)}:null;let A=y.inlineContent;m?A=y.overlayContent:d&&(A=y.containedContent);const v=_jsxs(Animated.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:d?"none":"polite",accessibilityLabel:S,accessibilityState:{busy:!0},"aria-busy":!0,testID:u,onLayout:w.onLayout,style:[A,_,{opacity:h}],children:[w.active&&w.size?_jsx(SquircleFill,{width:w.size.width,height:w.size.height,radius:g.radius.lg,fill:g.colors.surface}):null,C,s?_jsx(Text,{style:[y.message,{color:g.colors["text-body"],fontSize:g.text.base.size,fontWeight:g.weight.medium,marginTop:g.space.md}],numberOfLines:2,children:s}):null]});return _jsx(View,m?{pointerEvents:"auto",style:[y.overlay,{backgroundColor:x},c],children:v}:{style:[d?y.containedFill:y.inline,c],children:v})});Spinner.displayName="Spinner";const buildStyles=e=>StyleSheet.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},containedFill:{flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",minHeight:Math.round(1.5*sizeMap.lg)+2*e.space.xl},containedContent:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},container:{alignItems:"center",justifyContent:"center"},overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.surface,borderRadius:e.radius.lg,...smoothCorners,paddingHorizontal:e.space.xl,paddingVertical:e.space.xl,minWidth:140,...e.shadow.popover},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});export{Spinner};export default Spinner;

package/lib/module/components/StatTile/StatTile.js

@@ -1 +1 @@
-"use strict";import{formatPercent}from"@webority/mobile-core";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{AppIcon}from"../AppIcon/index.js";import{Card}from"../Card/index.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const isText=e=>"string"==typeof e||"number"==typeof e,TREND_ICON={up:"arrow-up",down:"arrow-down",flat:"minus"},TREND_WORD={up:"up",down:"down",flat:"no change"},TREND_SIGN={up:"+",down:"-",flat:""},percentText=e=>formatPercent(Math.abs(e),{scale:"percent",maximumFractionDigits:1}),trendFigure=e=>"number"==typeof e.value?`${TREND_SIGN[e.direction]}${percentText(e.value)}`:e.value,trendSpoken=e=>{const t=[TREND_WORD[e.direction]];return"flat"!==e.direction&&t.push("number"==typeof e.value?percentText(e.value):e.value),e.period&&t.push(e.period),t.join(" ")},StatTile=forwardRef((e,t)=>{const{label:r,value:n,icon:i,iconVariant:o,tone:s="primary",caption:l,trend:a,sparkline:c,onPress:d,loading:p=!1,accessibilityLabel:x,style:m,testID:u}=e,h=useTheme(),f=a?`, ${trendSpoken(a)}`:"",y=x??(isText(n)?`${r}, ${n}${f}`:void 0),T=!!a&&a.direction===(a.goodWhen??"up"),j=a&&"flat"!==a.direction?T?"success":"error":"secondary",w="secondary"===j?h.colors.text.secondary:h.colors.toneText[j];return _jsx(Card,p?{ref:t,variant:"outlined",style:m,testID:u,children:_jsxs(View,{style:[styles.row,{columnGap:h.spacing.md}],children:[void 0===i?null:_jsx(Skeleton,{shape:"circle",width:40,height:40}),_jsxs(View,{style:styles.text,children:[_jsx(Skeleton,{shape:"text",width:"50%",height:12}),_jsx(Skeleton,{shape:"text",width:"35%",height:24,style:{marginTop:h.spacing.xs}})]})]})}:{ref:t,variant:"outlined",onPress:d,accessibilityLabel:y,style:m,testID:u,children:_jsxs(View,{style:[styles.row,{columnGap:h.spacing.md}],children:[void 0===i?null:_jsx(IconBadge,{icon:i,iconVariant:o,tone:s}),_jsxs(View,{style:styles.text,children:[_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:1,children:r}),isText(n)?_jsx(Text,{variant:"h3",numberOfLines:1,children:n}):n,a?_jsxs(View,{style:[styles.trend,{columnGap:h.spacing.xxs}],testID:u?`${u}-trend`:void 0,children:[_jsx(AppIcon,{name:TREND_ICON[a.direction],size:"xs",color:w}),_jsxs(Text,{variant:"caption",color:j,numberOfLines:2,style:styles.text,children:[trendFigure(a),a.period?_jsx(Text,{variant:"caption",color:"tertiary",children:` ${a.period}`}):null]})]}):null,null==l||""===l?null:isText(l)?_jsx(Text,{variant:"caption",color:"tertiary",numberOfLines:1,children:l}):l,null==c?null:_jsx(View,{style:{marginTop:h.spacing.sm},children:c})]})]})})});StatTile.displayName="StatTile";const styles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},text:{flex:1,minWidth:0},trend:{flexDirection:"row",alignItems:"center"}});export{StatTile};export default StatTile;
+"use strict";import{formatPercent}from"@webority/mobile-core";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{AppIcon}from"../AppIcon/index.js";import{Card}from"../Card/index.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const isText=e=>"string"==typeof e||"number"==typeof e,TREND_ICON={up:"arrow-up",down:"arrow-down",flat:"minus"},TREND_WORD={up:"up",down:"down",flat:"no change"},TREND_SIGN={up:"+",down:"-",flat:""},percentText=e=>formatPercent(Math.abs(e),{scale:"percent",maximumFractionDigits:1}),trendFigure=e=>"number"==typeof e.value?`${TREND_SIGN[e.direction]}${percentText(e.value)}`:e.value,trendSpoken=e=>{const t=[TREND_WORD[e.direction]];return"flat"!==e.direction&&t.push("number"==typeof e.value?percentText(e.value):e.value),e.period&&t.push(e.period),t.join(" ")},StatTile=forwardRef((e,t)=>{const{label:r,value:n,icon:i,iconVariant:s,tone:o="primary",caption:l,trend:a,sparkline:c,onPress:d,loading:p=!1,accessibilityLabel:x,style:m,testID:u}=e,h=useTheme(),f=a?`, ${trendSpoken(a)}`:"",y=x??(isText(n)?`${r}, ${n}${f}`:void 0),j=!!a&&a.direction===(a.goodWhen??"up"),T=a&&"flat"!==a.direction?j?"success":"danger":"secondary",w="secondary"===T?h.colors["text-muted"]:h.colors[`${T}-text`];return _jsx(Card,p?{ref:t,variant:"outlined",style:m,testID:u,children:_jsxs(View,{style:[styles.row,{columnGap:h.space.md}],children:[void 0===i?null:_jsx(Skeleton,{shape:"circle",width:40,height:40}),_jsxs(View,{style:styles.text,children:[_jsx(Skeleton,{shape:"text",width:"50%",height:12}),_jsx(Skeleton,{shape:"text",width:"35%",height:24,style:{marginTop:h.space.xs}})]})]})}:{ref:t,variant:"outlined",onPress:d,accessibilityLabel:y,style:m,testID:u,children:_jsxs(View,{style:[styles.row,{columnGap:h.space.md}],children:[void 0===i?null:_jsx(IconBadge,{icon:i,iconVariant:s,tone:o}),_jsxs(View,{style:styles.text,children:[_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:1,children:r}),isText(n)?_jsx(Text,{variant:"h3",numberOfLines:1,children:n}):n,a?_jsxs(View,{style:[styles.trend,{columnGap:h.space.xxs}],testID:u?`${u}-trend`:void 0,children:[_jsx(AppIcon,{name:TREND_ICON[a.direction],size:"xs",color:w}),_jsxs(Text,{variant:"caption",color:T,numberOfLines:2,style:styles.text,children:[trendFigure(a),a.period?_jsx(Text,{variant:"caption",color:"tertiary",children:` ${a.period}`}):null]})]}):null,null==l||""===l?null:isText(l)?_jsx(Text,{variant:"caption",color:"tertiary",numberOfLines:1,children:l}):l,null==c?null:_jsx(View,{style:{marginTop:h.space.sm},children:c})]})]})})});StatTile.displayName="StatTile";const styles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},text:{flex:1,minWidth:0},trend:{flexDirection:"row",alignItems:"center"}});export{StatTile};export default StatTile;

package/lib/module/components/StatusBadge/StatusBadge.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{deriveToneInk}from"../../theme/toneInk.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingX:"sm",text:"xs",dot:5,gap:"xs"},md:{height:24,paddingX:"md",text:"sm",dot:6,gap:"xs"}},sizeFor=(e,t)=>{const o=sizeMap[t];return{height:o.height,paddingH:e.spacing[o.paddingX],fontSize:e.typography.fontSize[o.text],dot:o.dot,gap:e.spacing[o.gap]}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:o}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:o.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:o.warning};case"error":case"danger":return{base:e.colors.error,on:e.colors.onError,ink:o.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:o.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:o.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,o,r)=>{const s=isHex(r),{base:n,on:a,ink:i}=s?{base:r,on:e.colors.text.inverse,ink:deriveToneInk(r,[e.colors.background.primary,e.colors.background.secondary,e.colors.background.tertiary],e.mode)}:toneFor(e,t),l=!s&&"neutral"===t,d=l?e.colors.background.tertiary:tintOf(n,.14,e.colors.background.secondary),c=l?e.colors.border.primary:tintOf(n,.4,n);switch(o){case"solid":return{fill:n,border:n,text:a,dot:a};case"outline":return{fill:"transparent",border:l?c:n,text:i,dot:n};default:return{fill:d,border:c,text:i,dot:n}}},StatusBadge=forwardRef((e,t)=>{const{label:o,tone:r="neutral",variant:s="soft",size:n="md",dot:a=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:g,testID:u}=e,m=useTheme(),f=sizeFor(m,n),p=useMemo(()=>paletteFor(m,r,s,i),[m,r,s,i]);return l?_jsx(StatusBadgeSkeleton,{...e}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??o,testID:u,style:[styles.base,{minHeight:f.height,paddingHorizontal:f.paddingH,borderRadius:m.radius.pill,...smoothCorners,backgroundColor:p.fill,borderColor:p.border,borderWidth:1},c],children:[a?_jsx(View,{testID:"status-badge-dot",style:{width:f.dot,height:f.dot,borderRadius:f.dot/2,marginRight:f.gap,backgroundColor:p.dot}}):null,_jsx(Text,{style:[styles.label,{color:p.text,fontSize:f.fontSize,...fontFor(m,"semibold")},g],numberOfLines:1,maxFontSizeMultiplier:m.maxFontSizeMultiplier,children:o})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:o,style:r})=>{const s=useTheme(),n=sizeFor(s,t),a=Math.max(32,Math.min(120,6.5*(e??"").length))+2*n.paddingH+(o?n.dot+n.gap:0);return _jsx(Skeleton,{width:a,height:n.height,radius:n.height/2,style:[styles.skeleton,r]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{StatusBadge};export default StatusBadge;
+"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{deriveToneInk}from"../../theme/toneInk.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingX:"sm",text:"xs",dot:5,gap:"xs"},md:{height:24,paddingX:"md",text:"sm",dot:6,gap:"xs"}},sizeFor=(e,t)=>{const s=sizeMap[t];return{height:s.height,paddingH:e.space[s.paddingX],fontSize:e.text[s.text].size,dot:s.dot,gap:e.space[s.gap]}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{colors:s}=e;switch(t){case"success":return{base:s.success,on:s["on-success"],ink:s["success-text"]};case"warning":return{base:s.warning,on:s["on-warning"],ink:s["warning-text"]};case"danger":return{base:s.danger,on:s["on-danger"],ink:s["danger-text"]};case"info":return{base:s.info,on:s["on-info"],ink:s["info-text"]};case"primary":return{base:s.primary,on:s["on-primary"],ink:s["primary-text"]};default:return{base:s["text-muted"],on:s["on-neutral-strong"],ink:s["text-muted"]}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,s,o)=>{const r=isHex(o),{base:n,on:i,ink:a}=r?{base:o,on:e.colors["text-inverse"],ink:deriveToneInk(o,[e.colors.bg,e.colors["bg-subtle"],e.colors["bg-muted"]],e.mode)}:toneFor(e,t),l=!r&&"neutral"===t,d=l?e.colors["bg-muted"]:tintOf(n,.14,e.colors["bg-subtle"]),c=l?e.colors.border:tintOf(n,.4,n);switch(s){case"solid":return{fill:n,border:n,text:i,dot:i};case"outline":return{fill:"transparent",border:l?c:n,text:a,dot:n};default:return{fill:d,border:c,text:a,dot:n}}},StatusBadge=forwardRef((e,t)=>{const{label:s,tone:o="neutral",variant:r="soft",size:n="md",dot:i=!1,color:a,loading:l=!1,accessibilityLabel:d,style:c,textStyle:g,testID:u}=e,m=useTheme(),x=sizeFor(m,n),f=useMemo(()=>paletteFor(m,o,r,a),[m,o,r,a]);return l?_jsx(StatusBadgeSkeleton,{...e}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??s,testID:u,style:[styles.base,{minHeight:x.height,paddingHorizontal:x.paddingH,borderRadius:m.radius.pill,...smoothCorners,backgroundColor:f.fill,borderColor:f.border,borderWidth:1},c],children:[i?_jsx(View,{testID:"status-badge-dot",style:{width:x.dot,height:x.dot,borderRadius:x.dot/2,marginRight:x.gap,backgroundColor:f.dot}}):null,_jsx(Text,{style:[styles.label,{color:f.text,fontSize:x.fontSize,...fontFor(m,"semibold")},g],numberOfLines:1,maxFontSizeMultiplier:m.settings.maxFontSizeMultiplier,children:s})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:s,style:o})=>{const r=useTheme(),n=sizeFor(r,t),i=Math.max(32,Math.min(120,6.5*(e??"").length))+2*n.paddingH+(s?n.dot+n.gap:0);return _jsx(Skeleton,{width:i,height:n.height,radius:n.height/2,style:[styles.skeleton,o]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{StatusBadge};export default StatusBadge;