npm - @webority/mobile-ui - Versions diffs - 0.93.0 → 0.94.0 - Mend

@webority/mobile-ui 0.93.0 → 0.94.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.BottomNavigation=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_shadows=require("../../utils/shadows.js"),_index3=require("../AppIcon/index.js"),_useScreenReaderEnabled=require("./useScreenReaderEnabled.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var i,a,n=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache\|\|"function"!=typeof WeakMap\|\|(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(a in e)"default"!==a&&{}.hasOwnProperty.call(e,a)&&((i=n&&Object.getOwnPropertyDescriptor(e,a))&&(i.get\|\|i.set)?n(r,a,i):r[a]=e[a]);return r}const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e\|\|!1===e?null:!0===e\|\|"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e\|\|!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e\|\|"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=exports.BottomNavigation=(0,_react.forwardRef)((e,t)=>{const{tabs:i,centerAction:a,activeTab:n,onChange:r,haptic:o="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:c="bottom",radius:d,indicatorRadius:u="auto",elevation:p,iconSize:h,marginHorizontal:m,marginVertical:_,paddingHorizontal:g,paddingVertical:x,border:b,minimizeOnScroll:f=!1,scrollDirection:y="idle",accessory:v,style:R,indicatorStyle:j,labelStyle:N,labelMaxFontScale:w,testID:S}=e,E=(0,_index.useTheme)(),I=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),A=(0,_react.useMemo)(()=>buildStyles(E),[E]),C=h??18,L=C+4+8,T=E.space.lg,D=E.space.lg,M=E.radius.xl,V=(0,_useReducedMotion.useReducedMotion)(),k=(0,_useScreenReaderEnabled.useScreenReaderEnabled)(f),[B,z]=_react.default.useState(null);(0,_react.useEffect)(()=>{null!==B&&B!==y&&z(null)},[B,y]);const P=f&&!k&&"down"===y&&null===B,[H,W]=_react.default.useState(P);(0,_react.useEffect)(()=>{H!==P&&(V\|\|"web"===_reactNative.Platform.OS\|\|_reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut),W(P))},[H,P,V]);const F="function"==typeof v?v({minimized:H}):v,O=null!=F&&!1!==F,q=H&&O,[U,$]=_react.default.useState(0),X=O&&!q?U+E.space.xs:0,Z="tile"===l,Y="floating"===l\|\|Z,K="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l\|\|Y\|\|J,ee=Math.max(0,i.findIndex(e=>e.key===n)),[te,ie]=_react.default.useState(0),[ae,ne]=_react.default.useState(0),re=a?Math.ceil(i.length/2):i.length,oe=i.length+(a?1:0),[se,le]=_react.default.useState({width:0,height:0}),ce=a?.size??48,de=void 0!==a?.gap,ue=Math.max(0,a?.gap??0),pe=de?(se.width\|\|ce)+2ue:0,he=de?i.length>0?Math.max(0,te-pe)/i.length:0:oe>0?te/oe:0,me=de?pe:he,ge=(0,_react.useRef)((0,_index.createAnimatedValue)(ee)).current,xe=(0,_react.useRef)({}),be=(0,_react.useRef)({});i.forEach(e=>{xe.current[e.key]\|\|(xe.current[e.key]=new _reactNative.Animated.Value(1)),be.current[e.key]\|\|(be.current[e.key]=(0,_index.createAnimatedValue)(e.key===n?1:0))});const fe=he>0?Z?Math.min(he-4,96):Math.min(he-T,64):0,ye=he>0?(he-fe)/2:0,ve=he>0?(he-48)/2:0,hasLabel=e=>s&&!H&&!1!==e.showLabel&&e.label.trim().length>0,Re=i[ee],je=Re&&!hasLabel(Re)&&ae>0?ae/2:E.space.xs+(C+4)/2,Ne=je-14-24,we=Math.max(0,ae-4),Se=Z?2:je-L/2,Ee=(0,_react.useRef)(ee);(0,_react.useEffect)(()=>{if(Ee.current===ee)return;Ee.current=ee;const e=_reactNative.Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ie=Math.max(1,i.length-1),Ae=(0,_react.useMemo)(()=>{const e=[],t=[];for(let i=0;i<=Ie;i++)e.push(i),t.push(i<re?ihe:ihe+me);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ie,re,he,me]),Ce=i.map(e=>e.key).join(" "),Le=K\|\|G;(0,_react.useEffect)(()=>{const e=Ce.split(" ").flatMap(e=>{const t=e===n?1:0,i=be.current[e];return i?Le?[_reactNative.Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=_reactNative.Animated.parallel(e);return t.start(),()=>t.stop()},[n,Ce,Le]);const popIcon=e=>{_reactNative.Animated.sequence([_reactNative.Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),_reactNative.Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Te=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current,{colors:De}=E,Me=J?De.primary:De.surface,Ve=J?De["on-primary"]:De.primary,ke=J?De["on-primary"]:Z?De["text-body"]:De["text-subtle"],Be=J?De["on-primary"]:De["primary-soft"],ze=J?De.primary:K?De["on-primary"]:Ve,Pe=m??D,He=_??(Y?D:0),We=He>0,Fe=x??E.space.sm,Oe=g??(Y?E.space.sm:E.space.xs),qe=We?Fe:Math.max(Fe,I.bottom),Ue=We?Math.max(He,I.bottom>0?I.bottom+E.space.sm:0):0,$e="pill"===d,Xe=Y?ae+X+2Fe+2_reactNative.StyleSheet.hairlineWidth:ae+X+Fe+qe,Ze=$e?ae>0?Xe/2:E.radius.pill:d??(Z?E.radius.pill:Y?M:E.radius.none),Ye=void 0!==d,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ye?Math.min(Ze,e/2):t,Ke="underline"===l?Math.max(Oe,$e&&0===ae?0:Ze):Oe,Ge=p??"none",Je="none"===Ge?void 0:E.shadow[Ge],Qe=void 0===Je?null:(0,_shadows.supportsBoxShadow)()?{boxShadow:(0,_shadows.toBoxShadow)(Je)}:Je,et=b?_reactNative.StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=a?.lift??0,at=Fe+et+X,nt=a&&ae>0?Math.max(0,(se.height\|\|ce)/2+it-ae/2-at):0,rt=a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[A.centerCell,de?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{if(!a)return;const e=a.haptic??o;!1!==e&&(0,_index2.triggerHaptic)(e),popIcon(Te),a.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:a.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-it},e?{opacity:.85}:null],testID:a.testID??(S?`${S}-center`:void 0),children:a.content?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:Te}]},children:a.content}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[A.centerCircle,{width:ce,height:ce,borderRadius:E.radius.pill,..._corners.smoothCorners,backgroundColor:a.color??De.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:Te}]},children:(0,_index3.renderSlotIcon)(a.icon??"add",{color:a.iconColor??De["on-primary"],size:a.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,ot=O?(0,_jsxRuntime.jsx)(_reactNative.View,{style:q?A.accessoryInline:A.accessoryStacked,onLayout:e=>$(e.nativeEvent.layout.height),testID:S?`${S}-accessory`:void 0,children:F}):null,st=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:q?[A.tabRow,A.tabRowInline]:A.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),ne(i)},children:[Q&&fe>0&&(!Z\|\|we>0)?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.pill,{width:fe,height:Z?we:L,left:ye,top:Se,backgroundColor:Be,borderRadius:Z?activeBgRadius(we,we/2):activeBgRadius(L,E.radius.pill),..._corners.smoothCorners,transform:[{translateX:Ae}]},j]}):null,K&&he>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.bubble,E.shadow.elevated,{width:48,height:48,borderRadius:E.radius.pill,..._corners.smoothCorners,left:ve,top:Ne,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:Ae}]},j]}):null,(lt=i.map(e=>{const t=e.key===n,i=t?Ve:ke,a=t?ze:ke,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,c=xe.current[e.key],d=be.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),h=J&&!t?.7:1,m=K&&t\|\|J?De.primary:De.surface,_=hasLabel(e),g=_&&(!G\|\|t),x=(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[A.iconWrap,{width:C+4,height:C+4,opacity:h,transform:[{scale:c}]}],children:[(0,_index3.renderSlotIcon)(l,{color:a,size:C,focused:t,disabled:!1}),u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[u.isDot?A.badgeDot:A.badgePill,{backgroundColor:De.danger,borderColor:m}],children:u.isDot?null:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[A.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),b=K?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{top:d.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:x}):x,f=g?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:w??E.settings.maxFontSizeMultiplier??1.2,style:[A.label,G?A.labelInline:null,{color:i,opacity:G?d:h,fontWeight:t?E.weight.semibold:E.weight.normal},N],children:e.label}):null,v=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>(e=>{H&&z(y),e.key!==n&&!1!==o&&(0,_index2.triggerHaptic)(o);const t=xe.current[e.key];t&&popIcon(t),r(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[A.tab,Z?A.tabTile:null,e?{opacity:.85}:null],testID:S?`${S}-tab-${e.key}`:void 0,children:G?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[A.expandPill,{height:L,paddingHorizontal:t&&_?E.space.md:Math.max(0,(L-(C+4))/2)}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[A.expandFill,{borderRadius:activeBgRadius(L,L/2),..._corners.smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?j:null]}),b,f]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[b,f]})},e.key);return G?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{flex:d.interpolate({inputRange:[0,1],outputRange:[1,_?1.5:1]})},children:v},e.key):v}),rt?[...lt.slice(0,re),rt,...lt.slice(re)]:lt),"underline"===l&&he>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.underline,"top"===c?A.underlineTop:A.underlineBottom,"top"===c?{top:-Fe-X}:{bottom:-Fe},{width:he,height:3,backgroundColor:De.primary,transform:[{translateX:Ae}]},j]}):null]});var lt;return(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,testID:S,accessibilityRole:"tablist",style:[A.outer,{paddingHorizontal:Pe,paddingTop:Math.max(He,nt),paddingBottom:Ue},R],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[Y?A.floatingBar:A.dockedBar,q?A.barInline:null,Qe,{backgroundColor:Me,borderColor:tt,borderRadius:Ze,..._corners.smoothCorners},Y?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:Fe}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:Ke,paddingTop:Fe,paddingBottom:qe}],children:[ot,st]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>_reactNative.StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.sizee.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,..._corners.smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,..._corners.smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,..._corners.smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,..._corners.smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});var _default=exports.default=BottomNavigation;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.BottomNavigation=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_shadows=require("../../utils/shadows.js"),_index3=require("../AppIcon/index.js"),_useScreenReaderEnabled=require("./useScreenReaderEnabled.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var i,a,n=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache\|\|"function"!=typeof WeakMap\|\|(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(a in e)"default"!==a&&{}.hasOwnProperty.call(e,a)&&((i=n&&Object.getOwnPropertyDescriptor(e,a))&&(i.get\|\|i.set)?n(r,a,i):r[a]=e[a]);return r}const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e\|\|!1===e?null:!0===e\|\|"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e\|\|!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e\|\|"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=exports.BottomNavigation=(0,_react.forwardRef)((e,t)=>{const{tabs:i,centerAction:a,activeTab:n,onChange:r,haptic:o="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:c="bottom",radius:d,indicatorRadius:u="auto",elevation:p,iconSize:h,marginHorizontal:m,marginVertical:_,paddingHorizontal:g,paddingVertical:x,border:b,minimizeOnScroll:f=!1,scrollDirection:y="idle",accessory:v,style:R,indicatorStyle:j,labelStyle:N,labelMaxFontScale:w,testID:S}=e,E=(0,_index.useTheme)(),I=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),A=(0,_react.useMemo)(()=>buildStyles(E),[E]),C=h??18,L=C+4+8,T=E.space.lg,D=E.space.lg,M=E.radius.xl,V=(0,_useReducedMotion.useReducedMotion)(),k=(0,_useScreenReaderEnabled.useScreenReaderEnabled)(f),[z,B]=_react.default.useState(null);(0,_react.useEffect)(()=>{null!==z&&z!==y&&B(null)},[z,y]);const P=f&&!k&&"down"===y&&null===z,[W,F]=_react.default.useState(P);(0,_react.useEffect)(()=>{W!==P&&(V\|\|"web"===_reactNative.Platform.OS\|\|_reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut),F(P))},[W,P,V]);const H="function"==typeof v?v({minimized:W}):v,O=null!=H&&!1!==H,q=W&&O,[U,$]=_react.default.useState(0),X=O&&!q?U+E.space.xs:0,Z="tile"===l,Y="floating"===l\|\|Z,K="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l\|\|Y\|\|J,ee=Math.max(0,i.findIndex(e=>e.key===n)),[te,ie]=_react.default.useState(0),[ae,ne]=_react.default.useState(0),re=a?Math.ceil(i.length/2):i.length,oe=i.length+(a?1:0),[se,le]=_react.default.useState({width:0,height:0}),ce=a?.size??48,de=void 0!==a?.gap,ue=Math.max(0,a?.gap??0),pe=de?(se.width\|\|ce)+2ue:0,he=de?i.length>0?Math.max(0,te-pe)/i.length:0:oe>0?te/oe:0,me=de?pe:he,ge=(0,_react.useRef)((0,_index.createAnimatedValue)(ee)).current,xe=(0,_react.useRef)({}),be=(0,_react.useRef)({});i.forEach(e=>{xe.current[e.key]\|\|(xe.current[e.key]=new _reactNative.Animated.Value(1)),be.current[e.key]\|\|(be.current[e.key]=(0,_index.createAnimatedValue)(e.key===n?1:0))});const fe=he>0?Z?Math.min(he-4,96):Math.min(he-T,64):0,ye=he>0?(he-fe)/2:0,ve=he>0?(he-48)/2:0,hasLabel=e=>s&&!W&&!1!==e.showLabel&&e.label.trim().length>0,Re=i[ee],je=Re&&!hasLabel(Re)&&ae>0?ae/2:E.space.xs+(C+4)/2,Ne=je-14-24,we=Math.max(0,ae-4),Se=Z?2:je-L/2,Ee=(0,_react.useRef)(ee);(0,_react.useEffect)(()=>{if(Ee.current===ee)return;Ee.current=ee;const e=_reactNative.Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ie=Math.max(1,i.length-1),Ae=(0,_react.useMemo)(()=>{const e=[],t=[];for(let i=0;i<=Ie;i++)e.push(i),t.push(i<re?ihe:ihe+me);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ie,re,he,me]),Ce=i.map(e=>e.key).join(" "),Le=K\|\|G;(0,_react.useEffect)(()=>{const e=Ce.split(" ").flatMap(e=>{const t=e===n?1:0,i=be.current[e];return i?Le?[_reactNative.Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=_reactNative.Animated.parallel(e);return t.start(),()=>t.stop()},[n,Ce,Le]);const popIcon=e=>{_reactNative.Animated.sequence([_reactNative.Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),_reactNative.Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Te=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current,{colors:De}=E,Me=J?De.primary:De.surface,Ve=J?De["on-primary"]:De.primary,ke=J?De["on-primary"]:Z?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Be=J?De.primary:K?De["on-primary"]:Ve,Pe=m??D,We=_??(Y?D:0),Fe=We>0,He=x??E.space.sm,Oe=g??(Y?E.space.sm:E.space.xs),qe=Fe?He:Math.max(He,I.bottom),Ue=Fe?Math.max(We,I.bottom>0?I.bottom+E.space.sm:0):0,$e="pill"===d,Xe=Y?ae+X+2He+2_reactNative.StyleSheet.hairlineWidth:ae+X+He+qe,Ze=$e?ae>0?Xe/2:E.radius.pill:d??(Z?E.radius.pill:Y?M:E.radius.none),Ye=void 0!==d,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ye?Math.min(Ze,e/2):t,Ke="underline"===l?Math.max(Oe,$e&&0===ae?0:Ze):Oe,Ge=p??"none",Je="none"===Ge?void 0:E.shadow[Ge],Qe=void 0===Je?null:(0,_shadows.supportsBoxShadow)()?{boxShadow:(0,_shadows.toBoxShadow)(Je)}:Je,et=b?_reactNative.StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=a?.lift??0,at=He+et+X,nt=a&&ae>0?Math.max(0,(se.height\|\|ce)/2+it-ae/2-at):0,rt=a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[A.centerCell,de?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{if(!a)return;const e=a.haptic??o;!1!==e&&(0,_index2.triggerHaptic)(e),popIcon(Te),a.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:a.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[A.centerPressable,{top:-it},e?{opacity:.85}:null],testID:a.testID??(S?`${S}-center`:void 0),children:[a.content?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:Te}]},children:a.content}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[A.centerCircle,{width:ce,height:ce,borderRadius:E.radius.pill,..._corners.smoothCorners,backgroundColor:a.color??De.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:Te}]},children:(0,_index3.renderSlotIcon)(a.icon??"add",{color:a.iconColor??De["on-primary"],size:a.iconSize??24,disabled:!1})})}),(ot=a,s&&!W&&ot.label.trim().length>0?(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,maxFontSizeMultiplier:w??E.settings.maxFontSizeMultiplier??1.2,style:[A.label,{color:ke,opacity:J?.7:1},N],children:a.label}):null)]})},CENTER_KEY):null;var ot;const st=O?(0,_jsxRuntime.jsx)(_reactNative.View,{style:q?A.accessoryInline:A.accessoryStacked,onLayout:e=>$(e.nativeEvent.layout.height),testID:S?`${S}-accessory`:void 0,children:H}):null,lt=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:q?[A.tabRow,A.tabRowInline]:A.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),ne(i)},children:[Q&&fe>0&&(!Z\|\|we>0)?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.pill,{width:fe,height:Z?we:L,left:ye,top:Se,backgroundColor:ze,borderRadius:Z?activeBgRadius(we,we/2):activeBgRadius(L,E.radius.pill),..._corners.smoothCorners,transform:[{translateX:Ae}]},j]}):null,K&&he>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.bubble,E.shadow.elevated,{width:48,height:48,borderRadius:E.radius.pill,..._corners.smoothCorners,left:ve,top:Ne,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:Ae}]},j]}):null,(ct=i.map(e=>{const t=e.key===n,i=t?Ve:ke,a=t?Be:ke,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,c=xe.current[e.key],d=be.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),h=J&&!t?.7:1,m=K&&t\|\|J?De.primary:De.surface,_=hasLabel(e),g=_&&(!G\|\|t),x=(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[A.iconWrap,{width:C+4,height:C+4,opacity:h,transform:[{scale:c}]}],children:[(0,_index3.renderSlotIcon)(l,{color:a,size:C,focused:t,disabled:!1}),u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[u.isDot?A.badgeDot:A.badgePill,{backgroundColor:De.danger,borderColor:m}],children:u.isDot?null:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[A.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),b=K?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{top:d.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:x}):x,f=g?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:w??E.settings.maxFontSizeMultiplier??1.2,style:[A.label,G?A.labelInline:null,{color:i,opacity:G?d:h,fontWeight:t?E.weight.semibold:E.weight.normal},N],children:e.label}):null,v=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>(e=>{W&&B(y),e.key!==n&&!1!==o&&(0,_index2.triggerHaptic)(o);const t=xe.current[e.key];t&&popIcon(t),r(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[A.tab,Z?A.tabTile:null,e?{opacity:.85}:null],testID:S?`${S}-tab-${e.key}`:void 0,children:G?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[A.expandPill,{height:L,paddingHorizontal:t&&_?E.space.md:Math.max(0,(L-(C+4))/2)}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[A.expandFill,{borderRadius:activeBgRadius(L,L/2),..._corners.smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?j:null]}),b,f]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[b,f]})},e.key);return G?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{flex:d.interpolate({inputRange:[0,1],outputRange:[1,_?1.5:1]})},children:v},e.key):v}),rt?[...ct.slice(0,re),rt,...ct.slice(re)]:ct),"underline"===l&&he>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[A.underline,"top"===c?A.underlineTop:A.underlineBottom,"top"===c?{top:-He-X}:{bottom:-He},{width:he,height:3,backgroundColor:De.primary,transform:[{translateX:Ae}]},j]}):null]});var ct;return(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,testID:S,accessibilityRole:"tablist",style:[A.outer,{paddingHorizontal:Pe,paddingTop:Math.max(We,nt),paddingBottom:Ue},R],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[Y?A.floatingBar:A.dockedBar,q?A.barInline:null,Qe,{backgroundColor:Me,borderColor:tt,borderRadius:Ze,..._corners.smoothCorners},Y?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:He}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:Ke,paddingTop:He,paddingBottom:qe}],children:[st,lt]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>_reactNative.StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerPressable:{alignItems:"center",maxWidth:"100%",gap:e.space.xs},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.sizee.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,..._corners.smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,..._corners.smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,..._corners.smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,..._corners.smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});var _default=exports.default=BottomNavigation;

package/lib/commonjs/components/Dialog/Dialog.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Dialog=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Modal=require("../Modal/Modal.js"),_jsxRuntime=require("react/jsx-runtime");const Dialog=e=>{const{visible:t,onClose:o,title:r,message:i,children:l,icon:s,variant:a="default",actions:n,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:g,messageStyle:m,iconWrapperStyle:x,actionsRowStyle:p,actionButtonStyle:_,actionTextStyle:y,haptic:h,testID:C}=e,f=(0,_index.useTheme)(),j=(0,_react.useMemo)(()=>buildStyles(f),[f]),S=(0,_react.useMemo)(()=>discFor(f,a),[f,a]),R=f.components.dialog["icon-wrapper-size"],v=f.components.dialog["action-button-min-height"],w=Boolean(n&&n.length>0),D=(0,_react.useCallback)(e=>{if(e.loading\|\|e.disabled)return;const t=(0,_hapticUtils.resolveHaptic)(h,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),c?(o(),setTimeout(e.onPress,_Modal.MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,h]);return(0,_jsxRuntime.jsx)(_Modal.Modal,{visible:t,onRequestClose:o,haptic:h,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.iconWrapper,{width:R,height:R,borderRadius:f.radius.pill,..._corners.smoothCorners,backgroundColor:S,marginBottom:f.space.md},x],children:s}):null,r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[j.title,{color:f.colors["text-body"],fontSize:f.text.xl.size,...(0,_index.fontFor)(f,"semibold"),marginBottom:i\|\|null!=l?f.space.sm:f.space.md},g],accessibilityRole:"header",children:r}):null,i?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[j.message,{color:f.colors["text-muted"],fontSize:f.text.base.size,lineHeight:f.text.base.size*f.leading.body,marginBottom:null!=l?f.space.md:w?f.space.lg:0},m],children:i}):null,null!=l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginBottom:w?f.space.lg:0},children:l}):null,n&&n.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.actionsRow,p],children:n.map((e,t)=>{const o=e.tone??"primary",r=Boolean(e.disabled),i=actionStyleFor(f,o,r),l=t===n.length-1;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>D(e),disabled:e.loading\|\|r,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)\|\|r},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)\|\|r,style:({pressed:t})=>[j.actionButton,{minHeight:v,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:f.radius.md,..._corners.smoothCorners,paddingVertical:f.space.sm,paddingHorizontal:f.space.md,marginRight:l?0:f.space.sm,opacity:e.loading?.7:t&&!r?.85:1},_],children:e.loading?(0,_jsxRuntime.jsx)(_reactNative.ActivityIndicator,{size:"small",color:i.textColor}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:i.textColor,fontSize:f.text.base.size,...(0,_index.fontFor)(f,"semibold"),textAlign:"center"},y],children:e.label})},`${e.label}-${t}`)})}):null]})})};exports.Dialog=Dialog,Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const o=e.colors["bg-subtle"];switch(t){case"success":return(0,_color.tintOf)(e.colors.success,.14,o);case"warning":return(0,_color.tintOf)(e.colors.warning,.14,o);case"danger":return(0,_color.tintOf)(e.colors.danger,.14,o);case"info":return(0,_color.tintOf)(e.colors.info,.14,o);default:return e.colors["primary-soft"]}},actionStyleFor=(e,t,o)=>{if(o)return{backgroundColor:"neutral"===t?"transparent":e.colors["surface-disabled"],borderColor:"neutral"===t?e.colors.border:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors["text-disabled"]};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-primary"]};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-info"]};case"danger":return{backgroundColor:e.colors.danger,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:e.colors.border,borderWidth:1,textColor:e.colors["text-body"]}}},buildStyles=e=>_reactNative.StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},~~actionButton~~:{~~flex~~:1,alignItems:"center",justifyContent:"center"}});var _default=exports.default=Dialog;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Dialog=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Modal=require("../Modal/Modal.js"),_jsxRuntime=require("react/jsx-runtime");const Dialog=e=>{const{visible:t,onClose:o,title:r,message:i,children:l,icon:a,variant:n="default",actions:s,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:g,messageStyle:m,iconWrapperStyle:x,actionsRowStyle:_,actionButtonStyle:p,actionTextStyle:y,haptic:h,testID:C}=e,f=(0,_index.useTheme)(),j=(0,_react.useMemo)(()=>buildStyles(f),[f]),S=(0,_react.useMemo)(()=>discFor(f,n),[f,n]),v=f.components.dialog["icon-wrapper-size"],R=f.components.dialog["action-button-min-height"],w=Boolean(s&&s.length>0),D=f.text.base.sizef.leading.body,k=s?s.map(e=>e.label).join("\n"):"",[M,N]=(0,_react.useState)(null),z=null!==M&&M===k,B=(0,_react.useRef)(null),I=(0,_react.useCallback)(e=>{e.nativeEvent.layout.height>1.5D&&N(k)},[D,k]),W=(0,_react.useCallback)(e=>{const t=e.nativeEvent.layout.width,o=B.current;B.current=t,null!==o&&Math.abs(o-t)>.5&&N(null)},[]),q=(0,_react.useCallback)(e=>{if(e.loading\|\|e.disabled)return;const t=(0,_hapticUtils.resolveHaptic)(h,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),c?(o(),setTimeout(e.onPress,_Modal.MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,h]);return(0,_jsxRuntime.jsx)(_Modal.Modal,{visible:t,onRequestClose:o,haptic:h,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.iconWrapper,{width:v,height:v,borderRadius:f.radius.pill,..._corners.smoothCorners,backgroundColor:S,marginBottom:f.space.md},x],children:a}):null,r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[j.title,{color:f.colors["text-body"],fontSize:f.text.xl.size,...(0,_index.fontFor)(f,"semibold"),marginBottom:i\|\|null!=l?f.space.sm:f.space.md},g],accessibilityRole:"header",children:r}):null,i?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[j.message,{color:f.colors["text-muted"],fontSize:f.text.base.size,lineHeight:f.text.base.size*f.leading.body,marginBottom:null!=l?f.space.md:w?f.space.lg:0},m],children:i}):null,null!=l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginBottom:w?f.space.lg:0},children:l}):null,s&&s.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.actionsRow,z?j.actionsRowStacked:null,_],onLayout:W,children:s.map((e,t)=>{const o=e.tone??"primary",r=Boolean(e.disabled),i=actionStyleFor(f,o,r),l=t===s.length-1;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>q(e),disabled:e.loading\|\|r,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)\|\|r},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)\|\|r,style:({pressed:t})=>[j.actionButton,{flex:z?0:1,minHeight:R,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:f.radius.md,..._corners.smoothCorners,paddingVertical:f.space.sm,paddingHorizontal:f.space.md,marginRight:l\|\|z?0:f.space.sm,opacity:e.loading?.7:t&&!r?.85:1},p],children:e.loading?(0,_jsxRuntime.jsx)(_reactNative.ActivityIndicator,{size:"small",color:i.textColor}):(0,_jsxRuntime.jsx)(_reactNative.View,{onLayout:I,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:i.textColor,fontSize:f.text.base.size,...(0,_index.fontFor)(f,"semibold"),textAlign:"center"},y],children:e.label})})},`${e.label}-${t}`)})}):null]})})};exports.Dialog=Dialog,Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const o=e.colors["bg-subtle"];switch(t){case"success":return(0,_color.tintOf)(e.colors.success,.14,o);case"warning":return(0,_color.tintOf)(e.colors.warning,.14,o);case"danger":return(0,_color.tintOf)(e.colors.danger,.14,o);case"info":return(0,_color.tintOf)(e.colors.info,.14,o);default:return e.colors["primary-soft"]}},actionStyleFor=(e,t,o)=>{if(o)return{backgroundColor:"neutral"===t?"transparent":e.colors["surface-disabled"],borderColor:"neutral"===t?e.colors.border:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors["text-disabled"]};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-primary"]};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-info"]};case"danger":return{backgroundColor:e.colors.danger,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:e.colors.border,borderWidth:1,textColor:e.colors["text-body"]}}},buildStyles=e=>_reactNative.StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionsRowStacked:{flexDirection:"column",rowGap:e.space.sm},actionButton:{alignItems:"center",justifyContent:"center"}});var _default=exports.default=Dialog;

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

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

package/lib/commonjs/components/Tabs/Tabs.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tabs=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");const Tabs=exports.Tabs=(0,_react.forwardRef)((e,t)=>{const{tabs:i,activeKey:r,onChange:a,variant:s="underline",radius:n,size:o="md",scrollable:l=!1,align:c="left",style:d,containerStyle:u,tabStyle:p,tabLabelStyle:m,tabIconStyle:b,tabBadgeStyle:x,dividerStyle:g,indicatorStyle:_,progress:h,haptic:y,accessibilityLabel:f,testID:v}=e,j=(0,_index.useTheme)(),S=(0,_react.useMemo)(()=>buildStyles(j),[j]),R=j.components.tabs,w=(0,_react.useMemo)(()=>(0,_index.resolveTabsSize)(j,o),[j,o]),C=l?w["scrollable-padding-x"]:w["padding-x"],N=w["padding-y"],k=w.text,z=j.space[R["icon-gap"]],q=w.icon,I=R["underline-height"],T=j.space[R["pill-inset"]],L=R["disabled-opacity"],F=j.space[R["badge-gap"]],V="segmented"===s,A=(0,_react.useMemo)(()=>(0,_index.resolveSegmentedControlSize)(j,o),[j,o]),M=j.space[R["track-padding"]],P="number"==typeof n?n:n?j.radius[n]:void 0,D=P??j.radius.md,H=void 0===P?j.radius.sm:Math.max(P-M,0),B=P??j.radius.pill,W=P??j.radius.none,E=j.colors["bg-muted"],O=(0,_SquircleFill.useSquircle)(V,D),[U,K]=(0,_react.useState)({}),X=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,G=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,J=U[r],Q=i.every(e=>void 0!==U[e.key]),Y=void 0!==h&&Q&&i.length>1,Z=(0,_react.useMemo)(()=>Y&&h?h.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].x),extrapolate:"clamp"}):null,[Y,h,i,U]),$=(0,_react.useMemo)(()=>Y&&h?h.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].width),extrapolate:"clamp"}):null,[Y,h,i,U]);(0,_react.useEffect)(()=>{if(!J)return;if(Y)return;const e=j.motion.spring.snappy,t=_reactNative.Animated.parallel([_reactNative.Animated.spring(X,{toValue:J.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),_reactNative.Animated.spring(G,{toValue:J.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[J,r,X,G,j.motion.spring.snappy,Y]);const ee=(0,_react.useCallback)(e=>t=>{const{x:i,width:r}=t.nativeEvent.layout;K(t=>{const a=t[e];return a&&a.x===i&&a.width===r?t:{...t,[e]:{x:i,width:r}}})},[]),te=(0,_react.useCallback)(e=>{if(e.disabled)return;if(e.key===r)return;const t=(0,_index2.resolveHaptic)(y,"selection");t&&(0,_index2.triggerHaptic)(t),a(e.key)},[r,a,y]),ie="pills"===s,re=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[V?S.indicatorThumb:ie?S.indicatorPill:S.indicatorUnderline,V?null:ie?{top:T,bottom:T}:{height:I},{width:$??G,transform:[{translateX:Z??X}],backgroundColor:V?j.colors.surface:ie?j.colors["primary-soft"]:j.colors.primary,borderRadius:V?H:ie?B:W,..._corners.smoothCorners},_]}),renderTabs=()=>i.map(e=>{const t=e.key===r,i=!0===e.disabled,a=t?j.colors.primary:j.colors["text-subtle"],s=(0,_slotIcon.renderSlotIcon)(e.icon,{color:a,size:q,focused:t,disabled:i});return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>te(e),onLayout:ee(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},"aria-selected":t,"aria-disabled":i,android_ripple:V?void 0:{color:j.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[S.tab,l?null:S.tabFlex,V?{paddingHorizontal:A["padding-x"],height:A.height-2*M}:{paddingHorizontal:C,paddingVertical:N},{opacity:i?L:e&&V&&!t?.7:1,backgroundColor:e&&!V?j.colors["surface-pressed"]:"transparent"},p],children:[s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.tabIcon,{marginRight:z},b],children:s}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[S.tabLabel,{color:a,fontSize:V?A.text:k,fontWeight:t?j.weight.semibold:j.weight.medium},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.tabBadge,{marginLeft:F,backgroundColor:j.colors["primary-soft"],borderRadius:j.radius.pill,..._corners.smoothCorners,paddingHorizontal:j.space.xs},x],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:j.colors.primary,fontSize:j.text.xs.size,fontWeight:j.weight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),ae={flexDirection:"row",alignItems:"stretch",justifyContent:l?"flex-start":"center"===c?"center":"flex-start",position:"relative",overflow:"hidden"},se=V?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[re,renderTabs()]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderTabs(),re]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[S.container,{borderBottomColor:j.colors["border-subtle"],borderBottomWidth:"underline"===s?_reactNative.StyleSheet.hairlineWidth:0},"underline"===s?g:null,V?{padding:M,borderRadius:D,..._corners.smoothCorners,backgroundColor:O.active?"transparent":E}:null,d,u],onLayout:O.onLayout,accessibilityRole:"tablist",accessibilityLabel:f,testID:v,children:[O.active&&O.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:O.size.width,height:O.size.height,radius:D,fill:E}):null,l?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[ae],keyboardShouldPersistTaps:"handled",children:se}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:ae,children:se})]})});Tabs.displayName="Tabs";const buildStyles=e=>_reactNative.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}});var _default=exports.default=Tabs;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tabs=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");const Tabs=exports.Tabs=(0,_react.forwardRef)((e,t)=>{const{tabs:i,activeKey:r,onChange:a,variant:s="underline",radius:n,size:l="md",scrollable:o=!1,align:c="left",style:d,containerStyle:u,tabStyle:p,tabLabelStyle:m,tabIconStyle:b,tabBadgeStyle:x,dividerStyle:g,indicatorStyle:_,progress:h,haptic:y,accessibilityLabel:f,testID:v}=e,j=(0,_index.useTheme)(),S=(0,_react.useMemo)(()=>buildStyles(j),[j]),R=j.components.tabs,w=(0,_react.useMemo)(()=>(0,_index.resolveTabsSize)(j,l),[j,l]),C=o?w["scrollable-padding-x"]:w["padding-x"],N=w["padding-y"],k=w.text,z=j.space[R["icon-gap"]],q=w.icon,I=R["underline-height"],T=j.space[R["pill-inset"]],V=R["disabled-opacity"],L=j.space[R["badge-gap"]],F="segmented"===s,A=(0,_react.useMemo)(()=>(0,_index.resolveSegmentedControlSize)(j,l),[j,l]),M=j.space[R["track-padding"]],P="number"==typeof n?n:n?j.radius[n]:void 0,D=P??j.radius.md,H=void 0===P?j.radius.sm:Math.max(P-M,0),B=P??j.radius.pill,W=P??j.radius.none,E=j.colors["bg-muted"],O=(0,_SquircleFill.useSquircle)(F,D),[U,K]=(0,_react.useState)({}),X=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,G=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,J=U[r],Q=i.every(e=>void 0!==U[e.key]),Y=void 0!==h&&Q&&i.length>1,Z=(0,_react.useMemo)(()=>Y&&h?h.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].x),extrapolate:"clamp"}):null,[Y,h,i,U]),$=(0,_react.useMemo)(()=>Y&&h?h.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>U[e.key].width),extrapolate:"clamp"}):null,[Y,h,i,U]),ee=(0,_react.useRef)(null);(0,_react.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=j.motion.spring.snappy,i=_reactNative.Animated.parallel([_reactNative.Animated.spring(X,{toValue:J.x,damping:t.damping,stiffness:t.stiffness,mass:t.mass,overshootClamping:!0,useNativeDriver:!1}),_reactNative.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,j.motion.spring.snappy,Y]);const te=(0,_react.useCallback)(e=>t=>{const{x:i,width:r}=t.nativeEvent.layout;K(t=>{const a=t[e];return a&&a.x===i&&a.width===r?t:{...t,[e]:{x:i,width:r}}})},[]),ie=(0,_react.useCallback)(e=>{if(e.disabled)return;if(e.key===r)return;const t=(0,_index2.resolveHaptic)(y,"selection");t&&(0,_index2.triggerHaptic)(t),a(e.key)},[r,a,y]),re="pills"===s,ae=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[F?S.indicatorThumb:re?S.indicatorPill:S.indicatorUnderline,F?null:re?{top:T,bottom:T}:{height:I},{width:$??G,transform:[{translateX:Z??X}],backgroundColor:F?j.colors.surface:re?j.colors["primary-soft"]:j.colors.primary,borderRadius:F?H:re?B:W,..._corners.smoothCorners},_]}),renderTabs=()=>i.map(e=>{const t=e.key===r,i=!0===e.disabled,a=t?j.colors.primary:j.colors["text-subtle"],s=(0,_slotIcon.renderSlotIcon)(e.icon,{color:a,size:q,focused:t,disabled:i});return(0,_jsxRuntime.jsxs)(_reactNative.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:F?void 0:{color:j.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[S.tab,o?null:S.tabFlex,F?{paddingHorizontal:A["padding-x"],height:A.height-2*M}:{paddingHorizontal:C,paddingVertical:N},{opacity:i?V:e&&F&&!t?.7:1,backgroundColor:e&&!F?j.colors["surface-pressed"]:"transparent"},p],children:[s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.tabIcon,{marginRight:z},b],children:s}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[S.tabLabel,{color:a,fontSize:F?A.text:k,fontWeight:t?j.weight.semibold:j.weight.medium},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.tabBadge,{marginLeft:L,backgroundColor:j.colors["primary-soft"],borderRadius:j.radius.pill,..._corners.smoothCorners,paddingHorizontal:j.space.xs},x],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:j.colors.primary,fontSize:j.text.xs.size,fontWeight:j.weight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),se={flexDirection:"row",alignItems:"stretch",justifyContent:o?"flex-start":"center"===c?"center":"flex-start",position:"relative",overflow:"hidden"},ne=F?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[ae,renderTabs()]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderTabs(),ae]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[S.container,{borderBottomColor:j.colors["border-subtle"],borderBottomWidth:"underline"===s?_reactNative.StyleSheet.hairlineWidth:0},"underline"===s?g:null,F?{padding:M,borderRadius:D,..._corners.smoothCorners,backgroundColor:O.active?"transparent":E}:null,d,u],onLayout:O.onLayout,accessibilityRole:"tablist",accessibilityLabel:f,testID:v,children:[O.active&&O.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:O.size.width,height:O.size.height,radius:D,fill:E}):null,o?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[se],keyboardShouldPersistTaps:"handled",children:ne}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:se,children:ne})]})});Tabs.displayName="Tabs";const buildStyles=e=>_reactNative.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}});var _default=exports.default=Tabs;

package/lib/module/components/BottomNavigation/BottomNavigation.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e\|\|!1===e?null:!0===e\|\|"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e\|\|!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e\|\|"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:_="idle",accessory:w,style:R,indicatorStyle:S,labelStyle:E,labelMaxFontScale:I,testID:A}=e,v=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,k=v.radius.xl,B=useReducedMotion(),M=useScreenReaderEnabled(y),[z,N]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&N(null)},[z,_]);const H=y&&!M&&"down"===_&&null===z,[F,P]=React.useState(H);useEffect(()=>{F!==H&&(B\|\|"web"===Platform.OS\|\|LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),P(H))},[F,H,B]);const W="function"==typeof w?w({minimized:F}):w,O=null!=W&&!1!==W,U=F&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l\|\|Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l\|\|K\|\|J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),ae=n?Math.ceil(i.length/2):i.length,re=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width\|\|de)+2ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:re>0?te/re:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]\|\|(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]\|\|(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,we=me>0?(me-48)/2:0,hasLabel=e=>s&&!F&&!1!==e.showLabel&&e.label.trim().length>0,Re=i[ee],Se=Re&&!hasLabel(Re)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ee=Se-14-24,Ie=Math.max(0,ne-4),Ae=Y?2:Se-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ce=Math.max(1,i.length-1),je=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ce;i++)e.push(i),t.push(i<ae?ime:ime+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ce,ae,me,he]),Te=i.map(e=>e.key).join(" "),Le=q\|\|G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,ke=J?De.primary:De.surface,Be=J?De["on-primary"]:De.primary,Me=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Ne=J?De.primary:q?De["on-primary"]:Be,He=h??D,Fe=g??(K?D:0),Pe=Fe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=Pe?We:Math.max(We,C.bottom),$e=Pe?Math.max(Fe,C.bottom>0?C.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2We+2StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?k:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height\|\|de)/2+it-ne/2-nt):0,at=n?_jsx(View,{style:[j.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsx(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??r;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,rt=O?_jsx(View,{style:U?j.accessoryInline:j.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,st=_jsxs(View,{style:U?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y\|\|Ie>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:xe,height:Y?Ie:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ie,Ie/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:je}]},S]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:we,top:Ee,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:je}]},S]}):null,(lt=i.map(e=>{const t=e.key===o,i=t?Be:Me,n=t?Ne:Me,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t\|\|J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G\|\|t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:I??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,G?j.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},E],children:e.label}):null,w=_jsx(Pressable,{onPress:()=>(e=>{F&&N(_),e.key!==o&&!1!==r&&triggerHaptic(r);const t=be.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,Y?j.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[j.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?S:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:w},e.key):w}),at?[...lt.slice(0,ae),at,...lt.slice(ae)]:lt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:je}]},S]}):null]});var lt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:He,paddingTop:Math.max(Fe,ot),paddingBottom:$e},R],children:_jsxs(View,{style:[K?j.floatingBar:j.dockedBar,U?j.barInline:null,Qe,{backgroundColor:ke,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[rt,st]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.sizee.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
1	+ "use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e\|\|!1===e?null:!0===e\|\|"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e\|\|!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e\|\|"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:_="idle",accessory:S,style:w,indicatorStyle:R,labelStyle:I,labelMaxFontScale:E,testID:A}=e,v=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,M=v.radius.xl,k=useReducedMotion(),B=useScreenReaderEnabled(y),[z,F]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&F(null)},[z,_]);const N=y&&!B&&"down"===_&&null===z,[P,H]=React.useState(N);useEffect(()=>{P!==N&&(k\|\|"web"===Platform.OS\|\|LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),H(N))},[P,N,k]);const W="function"==typeof S?S({minimized:P}):S,O=null!=W&&!1!==W,U=P&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l\|\|Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l\|\|K\|\|J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),ae=n?Math.ceil(i.length/2):i.length,re=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width\|\|de)+2ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:re>0?te/re:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]\|\|(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]\|\|(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,Se=me>0?(me-48)/2:0,hasLabel=e=>s&&!P&&!1!==e.showLabel&&e.label.trim().length>0,we=i[ee],Re=we&&!hasLabel(we)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ie=Re-14-24,Ee=Math.max(0,ne-4),Ae=Y?2:Re-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ce=Math.max(1,i.length-1),je=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ce;i++)e.push(i),t.push(i<ae?ime:ime+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ce,ae,me,he]),Te=i.map(e=>e.key).join(" "),Le=q\|\|G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,Me=J?De.primary:De.surface,ke=J?De["on-primary"]:De.primary,Be=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Fe=J?De.primary:q?De["on-primary"]:ke,Ne=h??D,Pe=g??(K?D:0),He=Pe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=He?We:Math.max(We,C.bottom),$e=He?Math.max(Pe,C.bottom>0?C.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2We+2StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?M:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height\|\|de)/2+it-ne/2-nt):0,at=n?_jsx(View,{style:[j.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsxs(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??r;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.centerPressable,{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:[n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})}),(rt=n,s&&!P&&rt.label.trim().length>0?_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,{color:Be,opacity:J?.7:1},I],children:n.label}):null)]})},CENTER_KEY):null;var rt;const st=O?_jsx(View,{style:U?j.accessoryInline:j.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,lt=_jsxs(View,{style:U?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y\|\|Ee>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:xe,height:Y?Ee:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ee,Ee/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:je}]},R]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:Se,top:Ie,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:je}]},R]}):null,(dt=i.map(e=>{const t=e.key===o,i=t?ke:Be,n=t?Fe:Be,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t\|\|J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G\|\|t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,G?j.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},I],children:e.label}):null,S=_jsx(Pressable,{onPress:()=>(e=>{P&&F(_),e.key!==o&&!1!==r&&triggerHaptic(r);const t=be.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,Y?j.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[j.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?R:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:S},e.key):S}),at?[...dt.slice(0,ae),at,...dt.slice(ae)]:dt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:je}]},R]}):null]});var dt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:Ne,paddingTop:Math.max(Pe,ot),paddingBottom:$e},w],children:_jsxs(View,{style:[K?j.floatingBar:j.dockedBar,U?j.barInline:null,Qe,{backgroundColor:Me,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[st,lt]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerPressable:{alignItems:"center",maxWidth:"100%",gap:e.space.xs},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.sizee.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;

package/lib/module/components/Dialog/Dialog.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";import{useCallback,useMemo}from"react";import{ActivityIndicator,Pressable,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{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:t,onClose:o,title:r,message:i,children:s,icon:l,variant:n="default",actions:a,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:m,messageStyle:g,iconWrapperStyle:p,actionsRowStyle:y,actionButtonStyle:x,actionTextStyle:h,haptic:f,testID:C}=e,S=useTheme(),j=useMemo(()=>buildStyles(S),[S]),_=useMemo(()=>discFor(S,n),[S,n]),w=S.components.dialog["icon-wrapper-size"],I=S.components.dialog["action-button-min-height"],D=Boolean(a&&a.length>0),M=useCallback(e=>{if(e.loading\|\|e.disabled)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),c?(o(),setTimeout(e.onPress,MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,f]);return _jsx(Modal,{visible:t,onRequestClose:o,haptic:f,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:_jsxs(View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[l?_jsx(View,{style:[j.iconWrapper,{width:w,height:w,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:_,marginBottom:S.space.md},p],children:l}):null,r?_jsx(Text,{style:[j.title,{color:S.colors["text-body"],fontSize:S.text.xl.size,...fontFor(S,"semibold"),marginBottom:i\|\|null!=s?S.space.sm:S.space.md},m],accessibilityRole:"header",children:r}):null,i?_jsx(Text,{style:[j.message,{color:S.colors["text-muted"],fontSize:S.text.base.size,lineHeight:S.text.base.size*S.leading.body,marginBottom:null!=s?S.space.md:D?S.space.lg:0},g],children:i}):null,null!=s?_jsx(View,{style:{marginBottom:D?S.space.lg:0},children:s}):null,a&&a.length>0?_jsx(View,{style:[j.actionsRow,y],children:a.map((e,t)=>{const o=e.tone??"primary",r=Boolean(e.disabled),i=actionStyleFor(S,o,r),s=t===a.length-1;return _jsx(Pressable,{onPress:()=>M(e),disabled:e.loading\|\|r,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)\|\|r},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)\|\|r,style:({pressed:t})=>[j.actionButton,{minHeight:I,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:S.radius.md,...smoothCorners,paddingVertical:S.space.sm,paddingHorizontal:S.space.md,marginRight:s?0:S.space.sm,opacity:e.loading?.7:t&&!r?.85:1},x],children:e.loading?_jsx(ActivityIndicator,{size:"small",color:i.textColor}):_jsx(Text,{style:[{color:i.textColor,fontSize:S.text.base.size,...fontFor(S,"semibold"),textAlign:"center"},h],children:e.label})},`${e.label}-${t}`)})}):null]})})};Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const o=e.colors["bg-subtle"];switch(t){case"success":return tintOf(e.colors.success,.14,o);case"warning":return tintOf(e.colors.warning,.14,o);case"danger":return tintOf(e.colors.danger,.14,o);case"info":return tintOf(e.colors.info,.14,o);default:return e.colors["primary-soft"]}},actionStyleFor=(e,t,o)=>{if(o)return{backgroundColor:"neutral"===t?"transparent":e.colors["surface-disabled"],borderColor:"neutral"===t?e.colors.border:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors["text-disabled"]};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-primary"]};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-info"]};case"danger":return{backgroundColor:e.colors.danger,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:e.colors.border,borderWidth:1,textColor:e.colors["text-body"]}}},buildStyles=e=>StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},~~actionButton~~:{~~flex~~:1,alignItems:"center",justifyContent:"center"}});export{Dialog};export default Dialog;
1	+ "use strict";import{useCallback,useMemo,useRef,useState}from"react";import{ActivityIndicator,Pressable,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{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:t,onClose:o,title:r,message:l,children:s,icon:i,variant:n="default",actions:a,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:m,messageStyle:g,iconWrapperStyle:p,actionsRowStyle:y,actionButtonStyle:h,actionTextStyle:x,haptic:f,testID:C}=e,S=useTheme(),j=useMemo(()=>buildStyles(S),[S]),_=useMemo(()=>discFor(S,n),[S,n]),w=S.components.dialog["icon-wrapper-size"],R=S.components.dialog["action-button-min-height"],k=Boolean(a&&a.length>0),D=S.text.base.sizeS.leading.body,I=a?a.map(e=>e.label).join("\n"):"",[M,v]=useState(null),z=null!==M&&M===I,A=useRef(null),B=useCallback(e=>{e.nativeEvent.layout.height>1.5D&&v(I)},[D,I]),O=useCallback(e=>{const t=e.nativeEvent.layout.width,o=A.current;A.current=t,null!==o&&Math.abs(o-t)>.5&&v(null)},[]),T=useCallback(e=>{if(e.loading\|\|e.disabled)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),c?(o(),setTimeout(e.onPress,MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,f]);return _jsx(Modal,{visible:t,onRequestClose:o,haptic:f,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:_jsxs(View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[i?_jsx(View,{style:[j.iconWrapper,{width:w,height:w,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:_,marginBottom:S.space.md},p],children:i}):null,r?_jsx(Text,{style:[j.title,{color:S.colors["text-body"],fontSize:S.text.xl.size,...fontFor(S,"semibold"),marginBottom:l\|\|null!=s?S.space.sm:S.space.md},m],accessibilityRole:"header",children:r}):null,l?_jsx(Text,{style:[j.message,{color:S.colors["text-muted"],fontSize:S.text.base.size,lineHeight:S.text.base.size*S.leading.body,marginBottom:null!=s?S.space.md:k?S.space.lg:0},g],children:l}):null,null!=s?_jsx(View,{style:{marginBottom:k?S.space.lg:0},children:s}):null,a&&a.length>0?_jsx(View,{style:[j.actionsRow,z?j.actionsRowStacked:null,y],onLayout:O,children:a.map((e,t)=>{const o=e.tone??"primary",r=Boolean(e.disabled),l=actionStyleFor(S,o,r),s=t===a.length-1;return _jsx(Pressable,{onPress:()=>T(e),disabled:e.loading\|\|r,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)\|\|r},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)\|\|r,style:({pressed:t})=>[j.actionButton,{flex:z?0:1,minHeight:R,backgroundColor:l.backgroundColor,borderColor:l.borderColor,borderWidth:l.borderWidth,borderRadius:S.radius.md,...smoothCorners,paddingVertical:S.space.sm,paddingHorizontal:S.space.md,marginRight:s\|\|z?0:S.space.sm,opacity:e.loading?.7:t&&!r?.85:1},h],children:e.loading?_jsx(ActivityIndicator,{size:"small",color:l.textColor}):_jsx(View,{onLayout:B,children:_jsx(Text,{style:[{color:l.textColor,fontSize:S.text.base.size,...fontFor(S,"semibold"),textAlign:"center"},x],children:e.label})})},`${e.label}-${t}`)})}):null]})})};Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const o=e.colors["bg-subtle"];switch(t){case"success":return tintOf(e.colors.success,.14,o);case"warning":return tintOf(e.colors.warning,.14,o);case"danger":return tintOf(e.colors.danger,.14,o);case"info":return tintOf(e.colors.info,.14,o);default:return e.colors["primary-soft"]}},actionStyleFor=(e,t,o)=>{if(o)return{backgroundColor:"neutral"===t?"transparent":e.colors["surface-disabled"],borderColor:"neutral"===t?e.colors.border:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors["text-disabled"]};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-primary"]};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-info"]};case"danger":return{backgroundColor:e.colors.danger,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:e.colors.border,borderWidth:1,textColor:e.colors["text-body"]}}},buildStyles=e=>StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionsRowStacked:{flexDirection:"column",rowGap:e.space.sm},actionButton:{alignItems:"center",justifyContent:"center"}});export{Dialog};export default Dialog;

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

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

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

	@@ -1 +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:s,onChange:r,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"],_=k["padding-y"],R=k.text,T=w.space[C["icon-gap"]],I=k.icon,V=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[s],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]);useEffect(()=>{if(!J)return;if(Y)return;const e=w.motion.spring.snappy,t=Animated.parallel([Animated.spring(X,{toValue:J.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring(G,{toValue:J.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[J,s,X,G,w.motion.spring.snappy,Y]);const ee=useCallback(e=>t=>{const{x:i,width:s}=t.nativeEvent.layout;K(t=>{const r=t[e];return r&&r.x===i&&r.width===s?t:{...t,[e]:{x:i,width:s}}})},[]),te=useCallback(e=>{if(e.disabled)return;if(e.key===s)return;const t=resolveHaptic(x,"selection");t&&triggerHaptic(t),r(e.key)},[s,r,x]),ie="pills"===o,se=_jsx(Animated.View,{pointerEvents:"none",style:[H?j.indicatorThumb:ie?j.indicatorPill:j.indicatorUnderline,H?null:ie?{top:L,bottom:L}:{height:V},{width:$??G,transform:[{translateX:Z??X}],backgroundColor:H?w.colors.surface:ie?w.colors["primary-soft"]:w.colors.primary,borderRadius:H?B:ie?W:E,...smoothCorners},f]}),renderTabs=()=>i.map(e=>{const t=e.key===s,i=!0===e.disabled,r=t?w.colors.primary:w.colors["text-subtle"],o=renderSlotIcon(e.icon,{color:r,size:I,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>te(e),onLayout:ee(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:_},{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:T},b],children:o}):null,_jsx(Text,{style:[j.tabLabel,{color:r,fontSize:H?M.text:R,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)}),re={flexDirection:"row",alignItems:"stretch",justifyContent:n?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},oe=_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:[re],keyboardShouldPersistTaps:"handled",children:oe}):_jsx(View,{style:re,children:oe})]})});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;
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;

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

@@ -73,7 +73,12 @@ export interface TabConfig {
  * the extra one going left when the count is odd.
  */
 export interface BottomNavigationCenterAction {
-    /** The button's accessible name. Never drawn. */
+    /**
+     * Text under the button (its circle, or `content`), and the button's
+     * accessible name. The bar's `showLabels` hides it, as it hides the tab
+     * labels; drawn, it makes the cell taller and the button stays centred over
+     * its label.
+     */
     label: string;
     onPress: () => void;
     /**
@@ -128,8 +133,9 @@ export interface BottomNavigationProps {
     onChange: (tabKey: string) => void;
     haptic?: HapticType | false;
     /**
-     * Show the text label under each icon. `expand` only ever labels the
-     * active tab, and `false` hides that one too.
+     * Show the text label under each icon, and under a centre action's button.
+     * `expand` only ever labels the active tab, and `false` hides that one
+     * too.
      */
     showLabels?: boolean;
     variant?: BottomNavigationVariant;

package/lib/typescript/commonjs/components/ChoiceGroup/ChoiceGroup.d.ts CHANGED Viewed

@@ -125,7 +125,7 @@ interface BaseChoiceGroupProps<T = ChoiceOption> {
     max?: number;
     testID?: string;
 }
-interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
+export interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
     selectionMode?: "single";
     /** Controlled selected value. */
     value?: RadioValue;
@@ -133,7 +133,7 @@ interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<
     defaultValue?: RadioValue;
     onChange?: (value: RadioValue) => void;
 }
-interface MultipleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
+export interface MultipleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
     /**
      * `'multiple'`: pressing an option toggles it. Options are exposed as
      * checkboxes (the group has no radiogroup role), and `value`,

package/lib/typescript/commonjs/components/ChoiceGroup/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, } from "./ChoiceGroup";
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, MultipleChoiceGroupProps, SingleChoiceGroupProps, } from "./ChoiceGroup";
 export { ChoiceGroup, default } from "./ChoiceGroup";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Select/Select.d.ts CHANGED Viewed

@@ -131,12 +131,12 @@ interface BaseSelectProps<T = SelectOption> {
     selectedOptionTextStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+export interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi?: false;
     value?: SelectValue;
     onChange: (value: SelectValue) => void;
 }
-interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+export interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi: true;
     value?: SelectValue[];
     onChange: (value: SelectValue[]) => void;

package/lib/typescript/commonjs/components/Select/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export type { SelectOption, SelectProps, SelectSize, SelectValue } from "./Select";
+export type { MultiSelectProps, SelectOption, SelectProps, SelectSize, SelectValue, SingleSelectProps } from "./Select";
 export { default, Select } from "./Select";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/StatTile/StatTile.d.ts CHANGED Viewed

@@ -19,8 +19,8 @@ export interface StatTileTrend {
 export interface StatTileProps {
     /** What the figure measures, drawn small above it. */
     label: string;
-    /** The figure. A string or number is drawn in the heading style; a node is drawn as is. */
-    value: string | number | ReactNode;
+    /** The figure, always given. A string or number is drawn in the heading style; a node is drawn as is. */
+    value: NonNullable<ReactNode>;
     /** Leading icon in a tinted circle: an AppIcon name, `{ name, variant }`, a render fn or any node. */
     icon?: SlotIcon;
     /** Iconsax style for `icon` given as a name. Default `'linear'`. */

package/lib/typescript/commonjs/components/index.d.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export type { CheckboxProps, CheckboxSize, CheckboxTone } from "./Checkbox";
 export { Checkbox } from "./Checkbox";
 export type { ChipProps, ChipSelectionMode, ChipSize, ChipTone, ChipVariant } from "./Chip";
 export { Chip } from "./Chip";
-export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, } from "./ChoiceGroup";
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, MultipleChoiceGroupProps, SingleChoiceGroupProps, } from "./ChoiceGroup";
 export { ChoiceGroup } from "./ChoiceGroup";
 export type { ComposerProps } from "./Composer";
 export { Composer } from "./Composer";
@@ -148,7 +148,7 @@ export type { SectionHeaderProps, SectionHeaderVariant } from "./SectionHeader";
 export { SectionHeader } from "./SectionHeader";
 export type { SegmentedControlProps, SegmentedControlRadius, SegmentedControlSize, SegmentedControlTone, SegmentedControlVariant, SegmentIcon, SegmentIconState, SegmentItem, SegmentValue, } from "./SegmentedControl";
 export { SegmentedControl } from "./SegmentedControl";
-export type { SelectOption, SelectProps, SelectSize, SelectValue } from "./Select";
+export type { MultiSelectProps, SelectOption, SelectProps, SelectSize, SelectValue, SingleSelectProps } from "./Select";
 export { Select } from "./Select";
 export type { SignatureMode, SignaturePadLabels, SignaturePadProps, SignaturePadRef, SignaturePoint, SignatureStroke, } from "./SignaturePad";
 export { SignaturePad } from "./SignaturePad";

package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts CHANGED Viewed

@@ -73,7 +73,12 @@ export interface TabConfig {
  * the extra one going left when the count is odd.
  */
 export interface BottomNavigationCenterAction {
-    /** The button's accessible name. Never drawn. */
+    /**
+     * Text under the button (its circle, or `content`), and the button's
+     * accessible name. The bar's `showLabels` hides it, as it hides the tab
+     * labels; drawn, it makes the cell taller and the button stays centred over
+     * its label.
+     */
     label: string;
     onPress: () => void;
     /**
@@ -128,8 +133,9 @@ export interface BottomNavigationProps {
     onChange: (tabKey: string) => void;
     haptic?: HapticType | false;
     /**
-     * Show the text label under each icon. `expand` only ever labels the
-     * active tab, and `false` hides that one too.
+     * Show the text label under each icon, and under a centre action's button.
+     * `expand` only ever labels the active tab, and `false` hides that one
+     * too.
      */
     showLabels?: boolean;
     variant?: BottomNavigationVariant;

package/lib/typescript/module/components/ChoiceGroup/ChoiceGroup.d.ts CHANGED Viewed

@@ -125,7 +125,7 @@ interface BaseChoiceGroupProps<T = ChoiceOption> {
     max?: number;
     testID?: string;
 }
-interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
+export interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
     selectionMode?: "single";
     /** Controlled selected value. */
     value?: RadioValue;
@@ -133,7 +133,7 @@ interface SingleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<
     defaultValue?: RadioValue;
     onChange?: (value: RadioValue) => void;
 }
-interface MultipleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
+export interface MultipleChoiceGroupProps<T = ChoiceOption> extends BaseChoiceGroupProps<T> {
     /**
      * `'multiple'`: pressing an option toggles it. Options are exposed as
      * checkboxes (the group has no radiogroup role), and `value`,

package/lib/typescript/module/components/ChoiceGroup/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, } from "./ChoiceGroup.js";
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, MultipleChoiceGroupProps, SingleChoiceGroupProps, } from "./ChoiceGroup.js";
 export { ChoiceGroup, default } from "./ChoiceGroup.js";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Select/Select.d.ts CHANGED Viewed

@@ -131,12 +131,12 @@ interface BaseSelectProps<T = SelectOption> {
     selectedOptionTextStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+export interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi?: false;
     value?: SelectValue;
     onChange: (value: SelectValue) => void;
 }
-interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+export interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi: true;
     value?: SelectValue[];
     onChange: (value: SelectValue[]) => void;

package/lib/typescript/module/components/Select/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export type { SelectOption, SelectProps, SelectSize, SelectValue } from "./Select.js";
+export type { MultiSelectProps, SelectOption, SelectProps, SelectSize, SelectValue, SingleSelectProps } from "./Select.js";
 export { default, Select } from "./Select.js";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/StatTile/StatTile.d.ts CHANGED Viewed

@@ -19,8 +19,8 @@ export interface StatTileTrend {
 export interface StatTileProps {
     /** What the figure measures, drawn small above it. */
     label: string;
-    /** The figure. A string or number is drawn in the heading style; a node is drawn as is. */
-    value: string | number | ReactNode;
+    /** The figure, always given. A string or number is drawn in the heading style; a node is drawn as is. */
+    value: NonNullable<ReactNode>;
     /** Leading icon in a tinted circle: an AppIcon name, `{ name, variant }`, a render fn or any node. */
     icon?: SlotIcon;
     /** Iconsax style for `icon` given as a name. Default `'linear'`. */

package/lib/typescript/module/components/index.d.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export type { CheckboxProps, CheckboxSize, CheckboxTone } from "./Checkbox/index
 export { Checkbox } from "./Checkbox/index.js";
 export type { ChipProps, ChipSelectionMode, ChipSize, ChipTone, ChipVariant } from "./Chip/index.js";
 export { Chip } from "./Chip/index.js";
-export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, } from "./ChoiceGroup/index.js";
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState, MultipleChoiceGroupProps, SingleChoiceGroupProps, } from "./ChoiceGroup/index.js";
 export { ChoiceGroup } from "./ChoiceGroup/index.js";
 export type { ComposerProps } from "./Composer/index.js";
 export { Composer } from "./Composer/index.js";
@@ -148,7 +148,7 @@ export type { SectionHeaderProps, SectionHeaderVariant } from "./SectionHeader/i
 export { SectionHeader } from "./SectionHeader/index.js";
 export type { SegmentedControlProps, SegmentedControlRadius, SegmentedControlSize, SegmentedControlTone, SegmentedControlVariant, SegmentIcon, SegmentIconState, SegmentItem, SegmentValue, } from "./SegmentedControl/index.js";
 export { SegmentedControl } from "./SegmentedControl/index.js";
-export type { SelectOption, SelectProps, SelectSize, SelectValue } from "./Select/index.js";
+export type { MultiSelectProps, SelectOption, SelectProps, SelectSize, SelectValue, SingleSelectProps } from "./Select/index.js";
 export { Select } from "./Select/index.js";
 export type { SignatureMode, SignaturePadLabels, SignaturePadProps, SignaturePadRef, SignaturePoint, SignatureStroke, } from "./SignaturePad/index.js";
 export { SignaturePad } from "./SignaturePad/index.js";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.93.0",
+  "version": "0.94.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -84,8 +84,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/canvas-kit": "0.93.0",
-    "@webority/mobile-core": "0.93.0"
+    "@webority/canvas-kit": "0.94.0",
+    "@webority/mobile-core": "0.94.0"
   },
   "peerDependenciesMeta": {
     "@webority/canvas-kit": {
@@ -146,10 +146,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/canvas-kit": "0.93.0",
-    "@webority/mobile-core": "0.93.0",
-    "@webority/tokens": "0.93.0",
-    "@webority/mobile-dev": "0.0.0"
+    "@webority/canvas-kit": "0.94.0",
+    "@webority/mobile-dev": "0.0.0",
+    "@webority/mobile-core": "0.94.0",
+    "@webority/tokens": "0.94.0"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs",