@webority/mobile-ui 0.106.0 → 0.108.0

package/lib/module/components/SortableList/SortableList.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,measure,runOnJS,scrollTo,useAnimatedRef,useAnimatedScrollHandler,useAnimatedStyle,useFrameCallback,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1};export function moveItem(e,t,a){const l=e.slice();if(t<0||t>=l.length)return l;const[r]=l.splice(t,1);return l.splice(a,0,r),l}export function topOf(e,t){"worklet";let a=0;for(let l=0;l<t;l++)a+=e[l]??0;return a}export function slotTop(e,t,a){"worklet";let l=0,r=0;for(let o=0;o<e.length&&r<a;o++)o!==t&&(l+=e[o]??0,r++);return l}export function dropIndex(e,t,a){"worklet";const l=topOf(e,t)+(e[t]??0)/2+a;let r=0,o=0;for(let a=0;a<e.length;a++){const s=e[a]??0;a!==t&&o+s/2<l&&r++,o+=s}return r}export function rowShifts(e,t,a){const l=[];let r=0;for(const t of e)l.push(r),r+=t;const o=e.map(()=>0),s=moveItem(e.map((e,t)=>t),t,a);let n=0;for(const t of s)o[t]=n-(l[t]??0),n+=e[t]??0;return o}const buildStyles=e=>StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:l,isActive:r,dragging:o,handle:s,disabled:n,shared:i,callbacks:u,children:c}){const d=useTheme(),m=useMemo(()=>buildStyles(d),[d]),f=useSharedValue(0);useEffect(()=>{f.value=o&&!r?withSpring(l,SPRING_CONFIG):l},[o,r,l,f]),useEffect(()=>()=>{cancelAnimation(f)},[f]);const h=useAnimatedStyle(()=>({transform:[{translateY:r?i.dragY.value:f.value}],zIndex:r?1:0})),v=useMemo(()=>{const{dragIndex:e,dropTo:a,dragY:l,translation:r,absoluteY:o,scrollY:c,scrollStart:d,heights:m}=i,{onLift:f,onDrop:h,onSettled:v}=u,g=Gesture.Pan().enabled(!n).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=c.value,r.value=0,l.value=0,runOnJS(f)(t)}).onUpdate(a=>{"worklet";e.value===t&&(r.value=a.translationY,o.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const r=a.value,o=m.value;e.value=-1,l.value=topOf(o,t)+l.value-slotTop(o,t,r),l.value=withSpring(0,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(v)()}),runOnJS(h)(t,r)});return s?g:g.activateAfterLongPress(350)},[n,s,t,u,i]),g=n?[]:[...t>0?[{name:"moveUp",label:"Move up"}]:[],...t<a-1?[{name:"moveDown",label:"Move down"}]:[]];return _jsx(Animated.View,{style:h,onLayout:t=>u.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:g,onAccessibilityAction:e=>{if(n)return;const l=t+(ACTION_STEP[e.nativeEvent.actionName]??0);l!==t&&l>=0&&l<a&&u.onMove(t,l)},testID:`sortable-row-${e}`,children:s?_jsxs(View,{style:m.handleRow,children:[_jsx(GestureDetector,{gesture:v,children:_jsxs(View,{style:m.handle,children:[_jsx(View,{style:m.bar}),_jsx(View,{style:m.bar}),_jsx(View,{style:m.bar})]})}),_jsx(View,{style:m.body,children:c})]}):_jsx(GestureDetector,{gesture:v,children:_jsx(View,{children:c})})})}export function SortableList(e){const{data:t,keyExtractor:a,renderItem:l,onReorder:r,handle:o=!1,disabled:s=!1,accessibilityLabel:n,testID:i}=e,u=useMemo(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),c=useMemo(()=>u.map(e=>e.key),[u]),d=useAnimatedRef(),m=useSharedValue(0),f=useSharedValue(0),h=useSharedValue(0),v=useSharedValue(0),g=useSharedValue(-1),p=useSharedValue(-1),S=useSharedValue(0),b=useSharedValue([]),x=useRef(new Map),w=useRef(c),[y,k]=useState(null),_=useCallback(()=>{b.value=w.current.map(e=>x.current.get(e)??0)},[b]);useEffect(()=>{w.current=c,_()},[c,_]),useEffect(()=>()=>{cancelAnimation(S)},[S]);const A=useCallback(e=>{k(t=>t?.dragging?{...t,to:e}:t)},[]),I=useFrameCallback(()=>{"worklet";const e=g.value;if(e<0)return;const t=measure(d);t&&(v.value<t.pageY+48?scrollTo(d,0,Math.max(0,m.value-12),!1):v.value>t.pageY+t.height-48&&scrollTo(d,0,m.value+12,!1)),S.value=h.value+m.value-f.value;const a=dropIndex(b.value,e,S.value);a!==p.value&&(p.value=a,runOnJS(A)(a))},!1),V=useCallback(e=>{triggerHaptic("longPress"),I.setActive(!0),k({key:c[e]??"",from:e,to:e,dragging:!0})},[I,c]),j=useCallback((e,t)=>{I.setActive(!1),k(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&r(moveItem(c,e,t))},[I,c,r]),C=useCallback(()=>{k(e=>e&&!e.dragging?null:e)},[]),E=useCallback((e,t)=>{r(moveItem(c,e,t))},[c,r]),O=useCallback((e,t)=>{x.current.set(e,t),_()},[_]),R=useAnimatedScrollHandler({onScroll:e=>{"worklet";m.value=e.contentOffset.y}}),T=useMemo(()=>({scrollRef:d,scrollY:m,scrollStart:f,translation:h,absoluteY:v,dragIndex:g,dropTo:p,dragY:S,heights:b}),[d,m,f,h,v,g,p,S,b]),M=useMemo(()=>({onLift:V,onDrop:j,onSettled:C,onMove:E,onHeight:O}),[V,j,C,E,O]),G=!0===y?.dragging,L=G&&y?rowShifts(c.map(e=>x.current.get(e)??0),y.from,y.to):null;return _jsx(Animated.ScrollView,{ref:d,onScroll:R,scrollEventThrottle:16,scrollEnabled:!G,accessibilityLabel:n,testID:i,children:u.map((e,t)=>{const a=y?.key===e.key;return _jsx(SortableRow,{rowKey:e.key,index:t,count:u.length,shift:L?.[t]??0,isActive:a,dragging:G,handle:o,disabled:s,shared:T,callbacks:M,children:l({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";export default SortableList;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,measure,runOnJS,scrollTo,useAnimatedRef,useAnimatedScrollHandler,useAnimatedStyle,useFrameCallback,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SORTABLE_LIST_LABELS=Object.freeze({moveUp:"Move up",moveDown:"Move down"});const LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1};export function moveItem(e,t,a){const l=e.slice();if(t<0||t>=l.length)return l;const[r]=l.splice(t,1);return l.splice(a,0,r),l}export function topOf(e,t){"worklet";let a=0;for(let l=0;l<t;l++)a+=e[l]??0;return a}export function slotTop(e,t,a){"worklet";let l=0,r=0;for(let o=0;o<e.length&&r<a;o++)o!==t&&(l+=e[o]??0,r++);return l}export function dropIndex(e,t,a){"worklet";const l=topOf(e,t)+(e[t]??0)/2+a;let r=0,o=0;for(let a=0;a<e.length;a++){const s=e[a]??0;a!==t&&o+s/2<l&&r++,o+=s}return r}export function rowShifts(e,t,a){const l=[];let r=0;for(const t of e)l.push(r),r+=t;const o=e.map(()=>0),s=moveItem(e.map((e,t)=>t),t,a);let n=0;for(const t of s)o[t]=n-(l[t]??0),n+=e[t]??0;return o}const buildStyles=e=>StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:l,isActive:r,dragging:o,handle:s,disabled:n,shared:i,callbacks:u,labels:c,children:d}){const m=useTheme(),v=useMemo(()=>buildStyles(m),[m]),f=useSharedValue(0);useEffect(()=>{f.value=o&&!r?withSpring(l,SPRING_CONFIG):l},[o,r,l,f]),useEffect(()=>()=>{cancelAnimation(f)},[f]);const h=useAnimatedStyle(()=>({transform:[{translateY:r?i.dragY.value:f.value}],zIndex:r?1:0})),S=useMemo(()=>{const{dragIndex:e,dropTo:a,dragY:l,translation:r,absoluteY:o,scrollY:c,scrollStart:d,heights:m}=i,{onLift:v,onDrop:f,onSettled:h}=u,S=Gesture.Pan().enabled(!n).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=c.value,r.value=0,l.value=0,runOnJS(v)(t)}).onUpdate(a=>{"worklet";e.value===t&&(r.value=a.translationY,o.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const r=a.value,o=m.value;e.value=-1,l.value=topOf(o,t)+l.value-slotTop(o,t,r),l.value=withSpring(0,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(h)()}),runOnJS(f)(t,r)});return s?S:S.activateAfterLongPress(350)},[n,s,t,u,i]),p=n?[]:[...t>0?[{name:"moveUp",label:c.moveUp}]:[],...t<a-1?[{name:"moveDown",label:c.moveDown}]:[]];return _jsx(Animated.View,{style:h,onLayout:t=>u.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:p,onAccessibilityAction:e=>{if(n)return;const l=t+(ACTION_STEP[e.nativeEvent.actionName]??0);l!==t&&l>=0&&l<a&&u.onMove(t,l)},testID:`sortable-row-${e}`,children:s?_jsxs(View,{style:v.handleRow,children:[_jsx(GestureDetector,{gesture:S,children:_jsxs(View,{style:v.handle,children:[_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar})]})}),_jsx(View,{style:v.body,children:d})]}):_jsx(GestureDetector,{gesture:S,children:_jsx(View,{children:d})})})}export function SortableList(e){const{data:t,keyExtractor:a,renderItem:l,onReorder:r,handle:o=!1,disabled:s=!1,accessibilityLabel:n,labels:i,testID:u}=e,c=useMemo(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...i}),[i]),d=useMemo(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),m=useMemo(()=>d.map(e=>e.key),[d]),v=useAnimatedRef(),f=useSharedValue(0),h=useSharedValue(0),S=useSharedValue(0),p=useSharedValue(0),g=useSharedValue(-1),b=useSharedValue(-1),x=useSharedValue(0),w=useSharedValue([]),y=useRef(new Map),k=useRef(m),[_,A]=useState(null),I=useCallback(()=>{w.value=k.current.map(e=>y.current.get(e)??0)},[w]);useEffect(()=>{k.current=m,I()},[m,I]),useEffect(()=>()=>{cancelAnimation(x)},[x]);const L=useCallback(e=>{A(t=>t?.dragging?{...t,to:e}:t)},[]),E=useFrameCallback(()=>{"worklet";const e=g.value;if(e<0)return;const t=measure(v);t&&(p.value<t.pageY+48?scrollTo(v,0,Math.max(0,f.value-12),!1):p.value>t.pageY+t.height-48&&scrollTo(v,0,f.value+12,!1)),x.value=S.value+f.value-h.value;const a=dropIndex(w.value,e,x.value);a!==b.value&&(b.value=a,runOnJS(L)(a))},!1),T=useCallback(e=>{triggerHaptic("longPress"),E.setActive(!0),A({key:m[e]??"",from:e,to:e,dragging:!0})},[E,m]),V=useCallback((e,t)=>{E.setActive(!1),A(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&r(moveItem(m,e,t))},[E,m,r]),j=useCallback(()=>{A(e=>e&&!e.dragging?null:e)},[]),O=useCallback((e,t)=>{r(moveItem(m,e,t))},[m,r]),R=useCallback((e,t)=>{y.current.set(e,t),I()},[I]),C=useAnimatedScrollHandler({onScroll:e=>{"worklet";f.value=e.contentOffset.y}}),D=useMemo(()=>({scrollRef:v,scrollY:f,scrollStart:h,translation:S,absoluteY:p,dragIndex:g,dropTo:b,dragY:x,heights:w}),[v,f,h,S,p,g,b,x,w]),M=useMemo(()=>({onLift:T,onDrop:V,onSettled:j,onMove:O,onHeight:R}),[T,V,j,O,R]),G=!0===_?.dragging,P=G&&_?rowShifts(m.map(e=>y.current.get(e)??0),_.from,_.to):null;return _jsx(Animated.ScrollView,{ref:v,onScroll:C,scrollEventThrottle:16,scrollEnabled:!G,accessibilityLabel:n,testID:u,children:d.map((e,t)=>{const a=_?.key===e.key;return _jsx(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:P?.[t]??0,isActive:a,dragging:G,handle:o,disabled:s,shared:D,callbacks:M,labels:c,children:l({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";export default SortableList;

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

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

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

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

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

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

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

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

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

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

package/lib/module/components/SquircleFill/SquircleFill.js

@@ -1 +1 @@
-"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:o,stroke:r,strokeWidth:s=0,outset:l=0,testID:a}){const n=s>0&&void 0!==r&&"transparent"!==r,h=n?s/2:0,u=useTheme().cornerSmoothing,c=squirclePath({width:t,height:e,radius:i,inset:h,smoothing:u});return _jsx(View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:a,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:c,fill:o,stroke:n?r:void 0,strokeWidth:n?s:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[o,r]=useState(null),s=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(s){const{width:e,height:i}=t.nativeEvent.layout;r(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[s,i]),size:o,active:s&&null!==o&&squircleApplies(o.width,o.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});
+"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:r,stroke:s,strokeWidth:o=0,testID:l}){const a=o>0&&void 0!==s&&"transparent"!==s,n=a?o/2:0,h=useTheme().cornerSmoothing,u=squirclePath({width:t,height:e,radius:i,inset:n,smoothing:h});return _jsx(View,{pointerEvents:"none",style:styles.overlay,testID:l,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:u,fill:r,stroke:a?s:void 0,strokeWidth:a?o:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[r,s]=useState(null),o=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(o){const{width:e,height:i}=t.nativeEvent.layout;s(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[o,i]),size:r,active:o&&null!==r&&squircleApplies(r.width,r.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";export function defineStatusMap(t,e){return n=>(null!=n&&Object.hasOwn(t,n)?t[n]:void 0)??e??{label:n??"-",tone:"neutral"}}

package/lib/module/components/Stepper/Stepper.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const CIRCLE_SIZE=24,SEGMENT_HEIGHT=4,PULSE_SIZE=32,PULSE_DURATION=1100,toneColorFor=(e,t)=>"success"===t?e.colors.success:e.colors.primary,toneOnColorFor=(e,t)=>"success"===t?e.colors["on-success"]:e.colors["on-primary"],StepCircle=({index:e,step:t,status:i,toneColor:s,upcomingColor:o,upcomingFillColor:l,textOnColor:r,upcomingTextColor:n,interactive:a,canPress:c,totalSteps:d,onPress:p,pulseEnabled:u,circleStyles:h,circleSlotStyle:m})=>{const y="active"===i,x=useTheme(),g=useRef(createAnimatedValue(1)).current,b=useRef(createAnimatedValue(.5)).current;useEffect(()=>{if(!y||!u)return g.setValue(1),void b.setValue(0);const e=Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(g,{toValue:1.4,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(g,{toValue:1,duration:0,useNativeDriver:!0})]),Animated.sequence([Animated.timing(b,{toValue:0,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(b,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[y,g,b,u]);const S="upcoming"===i?l:s,f="upcoming"===i?o:s,w="upcoming"===i?n:r,C="complete"===i,v=`Step ${e+1} of ${d}, ${t.label}, ${i}`,j=_jsxs(View,{style:h.relative,children:[y&&u?_jsx(Animated.View,{pointerEvents:"none",style:[h.pulse,{width:32,height:32,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:s,opacity:b,transform:[{scale:g}]}]}):null,_jsx(View,{style:[h.circle,{width:24,height:24,borderRadius:x.radius.pill,...smoothCorners,backgroundColor:S,borderColor:f},m],children:t.icon?t.icon:_jsx(Text,C?{style:[h.glyph,{color:w}],children:"✓"}:{style:[h.glyph,{color:w}],children:e+1})})]});return a?_jsx(Pressable,{onPress:()=>p(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:v,accessibilityState:{selected:y,disabled:!c},"aria-selected":y,"aria-disabled":!c,hitSlop:8,...hitSlopMarker(8),children:j}):_jsx(View,{accessibilityRole:"text",accessibilityLabel:v,accessibilityState:{selected:y},"aria-selected":y,children:j})},buildCircleStyles=e=>StyleSheet.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{fontSize:e.text.sm.size,fontWeight:"600",includeFontPadding:!1}}),Stepper=forwardRef((e,t)=>{const{steps:i,activeStep:s,defaultActiveStep:o=0,pressMode:l="none",onStepPress:r,onActiveStepChange:n,variant:a="horizontal",tone:c="primary",formatCaption:d,showCaption:p=!0,loading:u=!1,accessibilityLabel:h,style:m,containerStyle:y,circleStyle:x,labelStyle:g,connectorStyle:b,haptic:S,testID:f}=e,w=useTheme(),C=w.settings.components.stepper?.pulseAnimation??!1,v=resolveHaptic(S,"selection"),j=useMemo(()=>buildStyles(w),[w]),_=useMemo(()=>buildCircleStyles(w),[w]),V=toneColorFor(w,c),k=w.colors.border,R=w.colors.bg,I=w.colors["text-muted"],A=toneOnColorFor(w,c),E=i.length,L="none"!==l,T=void 0!==s,[$,D]=useState(o),P=T?s:$,F=null==P||P<0?null:P,z=i.map((e,t)=>(e=>null===F?"upcoming":e<F?"complete":e===F?"active":"upcoming")(t)),M=z.filter(e=>"upcoming"!==e).length,B=z.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===l?"complete"===e:L,handleStepPress=e=>{if(!canPressStatus(z[e]))return;v&&triggerHaptic(v),r?.(e);const t="select"===l&&e===F?null:e;T||D(t),n?.(t)},O=useRef(createAnimatedValue(M)).current,N=useRef(M);useEffect(()=>{const e=N.current;if(e===M)return;N.current=M;const t=Animated.timing(O,{toValue:M,duration:w.motion.duration.default*Math.abs(M-e),easing:Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[M,O,w.motion]);const sliceOf=e=>O.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),H=E<=1?"0%":O.interpolate({inputRange:[1,E],outputRange:["0%","100%"],extrapolate:"clamp"}),U=null!==F&&F<E?F:null,G=h??(null!==U?`Progress: step ${U+1} of ${E}`:`Progress: ${B} of ${E} steps done`),[W,q]=useState(0),Z=E>0&&W>0?W/(2*E):0,J=_jsx(View,{ref:t,style:[j.container,y,m],testID:f,accessibilityRole:"progressbar",accessibilityLabel:G,accessibilityValue:{min:0,max:E,now:M},children:"segmented"===a?(()=>{const e=null!==U?i[U]:void 0,t=p?d?d(U,E,e):null!==U?`Step ${U+1} of ${E}${e?.label?` · ${e.label}`:""}`:`${B} of ${E} done`:"";return _jsxs(View,{children:[p?_jsx(Text,{style:[j.sCaption,{color:w.colors["text-muted"],fontSize:w.text.sm.size,marginBottom:w.space.sm},g],numberOfLines:1,children:t}):null,_jsx(View,{style:j.sRow,children:i.map((e,t)=>{const i=z[t],s=`Step ${t+1} of ${E}, ${e.label}, ${i}`,o=_jsx(View,{testID:f?`${f}-segment-${t}`:void 0,style:[j.sTrack,{backgroundColor:k},b],children:_jsx(Animated.View,{style:[j.sFill,{backgroundColor:V,width:sliceOf(t)}]})});if(L){const l=canPressStatus(i);return _jsx(Pressable,{style:j.sItem,onPress:()=>handleStepPress(t),disabled:!l,accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:"active"===i,disabled:!l},"aria-selected":"active"===i,"aria-disabled":!l,hitSlop:{top:12,bottom:12},...hitSlopMarker({top:12,bottom:12}),children:o},e.key)}return _jsx(View,{style:j.sItem,accessibilityRole:"text",accessibilityLabel:s,accessibilityState:{selected:"active"===i},"aria-selected":"active"===i,children:o},e.key)})})]})})():"vertical"===a?_jsx(View,{style:j.vCol,children:i.map((e,t)=>{const i=z[t],s=t===E-1;return _jsxs(View,{style:j.vRow,children:[_jsxs(View,{style:j.vLeft,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),s?null:_jsxs(View,{style:[j.vConnectorContainer,b],children:[_jsx(View,{style:[j.vConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.vConnectorFill,{backgroundColor:V,height:sliceOf(t+1)}]})]})]}),_jsxs(View,{style:j.vBody,children:[_jsx(Text,{style:[j.vLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.base.size,fontWeight:w.weight.semibold},g],numberOfLines:1,children:e?.label??" "}),e.description?_jsx(Text,{style:[j.vDescription,{color:w.colors["text-muted"],fontSize:w.text.sm.size}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):_jsxs(View,{style:j.hRow,onLayout:e=>q(e.nativeEvent.layout.width),children:[_jsxs(View,{pointerEvents:"none",style:[j.hConnectorContainer,{left:Z,right:Z},b],children:[_jsx(View,{style:[j.hConnectorTrack,{backgroundColor:k}]}),_jsx(Animated.View,{style:[j.hConnectorFill,{backgroundColor:V,width:H}]})]}),i.map((e,t)=>{const i=z[t];return _jsxs(View,{style:j.hStepItem,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:k,upcomingFillColor:R,onPressColor:V,textOnColor:A,upcomingTextColor:I,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,pulseEnabled:C,circleStyles:_,circleSlotStyle:x}),_jsx(Text,{style:[j.hLabel,{color:"upcoming"===i?w.colors["text-subtle"]:w.colors["text-body"],fontSize:w.text.xs.size},g],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return u?_jsx(StepperSkeleton,{...e}):J});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:i=!0,containerStyle:s,style:o,testID:l})=>{const r=useTheme(),n=useMemo(()=>buildStyles(r),[r]),a=useMemo(()=>buildSkeletonStyles(r),[r]),c=e.length||3;return"segmented"===t?_jsxs(View,{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:r.space.sm}}):null,_jsx(View,{style:n.sRow,children:Array.from({length:c}).map((e,t)=>_jsx(View,{style:n.sItem,children:_jsx(Skeleton,{width:"100%",height:4,radius:"pill"})},`sk-step-${t}`))})]}):_jsx(View,"vertical"===t?{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsx(View,{style:a.vCol,children:Array.from({length:c}).map((e,t)=>{const i=t===c-1;return _jsxs(View,{style:a.vRow,children:[_jsxs(View,{style:[a.vLeft,{width:32}],children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),i?null:_jsx(Skeleton,{width:2,height:36})]}),_jsxs(View,{style:a.vBody,children:[_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:r.space.xs}}),_jsx(Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[n.container,s,o],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsxs(View,{style:n.hRow,children:[_jsx(View,{pointerEvents:"none",style:[n.hConnectorContainer,{left:50/c+"%",right:50/c+"%"}],children:_jsx(Skeleton,{width:"100%",height:2,radius:"pill"})}),Array.from({length:c}).map((e,t)=>_jsxs(View,{style:n.hStepItem,children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),_jsx(Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:r.space.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",Stepper.Skeleton=StepperSkeleton;const buildSkeletonStyles=e=>StyleSheet.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:e.space.md,paddingBottom:e.space.lg}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},hRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",position:"relative"},hConnectorContainer:{position:"absolute",top:11,height:2,flexDirection:"row",alignItems:"center"},hConnectorTrack:{position:"absolute",left:0,right:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hStepItem:{alignItems:"center",flex:1},hLabel:{marginTop:e.space.xs,textAlign:"center"},vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center",alignSelf:"stretch",width:32},vConnectorContainer:{flex:1,width:2,minHeight:32,position:"relative",alignSelf:"center"},vConnectorTrack:{position:"absolute",top:0,bottom:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vBody:{flex:1,paddingLeft:e.space.sm,paddingBottom:e.space.md},vLabel:{marginBottom:e.space.xxs},vDescription:{},sCaption:{includeFontPadding:!1},sRow:{flexDirection:"row",columnGap:e.space.xs},sItem:{flex:1},sTrack:{height:4,borderRadius:e.radius.pill,overflow:"hidden"},sFill:{height:4,borderRadius:e.radius.pill}});export{Stepper};export default Stepper;
+"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.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";export const DEFAULT_STEPPER_LABELS=Object.freeze({step:(e,t,s,i)=>`Step ${e} of ${t}, ${s}, ${i}`,statusComplete:"complete",statusActive:"active",statusUpcoming:"upcoming",progressStep:(e,t)=>`Progress: step ${e} of ${t}`,progressDone:(e,t)=>`Progress: ${e} of ${t} steps done`,captionStep:(e,t,s)=>`Step ${e} of ${t}${s?` · ${s}`:""}`,captionDone:(e,t)=>`${e} of ${t} done`});const CIRCLE_SIZE=24,SEGMENT_HEIGHT=4,PULSE_SIZE=32,PULSE_DURATION=1100,toneColorFor=(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.neutral;default:return e.colors.primary}},toneOnColorFor=(e,t)=>{switch(t){case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];case"info":return e.colors["on-info"];case"neutral":return e.colors["on-neutral"];default:return e.colors["on-primary"]}},statusWordFor=(e,t)=>{switch(t){case"complete":return e.statusComplete;case"active":return e.statusActive;default:return e.statusUpcoming}},StepCircle=({index:e,step:t,status:s,toneColor:i,upcomingColor:o,upcomingFillColor:r,textOnColor:l,upcomingTextColor:n,interactive:a,canPress:c,totalSteps:u,onPress:p,pulseEnabled:d,labels:m,circleStyles:h,circleSlotStyle:g})=>{const y="active"===s,b=useTheme(),x=useRef(createAnimatedValue(1)).current,S=useRef(createAnimatedValue(.5)).current;useEffect(()=>{if(!y||!d)return x.setValue(1),void S.setValue(0);const e=Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(x,{toValue:1.4,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(x,{toValue:1,duration:0,useNativeDriver:!0})]),Animated.sequence([Animated.timing(S,{toValue:0,duration:1100,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(S,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[y,x,S,d]);const w="upcoming"===s?r:i,f="upcoming"===s?o:i,v="upcoming"===s?n:l,C="complete"===s,j=m.step(e+1,u,t.label,statusWordFor(m,s)),_=_jsxs(View,{style:h.relative,children:[y&&d?_jsx(Animated.View,{pointerEvents:"none",style:[h.pulse,{width:32,height:32,borderRadius:b.radius.pill,...smoothCorners,backgroundColor:i,opacity:S,transform:[{scale:x}]}]}):null,_jsx(View,{style:[h.circle,{width:24,height:24,borderRadius:b.radius.pill,...smoothCorners,backgroundColor:w,borderColor:f},g],children:t.icon?t.icon:_jsx(Text,C?{variant:"bodySmall",weight:"semibold",style:[h.glyph,{color:v}],children:"✓"}:{variant:"bodySmall",weight:"semibold",style:[h.glyph,{color:v}],children:e+1})})]});return a?_jsx(Pressable,{onPress:()=>p(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:j,accessibilityState:{selected:y,disabled:!c},"aria-selected":y,"aria-disabled":!c,hitSlop:8,...hitSlopMarker(8),children:_}):_jsx(View,{accessibilityRole:"text",accessibilityLabel:j,accessibilityState:{selected:y},"aria-selected":y,children:_})},buildCircleStyles=()=>StyleSheet.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{includeFontPadding:!1}}),Stepper=forwardRef((e,t)=>{const{steps:s,activeStep:i,defaultActiveStep:o=0,pressMode:r="none",onStepPress:l,onActiveStepChange:n,variant:a="horizontal",tone:c="primary",formatCaption:u,showCaption:p=!0,loading:d=!1,labels:m,accessibilityLabel:h,style:g,containerStyle:y,circleStyle:b,labelStyle:x,connectorStyle:S,haptic:w,testID:f}=e;warnInvalidValue("Stepper","variant",e.variant,["horizontal","vertical","segmented"]),warnInvalidValue("Stepper","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Stepper","pressMode",e.pressMode,["none","back","select"]);const v=useMemo(()=>({...DEFAULT_STEPPER_LABELS,...m}),[m]),C=useTheme(),j=C.settings.components.stepper?.pulseAnimation??!1,_=resolveHaptic(w,"selection"),V=useMemo(()=>buildStyles(C),[C]),k=useMemo(()=>buildCircleStyles(),[]),R=toneColorFor(C,c),I=C.colors.border,A=C.colors.bg,E=C.colors["text-muted"],L=toneOnColorFor(C,c),T=s.length,D="none"!==r,P=void 0!==i,[F,$]=useState(o),M=P?i:F,B=null==M||M<0?null:M,O=s.map((e,t)=>(e=>null===B?"upcoming":e<B?"complete":e===B?"active":"upcoming")(t)),N=O.filter(e=>"upcoming"!==e).length,U=O.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===r?"complete"===e:D,handleStepPress=e=>{if(!canPressStatus(O[e]))return;_&&triggerHaptic(_),l?.(e);const t="select"===r&&e===B?null:e;P||$(t),n?.(t)},H=useRef(createAnimatedValue(N)).current,z=useRef(N);useEffect(()=>{const e=z.current;if(e===N)return;z.current=N;const t=Animated.timing(H,{toValue:N,duration:C.motion.duration.default*Math.abs(N-e),easing:Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[N,H,C.motion]);const sliceOf=e=>H.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),W=T<=1?"0%":H.interpolate({inputRange:[1,T],outputRange:["0%","100%"],extrapolate:"clamp"}),G=null!==B&&B<T?B:null,q=h??(null!==G?v.progressStep(G+1,T):v.progressDone(U,T)),[Z,J]=useState(0),K=T>0&&Z>0?Z/(2*T):0,Q=_jsx(View,{ref:t,style:[V.container,y,g],testID:f,accessibilityRole:"progressbar",accessibilityLabel:q,accessibilityValue:{min:0,max:T,now:N},children:"segmented"===a?(()=>{const e=null!==G?s[G]:void 0,t=p?u?u(G,T,e):null!==G?v.captionStep(G+1,T,e?.label):v.captionDone(U,T):"";return _jsxs(View,{children:[p?_jsx(Text,{variant:"bodySmall",style:[V.sCaption,{marginBottom:C.space.sm},x],numberOfLines:1,children:t}):null,_jsx(View,{style:V.sRow,children:s.map((e,t)=>{const s=O[t],i=v.step(t+1,T,e.label,statusWordFor(v,s)),o=_jsx(View,{testID:f?`${f}-segment-${t}`:void 0,style:[V.sTrack,{backgroundColor:I},S],children:_jsx(Animated.View,{style:[V.sFill,{backgroundColor:R,width:sliceOf(t)}]})});if(D){const r=canPressStatus(s);return _jsx(Pressable,{style:V.sItem,onPress:()=>handleStepPress(t),disabled:!r,accessibilityRole:"button",accessibilityLabel:i,accessibilityState:{selected:"active"===s,disabled:!r},"aria-selected":"active"===s,"aria-disabled":!r,hitSlop:{top:12,bottom:12},...hitSlopMarker({top:12,bottom:12}),children:o},e.key)}return _jsx(View,{style:V.sItem,accessibilityRole:"text",accessibilityLabel:i,accessibilityState:{selected:"active"===s},"aria-selected":"active"===s,children:o},e.key)})})]})})():"vertical"===a?_jsx(View,{style:V.vCol,children:s.map((e,t)=>{const s=O[t],i=t===T-1;return _jsxs(View,{style:V.vRow,children:[_jsxs(View,{style:V.vLeft,children:[_jsx(StepCircle,{index:t,step:e,status:s,toneColor:R,upcomingColor:I,upcomingFillColor:A,onPressColor:R,textOnColor:L,upcomingTextColor:E,interactive:D,canPress:canPressStatus(s),totalSteps:T,onPress:handleStepPress,pulseEnabled:j,labels:v,circleStyles:k,circleSlotStyle:b}),i?null:_jsxs(View,{style:[V.vConnectorContainer,S],children:[_jsx(View,{style:[V.vConnectorTrack,{backgroundColor:I}]}),_jsx(Animated.View,{style:[V.vConnectorFill,{backgroundColor:R,height:sliceOf(t+1)}]})]})]}),_jsxs(View,{style:V.vBody,children:[_jsx(Text,{variant:"body",weight:"semibold",style:[V.vLabel,{color:"upcoming"===s?C.colors["text-subtle"]:C.colors["text-body"]},x],numberOfLines:1,children:e?.label??" "}),e.description?_jsx(Text,{variant:"bodySmall",style:V.vDescription,numberOfLines:3,children:e.description}):null]})]},e.key)})}):_jsxs(View,{style:V.hRow,onLayout:e=>J(e.nativeEvent.layout.width),children:[_jsxs(View,{pointerEvents:"none",style:[V.hConnectorContainer,{left:K,right:K},S],children:[_jsx(View,{style:[V.hConnectorTrack,{backgroundColor:I}]}),_jsx(Animated.View,{style:[V.hConnectorFill,{backgroundColor:R,width:W}]})]}),s.map((e,t)=>{const s=O[t];return _jsxs(View,{style:V.hStepItem,children:[_jsx(StepCircle,{index:t,step:e,status:s,toneColor:R,upcomingColor:I,upcomingFillColor:A,onPressColor:R,textOnColor:L,upcomingTextColor:E,interactive:D,canPress:canPressStatus(s),totalSteps:T,onPress:handleStepPress,pulseEnabled:j,labels:v,circleStyles:k,circleSlotStyle:b}),_jsx(Text,{variant:"caption",style:[V.hLabel,{color:"upcoming"===s?C.colors["text-subtle"]:C.colors["text-body"]},x],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return d?_jsx(StepperSkeleton,{...e}):Q});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:s=!0,containerStyle:i,style:o,testID:r})=>{const l=useTheme(),n=useMemo(()=>buildStyles(l),[l]),a=useMemo(()=>buildSkeletonStyles(l),[l]),c=e.length||3;return"segmented"===t?_jsxs(View,{style:[n.container,i,o],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[s?_jsx(Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:l.space.sm}}):null,_jsx(View,{style:n.sRow,children:Array.from({length:c}).map((e,t)=>_jsx(View,{style:n.sItem,children:_jsx(Skeleton,{width:"100%",height:4,radius:"pill"})},`sk-step-${t}`))})]}):_jsx(View,"vertical"===t?{style:[n.container,i,o],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsx(View,{style:a.vCol,children:Array.from({length:c}).map((e,t)=>{const s=t===c-1;return _jsxs(View,{style:a.vRow,children:[_jsxs(View,{style:[a.vLeft,{width:32}],children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),s?null:_jsx(Skeleton,{width:2,height:36})]}),_jsxs(View,{style:a.vBody,children:[_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:l.space.xs}}),_jsx(Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[n.container,i,o],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:_jsxs(View,{style:n.hRow,children:[_jsx(View,{pointerEvents:"none",style:[n.hConnectorContainer,{left:50/c+"%",right:50/c+"%"}],children:_jsx(Skeleton,{width:"100%",height:2,radius:"pill"})}),Array.from({length:c}).map((e,t)=>_jsxs(View,{style:n.hStepItem,children:[_jsx(Skeleton,{shape:"circle",width:24,height:24}),_jsx(Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:l.space.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",Stepper.Skeleton=StepperSkeleton;const buildSkeletonStyles=e=>StyleSheet.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:e.space.md,paddingBottom:e.space.lg}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},hRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",position:"relative"},hConnectorContainer:{position:"absolute",top:11,height:2,flexDirection:"row",alignItems:"center"},hConnectorTrack:{position:"absolute",left:0,right:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:e.radius.pill,...smoothCorners},hStepItem:{alignItems:"center",flex:1},hLabel:{marginTop:e.space.xs,textAlign:"center"},vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center",alignSelf:"stretch",width:32},vConnectorContainer:{flex:1,width:2,minHeight:32,position:"relative",alignSelf:"center"},vConnectorTrack:{position:"absolute",top:0,bottom:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:e.radius.pill,...smoothCorners},vBody:{flex:1,paddingLeft:e.space.sm,paddingBottom:e.space.md},vLabel:{marginBottom:e.space.xxs},vDescription:{},sCaption:{includeFontPadding:!1},sRow:{flexDirection:"row",columnGap:e.space.xs},sItem:{flex:1},sTrack:{height:4,borderRadius:e.radius.pill,overflow:"hidden"},sFill:{height:4,borderRadius:e.radius.pill}});export{Stepper};export default Stepper;

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

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

package/lib/module/components/Swipeable/Swipeable.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.neutral}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors["on-primary"];case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-neutral"]}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:i,threshold:s,fullSwipeThreshold:o,onSwipeOpen:r,onSwipeClose:l,disabled:a=!1,haptic:c,containerStyle:u,contentStyle:d,actionStyle:h,accessibilityLabel:m,testID:S}=e,p=useTheme(),g=s??80,w=o??200,b=useMemo(()=>buildStyles(p),[p]),f=useMemo(()=>buildActionStyles(p),[p]),y=!!n&&n.length>0,x=!!i&&i.length>0,v=Dimensions.get("window").width,A=y?g*(n?.length??0):0,_=x?g*(i?.length??0):0,C=useSharedValue(0),I=useSharedValue(0),O=useRef(null);useEffect(()=>()=>{cancelAnimation(C),cancelAnimation(I)},[C,I]);const G=useCallback(e=>{O.current!==e&&(O.current=e,r?.(e))},[r]),j=useCallback(()=>{null!==O.current&&(O.current=null,l?.())},[l]),N=useCallback(e=>{const t="left"===e?n:i,s=t?.[0];s&&(!1!==c&&triggerHaptic("notificationSuccess"),s.onPress(),C.value=withSpring(0,SPRING_CONFIG),O.current=null,l?.())},[n,i,C,l,c]),R=useCallback(()=>{C.value=withSpring(0,SPRING_CONFIG),j()},[C,j]),k=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),R()},[R,c]),P=useMemo(()=>{const e=A,t=_,n=w,i=-w,s=v,o=-v,r=g,l=y,c=x;return Gesture.Pan().enabled(!a).withTestId(S?`${S}-gesture`:"swipeable-gesture").activeOffsetX([-10,10]).failOffsetY([-15,15]).onStart(()=>{"worklet";I.value=C.value}).onUpdate(n=>{"worklet";const i=I.value+n.translationX;C.value=i>0&&!l||i<0&&!c?0:i>e&&l?e+.35*(i-e):i<-t&&c?.35*(i+t)-t:i}).onEnd(()=>{"worklet";const a=C.value;return l&&a>=n?(C.value=withSpring(s,SPRING_CONFIG),void runOnJS(N)("left")):c&&a<=i?(C.value=withSpring(o,SPRING_CONFIG),void runOnJS(N)("right")):l&&a>=r?(C.value=withSpring(e,SPRING_CONFIG),void runOnJS(G)("left")):c&&a<=-r?(C.value=withSpring(-t,SPRING_CONFIG),void runOnJS(G)("right")):(C.value=withSpring(0,SPRING_CONFIG),void runOnJS(j)())})},[a,I,N,w,y,x,A,j,G,_,v,g,C,S]),T=useAnimatedStyle(()=>({transform:[{translateX:C.value}]})),F=useAnimatedStyle(()=>({opacity:A>0?Math.min(1,Math.max(0,C.value/A)):0})),E=useAnimatedStyle(()=>({opacity:_>0?Math.min(1,Math.max(0,-C.value/_)):0})),V=useMemo(()=>{const e=[];return n?.forEach(t=>{e.push({name:t.key,label:t.label})}),i?.forEach(t=>{e.push({name:t.key,label:t.label})}),e},[n,i]),D=useCallback(e=>{const t=e.nativeEvent.actionName,s=[...n??[],...i??[]].find(e=>e.key===t);s&&(!1!==c&&triggerHaptic("selection"),s.onPress())},[n,i,c]);return y||x?_jsxs(View,{style:[b.root,u],testID:S,accessibilityLabel:m,accessibilityActions:V,onAccessibilityAction:D,children:[y?_jsx(Animated.View,{style:[b.actionsRow,b.actionsLeft,{width:A},h,F],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,x?_jsx(Animated.View,{style:[b.actionsRow,b.actionsRight,{width:_},h,E],pointerEvents:"box-none",children:i?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,_jsx(GestureDetector,{gesture:P,children:_jsx(Animated.View,{style:[b.content,d,T],children:t})})]}):_jsx(View,{style:u,testID:S,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:i,onPress:s})=>{const o=e.tone??"neutral",r=toneToBg(t,o);return _jsxs(Pressable,{onPress:()=>s(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:i,backgroundColor:r,paddingHorizontal:t.space.sm}],children:[e.icon?_jsx(View,{style:n.icon,children:e.icon}):null,_jsx(Text,{style:[n.label,{color:toneToOnColor(t,o),fontSize:t.text.sm.size,fontWeight:t.weight.semibold}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.space.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;
+"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,ACTION_ICON_SIZE=20,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;default:return e.colors.neutral}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors["on-primary"];case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];case"info":return e.colors["on-info"];default:return e.colors["on-neutral"]}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:o,threshold:i,fullSwipeThreshold:r,onSwipeOpen:s,onSwipeClose:a,disabled:l=!1,haptic:c,containerStyle:u,contentStyle:d,actionStyle:m,accessibilityLabel:h,testID:p}=e,S=useTheme(),w=i??80,b=r??200,f=useMemo(()=>buildStyles(S),[S]),g=useMemo(()=>buildActionStyles(S),[S]),y=!!n&&n.length>0,v=!!o&&o.length>0,x=Dimensions.get("window").width,I=y?w*(n?.length??0):0,A=v?w*(o?.length??0):0,_=useSharedValue(0),C=useSharedValue(0),O=useRef(null);useEffect(()=>()=>{cancelAnimation(_),cancelAnimation(C)},[_,C]);const j=useCallback(e=>{O.current!==e&&(O.current=e,s?.(e))},[s]),G=useCallback(()=>{null!==O.current&&(O.current=null,a?.())},[a]),N=useCallback(e=>{const t="left"===e?n:o,i=t?.[0];i&&(!1!==c&&triggerHaptic("notificationSuccess"),i.onPress(),_.value=withSpring(0,SPRING_CONFIG),O.current=null,a?.())},[n,o,_,a,c]),R=useCallback(()=>{_.value=withSpring(0,SPRING_CONFIG),G()},[_,G]),k=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),R()},[R,c]),P=useMemo(()=>{const e=I,t=A,n=b,o=-b,i=x,r=-x,s=w,a=y,c=v;return Gesture.Pan().enabled(!l).withTestId(p?`${p}-gesture`:"swipeable-gesture").activeOffsetX([-10,10]).failOffsetY([-15,15]).onStart(()=>{"worklet";C.value=_.value}).onUpdate(n=>{"worklet";const o=C.value+n.translationX;_.value=o>0&&!a||o<0&&!c?0:o>e&&a?e+.35*(o-e):o<-t&&c?.35*(o+t)-t:o}).onEnd(()=>{"worklet";const l=_.value;return a&&l>=n?(_.value=withSpring(i,SPRING_CONFIG),void runOnJS(N)("left")):c&&l<=o?(_.value=withSpring(r,SPRING_CONFIG),void runOnJS(N)("right")):a&&l>=s?(_.value=withSpring(e,SPRING_CONFIG),void runOnJS(j)("left")):c&&l<=-s?(_.value=withSpring(-t,SPRING_CONFIG),void runOnJS(j)("right")):(_.value=withSpring(0,SPRING_CONFIG),void runOnJS(G)())})},[l,C,N,b,y,v,I,G,j,A,x,w,_,p]),T=useAnimatedStyle(()=>({transform:[{translateX:_.value}]})),F=useAnimatedStyle(()=>({opacity:I>0?Math.min(1,Math.max(0,_.value/I)):0})),V=useAnimatedStyle(()=>({opacity:A>0?Math.min(1,Math.max(0,-_.value/A)):0})),E=useMemo(()=>{const e=[];return n?.forEach(t=>{e.push({name:t.key,label:t.label})}),o?.forEach(t=>{e.push({name:t.key,label:t.label})}),e},[n,o]),D=useCallback(e=>{const t=e.nativeEvent.actionName,i=[...n??[],...o??[]].find(e=>e.key===t);i&&(!1!==c&&triggerHaptic("selection"),i.onPress())},[n,o,c]);return y||v?_jsxs(View,{style:[f.root,u],testID:p,accessibilityLabel:h,accessibilityActions:E,onAccessibilityAction:D,children:[y?_jsx(Animated.View,{style:[f.actionsRow,f.actionsLeft,{width:I},m,F],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:S,actionStyles:g,width:w,onPress:k},e.key))}):null,v?_jsx(Animated.View,{style:[f.actionsRow,f.actionsRight,{width:A},m,V],pointerEvents:"box-none",children:o?.map(e=>_jsx(ActionButton,{action:e,theme:S,actionStyles:g,width:w,onPress:k},e.key))}):null,_jsx(GestureDetector,{gesture:P,children:_jsx(Animated.View,{style:[f.content,d,T],children:t})})]}):_jsx(View,{style:u,testID:p,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:o,onPress:i})=>{warnInvalidValue("Swipeable","tone",e.tone,["primary","success","warning","danger","info","neutral"]);const r=e.tone??"neutral",s=toneToBg(t,r),a=renderSlotIcon(e.icon,{color:toneToOnColor(t,r),size:20,disabled:!1});return _jsxs(Pressable,{onPress:()=>i(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:o,backgroundColor:s,paddingHorizontal:t.space.sm}],children:[a?_jsx(View,{style:n.icon,children:a}):null,_jsx(Text,{variant:"bodySmall",weight:"semibold",style:[n.label,{color:toneToOnColor(t,r)}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.space.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;

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,resolveSwitchSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.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"danger":return e.colors.danger;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:p="inline",accessibilityLabel:m,haptic:h="selection",bounce:f=!1,style:b,containerStyle:g,trackStyle:y,thumbStyle:w,testID:x,hitSlop:S,...j}=e,[C,R]=useControllableState({value:i,defaultValue:s??!1,onChange:r}),v=useTheme(),T=useMemo(()=>resolveSwitchSize(v,o),[v,o]),k=v.colors.thumb,A=useMemo(()=>buildStyles(v),[v]),V="dark"===v.mode?v.colors.neutral:v.colors["surface-disabled"],D=toneColor(v,n),_=S??8,L=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(L,{toValue:C?1:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,L,v.motion.spring.snappy]);const E=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(E,{toValue:C?1:0,duration:v.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,E,v.motion.duration.fast]);const z=T.padding,F=T["track-width"]-T["thumb-size"]-T.padding,H=L.interpolate({inputRange:[0,1],outputRange:[z,F]}),M=E.interpolate({inputRange:[0,1],outputRange:[V,D]}),P=useRef(createAnimatedValue(1)).current,I=useRef(!0);useEffect(()=>{if(!f)return;if(I.current)return void(I.current=!1);const e=Animated.sequence([Animated.spring(P,{toValue:1.15,damping:10,stiffness:220,mass:1,useNativeDriver:!0}),Animated.spring(P,{toValue:1,damping:14,stiffness:240,mass:1,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[C,f,P]);const handlePress=e=>{a||(!1!==h&&triggerHaptic(h),R(!C),j.onPressOut?.(e))},N=m??fieldTextAsString(l),B=hasFieldText(l)||hasChoiceDetail(c,d),q=(!0===d||hasFieldText(d))&&!C&&!a,O="row"===p&&B,U=_jsxs(Animated.View,{style:[A.track,{width:T["track-width"],height:T["track-height"],borderRadius:v.radius.pill,...smoothCorners,backgroundColor:M},y],children:[q?_jsx(View,{pointerEvents:"none",style:[A.errorRing,{borderRadius:v.radius.pill,...smoothCorners,borderWidth:v.size.border,borderColor:v.colors["field-border-error"]}]}):null,_jsx(Animated.View,{style:[A.thumb,v.shadow.card,{backgroundColor:k,width:T["thumb-size"],height:T["thumb-size"],borderRadius:v.radius.pill,...smoothCorners,transform:[{translateX:H},{scale:P}]},w]})]});if(O)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:N,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:S,...null==S?{}:hitSlopMarker(S),...j,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}),U]});const W=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:N,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:_,...hitSlopMarker(_),...j,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},B?null:b],children:U});return B?_jsxs(View,{style:[A.row,hasChoiceDetail(c,d)?A.rowTop:null,g,b],children:[W,_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:W}):W});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.space.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.space.md}});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{hitSlopMarker}from"../../utils/hitSlop.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.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"danger":return e.colors.danger;case"info":return e.colors.info;case"neutral":return e.colors.neutral;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,helperText:d,error:u,layout:p="inline",accessibilityLabel:m,haptic:h="selection",bounce:f=!1,style:b,containerStyle:g,trackStyle:w,thumbStyle:y,testID:x,hitSlop:S,...j}=e,T=useTheme(),v=Object.keys(T.components.switch);warnInvalidValue("Switch","size",e.size,v),warnInvalidValue("Switch","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Switch","layout",e.layout,["inline","row"]);const[C,R]=useControllableState({value:i,defaultValue:s??!1,onChange:r}),V=v.includes(o)?o:"md",k=useMemo(()=>resolveSwitchSize(T,V),[T,V]),A=T.colors.thumb,_=useMemo(()=>buildStyles(T),[T]),D="dark"===T.mode?T.colors.neutral:T.colors["surface-disabled"],I=toneColor(T,n),z=S??8,E=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.spring(E,{toValue:C?1:0,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[C,E,T.motion.spring.snappy]);const F=useRef(createAnimatedValue(C?1:0)).current;useEffect(()=>{const e=Animated.timing(F,{toValue:C?1:0,duration:T.motion.duration.fast,easing:Easing.out(Easing.ease),useNativeDriver:!1});return e.start(),()=>e.stop()},[C,F,T.motion.duration.fast]);const H=k.padding,M=k["track-width"]-k["thumb-size"]-k.padding,P=E.interpolate({inputRange:[0,1],outputRange:[H,M]}),N=F.interpolate({inputRange:[0,1],outputRange:[D,I]}),L=useRef(createAnimatedValue(1)).current,B=useRef(!0);useEffect(()=>{if(!f)return;if(B.current)return void(B.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,f,L]);const handlePress=e=>{a||(!1!==h&&triggerHaptic(h),R(!C),j.onPressOut?.(e))},O=m??fieldTextAsString(l),q="string"==typeof u?u:void 0,U=hasChoiceDetail({description:c,error:q,helperText:d}),W=hasFieldText(l)||U,X=(!0===u||hasFieldText(u))&&!C&&!a,G="row"===p&&W,J=_jsxs(Animated.View,{style:[_.track,{width:k["track-width"],height:k["track-height"],borderRadius:T.radius.pill,...smoothCorners,backgroundColor:N},w],children:[X?_jsx(View,{pointerEvents:"none",style:[_.errorRing,{borderRadius:T.radius.pill,...smoothCorners,borderWidth:T.size.border,borderColor:T.colors["field-border-error"]}]}):null,_jsx(Animated.View,{style:[_.thumb,T.shadow.card,{backgroundColor:A,width:k["thumb-size"],height:k["thumb-size"],borderRadius:T.radius.pill,...smoothCorners,transform:[{translateX:P},{scale:L}]},y]})]});if(G)return _jsxs(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:O,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:S,...null==S?{}:hitSlopMarker(S),...j,style:({pressed:e})=>[_.row,_.spreadRow,U?_.rowTop:null,{opacity:a?.55:e?.9:1},g,b],children:[_jsx(ChoiceText,{label:l,description:c,helperText:d,error:q,disabled:a,style:_.spreadText}),J]});const K=_jsx(Pressable,{ref:t,onPress:handlePress,disabled:a,accessibilityRole:"switch",accessibilityLabel:O,accessibilityHint:j.accessibilityHint??fieldTextAsString(c),accessibilityState:{checked:C,disabled:a},"aria-checked":C,"aria-disabled":a,testID:x,hitSlop:z,...hitSlopMarker(z),...j,style:({pressed:e})=>[{opacity:a?.55:e?.9:1},W?null:b],children:J});return W?_jsxs(View,{style:[_.row,U?_.rowTop:null,g,b],children:[K,_jsx(ChoiceText,{label:l,description:c,helperText:d,error:q,disabled:a,style:_.text})]}):g?_jsx(View,{style:g,children:K}):K});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.space.sm},spreadRow:{minHeight:44,justifyContent:"space-between"},spreadText:{flex:1,marginRight:e.space.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,resolveSegmentedControlSize,resolveTabsSize,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:s,variant:o="underline",radius:a,size:l="md",scrollable:n=!1,align:d="left",style:c,containerStyle:u,tabStyle:m,tabLabelStyle:p,tabIconStyle:b,tabBadgeStyle:g,dividerStyle:h,indicatorStyle:f,progress:y,haptic:x,accessibilityLabel:S,testID:v}=e,w=useTheme(),j=useMemo(()=>buildStyles(w),[w]),C=w.components.tabs,k=useMemo(()=>resolveTabsSize(w,l),[w,l]),z=n?k["scrollable-padding-x"]:k["padding-x"],R=k["padding-y"],V=k.text,_=w.space[C["icon-gap"]],T=k.icon,I=C["underline-height"],L=w.space[C["pill-inset"]],F=C["disabled-opacity"],A=w.space[C["badge-gap"]],H="segmented"===o,M=useMemo(()=>resolveSegmentedControlSize(w,l),[w,l]),P=w.space[C["track-padding"]],q="number"==typeof a?a:a?w.radius[a]:void 0,D=q??w.radius.md,B=void 0===q?w.radius.sm:Math.max(q-P,0),W=q??w.radius.pill,E=q??w.radius.none,N=w.colors["bg-muted"],O=useSquircle(H,D),[U,K]=useState({}),X=useRef(createAnimatedValue(0)).current,G=useRef(createAnimatedValue(0)).current,J=U[r],Q=i.every(e=>void 0!==U[e.key]),Y=void 0!==y&&Q&&i.length>1,Z=useMemo(()=>Y&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].x),extrapolate:"clamp"}):null,[Y,y,i,U]),$=useMemo(()=>Y&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].width),extrapolate:"clamp"}):null,[Y,y,i,U]),ee=useRef(null);useEffect(()=>{if(!J)return;if(Y)return;const e=null!==ee.current&&ee.current!==r;if(ee.current=r,!e)return X.setValue(J.x),void G.setValue(J.width);const t=w.motion.spring.snappy,i=Animated.parallel([Animated.spring(X,{toValue:J.x,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(G,{toValue:J.width,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1})]);return i.start(),()=>i.stop()},[J,r,X,G,w.motion.spring.snappy,Y]);const te=useCallback(e=>t=>{const{x:i,width:r}=t.nativeEvent.layout;K(t=>{const s=t[e];return s&&s.x===i&&s.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),s(e.key)},[r,s,x]),re="pills"===o,se=_jsx(Animated.View,{pointerEvents:"none",style:[H?j.indicatorThumb:re?j.indicatorPill:j.indicatorUnderline,H?null:re?{top:L,bottom:L}:{height:I},{width:$??G,transform:[{translateX:Z??X}],backgroundColor:H?w.colors.surface:re?w.colors["primary-soft"]:w.colors.primary,borderRadius:H?B:re?W:E,...smoothCorners},f]}),renderTabs=()=>i.map(e=>{const t=e.key===r,i=!0===e.disabled,s=t?w.colors.primary:w.colors["text-subtle"],o=renderSlotIcon(e.icon,{color:s,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:H?void 0:{color:w.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[j.tab,n?null:j.tabFlex,H?{paddingHorizontal:M["padding-x"],height:M.height-2*P}:{paddingHorizontal:z,paddingVertical:R},{opacity:i?F:e&&H&&!t?.7:1,backgroundColor:e&&!H?w.colors["surface-pressed"]:"transparent"},m],children:[o?_jsx(View,{style:[j.tabIcon,{marginRight:_},b],children:o}):null,_jsx(Text,{style:[j.tabLabel,{color:s,fontSize:H?M.text:V,fontWeight:t?w.weight.semibold:w.weight.medium},p],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},g],children:_jsx(Text,{style:{color:w.colors.primary,fontSize:w.text.xs.size,fontWeight:w.weight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),oe={flexDirection:"row",alignItems:"stretch",justifyContent:n?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},ae=_jsxs(_Fragment,H?{children:[se,renderTabs()]}:{children:[renderTabs(),se]});return _jsxs(View,{ref:t,style:[j.container,{borderBottomColor:w.colors["border-subtle"],borderBottomWidth:"underline"===o?StyleSheet.hairlineWidth:0},"underline"===o?h:null,H?{padding:P,borderRadius:D,...smoothCorners,backgroundColor:O.active?"transparent":N}:null,c,u],onLayout:O.onLayout,accessibilityRole:"tablist",accessibilityLabel:S,testID:v,children:[O.active&&O.size?_jsx(SquircleFill,{width:O.size.width,height:O.size.height,radius:D,fill:N}):null,n?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[oe],keyboardShouldPersistTaps:"handled",children:ae}):_jsx(View,{style:oe,children:ae})]})});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{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;

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

package/lib/module/components/Text/Text.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"display",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"heading",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"body",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"body",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"body",color:"secondary"},caption:{size:"xs",weight:"normal",line:"body",color:"tertiary"},label:{size:"sm",weight:"medium",line:"body",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"body",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLE_COLOR={textStrong:"text",primary:"text-body",secondary:"text-muted",tertiary:"text-subtle",inverse:"text-inverse",disabled:"text-disabled",link:"link"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0};export const resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;const Text=forwardRef((e,t)=>{const{variant:i="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:d,children:c,...m}=e,y=useTheme(),p=Object.hasOwn(VARIANTS,i),g=y.settings.textVariants,x=!p&&g&&Object.hasOwn(g,i)?g[i]:void 0;p||x||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(g??{})]);const h=useMemo(()=>{if(x){const e="string"==typeof n?n:x.size,t="number"==typeof n?n:y.text[e].size;return{fontSize:t,lineHeight:x.lineHeight??("number"==typeof n?void 0:Math.round(t*y.leading[x.heading?"heading":"body"])),color:void 0!==o?resolveColor(y,o):x.color?y.colors[x.color]:resolveColor(y,"primary"),textAlign:l,textTransform:x.uppercase?"uppercase":void 0,letterSpacing:x.letterSpacing?y["letter-spacing"][x.letterSpacing]:void 0,fontStyle:a||x.italic?"italic":void 0,fontVariant:x.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??x.weight??"normal",x.fontFamily)}}const e=VARIANTS[p?i:"body"],t="number"==typeof n?n:y.text[n??e.size].size;return{fontSize:t,lineHeight:Math.round(t*y.leading[e.line]),color:resolveColor(y,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,x,p,i,o,r,n,l,a,s]),b=useNotationInk([h,d],y.text.base.size,y.colors["text-body"]),f=p?VARIANTS[i].heading:x?.heading,u="string"==typeof c||"number"==typeof c;return _jsx(RNText,{ref:t,style:[h,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:f?"header":m.accessibilityRole,...m,children:u?c:_jsx(NotationInkContext.Provider,{value:b,children:c})})});Text.displayName="Text";export{Text};export default Text;
+"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{TEXT_NAMES}from"../../theme/tokens.generated.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"display",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"heading",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"body",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"body",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"body",color:"secondary"},caption:{size:"xs",weight:"normal",line:"body",color:"tertiary"},label:{size:"sm",weight:"medium",line:"body",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"body",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLE_COLOR={textStrong:"text",primary:"text-body",secondary:"text-muted",tertiary:"text-subtle",inverse:"text-inverse",disabled:"text-disabled",link:"link",brand:"primary"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0,neutral:!0},COLOR_NAMES=["primary","secondary","tertiary","inverse","disabled","link","textStrong","brand","success","warning","danger","info","neutral"];export const resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;const Text=forwardRef((e,t)=>{const{variant:i="body",color:o,weight:r,size:n,align:a,italic:l,underline:s,style:d,children:c,...m}=e,y=useTheme(),g=Object.hasOwn(VARIANTS,i),p=y.settings.textVariants,x=!g&&p&&Object.hasOwn(p,i)?p[i]:void 0;g||x||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(p??{})]),warnInvalidValue("Text","color",o,COLOR_NAMES),warnInvalidValue("Text","size",n,TEXT_NAMES);const h=void 0!==o&&COLOR_NAMES.includes(o)?o:void 0,u=useMemo(()=>{if(x){const e=n??x.size,t=y.text[e].size;return{fontSize:t,lineHeight:x.lineHeight??Math.round(t*y.leading[x.heading?"heading":"body"]),color:void 0!==h?resolveColor(y,h):x.color?y.colors[x.color]:resolveColor(y,"primary"),textAlign:a,textTransform:x.uppercase?"uppercase":void 0,letterSpacing:x.letterSpacing?y["letter-spacing"][x.letterSpacing]:void 0,fontStyle:l||x.italic?"italic":void 0,fontVariant:x.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??x.weight??"normal",x.fontFamily)}}const e=VARIANTS[g?i:"body"],t=y.text[n??e.size].size;return{fontSize:t,lineHeight:Math.round(t*y.leading[e.line]),color:resolveColor(y,h??e.color),textAlign:a,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:l?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,x,g,i,h,r,n,a,l,s]),b=useNotationInk([u,d],y.text.base.size,y.colors["text-body"]),f=g?VARIANTS[i].heading:x?.heading,T="string"==typeof c||"number"==typeof c;return _jsx(RNText,{ref:t,style:[u,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:f?"header":m.accessibilityRole,...m,children:T?c:_jsx(NotationInkContext.Provider,{value:b,children:c})})});Text.displayName="Text";export{Text};export default Text;

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

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

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

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,GUTTER=28,DISC=24,HALO_OPACITY=.16;export const Timeline=({items:e,variant:t="feed",orientation:s="vertical",style:r,testID:o})=>{const i=useTheme(),l=i.space.xs,n=useMemo(()=>buildStyles(i),[i]),c="horizontal"===s,a=i.colors.border,[d,m]=useState(0),u=useCallback(e=>{const{width:t}=e.nativeEvent.layout;m(e=>e===t?e:t)},[]),h=c&&d>0&&e.length>0?d/e.length:0,renderDisc=(e,t)=>e.icon?_jsx(View,{style:n.disc,children:e.icon}):_jsx(View,{style:[n.disc,{backgroundColor:tintOf(t,.16,i.colors["bg-muted"])}],children:_jsx(View,{style:[n.dot,{backgroundColor:t}]})}),renderText=(e,t)=>_jsxs(_Fragment,{children:[_jsx(Text,{style:[n.title,{fontSize:c?i.text.sm.size:i.text.base.size,color:"upcoming"===t?i.colors["text-muted"]:i.colors["text-body"]},c?n.centred:null],children:e.title}),e.meta?_jsx(Text,{style:[n.meta,{fontSize:i.text.xs.size,color:i.colors["text-subtle"]},c?n.centred:null],children:e.meta}):null,e.description?_jsx(Text,{style:[n.description,{fontSize:i.text.sm.size,color:i.colors["text-muted"]},c?n.centred:null],children:e.description}):null,e.children]}),x=e.map((s,r)=>{const o=s.status??("feed"===t?"done":"upcoming"),d=s.color??(e=>{switch(e){case"done":return i.colors.success;case"current":return i.colors.warning;case"onHold":return i.colors.info;case"rejected":return i.colors.danger;case"cancelled":case"skipped":return i.colors["text-subtle"];default:return i.colors["text-disabled"]}})(o),m=0===r,u=r===e.length-1,x=s.key??`${s.title}-${r}`;return _jsxs(View,c?{style:[n.hColumn,h>0?{width:h,flex:0}:null],children:[_jsxs(View,{style:n.hDotRow,children:[_jsx(View,{style:[n.hSegment,{marginRight:l,backgroundColor:m?"transparent":a}]}),renderDisc(s,d),_jsx(View,{style:[n.hSegment,{marginLeft:l,backgroundColor:u?"transparent":a}]})]}),_jsx(View,{style:n.hBody,children:renderText(s,o)})]}:{style:n.row,children:[_jsxs(View,{style:n.gutter,children:[renderDisc(s,d),u?null:_jsx(View,{style:[n.rail,{backgroundColor:a}]})]}),_jsx(View,{style:[n.body,{paddingBottom:u?0:i.space.lg}],children:renderText(s,o)})]},x)});return _jsx(View,{style:[c?n.hRow:null,r],onLayout:c?u: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"},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,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?{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)})]}:{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;