@webority/mobile-ui 0.109.6 → 0.109.8

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{Logger}from"@webority/mobile-core";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,ScrollView,StyleSheet,View}from"react-native";import{createAnimatedValue,resolveSegmentedControlSize,resolveTabsSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.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:n="underline",radius:s,size:o="md",scrollable:l=!1,align:d="left",style:c,tabStyle:u,tabLabelStyle:m,tabIconStyle:p,tabBadgeStyle:b,dividerStyle:g,indicatorStyle:f,progress:h,pages:y,haptic:x,accessibilityLabel:v,testID:S}=e;warnInvalidValue("Tabs","variant",e.variant,["underline","pills","segmented"]),warnInvalidValue("Tabs","size",e.size,["sm","md","lg"]),warnInvalidValue("Tabs","align",e.align,["left","center"]);const w=useTheme(),j=useMemo(()=>buildStyles(w),[w]),V=w.components.tabs,T=useMemo(()=>resolveTabsSize(w,o),[w,o]),_=l?T["scrollable-padding-x"]:T["padding-x"],k=T["padding-y"],I=T.text,C=w.space[V["icon-gap"]],R=T.icon,z=V["underline-height"],L=w.space[V["pill-inset"]],E=V["disabled-opacity"],A=w.space[V["badge-gap"]],M="segmented"===n,F=useMemo(()=>resolveSegmentedControlSize(w,o),[w,o]),H=w.space[V["track-padding"]],D="number"==typeof s?s:s?w.radius[s]:void 0,P=D??w.radius.md,q=void 0===D?w.radius.sm:Math.max(D-H,0),B=D??w.radius.pill,N=D??w.radius.none,O=w.colors["bg-muted"],W=useSquircle(M,P),[$,U]=useState({}),K=useRef(createAnimatedValue(0)).current,X=useRef(createAnimatedValue(0)).current,[G,J]=useState(0),Q=useRef(createAnimatedValue(0)).current,Y=useRef(null),Z=useRef(0),ee=$[r],te=Math.max(0,i.findIndex(e=>e.key===r)),ie=useMemo(()=>y&&G>0?Q.interpolate({inputRange:[0,G],outputRange:[0,1]}):void 0,[y,G,Q])??h,re=i.every(e=>void 0!==$[e.key]),ae=void 0!==ie&&re&&i.length>1,ne=useMemo(()=>ae&&ie?ie.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>$[e.key].x),extrapolate:"clamp"}):null,[ae,ie,i,$]),se=useMemo(()=>ae&&ie?ie.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>$[e.key].width),extrapolate:"clamp"}):null,[ae,ie,i,$]),oe=useRef(null);useEffect(()=>{if(!ee)return;if(ae)return;const e=null!==oe.current&&oe.current!==r;if(oe.current=r,!e)return K.setValue(ee.x),void X.setValue(ee.width);const t=w.motion.spring.snappy,i=Animated.parallel([Animated.spring(K,{toValue:ee.x,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(X,{toValue:ee.width,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1})]);return i.start(),()=>i.stop()},[ee,r,K,X,w.motion.spring.snappy,ae]),useEffect(()=>{y&&0!==G&&Z.current!==te&&(Z.current=te,Y.current?.scrollTo({x:te*G,animated:!0}))},[y,G,te]);const le=y?.length;useEffect(()=>{__DEV__&&void 0!==le&&le!==i.length&&Logger.warn(`[@webority/mobile-ui] Tabs pages has ${le} entries for ${i.length} tabs; each tab needs one page.`)},[le,i.length]);const de=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}}})},[]),ce=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]),ue="pills"===n,me=_jsx(Animated.View,{pointerEvents:"none",style:[M?j.indicatorThumb:ue?j.indicatorPill:j.indicatorUnderline,M?null:ue?{top:L,bottom:L}:{height:z},{width:se??X,transform:[{translateX:ne??K}],backgroundColor:M?w.colors.surface:ue?w.colors["primary-soft"]:w.colors.primary,borderRadius:M?q:ue?B:N,...smoothCorners},f]}),renderTabs=()=>i.map(e=>{const t=e.key===r,i=!0===e.disabled,a=t?w.colors.primary:w.colors["text-subtle"],n=renderSlotIcon(e.icon,{color:a,size:R,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>ce(e),onLayout:de(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},"aria-selected":t,"aria-disabled":i,android_ripple:M?void 0:{color:w.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[j.tab,l?null:j.tabFlex,M?{paddingHorizontal:F["padding-x"],height:F.height-2*H}:{paddingHorizontal:_,paddingVertical:k},{opacity:i?E:e&&M&&!t?.7:1,backgroundColor:e&&!M?w.colors["surface-pressed"]:"transparent"},u],children:[n?_jsx(View,{style:[j.tabIcon,{marginRight:C},p],children:n}):null,_jsx(Text,{variant:"label",weight:t?"semibold":"medium",color:t?"brand":"tertiary",style:[j.tabLabel,{fontSize:M?F.text:I},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?_jsx(View,{style:[j.tabBadge,{marginLeft:A,backgroundColor:w.colors["primary-soft"],borderRadius:w.radius.pill,...smoothCorners,paddingHorizontal:w.space.xs},b],children:_jsx(Text,{variant:"caption",weight:"semibold",color:"brand",numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),pe={flexDirection:"row",alignItems:"stretch",justifyContent:l?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},be=_jsxs(_Fragment,M?{children:[me,renderTabs()]}:{children:[renderTabs(),me]}),ge=_jsxs(View,{ref:t,style:[j.container,{borderBottomColor:w.colors["border-subtle"],borderBottomWidth:"underline"===n?StyleSheet.hairlineWidth:0},"underline"===n?g:null,M?{padding:H,borderRadius:P,...smoothCorners,backgroundColor:W.active?"transparent":O}:null,c],onLayout:W.onLayout,accessibilityRole:"tablist",accessibilityLabel:v,testID:S,children:[W.active&&W.size?_jsx(SquircleFill,{width:W.size.width,height:W.size.height,radius:P,fill:O}):null,l?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[pe],keyboardShouldPersistTaps:"handled",children:be}):_jsx(View,{style:pe,children:be})]});return y?_jsxs(View,{style:j.root,children:[ge,_jsx(Animated.ScrollView,{ref:Y,horizontal:!0,pagingEnabled:!0,showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onLayout:e=>J(Math.round(e.nativeEvent.layout.width)),onScroll:Animated.event([{nativeEvent:{contentOffset:{x:Q}}}],{useNativeDriver:!1}),onMomentumScrollEnd:e=>{if(0===G)return;const t=Math.round(e.nativeEvent.contentOffset.x/G),n=i[t];n?.disabled?Y.current?.scrollTo({x:te*G,animated:!0}):(Z.current=t,n&&n.key!==r&&a(n.key))},style:j.pager,testID:S?`${S}-pages`:void 0,children:i.map((e,t)=>_jsx(View,{style:{width:G},accessibilityElementsHidden:t!==te,importantForAccessibility:t===te?"auto":"no-hide-descendants",children:y[t]},e.key))})]}):ge});Tabs.displayName="Tabs";const buildStyles=e=>StyleSheet.create({root:{flex:1},pager:{flex:1},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{Logger}from"@webority/mobile-core";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,ScrollView,StyleSheet,View}from"react-native";import{createAnimatedValue,resolveSegmentedControlSize,resolveTabsSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Badge}from"../Badge/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Tabs=forwardRef((e,t)=>{const{tabs:i,activeKey:a,onChange:r,variant:n="underline",radius:s,size:l="md",scrollable:o=!1,align:d="left",style:c,tabStyle:u,tabLabelStyle:m,tabIconStyle:p,tabBadgeStyle:b,dividerStyle:g,indicatorStyle:f,progress:h,pages:y,haptic:x,accessibilityLabel:v,testID:S}=e;warnInvalidValue("Tabs","variant",e.variant,["underline","pills","segmented"]),warnInvalidValue("Tabs","size",e.size,["sm","md","lg"]),warnInvalidValue("Tabs","align",e.align,["left","center"]);const w=useTheme(),j=useMemo(()=>buildStyles(w),[w]),V=w.components.tabs,T=useMemo(()=>resolveTabsSize(w,l),[w,l]),_=o?T["scrollable-padding-x"]:T["padding-x"],k=T["padding-y"],I=T.text,R=w.space[V["icon-gap"]],z=T.icon,C=V["underline-height"],E=w.space[V["pill-inset"]],L=V["disabled-opacity"],A=w.space[V["badge-gap"]],M="segmented"===n,F=useMemo(()=>resolveSegmentedControlSize(w,l),[w,l]),H=w.space[V["track-padding"]],D="number"==typeof s?s:s?w.radius[s]:void 0,B=D??w.radius.md,P=void 0===D?w.radius.sm:Math.max(D-H,0),q=D??w.radius.pill,N=D??w.radius.none,O=w.colors["bg-muted"],W=useSquircle(M,B),[$,U]=useState({}),K=useRef(createAnimatedValue(0)).current,X=useRef(createAnimatedValue(0)).current,[G,J]=useState(0),Q=useRef(createAnimatedValue(0)).current,Y=useRef(null),Z=useRef(0),ee=$[a],te=Math.max(0,i.findIndex(e=>e.key===a)),ie=useMemo(()=>y&&G>0?Q.interpolate({inputRange:[0,G],outputRange:[0,1]}):void 0,[y,G,Q])??h,ae=i.every(e=>void 0!==$[e.key]),re=void 0!==ie&&ae&&i.length>1,ne=useMemo(()=>re&&ie?ie.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>$[e.key].x),extrapolate:"clamp"}):null,[re,ie,i,$]),se=useMemo(()=>re&&ie?ie.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>$[e.key].width),extrapolate:"clamp"}):null,[re,ie,i,$]),le=useRef(null);useEffect(()=>{if(!ee)return;if(re)return;const e=null!==le.current&&le.current!==a;if(le.current=a,!e)return K.setValue(ee.x),void X.setValue(ee.width);const t=w.motion.spring.snappy,i=Animated.parallel([Animated.spring(K,{toValue:ee.x,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(X,{toValue:ee.width,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1})]);return i.start(),()=>i.stop()},[ee,a,K,X,w.motion.spring.snappy,re]),useEffect(()=>{y&&0!==G&&Z.current!==te&&(Z.current=te,Y.current?.scrollTo({x:te*G,animated:!0}))},[y,G,te]);const oe=y?.length;useEffect(()=>{__DEV__&&void 0!==oe&&oe!==i.length&&Logger.warn(`[@webority/mobile-ui] Tabs pages has ${oe} entries for ${i.length} tabs; each tab needs one page.`)},[oe,i.length]);const de=useCallback(e=>t=>{const{x:i,width:a}=t.nativeEvent.layout;U(t=>{const r=t[e];return r&&r.x===i&&r.width===a?t:{...t,[e]:{x:i,width:a}}})},[]),ce=useCallback(e=>{if(e.disabled)return;if(e.key===a)return;const t=resolveHaptic(x,"selection");t&&triggerHaptic(t),r(e.key)},[a,r,x]),ue="pills"===n,me=_jsx(Animated.View,{pointerEvents:"none",style:[M?j.indicatorThumb:ue?j.indicatorPill:j.indicatorUnderline,M?null:ue?{top:E,bottom:E}:{height:C},{width:se??X,transform:[{translateX:ne??K}],backgroundColor:M?w.colors.surface:ue?w.colors["primary-soft"]:w.colors.primary,borderRadius:M?P:ue?q:N,...smoothCorners},f]}),renderTabs=()=>i.map(e=>{const t=e.key===a,i=!0===e.disabled,r=t?w.colors.primary:w.colors["text-subtle"],n=renderSlotIcon(e.icon,{color:r,size:z,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>ce(e),onLayout:de(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},"aria-selected":t,"aria-disabled":i,android_ripple:M?void 0:{color:w.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[j.tab,o?null:j.tabFlex,M?{paddingHorizontal:F["padding-x"],height:F.height-2*H}:{paddingHorizontal:_,paddingVertical:k},{opacity:i?L:e&&M&&!t?.7:1,backgroundColor:e&&!M?w.colors["surface-pressed"]:"transparent"},u],children:[n?_jsx(View,{style:[j.tabIcon,{marginRight:R},p],children:n}):null,_jsx(Text,{variant:"label",weight:t?"semibold":"medium",color:t?"brand":"tertiary",style:[j.tabLabel,{fontSize:M?F.text:I},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?_jsx(Badge,{value:String(e.badge),tone:"primary",fill:"soft",accessible:!1,style:{marginLeft:A},badgeStyle:[j.tabBadge,b]}):null]},e.key)}),pe={flexDirection:"row",alignItems:"stretch",justifyContent:o?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},be=_jsxs(_Fragment,M?{children:[me,renderTabs()]}:{children:[renderTabs(),me]}),ge=_jsxs(View,{ref:t,style:[j.container,{borderBottomColor:w.colors["border-subtle"],borderBottomWidth:"underline"===n?StyleSheet.hairlineWidth:0},"underline"===n?g:null,M?{padding:H,borderRadius:B,...smoothCorners,backgroundColor:W.active?"transparent":O}:null,c],onLayout:W.onLayout,accessibilityRole:"tablist",accessibilityLabel:v,testID:S,children:[W.active&&W.size?_jsx(SquircleFill,{width:W.size.width,height:W.size.height,radius:B,fill:O}):null,o?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[pe],keyboardShouldPersistTaps:"handled",children:be}):_jsx(View,{style:pe,children:be})]});return y?_jsxs(View,{style:j.root,children:[ge,_jsx(Animated.ScrollView,{ref:Y,horizontal:!0,pagingEnabled:!0,showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onLayout:e=>J(Math.round(e.nativeEvent.layout.width)),onScroll:Animated.event([{nativeEvent:{contentOffset:{x:Q}}}],{useNativeDriver:!1}),onMomentumScrollEnd:e=>{if(0===G)return;const t=Math.round(e.nativeEvent.contentOffset.x/G),n=i[t];n?.disabled?Y.current?.scrollTo({x:te*G,animated:!0}):(Z.current=t,n&&n.key!==a&&r(n.key))},style:j.pager,testID:S?`${S}-pages`:void 0,children:i.map((e,t)=>_jsx(View,{style:{width:G},accessibilityElementsHidden:t!==te,importantForAccessibility:t===te?"auto":"no-hide-descendants",children:y[t]},e.key))})]}):ge});Tabs.displayName="Tabs";const buildStyles=e=>StyleSheet.create({root:{flex:1},pager:{flex:1},container:{width:"100%",position:"relative"},tab:{flexDirection:"row",alignItems:"center",justifyContent:"center"},tabFlex:{flex:1},tabIcon:{},tabLabel:{includeFontPadding:!1,flexShrink:1},tabBadge:{minWidth:18,minHeight:0},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/Timeline/Timeline.js

@@ -1 +1 @@
-"use strict";import{useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Text}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DOT=12,HALO=6,RAIL=2,GUTTER=28,DISC=24,HALO_OPACITY=.16,STATUS_VALUES=["upcoming","current","done","onHold","rejected","cancelled","skipped"];export const Timeline=({items:e,variant:t="feed",orientation:r="vertical",style:s,testID:o})=>{const l=useTheme(),n=l.space.xs,i=useMemo(()=>buildStyles(l),[l]),a="horizontal"===r,c=l.colors.border;warnInvalidValue("Timeline","variant",t,["feed","progress"]),warnInvalidValue("Timeline","orientation",r,["vertical","horizontal"]);const[d,u]=useState(0),m=useCallback(e=>{const{width:t}=e.nativeEvent.layout;u(e=>e===t?e:t)},[]),h=a&&d>0&&e.length>0?d/e.length:0,renderDisc=(e,t)=>e.icon?_jsx(View,{style:i.disc,children:e.icon}):_jsx(View,{style:[i.disc,{backgroundColor:tintOf(t,.16,l.colors["bg-muted"])}],children:_jsx(View,{style:[i.dot,{backgroundColor:t}]})}),renderText=(e,t)=>_jsxs(_Fragment,{children:[_jsx(Text,{variant:a?"bodySmall":"body",weight:"semibold",style:[{color:"upcoming"===t?l.colors["text-muted"]:l.colors["text-body"]},a?i.centred:null],children:e.title}),e.meta?_jsx(Text,{variant:"caption",style:[{color:l.colors["text-subtle"]},a?i.centred:null],children:e.meta}):null,e.description?_jsx(Text,{variant:"bodySmall",style:[{color:l.colors["text-muted"]},a?i.centred:null],children:e.description}):null,e.children]}),x=e.map((r,s)=>{warnInvalidValue("Timeline","status",r.status,STATUS_VALUES);const o=r.status??("feed"===t?"done":"upcoming"),d=r.color??(e=>{switch(e){case"done":return l.colors.success;case"current":return l.colors.warning;case"onHold":return l.colors.info;case"rejected":return l.colors.danger;case"cancelled":case"skipped":return l.colors["text-subtle"];default:return l.colors["text-disabled"]}})(o),u=0===s,m=s===e.length-1,x=r.key??`${r.title}-${s}`;return _jsxs(View,a?{testID:r.testID,style:[i.hColumn,h>0?{width:h,flex:0}:null],children:[_jsxs(View,{style:i.hDotRow,children:[_jsx(View,{style:[i.hSegment,{marginRight:n,backgroundColor:u?"transparent":c}]}),renderDisc(r,d),_jsx(View,{style:[i.hSegment,{marginLeft:n,backgroundColor:m?"transparent":c}]})]}),_jsx(View,{style:i.hBody,children:renderText(r,o)})]}:{testID:r.testID,style:i.row,children:[_jsxs(View,{style:i.gutter,children:[renderDisc(r,d),m?null:_jsx(View,{style:[i.rail,{backgroundColor:c}]})]}),_jsx(View,{style:[i.body,{paddingBottom:m?0:l.space.lg}],children:renderText(r,o)})]},x)});return _jsx(View,{style:[a?i.hRow:null,s],onLayout:a?m:void 0,testID:o,children:x})};const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row"},gutter:{width:Math.max(28,28),alignItems:"center"},disc:{width:24,height:24,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dot:{width:12,height:12,borderRadius:e.radius.pill,...smoothCorners},rail:{width:2,flex:1,marginTop:e.space.xs,borderRadius:e.radius.pill,...smoothCorners},body:{flex:1,gap:e.space.xxs,paddingLeft:e.space.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.space.xs,marginTop:e.space.sm,gap:e.space.xxs},centred:{textAlign:"center"}});export default Timeline;
+"use strict";import{useCallback,useMemo,useState}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{IconBadge}from"../IconBadge/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DOT=12,HALO=6,RAIL=2,GUTTER=28,DISC=24,STATUS_VALUES=["upcoming","current","done","onHold","rejected","cancelled","skipped"];export const Timeline=({items:e,variant:t="feed",orientation:r="vertical",style:s,testID:o})=>{const n=useTheme(),l=n.space.xs,i=useMemo(()=>buildStyles(n),[n]),a="horizontal"===r,c=n.colors.border;warnInvalidValue("Timeline","variant",t,["feed","progress"]),warnInvalidValue("Timeline","orientation",r,["vertical","horizontal"]);const[d,u]=useState(0),m=useCallback(e=>{const{width:t}=e.nativeEvent.layout;u(e=>e===t?e:t)},[]),h=a&&d>0&&e.length>0?d/e.length:0,renderDisc=(e,t)=>e.icon?_jsx(View,{style:i.disc,children:e.icon}):_jsx(IconBadge,{dimension:24,color:t,fill:"halo",icon:_jsx(View,{style:[i.dot,{backgroundColor:t}]})}),renderText=(e,t)=>_jsxs(_Fragment,{children:[_jsx(Text,{variant:a?"bodySmall":"body",weight:"semibold",style:[{color:"upcoming"===t?n.colors["text-muted"]:n.colors["text-body"]},a?i.centred:null],children:e.title}),e.meta?_jsx(Text,{variant:"caption",style:[{color:n.colors["text-subtle"]},a?i.centred:null],children:e.meta}):null,e.description?_jsx(Text,{variant:"bodySmall",style:[{color:n.colors["text-muted"]},a?i.centred:null],children:e.description}):null,e.children]}),x=e.map((r,s)=>{warnInvalidValue("Timeline","status",r.status,STATUS_VALUES);const o=r.status??("feed"===t?"done":"upcoming"),d=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.danger;case"cancelled":case"skipped":return n.colors["text-subtle"];default:return n.colors["text-disabled"]}})(o),u=0===s,m=s===e.length-1,x=r.key??`${r.title}-${s}`;return _jsxs(View,a?{testID:r.testID,style:[i.hColumn,h>0?{width:h,flex:0}:null],children:[_jsxs(View,{style:i.hDotRow,children:[_jsx(View,{style:[i.hSegment,{marginRight:l,backgroundColor:u?"transparent":c}]}),renderDisc(r,d),_jsx(View,{style:[i.hSegment,{marginLeft:l,backgroundColor:m?"transparent":c}]})]}),_jsx(View,{style:i.hBody,children:renderText(r,o)})]}:{testID:r.testID,style:i.row,children:[_jsxs(View,{style:i.gutter,children:[renderDisc(r,d),m?null:_jsx(View,{style:[i.rail,{backgroundColor:c}]})]}),_jsx(View,{style:[i.body,{paddingBottom:m?0:n.space.lg}],children:renderText(r,o)})]},x)});return _jsx(View,{style:[a?i.hRow:null,s],onLayout:a?m:void 0,testID:o,children:x})};const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row"},gutter:{width:Math.max(28,28),alignItems:"center"},disc:{width:24,height:24,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dot:{width:12,height:12,borderRadius:e.radius.pill,...smoothCorners},rail:{width:2,flex:1,marginTop:e.space.xs,borderRadius:e.radius.pill,...smoothCorners},body:{flex:1,gap:e.space.xxs,paddingLeft:e.space.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.space.xs,marginTop:e.space.sm,gap:e.space.xxs},centred:{textAlign:"center"}});export default Timeline;

package/lib/module/components/index.js

@@ -1 +1 @@
-"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider,DEFAULT_AMOUNT_SLIDER_LABELS}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar,DEFAULT_APP_BAR_LABELS}from"./AppBar/index.js";export{AppLockOverlay,DEFAULT_APP_LOCK_OVERLAY_LABELS}from"./AppLockOverlay/index.js";export{AsyncBlock,DEFAULT_ASYNC_BLOCK_LABELS}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete,DEFAULT_AUTOCOMPLETE_LABELS}from"./Autocomplete/index.js";export{Avatar,AvatarGroup,avatarToneColors,DEFAULT_AVATAR_LABELS}from"./Avatar/index.js";export{Badge,DEFAULT_BADGE_LABELS}from"./Badge/index.js";export{Banner,DEFAULT_BANNER_LABELS}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation,DEFAULT_BOTTOM_NAVIGATION_LABELS}from"./BottomNavigation/index.js";export{BottomSheet,DEFAULT_BOTTOM_SHEET_LABELS,useBottomSheet}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button,buttonLabelInk}from"./Button/index.js";export{Calendar,DEFAULT_CALENDAR_LABELS}from"./Calendar/index.js";export{Card,DEFAULT_CARD_LABELS}from"./Card/index.js";export{Carousel,DEFAULT_CAROUSEL_LABELS}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer,DEFAULT_COMPOSER_LABELS}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{ConfirmHost,confirm}from"./Confirm/index.js";export{DatePicker,DEFAULT_DATE_PICKER_LABELS}from"./DatePicker/index.js";export{DateRangePicker,DEFAULT_DATE_RANGE_PICKER_LABELS}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DEFAULT_DECIMAL_INPUT_LABELS,DecimalInput,isUnclearDecimalComma,parseDecimalText,pointDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{DEFAULT_DRAWER_LABELS,Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{DEFAULT_ERROR_BOUNDARY_LABELS,ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{DEFAULT_FILE_PICKER_LABELS,FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FilterChipRow}from"./FilterChipRow/index.js";export{DEFAULT_FLOATING_ACTION_BUTTON_GROUP_LABELS,FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{DEFAULT_FORCE_UPDATE_DIALOG_LABELS,ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{DEFAULT_FORM_FIELD_LABELS,FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{DEFAULT_IMAGE_GALLERY_LABELS,ImageGallery}from"./ImageGallery/index.js";export{DEFAULT_INLINE_SELECT_LABELS,InlineSelect}from"./InlineSelect/index.js";export{DEFAULT_INPUT_LABELS,Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{DEFAULT_KEYBOARD_TOOLBAR_LABELS,KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{DEFAULT_LOADER_OVERLAY_LABELS,LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{DEFAULT_MENU_LABELS,Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{DEFAULT_MODAL_LABELS,MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{DEFAULT_NUMBER_INPUT_LABELS,NumberInput}from"./NumberInput/index.js";export{DEFAULT_ONBOARDING_PAGER_LABELS,OnboardingPager}from"./OnboardingPager/index.js";export{DEFAULT_OPTION_SHEET_LABELS,OptionSheet}from"./OptionSheet/index.js";export{DEFAULT_OTP_INPUT_LABELS,OTPInput}from"./OTPInput/index.js";export{DEFAULT_PAGED_LIST_FOOTER_LABELS,PagedListFooter}from"./PagedListFooter/index.js";export{DEFAULT_PERMISSION_PROMPT_LABELS,PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,DEFAULT_PHONE_NUMBER_INPUT_LABELS,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{DEFAULT_PICKER_TRIGGER_LABELS,PickerTrigger}from"./PickerTrigger/index.js";export{DEFAULT_PROFILE_COMPLETION_LABELS,ProfileCompletion}from"./ProfileCompletion/index.js";export{DEFAULT_PROFILE_PICKER_LABELS,ProfilePicker}from"./ProfilePicker/index.js";export{DEFAULT_PROGRESS_BAR_LABELS,ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{DEFAULT_RATING_LABELS,Rating}from"./Rating/index.js";export{DEFAULT_REPEATER_LABELS,Repeater}from"./Repeater/index.js";export{applyMarkdownAction,DEFAULT_RICH_TEXT_EDITOR_LABELS,RichTextEditor}from"./RichTextEditor/index.js";export{DEFAULT_SCANNER_OVERLAY_LABELS,ScannerOverlay}from"./ScannerOverlay/index.js";export{Screen}from"./Screen/index.js";export{DEFAULT_SEARCH_BAR_LABELS,SearchBar,useRecentSearches}from"./SearchBar/index.js";export{DEFAULT_SECTION_HEADER_LABELS,SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{DEFAULT_SELECT_LABELS,Select}from"./Select/index.js";export{DEFAULT_SIGNATURE_PAD_LABELS,SignaturePad}from"./SignaturePad/index.js";export{DEFAULT_SKELETON_LABELS,Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{DEFAULT_SLIDER_FIELD_LABELS,SliderField}from"./SliderField/index.js";export{DEFAULT_SLIDE_TO_CONFIRM_LABELS,SlideToConfirm}from"./SlideToConfirm/index.js";export{DEFAULT_SORTABLE_LIST_LABELS,SortableList}from"./SortableList/index.js";export{DEFAULT_SPARKLINE_LABELS,Sparkline}from"./Sparkline/index.js";export{DEFAULT_SPINNER_LABELS,Spinner}from"./Spinner/index.js";export{SquircleView}from"./SquircleView/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{defineStatusMap}from"./StatusBadge/statusMap.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{DEFAULT_TIME_PICKER_LABELS,TimePicker}from"./TimePicker/index.js";export{DEFAULT_TOAST_LABELS,Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{DEFAULT_TOOLTIP_LABELS,Tooltip}from"./Tooltip/index.js";export{DEFAULT_TOUR_LABELS,Tour}from"./Tour/index.js";export{DEFAULT_TYPING_INDICATOR_LABELS,TypingIndicator}from"./TypingIndicator/index.js";export{DEFAULT_WHEEL_PICKER_LABELS,WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";
+"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider,DEFAULT_AMOUNT_SLIDER_LABELS}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar,DEFAULT_APP_BAR_LABELS}from"./AppBar/index.js";export{AppLockOverlay,DEFAULT_APP_LOCK_OVERLAY_LABELS}from"./AppLockOverlay/index.js";export{AsyncBlock,DEFAULT_ASYNC_BLOCK_LABELS}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete,DEFAULT_AUTOCOMPLETE_LABELS}from"./Autocomplete/index.js";export{Avatar,AvatarGroup,avatarToneColors,DEFAULT_AVATAR_LABELS}from"./Avatar/index.js";export{Badge,DEFAULT_BADGE_LABELS}from"./Badge/index.js";export{Banner,DEFAULT_BANNER_LABELS}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation,DEFAULT_BOTTOM_NAVIGATION_LABELS}from"./BottomNavigation/index.js";export{BottomSheet,DEFAULT_BOTTOM_SHEET_LABELS,useBottomSheet}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button,buttonLabelInk}from"./Button/index.js";export{Calendar,DEFAULT_CALENDAR_LABELS}from"./Calendar/index.js";export{Card,DEFAULT_CARD_LABELS}from"./Card/index.js";export{Carousel,DEFAULT_CAROUSEL_LABELS}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer,DEFAULT_COMPOSER_LABELS}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{ConfirmHost,confirm}from"./Confirm/index.js";export{DatePicker,DEFAULT_DATE_PICKER_LABELS}from"./DatePicker/index.js";export{DateRangePicker,DEFAULT_DATE_RANGE_PICKER_LABELS}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DEFAULT_DECIMAL_INPUT_LABELS,DecimalInput,isUnclearDecimalComma,parseDecimalText,pointDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{DEFAULT_DRAWER_LABELS,Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{DEFAULT_ERROR_BOUNDARY_LABELS,ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{DEFAULT_FILE_PICKER_LABELS,FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FilterChipRow}from"./FilterChipRow/index.js";export{DEFAULT_FLOATING_ACTION_BUTTON_GROUP_LABELS,FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{DEFAULT_FORCE_UPDATE_DIALOG_LABELS,ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{DEFAULT_FORM_FIELD_LABELS,FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{DEFAULT_IMAGE_GALLERY_LABELS,ImageGallery}from"./ImageGallery/index.js";export{DEFAULT_INLINE_SELECT_LABELS,InlineSelect}from"./InlineSelect/index.js";export{DEFAULT_INPUT_LABELS,Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{DEFAULT_KEYBOARD_TOOLBAR_LABELS,KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{ListSection}from"./ListSection/index.js";export{DEFAULT_LOADER_OVERLAY_LABELS,LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{DEFAULT_MENU_LABELS,Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{DEFAULT_MODAL_LABELS,MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{DEFAULT_NUMBER_INPUT_LABELS,NumberInput}from"./NumberInput/index.js";export{DEFAULT_ONBOARDING_PAGER_LABELS,OnboardingPager}from"./OnboardingPager/index.js";export{DEFAULT_OPTION_SHEET_LABELS,OptionSheet}from"./OptionSheet/index.js";export{DEFAULT_OTP_INPUT_LABELS,OTPInput}from"./OTPInput/index.js";export{DEFAULT_PAGED_LIST_FOOTER_LABELS,PagedListFooter}from"./PagedListFooter/index.js";export{DEFAULT_PERMISSION_PROMPT_LABELS,PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,DEFAULT_PHONE_NUMBER_INPUT_LABELS,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{DEFAULT_PICKER_TRIGGER_LABELS,PickerTrigger}from"./PickerTrigger/index.js";export{DEFAULT_PROFILE_COMPLETION_LABELS,ProfileCompletion}from"./ProfileCompletion/index.js";export{DEFAULT_PROFILE_PICKER_LABELS,ProfilePicker}from"./ProfilePicker/index.js";export{DEFAULT_PROGRESS_BAR_LABELS,ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{DEFAULT_RATING_LABELS,Rating}from"./Rating/index.js";export{DEFAULT_REPEATER_LABELS,Repeater}from"./Repeater/index.js";export{applyMarkdownAction,DEFAULT_RICH_TEXT_EDITOR_LABELS,RichTextEditor}from"./RichTextEditor/index.js";export{DEFAULT_SCANNER_OVERLAY_LABELS,ScannerOverlay}from"./ScannerOverlay/index.js";export{Screen}from"./Screen/index.js";export{DEFAULT_SEARCH_BAR_LABELS,SearchBar,useRecentSearches}from"./SearchBar/index.js";export{DEFAULT_SECTION_HEADER_LABELS,SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{DEFAULT_SELECT_LABELS,Select}from"./Select/index.js";export{DEFAULT_SIGNATURE_PAD_LABELS,SignaturePad}from"./SignaturePad/index.js";export{DEFAULT_SKELETON_LABELS,Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{DEFAULT_SLIDER_FIELD_LABELS,SliderField}from"./SliderField/index.js";export{DEFAULT_SLIDE_TO_CONFIRM_LABELS,SlideToConfirm}from"./SlideToConfirm/index.js";export{DEFAULT_SORTABLE_LIST_LABELS,SortableList}from"./SortableList/index.js";export{DEFAULT_SPARKLINE_LABELS,Sparkline}from"./Sparkline/index.js";export{DEFAULT_SPINNER_LABELS,Spinner}from"./Spinner/index.js";export{SquircleView}from"./SquircleView/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{defineStatusMap}from"./StatusBadge/statusMap.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{DEFAULT_TIME_PICKER_LABELS,TimePicker}from"./TimePicker/index.js";export{DEFAULT_TOAST_LABELS,Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{DEFAULT_TOOLTIP_LABELS,Tooltip}from"./Tooltip/index.js";export{DEFAULT_TOUR_LABELS,Tour}from"./Tour/index.js";export{DEFAULT_TYPING_INDICATOR_LABELS,TypingIndicator}from"./TypingIndicator/index.js";export{DEFAULT_WHEEL_PICKER_LABELS,WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";

package/lib/module/hooks/usePressAnimation.js

@@ -1 +1 @@
-"use strict";import{useCallback,useMemo,useRef}from"react";import{Easing,Animated as RNAnimated}from"react-native";import{useTheme}from"../theme/index.js";import{createAnimatedValue}from"../theme/animatedValue.js";import{usePresenceMotion}from"./usePresenceMotion.js";export const PRESS_ANIMATION_PRESETS=["scale","bounce","fade","sink","pulse"];const FADE_TO=.6,SINK_BY=2,PULSE_TO=1.05,DEFAULT_SCALE_TO={scale:.97,bounce:.92,fade:1,sink:1,pulse:1};export const usePressAnimation=({preset:e="scale",scaleTo:a,pressDuration:s,enabled:t=!0}={})=>{const n=useTheme(),i=usePresenceMotion(),r=useRef(createAnimatedValue(1)).current,o=useRef(createAnimatedValue(1)).current,c=useRef(createAnimatedValue(0)).current,u=i.reduced?"fade":e,m=a??DEFAULT_SCALE_TO[u],l=s??i.duration("fast"),p=useCallback((e,a,s)=>RNAnimated.timing(e,{toValue:a,duration:l,easing:Easing.bezier(...s),useNativeDriver:!0}),[l]),d=useCallback((e,a,s)=>RNAnimated.spring(e,{toValue:a,damping:n.motion.spring[s].damping,stiffness:n.motion.spring[s].stiffness,mass:n.motion.spring[s].mass,useNativeDriver:!0}),[n]),f=useCallback(()=>{if(t)switch(u){case"scale":case"bounce":p(r,m,n.motion.ease["in-out"]).start();break;case"fade":p(o,.6,n.motion.ease["in-out"]).start();break;case"sink":p(c,2,n.motion.ease["in-out"]).start()}},[t,u,m,r,o,c,n,p]),b=useCallback(()=>{if(t)switch(u){case"scale":d(r,1,"snappy").start();break;case"bounce":d(r,1,"bouncy").start();break;case"fade":p(o,1,n.motion.ease.decelerate).start();break;case"sink":d(c,0,"snappy").start()}},[t,u,r,o,c,n,p,d]),A=useCallback(()=>{t&&"pulse"===u&&RNAnimated.sequence([RNAnimated.timing(r,{toValue:1.05,duration:n.motion.duration.instant,easing:Easing.bezier(...n.motion.ease.accelerate),useNativeDriver:!0}),d(r,1,"snappy")]).start()},[t,u,r,n,d]),k=useMemo(()=>({transform:[{scale:r},{translateY:c}],opacity:o}),[r,c,o]);return{scale:r,opacity:o,translateY:c,style:k,pressIn:f,pressOut:b,press:A}};
+"use strict";import{useCallback,useMemo,useRef}from"react";import{Easing,Animated as RNAnimated}from"react-native";import{setNativeValue,useTheme}from"../theme/index.js";import{createAnimatedValue}from"../theme/animatedValue.js";import{usePresenceMotion}from"./usePresenceMotion.js";export const PRESS_ANIMATION_PRESETS=["scale","bounce","fade","sink","pulse","dim"];const FADE_TO=.6,DIM_TO=.7,SINK_BY=2,PULSE_TO=1.05,DEFAULT_SCALE_TO={scale:.97,bounce:.92,fade:1,sink:1,pulse:1,dim:1};export const usePressAnimation=({preset:e="scale",scaleTo:a,pressDuration:s,enabled:t=!0}={})=>{const i=useTheme(),n=usePresenceMotion(),r=useRef(createAnimatedValue(1)).current,o=useRef(createAnimatedValue(1)).current,u=useRef(createAnimatedValue(0)).current,c=n.reduced?"dim"===e?"dim":"fade":e,m=a??DEFAULT_SCALE_TO[c],l=s??n.duration("fast"),d=useCallback((e,a,s)=>RNAnimated.timing(e,{toValue:a,duration:l,easing:Easing.bezier(...s),useNativeDriver:!0}),[l]),p=useCallback((e,a,s)=>RNAnimated.spring(e,{toValue:a,damping:i.motion.spring[s].damping,stiffness:i.motion.spring[s].stiffness,mass:i.motion.spring[s].mass,useNativeDriver:!0}),[i]),f=useCallback(()=>{if(t)switch(c){case"scale":case"bounce":d(r,m,i.motion.ease["in-out"]).start();break;case"fade":d(o,.6,i.motion.ease["in-out"]).start();break;case"dim":setNativeValue(o,.7);break;case"sink":d(u,2,i.motion.ease["in-out"]).start()}},[t,c,m,r,o,u,i,d]),b=useCallback(()=>{if(t)switch(c){case"scale":p(r,1,"snappy").start();break;case"bounce":p(r,1,"bouncy").start();break;case"fade":d(o,1,i.motion.ease.decelerate).start();break;case"dim":setNativeValue(o,1);break;case"sink":p(u,0,"snappy").start()}},[t,c,r,o,u,i,d,p]),A=useCallback(()=>{t&&"pulse"===c&&RNAnimated.sequence([RNAnimated.timing(r,{toValue:1.05,duration:i.motion.duration.instant,easing:Easing.bezier(...i.motion.ease.accelerate),useNativeDriver:!0}),p(r,1,"snappy")]).start()},[t,c,r,i,p]),k=useMemo(()=>({transform:[{scale:r},{translateY:u}],opacity:o}),[r,u,o]);return{scale:r,opacity:o,translateY:u,style:k,pressIn:f,pressOut:b,press:A}};

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

@@ -2,6 +2,7 @@ import type React from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import { Animated } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
+import type { MenuItem } from "../Menu";
 import type { TextVariant } from "../Text/Text";
 export type AppBarVariant = "default" | "large" | "compact";
 export type AppBarTitleAlignment = "left" | "center";
@@ -9,7 +10,7 @@ export interface AppBarLabels {
     back: string;
 }
 export declare const DEFAULT_APP_BAR_LABELS: Readonly<AppBarLabels>;
-export interface AppBarAction {
+export interface AppBarPressAction {
     /** The glyph. Give `icon` or `label`; with neither the button draws nothing. */
     icon?: React.ReactNode;
     /**
@@ -25,12 +26,31 @@ export interface AppBarAction {
     accessibilityLabel?: string;
     testID?: string;
 }
+/** A button that opens an overflow menu; it has no `onPress` of its own. */
+export interface AppBarMenuAction {
+    /** The glyph of the button; a `label` drawn instead wins, as for `AppBarPressAction`. */
+    icon: React.ReactNode;
+    /** A text label used instead of the glyph; see `AppBarPressAction`. */
+    label?: string;
+    /** Draws a small unread dot on the button's corner, with no count. */
+    dot?: boolean;
+    /** A count or short text drawn on the button's corner; zero draws nothing. */
+    badge?: number | string;
+    /** The spoken label of the button, required because the button has no text of its own. */
+    accessibilityLabel: string;
+    testID?: string;
+    /** The items of the menu the button opens. */
+    menu: MenuItem[];
+    /** A heading over the menu's items; also the menu's accessible name. */
+    menuTitle?: string;
+}
+export type AppBarAction = AppBarPressAction | AppBarMenuAction;
 export interface AppBarProps {
     title?: string;
     /** One line, two on the large variant; longer text ends in an ellipsis. */
     subtitle?: string;
     titleAlignment?: AppBarTitleAlignment;
-    leftAction?: AppBarAction;
+    leftAction?: AppBarPressAction;
     rightActions?: AppBarAction[];
     /** Any node in the left slot, after `leftAction` (a profile avatar button, say). */
     leading?: React.ReactNode;

package/lib/typescript/commonjs/components/AppBar/index.d.ts

@@ -1,3 +1,3 @@
-export type { AppBarAction, AppBarLabels, AppBarProps, AppBarTitleAlignment, AppBarVariant, } from "./AppBar";
+export type { AppBarAction, AppBarLabels, AppBarMenuAction, AppBarPressAction, AppBarProps, AppBarTitleAlignment, AppBarVariant, } from "./AppBar";
 export { AppBar, DEFAULT_APP_BAR_LABELS, default } from "./AppBar";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,8 +1,10 @@
 import type React from "react";
 import type { GestureResponderEvent, ImageSourcePropType, ImageStyle, PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { RadiusName } from "../../theme/tokens.generated";
 import type { Theme } from "../../theme/types";
 import type { Size, Tone } from "../../types/vocabulary";
 import type { HapticType } from "../../utils/hapticUtils";
+import { type SlotIcon } from "../AppIcon/slotIcon";
 /**
  * Props passed to a custom {@link AvatarProps.ImageComponent}. The built-in
  * image is expo-image's `Image`, and both it (`contentFit`) and React Native's
@@ -14,8 +16,8 @@ import type { HapticType } from "../../utils/hapticUtils";
 export interface AvatarImageProps {
     source: ImageSourcePropType;
     style: StyleProp<ImageStyle>;
-    contentFit: "cover";
-    resizeMode: "cover";
+    contentFit: AvatarContentFit;
+    resizeMode: AvatarContentFit;
     onError: () => void;
     accessibilityIgnoresInvertColors?: boolean;
 }
@@ -35,6 +37,8 @@ export type AvatarStatusPosition = "topRight" | "bottomRight";
  * primary text.
  */
 export type AvatarTone = Tone;
+export type AvatarContentFit = "cover" | "contain";
+export type AvatarRadius = Extract<RadiusName, "sm" | "md" | "lg">;
 export declare const AVATAR_COLORS: readonly ["avatar-1", "avatar-2", "avatar-3", "avatar-4", "avatar-5", "avatar-6", "avatar-7", "avatar-8"];
 /** The fill and the ink (the tone as text, the `<tone>-text` colour names) of an initials disc in a tone. Shared with ProfilePicker's placeholder. */
 export declare const avatarToneColors: (theme: Theme, tone: AvatarTone) => {
@@ -64,6 +68,20 @@ export interface AvatarProps {
     name?: string;
     size?: AvatarSize;
     shape?: AvatarShape;
+    /** Width and height in points, for a host that sizes the picture itself. Wins over `size`. */
+    dimension?: number;
+    /** Corner of a `rounded` avatar from the radius tokens. Unset keeps 22 percent of the side. */
+    radius?: AvatarRadius;
+    /** Draws a 1 pt border in the border colour inside the frame; the picture fills what is left. Default false. */
+    border?: boolean;
+    /** How a picture fills the frame. `contain` shows all of it, with no fill behind it. Default `'cover'`. */
+    contentFit?: AvatarContentFit;
+    /**
+     * Drawn when there is no picture and no name, at 45 percent of the side, on
+     * the neutral grey (`bg-muted`) in `text-subtle`, unless `tone`,
+     * `backgroundColor` or `color` say otherwise.
+     */
+    placeholderIcon?: SlotIcon;
     status?: AvatarStatus;
     statusPosition?: AvatarStatusPosition;
     /**

package/lib/typescript/commonjs/components/Avatar/index.d.ts

@@ -1,3 +1,3 @@
-export type { AvatarGroupOverflowVariant, AvatarGroupProps, AvatarGroupSpacing, AvatarImageProps, AvatarLabels, AvatarProps, AvatarShape, AvatarSize, AvatarStatus, AvatarStatusPosition, AvatarTone, } from "./Avatar";
+export type { AvatarContentFit, AvatarGroupOverflowVariant, AvatarGroupProps, AvatarGroupSpacing, AvatarImageProps, AvatarLabels, AvatarProps, AvatarRadius, AvatarShape, AvatarSize, AvatarStatus, AvatarStatusPosition, AvatarTone, } from "./Avatar";
 export { Avatar, AvatarGroup, avatarToneColors, DEFAULT_AVATAR_LABELS, default } from "./Avatar";
 //# sourceMappingURL=index.d.ts.map

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

@@ -5,6 +5,8 @@ export type BadgeVariant = "standard" | "dot";
 export type BadgeTone = Tone;
 export type BadgeSize = Extract<Size, "sm" | "md">;
 export type BadgeAnchor = "topRight" | "topLeft" | "bottomRight" | "bottomLeft";
+/** `solid` fills the pill with the tone. `soft` draws the tone's soft colour behind a semibold count in the tone. */
+export type BadgeFill = "solid" | "soft";
 export interface BadgeLabels {
     indicator: string;
     unread: (count: string) => string;
@@ -16,7 +18,10 @@ export interface BadgeProps {
     variant?: BadgeVariant;
     tone?: BadgeTone;
     size?: BadgeSize;
+    fill?: BadgeFill;
     invisible?: boolean;
+    /** False hides the badge from screen readers, for a host that already announces the count. */
+    accessible?: boolean;
     /**
      * When true, renders the component as its authored skeleton placeholder shape.
      * The placeholder mirrors the real layout's footprint so the UI doesn't reflow

package/lib/typescript/commonjs/components/Badge/index.d.ts

@@ -1,3 +1,3 @@
-export type { BadgeAnchor, BadgeLabels, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from "./Badge";
+export type { BadgeAnchor, BadgeFill, BadgeLabels, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from "./Badge";
 export { Badge, DEFAULT_BADGE_LABELS, default } from "./Badge";
 //# sourceMappingURL=index.d.ts.map

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

@@ -14,8 +14,10 @@ export type BannerRole = "alert" | "summary" | "none";
  * How the banner is drawn. `'bar'` is the neutral surface with the tone's icon.
  * `'wash'` fills the banner with the tone's soft colour, a small corner radius, no
  * leading bar, and a title in the tone's ink.
+ * `'tint'` is the bar layout (medium corner, title in the body colour) on
+ * the tone's soft colour.
  */
-export type BannerVariant = "bar" | "wash";
+export type BannerVariant = "bar" | "wash" | "tint";
 export type BannerActionVariant = Extract<FillVariant, "solid" | "outline" | "ghost">;
 export type BannerActionSize = Extract<Size, "sm" | "md">;
 export type BannerActionTone = Tone;

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

@@ -14,6 +14,8 @@
 import type React from "react";
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from "react-native";
 import { ScrollView } from "react-native";
+import type { DialogAction } from "../Dialog/Dialog";
+import { type ActionsLayout } from "../Dialog/OverlayActions";
 /**
  * A snap point: a height in dp, a percentage of the host height, or
  * `'content'`, the measured height of the sheet's own content (handle,
@@ -144,6 +146,10 @@ export interface BottomSheetProps {
      * state.
      */
     header?: React.ReactNode;
+    /** Action buttons drawn in the footer, above `footer`. Laid out by `actionsLayout`. */
+    actions?: DialogAction[];
+    /** How `actions` are laid out: `'auto'` (default) stacks them when a label wraps, `'row'` never stacks, `'stacked'` is a column of full-width buttons in the order given. */
+    actionsLayout?: ActionsLayout;
     /**
      * Sticky region pinned to the bottom of the sheet, above the safe-area
      * inset. Does not scroll with `children`, and rides up with the keyboard

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from "react-native";
+import type { PressAnimationPreset } from "../../hooks/usePressAnimation";
 import type { GradientDefinition, ShadowName } from "../../theme/types";
 import type { HapticType } from "../../utils/hapticUtils";
 import type { ContextMenuConfig } from "../Menu/useContextMenu";
@@ -31,6 +32,8 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
     radius?: CardRadius;
     padding?: CardPadding;
     interactive?: boolean;
+    /** Press feedback of a card with `onPress`. `false` draws none. Default `'scale'`. */
+    pressAnimation?: PressAnimationPreset | false;
     /**
      * Background colour: a background colour name (`bg`, `bg-subtle`, `bg-muted`, `surface`, `scrim`, `surface-inverse`) or any raw colour string. Applies on every variant and replaces the variant's default
      * surface colour; `style` / `containerStyle` still win over it.

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

@@ -2,11 +2,15 @@ import type React from "react";
 import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { Tone } from "../../types/vocabulary";
 import type { HapticType } from "../../utils/hapticUtils";
+import type { SlotIcon } from "../AppIcon/slotIcon";
+import { type ActionsLayout } from "./OverlayActions";
 export type DialogActionTone = Tone;
 export interface DialogAction {
     label: string;
     onPress: () => void;
     tone?: DialogActionTone;
+    /** Icon before the label, drawn in the label's colour; the same icon contract as Button `leftIcon`. */
+    icon?: SlotIcon;
     loading?: boolean;
     /** Dims the action and blocks its press (a confirm waiting on a typed phrase, say). */
     disabled?: boolean;
@@ -24,6 +28,11 @@ export interface DialogProps {
     /** Tints the disc and draws its status mark (check, alert or info) unless `icon` or `illustration` is set. */
     tone?: Tone;
     actions?: DialogAction[];
+    /**
+     * How the action buttons are laid out. `'auto'` (default) stacks them into a column when a
+     * label wraps; `'row'` never stacks; `'stacked'` is always a column of full-width buttons, in the order given.
+     */
+    actionsLayout?: ActionsLayout;
     dismissOnAction?: boolean;
     accessibilityLabel?: string;
     /** Style applied to the underlying Modal sheet (consumer may override radius, padding, etc.). */

package/lib/typescript/commonjs/components/Dialog/OverlayActions.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { DialogAction } from "./Dialog";
+export declare const OVERLAY_TONES: readonly ["primary", "success", "warning", "danger", "info", "neutral"];
+export declare const ACTIONS_LAYOUTS: readonly ["auto", "row", "stacked"];
+export type ActionsLayout = (typeof ACTIONS_LAYOUTS)[number];
+interface OverlayActionsProps {
+    actions: DialogAction[];
+    layout: ActionsLayout;
+    testID?: string;
+    /** The measured-stacked state, owned by a parent that outlives this row's unmount. */
+    stackedLabels?: [string | null, (key: string | null) => void];
+    rowStyle?: StyleProp<ViewStyle>;
+    buttonStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+declare const OverlayActions: React.FC<OverlayActionsProps>;
+export { OverlayActions };
+//# sourceMappingURL=OverlayActions.d.ts.map

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

@@ -2,6 +2,8 @@ import type React from "react";
 import type { ImageSourcePropType, View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { Size } from "../../types/vocabulary";
 export type EmptyStateSize = Extract<Size, "sm" | "md" | "lg">;
+/** `block` is the centred block with room around it. `inline` is one quiet caption line, centred, with no padding; it draws the title only. */
+export type EmptyStateVariant = "block" | "inline";
 export interface EmptyStateAction {
     label: string;
     onPress: () => void;
@@ -20,6 +22,8 @@ export interface EmptyStateProps {
     action?: EmptyStateAction;
     secondaryAction?: EmptyStateAction;
     size?: EmptyStateSize;
+    /** Default `'block'`. See {@link EmptyStateVariant}. */
+    variant?: EmptyStateVariant;
     /**
      * Grows to fill the space it is given and centres its content, so it sits in
      * the middle of an empty list: pass it as `ListEmptyComponent` and give the

package/lib/typescript/commonjs/components/EmptyState/index.d.ts

@@ -1,3 +1,3 @@
-export type { EmptyStateAction, EmptyStateProps, EmptyStateSize } from "./EmptyState";
+export type { EmptyStateAction, EmptyStateProps, EmptyStateSize, EmptyStateVariant } from "./EmptyState";
 export { default, EmptyState } from "./EmptyState";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,9 +1,16 @@
-import type { View as RNView, StyleProp, ViewStyle } from "react-native";
+import type { View as RNView, StyleProp, ViewProps, ViewStyle } from "react-native";
 import type { Size, Tone } from "../../types/vocabulary";
 import type { IconVariant } from "../AppIcon/AppIcon";
 import type { SlotIcon } from "../AppIcon/slotIcon";
 export type IconBadgeSize = Extract<Size, "sm" | "md" | "lg">;
 export type IconBadgeTone = Tone;
+/**
+ * How the circle is filled. `tint`: the colour at a low tint (14 percent).
+ * `halo`: a slightly stronger tint (16 percent), the status halo round a
+ * timeline dot. `surface`: the surface colour, a seal cut out of whatever it
+ * overlaps.
+ */
+export type IconBadgeFill = "tint" | "halo" | "surface";
 export interface IconBadgeProps {
     /**
      * The icon: an AppIcon name (`icon="shield-tick"`), `{ name, variant }`, a
@@ -17,11 +24,23 @@ export interface IconBadgeProps {
     size?: IconBadgeSize;
     /** Colour of the tinted fill and the icon. Default `'primary'`. */
     tone?: IconBadgeTone;
+    /**
+     * A colour of the host's own for the fill tint and a named icon. Wins over
+     * `tone`. A value that is not `#RRGGBB` still colours the icon, and the
+     * fill falls back to the neutral grey (`bg-muted`), as `tintOf` does.
+     */
+    color?: string;
+    /** Default `'tint'`. See {@link IconBadgeFill}. */
+    fill?: IconBadgeFill;
+    /** Width and height in points, for a host that sizes the circle itself. Wins over `size`; a named icon takes half of it, rounded. */
+    dimension?: number;
     /**
      * Announces the badge as an image with this name. Without it the badge is
      * decorative: hidden from screen readers.
      */
     accessibilityLabel?: string;
+    /** Passed to the root view; "none" lets touches reach what sits under the badge. */
+    pointerEvents?: ViewProps["pointerEvents"];
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/IconBadge/index.d.ts

@@ -1,3 +1,3 @@
-export type { IconBadgeProps, IconBadgeSize, IconBadgeTone } from "./IconBadge";
+export type { IconBadgeFill, IconBadgeProps, IconBadgeSize, IconBadgeTone } from "./IconBadge";
 export { IconBadge } from "./IconBadge";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { GestureResponderEvent, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { GestureResponderEvent, PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { Size, Tone } from "../../types/vocabulary";
 import type { HapticType } from "../../utils/hapticUtils";
 import type { SlotIcon } from "../AppIcon/slotIcon";
@@ -7,6 +7,8 @@ import type { ButtonProps } from "../Button";
 import type { ContextMenuConfig } from "../Menu/useContextMenu";
 import type { SwipeableAction } from "../Swipeable";
 export type ListItemSize = Extract<Size, "sm" | "md" | "lg">;
+/** `menu` is a popup menu row: 48 pt high, no press scale, announced as a menu item. */
+export type ListItemVariant = "list" | "menu";
 /**
  * Where the `right` slot sits. `side` is beside the text, `below` is under the
  * subtitle and description, and `auto` is `side` until the user's text size is
@@ -45,7 +47,7 @@ export interface ListItemProps {
      * slot placed below. Inside the row's press target.
      */
     children?: React.ReactNode;
-    /** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
+    /** Lines a text title may take before it is truncated. Default 1, or 2 in a menu row; 0 for no limit. */
     titleLines?: number;
     /** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */
     subtitleLines?: number;
@@ -72,7 +74,7 @@ export interface ListItemProps {
      * nests inside the row's press target.
      */
     selectable?: boolean;
-    /** Whether the row is checked. Controlled: update it from `onCheckedChange`. Used only with `selectable`. */
+    /** Whether the row is checked. Controlled: update it from `onCheckedChange`. Used with `selectable`, and with `variant="menu"`, where it is announced. */
     checked?: boolean;
     /** Called with the next value when a `selectable` row is pressed. */
     onCheckedChange?: (checked: boolean) => void;
@@ -94,6 +96,10 @@ export interface ListItemProps {
     expanded?: boolean;
     disabled?: boolean;
     size?: ListItemSize;
+    /** Default `'list'`. See {@link ListItemVariant}. */
+    variant?: ListItemVariant;
+    /** Called when the row takes keyboard or screen reader focus. */
+    onFocus?: PressableProps["onFocus"];
     divider?: boolean;
     chevron?: boolean;
     /** Optional swipe-from-left actions. Wraps the row in a Swipeable when provided. */

package/lib/typescript/commonjs/components/ListItem/index.d.ts

@@ -1,4 +1,4 @@
 export type { SwipeableAction } from "../Swipeable";
-export type { ListItemAction, ListItemProps, ListItemRightPlacement, ListItemSize, } from "./ListItem";
+export type { ListItemAction, ListItemProps, ListItemRightPlacement, ListItemSize, ListItemVariant, } from "./ListItem";
 export { default, ListItem } from "./ListItem";
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,20 @@
+import type React from "react";
+import type { CardVariant } from "../Card";
+import type { SectionHeaderAction } from "../SectionHeader";
+export interface ListSectionProps {
+    /** The heading above the card, drawn through SectionHeader. */
+    title?: string;
+    /** A link on the heading row, such as See all. It shows only with a title. */
+    action?: SectionHeaderAction;
+    /** A caption below the card. */
+    footer?: string;
+    /** The card's surface. Default 'outline'. */
+    variant?: CardVariant;
+    testID?: string;
+    /** The rows, each a ListItem. A divider is drawn between consecutive rows. */
+    children?: React.ReactNode;
+}
+/** A titled group of list rows in one card, with a divider between the rows. */
+export declare const ListSection: React.FC<ListSectionProps>;
+export default ListSection;
+//# sourceMappingURL=ListSection.d.ts.map

package/lib/typescript/commonjs/components/ListSection/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListSectionProps } from "./ListSection";
+export { default, ListSection } from "./ListSection";
+//# sourceMappingURL=index.d.ts.map

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

@@ -19,6 +19,8 @@ export interface ProgressBarProps {
     label?: ReactNode;
     /** Shows the percent (`Math.round(progress * 100)%`) at the right of the label row. Determinate only. */
     showPercent?: boolean;
+    /** Text or node at the right of the label row, in place of the percent. A string is drawn like the percent. */
+    valueLabel?: ReactNode;
     indeterminate?: boolean;
     height?: number;
     radius?: number;