@webority/mobile-ui 0.109.5 → 0.109.7

package/lib/module/components/Banner/Banner.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BANNER_LABELS=Object.freeze({dismiss:"Dismiss banner"});const Banner=forwardRef((e,t)=>{const{title:r,message:o,tone:n="neutral",variant:s="bar",icon:i,actions:a,dismissible:l=!1,onClose:c,haptic:d,visible:u=!0,animateMount:m=!0,loading:p=!1,accessibilityRole:g="alert",accessibilityLabel:h,labels:y,style:b,containerStyle:x,iconCircleStyle:f,tintBarStyle:w,closeButtonStyle:j,actionButtonStyle:S,testID:v}=e;warnInvalidValue("Banner","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","variant",e.variant,["bar","wash"]),warnInvalidValue("Banner","accessibilityRole",e.accessibilityRole,["alert","summary","none"]);const k=useTheme(),B=usePresenceMotion(),C=useMemo(()=>buildStyles(k),[k]),_=useMemo(()=>tintFor(k,n),[k,n]),R=useMemo(()=>({...DEFAULT_BANNER_LABELS,...y}),[y]),[V,I]=B.range(-20,0),A=useRef(createAnimatedValue(m&&u?V:0)).current,T=useRef(createAnimatedValue(m&&u?0:u?1:0)).current,[D,L]=useState(u),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!m))return;let e;return u?(L(!0),e=Animated.parallel([Animated.timing(A,{toValue:I,duration:k.motion.duration.default,useNativeDriver:!0}),Animated.timing(T,{toValue:1,duration:B.duration("default"),useNativeDriver:!0})]),e.start()):D&&(e=Animated.parallel([Animated.timing(A,{toValue:V,duration:k.motion.duration.fast,useNativeDriver:!0}),Animated.timing(T,{toValue:0,duration:B.duration("fast"),useNativeDriver:!0})]),e.start(()=>{L(!1)})),()=>e?.stop()},[u]),!D)return null;const M=r??" ",z="string"==typeof o?o??" ":"",N="wash"===s,P="alert"===g?"danger"===n?"assertive":"polite":"none",E=_jsxs(Animated.View,{ref:t,accessibilityRole:g,accessibilityLiveRegion:P,accessibilityLabel:h,testID:v,style:[C.container,{backgroundColor:N?_.soft:k.colors["bg-subtle"],borderRadius:N?k.radius.sm:k.radius.md,...smoothCorners,padding:k.space.md,opacity:T,transform:[{translateY:A}]},b,x],children:[!N&&k.components.banner["tint-bar-width"]>0?_jsx(View,{style:[C.tintBar,{backgroundColor:_.bar},w]}):null,_jsxs(View,{style:C.row,children:[!1===i?null:_jsx(View,i?{style:C.iconWrap,children:renderSlotIcon(i,{color:_.ink,size:k.text.xl.size,disabled:!1})}:{style:[C.iconCircle,{backgroundColor:`${_.bar}22`},f],children:_jsx(Text,{variant:"body",weight:"bold",accessible:!1,style:[C.iconGlyph,{color:_.ink}],children:_.glyph})}),_jsxs(View,{style:C.textBlock,children:[r||p?_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:2,style:{lineHeight:20,...N?{color:_.ink}:null},children:M}):null,"string"==typeof o||p?_jsx(Text,{variant:"bodySmall",color:"secondary",style:{lineHeight:18,marginTop:r?k.space.xxs:0},children:z||" "}):_jsx(View,{style:{marginTop:r?k.space.xxs:0},children:o})]}),l?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:R.dismiss,onPress:()=>{const e=resolveHaptic(d,"selection");e&&triggerHaptic(e),c?.()},hitSlop:8,...hitSlopMarker(8),style:({pressed:e})=>[C.closeBtn,{backgroundColor:e?k.colors["surface-pressed"]:"transparent"},j],children:_jsx(Text,{variant:"title",weight:"bold",color:"secondary",accessible:!1,style:{lineHeight:17},children:"×"})}):null]}),a&&a.length>0?_jsx(View,{style:C.actionsRow,children:a.map((e,t)=>{warnInvalidValue("Banner","action.tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","action.variant",e.variant,["solid","outline","ghost"]),warnInvalidValue("Banner","action.size",e.size,["sm","md"]);const r=e.tone??"primary",o=e.variant??"ghost",n="primary"===r?_.glyphColor:"neutral"===r?k.colors["text-muted"]:k.colors[r],s="primary"===r?_.ink:"neutral"===r?k.colors["text-muted"]:k.colors[`${r}-text`],i="primary"===r?_.on:"neutral"===r?k.colors["on-neutral-strong"]:k.colors[`on-${r}`],a="solid"===o;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,testID:e.testID,onPress:()=>{const t=resolveHaptic(d,"selection");t&&triggerHaptic(t),e.onPress()},style:({pressed:t})=>[C.actionBtn,"md"===e.size&&C.actionBtnMd,"outline"===o&&{borderWidth:1,borderColor:s},{backgroundColor:a?n:t?k.colors["surface-pressed"]:"transparent",opacity:a&&t?.85:1},S],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",style:{color:a?i:s},children:e.label})},`${e.label}-${t}`)})}):null]});return p?_jsx(BannerSkeleton,{...e}):E});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:r,containerStyle:o,style:n})=>{const s=useTheme(),i=!1!==r;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:s.colors.surface,borderRadius:s.radius.md,...smoothCorners,padding:s.space.md,borderWidth:1,borderColor:s.colors.border},o,n],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(View,{style:{marginRight:s.space.sm},children:_jsx(Skeleton,{shape:"circle",width:32,height:32})}):null,_jsxs(View,{style:{flex:1},children:[void 0!==e?_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:s.space.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:s.text.sm.size,lastLineWidth:"70%"}),t&&t.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.sm},children:t.map((e,t)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:s.space.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{soft:e.colors["success-soft"],bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors["success-text"],on:e.colors["on-success"],glyph:"✓"};case"warning":return{soft:e.colors["warning-soft"],bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors["warning-text"],on:e.colors["on-warning"],glyph:"⚠"};case"danger":return{soft:e.colors["danger-soft"],bar:e.colors.danger,glyphColor:e.colors.danger,ink:e.colors["danger-text"],on:e.colors["on-danger"],glyph:"✗"};case"neutral":return{soft:e.colors["bg-subtle"],bar:e.colors["text-subtle"],glyphColor:e.colors["text-muted"],ink:e.colors["text-muted"],on:e.colors["on-neutral-strong"],glyph:"i"};case"primary":return{soft:e.colors["primary-soft"],bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors["primary-text"],on:e.colors["on-primary"],glyph:"i"};case"info":return{soft:e.colors["info-soft"],bar:e.colors.info,glyphColor:e.colors.info,ink:e.colors["info-text"],on:e.colors["on-info"],glyph:"i"};default:return tintFor(e,"neutral")}},buildStyles=e=>{const t=e.components.banner,r=e.space.sm;return StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.space.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:t["tint-bar-width"]},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:r},iconCircle:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginRight:r},iconGlyph:{lineHeight:17},textBlock:{flex:1,paddingRight:e.space.xs},closeBtn:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.space.xxs},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:e.space.xs,columnGap:e.space.xs,rowGap:e.space.xs},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.space.md}})};export{Banner};export default Banner;
+"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BANNER_LABELS=Object.freeze({dismiss:"Dismiss banner"});const Banner=forwardRef((e,t)=>{const{title:r,message:o,tone:n="neutral",variant:s="bar",icon:i,actions:a,dismissible:l=!1,onClose:c,haptic:d,visible:u=!0,animateMount:m=!0,loading:p=!1,accessibilityRole:g="alert",accessibilityLabel:h,labels:y,style:x,containerStyle:b,iconCircleStyle:f,tintBarStyle:w,closeButtonStyle:j,actionButtonStyle:S,testID:B}=e;warnInvalidValue("Banner","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","variant",e.variant,["bar","wash","tint"]),warnInvalidValue("Banner","accessibilityRole",e.accessibilityRole,["alert","summary","none"]);const v=useTheme(),k=usePresenceMotion(),_=useMemo(()=>buildStyles(v),[v]),C=useMemo(()=>tintFor(v,n),[v,n]),I=useMemo(()=>({...DEFAULT_BANNER_LABELS,...y}),[y]),[R,V]=k.range(-20,0),A=useRef(createAnimatedValue(m&&u?R:0)).current,T=useRef(createAnimatedValue(m&&u?0:u?1:0)).current,[L,D]=useState(u),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!m))return;let e;return u?(D(!0),e=Animated.parallel([Animated.timing(A,{toValue:V,duration:v.motion.duration.default,useNativeDriver:!0}),Animated.timing(T,{toValue:1,duration:k.duration("default"),useNativeDriver:!0})]),e.start()):L&&(e=Animated.parallel([Animated.timing(A,{toValue:R,duration:v.motion.duration.fast,useNativeDriver:!0}),Animated.timing(T,{toValue:0,duration:k.duration("fast"),useNativeDriver:!0})]),e.start(()=>{D(!1)})),()=>e?.stop()},[u]),!L)return null;const E=r??" ",M="string"==typeof o?o??" ":"",N="wash"===s,z="bar"!==s,P="alert"===g?"danger"===n?"assertive":"polite":"none",W=_jsxs(Animated.View,{ref:t,accessibilityRole:g,accessibilityLiveRegion:P,accessibilityLabel:h,testID:B,style:[_.container,{backgroundColor:z?C.soft:v.colors["bg-subtle"],borderRadius:N?v.radius.sm:v.radius.md,...smoothCorners,padding:v.space.md,opacity:T,transform:[{translateY:A}]},x,b],children:[!N&&v.components.banner["tint-bar-width"]>0?_jsx(View,{style:[_.tintBar,{backgroundColor:C.bar},w]}):null,_jsxs(View,{style:_.row,children:[!1===i?null:i?_jsx(View,{style:_.iconWrap,children:renderSlotIcon(i,{color:C.ink,size:v.text.xl.size,disabled:!1})}):_jsx(IconBadge,{dimension:ICON_CIRCLE_SIZE,color:C.bar,icon:_jsx(Text,{variant:"body",weight:"bold",accessible:!1,style:[_.iconGlyph,{color:C.ink}],children:C.glyph}),style:[_.iconCircle,f]}),_jsxs(View,{style:_.textBlock,children:[r||p?_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:2,style:{lineHeight:20,...N?{color:C.ink}:null},children:E}):null,"string"==typeof o||p?_jsx(Text,{variant:"bodySmall",color:"secondary",style:{lineHeight:18,marginTop:r?v.space.xxs:0},children:M||" "}):_jsx(View,{style:{marginTop:r?v.space.xxs:0},children:o})]}),l?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:I.dismiss,onPress:()=>{const e=resolveHaptic(d,"selection");e&&triggerHaptic(e),c?.()},hitSlop:8,...hitSlopMarker(8),style:({pressed:e})=>[_.closeBtn,{backgroundColor:e?v.colors["surface-pressed"]:"transparent"},j],children:_jsx(Text,{variant:"title",weight:"bold",color:"secondary",accessible:!1,style:{lineHeight:17},children:"×"})}):null]}),a&&a.length>0?_jsx(View,{style:_.actionsRow,children:a.map((e,t)=>{warnInvalidValue("Banner","action.tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","action.variant",e.variant,["solid","outline","ghost"]),warnInvalidValue("Banner","action.size",e.size,["sm","md"]);const r=e.tone??"primary",o=e.variant??"ghost",n="primary"===r?C.glyphColor:"neutral"===r?v.colors["text-muted"]:v.colors[r],s="primary"===r?C.ink:"neutral"===r?v.colors["text-muted"]:v.colors[`${r}-text`],i="primary"===r?C.on:"neutral"===r?v.colors["on-neutral-strong"]:v.colors[`on-${r}`],a="solid"===o;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,testID:e.testID,onPress:()=>{const t=resolveHaptic(d,"selection");t&&triggerHaptic(t),e.onPress()},style:({pressed:t})=>[_.actionBtn,"md"===e.size&&_.actionBtnMd,"outline"===o&&{borderWidth:1,borderColor:s},{backgroundColor:a?n:t?v.colors["surface-pressed"]:"transparent",opacity:a&&t?.85:1},S],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",style:{color:a?i:s},children:e.label})},`${e.label}-${t}`)})}):null]});return p?_jsx(BannerSkeleton,{...e}):W});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:r,containerStyle:o,style:n})=>{const s=useTheme(),i=!1!==r;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:s.colors.surface,borderRadius:s.radius.md,...smoothCorners,padding:s.space.md,borderWidth:1,borderColor:s.colors.border},o,n],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(View,{style:{marginRight:s.space.sm},children:_jsx(Skeleton,{shape:"circle",width:32,height:32})}):null,_jsxs(View,{style:{flex:1},children:[void 0!==e?_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:s.space.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:s.text.sm.size,lastLineWidth:"70%"}),t&&t.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.sm},children:t.map((e,t)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:s.space.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{soft:e.colors["success-soft"],bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors["success-text"],on:e.colors["on-success"],glyph:"✓"};case"warning":return{soft:e.colors["warning-soft"],bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors["warning-text"],on:e.colors["on-warning"],glyph:"⚠"};case"danger":return{soft:e.colors["danger-soft"],bar:e.colors.danger,glyphColor:e.colors.danger,ink:e.colors["danger-text"],on:e.colors["on-danger"],glyph:"✗"};case"neutral":return{soft:e.colors["bg-subtle"],bar:e.colors["text-subtle"],glyphColor:e.colors["text-muted"],ink:e.colors["text-muted"],on:e.colors["on-neutral-strong"],glyph:"i"};case"primary":return{soft:e.colors["primary-soft"],bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors["primary-text"],on:e.colors["on-primary"],glyph:"i"};case"info":return{soft:e.colors["info-soft"],bar:e.colors.info,glyphColor:e.colors.info,ink:e.colors["info-text"],on:e.colors["on-info"],glyph:"i"};default:return tintFor(e,"neutral")}},ICON_CIRCLE_SIZE=28,buildStyles=e=>{const t=e.components.banner,r=e.space.sm;return StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.space.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:t["tint-bar-width"]},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:r},iconCircle:{marginRight:r},iconGlyph:{lineHeight:17},textBlock:{flex:1,paddingRight:e.space.xs},closeBtn:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.space.xxs},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:e.space.xs,columnGap:e.space.xs,rowGap:e.space.xs},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.space.md}})};export{Banner};export default Banner;

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

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

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -1 +1 @@
-"use strict";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{Dimensions,Keyboard,Modal,Platform,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useReanimatedKeyboardAnimation}from"react-native-keyboard-controller";import Animated,{Easing,runOnJS,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{PRESENCE_REDUCE_MOTION,usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BOTTOM_SHEET_LABELS=Object.freeze({close:"Close bottom sheet",dragHandle:"Drag handle"});const DEFAULT_SNAP_POINTS=["content"],TABLET_MIN_SHORT_SIDE=600,DIALOG_MAX_WIDTH=560,BottomSheetContext=createContext(null);export const useBottomSheet=()=>{const e=useContext(BottomSheetContext);if(!e)throw new Error("[@webority/mobile-ui] BottomSheet: useBottomSheet must be used inside a <BottomSheet>.");return e};const SPRING_CONFIG={damping:20,stiffness:240,mass:1},CLOSE_VELOCITY_THRESHOLD=1e3,DRAG_ACTIVATION_OFFSET=10,BottomSheet=e=>{const{snapPoints:t=DEFAULT_SNAP_POINTS,visible:o,onClose:s,snapIndex:n,onSnapChange:r,onAnimate:a,onAfterClose:l,enablePanDownToClose:i=!0,enableBackdropPress:u=!0,onBeforeClose:c,title:d,labels:h,scrollable:m=!1,scrollRef:f,onScroll:b,onContentSizeChange:S,onScrollLayout:p,scrollEventThrottle:v,keyboardBehavior:y="shift",inline:g=!1,presentation:w="sheet",animateMount:C=!0,handleIndicatorStyle:x,containerStyle:_,header:T,footer:E,headerStyle:M,footerStyle:R,children:k,accessibilityLabel:I,accessibilityViewIsModal:O,testID:j}=e;warnInvalidValue("BottomSheet","presentation",e.presentation,["sheet","dialog","auto"]),warnInvalidValue("BottomSheet","keyboardBehavior",e.keyboardBehavior,["none","shift"]);const A=useMemo(()=>({...DEFAULT_BOTTOM_SHEET_LABELS,...h}),[h]),B=null!=T||null!=d,D=g?"inline":"modal",V=useTheme(),P=usePresenceMotion(),L=useSafeAreaInsets(),[H,N]=useState(()=>Dimensions.get("window").height),[G,F]=useState(()=>Dimensions.get("window").width),J=useCallback(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&N(e=>e===t?e:t),o>0&&F(e=>e===o?e:o)},[]),U=useWindowDimensions(),z="dialog"===w||"auto"===w&&Math.min(U.width,U.height)>=600,K=Math.min(560,G-2*V.space.xl),[Y,$]=useModalInsets(),W="modal"===D?Y.top:L.top,q="modal"===D?Y.bottom:L.bottom,X=t.includes("content"),[Q,Z]=useMeasuredHeight(),[ee,te]=useMeasuredHeight(),[oe,se,ne]=useMeasuredHeight(),[re,ae]=useMeasuredHeight(),le=z?V.space.md:Q,ie=X?Math.min(le+(B?ee:0)+oe+(null!=E?re:0)+q,H-W):0,ue=useCallback((e,t)=>{X&&ne(t),S?.(e,t)},[X,S,ne]),ce=useMemo(()=>resolveSnapPoints(t,H,ie),[t,H,ie]),de=H,he=ce[ce.length-1]??0,me=useSharedValue(de),fe=useSharedValue(de),be=useSharedValue(1),Se=useSharedValue(-1),[pe,ve]=useState(-1),ye=useRef(!1),[ge,we]=useState(!1),[Ce,xe]=useState(!1),Te=useRef(!1),Ee=useRef(l);Ee.current=l;const[Me,Re]=useState(!1),ke=useRef(!C&&o),Ie=useRef(-1),Oe=useRef(!1);Oe.current="modal"===D?Ce:Me;const je=useRef(c);je.current=c;const Ae=useRef(s);Ae.current=s;const Be=useRef(!1),De=useRef(!0),Ve=useRef([]),Pe=useCallback(e=>{const t=Ve.current;Ve.current=[];for(const o of t)o(e)},[]);useEffect(()=>(De.current=!0,()=>{De.current=!1,Pe(!1)}),[Pe]);const Le=useCallback(e=>{if(e<0||e>=ce.length)return de;const t=ce[e];return z?(H-t)/2:H-t},[ce,H,de,z]),He=useCallback(e=>{Ie.current=e;pe!==e&&(ve(e),Se.value=e,e>=0&&r?.(e))},[pe,Se,r]),Ne=useCallback(()=>{ye.current=!1,Se.value<0&&(Te.current=!0,"modal"===D?(we(!1),"ios"!==Platform.OS&&xe(!1)):Re(!1))},[D,Se]),Ge=useCallback(()=>{Te.current&&xe(!1)},[]);useEffect(()=>{("modal"===D?!Ce:!Me)&&Te.current&&(Te.current=!1,Ee.current?.(),Pe(!0))},[D,Ce,Me,Pe]);const Fe=useCallback((e,t,o)=>{ye.current=!0,a?.(t,o),me.value=withSpring(e,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(Ne)()})},[a,me,Ne]),Je=useCallback(e=>{const t="number"==typeof e?clamp(e,0,ce.length-1):pe>=0?pe:0,o=Se.value,s=Le(t);return Te.current=!1,Pe(!1),"modal"===D?(xe(!0),we(!0)):Re(!0),o<0&&ke.current?(me.value=s,be.value=1,He(t),void a?.(o,t)):o<0&&P.reduced?(me.value=s,be.value=0,be.value=withTiming(1,{duration:P.duration("fast"),easing:Easing.bezier(...V.motion.ease.decelerate),reduceMotion:PRESENCE_REDUCE_MOTION}),He(t),void a?.(o,t)):(o<0&&(me.value=de,be.value=1),He(t),void Fe(s,o,t))},[Fe,de,pe,Se,D,a,P,be,ce.length,He,Pe,V.motion.ease.decelerate,me,Le]),Ue=useCallback(()=>new Promise(e=>{if(Ie.current<0)return void(Oe.current?Ve.current.push(e):e(!0));Ve.current.push(e),ke.current=!1;const t=Se.value;He(-1),ye.current=!0,a?.(t,-1);const o=P.reduced?be:me,s=P.reduced?0:de;o.value=withTiming(s,{duration:P.duration("fast"),easing:Easing.bezier(...V.motion.ease.accelerate),reduceMotion:PRESENCE_REDUCE_MOTION},e=>{"worklet";e&&runOnJS(Ne)()})}),[de,Se,Ne,a,P,be,He,me,V.motion.ease.accelerate]),ze=useCallback((e,t,o)=>{const s=je.current;if(!s)return void e();if(Be.current)return void t?.();const n=s();"boolean"!=typeof n?(Be.current=!0,o?.(),n.then(o=>{Be.current=!1,o&&De.current&&Ie.current>=0?e():t?.()},e=>{throw Be.current=!1,e})):(n?e:t)?.()},[]),Ke=useCallback(()=>new Promise(e=>{Ie.current<0?e(!0):ze(()=>{Ae.current(),Ue(),e(!0)},()=>e(!1))}),[Ue,ze]),Ye=useCallback(()=>{Ae.current()},[]),$e=useCallback(()=>{u&&Ke()},[u,Ke]),We=useRef(null);useEffect(()=>{const e=We.current!==o;We.current=o,e?o?Je(n??0):Ue():o&&"number"==typeof n&&n!==Se.value&&Je(n)},[o,n]);const qe=useRef({hostHeight:H,contentSnap:ie});useEffect(()=>{const e=qe.current;if(e.hostHeight===H&&e.contentSnap===ie)return;if(qe.current={hostHeight:H,contentSnap:ie},e.hostHeight===H&&Se.value<0)return;const t=Le(Se.value);me.value=ke.current?t:withSpring(t,SPRING_CONFIG)},[H,ie]);const Xe=H-he,Qe=useMemo(()=>ce.map(e=>H-e),[ce,H]),Ze=useCallback(()=>{const e=Ie.current;e<0||Fe(Le(e),e,e)},[Fe,Le]),et=useCallback((e,t)=>{const o=Se.value;-1!==e?(He(e),Fe(t,o,e)):ze(()=>{Keyboard.dismiss(),triggerHaptic("selection"),Ae.current(),Ue()},Ze,Ze)},[Fe,Ue,Se,ze,He,Ze]),tt=useMemo(()=>Gesture.Native().withTestId(j?`${j}-content-gesture`:"bottom-sheet-content-gesture"),[j]),ot=useMemo(()=>{const e=Qe,t=de,o=Xe,s=i;return Gesture.Pan().withTestId(j?`${j}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{"worklet";fe.value=me.value}).onUpdate(e=>{"worklet";const t=fe.value+e.translationY;me.value=t<o?o+.25*(t-o):t}).onEnd(o=>{"worklet";const n=me.value;if(o.velocityY>1e3)return s?void runOnJS(et)(-1,t):void runOnJS(et)(0,e[0]);let r=0,a=Math.abs(n-e[0]);for(let t=1;t<e.length;t++){const o=Math.abs(n-e[t]);o<a&&(a=o,r=t)}const l=e[0];s&&n-l>80?runOnJS(et)(-1,t):runOnJS(et)(r,e[r])})},[de,fe,i,et,Xe,Qe,j,me]),{height:st}=useReanimatedKeyboardAnimation(),nt="shift"===y,rt=useDerivedValue(()=>nt?st.value:0),at=ce[pe>=0?pe:0]??he,lt=V.space.md,it=useAnimatedStyle(()=>{if(z){const e=rt.value,t=H+e-at-lt,o=e<0&&me.value>t?t:me.value;return{top:o<W?W:o,opacity:be.value}}const e=me.value+rt.value,t=rt.value<0?W:Xe;return{top:e<t?t:e,opacity:be.value}}),ut=useAnimatedStyle(()=>{const e=rt.value;if(z){const t=H+e-at-lt,o=e<0&&me.value>t?t:me.value,s=H+e-lt-(o<W?W:o);return{height:s<0?0:s>at?at:s}}const t=e<0?W:Xe,o=me.value+e,s=H+e-(o<t?t:o);return{height:s<0?0:s>he?he:s}}),ct=pe>=0,dt=useMemo(()=>buildStyles(V),[V]),ht=useCallback(()=>{u&&ze(()=>{triggerHaptic("selection"),Ae.current(),Ue()})},[u,Ue,ze]),mt=useMemo(()=>Gesture.Tap().withTestId(j?`${j}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((_e,e)=>{"worklet";e&&runOnJS(ht)()}),[ht,j]),ft=useMemo(()=>({snapIndex:pe,snapPoints:ce,close:Ye,requestClose:Ke}),[pe,ce,Ye,Ke]);if("inline"===D&&!Me)return null;if("modal"===D&&!Ce)return null;const bt=_jsxs(View,{collapsable:!1,style:["modal"===D?dt.backdropModal:dt.backdropInline,{backgroundColor:V.colors.scrim}],onLayout:J,testID:j,accessibilityViewIsModal:O??ct,children:[_jsx(GestureDetector,{gesture:mt,children:_jsx(Animated.View,{style:StyleSheet.absoluteFill,accessibilityRole:"button",accessibilityLabel:A.close})}),_jsx(Animated.View,{accessibilityRole:"alert",accessibilityLabel:I,accessibilityViewIsModal:O??ct,accessibilityActions:[{name:"escape",label:A.close}],onAccessibilityAction:e=>{"escape"===e.nativeEvent.actionName&&$e()},onAccessibilityEscape:$e,style:[dt.sheet,{height:he,backgroundColor:V.colors.surface,borderTopLeftRadius:V.radius.xl,borderTopRightRadius:V.radius.xl,...smoothCorners,...V.shadow.modal},z?{height:at,left:(G-K)/2,right:void 0,width:K,borderBottomLeftRadius:V.radius.xl,borderBottomRightRadius:V.radius.xl}:null,_,it],children:_jsxs(SheetBody,{style:[dt.body,ut],keyboardOffset:rt,children:[z?_jsx(View,{style:{height:V.space.md}}):_jsx(GestureDetector,{gesture:ot,children:_jsx(View,{style:dt.handleRow,onLayout:X?Z:void 0,accessible:!0,accessibilityLabel:A.dragHandle,accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:j?`${j}-handle`:"bottom-sheet-handle",children:_jsx(View,{style:[dt.handle,{backgroundColor:V.colors.border},x]})})}),B&&_jsxs(View,{style:[dt.header,M],onLayout:X?te:void 0,children:[null!=d?_jsx(Text,{variant:"title",accessibilityRole:"header",children:d}):null,T]}),m?_jsx(GestureDetector,{gesture:tt,children:_jsx(ScrollView,{ref:f,style:dt.scrollContent,onScroll:b,onContentSizeChange:ue,onLayout:p,scrollEventThrottle:v,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:k})}):_jsx(View,{style:X?[dt.content,{overflow:"visible"}]:dt.content,children:X?_jsx(View,{onLayout:se,children:k}):k}),null!=E&&_jsx(View,{style:[dt.footer,R],onLayout:X?ae:void 0,children:E})]})})]}),St=_jsx(BottomSheetContext.Provider,{value:ft,children:bt});return"modal"===D?_jsx(Modal,{transparent:!0,visible:ge,onRequestClose:$e,onDismiss:"ios"===Platform.OS?Ge:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:_jsxs(ModalSafeArea,{onInsets:$,children:["android"===Platform.OS?_jsx(GestureHandlerRootView,{style:dt.modalRoot,children:St}):St,_jsx(ToastHost,{})]})}):St},SheetBody=({style:e,keyboardOffset:t,children:o})=>{const s=useSafeAreaInsets().bottom,n=useAnimatedStyle(()=>{const e=s+t.value;return{paddingBottom:e>0?e:0}});return _jsx(Animated.View,{style:[e,n],children:o})};BottomSheet.displayName="BottomSheet";const useMeasuredHeight=()=>{const[e,t]=useState(0),o=useCallback(e=>{t(t=>t===e?t:e)},[]);return[e,useCallback(e=>o(e.nativeEvent.layout.height),[o]),o]},resolveSnapPoints=(e,t,o)=>[...e.map(e=>{if("number"==typeof e)return e;if("content"===e)return o;const s=parseFloat(e);return Number.isNaN(s)?0:s/100*t})].sort((e,t)=>e-t),clamp=(e,t,o)=>Math.min(Math.max(e,t),o),buildStyles=e=>StyleSheet.create({backdropModal:{flex:1},backdropInline:{...StyleSheet.absoluteFill},sheet:{position:"absolute",left:0,right:0,overflow:"hidden"},body:{overflow:"hidden"},handleRow:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",paddingTop:e.space.md,paddingBottom:e.space.xl},header:{},footer:{},handle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},content:{flex:1,overflow:"hidden"},scrollContent:{flex:1},modalRoot:{flex:1}});export{BottomSheet};export default BottomSheet;
+"use strict";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{Dimensions,Keyboard,Modal,Platform,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useReanimatedKeyboardAnimation}from"react-native-keyboard-controller";import Animated,{Easing,runOnJS,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{PRESENCE_REDUCE_MOTION,usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{ACTIONS_LAYOUTS,OverlayActions}from"../Dialog/OverlayActions.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BOTTOM_SHEET_LABELS=Object.freeze({close:"Close bottom sheet",dragHandle:"Drag handle"});const DEFAULT_SNAP_POINTS=["content"],TABLET_MIN_SHORT_SIDE=600,DIALOG_MAX_WIDTH=560,BottomSheetContext=createContext(null);export const useBottomSheet=()=>{const e=useContext(BottomSheetContext);if(!e)throw new Error("[@webority/mobile-ui] BottomSheet: useBottomSheet must be used inside a <BottomSheet>.");return e};const SPRING_CONFIG={damping:20,stiffness:240,mass:1},CLOSE_VELOCITY_THRESHOLD=1e3,DRAG_ACTIVATION_OFFSET=10,BottomSheet=e=>{const{snapPoints:t=DEFAULT_SNAP_POINTS,visible:o,onClose:s,snapIndex:n,onSnapChange:r,onAnimate:a,onAfterClose:i,enablePanDownToClose:l=!0,enableBackdropPress:u=!0,onBeforeClose:c,title:d,labels:h,scrollable:m=!1,scrollRef:f,onScroll:S,onContentSizeChange:b,onScrollLayout:p,scrollEventThrottle:v,keyboardBehavior:y="shift",inline:g=!1,presentation:w="sheet",animateMount:C=!0,handleIndicatorStyle:x,containerStyle:_,header:T,actions:E,actionsLayout:M="auto",footer:I,headerStyle:O,footerStyle:R,children:k,accessibilityLabel:A,accessibilityViewIsModal:j,testID:V}=e;warnInvalidValue("BottomSheet","presentation",e.presentation,["sheet","dialog","auto"]),warnInvalidValue("BottomSheet","keyboardBehavior",e.keyboardBehavior,["none","shift"]),warnInvalidValue("BottomSheet","actionsLayout",e.actionsLayout,ACTIONS_LAYOUTS);const B=useMemo(()=>({...DEFAULT_BOTTOM_SHEET_LABELS,...h}),[h]),D=null!=T||null!=d,L=null!=E&&E.length>0,P=null!=I||L,N=g?"inline":"modal",H=useTheme(),G=usePresenceMotion(),F=useSafeAreaInsets(),[U,J]=useState(()=>Dimensions.get("window").height),[z,Y]=useState(()=>Dimensions.get("window").width),K=useCallback(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&J(e=>e===t?e:t),o>0&&Y(e=>e===o?e:o)},[]),$=useWindowDimensions(),W="dialog"===w||"auto"===w&&Math.min($.width,$.height)>=600,q=Math.min(560,z-2*H.space.xl),[X,Q]=useModalInsets(),Z="modal"===N?X.top:F.top,ee="modal"===N?X.bottom:F.bottom,te=t.includes("content"),[oe,se]=useMeasuredHeight(),[ne,re]=useMeasuredHeight(),[ae,ie,le]=useMeasuredHeight(),[ue,ce]=useMeasuredHeight(),de=W?H.space.md:oe,he=te?Math.min(de+(D?ne:0)+ae+(P?ue:0)+ee,U-Z):0,me=useCallback((e,t)=>{te&&le(t),b?.(e,t)},[te,b,le]),fe=useMemo(()=>resolveSnapPoints(t,U,he),[t,U,he]),Se=U,be=fe[fe.length-1]??0,pe=useSharedValue(Se),ve=useSharedValue(Se),ye=useSharedValue(1),ge=useSharedValue(-1),[we,Ce]=useState(-1),xe=useRef(!1),[Te,Ee]=useState(!1),[Me,Ie]=useState(!1),Oe=useRef(!1),Re=useRef(i);Re.current=i;const[ke,Ae]=useState(!1),je=useRef(!C&&o),Ve=useRef(-1),Be=useRef(!1);Be.current="modal"===N?Me:ke;const De=useRef(c);De.current=c;const Le=useRef(s);Le.current=s;const Pe=useRef(!1),Ne=useRef(!0),He=useRef([]),Ge=useCallback(e=>{const t=He.current;He.current=[];for(const o of t)o(e)},[]);useEffect(()=>(Ne.current=!0,()=>{Ne.current=!1,Ge(!1)}),[Ge]);const Fe=useCallback(e=>{if(e<0||e>=fe.length)return Se;const t=fe[e];return W?(U-t)/2:U-t},[fe,U,Se,W]),Ue=useCallback(e=>{Ve.current=e;we!==e&&(Ce(e),ge.value=e,e>=0&&r?.(e))},[we,ge,r]),Je=useCallback(()=>{xe.current=!1,ge.value<0&&(Oe.current=!0,"modal"===N?(Ee(!1),"ios"!==Platform.OS&&Ie(!1)):Ae(!1))},[N,ge]),ze=useCallback(()=>{Oe.current&&Ie(!1)},[]);useEffect(()=>{("modal"===N?!Me:!ke)&&Oe.current&&(Oe.current=!1,Re.current?.(),Ge(!0))},[N,Me,ke,Ge]);const Ye=useCallback((e,t,o)=>{xe.current=!0,a?.(t,o),pe.value=withSpring(e,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(Je)()})},[a,pe,Je]),Ke=useCallback(e=>{const t="number"==typeof e?clamp(e,0,fe.length-1):we>=0?we:0,o=ge.value,s=Fe(t);return Oe.current=!1,Ge(!1),"modal"===N?(Ie(!0),Ee(!0)):Ae(!0),o<0&&je.current?(pe.value=s,ye.value=1,Ue(t),void a?.(o,t)):o<0&&G.reduced?(pe.value=s,ye.value=0,ye.value=withTiming(1,{duration:G.duration("fast"),easing:Easing.bezier(...H.motion.ease.decelerate),reduceMotion:PRESENCE_REDUCE_MOTION}),Ue(t),void a?.(o,t)):(o<0&&(pe.value=Se,ye.value=1),Ue(t),void Ye(s,o,t))},[Ye,Se,we,ge,N,a,G,ye,fe.length,Ue,Ge,H.motion.ease.decelerate,pe,Fe]),$e=useCallback(()=>new Promise(e=>{if(Ve.current<0)return void(Be.current?He.current.push(e):e(!0));He.current.push(e),je.current=!1;const t=ge.value;Ue(-1),xe.current=!0,a?.(t,-1);const o=G.reduced?ye:pe,s=G.reduced?0:Se;o.value=withTiming(s,{duration:G.duration("fast"),easing:Easing.bezier(...H.motion.ease.accelerate),reduceMotion:PRESENCE_REDUCE_MOTION},e=>{"worklet";e&&runOnJS(Je)()})}),[Se,ge,Je,a,G,ye,Ue,pe,H.motion.ease.accelerate]),We=useCallback((e,t,o)=>{const s=De.current;if(!s)return void e();if(Pe.current)return void t?.();const n=s();"boolean"!=typeof n?(Pe.current=!0,o?.(),n.then(o=>{Pe.current=!1,o&&Ne.current&&Ve.current>=0?e():t?.()},e=>{throw Pe.current=!1,e})):(n?e:t)?.()},[]),qe=useCallback(()=>new Promise(e=>{Ve.current<0?e(!0):We(()=>{Le.current(),$e(),e(!0)},()=>e(!1))}),[$e,We]),Xe=useCallback(()=>{Le.current()},[]),Qe=useCallback(()=>{u&&qe()},[u,qe]),Ze=useRef(null);useEffect(()=>{const e=Ze.current!==o;Ze.current=o,e?o?Ke(n??0):$e():o&&"number"==typeof n&&n!==ge.value&&Ke(n)},[o,n]);const et=useRef({hostHeight:U,contentSnap:he});useEffect(()=>{const e=et.current;if(e.hostHeight===U&&e.contentSnap===he)return;if(et.current={hostHeight:U,contentSnap:he},e.hostHeight===U&&ge.value<0)return;const t=Fe(ge.value);pe.value=je.current?t:withSpring(t,SPRING_CONFIG)},[U,he]);const tt=U-be,ot=useMemo(()=>fe.map(e=>U-e),[fe,U]),st=useCallback(()=>{const e=Ve.current;e<0||Ye(Fe(e),e,e)},[Ye,Fe]),nt=useCallback((e,t)=>{const o=ge.value;-1!==e?(Ue(e),Ye(t,o,e)):We(()=>{Keyboard.dismiss(),triggerHaptic("selection"),Le.current(),$e()},st,st)},[Ye,$e,ge,We,Ue,st]),rt=useMemo(()=>Gesture.Native().withTestId(V?`${V}-content-gesture`:"bottom-sheet-content-gesture"),[V]),at=useMemo(()=>{const e=ot,t=Se,o=tt,s=l;return Gesture.Pan().withTestId(V?`${V}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{"worklet";ve.value=pe.value}).onUpdate(e=>{"worklet";const t=ve.value+e.translationY;pe.value=t<o?o+.25*(t-o):t}).onEnd(o=>{"worklet";const n=pe.value;if(o.velocityY>1e3)return s?void runOnJS(nt)(-1,t):void runOnJS(nt)(0,e[0]);let r=0,a=Math.abs(n-e[0]);for(let t=1;t<e.length;t++){const o=Math.abs(n-e[t]);o<a&&(a=o,r=t)}const i=e[0];s&&n-i>80?runOnJS(nt)(-1,t):runOnJS(nt)(r,e[r])})},[Se,ve,l,nt,tt,ot,V,pe]),{height:it}=useReanimatedKeyboardAnimation(),lt="shift"===y,ut=useDerivedValue(()=>lt?it.value:0),ct=fe[we>=0?we:0]??be,dt=H.space.md,ht=useAnimatedStyle(()=>{if(W){const e=ut.value,t=U+e-ct-dt,o=e<0&&pe.value>t?t:pe.value;return{top:o<Z?Z:o,opacity:ye.value}}const e=pe.value+ut.value,t=ut.value<0?Z:tt;return{top:e<t?t:e,opacity:ye.value}}),mt=useAnimatedStyle(()=>{const e=ut.value;if(W){const t=U+e-ct-dt,o=e<0&&pe.value>t?t:pe.value,s=U+e-dt-(o<Z?Z:o);return{height:s<0?0:s>ct?ct:s}}const t=e<0?Z:tt,o=pe.value+e,s=U+e-(o<t?t:o);return{height:s<0?0:s>be?be:s}}),ft=we>=0,St=useMemo(()=>buildStyles(H),[H]),bt=useCallback(()=>{u&&We(()=>{triggerHaptic("selection"),Le.current(),$e()})},[u,$e,We]),pt=useMemo(()=>Gesture.Tap().withTestId(V?`${V}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((_e,e)=>{"worklet";e&&runOnJS(bt)()}),[bt,V]),vt=useMemo(()=>({snapIndex:we,snapPoints:fe,close:Xe,requestClose:qe}),[we,fe,Xe,qe]);if("inline"===N&&!ke)return null;if("modal"===N&&!Me)return null;const yt=_jsxs(View,{collapsable:!1,style:["modal"===N?St.backdropModal:St.backdropInline,{backgroundColor:H.colors.scrim}],onLayout:K,testID:V,accessibilityViewIsModal:j??ft,children:[_jsx(GestureDetector,{gesture:pt,children:_jsx(Animated.View,{style:StyleSheet.absoluteFill,accessibilityRole:"button",accessibilityLabel:B.close})}),_jsx(Animated.View,{accessibilityRole:"alert",accessibilityLabel:A,accessibilityViewIsModal:j??ft,accessibilityActions:[{name:"escape",label:B.close}],onAccessibilityAction:e=>{"escape"===e.nativeEvent.actionName&&Qe()},onAccessibilityEscape:Qe,style:[St.sheet,{height:be,backgroundColor:H.colors.surface,borderTopLeftRadius:H.radius.xl,borderTopRightRadius:H.radius.xl,...smoothCorners,...H.shadow.modal},W?{height:ct,left:(z-q)/2,right:void 0,width:q,borderBottomLeftRadius:H.radius.xl,borderBottomRightRadius:H.radius.xl}:null,_,ht],children:_jsxs(SheetBody,{style:[St.body,mt],keyboardOffset:ut,children:[W?_jsx(View,{style:{height:H.space.md}}):_jsx(GestureDetector,{gesture:at,children:_jsx(View,{style:St.handleRow,onLayout:te?se:void 0,accessible:!0,accessibilityLabel:B.dragHandle,accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:V?`${V}-handle`:"bottom-sheet-handle",children:_jsx(View,{style:[St.handle,{backgroundColor:H.colors.border},x]})})}),D&&_jsxs(View,{style:[St.header,O],onLayout:te?re:void 0,children:[null!=d?_jsx(Text,{variant:"title",accessibilityRole:"header",children:d}):null,T]}),m?_jsx(GestureDetector,{gesture:rt,children:_jsx(ScrollView,{ref:f,style:St.scrollContent,onScroll:S,onContentSizeChange:me,onLayout:p,scrollEventThrottle:v,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:k})}):_jsx(View,{style:te?[St.content,{overflow:"visible"}]:St.content,children:te?_jsx(View,{onLayout:ie,children:k}):k}),P&&_jsxs(View,{style:[St.footer,R],onLayout:te?ce:void 0,children:[L?_jsx(View,{style:St.actions,children:_jsx(OverlayActions,{actions:E??[],layout:M})}):null,I]})]})})]}),gt=_jsx(BottomSheetContext.Provider,{value:vt,children:yt});return"modal"===N?_jsx(Modal,{transparent:!0,visible:Te,onRequestClose:Qe,onDismiss:"ios"===Platform.OS?ze:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:_jsxs(ModalSafeArea,{onInsets:Q,children:["android"===Platform.OS?_jsx(GestureHandlerRootView,{style:St.modalRoot,children:gt}):gt,_jsx(ToastHost,{})]})}):gt},SheetBody=({style:e,keyboardOffset:t,children:o})=>{const s=useSafeAreaInsets().bottom,n=useAnimatedStyle(()=>{const e=s+t.value;return{paddingBottom:e>0?e:0}});return _jsx(Animated.View,{style:[e,n],children:o})};BottomSheet.displayName="BottomSheet";const useMeasuredHeight=()=>{const[e,t]=useState(0),o=useCallback(e=>{t(t=>t===e?t:e)},[]);return[e,useCallback(e=>o(e.nativeEvent.layout.height),[o]),o]},resolveSnapPoints=(e,t,o)=>[...e.map(e=>{if("number"==typeof e)return e;if("content"===e)return o;const s=parseFloat(e);return Number.isNaN(s)?0:s/100*t})].sort((e,t)=>e-t),clamp=(e,t,o)=>Math.min(Math.max(e,t),o),buildStyles=e=>StyleSheet.create({backdropModal:{flex:1},backdropInline:{...StyleSheet.absoluteFill},sheet:{position:"absolute",left:0,right:0,overflow:"hidden"},body:{overflow:"hidden"},handleRow:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",paddingTop:e.space.md,paddingBottom:e.space.xl},header:{},actions:{padding:e.space.lg},footer:{},handle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},content:{flex:1,overflow:"hidden"},scrollContent:{flex:1},modalRoot:{flex:1}});export{BottomSheet};export default BottomSheet;

package/lib/module/components/Card/Card.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{squircleHostRadius}from"../../utils/squircle.js";import{themeStyles}from"../../utils/themeStyles.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"];export const DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"});const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:i,variant:o="elevated",elevation:s="card",radius:r="lg",padding:a="md",interactive:l=!1,bg:n,header:d,title:c,titleFont:u="sans",lead:h,action:m,headerActions:p,collapsible:b=!1,collapsed:g,defaultCollapsed:y=!1,onCollapsedChange:x,collapsedSummary:f,onRemove:S,separatorHeight:v=StyleSheet.hairlineWidth,footer:j,imageSource:C,imageHeight:w=160,imageAspectRatio:_,imageOverlay:R,loading:A=!1,gradient:F,onPress:T,haptic:k,contextMenu:B,accessibilityLabel:I,accessibilityHint:L,accessibilityRole:V,style:H,containerStyle:P,headerStyle:z,bodyStyle:M,footerStyle:D,borderRadius:q,testID:E,labels:O,onLayout:W,...N}=e;warnInvalidValue("Card","variant",e.variant,["elevated","outline","filled","flat"]),warnInvalidValue("Card","radius",e.radius,["sm","md","lg","xl"]),warnInvalidValue("Card","padding",e.padding,["none","sm","md","lg","xl"]),warnInvalidValue("Card","titleFont",e.titleFont,["sans","serif"]);const G=useTheme(),U=useMemo(()=>({...DEFAULT_CARD_LABELS,...O}),[O]),K=l||"function"==typeof T,$=useContextMenu(B,{haptic:k||!1,testID:E,accessibilityActions:N.accessibilityActions,onAccessibilityAction:N.onAccessibilityAction}),J=useMemo(()=>mergeRefs(t,$.hostRef),[t,$.hostRef]),Q=K||$.enabled,{style:X,pressIn:Y,pressOut:Z}=usePressAnimation({enabled:Q}),ee=stylesFor(G),te=Boolean(C),ie=G.space[paddingMap[a]],oe=useMemo(()=>F?"string"==typeof F?G.settings.gradients[F]??null:F:null,[F,G.settings.gradients]),se="flat"===o,re=se?G.radius.none:q??G.radius[r],ae=resolveBackground(G,n),[le,ne]=useControllableState({value:g,defaultValue:y,onChange:x}),de=b&&le,ce=hasBuiltInHeaderContent(e),ue=Boolean(d)||ce,he=useSquircle(!te&&!oe&&!se,re,W),me=StyleSheet.flatten([H,P])??{},pe=me.backgroundColor,be=me.borderColor,ge=pe??ae??("filled"===o?G.colors["bg-subtle"]:G.colors.surface),ye="outline"===o?G.size.border:0,xe=be??G.colors.border,fe="none"===s?void 0:G.shadow[s],Se="elevated"===o&&supportsBoxShadow()&&fe?toBoxShadow(fe):void 0,ve=he.active&&"elevated"===o&&!Se,je=he.active&&!ve?{backgroundColor:"transparent",borderColor:"transparent"}:null,Ce=useMemo(()=>{const e={borderRadius:ve&&he.size?squircleHostRadius(he.size.width,he.size.height,re):re,...smoothCorners,padding:te||he.active?G.space.none:ie,overflow:he.active?"visible":"hidden"};switch(o){case"flat":return{...e,backgroundColor:ae??G.colors.surface,borderBottomWidth:v,borderBottomColor:G.colors.border};case"outline":return{...e,backgroundColor:he.active?"transparent":ae??G.colors.surface,borderWidth:G.size.border,borderColor:he.active?"transparent":G.colors.border};case"filled":return{...e,backgroundColor:he.active?"transparent":ae??G.colors["bg-subtle"]};default:return{...e,backgroundColor:ae??G.colors.surface,...Se?{boxShadow:Se}:fe}}},[G,o,fe,re,te,ie,he.active,he.size,Se,ve,ae,v]),we=useMemo(()=>({..."number"==typeof _?{width:"100%",aspectRatio:_}:{width:"100%",height:w},borderTopLeftRadius:re,borderTopRightRadius:re,borderBottomLeftRadius:G.radius.none,borderBottomRightRadius:G.radius.none,...smoothCorners}),[G,re,_,w]),Re=c??"",Ae=_jsxs(_Fragment,{children:[_jsxs(View,{style:ee.titleColumn,children:[c?_jsx(Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(G,u),children:c}):null,h?_jsx(Text,{variant:"bodySmall",style:ee.lead,children:h}):null,de&&f?_jsx(Text,{variant:"caption",style:ee.lead,children:f}):null]}),isCardTextAction(m)?_jsx(CardTextActionButton,{action:m,haptic:k}):m?_jsx(View,{style:ee.actionNode,children:m}):null,p,b?_jsx(CardIconAction,{icon:de?"chevron-down":"chevron-up",label:`${de?U.show:U.hide} ${Re}`.trim(),expanded:!de,onPress:()=>ne(!de),haptic:k}):null,S?_jsx(CardIconAction,{icon:"trash",label:U.remove,onPress:S,color:G.colors["danger-text"],haptic:k}):null]}),Fe=_jsxs(_Fragment,{children:[ue?_jsx(View,{style:[ee.header,!d&&ee.headerRow,de&&ee.headerFolded,z],children:d??Ae}):null,de?null:_jsx(View,{style:[ue||j?ee.body:null,M],children:i}),j&&!de?_jsx(View,{style:[ee.footer,D],children:j}):null]}),Te=te?_jsxs(_Fragment,{children:[_jsxs(View,{style:ee.imageWrapper,children:[_jsx(Image,{source:C,resizeMode:"cover",style:we,accessibilityLabel:"",accessible:!1}),R?_jsx(View,{pointerEvents:"box-none",style:ee.imageOverlay,children:R}):null]}),_jsx(View,{style:{padding:ie},children:Fe})]}):Fe,ke=oe?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:oe,style:StyleSheet.absoluteFill}),Te]}):he.active&&he.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:he.size.width,height:he.size.height,radius:re,fill:ge,stroke:ye?xe:void 0,strokeWidth:ye}),_jsx(View,{style:[ee.squircleClip,{padding:ie,borderRadius:he.size?squircleHostRadius(he.size.width,he.size.height,re):re}],children:Te})]}):Te;let Be;if(Q){const handlePress=e=>{K&&(k&&triggerHaptic(k),T?.(e))};Be=_jsx(Animated.View,{style:X,children:_jsx(Pressable,{ref:J,onPress:handlePress,onPressIn:Y,onPressOut:Z,accessibilityRole:V??(K?"button":void 0),accessibilityLabel:I,accessibilityHint:L,testID:E,onLayout:he.onLayout,style:[Ce,H,P,je],...N,...$.hostProps,children:ke})})}else Be=_jsx(View,{ref:t,accessibilityLabel:I,accessibilityHint:L,accessibilityRole:V,testID:E,onLayout:he.onLayout,style:[Ce,H,P,je],...N,children:ke});return A?_jsx(CardSkeleton,{...e}):$.enabled?_jsxs(_Fragment,{children:[Be,$.renderSurface(_jsx(View,{style:[Ce,H,P,je,ee.preview],children:ke}))]}):Be}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:i="lg",padding:o="md",bg:s,header:r,footer:a,imageSource:l,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:p,style:b,labels:g,...y})=>{const x=useTheme(),f={...DEFAULT_CARD_LABELS,...g},S=paddingMap[o],v=x.space[S],j="flat"===e?x.radius.none:c??x.radius[i],C=void 0!==r||hasBuiltInHeaderContent(y),w=resolveBackground(x,s)??x.colors.surface,_="outline"===e?1:0,R="outline"===e?x.colors.border:void 0;return _jsxs(View,{style:[{backgroundColor:w,borderRadius:j,...smoothCorners,borderWidth:_,borderColor:R,overflow:"hidden"},u,b],accessibilityRole:"progressbar",accessibilityLabel:f.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==l?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,C?_jsx(View,{style:[{padding:v,paddingBottom:x.space.sm},h],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:v},m],children:_jsx(SkeletonText,{lines:3,fontSize:x.text.base.size,lastLineWidth:"55%"})}),void 0!==a?_jsx(View,{style:[{padding:v,paddingTop:x.space.sm,flexDirection:"row"},p],children:_jsx(Skeleton,{width:88,height:32,shape:"rounded"})}):null]})};CardSkeleton.displayName="CardSkeleton",Card.Skeleton=CardSkeleton;const hasBuiltInHeaderContent=e=>Boolean(e.title||e.lead||e.action||e.headerActions||e.collapsible||e.onRemove),isCardTextAction=e=>"object"==typeof e&&null!==e&&!React.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:i,expanded:o,color:s,haptic:r})=>{const a=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===o?void 0:{expanded:o},"aria-expanded":o,onPress:()=>{r&&triggerHaptic(r),i()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:s??a.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{t&&triggerHaptic(t),e.onPress()},style:textActionStyle,children:_jsx(Text,{variant:"label",weight:"semibold",color:"brand",children:e.label})}),iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},titleFaceFor=(e,t)=>"serif"===t?fontFor(e,"semibold","display"):{fontFamily:void 0,...fontFor(e,"semibold")},resolveBackground=(e,t)=>{if(null!=t)return BACKGROUND_TOKENS.includes(t)?e.colors[t]:t},buildStyles=e=>StyleSheet.create({header:{marginBottom:e.space.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.space.sm},headerFolded:{marginBottom:e.space.none},titleColumn:{flex:1},lead:{marginTop:e.space.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.space.md},imageWrapper:{position:"relative"},imageOverlay:{...StyleSheet.absoluteFill},squircleClip:{flexGrow:1,overflow:"hidden",...smoothCorners},preview:{margin:e.space.none,marginTop:e.space.none,marginBottom:e.space.none,marginLeft:e.space.none,marginRight:e.space.none,marginStart:e.space.none,marginEnd:e.space.none,marginHorizontal:e.space.none,marginVertical:e.space.none,position:"relative",top:0,left:0,width:"100%",height:"100%"}}),stylesFor=themeStyles(buildStyles);export{Card};export default Card;
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{squircleHostRadius}from"../../utils/squircle.js";import{themeStyles}from"../../utils/themeStyles.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"];export const DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"});const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:i,variant:o="elevated",elevation:s="card",radius:r="lg",padding:a="md",interactive:l=!1,pressAnimation:n="scale",bg:d,header:c,title:u,titleFont:m="sans",lead:h,action:p,headerActions:b,collapsible:g=!1,collapsed:y,defaultCollapsed:x=!1,onCollapsedChange:f,collapsedSummary:S,onRemove:v,separatorHeight:j=StyleSheet.hairlineWidth,footer:C,imageSource:w,imageHeight:_=160,imageAspectRatio:R,imageOverlay:A,loading:F=!1,gradient:k,onPress:T,haptic:I,contextMenu:B,accessibilityLabel:L,accessibilityHint:V,accessibilityRole:H,style:P,containerStyle:z,headerStyle:M,bodyStyle:D,footerStyle:q,borderRadius:E,testID:O,labels:W,onLayout:N,...G}=e;warnInvalidValue("Card","variant",e.variant,["elevated","outline","filled","flat"]),warnInvalidValue("Card","radius",e.radius,["sm","md","lg","xl"]),warnInvalidValue("Card","padding",e.padding,["none","sm","md","lg","xl"]),warnInvalidValue("Card","titleFont",e.titleFont,["sans","serif"]),warnInvalidValue("Card","pressAnimation",e.pressAnimation,["scale","bounce","fade","sink","pulse","dim","false"]);const U=useTheme(),K=useMemo(()=>({...DEFAULT_CARD_LABELS,...W}),[W]),$=l||"function"==typeof T,J=useContextMenu(B,{haptic:I||!1,testID:O,accessibilityActions:G.accessibilityActions,onAccessibilityAction:G.onAccessibilityAction}),Q=useMemo(()=>mergeRefs(t,J.hostRef),[t,J.hostRef]),X=$||J.enabled,{style:Y,pressIn:Z,pressOut:ee}=usePressAnimation({preset:n||"scale",enabled:X&&!1!==n}),te=stylesFor(U),ie=Boolean(w),oe=U.space[paddingMap[a]],se=useMemo(()=>k?"string"==typeof k?U.settings.gradients[k]??null:k:null,[k,U.settings.gradients]),re="flat"===o,ae=re?U.radius.none:E??U.radius[r],le=resolveBackground(U,d),[ne,de]=useControllableState({value:y,defaultValue:x,onChange:f}),ce=g&&ne,ue=hasBuiltInHeaderContent(e),me=Boolean(c)||ue,he=useSquircle(!ie&&!se&&!re,ae,N),pe=StyleSheet.flatten([P,z])??{},be=pe.backgroundColor,ge=pe.borderColor,ye=be??le??("filled"===o?U.colors["bg-subtle"]:U.colors.surface),xe="outline"===o?U.size.border:0,fe=ge??U.colors.border,Se="none"===s?void 0:U.shadow[s],ve="elevated"===o&&supportsBoxShadow()&&Se?toBoxShadow(Se):void 0,je=he.active&&"elevated"===o&&!ve,Ce=he.active&&!je?{backgroundColor:"transparent",borderColor:"transparent"}:null,we=useMemo(()=>{const e={borderRadius:je&&he.size?squircleHostRadius(he.size.width,he.size.height,ae):ae,...smoothCorners,padding:ie||he.active?U.space.none:oe,overflow:he.active?"visible":"hidden"};switch(o){case"flat":return{...e,backgroundColor:le??U.colors.surface,borderBottomWidth:j,borderBottomColor:U.colors.border};case"outline":return{...e,backgroundColor:he.active?"transparent":le??U.colors.surface,borderWidth:U.size.border,borderColor:he.active?"transparent":U.colors.border};case"filled":return{...e,backgroundColor:he.active?"transparent":le??U.colors["bg-subtle"]};default:return{...e,backgroundColor:le??U.colors.surface,...ve?{boxShadow:ve}:Se}}},[U,o,Se,ae,ie,oe,he.active,he.size,ve,je,le,j]),Re=useMemo(()=>({..."number"==typeof R?{width:"100%",aspectRatio:R}:{width:"100%",height:_},borderTopLeftRadius:ae,borderTopRightRadius:ae,borderBottomLeftRadius:U.radius.none,borderBottomRightRadius:U.radius.none,...smoothCorners}),[U,ae,R,_]),Ae=u??"",Fe=_jsxs(_Fragment,{children:[_jsxs(View,{style:te.titleColumn,children:[u?_jsx(Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(U,m),children:u}):null,h?_jsx(Text,{variant:"bodySmall",style:te.lead,children:h}):null,ce&&S?_jsx(Text,{variant:"caption",style:te.lead,children:S}):null]}),isCardTextAction(p)?_jsx(CardTextActionButton,{action:p,haptic:I}):p?_jsx(View,{style:te.actionNode,children:p}):null,b,g?_jsx(CardIconAction,{icon:ce?"chevron-down":"chevron-up",label:`${ce?K.show:K.hide} ${Ae}`.trim(),expanded:!ce,onPress:()=>de(!ce),haptic:I}):null,v?_jsx(CardIconAction,{icon:"trash",label:K.remove,onPress:v,color:U.colors["danger-text"],haptic:I}):null]}),ke=_jsxs(_Fragment,{children:[me?_jsx(View,{style:[te.header,!c&&te.headerRow,ce&&te.headerFolded,M],children:c??Fe}):null,ce?null:_jsx(View,{style:[me||C?te.body:null,D],children:i}),C&&!ce?_jsx(View,{style:[te.footer,q],children:C}):null]}),Te=ie?_jsxs(_Fragment,{children:[_jsxs(View,{style:te.imageWrapper,children:[_jsx(Image,{source:w,resizeMode:"cover",style:Re,accessibilityLabel:"",accessible:!1}),A?_jsx(View,{pointerEvents:"box-none",style:te.imageOverlay,children:A}):null]}),_jsx(View,{style:{padding:oe},children:ke})]}):ke,Ie=se?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:se,style:StyleSheet.absoluteFill}),Te]}):he.active&&he.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:he.size.width,height:he.size.height,radius:ae,fill:ye,stroke:xe?fe:void 0,strokeWidth:xe}),_jsx(View,{style:[te.squircleClip,{padding:oe,borderRadius:he.size?squircleHostRadius(he.size.width,he.size.height,ae):ae}],children:Te})]}):Te;let Be;if(X){const handlePress=e=>{$&&(I&&triggerHaptic(I),T?.(e))};Be=_jsx(Animated.View,{style:Y,children:_jsx(Pressable,{ref:Q,onPress:handlePress,onPressIn:Z,onPressOut:ee,accessibilityRole:H??($?"button":void 0),accessibilityLabel:L,accessibilityHint:V,testID:O,onLayout:he.onLayout,style:[we,P,z,Ce],...G,...J.hostProps,children:Ie})})}else Be=_jsx(View,{ref:t,accessibilityLabel:L,accessibilityHint:V,accessibilityRole:H,testID:O,onLayout:he.onLayout,style:[we,P,z,Ce],...G,children:Ie});return F?_jsx(CardSkeleton,{...e}):J.enabled?_jsxs(_Fragment,{children:[Be,J.renderSurface(_jsx(View,{style:[we,P,z,Ce,te.preview],children:Ie}))]}):Be}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:i="lg",padding:o="md",bg:s,header:r,footer:a,imageSource:l,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:m,bodyStyle:h,footerStyle:p,style:b,labels:g,...y})=>{const x=useTheme(),f={...DEFAULT_CARD_LABELS,...g},S=paddingMap[o],v=x.space[S],j="flat"===e?x.radius.none:c??x.radius[i],C=void 0!==r||hasBuiltInHeaderContent(y),w=resolveBackground(x,s)??x.colors.surface,_="outline"===e?1:0,R="outline"===e?x.colors.border:void 0;return _jsxs(View,{style:[{backgroundColor:w,borderRadius:j,...smoothCorners,borderWidth:_,borderColor:R,overflow:"hidden"},u,b],accessibilityRole:"progressbar",accessibilityLabel:f.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==l?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,C?_jsx(View,{style:[{padding:v,paddingBottom:x.space.sm},m],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:v},h],children:_jsx(SkeletonText,{lines:3,fontSize:x.text.base.size,lastLineWidth:"55%"})}),void 0!==a?_jsx(View,{style:[{padding:v,paddingTop:x.space.sm,flexDirection:"row"},p],children:_jsx(Skeleton,{width:88,height:32,shape:"rounded"})}):null]})};CardSkeleton.displayName="CardSkeleton",Card.Skeleton=CardSkeleton;const hasBuiltInHeaderContent=e=>Boolean(e.title||e.lead||e.action||e.headerActions||e.collapsible||e.onRemove),isCardTextAction=e=>"object"==typeof e&&null!==e&&!React.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:i,expanded:o,color:s,haptic:r})=>{const a=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===o?void 0:{expanded:o},"aria-expanded":o,onPress:()=>{r&&triggerHaptic(r),i()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:s??a.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{t&&triggerHaptic(t),e.onPress()},style:textActionStyle,children:_jsx(Text,{variant:"label",weight:"semibold",color:"brand",children:e.label})}),iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},titleFaceFor=(e,t)=>"serif"===t?fontFor(e,"semibold","display"):{fontFamily:void 0,...fontFor(e,"semibold")},resolveBackground=(e,t)=>{if(null!=t)return BACKGROUND_TOKENS.includes(t)?e.colors[t]:t},buildStyles=e=>StyleSheet.create({header:{marginBottom:e.space.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.space.sm},headerFolded:{marginBottom:e.space.none},titleColumn:{flex:1},lead:{marginTop:e.space.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.space.md},imageWrapper:{position:"relative"},imageOverlay:{...StyleSheet.absoluteFill},squircleClip:{flexGrow:1,overflow:"hidden",...smoothCorners},preview:{margin:e.space.none,marginTop:e.space.none,marginBottom:e.space.none,marginLeft:e.space.none,marginRight:e.space.none,marginStart:e.space.none,marginEnd:e.space.none,marginHorizontal:e.space.none,marginVertical:e.space.none,position:"relative",top:0,left:0,width:"100%",height:"100%"}}),stylesFor=themeStyles(buildStyles);export{Card};export default Card;

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

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

package/lib/module/components/Dialog/OverlayActions.js

@@ -0,0 +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{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{jsx as _jsx}from"react/jsx-runtime";export const OVERLAY_TONES=["primary","success","warning","danger","info","neutral"];export const ACTIONS_LAYOUTS=["auto","row","stacked"];const OverlayActions=({actions:o,layout:e,testID:r,stackedLabels:t,rowStyle:n,buttonStyle:a,textStyle:l})=>{const s=useTheme(),i=useMemo(()=>buildStyles(s),[s]),c=s.components.dialog["action-button-min-height"],d=s.text.base.size*s.leading.body,u=o.map(o=>o.label).join("\n"),b=useState(null),[m,y]=t??b,g="stacked"===e||"row"!==e&&(null!==m&&m===u),p=useRef(null),C=useCallback(o=>{o.nativeEvent.layout.height>1.5*d&&y(u)},[d,u,y]),x=useCallback(o=>{const e=o.nativeEvent.layout.width,r=p.current;p.current=e,null!==r&&Math.abs(r-e)>.5&&y(null)},[y]),h=new Map;return _jsx(View,{testID:r,style:[i.actionsRow,g?i.actionsRowStacked:null,n],onLayout:x,children:o.map((e,r)=>{const t=(h.get(e.label)??0)+1;h.set(e.label,t),warnInvalidValue("OverlayActions","actions[].tone",e.tone,OVERLAY_TONES);const n=e.tone??"primary",d=Boolean(e.disabled),u=actionStyleFor(s,n,d),b=r===o.length-1;return _jsx(Pressable,{onPress:e.onPress,disabled:e.loading||d,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)||d},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)||d,style:({pressed:o})=>[i.actionButton,{flex:g?0:1,minHeight:c,backgroundColor:u.backgroundColor,borderColor:u.borderColor,borderWidth:u.borderWidth,borderRadius:s.radius.md,...smoothCorners,paddingVertical:s.space.sm,paddingHorizontal:s.space.md,marginRight:b||g?0:s.space.sm,opacity:e.loading?.7:o&&!d?.85:1},a],children:e.loading?_jsx(ActivityIndicator,{size:"small",color:u.textColor}):_jsx(View,{onLayout:C,children:_jsx(Text,{style:[{color:u.textColor,fontSize:s.text.base.size,...fontFor(s,"semibold"),textAlign:"center"},l],children:e.label})})},`${e.label}-${t}`)})})};OverlayActions.displayName="OverlayActions";const actionStyleFor=(o,e,r)=>{if(r)return{backgroundColor:"neutral"===e?"transparent":o.colors["surface-disabled"],borderColor:"neutral"===e?o.colors.border:"transparent",borderWidth:"neutral"===e?1:0,textColor:o.colors["text-disabled"]};switch(e){case"primary":return{backgroundColor:o.colors.primary,borderColor:"transparent",borderWidth:0,textColor:o.colors["on-primary"]};case"info":return{backgroundColor:o.colors.info,borderColor:"transparent",borderWidth:0,textColor:o.colors["on-info"]};case"success":return{backgroundColor:o.colors.success,borderColor:"transparent",borderWidth:0,textColor:o.colors["on-success"]};case"warning":return{backgroundColor:o.colors.warning,borderColor:"transparent",borderWidth:0,textColor:o.colors["on-warning"]};case"danger":return{backgroundColor:o.colors.danger,borderColor:"transparent",borderWidth:0,textColor:o.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:o.colors.border,borderWidth:1,textColor:o.colors["text-body"]}}},buildStyles=o=>StyleSheet.create({actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionsRowStacked:{flexDirection:"column",rowGap:o.space.sm},actionButton:{alignItems:"center",justifyContent:"center"}});export{OverlayActions};

package/lib/module/components/EmptyState/EmptyState.js

@@ -1 +1 @@
-"use strict";import{forwardRef,isValidElement,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveEmptyStateSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const r=useTheme(),{style:i,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(r),[r]),l="primary"===t,a=useSquircle(!0,r.radius.md),fillFor=e=>l?e?r.colors["primary-hover"]:r.colors.primary:e?r.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:i,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:r.radius.md,fill:fillFor(t),stroke:l?void 0:r.colors.border,strokeWidth:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const r=useTheme(),i=Object.keys(r.components["empty-state"]);warnInvalidValue("EmptyState","size",e.size,i);const{icon:o,illustration:s,title:n,description:l,action:a,secondaryAction:c,size:d="md",fill:u=!1,style:m,testID:y}=e,p=i.includes(d)?d:"md",b=useMemo(()=>resolveEmptyStateSize(r,p),[r,p]),g=useMemo(()=>buildStyles(r),[r]);return _jsxs(View,{ref:t,accessibilityRole:"summary",testID:y,style:[g.root,{paddingVertical:b["padding-y"]},u?g.fill:null,m],children:[null!=s?_jsx(View,{style:{marginBottom:b["title-gap"]},children:isValidElement(s)?s:_jsx(Image,{source:s,style:{width:b["illustration-size"],height:b["illustration-size"]},resizeMode:"contain",accessibilityIgnoresInvertColors:!0})}):o?_jsx(View,{style:[g.iconCircle,{width:b.icon,height:b.icon,marginBottom:b["title-gap"],borderRadius:r.radius.pill,...smoothCorners}],children:o}):null,_jsx(Text,{style:[g.title,{fontSize:b["title-text"],...fontFor(r,"semibold")}],children:n}),l?_jsx(Text,{style:[g.description,{fontSize:b["description-text"],marginTop:b["description-gap"]}],children:l}):null,a||c?_jsxs(View,{style:g.actions,children:[a?_jsx(ActionButton,{action:a,variant:"primary"}):null,c?_jsx(ActionButton,{action:c,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors["surface-disabled"],alignItems:"center",justifyContent:"center"},title:{color:e.colors["text-body"],textAlign:"center"},description:{color:e.colors["text-muted"],textAlign:"center",maxWidth:320,lineHeight:e.text.base.size*e.leading.body},actions:{flexDirection:"row",alignItems:"center",gap:e.space.sm,marginTop:e.space.lg}}),buildActionStyles=e=>StyleSheet.create({button:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,minHeight:42,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden",alignItems:"center",justifyContent:"center",flexDirection:"row"},buttonPrimary:{backgroundColor:e.colors.primary},buttonPrimaryPressed:{backgroundColor:e.colors["primary-hover"]},buttonSecondary:{backgroundColor:"transparent",borderWidth:1,borderColor:e.colors.border},buttonSecondaryPressed:{backgroundColor:e.colors["surface-pressed"]},buttonSquircleHost:{backgroundColor:"transparent",borderColor:"transparent",overflow:"visible"},buttonText:{fontSize:e.text.base.size,...fontFor(e,"semibold")},buttonTextPrimary:{color:e.colors["on-primary"]},buttonTextSecondary:{color:e.colors["text-body"]}});export{EmptyState};export default EmptyState;
+"use strict";import{forwardRef,isValidElement,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveEmptyStateSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text as UiText}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const i=useTheme(),{style:r,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(i),[i]),l="primary"===t,a=useSquircle(!0,i.radius.md),fillFor=e=>l?e?i.colors["primary-hover"]:i.colors.primary:e?i.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:r,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:i.radius.md,fill:fillFor(t),stroke:l?void 0:i.colors.border,strokeWidth:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const i=useTheme(),r=Object.keys(i.components["empty-state"]);warnInvalidValue("EmptyState","size",e.size,r),warnInvalidValue("EmptyState","variant",e.variant,["block","inline"]);const{icon:o,illustration:s,title:n,description:l,action:a,secondaryAction:c,size:d="md",variant:u="block",fill:m=!1,style:y,testID:p}=e,b=r.includes(d)?d:"md",x=useMemo(()=>resolveEmptyStateSize(i,b),[i,b]),g=useMemo(()=>buildStyles(i),[i]);return"inline"===u?_jsx(View,{ref:t,accessibilityRole:"summary",testID:p,style:[g.inline,m?g.fill:null,y],children:_jsx(UiText,{variant:"caption",weight:"medium",color:"secondary",align:"center",children:n})}):_jsxs(View,{ref:t,accessibilityRole:"summary",testID:p,style:[g.root,{paddingVertical:x["padding-y"]},m?g.fill:null,y],children:[null!=s?_jsx(View,{style:{marginBottom:x["title-gap"]},children:isValidElement(s)?s:_jsx(Image,{source:s,style:{width:x["illustration-size"],height:x["illustration-size"]},resizeMode:"contain",accessibilityIgnoresInvertColors:!0})}):o?_jsx(View,{style:[g.iconCircle,{width:x.icon,height:x.icon,marginBottom:x["title-gap"],borderRadius:i.radius.pill,...smoothCorners}],children:o}):null,_jsx(Text,{style:[g.title,{fontSize:x["title-text"],...fontFor(i,"semibold")}],children:n}),l?_jsx(Text,{style:[g.description,{fontSize:x["description-text"],marginTop:x["description-gap"]}],children:l}):null,a||c?_jsxs(View,{style:g.actions,children:[a?_jsx(ActionButton,{action:a,variant:"primary"}):null,c?_jsx(ActionButton,{action:c,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},inline:{alignItems:"center",justifyContent:"center"},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors["surface-disabled"],alignItems:"center",justifyContent:"center"},title:{color:e.colors["text-body"],textAlign:"center"},description:{color:e.colors["text-muted"],textAlign:"center",maxWidth:320,lineHeight:e.text.base.size*e.leading.body},actions:{flexDirection:"row",alignItems:"center",gap:e.space.sm,marginTop:e.space.lg}}),buildActionStyles=e=>StyleSheet.create({button:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,minHeight:42,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden",alignItems:"center",justifyContent:"center",flexDirection:"row"},buttonPrimary:{backgroundColor:e.colors.primary},buttonPrimaryPressed:{backgroundColor:e.colors["primary-hover"]},buttonSecondary:{backgroundColor:"transparent",borderWidth:1,borderColor:e.colors.border},buttonSecondaryPressed:{backgroundColor:e.colors["surface-pressed"]},buttonSquircleHost:{backgroundColor:"transparent",borderColor:"transparent",overflow:"visible"},buttonText:{fontSize:e.text.base.size,...fontFor(e,"semibold")},buttonTextPrimary:{color:e.colors["on-primary"]},buttonTextSecondary:{color:e.colors["text-body"]}});export{EmptyState};export default EmptyState;

package/lib/module/components/IconBadge/IconBadge.js

@@ -1 +1 @@
-"use strict";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{jsx as _jsx}from"react/jsx-runtime";const SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:56,icon:28}},FILL_OPACITY=.14,inkFor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"neutral":return e.colors["text-muted"];default:return e.colors.primary}},IconBadge=forwardRef((e,r)=>{const{icon:o,iconVariant:t,size:n="md",tone:i="primary",accessibilityLabel:s,style:a,testID:c}=e;warnInvalidValue("IconBadge","size",e.size,["sm","md","lg"]),warnInvalidValue("IconBadge","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("IconBadge","iconVariant",e.iconVariant,["linear","bold","broken","bulk","outline","twotone"]);const l=useTheme(),d=SIZE_MAP[n],m=inkFor(l,i),u="neutral"===i?l.colors["bg-muted"]:tintOf(m,.14,l.colors["bg-muted"]),I={color:m,size:d.icon,disabled:!1},g=void 0!==s;return _jsx(View,{ref:r,testID:c,accessible:g,accessibilityRole:g?"image":void 0,accessibilityLabel:s,importantForAccessibility:g?"yes":"no",style:[styles.base,{width:d.diameter,height:d.diameter,borderRadius:d.diameter/2,...smoothCorners,backgroundColor:u},a],children:renderSlotIcon(o,I,t)})});IconBadge.displayName="IconBadge";const styles=StyleSheet.create({base:{alignItems:"center",justifyContent:"center"}});export{IconBadge};export default IconBadge;
+"use strict";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{jsx as _jsx}from"react/jsx-runtime";const SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:56,icon:28}},FILL_OPACITY=.14,HALO_FILL_OPACITY=.16,inkFor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"neutral":return e.colors["text-muted"];default:return e.colors.primary}},IconBadge=forwardRef((e,r)=>{const{icon:o,iconVariant:t,size:n="md",tone:i="primary",color:s,fill:a="tint",dimension:c,accessibilityLabel:l,pointerEvents:d,style:m,testID:u}=e;warnInvalidValue("IconBadge","size",e.size,["sm","md","lg"]),warnInvalidValue("IconBadge","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("IconBadge","iconVariant",e.iconVariant,["linear","bold","broken","bulk","outline","twotone"]),warnInvalidValue("IconBadge","fill",e.fill,["tint","halo","surface"]);const I=useTheme(),f=SIZE_MAP[n],g=s??inkFor(I,i),p=c??f.diameter,b=null!=c?Math.round(c/2):f.icon,w="surface"===a?I.colors.surface:void 0===s&&"neutral"===i?I.colors["bg-muted"]:tintOf(g,"halo"===a?.16:.14,I.colors["bg-muted"]),y={color:g,size:b,disabled:!1},h=void 0!==l;return _jsx(View,{ref:r,testID:u,pointerEvents:d,accessible:h,accessibilityRole:h?"image":void 0,accessibilityLabel:l,importantForAccessibility:h?"yes":"no",style:[styles.base,{width:p,height:p,borderRadius:p/2,...smoothCorners,backgroundColor:w},m],children:renderSlotIcon(o,y,t)})});IconBadge.displayName="IconBadge";const styles=StyleSheet.create({base:{alignItems:"center",justifyContent:"center"}});export{IconBadge};export default IconBadge;

package/lib/module/components/ListItem/ListItem.js

@@ -1 +1 @@
-"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveCheckboxSize,resolveListItemSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.settings.icons.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=resolveCheckboxSize(i,"md")["box-size"],o=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.size.border,borderRadius:i.radius.sm,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border,backgroundColor:e?i.colors.primary:t?i.colors["surface-disabled"]:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors["on-primary"],strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,label:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:o,description:l,children:r,titleLines:n=1,subtitleLines:a=1,left:d,icon:c,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:p=!1,checked:x=!1,onCheckedChange:g,actions:b,onPress:f,haptic:y,selected:j=!1,expanded:S,disabled:w=!1,size:I="md",divider:_=!1,chevron:v=!1,leftActions:L,rightActions:k,contextMenu:V,accessibilityLabel:C,accessibilityHint:A,style:R,containerStyle:z,titleStyle:B,subtitleStyle:P,descriptionStyle:T,leftSlotStyle:D,rightSlotStyle:F,testID:H}=e;warnInvalidValue("ListItem","size",e.size,["sm","md","lg"]),warnInvalidValue("ListItem","iconTone",e.iconTone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("ListItem","rightPlacement",e.rightPlacement,["auto","side","below"]);const M=useTheme(),W=useMemo(()=>resolveListItemSize(M,I),[M,I]),E=stylesFor(M),{fontScale:O}=useWindowDimensions(),G=!!h&&("below"===u||"auto"===u&&O>1.2),N=useContextMenu(w?void 0:V,{haptic:y||!1,testID:H}),Z=useMemo(()=>mergeRefs(t,N.hostRef),[t,N.hostRef]),U=p||!!f,q=U||N.enabled,J=q&&!w,{style:K,pressIn:Q,pressOut:X}=usePressAnimation({enabled:J}),Y=useFlickGuard(),$=C??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,ee=d??(void 0===c?null:_jsx(IconBadge,{icon:c,tone:m,size:BADGE_SIZE[I]})),te=p?_jsxs(View,{style:E.selectionLead,children:[_jsx(SelectionBox,{checked:x,disabled:w}),ee?_jsx(View,{style:E.selectionLeadContent,children:ee}):null]}):ee,ie=null!=b&&!1!==b&&!(Array.isArray(b)&&0===b.length),se=_&&!ie,oe=_jsxs(View,{style:[E.row,{paddingVertical:W["padding-y"],minHeight:W["min-height"],backgroundColor:j?M.colors["surface-selected"]:"transparent"},se?E.divider:null,w?E.disabled:null,z],children:[te?_jsx(View,{style:[E.leftSlot,D],children:te}):null,_jsxs(View,{style:E.middle,children:[null==i||isText(i)?_jsx(Text,{style:[E.title,{fontSize:W["title-text"],...fontFor(M,"medium"),color:w?M.colors["text-disabled"]:M.colors["text-body"]},B],numberOfLines:n,children:i??" "}):i,null==o||""===o?null:isText(o)?_jsx(Text,{style:[E.subtitle,{fontSize:W["subtitle-text"],color:w?M.colors["text-disabled"]:M.colors["text-muted"]},P],numberOfLines:a,children:o}):o,l?_jsx(Text,{style:[E.description,{fontSize:W["subtitle-text"],color:w?M.colors["text-disabled"]:M.colors["text-subtle"]},T],numberOfLines:2,children:l}):null,null!=r&&!1!==r?_jsx(View,{style:E.body,children:r}):null,G?_jsx(View,{style:[E.rightBelow,F],children:h}):null]}),h&&!G||v?_jsxs(View,{style:[E.rightSlot,G?null:F],children:[G?null:h,v?_jsx(View,{style:h&&!G?E.chevronWithRight:null,children:_jsx(Chevron,{color:w?M.colors["text-disabled"]:M.colors["text-subtle"]})}):null]}):null]}),le=q?_jsx(Pressable,{ref:Z,onPress:e=>{J&&U&&!Y.isFlick(e)&&(y&&triggerHaptic(y),p?g?.(!x):f?.(e))},onPressIn:e=>{Y.onPressIn(e),Q()},onPressOut:X,disabled:!J,accessibilityRole:p?"checkbox":f?"button":void 0,accessibilityLabel:$,accessibilityHint:A,accessibilityState:p?{checked:x,disabled:!J,expanded:S}:{selected:j,disabled:!J,expanded:S},"aria-disabled":!J,"aria-expanded":S,...p?{"aria-checked":x}:{"aria-selected":j},testID:H,android_ripple:{color:M.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[R,e?E.pressed:null],...N.hostProps,children:_jsx(Animated.View,{style:K,children:oe})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:$,accessibilityHint:A,accessibilityState:{selected:j,disabled:w},"aria-selected":j,"aria-disabled":w,testID:H,style:R,children:oe}),re=L&&L.length>0||k&&k.length>0,ne=ie?_jsxs(View,{style:[j?{backgroundColor:M.colors["surface-selected"]}:null,_?E.divider:null],children:[le,_jsx(View,{style:E.actions,children:renderActions(b)})]}):le,ae=re?_jsx(Swipeable,{leftActions:L,rightActions:k,accessibilityLabel:$,children:ne}):ne;return s?_jsx(ListItemSkeleton,{...e}):N.enabled?_jsxs(_Fragment,{children:[ae,N.renderSurface(_jsx(View,{style:E.preview,children:oe}))]}):ae}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:o,chevron:l,size:r="md",containerStyle:n,style:a})=>{const d=useTheme(),c=resolveListItemSize(d,r),m=Math.round(1.15*c["title-text"]),h=Math.round(1.15*c["subtitle-text"]);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:d.space.md,paddingVertical:c["padding-y"],minHeight:c["min-height"]},n,a],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:d.space.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:d.space.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:d.space.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==o||l?_jsx(View,{style:{marginLeft:d.space.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border},pressed:{backgroundColor:e.colors["surface-pressed"]},disabled:{opacity:.55},leftSlot:{marginRight:e.space.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.space.sm},body:{marginTop:e.space.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.space.xs},rightSlot:{marginLeft:e.space.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.space.sm,paddingHorizontal:e.space.md,paddingBottom:e.space.md},chevronWithRight:{marginLeft:e.space.xs},preview:{flex:1,backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e["letter-spacing"].normal},subtitle:{marginTop:e.space.xxs,...fontFor(e,"normal")},description:{marginTop:e.space.xxs,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveCheckboxSize,resolveListItemSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{webOnly}from"../Menu/webOnly.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.settings.icons.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,MENU_ROW_MIN_HEIGHT=48,WEB_CHECKABLE_ROLE=webOnly({role:"menuitemcheckbox"}),SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=resolveCheckboxSize(i,"md")["box-size"],l=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.size.border,borderRadius:i.radius.sm,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border,backgroundColor:e?i.colors.primary:t?i.colors["surface-disabled"]:"transparent"},children:e?_jsx(Svg,{width:l,height:l,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors["on-primary"],strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,label:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:l,description:o,children:n,titleLines:r,subtitleLines:a=1,left:c,icon:d,iconTone:m="primary",right:u,rightPlacement:h="auto",selectable:p=!1,checked:x=!1,onCheckedChange:b,actions:g,onPress:f,onFocus:y,haptic:j,selected:S=!1,expanded:w,disabled:_=!1,size:v="md",variant:I="list",divider:L=!1,chevron:k=!1,leftActions:C,rightActions:V,contextMenu:A,accessibilityLabel:R,accessibilityHint:B,style:z,containerStyle:T,titleStyle:E,subtitleStyle:F,descriptionStyle:P,leftSlotStyle:D,rightSlotStyle:H,testID:M}=e;warnInvalidValue("ListItem","size",e.size,["sm","md","lg"]),warnInvalidValue("ListItem","iconTone",e.iconTone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("ListItem","rightPlacement",e.rightPlacement,["auto","side","below"]),warnInvalidValue("ListItem","variant",e.variant,["list","menu"]);const O="menu"===I,W=r??(O?2:1),G=O?e.checked:void 0,N=useTheme(),K=useMemo(()=>resolveListItemSize(N,v),[N,v]),U=stylesFor(N),{fontScale:Z}=useWindowDimensions(),q=!!u&&("below"===h||"auto"===h&&Z>1.2),J=useContextMenu(_?void 0:A,{haptic:j||!1,testID:M}),Q=useMemo(()=>mergeRefs(t,J.hostRef),[t,J.hostRef]),X=p||!!f,Y=X||J.enabled,$=Y&&!_,{style:ee,pressIn:te,pressOut:ie}=usePressAnimation({enabled:$&&!O}),se=useFlickGuard(),le=R??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,oe=c??(void 0===d?null:_jsx(IconBadge,{icon:d,tone:m,size:BADGE_SIZE[v]})),ne=p?_jsxs(View,{style:U.selectionLead,children:[_jsx(SelectionBox,{checked:x,disabled:_}),oe?_jsx(View,{style:U.selectionLeadContent,children:oe}):null]}):oe,re=null!=g&&!1!==g&&!(Array.isArray(g)&&0===g.length),ae=L&&!re,ce=_jsxs(View,{style:[U.row,{paddingVertical:O?N.space.sm:K["padding-y"],minHeight:O?48:K["min-height"],backgroundColor:S?N.colors["surface-selected"]:"transparent"},ae?U.divider:null,_&&!O?U.disabled:null,T],children:[ne?_jsx(View,{style:[U.leftSlot,D],children:ne}):null,_jsxs(View,{style:U.middle,children:[null==i||isText(i)?_jsx(Text,{style:[U.title,{fontSize:O?N.text.base.size:K["title-text"],...fontFor(N,O?"normal":"medium"),color:_?N.colors["text-disabled"]:N.colors["text-body"]},E],numberOfLines:W,children:i??" "}):i,null==l||""===l?null:isText(l)?_jsx(Text,{style:[U.subtitle,{fontSize:O?N.text.xs.size:K["subtitle-text"],color:_?N.colors["text-disabled"]:N.colors["text-muted"]},O?U.menuSubtitle:null,F],numberOfLines:a,children:l}):l,o?_jsx(Text,{style:[U.description,{fontSize:K["subtitle-text"],color:_?N.colors["text-disabled"]:N.colors["text-subtle"]},P],numberOfLines:2,children:o}):null,null!=n&&!1!==n?_jsx(View,{style:U.body,children:n}):null,q?_jsx(View,{style:[U.rightBelow,H],children:u}):null]}),u&&!q||k?_jsxs(View,{style:[U.rightSlot,q?null:H],children:[q?null:u,k?_jsx(View,{style:u&&!q?U.chevronWithRight:null,children:_jsx(Chevron,{color:_?N.colors["text-disabled"]:N.colors["text-subtle"]})}):null]}):null]}),de=Y?_jsx(Pressable,{ref:Q,onPress:e=>{$&&X&&!se.isFlick(e)&&(j&&triggerHaptic(j),p?b?.(!x):f?.(e))},onPressIn:e=>{se.onPressIn(e),te()},onPressOut:ie,disabled:!$,onFocus:y,accessibilityRole:p?"checkbox":O?"menuitem":f?"button":void 0,accessibilityLabel:le,accessibilityHint:B,accessibilityState:p?{checked:x,disabled:!$,expanded:w}:{selected:S,disabled:!$,expanded:w,...void 0!==G?{checked:G}:null},"aria-disabled":!$,"aria-expanded":w,...p?{"aria-checked":x}:void 0!==G?{"aria-checked":G}:{"aria-selected":S},...void 0!==G?WEB_CHECKABLE_ROLE:null,testID:M,android_ripple:{color:N.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[z,e?U.pressed:null],...J.hostProps,children:_jsx(Animated.View,{style:ee,children:ce})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:le,accessibilityHint:B,accessibilityState:{selected:S,disabled:_},"aria-selected":S,"aria-disabled":_,testID:M,style:z,children:ce}),me=C&&C.length>0||V&&V.length>0,ue=re?_jsxs(View,{style:[S?{backgroundColor:N.colors["surface-selected"]}:null,L?U.divider:null],children:[de,_jsx(View,{style:U.actions,children:renderActions(g)})]}):de,he=me?_jsx(Swipeable,{leftActions:C,rightActions:V,accessibilityLabel:le,children:ue}):ue;return s?_jsx(ListItemSkeleton,{...e}):J.enabled?_jsxs(_Fragment,{children:[he,J.renderSurface(_jsx(View,{style:U.preview,children:ce}))]}):he}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:l,chevron:o,size:n="md",variant:r="list",containerStyle:a,style:c})=>{const d=useTheme(),m=resolveListItemSize(d,n),u=Math.round(1.15*m["title-text"]),h=Math.round(1.15*m["subtitle-text"]),p="menu"===r;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:d.space.md,paddingVertical:p?d.space.sm:m["padding-y"],minHeight:p?48:m["min-height"]},a,c],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:d.space.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:u,style:{marginBottom:d.space.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:d.space.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==l||o?_jsx(View,{style:{marginLeft:d.space.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border},pressed:{backgroundColor:e.colors["surface-pressed"]},disabled:{opacity:.55},leftSlot:{marginRight:e.space.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.space.sm},body:{marginTop:e.space.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.space.xs},rightSlot:{marginLeft:e.space.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.space.sm,paddingHorizontal:e.space.md,paddingBottom:e.space.md},chevronWithRight:{marginLeft:e.space.xs},preview:{flex:1,backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e["letter-spacing"].normal},subtitle:{marginTop:e.space.xxs,...fontFor(e,"normal")},menuSubtitle:{marginTop:0},description:{marginTop:e.space.xxs,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;

package/lib/module/components/ListSection/ListSection.js

@@ -0,0 +1 @@
+"use strict";import{Children,isValidElement}from"react";import{makeStyles}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Card}from"../Card/index.js";import{Divider}from"../Divider/index.js";import{SectionHeader}from"../SectionHeader/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const useStyles=makeStyles(e=>({footer:{marginTop:e.space.sm,paddingHorizontal:e.space.md}}));export const ListSection=e=>{const{title:t,action:i,footer:r,variant:a="outline",testID:n,children:s}=e;warnInvalidValue("ListSection","variant",e.variant,["elevated","outline","filled","flat"]);const o=useStyles(),l=Children.toArray(s).filter(isValidElement).flatMap((e,t)=>0===t?[e]:[_jsx(Divider,{},`divider-${e.key}`),e]);return _jsxs(_Fragment,{children:[t?_jsx(SectionHeader,{variant:"caps",action:i,children:t}):null,_jsx(Card,{variant:a,padding:"none",testID:n,children:l}),r?_jsx(Text,{variant:"caption",color:"secondary",style:o.footer,children:r}):null]})};export default ListSection;

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

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

package/lib/module/components/Menu/MenuSurface.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{claimAnchoredSurface,computePlacement,PLACEMENT_MARGIN,placementRoom}from"../../utils/placement.js";import{Breakpoints}from"../../utils/responsive.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Divider}from"../Divider/index.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{OptionSheet}from"../OptionSheet/index.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{FOCUS_DELAY_MS,focusHost}from"./focusHost.js";import{visibleGroups,visibleTopActions,wantsSheet}from"./menuModel.js";import{webOnly}from"./webOnly.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,ROW_MIN_HEIGHT=48,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:",WEB_CHECKABLE_ROLE=webOnly({role:"menuitemcheckbox"});export const MenuSurface=e=>{const{open:s,anchor:t,items:o,title:i,topActions:r,placement:n,presentation:l,unavailable:a,context:c=!1,preview:u,onClose:d,restoreFocusTo:m,haptic:p,accessibilityLabel:b,labels:f,testID:h}=e,y=useTheme(),x=useMemo(()=>buildStyles(y),[y]),_=useSafeAreaInsets(),[g,v]=useModalInsets(),w=useMemo(()=>({..._,top:g.top,bottom:g.bottom}),[_,g]),j=useWindowDimensions(),A=usePresenceMotion(),I=A.duration("fast"),k=useMemo(()=>visibleGroups(o,a),[o,a]),S=useMemo(()=>visibleTopActions(r,a),[r,a]),E="sheet"===l||"auto"===l&&j.width<Breakpoints.lg&&wantsSheet(k,S),[C,M]=useState(null),[T,R]=useState(null),D=useRef(d);D.current=d;const O=useRef(m);O.current=m;const P=useRef(null),L=useRef(!1),H=useRef(!1),V=useRef(new Map),B=useRef(null),N=useCallback(()=>{if(!L.current)return;L.current=!1;const e=P.current;P.current=null,e?e():focusHost(O.current?.())},[]);useEffect(()=>{if(s)return H.current=!0,L.current=!1,P.current=null,claimAnchoredSurface(()=>D.current());H.current&&(H.current=!1,L.current=!0,M(null),R(null),E||"ios"===Platform.OS||N())},[s]);const F=useCallback(e=>{if(e.disabled)return;const s=resolveHaptic(p,"selection");s&&triggerHaptic(s),e.key!==BACK_KEY?e.submenu?M(e):(P.current=e.onPress??null,D.current()):M(null)},[p]),K=useMemo(()=>({width:j.width,height:j.height,insets:w}),[j.width,j.height,w]),W=useMemo(()=>{if(!t||!T)return null;const e=t.x+t.width/2>K.width/2?"end":"start";return computePlacement(t,T,K,n,{align:e})},[t,T,K,n]);let G=K.height-w.top-w.bottom-2*PLACEMENT_MARGIN;if(t&&W){const e=placementRoom(t,K);G="top"===W.placement?e.above:e.below}const z=Math.min(280,K.width-w.left-w.right-2*PLACEMENT_MARGIN),$=s&&null!==W,Y=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!$)return setNativeValue(Y,0),void setNativeValue(U,1);const e=[Animated.timing(Y,{toValue:1,duration:I,easing:Easing.bezier(...y.motion.ease.decelerate),useNativeDriver:!0})];c&&!A.reduced&&e.push(Animated.spring(U,{toValue:1.02,damping:y.motion.spring.snappy.damping,stiffness:y.motion.spring.snappy.stiffness,mass:y.motion.spring.snappy.mass,useNativeDriver:!0}));const s=Animated.parallel(e);return s.start(),()=>s.stop()},[$,c,A.reduced,Y,U,y.motion,I]);const X=useCallback(e=>{const{width:s,height:t}=e.nativeEvent.layout;R(e=>e&&e.width===s&&e.height===t?e:{width:s,height:t})},[]),q=c&&"top"===W?.placement,Z=C?.submenu?[C.submenu]:k,J=q?[...Z].reverse().map(e=>[...e].reverse()):Z,Q=[];if(C)Q.push({key:BACK_KEY,label:C.label});else for(const e of S)Q.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of J)for(const s of e)Q.push({key:s.key,label:s.label,item:s});const ee=Q[0]?.key;useEffect(()=>{if(!$||E||!ee)return;const e=setTimeout(()=>focusHost(V.current.get(ee)),FOCUS_DELAY_MS);return()=>clearTimeout(e)},[$,E,ee]);const setItemRef=e=>s=>{s?V.current.set(e,s):V.current.delete(e)},se=webOnly({onKeyDown:e=>{const s=e.key??e.nativeEvent?.key??"",t=Q.length,o=Q.findIndex(e=>e.key===B.current);let i=-1;if("ArrowDown"===s)i=(o+1)%t;else if("ArrowUp"===s)i=o<=0?t-1:o-1;else if("Home"===s)i=0;else if("End"===s)i=t-1;else{if("ArrowLeft"===s&&C)return e.preventDefault?.(),void M(null);if("ArrowRight"===s&&Q[o]?.item?.submenu)return e.preventDefault?.(),void F(Q[o].item);if(1===s.length&&""!==s.trim()){const e=s.toLowerCase();for(let s=1;s<=t;s+=1){const r=(o+s)%t;if(Q[r].label.toLowerCase().startsWith(e)){i=r;break}}}}i>=0&&(e.preventDefault?.(),(e=>{const s=Q[e];s&&focusHost(V.current.get(s.key))})(i))}});if(E){const e=C?.submenu?[{key:BACK_KEY,label:f.back,icon:"chevron-left"},...C.submenu]:[...S,...k.flat()],t=[...new Set(e.filter(e=>e.checked).map(e=>e.key))];return _jsx(OptionSheet,{visible:s,onClose:d,onAfterClose:N,title:C?.label??i,options:e,getOptionLabel:e=>e.label,getOptionValue:e=>e.key,isOptionDisabled:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),getOptionDescription:e=>e.description,getOptionIcon:e=>{const s=e;return renderSlotIcon(s.icon,{color:s.destructive?y.colors["danger-text"]:y.colors["text-muted"],size:20,disabled:Boolean(s.disabled)})},value:t,onChange:(e,s)=>F(s),accessibilityLabel:b??i,testID:h?`${h}-sheet`:void 0})}const inkFor=e=>e.disabled?y.colors["text-disabled"]:e.destructive?y.colors["danger-text"]:y.colors["text-body"],inkRoleFor=e=>e.disabled?"disabled":e.destructive?"danger":"primary",te=_jsxs(_Fragment,C?{children:[_jsxs(Pressable,{ref:setItemRef(BACK_KEY),onPress:()=>M(null),onFocus:()=>{B.current=BACK_KEY},accessibilityRole:"menuitem",accessibilityLabel:`${f.back}, ${C.label}`,android_ripple:{color:y.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[x.row,e?x.pressed:null],children:[_jsx(View,{style:x.icon,children:_jsx(AppIcon,{name:"chevron-left",size:20,color:y.colors["text-muted"]})}),_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:1,style:x.labels,children:C.label})]}),_jsx(Divider,{spacing:"none"})]}:{children:[i?_jsx(Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:x.title,children:i}):null,S.length>0?_jsxs(_Fragment,{children:[_jsx(View,{style:x.topRow,children:S.map(e=>{const s=`${TOP_PREFIX}${e.key}`,t=Boolean(e.disabled),o=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(s),onPress:()=>F(e),onFocus:()=>{B.current=s},disabled:t,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:t},"aria-disabled":t,testID:e.testID,style:({pressed:e})=>[x.topAction,e?x.pressed:null],children:[renderSlotIcon(e.icon,{color:o,size:20,disabled:t}),_jsx(Text,{variant:"caption",color:inkRoleFor(e),numberOfLines:1,children:e.label})]},s)})}),_jsx(Divider,{spacing:"none"})]}):null]});return _jsx(Modal,{visible:s,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:N,children:_jsxs(ModalSafeArea,{onInsets:v,children:[_jsx(Pressable,{style:[StyleSheet.absoluteFill,c?x.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:f.close,testID:h?`${h}-scrim`:void 0}),c&&u&&t?_jsx(Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[x.preview,{left:t.x,top:t.y,width:t.width,height:t.height,transform:[{scale:U}]}],children:u}):null,_jsx(Animated.View,{accessibilityRole:"menu",accessibilityLabel:C?.label??b??i,onLayout:X,testID:h?`${h}-menu`:void 0,...se,style:[x.anchored,{left:W?.x??0,top:W?.y??0,maxWidth:z,opacity:$?Y:0}],children:_jsx(View,{style:x.surface,children:_jsxs(View,{style:[x.clip,{maxHeight:G}],children:[te,_jsx(ScrollView,{style:x.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:J.map((e,s)=>{const t=e.some(e=>null!=e.icon);return _jsxs(View,{children:[s>0?_jsx(Divider,{spacing:"none"}):null,e.map(e=>((e,s)=>{const t=Boolean(e.disabled),o=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(e.key),onPress:()=>F(e),onFocus:()=>{B.current=e.key},disabled:t,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:t,checked:e.checked},"aria-disabled":t,"aria-checked":e.checked,...void 0!==e.checked?WEB_CHECKABLE_ROLE:null,android_ripple:{color:y.colors["surface-pressed"],borderless:!1},testID:e.testID,style:({pressed:e})=>[x.row,e?x.pressed:null],children:[s?_jsx(View,{style:x.icon,children:renderSlotIcon(e.icon,{color:o,size:20,disabled:t})}):null,_jsxs(View,{style:x.labels,children:[_jsx(Text,{variant:"body",color:inkRoleFor(e),numberOfLines:2,children:e.label}),e.description?_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):null]}),e.detail?_jsx(Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?_jsx(AppIcon,{name:"check",size:20,color:y.colors.primary}):null,e.submenu?_jsx(AppIcon,{name:"chevron-right",size:20,color:y.colors["text-subtle"]}):null]},e.key)})(e,t))]},e[0].key)})})]})})}),_jsx(ToastHost,{})]})})};const buildStyles=e=>StyleSheet.create({scrim:{backgroundColor:e.colors.scrim},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,...e.shadow.popover},clip:{borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.space.md,paddingTop:e.space.sm,paddingBottom:e.space.xs},row:{flexDirection:"row",alignItems:"center",gap:e.space.md,minHeight:48,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},pressed:{backgroundColor:e.colors["surface-pressed"]},icon:{width:20,alignItems:"center"},labels:{flexGrow:1,flexShrink:1},topRow:{flexDirection:"row",padding:e.space.xs,gap:e.space.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.space.xs,minHeight:64,borderRadius:e.radius.sm,...smoothCorners}});
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,ScrollView,StyleSheet,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{claimAnchoredSurface,computePlacement,PLACEMENT_MARGIN,placementRoom}from"../../utils/placement.js";import{Breakpoints}from"../../utils/responsive.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Row}from"../Box/index.js";import{Divider}from"../Divider/index.js";import{ListItem}from"../ListItem/index.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{OptionSheet}from"../OptionSheet/index.js";import{Text}from"../Text/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{FOCUS_DELAY_MS,focusHost}from"./focusHost.js";import{visibleGroups,visibleTopActions,wantsSheet}from"./menuModel.js";import{webOnly}from"./webOnly.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:";export const MenuSurface=e=>{const{open:t,anchor:s,items:o,title:i,topActions:n,placement:r,presentation:l,unavailable:a,context:c=!1,preview:u,onClose:d,restoreFocusTo:m,haptic:p,accessibilityLabel:f,labels:b,testID:h}=e,x=useTheme(),y=useMemo(()=>buildStyles(x),[x]),v=useSafeAreaInsets(),[_,g]=useModalInsets(),j=useMemo(()=>({...v,top:_.top,bottom:_.bottom}),[v,_]),w=useWindowDimensions(),A=usePresenceMotion(),I=A.duration("fast"),S=useMemo(()=>visibleGroups(o,a),[o,a]),k=useMemo(()=>visibleTopActions(n,a),[n,a]),M="sheet"===l||"auto"===l&&w.width<Breakpoints.lg&&wantsSheet(S,k),[T,E]=useState(null),[C,R]=useState(null),D=useRef(d);D.current=d;const L=useRef(m);L.current=m;const P=useRef(null),O=useRef(!1),V=useRef(!1),H=useRef(new Map),B=useRef(null),F=useCallback(()=>{if(!O.current)return;O.current=!1;const e=P.current;P.current=null,e?e():focusHost(L.current?.())},[]);useEffect(()=>{if(t)return V.current=!0,O.current=!1,P.current=null,claimAnchoredSurface(()=>D.current());V.current&&(V.current=!1,O.current=!0,E(null),R(null),M||"ios"===Platform.OS||F())},[t]);const N=useCallback(e=>{if(e.disabled)return;const t=resolveHaptic(p,"selection");t&&triggerHaptic(t),e.key!==BACK_KEY?e.submenu?E(e):(P.current=e.onPress??null,D.current()):E(null)},[p]),K=useMemo(()=>({width:w.width,height:w.height,insets:j}),[w.width,w.height,j]),$=useMemo(()=>{if(!s||!C)return null;const e=s.x+s.width/2>K.width/2?"end":"start";return computePlacement(s,C,K,r,{align:e})},[s,C,K,r]);let z=K.height-j.top-j.bottom-2*PLACEMENT_MARGIN;if(s&&$){const e=placementRoom(s,K);z="top"===$.placement?e.above:e.below}const G=Math.min(280,K.width-j.left-j.right-2*PLACEMENT_MARGIN),W=t&&null!==$,Y=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!W)return setNativeValue(Y,0),void setNativeValue(U,1);const e=[Animated.timing(Y,{toValue:1,duration:I,easing:Easing.bezier(...x.motion.ease.decelerate),useNativeDriver:!0})];c&&!A.reduced&&e.push(Animated.spring(U,{toValue:1.02,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0}));const t=Animated.parallel(e);return t.start(),()=>t.stop()},[W,c,A.reduced,Y,U,x.motion,I]);const X=useCallback(e=>{const{width:t,height:s}=e.nativeEvent.layout;R(e=>e&&e.width===t&&e.height===s?e:{width:t,height:s})},[]),q=c&&"top"===$?.placement,Z=T?.submenu?[T.submenu]:S,J=q?[...Z].reverse().map(e=>[...e].reverse()):Z,Q=[];if(T)Q.push({key:BACK_KEY,label:T.label});else for(const e of k)Q.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of J)for(const t of e)Q.push({key:t.key,label:t.label,item:t});const ee=Q[0]?.key;useEffect(()=>{if(!W||M||!ee)return;const e=setTimeout(()=>focusHost(H.current.get(ee)),FOCUS_DELAY_MS);return()=>clearTimeout(e)},[W,M,ee]);const setItemRef=e=>t=>{t?H.current.set(e,t):H.current.delete(e)},te=webOnly({onKeyDown:e=>{const t=e.key??e.nativeEvent?.key??"",s=Q.length,o=Q.findIndex(e=>e.key===B.current);let i=-1;if("ArrowDown"===t)i=(o+1)%s;else if("ArrowUp"===t)i=o<=0?s-1:o-1;else if("Home"===t)i=0;else if("End"===t)i=s-1;else{if("ArrowLeft"===t&&T)return e.preventDefault?.(),void E(null);if("ArrowRight"===t&&Q[o]?.item?.submenu)return e.preventDefault?.(),void N(Q[o].item);if(1===t.length&&""!==t.trim()){const e=t.toLowerCase();for(let t=1;t<=s;t+=1){const n=(o+t)%s;if(Q[n].label.toLowerCase().startsWith(e)){i=n;break}}}}i>=0&&(e.preventDefault?.(),(e=>{const t=Q[e];t&&focusHost(H.current.get(t.key))})(i))}});if(M){const e=T?.submenu?[{key:BACK_KEY,label:b.back,icon:"chevron-left"},...T.submenu]:[...k,...S.flat()],s=[...new Set(e.filter(e=>e.checked).map(e=>e.key))];return _jsx(OptionSheet,{visible:t,onClose:d,onAfterClose:F,title:T?.label??i,options:e,getOptionLabel:e=>e.label,getOptionValue:e=>e.key,isOptionDisabled:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),getOptionDescription:e=>e.description,getOptionIcon:e=>{const t=e;return renderSlotIcon(t.icon,{color:t.destructive?x.colors["danger-text"]:x.colors["text-muted"],size:20,disabled:Boolean(t.disabled)})},value:s,onChange:(e,t)=>N(t),accessibilityLabel:f??i,testID:h?`${h}-sheet`:void 0})}const inkFor=e=>e.disabled?x.colors["text-disabled"]:e.destructive?x.colors["danger-text"]:x.colors["text-body"],inkRoleFor=e=>e.disabled?"disabled":e.destructive?"danger":"primary",se=_jsxs(_Fragment,T?{children:[_jsx(ListItem,{ref:setItemRef(BACK_KEY),variant:"menu",onPress:()=>E(null),onFocus:()=>{B.current=BACK_KEY},accessibilityLabel:`${b.back}, ${T.label}`,left:_jsx(View,{style:y.icon,children:_jsx(AppIcon,{name:"chevron-left",size:20,color:x.colors["text-muted"]})}),title:_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:1,children:T.label})}),_jsx(Divider,{spacing:"none"})]}:{children:[i?_jsx(Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:y.title,children:i}):null,k.length>0?_jsxs(_Fragment,{children:[_jsx(View,{style:y.topRow,children:k.map(e=>{const t=`${TOP_PREFIX}${e.key}`,s=Boolean(e.disabled),o=inkFor(e);return _jsxs(Pressable,{ref:setItemRef(t),onPress:()=>N(e),onFocus:()=>{B.current=t},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s},"aria-disabled":s,testID:e.testID,style:({pressed:e})=>[y.topAction,e?y.pressed:null],children:[renderSlotIcon(e.icon,{color:o,size:20,disabled:s}),_jsx(Text,{variant:"caption",color:inkRoleFor(e),numberOfLines:1,children:e.label})]},t)})}),_jsx(Divider,{spacing:"none"})]}):null]});return _jsx(Modal,{visible:t,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:F,children:_jsxs(ModalSafeArea,{onInsets:g,children:[_jsx(Pressable,{style:[StyleSheet.absoluteFill,c?y.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:b.close,testID:h?`${h}-scrim`:void 0}),c&&u&&s?_jsx(Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[y.preview,{left:s.x,top:s.y,width:s.width,height:s.height,transform:[{scale:U}]}],children:u}):null,_jsx(Animated.View,{accessibilityRole:"menu",accessibilityLabel:T?.label??f??i,onLayout:X,testID:h?`${h}-menu`:void 0,...te,style:[y.anchored,{left:$?.x??0,top:$?.y??0,maxWidth:G,opacity:W?Y:0}],children:_jsx(View,{style:y.surface,children:_jsxs(View,{style:[y.clip,{maxHeight:z}],children:[se,_jsx(ScrollView,{style:y.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:J.map((e,t)=>{const s=e.some(e=>null!=e.icon);return _jsxs(View,{children:[t>0?_jsx(Divider,{spacing:"none"}):null,e.map(e=>((e,t)=>{const s=Boolean(e.disabled),o=inkFor(e),i=e.detail||e.checked||e.submenu?_jsxs(Row,{gap:"md",children:[e.detail?_jsx(Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?_jsx(AppIcon,{name:"check",size:20,color:x.colors.primary}):null,e.submenu?_jsx(AppIcon,{name:"chevron-right",size:20,color:x.colors["text-subtle"]}):null]}):void 0;return _jsx(ListItem,{ref:setItemRef(e.key),variant:"menu",onPress:()=>N(e),onFocus:()=>{B.current=e.key},disabled:s,checked:e.checked,accessibilityLabel:e.accessibilityLabel??e.label,testID:e.testID,rightPlacement:"side",left:t?_jsx(View,{style:y.icon,children:renderSlotIcon(e.icon,{color:o,size:20,disabled:s})}):void 0,title:_jsx(Text,{variant:"body",color:inkRoleFor(e),numberOfLines:2,children:e.label}),subtitle:e.description?_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):void 0,right:i},e.key)})(e,s))]},e[0].key)})})]})})}),_jsx(ToastHost,{})]})})};const buildStyles=e=>StyleSheet.create({scrim:{backgroundColor:e.colors.scrim},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,...e.shadow.popover},clip:{borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.space.md,paddingTop:e.space.sm,paddingBottom:e.space.xs},pressed:{backgroundColor:e.colors["surface-pressed"]},icon:{width:20,alignItems:"center"},topRow:{flexDirection:"row",padding:e.space.xs,gap:e.space.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.space.xs,minHeight:64,borderRadius:e.radius.sm,...smoothCorners}});

package/lib/module/components/ProfileCompletion/ProfileCompletion.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_PROFILE_COMPLETION_LABELS=Object.freeze({summary:(e,r)=>`${e}, profile ${r}% complete`,avatar:e=>`${e}'s avatar`});const AVATAR_PX={sm:32,md:48,lg:64,xl:80},toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"neutral":return e.colors["text-muted"];default:return e.colors.primary}},DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,r)=>{const{progress:t,title:o,subtitle:s,description:i,source:a,ImageComponent:n,size:l="md",avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:d,ringWidth:u,ringGap:p=DEFAULT_RING_GAP,ringVariant:g="banded",tone:f,ringColor:x,animated:y=!0,showCompleteBadge:b=!0,trailing:h,labels:_,accessibilityLabel:j,style:w,titleStyle:I,subtitleStyle:C,descriptionStyle:v,testID:A}=e;warnInvalidValue("ProfileCompletion","size",e.size,["sm","md","lg","xl"]),warnInvalidValue("ProfileCompletion","ringVariant",e.ringVariant,["banded","single"]),warnInvalidValue("ProfileCompletion","tone",e.tone,["primary","success","warning","danger","info","neutral"]);const P=useTheme(),T=useMemo(()=>buildStyles(P),[P]),L=useMemo(()=>({...DEFAULT_PROFILE_COMPLETION_LABELS,..._}),[_]),V=u??3,R=AVATAR_PX[l]+2*(p+V),S=Math.min(100,Math.max(0,Number.isNaN(t)?0:t)),D=Math.round(S),E=j??L.summary(o,D),M=A??"profile-completion",G=b&&S>=100,N=Math.max(16,Math.round(.3*R)),O=R/2*(1+Math.SQRT1_2)-V/2,z=x??("banded"===g&&null==f?P.colors.success:toneColor(P,f??"primary"));return _jsxs(View,{ref:r,style:[T.root,w],testID:A,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:E,accessibilityValue:{min:0,max:100,now:D},testID:`${M}-summary`,children:[_jsxs(View,{style:{width:R,height:R},children:[_jsx(ProgressRing,{progress:S/100,size:R,strokeWidth:V,tone:f??"primary",ringColor:x,colorByProgress:"banded"===g&&null==f&&null==x,animated:y,testID:`${M}-ring`,children:_jsx(Avatar,{name:o,source:a,ImageComponent:n,size:l,tone:c,backgroundColor:m,color:d,accessibilityLabel:L.avatar(o)})}),G?_jsx(View,{pointerEvents:"none",style:[T.badge,{width:N,height:N,borderRadius:P.radius.pill,...smoothCorners,left:O-N/2,top:O-N/2,backgroundColor:P.colors.surface}],testID:`${M}-complete-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:N-2,color:z})}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{variant:"h3",numberOfLines:2,style:I,children:o}),s?_jsx(Text,{variant:"label",color:"tertiary",numberOfLines:1,style:[T.subtitle,C],children:s}):null,i?_jsx(Text,{variant:"body",color:"secondary",style:v,children:i}):null]})]}),null!=h?_jsx(View,{style:T.trailing,children:h}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.space.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.space.md},body:{flex:1,rowGap:e.space.xxs},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},subtitle:{textTransform:"uppercase",letterSpacing:e["letter-spacing"].wide},trailing:{alignSelf:"flex-start"}});export{ProfileCompletion};export default ProfileCompletion;
+"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{IconBadge}from"../IconBadge/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_PROFILE_COMPLETION_LABELS=Object.freeze({summary:(e,r)=>`${e}, profile ${r}% complete`,avatar:e=>`${e}'s avatar`});const AVATAR_PX={sm:32,md:48,lg:64,xl:80},toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"neutral":return e.colors["text-muted"];default:return e.colors.primary}},DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,r)=>{const{progress:t,title:o,subtitle:i,description:s,source:a,ImageComponent:n,size:l="md",avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:d,ringWidth:u,ringGap:p=DEFAULT_RING_GAP,ringVariant:g="banded",tone:x,ringColor:f,animated:y=!0,showCompleteBadge:b=!0,trailing:_,labels:h,accessibilityLabel:I,style:j,titleStyle:w,subtitleStyle:v,descriptionStyle:A,testID:C}=e;warnInvalidValue("ProfileCompletion","size",e.size,["sm","md","lg","xl"]),warnInvalidValue("ProfileCompletion","ringVariant",e.ringVariant,["banded","single"]),warnInvalidValue("ProfileCompletion","tone",e.tone,["primary","success","warning","danger","info","neutral"]);const P=useTheme(),T=useMemo(()=>buildStyles(P),[P]),L=useMemo(()=>({...DEFAULT_PROFILE_COMPLETION_LABELS,...h}),[h]),V=u??3,R=AVATAR_PX[l]+2*(p+V),S=Math.min(100,Math.max(0,Number.isNaN(t)?0:t)),D=Math.round(S),E=I??L.summary(o,D),M=C??"profile-completion",G=b&&S>=100,N=Math.max(16,Math.round(.3*R)),O=R/2*(1+Math.SQRT1_2)-V/2,B=f??("banded"===g&&null==x?P.colors.success:toneColor(P,x??"primary"));return _jsxs(View,{ref:r,style:[T.root,j],testID:C,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:E,accessibilityValue:{min:0,max:100,now:D},testID:`${M}-summary`,children:[_jsxs(View,{style:{width:R,height:R},children:[_jsx(ProgressRing,{progress:S/100,size:R,strokeWidth:V,tone:x??"primary",ringColor:f,colorByProgress:"banded"===g&&null==x&&null==f,animated:y,testID:`${M}-ring`,children:_jsx(Avatar,{name:o,source:a,ImageComponent:n,size:l,tone:c,backgroundColor:m,color:d,accessibilityLabel:L.avatar(o)})}),G?_jsx(IconBadge,{dimension:N,fill:"surface",icon:_jsx(AppIcon,{name:"verify",variant:"bold",size:N-2,color:B}),pointerEvents:"none",style:[T.badge,{left:O-N/2,top:O-N/2}],testID:`${M}-complete-badge`}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{variant:"h3",numberOfLines:2,style:w,children:o}),i?_jsx(Text,{variant:"label",color:"tertiary",numberOfLines:1,style:[T.subtitle,v],children:i}):null,s?_jsx(Text,{variant:"body",color:"secondary",style:A,children:s}):null]})]}),null!=_?_jsx(View,{style:T.trailing,children:_}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.space.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.space.md},body:{flex:1,rowGap:e.space.xxs},badge:{position:"absolute"},subtitle:{textTransform:"uppercase",letterSpacing:e["letter-spacing"].wide},trailing:{alignSelf:"flex-start"}});export{ProfileCompletion};export default ProfileCompletion;

package/lib/module/components/ProfilePicker/ProfilePicker.js

@@ -1 +1 @@
-"use strict";import{Image}from"expo-image";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{AVATAR_COLORS,avatarToneColors}from"../Avatar/Avatar.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_PROFILE_PICKER_LABELS=Object.freeze({pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."});const DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,INITIALS_MAX_FONT_SCALE=1.2,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),initialsFromName=e=>{const r=e.trim().split(/\s+/u).filter(Boolean);return 0===r.length?"":1===r.length?r[0].charAt(0).toUpperCase():(r[0].charAt(0)+r[1].charAt(0)).toUpperCase()},hashColor=e=>{let r=0;for(let o=0;o<e.length;o+=1)r=(r<<5)-r+e.charCodeAt(o),r|=0;return AVATAR_COLORS[Math.abs(r)%AVATAR_COLORS.length]},toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors["on-success"]};case"warning":return{base:e.colors.warning,on:e.colors["on-warning"]};case"danger":return{base:e.colors.danger,on:e.colors["on-danger"]};case"info":return{base:e.colors.info,on:e.colors["on-info"]};case"neutral":return{base:e.colors["text-muted"],on:e.colors["on-neutral-strong"]};default:return{base:e.colors.primary,on:e.colors["on-primary"]}}},badgeLookFor=(e,r,o)=>{const t=toneFor(e,r),i=t.base,s=e.colors.bg,l="neutral"===r;let n;switch(o){case"soft":n={fill:l?e.colors["bg-muted"]:blendOf(i,.14,s,e.colors["bg-subtle"]),ring:s,icon:i};break;case"outline":n={fill:s,ring:l?e.colors.border:i,icon:i};break;default:n={fill:i,ring:s,icon:t.on}}return n},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,r)=>{const{value:o,name:t,sources:i,onPick:s,onRemove:l,loading:n=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:m="circle",badgeIcon:p="camera",tone:h,variant:g,avatarTone:b,avatarBackgroundColor:f,avatarColor:x,label:y,required:v=!1,helperText:k,error:C,layout:_="stacked",title:I,subtitle:S,ImageComponent:T,labels:j,haptic:A,onError:P,accessibilityLabel:w,style:F,testID:E}=e;warnInvalidValue("ProfilePicker","size",e.size,["sm","md","lg"]),warnInvalidValue("ProfilePicker","shape",e.shape,["circle","rounded","square"]),warnInvalidValue("ProfilePicker","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("ProfilePicker","variant",e.variant,["solid","soft","outline"]),warnInvalidValue("ProfilePicker","layout",e.layout,["stacked","inline","profile"]);const L=useTheme(),M=L.settings.components["profile-picker"],R=h??M?.defaultTone??"primary",O=g??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O),[L,R,O]),z=b??M?.defaultAvatarTone,D=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{placeholder:{background:f??e?.background??L.colors["bg-muted"],icon:x??e?.color??L.colors["text-subtle"]},initials:{background:f??e?.background??L.colors[hashColor(t??"")],ink:x??e?.color??L.colors["on-primary"]}}},[L,z,f,x,t]),B=useMemo(()=>({...DEFAULT_PROFILE_PICKER_LABELS,...j}),[j]),[H,U]=useState(null),[N,$]=useState(null),[q,W]=useState(null),[X,Z]=useState(!1),[G,K]=useState(o);o!==G&&(K(o),U(null));const Q=n||a,Y=H??o??null,J=Y&&Y!==q?Y:null,ee=initialsFromName(t??""),re=C??N??void 0,oe=!Q&&(null!==H||Boolean(o)&&Boolean(l)),te=i.length>0||oe,ie=SIZE_PX[d],se=resolveRadius(m,ie),le=se*(1-Math.SQRT1_2),ne=clamp(Math.round(.28*ie),24,44),ae=le-ne/2,ce=Math.max(0,-ae),ue={width:ie,height:ie,borderRadius:se,...smoothCorners},de=Math.max(L.text.xs.size,Math.round(.4*ie)),me=useCallback(e=>{$(e),P?.(e),!1!==A&&triggerHaptic("notificationError")},[P,A]),pe=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void me(e instanceof Error?e.message:String(e))}const o=r?.[0];if(!o)return;if("number"==typeof u&&"number"==typeof o.size&&o.size>1024*u*1024)return void me(B.errorTooLarge(u));if(o.type&&!matchesAccept(o.type,c))return void me(B.errorWrongType);$(null),U(o.uri);const t=resolveHaptic(A,"selection");t&&triggerHaptic(t),s?.(o)},[u,c,B,A,s,me]),he=useCallback(()=>{Q||(fe.current=null,1!==i.length||oe?(i.length>0||oe)&&Z(!0):pe(i[0]))},[Q,i,oe,pe]),ge=useCallback(()=>{U(null),$(null);const e=resolveHaptic(A,"selection");e&&triggerHaptic(e),l?.()},[A,l]),be=useMemo(()=>{const e=i.map(e=>({kind:"source",source:e}));return oe&&e.push({kind:"remove"}),e},[i,oe]),fe=useRef(null),xe=useCallback(e=>{fe.current||(Z(!1),"remove"===e.kind?ge():fe.current=e.source)},[ge]),ye=useRef(pe);ye.current=pe;const ve=useCallback(()=>{const e=fe.current;fe.current=null,e&&ye.current(e)},[]),ke=E??"profile-picker",Ce=w??(te?B.pick:t),Ie=_jsx(View,{style:{width:ie,height:ie,marginBottom:ce,marginRight:ce},children:_jsxs(Pressable,{onPress:he,disabled:Q||!te,accessibilityRole:te?"button":"image",accessibilityLabel:Ce,accessibilityHint:fieldTextAsString(re),accessibilityState:te?{disabled:Q,busy:n}:{busy:n},"aria-disabled":te?Q:void 0,"aria-busy":n,testID:`${ke}-button`,style:({pressed:e})=>[{width:ie,height:ie,borderRadius:se,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[J?T?_jsx(T,{source:{uri:J},onError:()=>W(J),style:ue,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(Image,{source:{uri:J},onError:()=>W(J),style:ue,contentFit:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(View,{style:[styles.fill,ue,{backgroundColor:ee?D.initials.background:D.placeholder.background}],children:ee?_jsx(Text,{variant:"label",weight:"semibold",align:"center",numberOfLines:1,maxFontSizeMultiplier:1.2,style:{color:D.initials.ink,fontSize:de,lineHeight:Math.round(de*L.leading.body)},children:ee}):_jsx(AppIcon,{name:"user",size:Math.round(.45*ie),color:D.placeholder.icon})}),n?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:se,...smoothCorners,backgroundColor:L.colors.scrim}],testID:`${ke}-loading`,children:_jsx(Spinner,{size:ie>=100?"md":"sm",color:L.colors["on-primary"]})}):null,!a&&te?_jsx(View,{pointerEvents:"none",testID:`${ke}-badge`,style:[styles.badge,{width:ne,height:ne,borderRadius:L.radius.pill,...smoothCorners,right:ae,bottom:ae,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*ne),disabled:!1})}):null]})}),Se="stacked"!==_?_jsxs(View,{style:[styles.meta,"profile"===_?styles.metaCentred:null],children:[I?_jsx(Text,{variant:"body",weight:"semibold",style:[styles.title,"profile"===_?styles.textCentred:null],children:I}):null,S?_jsx(Text,{variant:"bodySmall",color:"secondary",style:[styles.subtitle,"profile"===_?styles.textCentred:null,{marginTop:L.space.xxs}],children:S}):null,_jsx(FieldMessage,{text:re??k,error:hasFieldText(re)})]}):_jsx(FieldMessage,{text:re??k,error:hasFieldText(re)});return _jsxs(View,{ref:r,style:F,testID:E,children:[y?_jsx(FieldLabel,{required:v,children:y}):null,_jsxs(View,{style:"inline"===_?[styles.row,{columnGap:L.space.md}]:["profile"===_?styles.columnCentred:styles.column,{rowGap:L.space.xs}],children:[Ie,Se]}),_jsx(OptionSheet,{visible:X,haptic:A,onClose:()=>Z(!1),onAfterClose:ve,title:B.sheetTitle,options:be,getOptionLabel:e=>"remove"===e.kind?B.remove:e.source.label,getOptionValue:e=>"remove"===e.kind?REMOVE_VALUE:e.source.key,destructiveOf:e=>"remove"===e.kind,getOptionDescription:e=>"remove"===e.kind?void 0:e.source.description,getOptionIcon:e=>"remove"===e.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors["danger-text"]}):e.source.icon,onChange:(e,r)=>xe(r)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;
+"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar}from"../Avatar/index.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_PROFILE_PICKER_LABELS=Object.freeze({pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."});const DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors["on-success"]};case"warning":return{base:e.colors.warning,on:e.colors["on-warning"]};case"danger":return{base:e.colors.danger,on:e.colors["on-danger"]};case"info":return{base:e.colors.info,on:e.colors["on-info"]};case"neutral":return{base:e.colors["text-muted"],on:e.colors["on-neutral-strong"]};default:return{base:e.colors.primary,on:e.colors["on-primary"]}}},badgeLookFor=(e,r,o)=>{const t=toneFor(e,r),i=t.base,s=e.colors.bg,n="neutral"===r;let l;switch(o){case"soft":l={fill:n?e.colors["bg-muted"]:blendOf(i,.14,s,e.colors["bg-subtle"]),ring:s,icon:i};break;case"outline":l={fill:s,ring:n?e.colors.border:i,icon:i};break;default:l={fill:i,ring:s,icon:t.on}}return l},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,r)=>{const{value:o,name:t,sources:i,onPick:s,onRemove:n,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:d,size:u="md",shape:m="circle",badgeIcon:p="camera",tone:g,variant:f,avatarTone:h,avatarBackgroundColor:b,avatarColor:y,label:x,required:v=!1,helperText:k,error:C,layout:I="stacked",title:_,subtitle:j,ImageComponent:P,labels:S,haptic:T,onError:w,accessibilityLabel:E,style:F,testID:A}=e;warnInvalidValue("ProfilePicker","size",e.size,["sm","md","lg"]),warnInvalidValue("ProfilePicker","shape",e.shape,["circle","rounded","square"]),warnInvalidValue("ProfilePicker","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("ProfilePicker","variant",e.variant,["solid","soft","outline"]),warnInvalidValue("ProfilePicker","layout",e.layout,["stacked","inline","profile"]);const L=useTheme(),R=L.settings.components["profile-picker"],V=g??R?.defaultTone??"primary",M=f??R?.defaultVariant??"solid",O=useMemo(()=>badgeLookFor(L,V,M),[L,V,M]),D=h??R?.defaultAvatarTone,z=useMemo(()=>({...DEFAULT_PROFILE_PICKER_LABELS,...S}),[S]),[H,B]=useState(null),[U,$]=useState(null),[q,W]=useState(!1),[Z,G]=useState(o);o!==Z&&(G(o),B(null));const K=l||a,N=H??o??null,X=useMemo(()=>N?{uri:N}:void 0,[N]),Q=C??U??void 0,Y=!K&&(null!==H||Boolean(o)&&Boolean(n)),J=i.length>0||Y,ee=SIZE_PX[u],re=resolveRadius(m,ee),oe=re*(1-Math.SQRT1_2),te=clamp(Math.round(.28*ee),24,44),ie=oe-te/2,se=Math.max(0,-ie),ne=useCallback(e=>{$(e),w?.(e),!1!==T&&triggerHaptic("notificationError")},[w,T]),le=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void ne(e instanceof Error?e.message:String(e))}const o=r?.[0];if(!o)return;if("number"==typeof d&&"number"==typeof o.size&&o.size>1024*d*1024)return void ne(z.errorTooLarge(d));if(o.type&&!matchesAccept(o.type,c))return void ne(z.errorWrongType);$(null),B(o.uri);const t=resolveHaptic(T,"selection");t&&triggerHaptic(t),s?.(o)},[d,c,z,T,s,ne]),ae=useCallback(()=>{K||(ue.current=null,1!==i.length||Y?(i.length>0||Y)&&W(!0):le(i[0]))},[K,i,Y,le]),ce=useCallback(()=>{B(null),$(null);const e=resolveHaptic(T,"selection");e&&triggerHaptic(e),n?.()},[T,n]),de=useMemo(()=>{const e=i.map(e=>({kind:"source",source:e}));return Y&&e.push({kind:"remove"}),e},[i,Y]),ue=useRef(null),me=useCallback(e=>{ue.current||(W(!1),"remove"===e.kind?ce():ue.current=e.source)},[ce]),pe=useRef(le);pe.current=le;const ge=useCallback(()=>{const e=ue.current;ue.current=null,e&&pe.current(e)},[]),fe=A??"profile-picker",he=E??(J?z.pick:t),be=_jsx(View,{style:{width:ee,height:ee,marginBottom:se,marginRight:se},children:_jsxs(Pressable,{onPress:ae,disabled:K||!J,accessibilityRole:J?"button":"image",accessibilityLabel:he,accessibilityHint:fieldTextAsString(Q),accessibilityState:J?{disabled:K,busy:l}:{busy:l},"aria-disabled":J?K:void 0,"aria-busy":l,testID:`${fe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[_jsx(View,{importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,pointerEvents:"none",children:_jsx(Avatar,{dimension:ee,shape:m,name:t||void 0,source:X,ImageComponent:P,tone:D,backgroundColor:b,color:y,placeholderIcon:"user"})}),l?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:re,...smoothCorners,backgroundColor:L.colors.scrim}],testID:`${fe}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors["on-primary"]})}):null,!a&&J?_jsx(View,{pointerEvents:"none",testID:`${fe}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:L.radius.pill,...smoothCorners,right:ie,bottom:ie,backgroundColor:O.fill,borderColor:O.ring}],children:renderSlotIcon(p,{color:O.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==I?_jsxs(View,{style:[styles.meta,"profile"===I?styles.metaCentred:null],children:[_?_jsx(Text,{variant:"body",weight:"semibold",style:[styles.title,"profile"===I?styles.textCentred:null],children:_}):null,j?_jsx(Text,{variant:"bodySmall",color:"secondary",style:[styles.subtitle,"profile"===I?styles.textCentred:null,{marginTop:L.space.xxs}],children:j}):null,_jsx(FieldMessage,{text:Q??k,error:hasFieldText(Q)})]}):_jsx(FieldMessage,{text:Q??k,error:hasFieldText(Q)});return _jsxs(View,{ref:r,style:F,testID:A,children:[x?_jsx(FieldLabel,{required:v,children:x}):null,_jsxs(View,{style:"inline"===I?[styles.row,{columnGap:L.space.md}]:["profile"===I?styles.columnCentred:styles.column,{rowGap:L.space.xs}],children:[be,ye]}),_jsx(OptionSheet,{visible:q,haptic:T,onClose:()=>W(!1),onAfterClose:ge,title:z.sheetTitle,options:de,getOptionLabel:e=>"remove"===e.kind?z.remove:e.source.label,getOptionValue:e=>"remove"===e.kind?REMOVE_VALUE:e.source.key,destructiveOf:e=>"remove"===e.kind,getOptionDescription:e=>"remove"===e.kind?void 0:e.source.description,getOptionIcon:e=>"remove"===e.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors["danger-text"]}):e.source.icon,onChange:(e,r)=>me(r)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;