@webority/mobile-ui 0.18.1 → 0.19.1

package/lib/module/components/Switch/Switch.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2}},toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Switch=forwardRef((e,t)=>{const{value:i,defaultValue:s,onChange:r,disabled:a=!1,size:o="md",tone:n="primary",label:l,description:c,error:d,labelLines:u,layout:h="inline",accessibilityLabel:m,haptic:p="selection",bounce:b=!1,style:f,containerStyle:g,trackStyle:y,thumbStyle:x,testID:w,...S}=e,[C,j]=useControllableState({value:i,defaultValue:s??!1,onChange:r}),k=useTheme(),R={...sizeMap[o],...k.components.switch?.[o]??{}},T=k.components.switch?.thumbColor??"#FFFFFF",v=useMemo(()=>buildStyles(k),[k]),A="dark"===k.mode?k.colors.secondary:k.colors.surface.disabled,V=toneColor(k,n),F=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(F,{toValue:C?1:0,damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,F,k.motion.spring.snappy]);const H=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(H,{toValue:C?1:0,duration:k.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,H,k.motion.duration.fast]);const D=R.padding,_=R.trackWidth-R.thumbSize-R.padding,z=F.interpolate({inputRange:[0,1],outputRange:[D,_]}),E=H.interpolate({inputRange:[0,1],outputRange:[A,V]}),L=useRef(createAnimatedValue(1)).current,P=useRef(!0);useEffect(()=>{if(!b)return;if(P.current)return void(P.current=!1);const e=Animated.sequence([Animated.spring(L,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(L,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,b,L]);const handlePress=e=>{a||(!1!==p&&triggerHaptic(p),j(!C),S.onPressOut?.(e))},W=m??fieldTextAsString(l),I=hasFieldText(l)||hasChoiceDetail(c,d),N=(!0===d||hasFieldText(d))&&!C&&!a,M="row"===h&&I,B=_jsxs(Animated.View,{style:[v.track,{width:R.trackWidth,height:R.trackHeight,borderRadius:R.trackHeight/2,...smoothCorners,backgroundColor:E},y],children:[N?_jsx(View,{pointerEvents:"none",style:[v.errorRing,{borderRadius:R.trackHeight/2,...smoothCorners,borderWidth:k.colors.border.width,borderColor:k.colors.field.borderError}]}):null,_jsx(Animated.View,{style:[v.thumb,k.shadows.sm,{backgroundColor:T,width:R.thumbSize,height:R.thumbSize,borderRadius:R.thumbSize/2,...smoothCorners,transform:[{translateX:z},{scale:L}]},x]})]});if(M)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:W,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:w,...S,style:({pressed:e})=>[v.row,v.spreadRow,hasChoiceDetail(c,d)?v.rowTop:null,{opacity:a?.55:e?.9:1},g,f],children:[_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:v.spreadText}),B]});const q=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:W,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:w,hitSlop:8,...S,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},I?null:f],children:B});return I?_jsxs(View,{style:[v.row,hasChoiceDetail(c,d)?v.rowTop:null,g,f],children:[q,_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:v.text})]}):g?_jsx(View,{style:g,children:q}):q});Switch.displayName="Switch";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},track:{justifyContent:"center"},thumb:{position:"absolute",top:2},errorRing:{...StyleSheet.absoluteFill},rowTop:{alignItems:"flex-start"},text:{marginLeft:10},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:12}});export{Switch};export default Switch;
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveSwitchSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Switch=forwardRef((e,t)=>{const{value:s,defaultValue:i,onChange:r,disabled:a=!1,size:o="md",tone:n="primary",label:l,description:c,error:d,labelLines:u,layout:m="inline",accessibilityLabel:p,haptic:h="selection",bounce:f=!1,style:b,containerStyle:g,trackStyle:y,thumbStyle:w,testID:x,...S}=e,[C,j]=useControllableState({value:s,defaultValue:i??!1,onChange:r}),R=useTheme(),v=useMemo(()=>resolveSwitchSize(R,o),[R,o]),T=R.components.switch?.thumbColor??"#FFFFFF",A=useMemo(()=>buildStyles(R),[R]),V="dark"===R.mode?R.colors.secondary:R.colors.surface.disabled,k=toneColor(R,n),F=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(F,{toValue:C?1:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,F,R.motion.spring.snappy]);const D=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(D,{toValue:C?1:0,duration:R.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,D,R.motion.duration.fast]);const _=v.padding,E=v.trackWidth-v.thumbSize-v.padding,L=F.interpolate({inputRange:[0,1],outputRange:[_,E]}),H=D.interpolate({inputRange:[0,1],outputRange:[V,k]}),z=useRef(createAnimatedValue(1)).current,P=useRef(!0);useEffect(()=>{if(!f)return;if(P.current)return void(P.current=!1);const e=Animated.sequence([Animated.spring(z,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(z,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,f,z]);const handlePress=e=>{a||(!1!==h&&triggerHaptic(h),j(!C),S.onPressOut?.(e))},I=p??fieldTextAsString(l),N=hasFieldText(l)||hasChoiceDetail(c,d),B=(!0===d||hasFieldText(d))&&!C&&!a,M="row"===m&&N,W=_jsxs(Animated.View,{style:[A.track,{width:v.trackWidth,height:v.trackHeight,borderRadius:R.radius.pill,...smoothCorners,backgroundColor:H},y],children:[B?_jsx(View,{pointerEvents:"none",style:[A.errorRing,{borderRadius:R.radius.pill,...smoothCorners,borderWidth:R.colors.border.width,borderColor:R.colors.field.borderError}]}):null,_jsx(Animated.View,{style:[A.thumb,R.shadows.sm,{backgroundColor:T,width:v.thumbSize,height:v.thumbSize,borderRadius:R.radius.pill,...smoothCorners,transform:[{translateX:L},{scale:z}]},w]})]});if(M)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:I,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,...S,style:({pressed:e})=>[A.row,A.spreadRow,hasChoiceDetail(c,d)?A.rowTop:null,{opacity:a?.55:e?.9:1},g,b],children:[_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.spreadText}),W]});const q=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:I,accessibilityHint:S.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:8,...S,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},N?null:b],children:W});return N?_jsxs(View,{style:[A.row,hasChoiceDetail(c,d)?A.rowTop:null,g,b],children:[q,_jsx(ChoiceText,{label:l,description:c,error:d,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:A.text})]}):g?_jsx(View,{style:g,children:q}):q});Switch.displayName="Switch";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},track:{justifyContent:"center"},thumb:{position:"absolute",top:2},errorRing:{...StyleSheet.absoluteFill},rowTop:{alignItems:"flex-start"},text:{marginLeft:e.spacing.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.spacing.md}});export{Switch};export default Switch;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/module/index.js

@@ -1 +1 @@
-"use strict";export*from"./components/index.js";export{APP_ICON_SIZES,AppIcon,CURATED_ICON_NAMES,defaultIcons,ICON_NAMES,ICONSAX_SUFFIX,renderSlotIcon}from"./components/AppIcon/index.js";export{deletePath,Form,getPath,HookFormField,isFieldFilled,rules,setPath,useField,useFieldArray,useForm,useFormCompletion,useFormContext,useHookFormField,useOptionalFormContext}from"./form/index.js";export{FLICK_TOLERANCE,PRESENCE_REDUCE_MOTION,PRESS_ANIMATION_PRESETS,useControllableState,useDebounce,useFieldChain,useFlickGuard,usePresenceMotion,usePressAnimation,useReducedMotion,useRefreshControl,useScrollDirection,useToggle}from"./hooks/index.js";export{initUI}from"./initUI.js";export{NetworkStatusBanner}from"./network/index.js";export{darkTheme,getColorMode,getTheme,lightTheme,mergeTheme,resetTheme,setColorMode,setTheme,subscribeTheme,ThemeProvider,useTheme,useThemeMode}from"./theme/index.js";export{announce,Breakpoints,configureFeedback,feedback,hapticForIntent,isFeedbackEnabled,isScreenSize,isTablet,Margin,Padding,Responsive,ScreenDimensions,Spacing,SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,setHapticImplementation,shadowStyle,smoothCorners,squircleApplies,squircleHostRadius,squirclePath,triggerHaptic,useScreenDimensions,warnUnknownProps}from"./utils/index.js";
+"use strict";export*from"./components/index.js";export{APP_ICON_SIZES,AppIcon,CURATED_ICON_NAMES,defaultIcons,ICON_NAMES,ICONSAX_SUFFIX,renderSlotIcon}from"./components/AppIcon/index.js";export{deletePath,Form,getPath,HookFormField,isFieldFilled,rules,setPath,useField,useFieldArray,useForm,useFormCompletion,useFormContext,useHookFormField,useOptionalFormContext}from"./form/index.js";export{FLICK_TOLERANCE,PRESENCE_REDUCE_MOTION,PRESS_ANIMATION_PRESETS,useControllableState,useDebounce,useFieldChain,useFlickGuard,usePresenceMotion,usePressAnimation,useReducedMotion,useRefreshControl,useScrollDirection,useToggle}from"./hooks/index.js";export{initUI}from"./initUI.js";export{NetworkStatusBanner}from"./network/index.js";export{darkTheme,fontSizeOf,getColorMode,getTheme,lightTheme,mergeTheme,radiusOf,resetTheme,resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,setColorMode,setTheme,spaceOf,subscribeTheme,ThemeProvider,useTheme,useThemeMode}from"./theme/index.js";export{announce,Breakpoints,configureFeedback,feedback,hapticForIntent,isFeedbackEnabled,isScreenSize,isTablet,Responsive,ScreenDimensions,SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,setHapticImplementation,shadowStyle,smoothCorners,squircleApplies,squircleHostRadius,squirclePath,triggerHaptic,useScreenDimensions,warnUnknownProps}from"./utils/index.js";

package/lib/module/network/NetworkStatusBanner.js

@@ -1 +1 @@
-"use strict";import{useNetworkStatus}from"@webority/mobile-core";import{useEffect,useMemo,useRef,useState}from"react";import{Animated,StyleSheet,Text}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../hooks/usePresenceMotion.js";import{fontFor,useTheme}from"../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const NetworkStatusBanner=({message:e="You are offline. Some features may be unavailable.",position:t="top",style:o,disabled:n=!1,safeArea:r=!0})=>{const a=useTheme(),i=usePresenceMotion(),s=useSafeAreaInsets(),u=r?"top"===t?s.top:s.bottom:0,[l,m]=useState(0),c=l>0?l:56+u,{isConnected:p,isInternetReachable:d}=useNetworkStatus(),f=!(n||p&&!1!==d),b=useRef(new Animated.Value(0)).current,S=useRef(new Animated.Value(0)).current,g=i.duration("normal");useEffect(()=>{Animated.parallel([Animated.timing(b,{toValue:f?1:0,duration:a.motion.duration.normal,useNativeDriver:!0}),Animated.timing(S,{toValue:f?1:0,duration:g,useNativeDriver:!0})]).start()},[f,b,S,a.motion.duration.normal,g]);const y=useMemo(()=>buildStyles(),[]),h=b.interpolate({inputRange:[0,1],outputRange:i.range("top"===t?-c:c,0)});return _jsx(Animated.View,{pointerEvents:f?"auto":"none",accessibilityRole:"alert",accessibilityLiveRegion:f?"polite":"none",onLayout:e=>m(e.nativeEvent.layout.height),style:[y.container,"top"===t?y.top:y.bottom,"top"===t?{paddingTop:10+u}:{paddingBottom:10+u},{backgroundColor:a.colors.error,opacity:S,transform:[{translateY:h}]},o],children:_jsx(Text,{style:{color:a.colors.onError,fontSize:a.typography.fontSize.sm,...fontFor(a,"semibold"),textAlign:"center"},numberOfLines:2,children:e})})};const buildStyles=()=>StyleSheet.create({container:{position:"absolute",left:0,right:0,paddingVertical:10,paddingHorizontal:16,zIndex:1e3,elevation:8},top:{top:0},bottom:{bottom:0}});export default NetworkStatusBanner;
+"use strict";import{useNetworkStatus}from"@webority/mobile-core";import{useEffect,useMemo,useRef,useState}from"react";import{Animated,StyleSheet,Text}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../hooks/usePresenceMotion.js";import{fontFor,useTheme}from"../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const NetworkStatusBanner=({message:e="You are offline. Some features may be unavailable.",position:t="top",style:o,disabled:n=!1,safeArea:a=!0})=>{const r=useTheme(),i=usePresenceMotion(),s=useSafeAreaInsets(),u=a?"top"===t?s.top:s.bottom:0,[m,l]=useState(0),c=m>0?m:56+u,{isConnected:p,isInternetReachable:d}=useNetworkStatus(),f=!(n||p&&!1!==d),g=useRef(new Animated.Value(0)).current,b=useRef(new Animated.Value(0)).current,S=i.duration("normal");useEffect(()=>{Animated.parallel([Animated.timing(g,{toValue:f?1:0,duration:r.motion.duration.normal,useNativeDriver:!0}),Animated.timing(b,{toValue:f?1:0,duration:S,useNativeDriver:!0})]).start()},[f,g,b,r.motion.duration.normal,S]);const y=useMemo(()=>buildStyles(r),[r]),h=g.interpolate({inputRange:[0,1],outputRange:i.range("top"===t?-c:c,0)});return _jsx(Animated.View,{pointerEvents:f?"auto":"none",accessibilityRole:"alert",accessibilityLiveRegion:f?"polite":"none",onLayout:e=>l(e.nativeEvent.layout.height),style:[y.container,"top"===t?y.top:y.bottom,"top"===t?{paddingTop:r.spacing.sm+u}:{paddingBottom:r.spacing.sm+u},{backgroundColor:r.colors.error,opacity:b,transform:[{translateY:h}]},o],children:_jsx(Text,{style:{color:r.colors.onError,fontSize:r.typography.fontSize.sm,...fontFor(r,"semibold"),textAlign:"center"},numberOfLines:2,children:e})})};const buildStyles=e=>StyleSheet.create({container:{position:"absolute",left:0,right:0,paddingVertical:e.spacing.sm,paddingHorizontal:e.spacing.lg,zIndex:1e3,elevation:8},top:{top:0},bottom:{bottom:0}});export default NetworkStatusBanner;

package/lib/module/theme/componentSizes.js

@@ -0,0 +1 @@
+"use strict";import{fontSizeOf,radiusOf,spaceOf}from"./scale.js";const resolveSize=(e,t,o,s)=>{const n={};for(const i of Object.keys(o)){const p=t[i],a=`${s}.${i}`;switch(o[i]){case"space":n[i]=spaceOf(e,p,a);break;case"text":n[i]=fontSizeOf(e,p,a);break;case"radius":n[i]=radiusOf(e,p,a);break;case"px":if("number"!=typeof p)throw new Error(`${a} is ${JSON.stringify(p)}; it takes a number of pixels.`);n[i]=p}}return n},BUTTON={paddingX:"space",paddingY:"space",minHeight:"px",text:"text",radius:"radius",icon:"px",badgeIcon:"px"},FIELD={paddingX:"space",paddingY:"space",minHeight:"px",text:"text",radius:"radius",icon:"px",labelText:"text",labelGap:"space",messageText:"text",messageGap:"space"},EMPTY_STATE={icon:"px",titleText:"text",descriptionText:"text",paddingY:"space",titleGap:"space",descriptionGap:"space"},LIST_ITEM={paddingY:"space",titleText:"text",subtitleText:"text",minHeight:"px"},BADGE={text:"text",minWidth:"px",height:"px",paddingX:"space",dotSize:"px"},CHIP={paddingX:"space",paddingY:"space",text:"text",minHeight:"px",closeSize:"px",closeText:"text",gap:"space",icon:"px"},CHECKBOX={boxSize:"px"},RADIO={outer:"px",inner:"px"},SWITCH={trackWidth:"px",trackHeight:"px",thumbSize:"px",padding:"px"},OTP_INPUT={cell:"px",text:"text",radius:"radius",gap:"space"},SEGMENTED_CONTROL={height:"px",text:"text",paddingX:"space",icon:"px"},TABS={text:"text",paddingY:"space",paddingX:"space",scrollablePaddingX:"space",icon:"px"},SLIDER={trackHeight:"px",thumbDiameter:"px"},FAB={diameter:"px",icon:"px",text:"text",labelPaddingX:"space"};export const resolveButtonSize=(e,t)=>resolveSize(e,e.components.button[t],BUTTON,`components.button.${t}`);export const resolveFieldSize=(e,t)=>resolveSize(e,e.components.field[t],FIELD,`components.field.${t}`);export const resolveEmptyStateSize=(e,t)=>resolveSize(e,e.components.emptyState[t],EMPTY_STATE,`components.emptyState.${t}`);export const resolveListItemSize=(e,t)=>resolveSize(e,e.components.listItem[t],LIST_ITEM,`components.listItem.${t}`);export const resolveBadgeSize=(e,t)=>resolveSize(e,e.components.badge[t],BADGE,`components.badge.${t}`);export const resolveChipSize=(e,t)=>resolveSize(e,e.components.chip[t],CHIP,`components.chip.${t}`);export const resolveCheckboxSize=(e,t)=>resolveSize(e,e.components.checkbox[t],CHECKBOX,`components.checkbox.${t}`);export const resolveRadioSize=(e,t)=>resolveSize(e,e.components.radio[t],RADIO,`components.radio.${t}`);export const resolveSwitchSize=(e,t)=>resolveSize(e,e.components.switch[t],SWITCH,`components.switch.${t}`);export const resolveOtpInputSize=(e,t)=>resolveSize(e,e.components.otpInput[t],OTP_INPUT,`components.otpInput.${t}`);export const resolveSegmentedControlSize=(e,t)=>resolveSize(e,e.components.segmentedControl[t],SEGMENTED_CONTROL,`components.segmentedControl.${t}`);export const resolveTabsSize=(e,t)=>resolveSize(e,e.components.tabs[t],TABS,`components.tabs.${t}`);export const resolveSliderSize=(e,t)=>resolveSize(e,e.components.slider[t],SLIDER,`components.slider.${t}`);export const resolveFloatingActionButtonSize=(e,t)=>resolveSize(e,e.components.floatingActionButton[t],FAB,`components.floatingActionButton.${t}`);const THREE=["sm","md","lg"],TWO=["sm","md"],FIVE=["xs","sm","md","lg","xl"];export const validateComponentTokens=e=>{const t=e.components;for(const t of FIVE)resolveButtonSize(e,t);for(const o of THREE)resolveFieldSize(e,o),resolveEmptyStateSize(e,o),resolveListItemSize(e,o),resolveCheckboxSize(e,o),resolveRadioSize(e,o),resolveSwitchSize(e,o),resolveOtpInputSize(e,o),resolveSegmentedControlSize(e,o),resolveTabsSize(e,o),resolveSliderSize(e,o),resolveFloatingActionButtonSize(e,o),radiusOf(e,t.searchBar[o].radius,`components.searchBar.${o}.radius`);for(const t of TWO)resolveBadgeSize(e,t),resolveChipSize(e,t);spaceOf(e,t.checkbox.labelGap,"components.checkbox.labelGap"),spaceOf(e,t.radio.labelGap,"components.radio.labelGap"),spaceOf(e,t.segmentedControl.trackPadding,"components.segmentedControl.trackPadding"),spaceOf(e,t.segmentedControl.pillInset,"components.segmentedControl.pillInset"),spaceOf(e,t.tabs.iconGap,"components.tabs.iconGap"),spaceOf(e,t.tabs.trackPadding,"components.tabs.trackPadding"),spaceOf(e,t.tabs.pillInset,"components.tabs.pillInset"),spaceOf(e,t.tabs.badgeGap,"components.tabs.badgeGap"),spaceOf(e,t.floatingActionButton.edgeOffset,"components.floatingActionButton.edgeOffset"),spaceOf(e,t.floatingActionButton.bottomOffset,"components.floatingActionButton.bottomOffset"),spaceOf(e,t.floatingActionButton.secondaryGap,"components.floatingActionButton.secondaryGap"),fontSizeOf(e,t.toast.iconGlyphText,"components.toast.iconGlyphText"),void 0!==t.segmentedControl.radius&&radiusOf(e,t.segmentedControl.radius,"components.segmentedControl.radius"),void 0!==t.tabs.radius&&radiusOf(e,t.tabs.radius,"components.tabs.radius")};

package/lib/module/theme/componentTokens.js

@@ -0,0 +1 @@
+"use strict";export{};

package/lib/module/theme/index.js

@@ -1 +1 @@
-"use strict";import{mergeTheme}from"./merge.js";import{darkTheme,lightTheme}from"./tokens.js";let lightOverridesGlobal,darkOverridesGlobal,currentMode="light",currentTheme=lightTheme;const subscribers=new Set,recompute=()=>{const e="dark"===currentMode?darkTheme:lightTheme,r="dark"===currentMode?darkOverridesGlobal:lightOverridesGlobal;currentTheme=r?mergeTheme(e,r):e,subscribers.forEach(e=>e())};export const setTheme=(e,r)=>{r&&(currentMode=r),"dark"===currentMode?darkOverridesGlobal=e:lightOverridesGlobal=e,recompute()};export const setColorMode=e=>{currentMode=e,recompute()};export const getColorMode=()=>currentMode;export const getTheme=()=>currentTheme;export const resetTheme=()=>{currentMode="light",lightOverridesGlobal=void 0,darkOverridesGlobal=void 0,recompute()};export const subscribeTheme=e=>(subscribers.add(e),()=>{subscribers.delete(e)});export{createAnimatedValue,setNativeValue}from"./animatedValue.js";export{Gradient,gradientAngle,toBackgroundImage}from"./Gradient.js";export{mergeTheme}from"./merge.js";export{ThemeProvider,useTheme,useThemeMode}from"./ThemeContext.js";export{fontFor}from"./textStyle.js";export{darkTheme,lightTheme}from"./tokens.js";
+"use strict";import{mergeTheme}from"./merge.js";import{darkTheme,lightTheme}from"./tokens.js";let lightOverridesGlobal,darkOverridesGlobal,currentMode="light",currentTheme=lightTheme;const subscribers=new Set,recompute=()=>{const e="dark"===currentMode?darkTheme:lightTheme,r="dark"===currentMode?darkOverridesGlobal:lightOverridesGlobal;currentTheme=r?mergeTheme(e,r):e,subscribers.forEach(e=>e())};export const setTheme=(e,r)=>{r&&(currentMode=r),"dark"===currentMode?darkOverridesGlobal=e:lightOverridesGlobal=e,recompute()};export const setColorMode=e=>{currentMode=e,recompute()};export const getColorMode=()=>currentMode;export const getTheme=()=>currentTheme;export const resetTheme=()=>{currentMode="light",lightOverridesGlobal=void 0,darkOverridesGlobal=void 0,recompute()};export const subscribeTheme=e=>(subscribers.add(e),()=>{subscribers.delete(e)});export{createAnimatedValue,setNativeValue}from"./animatedValue.js";export{resolveBadgeSize,resolveButtonSize,resolveCheckboxSize,resolveChipSize,resolveEmptyStateSize,resolveFieldSize,resolveFloatingActionButtonSize,resolveListItemSize,resolveOtpInputSize,resolveRadioSize,resolveSegmentedControlSize,resolveSliderSize,resolveSwitchSize,resolveTabsSize,validateComponentTokens}from"./componentSizes.js";export{Gradient,gradientAngle,toBackgroundImage}from"./Gradient.js";export{mergeTheme}from"./merge.js";export{fontSizeOf,radiusOf,spaceOf}from"./scale.js";export{ThemeProvider,useTheme,useThemeMode}from"./ThemeContext.js";export{fontFor}from"./textStyle.js";export{darkTheme,lightTheme}from"./tokens.js";

package/lib/module/theme/merge.js

@@ -1 +1 @@
-"use strict";import{deriveSolidFill,deriveStateFills,deriveToneInk}from"./toneInk.js";const isPlainObject=r=>"object"==typeof r&&null!==r&&!Array.isArray(r),deepMerge=(r,e)=>{if(!isPlainObject(r)||!isPlainObject(e))return void 0!==e?e:r;const o={...r};for(const s of Object.keys(e)){const t=e[s],i=r[s];isPlainObject(t)&&isPlainObject(i)?o[s]=deepMerge(i,t):void 0!==t&&(o[s]=t)}return o},TONES=["primary","success","warning","error","info"],ON_INK={primary:"onPrimary",success:"onSuccess",warning:"onWarning",error:"onError",info:"onInfo"},withDerivedTones=(r,e,o)=>{const s=o?.colors;if(!s||!r?.colors?.toneText)return r;const{background:t}=r.colors,i=[t.primary,t.secondary,t.tertiary],n={},c={};let l={};for(const o of TONES){const t="string"==typeof s[o];let a=r.colors[o];if(t||"string"==typeof s[ON_INK[o]]){const e=deriveSolidFill(a,r.colors[ON_INK[o]]);e!==a&&(n[o]=e,a=e)}if(t&&"string"!=typeof s.toneText?.[o]&&(c[o]=deriveToneInk(a,i,e.mode)),"primary"===o&&(t||void 0!==n.primary)){const o=deriveStateFills(a,r.colors.onPrimary,{fill:e.colors.primary,hover:e.colors.primaryHover,pressed:e.colors.primaryPressed});l={..."string"==typeof s.primaryHover?{}:{primaryHover:o.hover},..."string"==typeof s.primaryPressed?{}:{primaryPressed:o.pressed}}}}return 0===Object.keys(n).length&&0===Object.keys(c).length&&0===Object.keys(l).length?r:{...r,colors:{...r.colors,...n,...l,toneText:{...r.colors.toneText,...c}}}};export const mergeTheme=(r,e)=>{const o=deepMerge(r,e);return withDerivedTones(o,r,e)};
+"use strict";import{validateComponentTokens}from"./componentSizes.js";import{RETIRED_THEME_KEYS,RETIRED_THEME_KEYS_RELEASE}from"./retiredThemeKeys.js";import{deriveSolidFill,deriveStateFills,deriveToneInk}from"./toneInk.js";const isPlainObject=e=>"object"==typeof e&&null!==e&&!Array.isArray(e),SIZES=["xs","sm","md","lg","xl"],walkRetired=(e,r,o)=>{if(!isPlainObject(e)||0===r.length)return[];const[s,...t]=r,i="<size>"===s?Object.keys(e).filter(e=>SIZES.includes(e)):[s],n=[];for(const r of i){if(!Object.hasOwn(e,r))continue;const s=[...o,r],i=e[r];0===t.length?void 0!==i&&n.push(s):n.push(...walkRetired(i,t,s))}return n},refuseRetiredKeys=e=>{const r=[];for(const o of RETIRED_THEME_KEYS)for(const s of walkRetired(e,o.path.split("."),[])){const e=s.join("."),t=s.slice(0,-1).join(".");if(null===o.to)r.push(`- ${e}: removed; ${o.hint}`);else if(o.scale){const s="fontSize"===o.scale?"base":"md";r.push(`- ${e}: now ${t}.${o.to}, a ${o.scale} scale name such as '${s}'`)}else r.push(`- ${e}: now ${t}.${o.to}`)}if(0!==r.length)throw new Error([`Theme overrides use keys mobile-ui ${RETIRED_THEME_KEYS_RELEASE} retired. Run \`mobile-tools codemod theme-keys\` in the app folder, then fix what it lists:`,...r].join("\n"))},deepMerge=(e,r)=>{if(!isPlainObject(e)||!isPlainObject(r))return void 0!==r?r:e;const o={...e};for(const s of Object.keys(r)){const t=r[s],i=e[s];isPlainObject(t)&&isPlainObject(i)?o[s]=deepMerge(i,t):void 0!==t&&(o[s]=t)}return o},TONES=["primary","success","warning","error","info"],ON_INK={primary:"onPrimary",success:"onSuccess",warning:"onWarning",error:"onError",info:"onInfo"},withDerivedTones=(e,r,o)=>{const s=o?.colors;if(!s||!e?.colors?.toneText)return e;const{background:t}=e.colors,i=[t.primary,t.secondary,t.tertiary],n={},c={};let l={};for(const o of TONES){const t="string"==typeof s[o];let a=e.colors[o];if(t||"string"==typeof s[ON_INK[o]]){const r=deriveSolidFill(a,e.colors[ON_INK[o]]);r!==a&&(n[o]=r,a=r)}if(t&&"string"!=typeof s.toneText?.[o]&&(c[o]=deriveToneInk(a,i,r.mode)),"primary"===o&&(t||void 0!==n.primary)){const o=deriveStateFills(a,e.colors.onPrimary,{fill:r.colors.primary,hover:r.colors.primaryHover,pressed:r.colors.primaryPressed});l={..."string"==typeof s.primaryHover?{}:{primaryHover:o.hover},..."string"==typeof s.primaryPressed?{}:{primaryPressed:o.pressed}}}}return 0===Object.keys(n).length&&0===Object.keys(c).length&&0===Object.keys(l).length?e:{...e,colors:{...e.colors,...n,...l,toneText:{...e.colors.toneText,...c}}}};export const mergeTheme=(e,r)=>{refuseRetiredKeys(r);const o=withDerivedTones(deepMerge(e,r),e,r);return validateComponentTokens(o),o};

package/lib/module/theme/retiredThemeKeys.js

@@ -0,0 +1 @@
+"use strict";export const RETIRED_THEME_KEYS_RELEASE="0.19.0";const sized=(e,n)=>Object.entries(n).map(([n,[i,o]])=>({path:`components.${e}.<size>.${n}`,to:i,...o?{scale:o}:{}})),gone=(e,n)=>({path:e,to:null,hint:n}),renamed=(e,n,i)=>({path:e,to:n,...i?{scale:i}:{}});export const RETIRED_THEME_KEYS=[...sized("button",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0]}),...sized("field",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],borderRadius:["radius","radius"],iconSize:["icon",void 0],labelFontSize:["labelText","fontSize"],messageFontSize:["messageText","fontSize"]}),...sized("badge",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"]}),...sized("chip",{paddingHorizontal:["paddingX","spacing"],paddingVertical:["paddingY","spacing"],fontSize:["text","fontSize"],closeFontSize:["closeText","fontSize"],iconSize:["icon",void 0]}),...sized("emptyState",{iconSize:["icon",void 0],titleFontSize:["titleText","fontSize"],descriptionFontSize:["descriptionText","fontSize"],paddingVertical:["paddingY","spacing"]}),...sized("listItem",{paddingVertical:["paddingY","spacing"],titleFontSize:["titleText","fontSize"],subtitleFontSize:["subtitleText","fontSize"]}),...sized("otpInput",{fontSize:["text","fontSize"],borderRadius:["radius","radius"]}),...sized("segmentedControl",{fontSize:["text","fontSize"],paddingHorizontal:["paddingX","spacing"],iconSize:["icon",void 0]}),...sized("tabs",{fontSize:["text","fontSize"],paddingVertical:["paddingY","spacing"],paddingHorizontal:["paddingX","spacing"],scrollablePaddingHorizontal:["scrollablePaddingX","spacing"],iconSize:["icon",void 0]}),renamed("components.searchBar.<size>.borderRadius","radius","radius"),gone("components.searchBar.<size>.minHeight","set components.field.<size>.minHeight"),gone("components.searchBar.<size>.paddingHorizontal","set components.field.<size>.paddingX"),gone("components.searchBar.<size>.fontSize","set components.field.<size>.text"),gone("components.searchBar.<size>.iconSize","set components.field.<size>.icon"),gone("components.input.<size>","set components.field.<size>"),gone("components.input.borderRadius","set components.field.<size>.radius"),gone("components.select.borderRadius","set components.field.<size>.radius"),gone("components.phoneNumberInput","set components.field.<size>"),renamed("components.accordion.cardPaddingVertical","cardPaddingY","spacing"),renamed("components.appBar.badgePaddingHorizontal","badgePaddingX","spacing"),renamed("components.appBar.badgeFontSize","badgeText","fontSize"),renamed("components.avatar.fontSize","text","fontSize"),renamed("components.banner.iconGlyphFontSize","iconGlyphText","fontSize"),renamed("components.banner.closeGlyphFontSize","closeGlyphText","fontSize"),renamed("components.banner.actionButtonPaddingHorizontal","actionButtonPaddingX","spacing"),renamed("components.banner.actionButtonPaddingVertical","actionButtonPaddingY","spacing"),gone("components.banner.iconCircleRadius","the icon circle is always round"),gone("components.banner.closeButtonRadius","the close button is always round"),renamed("components.bottomNavigation.borderRadius","radius","radius"),renamed("components.choiceGroup.borderRadius","radius","radius"),renamed("components.datePicker.navTextFontSize","navText","fontSize"),renamed("components.datePicker.dayInnerBorderRadius","dayInnerRadius","radius"),renamed("components.datePicker.yearInnerBorderRadius","yearInnerRadius","radius"),renamed("components.dateRangePicker.navTextFontSize","navText","fontSize"),gone("components.dialog.iconWrapperBorderRadius","the icon disc is always round"),renamed("components.filePicker.borderRadius","radius","radius"),renamed("components.tabs.tabIconSpacing","iconGap","spacing"),gone("components.tabs.tabPaddingHorizontal","set components.tabs.<size>.paddingX"),gone("components.tabs.tabPaddingVertical","set components.tabs.<size>.paddingY"),gone("components.tabs.tabIconSize","set components.tabs.<size>.icon"),renamed("components.toast.iconGlyphFontSize","iconGlyphText","fontSize"),gone("components.toast.iconCircleBorderRadius","the icon circle is always round"),renamed("radius.full","pill"),gone("radius.xs","use sm, or none"),gone("radius.2xl","use xl")];

package/lib/module/theme/scale.js

@@ -0,0 +1 @@
+"use strict";const resolve=(e,o,s,r)=>{const t=e[s];if("number"!=typeof t)throw new Error(`${r} is ${JSON.stringify(s)}, which is not a ${o} name. Use one of: ${Object.keys(e).join(", ")}.`);return t};export const spaceOf=(e,o,s)=>resolve(e.spacing,"spacing",o,s);export const fontSizeOf=(e,o,s)=>resolve(e.typography.fontSize,"text size",o,s);export const radiusOf=(e,o,s)=>resolve(e.radius,"corner",o,s);

package/lib/module/theme/tokens.js

@@ -1 +1 @@
-"use strict";import{SQUIRCLE_SMOOTHING}from"../utils/squircle.js";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,xs:4,sm:6,md:10,lg:14,xl:20,"2xl":28,full:9999},FIELD_RADIUS=10,fieldSizes={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},components={button:{xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10},md:{paddingHorizontal:16,paddingVertical:9,minHeight:44,fontSize:16,borderRadius:12},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16}},input:{sm:{...fieldSizes.sm,multilineMinHeight:72},md:{...fieldSizes.md,multilineMinHeight:92},lg:{...fieldSizes.lg,multilineMinHeight:110}},searchBar:{sm:{borderRadius:radius.full},md:{borderRadius:radius.full},lg:{borderRadius:radius.full}},emptyState:{sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg",titleGap:"md",descriptionGap:"xs"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl",titleGap:"md",descriptionGap:"xs"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl",titleGap:"md",descriptionGap:"xs"}},field:{defaultVariant:"outlined",sm:fieldSizes.sm,md:fieldSizes.md,lg:fieldSizes.lg},listItem:{sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},badge:{sm:{fontSize:10,minWidth:16,height:16,paddingHorizontal:5,dotSize:8},md:{fontSize:11,minWidth:20,height:20,paddingHorizontal:6,dotSize:10},borderWidth:1.5,anchorOffset:4},chip:{sm:{paddingHorizontal:10,paddingVertical:4,fontSize:12,minHeight:26,closeSize:16,closeFontSize:12,gap:6},md:{paddingHorizontal:12,paddingVertical:6,fontSize:13,minHeight:32,closeSize:18,closeFontSize:13,gap:8}},checkbox:{sm:{boxSize:16},md:{boxSize:20},lg:{boxSize:24},labelGap:10},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},labelGap:10},switch:{sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2},thumbColor:"#FFFFFF"},otpInput:{sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},dialog:{iconWrapperSize:48,iconWrapperBorderRadius:24,actionButtonMinHeight:44},toast:{iconCircleSize:28,iconCircleBorderRadius:14,iconGlyphFontSize:16,tintBarWidth:0},banner:{tintBarWidth:0},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},fadeDuration:160,easing:{standard:[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]},spring:{gentle:{damping:26,stiffness:240,mass:.9},bouncy:{damping:16,stiffness:200,mass:.7},snappy:{damping:20,stiffness:300,mass:.7}}},lightShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.08,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.1,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.14,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.18,shadowRadius:32,elevation:20}},darkShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.3,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.55,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.7,shadowRadius:32,elevation:20}};export const lightTheme={mode:"light",colors:{primary:"#5B5BD6",primaryHover:"#4F4FBF",primaryPressed:"#4040A8",primaryMuted:"#EEEEFC",secondary:"#F4F4F8",secondaryHover:"#E9E9F0",success:"#18864F",warning:"#F59E0B",error:"#E12C32",info:"#1B6EF5",onPrimary:"#FFFFFF",onNeutral:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",toneText:{primary:"#4F4FD3",success:"#147042",warning:"#8F5C06",error:"#BC1B20",info:"#0958D9"},text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#62626B",inverse:"#FFFFFF",strong:"#252F4A",disabled:"#B4B4BB",link:"#5B5BD6"},background:{primary:"#FFFFFF",secondary:"#F8F8FB",tertiary:"#F1F1F5",elevated:"#FFFFFF",overlay:"rgba(15, 15, 26, 0.5)",inverse:"#0F0F1A"},border:{primary:"#E5E5EC",secondary:"#EFEFF3",focus:"#5B5BD6",error:"#E5484D",width:1},field:{background:"#F9FBFC",backgroundFocused:"#FFFFFF",backgroundDisabled:"#F5F6FA",border:"#EBEDF3",borderFocused:"#BED2F9",borderError:"#FDBFCE",label:"#242F4A",text:"#252F4A",textDisabled:"#C4CADA",placeholder:"#626D8B",placeholderDisabled:"#C4CADA",icon:"#7A849F",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#D81736"},surface:{pressed:"rgba(15, 15, 26, 0.06)",hovered:"rgba(15, 15, 26, 0.04)",selected:"rgba(91, 91, 214, 0.1)",disabled:"#F1F1F5"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#EBEDF3",highlight:"#F5F6FA"},avatarPalette:["#5B5BD6","#0A7979","#A45A05","#CD226E","#2462EB","#7C3AED","#047C57","#D42222"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:lightShadows,motion:motion,components:components,gradients:{}};export const darkTheme={mode:"dark",colors:{primary:"#7C7CE8",primaryHover:"#9292EE",primaryPressed:"#A8A8F2",primaryMuted:"#1F1F3D",secondary:"#1F1F26",secondaryHover:"#2A2A33",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA",onPrimary:"#0F0F1A",onNeutral:"#0F0F1A",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",toneText:{primary:"#8989EA",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA"},text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#919199",inverse:"#0F0F1A",strong:"#E2E2E2",disabled:"#52525B",link:"#9292EE"},background:{primary:"#0B0B12",secondary:"#13131C",tertiary:"#1C1C26",elevated:"#1C1C26",overlay:"rgba(0, 0, 0, 0.65)",inverse:"#FAFAFA"},border:{primary:"#27272F",secondary:"#1C1C26",focus:"#7C7CE8",error:"#F87171",width:1},field:{background:"#13131C",backgroundFocused:"#0B0B12",backgroundDisabled:"#1C1C26",border:"#27272F",borderFocused:"#3D5FB0",borderError:"#8A2F42",label:"#E4E6EE",text:"#FAFAFA",textDisabled:"#52525B",placeholder:"#84848D",placeholderDisabled:"#52525B",icon:"#8B8B95",iconFocused:"#D4D4DB",iconDisabled:"#52525B",caret:"#7C9EF0",message:"#F87171"},surface:{pressed:"rgba(255, 255, 255, 0.08)",hovered:"rgba(255, 255, 255, 0.05)",selected:"rgba(124, 124, 232, 0.18)",disabled:"#1C1C26"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#1C1C26",highlight:"#27272F"},avatarPalette:["#8B8BEE","#2DD4BF","#FCD34D","#F472B6","#60A5FA","#A78BFA","#34D399","#F87171"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:darkShadows,motion:motion,components:components,gradients:{}};
+"use strict";import{SQUIRCLE_SMOOTHING}from"../utils/squircle.js";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,sm:6,md:10,lg:14,xl:20,pill:9999},components={button:{xs:{paddingX:"sm",paddingY:"xs",minHeight:28,text:"xs",radius:"md",icon:14,badgeIcon:11},sm:{paddingX:"md",paddingY:"xs",minHeight:34,text:"sm",radius:"md",icon:16,badgeIcon:16},md:{paddingX:"lg",paddingY:"sm",minHeight:44,text:"base",radius:"md",icon:18,badgeIcon:18},lg:{paddingX:"xl",paddingY:"md",minHeight:50,text:"lg",radius:"lg",icon:20,badgeIcon:20},xl:{paddingX:"2xl",paddingY:"md",minHeight:58,text:"xl",radius:"lg",icon:22,badgeIcon:22}},field:{defaultVariant:"outlined",sm:{paddingX:"sm",paddingY:"sm",minHeight:38,text:"sm",radius:"md",icon:14,labelText:"xs",labelGap:"xs",messageText:"xs",messageGap:"xxs"},md:{paddingX:"md",paddingY:"md",minHeight:44,text:"base",radius:"md",icon:16,labelText:"sm",labelGap:"xs",messageText:"sm",messageGap:"xxs"},lg:{paddingX:"lg",paddingY:"lg",minHeight:52,text:"lg",radius:"md",icon:18,labelText:"base",labelGap:"xs",messageText:"base",messageGap:"xxs"}},input:{sm:{multilineMinHeight:72},md:{multilineMinHeight:92},lg:{multilineMinHeight:110}},searchBar:{sm:{radius:"pill"},md:{radius:"pill"},lg:{radius:"pill"}},emptyState:{sm:{icon:48,titleText:"lg",descriptionText:"sm",paddingY:"lg",titleGap:"md",descriptionGap:"xs"},md:{icon:64,titleText:"xl",descriptionText:"base",paddingY:"xl",titleGap:"md",descriptionGap:"xs"},lg:{icon:80,titleText:"2xl",descriptionText:"lg",paddingY:"2xl",titleGap:"md",descriptionGap:"xs"}},listItem:{sm:{paddingY:"sm",titleText:"sm",subtitleText:"xs",minHeight:44},md:{paddingY:"md",titleText:"base",subtitleText:"sm",minHeight:56},lg:{paddingY:"lg",titleText:"lg",subtitleText:"base",minHeight:72}},badge:{sm:{text:"xs",minWidth:16,height:16,paddingX:"xs",dotSize:8},md:{text:"sm",minWidth:20,height:20,paddingX:"sm",dotSize:10},borderWidth:1.5,anchorOffset:4},chip:{sm:{paddingX:"sm",paddingY:"xs",text:"xs",minHeight:26,closeSize:16,closeText:"xs",gap:"xs",icon:14},md:{paddingX:"md",paddingY:"xs",text:"sm",minHeight:32,closeSize:18,closeText:"sm",gap:"sm",icon:16}},checkbox:{sm:{boxSize:16},md:{boxSize:20},lg:{boxSize:24},labelGap:"sm"},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},labelGap:"sm"},switch:{sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2},thumbColor:"#FFFFFF"},otpInput:{sm:{cell:36,text:"base",radius:"sm",gap:"sm"},md:{cell:48,text:"xl",radius:"md",gap:"sm"},lg:{cell:56,text:"2xl",radius:"lg",gap:"md"}},segmentedControl:{sm:{height:32,text:"sm",paddingX:"sm",icon:14},md:{height:40,text:"base",paddingX:"md",icon:16},lg:{height:48,text:"lg",paddingX:"lg",icon:18},trackPadding:"xs",underlineHeight:2,pillInset:"xs"},tabs:{sm:{text:"sm",paddingY:"sm",paddingX:"xs",scrollablePaddingX:"md",icon:16},md:{text:"base",paddingY:"md",paddingX:"sm",scrollablePaddingX:"lg",icon:18},lg:{text:"lg",paddingY:"lg",paddingX:"md",scrollablePaddingX:"xl",icon:20},iconGap:"xs",trackPadding:"xs",underlineHeight:2,pillInset:"xs",disabledOpacity:.45,badgeGap:"xs"},slider:{sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},floatingActionButton:{sm:{diameter:40,icon:18,text:"sm",labelPaddingX:"md"},md:{diameter:56,icon:22,text:"base",labelPaddingX:"lg"},lg:{diameter:72,icon:28,text:"lg",labelPaddingX:"xl"},edgeOffset:"xl",bottomOffset:"xl",secondaryGap:"lg",staggerMs:50},dialog:{iconWrapperSize:48,actionButtonMinHeight:44},toast:{iconCircleSize:28,iconGlyphText:"lg",tintBarWidth:0,actionMinHeight:30},banner:{tintBarWidth:0},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},fadeDuration:160,easing:{standard:[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]},spring:{gentle:{damping:26,stiffness:240,mass:.9},bouncy:{damping:16,stiffness:200,mass:.7},snappy:{damping:20,stiffness:300,mass:.7}}},lightShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.08,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.1,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.14,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.18,shadowRadius:32,elevation:20}},darkShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.3,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.55,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.7,shadowRadius:32,elevation:20}};export const lightTheme={mode:"light",colors:{primary:"#5B5BD6",primaryHover:"#4F4FBF",primaryPressed:"#4040A8",primaryMuted:"#EEEEFC",secondary:"#F4F4F8",secondaryHover:"#E9E9F0",success:"#18864F",warning:"#F59E0B",error:"#E12C32",info:"#1B6EF5",onPrimary:"#FFFFFF",onNeutral:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",toneText:{primary:"#4F4FD3",success:"#147042",warning:"#8F5C06",error:"#BC1B20",info:"#0958D9"},text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#62626B",inverse:"#FFFFFF",strong:"#252F4A",disabled:"#B4B4BB",link:"#5B5BD6"},background:{primary:"#FFFFFF",secondary:"#F8F8FB",tertiary:"#F1F1F5",elevated:"#FFFFFF",overlay:"rgba(15, 15, 26, 0.5)",inverse:"#0F0F1A"},border:{primary:"#E5E5EC",secondary:"#EFEFF3",focus:"#5B5BD6",error:"#E5484D",width:1},field:{background:"#F9FBFC",backgroundFocused:"#FFFFFF",backgroundDisabled:"#F5F6FA",border:"#EBEDF3",borderFocused:"#BED2F9",borderError:"#FDBFCE",label:"#242F4A",text:"#252F4A",textDisabled:"#C4CADA",placeholder:"#626D8B",placeholderDisabled:"#C4CADA",icon:"#7A849F",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#D81736"},surface:{pressed:"rgba(15, 15, 26, 0.06)",hovered:"rgba(15, 15, 26, 0.04)",selected:"rgba(91, 91, 214, 0.1)",disabled:"#F1F1F5"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#EBEDF3",highlight:"#F5F6FA"},avatarPalette:["#5B5BD6","#0A7979","#A45A05","#CD226E","#2462EB","#7C3AED","#047C57","#D42222"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:lightShadows,motion:motion,components:components,gradients:{}};export const darkTheme={mode:"dark",colors:{primary:"#7C7CE8",primaryHover:"#9292EE",primaryPressed:"#A8A8F2",primaryMuted:"#1F1F3D",secondary:"#1F1F26",secondaryHover:"#2A2A33",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA",onPrimary:"#0F0F1A",onNeutral:"#0F0F1A",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",toneText:{primary:"#8989EA",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA"},text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#919199",inverse:"#0F0F1A",strong:"#E2E2E2",disabled:"#52525B",link:"#9292EE"},background:{primary:"#0B0B12",secondary:"#13131C",tertiary:"#1C1C26",elevated:"#1C1C26",overlay:"rgba(0, 0, 0, 0.65)",inverse:"#FAFAFA"},border:{primary:"#27272F",secondary:"#1C1C26",focus:"#7C7CE8",error:"#F87171",width:1},field:{background:"#13131C",backgroundFocused:"#0B0B12",backgroundDisabled:"#1C1C26",border:"#27272F",borderFocused:"#3D5FB0",borderError:"#8A2F42",label:"#E4E6EE",text:"#FAFAFA",textDisabled:"#52525B",placeholder:"#84848D",placeholderDisabled:"#52525B",icon:"#8B8B95",iconFocused:"#D4D4DB",iconDisabled:"#52525B",caret:"#7C9EF0",message:"#F87171"},surface:{pressed:"rgba(255, 255, 255, 0.08)",hovered:"rgba(255, 255, 255, 0.05)",selected:"rgba(124, 124, 232, 0.18)",disabled:"#1C1C26"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#1C1C26",highlight:"#27272F"},avatarPalette:["#8B8BEE","#2DD4BF","#FCD34D","#F472B6","#60A5FA","#A78BFA","#34D399","#F87171"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:darkShadows,motion:motion,components:components,gradients:{}};

package/lib/module/utils/index.js

@@ -1 +1 @@
-"use strict";export{announce}from"./announce.js";export{blendOf,tintOf}from"./color.js";export{smoothCorners}from"./corners.js";export{configureFeedback,feedback,hapticForIntent,isFeedbackEnabled}from"./feedback.js";export{resolveHaptic,setHapticImplementation,triggerHaptic}from"./hapticUtils.js";export{mergeRefs}from"./mergeRefs.js";export{Breakpoints,isScreenSize,isTablet,Responsive,ScreenDimensions,useScreenDimensions}from"./responsive.js";export{shadowStyle}from"./shadows.js";export{Margin,Padding,Spacing}from"./spacing.js";export{SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,squircleApplies,squircleHostRadius,squirclePath}from"./squircle.js";export{warnUnknownProps}from"./warnUnknownProps.js";
+"use strict";export{announce}from"./announce.js";export{blendOf,tintOf}from"./color.js";export{smoothCorners}from"./corners.js";export{configureFeedback,feedback,hapticForIntent,isFeedbackEnabled}from"./feedback.js";export{resolveHaptic,setHapticImplementation,triggerHaptic}from"./hapticUtils.js";export{mergeRefs}from"./mergeRefs.js";export{Breakpoints,isScreenSize,isTablet,Responsive,ScreenDimensions,useScreenDimensions}from"./responsive.js";export{shadowStyle}from"./shadows.js";export{SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,squircleApplies,squircleHostRadius,squirclePath}from"./squircle.js";export{warnUnknownProps}from"./warnUnknownProps.js";

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

@@ -24,10 +24,10 @@ import type { SlotIcon, SlotIconState } from '../AppIcon';
 export type BottomNavigationVariant = 'pill' | 'underline' | 'floating' | 'bubble' | 'expand' | 'solid' | 'tile';
 export type BottomNavigationIndicatorPosition = 'top' | 'bottom';
 /**
- * Corner radius of the bar surface in pixels, or `full`: half the surface's
+ * Corner radius of the bar surface in pixels, or `pill`: half the surface's
  * own height, so the bar's ends are round whatever the bar's height comes to.
  */
-export type BottomNavigationRadius = number | 'full';
+export type BottomNavigationRadius = number | 'pill';
 /**
  * Corner radius of the active tab's background: `auto` follows the bar's
  * radius, a number sets its own in pixels. Every value is capped at half the
@@ -142,9 +142,9 @@ export interface BottomNavigationProps {
     /**
      * Corner radius of the bar's own surface: the docked bar for every variant
      * but `floating` and `tile`, where it rounds the detached capsule instead.
-     * A pixel value, or `full`, which rounds the ends completely at half the
+     * A pixel value, or `pill`, which rounds the ends completely at half the
      * surface's measured height. Defaults to square for the docked
-     * bar, to `floatingRadius` (28) for the `floating` capsule and to fully
+     * bar, to `floatingRadius` (20) for the `floating` capsule and to fully
      * round for the `tile` capsule.
      *
      * Set the radius here rather than through `style`: the `underline` variant
@@ -157,7 +157,7 @@ export interface BottomNavigationProps {
     /**
      * Corner radius of the active tab's background on the `pill`, `floating`,
      * `solid`, `tile` and `expand` variants. `auto` (default) takes the bar's
-     * radius once one is set through `radius` or the `borderRadius` token, and
+     * radius once one is set through `radius` or the `radius` token, and
      * stays fully round while none is. A number sets the background's own
      * radius whatever the bar's. Capped at half the background's height, since
      * Android squares off a larger radius, so a large number is fully round.
@@ -197,7 +197,7 @@ export interface BottomNavigationProps {
     paddingHorizontal?: number;
     /**
      * Air inside the bar surface above and below the tab row, in pixels.
-     * Default 6 (8 above the `bubble` row). On a docked bar that is not lifted
+     * Default 4 (8 above the `bubble` row). On a docked bar that is not lifted
      * by `marginVertical`, the bottom takes the safe-area inset instead when
      * that is larger. The `underline` line sits on this padding's outer edge.
      */