@webority/mobile-ui 0.18.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/lib/commonjs/canvasKit/index.js +1 -1
  2. package/lib/commonjs/components/Accordion/Accordion.js +1 -1
  3. package/lib/commonjs/components/AppBar/AppBar.js +1 -1
  4. package/lib/commonjs/components/Avatar/Avatar.js +1 -1
  5. package/lib/commonjs/components/Badge/Badge.js +1 -1
  6. package/lib/commonjs/components/Banner/Banner.js +1 -1
  7. package/lib/commonjs/components/BarChart/BarChart.js +1 -1
  8. package/lib/commonjs/components/BottomNavigation/BottomNavigation.js +1 -1
  9. package/lib/commonjs/components/BottomSheet/BottomSheet.js +1 -1
  10. package/lib/commonjs/components/Box/Box.js +1 -1
  11. package/lib/commonjs/components/Button/Button.js +1 -1
  12. package/lib/commonjs/components/Calendar/calendarStyles.js +1 -1
  13. package/lib/commonjs/components/Card/Card.js +1 -1
  14. package/lib/commonjs/components/Carousel/Carousel.js +1 -1
  15. package/lib/commonjs/components/Checkbox/Checkbox.js +1 -1
  16. package/lib/commonjs/components/Chip/Chip.js +1 -1
  17. package/lib/commonjs/components/ChoiceGroup/ChoiceGroup.js +1 -1
  18. package/lib/commonjs/components/Composer/Composer.js +1 -1
  19. package/lib/commonjs/components/DatePicker/DatePicker.js +1 -1
  20. package/lib/commonjs/components/DateRangePicker/DateRangePicker.js +1 -1
  21. package/lib/commonjs/components/Descriptions/Descriptions.js +1 -1
  22. package/lib/commonjs/components/Dialog/Dialog.js +1 -1
  23. package/lib/commonjs/components/EmptyState/EmptyState.js +1 -1
  24. package/lib/commonjs/components/FieldBase/ChoiceText.js +1 -1
  25. package/lib/commonjs/components/FieldBase/FieldBase.js +1 -1
  26. package/lib/commonjs/components/FieldBase/index.js +1 -1
  27. package/lib/commonjs/components/FieldBase/useFloatingLabel.js +1 -1
  28. package/lib/commonjs/components/FilePicker/FilePicker.js +1 -1
  29. package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js +1 -1
  30. package/lib/commonjs/components/ImageGallery/ImageGallery.js +1 -1
  31. package/lib/commonjs/components/InlineSelect/InlineSelect.js +1 -1
  32. package/lib/commonjs/components/Input/Input.js +1 -1
  33. package/lib/commonjs/components/ListItem/ListItem.js +1 -1
  34. package/lib/commonjs/components/Markdown/Markdown.js +1 -1
  35. package/lib/commonjs/components/MessageBubble/MessageBubble.js +1 -1
  36. package/lib/commonjs/components/MessageList/MessageList.js +1 -1
  37. package/lib/commonjs/components/Modal/Modal.js +1 -1
  38. package/lib/commonjs/components/NumberInput/NumberInput.js +1 -1
  39. package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
  40. package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
  41. package/lib/commonjs/components/PaymentResult/PaymentResult.js +1 -1
  42. package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
  43. package/lib/commonjs/components/PickerTrigger/PickerTrigger.js +1 -1
  44. package/lib/commonjs/components/ProfileCompletion/ProfileCompletion.js +1 -1
  45. package/lib/commonjs/components/ProfilePicker/ProfilePicker.js +1 -1
  46. package/lib/commonjs/components/ProgressBar/ProgressBar.js +1 -1
  47. package/lib/commonjs/components/Radio/Radio.js +1 -1
  48. package/lib/commonjs/components/Radio/RadioDot.js +1 -1
  49. package/lib/commonjs/components/Rating/Rating.js +1 -1
  50. package/lib/commonjs/components/ScannerOverlay/ScannerOverlay.js +1 -1
  51. package/lib/commonjs/components/SearchBar/SearchBar.js +1 -1
  52. package/lib/commonjs/components/SegmentedControl/SegmentedControl.js +1 -1
  53. package/lib/commonjs/components/Select/Select.js +1 -1
  54. package/lib/commonjs/components/Skeleton/Skeleton.js +1 -1
  55. package/lib/commonjs/components/Skeleton/SkeletonContent.js +1 -1
  56. package/lib/commonjs/components/SlideToConfirm/SlideToConfirm.js +1 -1
  57. package/lib/commonjs/components/Slider/Slider.js +1 -1
  58. package/lib/commonjs/components/SliderField/SliderField.js +1 -1
  59. package/lib/commonjs/components/Spinner/Spinner.js +1 -1
  60. package/lib/commonjs/components/StatusBadge/StatusBadge.js +1 -1
  61. package/lib/commonjs/components/Stepper/Stepper.js +1 -1
  62. package/lib/commonjs/components/Swipeable/Swipeable.js +1 -1
  63. package/lib/commonjs/components/Switch/Switch.js +1 -1
  64. package/lib/commonjs/components/Tabs/Tabs.js +1 -1
  65. package/lib/commonjs/components/TagInput/TagInput.js +1 -1
  66. package/lib/commonjs/components/TimePicker/TimePicker.js +1 -1
  67. package/lib/commonjs/components/Timeline/Timeline.js +1 -1
  68. package/lib/commonjs/components/Toast/Toast.js +1 -1
  69. package/lib/commonjs/components/Tooltip/Tooltip.js +1 -1
  70. package/lib/commonjs/components/Tour/Tour.js +1 -1
  71. package/lib/commonjs/components/TypingIndicator/TypingIndicator.js +1 -1
  72. package/lib/commonjs/components/WheelPicker/Wheel.js +1 -1
  73. package/lib/commonjs/index.js +1 -1
  74. package/lib/commonjs/network/NetworkStatusBanner.js +1 -1
  75. package/lib/commonjs/theme/componentSizes.js +1 -0
  76. package/lib/commonjs/theme/componentTokens.js +1 -0
  77. package/lib/commonjs/theme/index.js +1 -1
  78. package/lib/commonjs/theme/merge.js +1 -1
  79. package/lib/commonjs/theme/retiredThemeKeys.js +1 -0
  80. package/lib/commonjs/theme/scale.js +1 -0
  81. package/lib/commonjs/theme/tokens.js +1 -1
  82. package/lib/commonjs/utils/index.js +1 -1
  83. package/lib/module/canvasKit/index.js +1 -1
  84. package/lib/module/components/Accordion/Accordion.js +1 -1
  85. package/lib/module/components/AppBar/AppBar.js +1 -1
  86. package/lib/module/components/Avatar/Avatar.js +1 -1
  87. package/lib/module/components/Badge/Badge.js +1 -1
  88. package/lib/module/components/Banner/Banner.js +1 -1
  89. package/lib/module/components/BarChart/BarChart.js +1 -1
  90. package/lib/module/components/BottomNavigation/BottomNavigation.js +1 -1
  91. package/lib/module/components/BottomSheet/BottomSheet.js +1 -1
  92. package/lib/module/components/Box/Box.js +1 -1
  93. package/lib/module/components/Button/Button.js +1 -1
  94. package/lib/module/components/Calendar/calendarStyles.js +1 -1
  95. package/lib/module/components/Card/Card.js +1 -1
  96. package/lib/module/components/Carousel/Carousel.js +1 -1
  97. package/lib/module/components/Checkbox/Checkbox.js +1 -1
  98. package/lib/module/components/Chip/Chip.js +1 -1
  99. package/lib/module/components/ChoiceGroup/ChoiceGroup.js +1 -1
  100. package/lib/module/components/Composer/Composer.js +1 -1
  101. package/lib/module/components/DatePicker/DatePicker.js +1 -1
  102. package/lib/module/components/DateRangePicker/DateRangePicker.js +1 -1
  103. package/lib/module/components/Descriptions/Descriptions.js +1 -1
  104. package/lib/module/components/Dialog/Dialog.js +1 -1
  105. package/lib/module/components/EmptyState/EmptyState.js +1 -1
  106. package/lib/module/components/FieldBase/ChoiceText.js +1 -1
  107. package/lib/module/components/FieldBase/FieldBase.js +1 -1
  108. package/lib/module/components/FieldBase/index.js +1 -1
  109. package/lib/module/components/FieldBase/useFloatingLabel.js +1 -1
  110. package/lib/module/components/FilePicker/FilePicker.js +1 -1
  111. package/lib/module/components/FloatingActionButton/FloatingActionButton.js +1 -1
  112. package/lib/module/components/ImageGallery/ImageGallery.js +1 -1
  113. package/lib/module/components/InlineSelect/InlineSelect.js +1 -1
  114. package/lib/module/components/Input/Input.js +1 -1
  115. package/lib/module/components/ListItem/ListItem.js +1 -1
  116. package/lib/module/components/Markdown/Markdown.js +1 -1
  117. package/lib/module/components/MessageBubble/MessageBubble.js +1 -1
  118. package/lib/module/components/MessageList/MessageList.js +1 -1
  119. package/lib/module/components/Modal/Modal.js +1 -1
  120. package/lib/module/components/NumberInput/NumberInput.js +1 -1
  121. package/lib/module/components/OTPInput/OTPInput.js +1 -1
  122. package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
  123. package/lib/module/components/PaymentResult/PaymentResult.js +1 -1
  124. package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
  125. package/lib/module/components/PickerTrigger/PickerTrigger.js +1 -1
  126. package/lib/module/components/ProfileCompletion/ProfileCompletion.js +1 -1
  127. package/lib/module/components/ProfilePicker/ProfilePicker.js +1 -1
  128. package/lib/module/components/ProgressBar/ProgressBar.js +1 -1
  129. package/lib/module/components/Radio/Radio.js +1 -1
  130. package/lib/module/components/Radio/RadioDot.js +1 -1
  131. package/lib/module/components/Rating/Rating.js +1 -1
  132. package/lib/module/components/ScannerOverlay/ScannerOverlay.js +1 -1
  133. package/lib/module/components/SearchBar/SearchBar.js +1 -1
  134. package/lib/module/components/SegmentedControl/SegmentedControl.js +1 -1
  135. package/lib/module/components/Select/Select.js +1 -1
  136. package/lib/module/components/Skeleton/Skeleton.js +1 -1
  137. package/lib/module/components/Skeleton/SkeletonContent.js +1 -1
  138. package/lib/module/components/SlideToConfirm/SlideToConfirm.js +1 -1
  139. package/lib/module/components/Slider/Slider.js +1 -1
  140. package/lib/module/components/SliderField/SliderField.js +1 -1
  141. package/lib/module/components/Spinner/Spinner.js +1 -1
  142. package/lib/module/components/StatusBadge/StatusBadge.js +1 -1
  143. package/lib/module/components/Stepper/Stepper.js +1 -1
  144. package/lib/module/components/Swipeable/Swipeable.js +1 -1
  145. package/lib/module/components/Switch/Switch.js +1 -1
  146. package/lib/module/components/Tabs/Tabs.js +1 -1
  147. package/lib/module/components/TagInput/TagInput.js +1 -1
  148. package/lib/module/components/TimePicker/TimePicker.js +1 -1
  149. package/lib/module/components/Timeline/Timeline.js +1 -1
  150. package/lib/module/components/Toast/Toast.js +1 -1
  151. package/lib/module/components/Tooltip/Tooltip.js +1 -1
  152. package/lib/module/components/Tour/Tour.js +1 -1
  153. package/lib/module/components/TypingIndicator/TypingIndicator.js +1 -1
  154. package/lib/module/components/WheelPicker/Wheel.js +1 -1
  155. package/lib/module/index.js +1 -1
  156. package/lib/module/network/NetworkStatusBanner.js +1 -1
  157. package/lib/module/theme/componentSizes.js +1 -0
  158. package/lib/module/theme/componentTokens.js +1 -0
  159. package/lib/module/theme/index.js +1 -1
  160. package/lib/module/theme/merge.js +1 -1
  161. package/lib/module/theme/retiredThemeKeys.js +1 -0
  162. package/lib/module/theme/scale.js +1 -0
  163. package/lib/module/theme/tokens.js +1 -1
  164. package/lib/module/utils/index.js +1 -1
  165. package/lib/typescript/commonjs/components/BottomNavigation/BottomNavigation.d.ts +9 -8
  166. package/lib/typescript/commonjs/components/Box/Box.d.ts +18 -20
  167. package/lib/typescript/commonjs/components/Calendar/calendarStyles.d.ts +1 -1
  168. package/lib/typescript/commonjs/components/Card/Card.d.ts +1 -1
  169. package/lib/typescript/commonjs/components/FieldBase/FieldBase.d.ts +2 -8
  170. package/lib/typescript/commonjs/components/FieldBase/index.d.ts +1 -1
  171. package/lib/typescript/commonjs/components/FieldBase/useFloatingLabel.d.ts +3 -2
  172. package/lib/typescript/commonjs/components/InlineSelect/InlineSelect.d.ts +1 -1
  173. package/lib/typescript/commonjs/components/Input/Input.d.ts +1 -1
  174. package/lib/typescript/commonjs/components/PhoneNumberInput/PhoneNumberInput.d.ts +1 -1
  175. package/lib/typescript/commonjs/components/SearchBar/SearchBar.d.ts +1 -1
  176. package/lib/typescript/commonjs/components/SegmentedControl/SegmentedControl.d.ts +1 -15
  177. package/lib/typescript/commonjs/components/Select/Select.d.ts +2 -2
  178. package/lib/typescript/commonjs/components/Skeleton/Skeleton.d.ts +1 -1
  179. package/lib/typescript/commonjs/components/Tabs/Tabs.d.ts +1 -1
  180. package/lib/typescript/commonjs/components/Tour/Tour.d.ts +7 -0
  181. package/lib/typescript/commonjs/index.d.ts +4 -4
  182. package/lib/typescript/commonjs/theme/componentSizes.d.ts +27 -0
  183. package/lib/typescript/commonjs/theme/componentTokens.d.ts +762 -0
  184. package/lib/typescript/commonjs/theme/index.d.ts +4 -1
  185. package/lib/typescript/commonjs/theme/retiredThemeKeys.d.ts +22 -0
  186. package/lib/typescript/commonjs/theme/scale.d.ts +5 -0
  187. package/lib/typescript/commonjs/theme/types.d.ts +6 -790
  188. package/lib/typescript/commonjs/utils/index.d.ts +0 -2
  189. package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts +9 -8
  190. package/lib/typescript/module/components/Box/Box.d.ts +18 -20
  191. package/lib/typescript/module/components/Calendar/calendarStyles.d.ts +1 -1
  192. package/lib/typescript/module/components/Card/Card.d.ts +1 -1
  193. package/lib/typescript/module/components/FieldBase/FieldBase.d.ts +2 -8
  194. package/lib/typescript/module/components/FieldBase/index.d.ts +1 -1
  195. package/lib/typescript/module/components/FieldBase/useFloatingLabel.d.ts +3 -2
  196. package/lib/typescript/module/components/InlineSelect/InlineSelect.d.ts +1 -1
  197. package/lib/typescript/module/components/Input/Input.d.ts +1 -1
  198. package/lib/typescript/module/components/PhoneNumberInput/PhoneNumberInput.d.ts +1 -1
  199. package/lib/typescript/module/components/SearchBar/SearchBar.d.ts +1 -1
  200. package/lib/typescript/module/components/SegmentedControl/SegmentedControl.d.ts +1 -15
  201. package/lib/typescript/module/components/Select/Select.d.ts +2 -2
  202. package/lib/typescript/module/components/Skeleton/Skeleton.d.ts +1 -1
  203. package/lib/typescript/module/components/Tabs/Tabs.d.ts +1 -1
  204. package/lib/typescript/module/components/Tour/Tour.d.ts +7 -0
  205. package/lib/typescript/module/index.d.ts +4 -4
  206. package/lib/typescript/module/theme/componentSizes.d.ts +27 -0
  207. package/lib/typescript/module/theme/componentTokens.d.ts +762 -0
  208. package/lib/typescript/module/theme/index.d.ts +4 -1
  209. package/lib/typescript/module/theme/retiredThemeKeys.d.ts +22 -0
  210. package/lib/typescript/module/theme/scale.d.ts +5 -0
  211. package/lib/typescript/module/theme/types.d.ts +6 -790
  212. package/lib/typescript/module/utils/index.d.ts +0 -2
  213. package/package.json +12 -2
  214. package/lib/commonjs/utils/spacing.js +0 -1
  215. package/lib/module/utils/spacing.js +0 -1
  216. package/lib/typescript/commonjs/utils/spacing.d.ts +0 -61
  217. package/lib/typescript/module/utils/spacing.d.ts +0 -61
@@ -1 +1 @@
1
- "use strict";import{Image}from"expo-image";import{Children,cloneElement,forwardRef,isValidElement,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,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{AppIcon}from"../AppIcon/index.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SOFT_FILL_OPACITY=.14,MIN_TOUCH_TARGET=44,PRESSED_OPACITY=.7,INITIALS_MAX_FONT_SCALE=1.2;export const avatarToneColors=(e,t)=>{const soft=(e,t)=>tintOf(e,.14,t);switch(t){case"primary":return{background:soft(e.colors.primary,e.colors.primaryMuted),color:e.colors.toneText.primary};case"secondary":return{background:e.colors.secondary,color:e.colors.onSecondary};case"success":return{background:soft(e.colors.success,e.colors.background.secondary),color:e.colors.toneText.success};case"warning":return{background:soft(e.colors.warning,e.colors.background.secondary),color:e.colors.toneText.warning};case"error":return{background:soft(e.colors.error,e.colors.background.secondary),color:e.colors.toneText.error};case"info":return{background:soft(e.colors.info,e.colors.background.secondary),color:e.colors.toneText.info};default:return{background:e.colors.background.tertiary,color:e.colors.text.primary}}};const sizeMap={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=e=>"number"==typeof e?e:sizeMap[e],resolveRadius=(e,t)=>{switch(e){case"circle":return t/2;case"rounded":return Math.max(6,Math.round(.22*t));default:return 0}},initialsFromName=e=>{if(!e)return"";const t=e.trim().split(/\s+/u).filter(Boolean);return 0===t.length?"":1===t.length?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()},hashColor=(e,t)=>{if(!e)return t[0];let r=0;for(let t=0;t<e.length;t+=1)r=(r<<5)-r+e.charCodeAt(t),r|=0;return t[Math.abs(r)%t.length]},RING_WIDTH=1.5,isRingStatus=e=>"verified"===e||"pending"===e,statusColor=(e,t)=>{switch(t){case"online":case"verified":return e.colors.success;case"busy":return e.colors.error;case"away":case"pending":return e.colors.warning;default:return e.colors.text.tertiary}},Avatar=forwardRef((e,t)=>{const{source:r,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:l="bottomRight",tone:c,backgroundColor:d,color:u,fontSize:h,loading:m=!1,accessibilityLabel:g,onPress:p,onLongPress:b,haptic:y,hitSlop:f,style:v,textStyle:x,testID:C}=e,S=useTheme(),A=S.components.avatar,[R,I]=useState(!1),_=useMemo(()=>resolveSize(a),[a]),j=useMemo(()=>resolveRadius(i,_),[i,_]),w=A?.borderWidth??0,M=A?.borderColor??S.colors.border.primary,k=A?.statusBorderWidth??2,T=A?.statusBorderColor??S.colors.background.elevated,E=useMemo(()=>initialsFromName(s),[s]),W=useMemo(()=>c?avatarToneColors(S,c):null,[S,c]),z=useMemo(()=>d||(W?.background??hashColor(s??"",S.colors.avatarPalette)),[d,W,s,S.colors.avatarPalette]),G=u??W?.color??S.colors.onPrimary,L=!!r&&!R,F=A?.fontSizeRatio??.4,P=h??A?.fontSize??Math.max(10,Math.round(_*F)),V=Math.max(8,Math.round(.25*_)),N=isRingStatus(n),D=A?.ringWidth??1.5,O=_-2*(N?D+(A?.ringGap??D):0),$=N?resolveRadius(i,O):j,H=N?statusColor(S,n):"transparent",B=Math.max(12,Math.round(.32*_)),U=Math.max(10,B-4),Y=L?S.colors.background.tertiary:z,X=C??"avatar",q=s?`${s}'s avatar`:"Avatar",J="verified"===n?", verified":"pending"===n?", pending verification":"",K=g??`${q}${J}`,Q="function"==typeof p||"function"==typeof b,Z=g??`${s||q}${J}`,ee=Math.max(0,Math.ceil((44-_)/2)),te=[styles.root,{width:_,height:_,borderRadius:j,...smoothCorners,borderWidth:N?0:w,borderColor:M,backgroundColor:N?"transparent":Y},v],re=_jsxs(_Fragment,{children:[N?_jsx(View,{style:[styles.ring,{borderRadius:j,...smoothCorners,borderWidth:D,borderColor:H}],accessible:!1,pointerEvents:"none",testID:`${X}-ring`}):null,_jsx(View,{style:[styles.picture,{width:O,height:O,borderRadius:$,...smoothCorners,borderWidth:N?w:0,borderColor:M,backgroundColor:N?Y:"transparent"}],children:L?(()=>{const e={width:O,height:O,borderRadius:$,...smoothCorners},onError=()=>I(!0);return o?_jsx(o,{source:r,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(Image,{source:r,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():_jsx(Text,{style:[styles.initials,{color:G,fontSize:P,fontWeight:S.typography.fontWeight[A?.fontWeight??"semibold"]},x],numberOfLines:1,maxFontSizeMultiplier:1.2,children:E??" "})}),"verified"===n?_jsx(View,{style:[styles.status,"topRight"===l?styles.badgeTopRight:styles.badgeBottomRight,{width:B,height:B,borderRadius:B/2,...smoothCorners,backgroundColor:T}],accessible:!1,pointerEvents:"none",testID:`${X}-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:U,color:H})}):null,n&&!N?_jsx(View,{style:[styles.status,"topRight"===l?styles.statusTopRight:styles.statusBottomRight,{width:V,height:V,borderRadius:V/2,...smoothCorners,backgroundColor:statusColor(S,n),borderWidth:k,borderColor:T}],accessible:!1,pointerEvents:"none"}):null]}),oe=Q?_jsx(Pressable,{ref:t,onPress:p?e=>{const t=resolveHaptic(y,"selection");t&&triggerHaptic(t),p?.(e)}:void 0,onLongPress:b?e=>{const t=resolveHaptic(y,"longPress");t&&triggerHaptic(t),b?.(e)}:void 0,hitSlop:f??ee,accessibilityRole:"button",accessibilityLabel:Z,testID:C,style:({pressed:e})=>[te,e?styles.pressed:null],children:re}):_jsx(View,{ref:t,style:te,accessible:!0,accessibilityRole:"image",accessibilityLabel:K,testID:C,children:re});return m?_jsx(AvatarSkeleton,{...e}):oe});Avatar.displayName="Avatar";const AvatarSkeleton=({size:e="md",shape:t="circle",style:r})=>{const o=resolveSize(e);return _jsx(Skeleton,{shape:"circle"===t?"circle":"rounded"===t?"rounded":"rect",width:o,height:o,style:r})};AvatarSkeleton.displayName="AvatarSkeleton",Avatar.Skeleton=AvatarSkeleton;const styles=StyleSheet.create({root:{alignItems:"center",justifyContent:"center",overflow:"visible",position:"relative"},pressed:{opacity:.7},initials:{textAlign:"center"},ring:{position:"absolute",top:0,right:0,bottom:0,left:0},picture:{alignItems:"center",justifyContent:"center",overflow:"hidden"},status:{position:"absolute"},badgeTopRight:{top:-2,right:-2,alignItems:"center",justifyContent:"center"},badgeBottomRight:{bottom:-2,right:-2,alignItems:"center",justifyContent:"center"},statusTopRight:{top:0,right:0},statusBottomRight:{bottom:0,right:0}}),SPACING_OFFSET={tight:-16,normal:-12,loose:-8},STAGGER_MS=50,ENTRANCE_DURATION_MS=220,AvatarGroupItem=({delay:e,marginLeft:t,borderColor:r,borderWidth:o,children:s})=>{const a=useRef(createAnimatedValue(0)).current;return useEffect(()=>{const t=Animated.timing(a,{toValue:1,duration:220,delay:e,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return t.start(),()=>t.stop()},[e,a]),_jsx(Animated.View,{style:[groupStyles.item,{marginLeft:t,borderColor:r,borderWidth:o,opacity:a}],children:s})},AvatarGroup=e=>{const{children:t,max:r=4,size:o="md",spacing:s="normal",overflowVariant:a="count",accessibilityLabel:i,style:n,testID:l}=e,c=useTheme(),d=useMemo(()=>Children.toArray(t).filter(e=>isValidElement(e)),[t]),u=d.length,h=d.slice(0,r),m=Math.max(0,u-r),g=m>0,p=SPACING_OFFSET[s],b=c.colors.background.elevated,y=i??`Group of ${u} ${1===u?"person":"people"}`,f=useMemo(()=>resolveSize(o),[o]),v=Math.max(10,Math.round(.34*f));return _jsxs(View,{style:[groupStyles.row,n],accessible:!0,accessibilityLabel:y,accessibilityRole:"summary",testID:l,children:[h.map((e,t)=>{const r=e.key??`avatar-${t}`;return _jsx(AvatarGroupItem,{delay:50*t,marginLeft:0===t?0:p,borderColor:b,borderWidth:1.5,children:cloneElement(e,{size:o})},r)}),g?_jsx(AvatarGroupItem,{delay:50*h.length,marginLeft:0===h.length?0:p,borderColor:b,borderWidth:1.5,children:_jsx(View,{style:[groupStyles.overflow,{width:f,height:f,borderRadius:f/2,...smoothCorners,backgroundColor:c.colors.surface.disabled}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===a?`${m} more`:"More avatars",children:_jsx(Text,{style:{color:c.colors.text.secondary,fontSize:v,fontWeight:c.typography.fontWeight.semibold},numberOfLines:1,maxFontSizeMultiplier:1.2,children:"count"===a?`+${m}`:"+"})})},"avatar-overflow"):null]})},groupStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},item:{borderRadius:9999,...smoothCorners},overflow:{alignItems:"center",justifyContent:"center"}}),AvatarWithGroup=Avatar;AvatarWithGroup.Group=AvatarGroup;export{Avatar,AvatarGroup};export default AvatarWithGroup;
1
+ "use strict";import{Image}from"expo-image";import{Children,cloneElement,forwardRef,isValidElement,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,fontSizeOf,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{AppIcon}from"../AppIcon/index.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SOFT_FILL_OPACITY=.14,MIN_TOUCH_TARGET=44,PRESSED_OPACITY=.7,INITIALS_MAX_FONT_SCALE=1.2;export const avatarToneColors=(e,t)=>{const soft=(e,t)=>tintOf(e,.14,t);switch(t){case"primary":return{background:soft(e.colors.primary,e.colors.primaryMuted),color:e.colors.toneText.primary};case"secondary":return{background:e.colors.secondary,color:e.colors.onSecondary};case"success":return{background:soft(e.colors.success,e.colors.background.secondary),color:e.colors.toneText.success};case"warning":return{background:soft(e.colors.warning,e.colors.background.secondary),color:e.colors.toneText.warning};case"error":return{background:soft(e.colors.error,e.colors.background.secondary),color:e.colors.toneText.error};case"info":return{background:soft(e.colors.info,e.colors.background.secondary),color:e.colors.toneText.info};default:return{background:e.colors.background.tertiary,color:e.colors.text.primary}}};const sizeMap={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=e=>"number"==typeof e?e:sizeMap[e],resolveRadius=(e,t,r)=>{switch(t){case"circle":return r/2;case"rounded":return Math.max(e.radius.sm,Math.round(.22*r));default:return 0}},initialsFromName=e=>{if(!e)return"";const t=e.trim().split(/\s+/u).filter(Boolean);return 0===t.length?"":1===t.length?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()},hashColor=(e,t)=>{if(!e)return t[0];let r=0;for(let t=0;t<e.length;t+=1)r=(r<<5)-r+e.charCodeAt(t),r|=0;return t[Math.abs(r)%t.length]},RING_WIDTH=1.5,isRingStatus=e=>"verified"===e||"pending"===e,statusColor=(e,t)=>{switch(t){case"online":case"verified":return e.colors.success;case"busy":return e.colors.error;case"away":case"pending":return e.colors.warning;default:return e.colors.text.tertiary}},Avatar=forwardRef((e,t)=>{const{source:r,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:l="bottomRight",tone:c,backgroundColor:d,color:u,fontSize:h,loading:m=!1,accessibilityLabel:g,onPress:p,onLongPress:b,haptic:y,hitSlop:f,style:v,textStyle:x,testID:S}=e,C=useTheme(),A=C.components.avatar,[R,I]=useState(!1),_=useMemo(()=>resolveSize(a),[a]),j=useMemo(()=>resolveRadius(C,i,_),[C,i,_]),w=A?.borderWidth??0,M=A?.borderColor??C.colors.border.primary,k=A?.statusBorderWidth??2,T=A?.statusBorderColor??C.colors.background.elevated,E=useMemo(()=>initialsFromName(s),[s]),z=useMemo(()=>c?avatarToneColors(C,c):null,[C,c]),W=useMemo(()=>d||(z?.background??hashColor(s??"",C.colors.avatarPalette)),[d,z,s,C.colors.avatarPalette]),G=u??z?.color??C.colors.onPrimary,L=!!r&&!R,F=A?.fontSizeRatio??.4,P=h??(void 0!==A?.text?fontSizeOf(C,A.text,"components.avatar.text"):Math.max(C.typography.fontSize.xs,Math.round(_*F))),V=Math.max(8,Math.round(.25*_)),N=isRingStatus(n),O=A?.ringWidth??1.5,D=_-2*(N?O+(A?.ringGap??O):0),$=N?resolveRadius(C,i,D):j,H=N?statusColor(C,n):"transparent",B=Math.max(12,Math.round(.32*_)),U=Math.max(10,B-4),Y=L?C.colors.background.tertiary:W,X=S??"avatar",q=s?`${s}'s avatar`:"Avatar",J="verified"===n?", verified":"pending"===n?", pending verification":"",K=g??`${q}${J}`,Q="function"==typeof p||"function"==typeof b,Z=g??`${s||q}${J}`,ee=Math.max(0,Math.ceil((44-_)/2)),te=[styles.root,{width:_,height:_,borderRadius:j,...smoothCorners,borderWidth:N?0:w,borderColor:M,backgroundColor:N?"transparent":Y},v],re=_jsxs(_Fragment,{children:[N?_jsx(View,{style:[styles.ring,{borderRadius:j,...smoothCorners,borderWidth:O,borderColor:H}],accessible:!1,pointerEvents:"none",testID:`${X}-ring`}):null,_jsx(View,{style:[styles.picture,{width:D,height:D,borderRadius:$,...smoothCorners,borderWidth:N?w:0,borderColor:M,backgroundColor:N?Y:"transparent"}],children:L?(()=>{const e={width:D,height:D,borderRadius:$,...smoothCorners},onError=()=>I(!0);return o?_jsx(o,{source:r,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(Image,{source:r,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():_jsx(Text,{style:[styles.initials,{color:G,fontSize:P,fontWeight:C.typography.fontWeight[A?.fontWeight??"semibold"]},x],numberOfLines:1,maxFontSizeMultiplier:1.2,children:E??" "})}),"verified"===n?_jsx(View,{style:[styles.status,"topRight"===l?styles.badgeTopRight:styles.badgeBottomRight,{width:B,height:B,borderRadius:B/2,...smoothCorners,backgroundColor:T}],accessible:!1,pointerEvents:"none",testID:`${X}-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:U,color:H})}):null,n&&!N?_jsx(View,{style:[styles.status,"topRight"===l?styles.statusTopRight:styles.statusBottomRight,{width:V,height:V,borderRadius:V/2,...smoothCorners,backgroundColor:statusColor(C,n),borderWidth:k,borderColor:T}],accessible:!1,pointerEvents:"none"}):null]}),oe=Q?_jsx(Pressable,{ref:t,onPress:p?e=>{const t=resolveHaptic(y,"selection");t&&triggerHaptic(t),p?.(e)}:void 0,onLongPress:b?e=>{const t=resolveHaptic(y,"longPress");t&&triggerHaptic(t),b?.(e)}:void 0,hitSlop:f??ee,accessibilityRole:"button",accessibilityLabel:Z,testID:S,style:({pressed:e})=>[te,e?styles.pressed:null],children:re}):_jsx(View,{ref:t,style:te,accessible:!0,accessibilityRole:"image",accessibilityLabel:K,testID:S,children:re});return m?_jsx(AvatarSkeleton,{...e}):oe});Avatar.displayName="Avatar";const AvatarSkeleton=({size:e="md",shape:t="circle",style:r})=>{const o=resolveSize(e);return _jsx(Skeleton,{shape:"circle"===t?"circle":"rounded"===t?"rounded":"rect",width:o,height:o,style:r})};AvatarSkeleton.displayName="AvatarSkeleton",Avatar.Skeleton=AvatarSkeleton;const styles=StyleSheet.create({root:{alignItems:"center",justifyContent:"center",overflow:"visible",position:"relative"},pressed:{opacity:.7},initials:{textAlign:"center"},ring:{position:"absolute",top:0,right:0,bottom:0,left:0},picture:{alignItems:"center",justifyContent:"center",overflow:"hidden"},status:{position:"absolute"},badgeTopRight:{top:-2,right:-2,alignItems:"center",justifyContent:"center"},badgeBottomRight:{bottom:-2,right:-2,alignItems:"center",justifyContent:"center"},statusTopRight:{top:0,right:0},statusBottomRight:{bottom:0,right:0}}),SPACING_OFFSET={tight:"lg",normal:"md",loose:"sm"},STAGGER_MS=50,ENTRANCE_DURATION_MS=220,AvatarGroupItem=({delay:e,marginLeft:t,borderColor:r,borderWidth:o,children:s})=>{const a=useTheme(),i=useRef(createAnimatedValue(0)).current;return useEffect(()=>{const t=Animated.timing(i,{toValue:1,duration:220,delay:e,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return t.start(),()=>t.stop()},[e,i]),_jsx(Animated.View,{style:[groupStyles.item,{marginLeft:t,borderRadius:a.radius.pill,borderColor:r,borderWidth:o,opacity:i}],children:s})},AvatarGroup=e=>{const{children:t,max:r=4,size:o="md",spacing:s="normal",overflowVariant:a="count",accessibilityLabel:i,style:n,testID:l}=e,c=useTheme(),d=useMemo(()=>Children.toArray(t).filter(e=>isValidElement(e)),[t]),u=d.length,h=d.slice(0,r),m=Math.max(0,u-r),g=m>0,p=-c.spacing[SPACING_OFFSET[s]],b=c.colors.background.elevated,y=i??`Group of ${u} ${1===u?"person":"people"}`,f=useMemo(()=>resolveSize(o),[o]),v=Math.max(c.typography.fontSize.xs,Math.round(.34*f));return _jsxs(View,{style:[groupStyles.row,n],accessible:!0,accessibilityLabel:y,accessibilityRole:"summary",testID:l,children:[h.map((e,t)=>{const r=e.key??`avatar-${t}`;return _jsx(AvatarGroupItem,{delay:50*t,marginLeft:0===t?0:p,borderColor:b,borderWidth:1.5,children:cloneElement(e,{size:o})},r)}),g?_jsx(AvatarGroupItem,{delay:50*h.length,marginLeft:0===h.length?0:p,borderColor:b,borderWidth:1.5,children:_jsx(View,{style:[groupStyles.overflow,{width:f,height:f,borderRadius:f/2,...smoothCorners,backgroundColor:c.colors.surface.disabled}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===a?`${m} more`:"More avatars",children:_jsx(Text,{style:{color:c.colors.text.secondary,fontSize:v,fontWeight:c.typography.fontWeight.semibold},numberOfLines:1,maxFontSizeMultiplier:1.2,children:"count"===a?`+${m}`:"+"})})},"avatar-overflow"):null]})},groupStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},item:{...smoothCorners},overflow:{alignItems:"center",justifyContent:"center"}}),AvatarWithGroup=Avatar;AvatarWithGroup.Group=AvatarGroup;export{Avatar,AvatarGroup};export default AvatarWithGroup;
@@ -1 +1 @@
1
- "use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,t)=>{switch(t){case"primary":return{background:e.colors.primary,text:e.colors.onPrimary};case"success":return{background:e.colors.success,text:e.colors.onSuccess};case"warning":return{background:e.colors.warning,text:e.colors.onWarning};case"info":return{background:e.colors.info,text:e.colors.onInfo};case"neutral":return{background:e.colors.background.tertiary,text:e.colors.text.primary};default:return{background:e.colors.error,text:e.colors.onError}}},sizeMap={sm:{fontSize:10,minWidth:16,height:16,paddingH:5,dot:8},md:{fontSize:11,minWidth:20,height:20,paddingH:6,dot:10}},anchorPosition=(e,t)=>{const o=-t;switch(e){case"topLeft":return{top:o,left:o};case"bottomRight":return{bottom:o,right:o};case"bottomLeft":return{bottom:o,left:o};default:return{top:o,right:o}}},formatValue=(e,t)=>{if(null==e)return null;if("number"==typeof e)return e<=0?null:e>t?`${t}+`:String(e);const o=String(e);return 0===o.length?null:o},Badge=forwardRef((e,t)=>{const{value:o,max:i=99,variant:r="standard",tone:n="error",size:s="sm",invisible:a=!1,loading:d=!1,children:l,anchor:c="topRight",pulse:h=!1,accessibilityLabel:u,style:g,badgeStyle:m,textStyle:f,testID:p}=e,b=useTheme(),x=useMemo(()=>toneFor(b,n),[b,n]),y=b.components.badge?.[s],S={fontSize:y?.fontSize??sizeMap[s].fontSize,minWidth:y?.minWidth??sizeMap[s].minWidth,height:y?.height??sizeMap[s].height,paddingH:y?.paddingHorizontal??sizeMap[s].paddingH,dot:y?.dotSize??sizeMap[s].dot},z=b.components.badge?.borderWidth??1.5,w=b.components.badge?.anchorOffset??4,k="dot"===r?null:formatValue(o,i),j=!a&&("dot"===r||null!==k),v=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!h||!j)return void setNativeValue(v,1);const e=Animated.loop(Animated.sequence([Animated.timing(v,{toValue:1.15,duration:b.motion.duration.slow,easing:Easing.bezier(...b.motion.easing.standard),useNativeDriver:!0}),Animated.timing(v,{toValue:1,duration:b.motion.duration.slow,easing:Easing.bezier(...b.motion.easing.standard),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[h,j,v,b]);const V="dot"===r,W=V?"image":"text",_=u??(V?"Notification indicator":k?`${k} unread`:void 0),B=j?_jsx(Animated.View,{style:[styles.badge,V?{width:S.dot,height:S.dot,borderRadius:S.dot/2,...smoothCorners,paddingHorizontal:0}:{minWidth:S.minWidth,minHeight:S.height,borderRadius:b.radius.full,...smoothCorners,paddingHorizontal:S.paddingH},{backgroundColor:x.background,transform:[{scale:v}]},l?{position:"absolute",borderWidth:z,borderColor:b.colors.background.elevated,...anchorPosition(c,w)}:null,m],accessible:!0,accessibilityRole:W,accessibilityLabel:_,children:V||null===k?null:_jsx(Text,{style:[styles.text,{color:x.text,fontSize:S.fontSize,...fontFor(b,"bold")},f],numberOfLines:1,maxFontSizeMultiplier:b.maxFontSizeMultiplier,children:k??" "})}):null,H=l?_jsxs(View,{ref:t,style:[styles.wrapper,g],testID:p,children:[l,B]}):_jsx(View,{ref:t,style:g,testID:p,children:B});return d?_jsx(BadgeSkeleton,{...e}):H});Badge.displayName="Badge";const BadgeSkeleton=({variant:e="standard",size:t="md",children:o,anchor:i,style:r,badgeStyle:n})=>{const s=sizeMap[t];if("dot"===e)return _jsx(Skeleton,{shape:"circle",width:s.dot,height:s.dot,style:[n,r]});const a=s.height/2;if(void 0!==o){const e="topLeft"===i?{top:-s.height/2,left:-s.height/2}:"bottomRight"===i?{bottom:-s.height/2,right:-s.height/2}:"bottomLeft"===i?{bottom:-s.height/2,left:-s.height/2}:{top:-s.height/2,right:-s.height/2};return _jsxs(View,{style:[styles.wrapper,r],children:[o,_jsx(View,{style:[{position:"absolute"},e],children:_jsx(Skeleton,{width:s.minWidth+s.paddingH,height:s.height,radius:a,style:n})})]})}return _jsx(Skeleton,{width:s.minWidth+s.paddingH,height:s.height,radius:a,style:[n,r]})};BadgeSkeleton.displayName="BadgeSkeleton",Badge.Skeleton=BadgeSkeleton;const styles=StyleSheet.create({wrapper:{position:"relative",alignSelf:"flex-start"},badge:{alignItems:"center",justifyContent:"center",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1}});export{Badge};export default Badge;
1
+ "use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,fontFor,resolveBadgeSize,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,t)=>{switch(t){case"primary":return{background:e.colors.primary,text:e.colors.onPrimary};case"success":return{background:e.colors.success,text:e.colors.onSuccess};case"warning":return{background:e.colors.warning,text:e.colors.onWarning};case"info":return{background:e.colors.info,text:e.colors.onInfo};case"neutral":return{background:e.colors.background.tertiary,text:e.colors.text.primary};default:return{background:e.colors.error,text:e.colors.onError}}},anchorPosition=(e,t)=>{const o=-t;switch(e){case"topLeft":return{top:o,left:o};case"bottomRight":return{bottom:o,right:o};case"bottomLeft":return{bottom:o,left:o};default:return{top:o,right:o}}},formatValue=(e,t)=>{if(null==e)return null;if("number"==typeof e)return e<=0?null:e>t?`${t}+`:String(e);const o=String(e);return 0===o.length?null:o},Badge=forwardRef((e,t)=>{const{value:o,max:r=99,variant:i="standard",tone:n="error",size:s="sm",invisible:a=!1,loading:l=!1,children:d,anchor:c="topRight",pulse:u=!1,accessibilityLabel:g,style:h,badgeStyle:m,textStyle:f,testID:p}=e,b=useTheme(),x=useMemo(()=>toneFor(b,n),[b,n]),y=resolveBadgeSize(b,s),S=b.components.badge?.borderWidth??1.5,w=b.components.badge?.anchorOffset??4,k="dot"===i?null:formatValue(o,r),j=!a&&("dot"===i||null!==k),v=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!u||!j)return void setNativeValue(v,1);const e=Animated.loop(Animated.sequence([Animated.timing(v,{toValue:1.15,duration:b.motion.duration.slow,easing:Easing.bezier(...b.motion.easing.standard),useNativeDriver:!0}),Animated.timing(v,{toValue:1,duration:b.motion.duration.slow,easing:Easing.bezier(...b.motion.easing.standard),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[u,j,v,b]);const z="dot"===i,B=z?"image":"text",V=g??(z?"Notification indicator":k?`${k} unread`:void 0),_=j?_jsx(Animated.View,{style:[styles.badge,z?{width:y.dotSize,height:y.dotSize,borderRadius:y.dotSize/2,...smoothCorners,paddingHorizontal:0}:{minWidth:y.minWidth,minHeight:y.height,borderRadius:b.radius.pill,...smoothCorners,paddingHorizontal:y.paddingX},{backgroundColor:x.background,transform:[{scale:v}]},d?{position:"absolute",borderWidth:S,borderColor:b.colors.background.elevated,...anchorPosition(c,w)}:null,m],accessible:!0,accessibilityRole:B,accessibilityLabel:V,children:z||null===k?null:_jsx(Text,{style:[styles.text,{color:x.text,fontSize:y.text,...fontFor(b,"bold")},f],numberOfLines:1,maxFontSizeMultiplier:b.maxFontSizeMultiplier,children:k??" "})}):null,R=d?_jsxs(View,{ref:t,style:[styles.wrapper,h],testID:p,children:[d,_]}):_jsx(View,{ref:t,style:h,testID:p,children:_});return l?_jsx(BadgeSkeleton,{...e}):R});Badge.displayName="Badge";const BadgeSkeleton=({variant:e="standard",size:t="md",children:o,anchor:r,style:i,badgeStyle:n})=>{const s=useTheme(),a=resolveBadgeSize(s,t);if("dot"===e)return _jsx(Skeleton,{shape:"circle",width:a.dotSize,height:a.dotSize,style:[n,i]});const l=a.height/2;if(void 0!==o){const e="topLeft"===r?{top:-a.height/2,left:-a.height/2}:"bottomRight"===r?{bottom:-a.height/2,right:-a.height/2}:"bottomLeft"===r?{bottom:-a.height/2,left:-a.height/2}:{top:-a.height/2,right:-a.height/2};return _jsxs(View,{style:[styles.wrapper,i],children:[o,_jsx(View,{style:[{position:"absolute"},e],children:_jsx(Skeleton,{width:a.minWidth+a.paddingX,height:a.height,radius:l,style:n})})]})}return _jsx(Skeleton,{width:a.minWidth+a.paddingX,height:a.height,radius:l,style:[n,i]})};BadgeSkeleton.displayName="BadgeSkeleton",Badge.Skeleton=BadgeSkeleton;const styles=StyleSheet.create({wrapper:{position:"relative",alignSelf:"flex-start"},badge:{alignItems:"center",justifyContent:"center",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1}});export{Badge};export default Badge;
@@ -1 +1 @@
1
- "use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Banner=forwardRef((e,n)=>{const{title:t,message:o,variant:r="info",icon:i,actions:s,dismissible:a=!1,onDismiss:l,haptic:c,visible:d=!0,animateMount:p=!0,loading:m=!1,accessibilityRole:u="alert",accessibilityLabel:g,style:h,containerStyle:y,iconCircleStyle:b,tintBarStyle:x,closeButtonStyle:f,actionButtonStyle:S,testID:w}=e,j=useTheme(),B=usePresenceMotion(),k=useMemo(()=>buildStyles(j),[j]),R=useMemo(()=>tintFor(j,r),[j,r]),[C,_]=B.range(-20,0),T=useRef(createAnimatedValue(p&&d?C:0)).current,V=useRef(createAnimatedValue(p&&d?0:d?1:0)).current,[v,z]=useState(d),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!p))return;let e;return d?(z(!0),e=Animated.parallel([Animated.timing(T,{toValue:_,duration:j.motion.duration.normal,useNativeDriver:!0}),Animated.timing(V,{toValue:1,duration:B.duration("normal"),useNativeDriver:!0})]),e.start()):v&&(e=Animated.parallel([Animated.timing(T,{toValue:C,duration:j.motion.duration.fast,useNativeDriver:!0}),Animated.timing(V,{toValue:0,duration:B.duration("fast"),useNativeDriver:!0})]),e.start(()=>{z(!1)})),()=>e?.stop()},[d]),!v)return null;const P=t??" ",W="string"==typeof o?o??" ":"",A="alert"===u?"error"===r?"assertive":"polite":"none",D=_jsxs(Animated.View,{ref:n,accessibilityRole:u,accessibilityLiveRegion:A,accessibilityLabel:g,testID:w,style:[k.container,{backgroundColor:j.colors.background.secondary,borderRadius:j.radius.md,...smoothCorners,padding:j.spacing.md,opacity:V,transform:[{translateY:T}]},h,y],children:[(j.components.banner?.tintBarWidth??0)>0?_jsx(View,{style:[k.tintBar,{backgroundColor:R.bar},x]}):null,_jsxs(View,{style:k.row,children:[!1===i?null:_jsx(View,i?{style:k.iconWrap,children:i}:{style:[k.iconCircle,{backgroundColor:R.bar+"22"},b],children:_jsx(Text,{style:[k.iconGlyph,{color:R.ink}],accessible:!1,children:R.glyph})}),_jsxs(View,{style:k.textBlock,children:[t||m?_jsx(Text,{style:{color:j.colors.text.primary,fontSize:j.typography.fontSize.base,...fontFor(j,"semibold"),lineHeight:20},numberOfLines:2,children:P}):null,"string"==typeof o||m?_jsx(Text,{style:{color:j.colors.text.secondary,fontSize:j.typography.fontSize.sm,...fontFor(j,"normal"),lineHeight:18,marginTop:t?2:0},children:W||" "}):_jsx(View,{style:{marginTop:t?2:0},children:o})]}),a?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:"Dismiss banner",onPress:()=>{const e=resolveHaptic(c,"selection");e&&triggerHaptic(e),l?.()},hitSlop:8,style:({pressed:e})=>[k.closeBtn,{backgroundColor:e?j.colors.surface.pressed:"transparent"},f],children:_jsx(Text,{style:{color:j.colors.text.secondary,fontSize:j.components.banner?.closeGlyphFontSize??18,fontWeight:j.typography.fontWeight.bold,lineHeight:18},accessible:!1,children:"×"})}):null]}),s&&s.length>0?_jsx(View,{style:k.actionsRow,children:s.map((e,n)=>{const t=e.tone??"primary",o=e.variant??"ghost",r="danger"===t?j.colors.error:"neutral"===t?j.colors.text.secondary:R.glyphColor,i="danger"===t?j.colors.toneText.error:"neutral"===t?j.colors.text.secondary:R.ink,s="danger"===t?j.colors.onError:"neutral"===t?j.colors.onNeutral:R.on,a="solid"===o;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,onPress:()=>{const n=resolveHaptic(c,"selection");n&&triggerHaptic(n),e.onPress()},style:({pressed:n})=>[k.actionBtn,"md"===e.size&&k.actionBtnMd,"outline"===o&&{borderWidth:1,borderColor:i},{backgroundColor:a?r:n?j.colors.surface.pressed:"transparent",opacity:a&&n?.85:1},S],children:_jsx(Text,{style:{color:a?s:i,fontSize:j.typography.fontSize.sm,textAlign:"center",...fontFor(j,"semibold")},children:e.label})},`${e.label}-${n}`)})}):null]});return m?_jsx(BannerSkeleton,{...e}):D});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:n,icon:t,containerStyle:o,style:r})=>{const i=useTheme(),s=!1!==t;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:i.colors.background.elevated,borderRadius:i.radius.md,...smoothCorners,padding:i.spacing.md,borderWidth:1,borderColor:i.colors.border.primary},o,r],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[s?_jsx(View,{style:{marginRight:i.spacing.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:i.spacing.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:13,lastLineWidth:"70%"}),n&&n.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:i.spacing.sm},children:n.map((e,n)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:i.spacing.sm}},`sk-banner-action-${n}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,n)=>{switch(n){case"success":return{bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors.toneText.success,on:e.colors.onSuccess,glyph:"✓"};case"warning":return{bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors.toneText.warning,on:e.colors.onWarning,glyph:"⚠"};case"error":return{bar:e.colors.error,glyphColor:e.colors.error,ink:e.colors.toneText.error,on:e.colors.onError,glyph:"✗"};case"neutral":return{bar:e.colors.text.tertiary,glyphColor:e.colors.text.secondary,ink:e.colors.text.secondary,on:e.colors.onNeutral,glyph:"i"};default:return{bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors.toneText.primary,on:e.colors.onPrimary,glyph:"i"}}},buildStyles=e=>{const n=e.components.banner?.iconCircleSize??28,t=e.components.banner?.closeButtonSize??28;return StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.components.banner?.containerPaddingLeft??e.spacing.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:e.components.banner?.tintBarWidth??0},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:e.components.banner?.iconGap??e.spacing.sm},iconCircle:{width:n,height:n,borderRadius:e.components.banner?.iconCircleRadius??n/2,...smoothCorners,alignItems:"center",justifyContent:"center",marginRight:e.components.banner?.iconGap??e.spacing.sm},iconGlyph:{fontSize:e.components.banner?.iconGlyphFontSize??15,fontWeight:"700",lineHeight:e.components.banner?.iconGlyphLineHeight??17},textBlock:{flex:1,paddingRight:e.components.banner?.textBlockPaddingRight??e.spacing.xs},closeBtn:{width:t,height:t,borderRadius:e.components.banner?.closeButtonRadius??t/2,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.components.banner?.closeButtonMarginLeft??e.spacing.xxs??4},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:e.components.banner?.actionsRowMarginTop??e.spacing.xs,columnGap:e.components.banner?.actionsRowGap??e.spacing.xs,rowGap:e.components.banner?.actionsRowGap??e.spacing.xs},actionBtn:{paddingHorizontal:e.components.banner?.actionButtonPaddingHorizontal??e.spacing.sm,paddingVertical:e.components.banner?.actionButtonPaddingVertical??6,borderRadius:e.components.banner?.actionButtonRadius??e.radius.sm,...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.spacing.md}})};export{Banner};export default Banner;
1
+ "use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,fontSizeOf,radiusOf,spaceOf,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Banner=forwardRef((e,t)=>{const{title:o,message:n,variant:r="info",icon:i,actions:s,dismissible:a=!1,onDismiss:l,haptic:c,visible:d=!0,animateMount:p=!0,loading:u=!1,accessibilityRole:m="alert",accessibilityLabel:g,style:h,containerStyle:y,iconCircleStyle:f,tintBarStyle:x,closeButtonStyle:b,actionButtonStyle:S,testID:w}=e,B=useTheme(),j=usePresenceMotion(),k=useMemo(()=>buildStyles(B),[B]),R=useMemo(()=>tintFor(B,r),[B,r]),[C,T]=j.range(-20,0),_=useRef(createAnimatedValue(p&&d?C:0)).current,v=useRef(createAnimatedValue(p&&d?0:d?1:0)).current,[V,z]=useState(d),P=useRef(!0);if(useEffect(()=>{if(P.current&&(P.current=!1,!p))return;let e;return d?(z(!0),e=Animated.parallel([Animated.timing(_,{toValue:T,duration:B.motion.duration.normal,useNativeDriver:!0}),Animated.timing(v,{toValue:1,duration:j.duration("normal"),useNativeDriver:!0})]),e.start()):V&&(e=Animated.parallel([Animated.timing(_,{toValue:C,duration:B.motion.duration.fast,useNativeDriver:!0}),Animated.timing(v,{toValue:0,duration:j.duration("fast"),useNativeDriver:!0})]),e.start(()=>{z(!1)})),()=>e?.stop()},[d]),!V)return null;const O=o??" ",G="string"==typeof n?n??" ":"",H="alert"===m?"error"===r?"assertive":"polite":"none",L=_jsxs(Animated.View,{ref:t,accessibilityRole:m,accessibilityLiveRegion:H,accessibilityLabel:g,testID:w,style:[k.container,{backgroundColor:B.colors.background.secondary,borderRadius:B.radius.md,...smoothCorners,padding:B.spacing.md,opacity:v,transform:[{translateY:_}]},h,y],children:[(B.components.banner?.tintBarWidth??0)>0?_jsx(View,{style:[k.tintBar,{backgroundColor:R.bar},x]}):null,_jsxs(View,{style:k.row,children:[!1===i?null:_jsx(View,i?{style:k.iconWrap,children:i}:{style:[k.iconCircle,{backgroundColor:R.bar+"22"},f],children:_jsx(Text,{style:[k.iconGlyph,{color:R.ink}],accessible:!1,children:R.glyph})}),_jsxs(View,{style:k.textBlock,children:[o||u?_jsx(Text,{style:{color:B.colors.text.primary,fontSize:B.typography.fontSize.base,...fontFor(B,"semibold"),lineHeight:20},numberOfLines:2,children:O}):null,"string"==typeof n||u?_jsx(Text,{style:{color:B.colors.text.secondary,fontSize:B.typography.fontSize.sm,...fontFor(B,"normal"),lineHeight:18,marginTop:o?B.spacing.xxs:0},children:G||" "}):_jsx(View,{style:{marginTop:o?B.spacing.xxs:0},children:n})]}),a?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:"Dismiss banner",onPress:()=>{const e=resolveHaptic(c,"selection");e&&triggerHaptic(e),l?.()},hitSlop:8,style:({pressed:e})=>[k.closeBtn,{backgroundColor:e?B.colors.surface.pressed:"transparent"},b],children:_jsx(Text,{style:{color:B.colors.text.secondary,fontSize:fontSizeOf(B,B.components.banner?.closeGlyphText??"lg","components.banner.closeGlyphText"),fontWeight:B.typography.fontWeight.bold,lineHeight:17},accessible:!1,children:"×"})}):null]}),s&&s.length>0?_jsx(View,{style:k.actionsRow,children:s.map((e,t)=>{const o=e.tone??"primary",n=e.variant??"ghost",r="danger"===o?B.colors.error:"neutral"===o?B.colors.text.secondary:R.glyphColor,i="danger"===o?B.colors.toneText.error:"neutral"===o?B.colors.text.secondary:R.ink,s="danger"===o?B.colors.onError:"neutral"===o?B.colors.onNeutral:R.on,a="solid"===n;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,onPress:()=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress()},style:({pressed:t})=>[k.actionBtn,"md"===e.size&&k.actionBtnMd,"outline"===n&&{borderWidth:1,borderColor:i},{backgroundColor:a?r:t?B.colors.surface.pressed:"transparent",opacity:a&&t?.85:1},S],children:_jsx(Text,{style:{color:a?s:i,fontSize:B.typography.fontSize.sm,textAlign:"center",...fontFor(B,"semibold")},children:e.label})},`${e.label}-${t}`)})}):null]});return u?_jsx(BannerSkeleton,{...e}):L});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:o,containerStyle:n,style:r})=>{const i=useTheme(),s=!1!==o;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:i.colors.background.elevated,borderRadius:i.radius.md,...smoothCorners,padding:i.spacing.md,borderWidth:1,borderColor:i.colors.border.primary},n,r],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[s?_jsx(View,{style:{marginRight:i.spacing.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:i.spacing.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:i.typography.fontSize.sm,lastLineWidth:"70%"}),t&&t.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:i.spacing.sm},children:t.map((e,t)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:i.spacing.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors.toneText.success,on:e.colors.onSuccess,glyph:"✓"};case"warning":return{bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors.toneText.warning,on:e.colors.onWarning,glyph:"⚠"};case"error":return{bar:e.colors.error,glyphColor:e.colors.error,ink:e.colors.toneText.error,on:e.colors.onError,glyph:"✗"};case"neutral":return{bar:e.colors.text.tertiary,glyphColor:e.colors.text.secondary,ink:e.colors.text.secondary,on:e.colors.onNeutral,glyph:"i"};default:return{bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors.toneText.primary,on:e.colors.onPrimary,glyph:"i"}}},buildStyles=e=>{const t=e.components.banner,o=t?.iconCircleSize??28,n=t?.closeButtonSize??28,r=spaceOf(e,t?.iconGap??"sm","components.banner.iconGap");return StyleSheet.create({container:{overflow:"hidden",paddingLeft:spaceOf(e,t?.containerPaddingLeft??"md","components.banner.containerPaddingLeft")},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:t?.tintBarWidth??0},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:r},iconCircle:{width:o,height:o,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginRight:r},iconGlyph:{fontSize:fontSizeOf(e,t?.iconGlyphText??"base","components.banner.iconGlyphText"),fontWeight:"700",lineHeight:t?.iconGlyphLineHeight??17},textBlock:{flex:1,paddingRight:spaceOf(e,t?.textBlockPaddingRight??"xs","components.banner.textBlockPaddingRight")},closeBtn:{width:n,height:n,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:spaceOf(e,t?.closeButtonMarginLeft??"xxs","components.banner.closeButtonMarginLeft")},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:spaceOf(e,t?.actionsRowMarginTop??"xs","components.banner.actionsRowMarginTop"),columnGap:spaceOf(e,t?.actionsRowGap??"xs","components.banner.actionsRowGap"),rowGap:spaceOf(e,t?.actionsRowGap??"xs","components.banner.actionsRowGap")},actionBtn:{paddingHorizontal:spaceOf(e,t?.actionButtonPaddingX??"sm","components.banner.actionButtonPaddingX"),paddingVertical:spaceOf(e,t?.actionButtonPaddingY??"xs","components.banner.actionButtonPaddingY"),borderRadius:radiusOf(e,t?.actionButtonRadius??"sm","components.banner.actionButtonRadius"),...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.spacing.md}})};export{Banner};export default Banner;
@@ -1 +1 @@
1
- "use strict";import{formatCompactNumber,formatNumber}from"@webority/mobile-core";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Text}from"../Text/index.js";import{barScale}from"./scale.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AUTO_VALUES_MAX_BARS=7,MAX_BAR_WIDTH=40,BAR_SHARE=.6,MIN_BAR_HEIGHT=2,VALUE_LABEL_ROOM=20,PLOT_PAD=6,HEADER_MIN_HEIGHT=48,AXIS_LABEL_MIN_WIDTH=44,CHAR_WIDTH=7,FONT_SCALE_CAP=1.2,toneColor=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText[t],safe=e=>Number.isFinite(e)?e:0,defaultFormatValue=e=>formatNumber(e),defaultFormatTick=e=>formatCompactNumber(e),BarChart=forwardRef((e,t)=>{const{data:r,tone:a="primary",color:s,height:i=160,label:l,summary:o,formatValue:n=defaultFormatValue,formatTick:c=defaultFormatTick,showValues:u,selection:m,defaultSelection:h=null,onSelect:d,haptic:x,style:f,testID:b}=e,p=useTheme(),y=r.length,[_,g]=useState(0),[S,j]=useControllableState({value:m,defaultValue:h,onChange:d}),M=null!==S&&S>=0&&S<y?S:null,w=useRef(M);w.current=M;const C=useRef(-1),T=resolveHaptic(x,"tick"),v=useCallback(()=>{T&&triggerHaptic(T)},[T]),R=u??(y>0&&y<=7),V=useMemo(()=>r.map(e=>safe(e.value)),[r]),A=useMemo(()=>barScale(V),[V]),L=R?20:6,I=R&&A.min<0?20:6,k=Math.max(1,i-L-I),D=useCallback(e=>L+(A.max-e)/(A.max-A.min)*k,[L,A.max,A.min,k]),H=D(0),B=useMemo(()=>A.ticks.map(e=>c(e)),[A.ticks,c]),E=Math.ceil(7*Math.max(...B.map(e=>e.length),1)*1.2),O=y>0?_/y:0,F=Math.max(1,Math.ceil(44/Math.max(1,O||44))),N=useCallback(e=>{const t=r[e];return t.accessibilityLabel??`${t.label}, ${n(V[e])}`},[r,n,V]),$=useMemo(()=>{let e=-1;return V.forEach((t,r)=>{(-1===e||t>V[e])&&(e=r)}),e},[V]),G=o??($>=0?`Highest: ${r[$].label}, ${n(V[$])}`:""),W=useRef({fire:v,setSelected:j,count:y,plotWidth:_});W.current={fire:v,setSelected:j,count:y,plotWidth:_};const P=useMemo(()=>{const indexAt=e=>{const{count:t,plotWidth:r}=W.current;return 0===t||r<=0||!Number.isFinite(e)?-1:Math.min(t-1,Math.max(0,Math.floor(e/r*t)))},scrubTo=e=>{const t=indexAt(e);t<0||t===C.current||(C.current=t,W.current.fire(),W.current.setSelected(t))},e=Gesture.Pan().runOnJS(!0).activeOffsetX([-8,8]).failOffsetY([-12,12]).onStart(e=>{C.current=w.current??-1,scrubTo(e.x)}).onUpdate(e=>scrubTo(e.x)).withTestId(b?`${b}-pan`:"bar-chart-pan"),t=Gesture.Tap().runOnJS(!0).onEnd((e,t)=>{if(!t)return;const r=indexAt(e.x);r<0||(W.current.fire(),C.current=r,W.current.setSelected(r===w.current?null:r))}).withTestId(b?`${b}-tap`:"bar-chart-tap");return Gesture.Race(e,t)},[b]),U=useCallback(e=>{if(0===y)return;const t=w.current,r="increment"===e.nativeEvent.actionName?null===t?0:Math.min(y-1,t+1):null===t?y-1:Math.max(0,t-1);r!==t&&(v(),j(r))},[y,v,j]),X=useCallback(e=>{const t=Math.round(e.nativeEvent.layout.width);g(e=>e===t?e:t)},[]),z=s??toneColor(p,a),J=p.radius.xs,Y=l??"Bar chart",q=0===y?`${Y}, no data`:G?`${Y}, ${G}`:Y,K=null===M?G:N(M),Q=V.map((e,t)=>{const r=Math.min(40,Math.max(4,.6*O)),a=D(e),s=e>=0?a:H,l=0===e?0:Math.max(2,Math.abs(a-H)),o=null!==M&&M!==t;return _jsxs(View,{style:[styles.slot,{height:i}],children:[_>0&&l>0?_jsx(View,{testID:b?`${b}-bar-${t}`:void 0,style:{position:"absolute",left:(O-r)/2,top:s,width:r,height:l,backgroundColor:z,opacity:o?.4:1,...smoothCorners,...e>=0?{borderTopLeftRadius:J,borderTopRightRadius:J}:{borderBottomLeftRadius:J,borderBottomRightRadius:J}}}):null,R&&_>0?_jsx(Text,{variant:"caption",color:"secondary",align:"center",numberOfLines:1,maxFontSizeMultiplier:1.2,style:{position:"absolute",left:0,right:0,top:e>=0?a-20+2:a+2},children:c(e)}):null]},t)});return 0===y?_jsx(View,{ref:t,accessible:!0,accessibilityRole:"image",accessibilityLabel:q,testID:b,style:[styles.root,f],children:_jsx(Text,{variant:"bodySmall",color:"secondary",children:"No data"})}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:q,accessibilityValue:{min:0,max:y-1,now:M??0,text:K},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:U,testID:b,style:[styles.root,f],children:[_jsx(View,{style:[styles.header,{minHeight:48,marginBottom:p.spacing.sm}],children:null===M?G?_jsx(Text,{variant:"bodySmall",color:"secondary",children:G}):null:_jsxs(_Fragment,{children:[_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:1,children:r[M].label}),_jsx(Text,{variant:"h3",numberOfLines:1,testID:b?`${b}-callout`:void 0,children:n(V[M])})]})}),_jsxs(View,{style:styles.body,children:[_jsx(View,{style:{width:E,height:i},children:A.ticks.map((e,t)=>_jsx(Text,{variant:"caption",color:"tertiary",align:"right",numberOfLines:1,maxFontSizeMultiplier:1.2,style:{position:"absolute",right:p.spacing.xs,left:0,top:D(e)-8},children:B[t]},e))}),_jsxs(View,{style:styles.plotColumn,children:[_jsx(GestureDetector,{gesture:P,children:_jsxs(View,{style:{height:i},onLayout:X,testID:b?`${b}-plot`:void 0,children:[A.ticks.map(e=>_jsx(View,{pointerEvents:"none",style:{position:"absolute",left:0,right:0,top:D(e)-(0===e?.75:StyleSheet.hairlineWidth),height:0===e?1.5:2*StyleSheet.hairlineWidth,backgroundColor:0===e?p.colors.text.tertiary:p.colors.border.secondary}},e)),_jsx(View,{style:[styles.slots,{height:i}],children:Q})]})}),_jsx(View,{style:styles.axis,children:r.map((e,t)=>_jsx(View,{style:styles.axisSlot,children:t%F===0?_jsx(Text,{variant:"caption",color:M===t?"primary":"tertiary",weight:M===t?"semibold":void 0,align:"center",numberOfLines:1,maxFontSizeMultiplier:1.2,style:O>0?{width:O*F}:void 0,children:e.axisLabel??e.label}):null},t))})]})]})]})});BarChart.displayName="BarChart";const styles=StyleSheet.create({root:{alignSelf:"stretch"},header:{justifyContent:"center"},body:{flexDirection:"row"},plotColumn:{flex:1},slots:{flexDirection:"row"},slot:{flex:1},axis:{flexDirection:"row"},axisSlot:{flex:1,alignItems:"center",overflow:"visible"}});export{BarChart};export default BarChart;
1
+ "use strict";import{formatCompactNumber,formatNumber}from"@webority/mobile-core";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Text}from"../Text/index.js";import{barScale}from"./scale.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AUTO_VALUES_MAX_BARS=7,MAX_BAR_WIDTH=40,BAR_SHARE=.6,MIN_BAR_HEIGHT=2,VALUE_LABEL_ROOM=20,PLOT_PAD=6,HEADER_MIN_HEIGHT=48,AXIS_LABEL_MIN_WIDTH=44,CHAR_WIDTH=7,FONT_SCALE_CAP=1.2,toneColor=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText[t],safe=e=>Number.isFinite(e)?e:0,defaultFormatValue=e=>formatNumber(e),defaultFormatTick=e=>formatCompactNumber(e),BarChart=forwardRef((e,t)=>{const{data:r,tone:a="primary",color:s,height:i=160,label:l,summary:o,formatValue:n=defaultFormatValue,formatTick:c=defaultFormatTick,showValues:u,selection:m,defaultSelection:h=null,onSelect:d,haptic:x,style:f,testID:b}=e,p=useTheme(),y=r.length,[_,g]=useState(0),[S,j]=useControllableState({value:m,defaultValue:h,onChange:d}),M=null!==S&&S>=0&&S<y?S:null,w=useRef(M);w.current=M;const C=useRef(-1),T=resolveHaptic(x,"tick"),v=useCallback(()=>{T&&triggerHaptic(T)},[T]),R=u??(y>0&&y<=7),V=useMemo(()=>r.map(e=>safe(e.value)),[r]),A=useMemo(()=>barScale(V),[V]),L=R?20:6,I=R&&A.min<0?20:6,k=Math.max(1,i-L-I),D=useCallback(e=>L+(A.max-e)/(A.max-A.min)*k,[L,A.max,A.min,k]),H=D(0),B=useMemo(()=>A.ticks.map(e=>c(e)),[A.ticks,c]),E=Math.ceil(7*Math.max(...B.map(e=>e.length),1)*1.2),O=y>0?_/y:0,F=Math.max(1,Math.ceil(44/Math.max(1,O||44))),N=useCallback(e=>{const t=r[e];return t.accessibilityLabel??`${t.label}, ${n(V[e])}`},[r,n,V]),$=useMemo(()=>{let e=-1;return V.forEach((t,r)=>{(-1===e||t>V[e])&&(e=r)}),e},[V]),G=o??($>=0?`Highest: ${r[$].label}, ${n(V[$])}`:""),W=useRef({fire:v,setSelected:j,count:y,plotWidth:_});W.current={fire:v,setSelected:j,count:y,plotWidth:_};const P=useMemo(()=>{const indexAt=e=>{const{count:t,plotWidth:r}=W.current;return 0===t||r<=0||!Number.isFinite(e)?-1:Math.min(t-1,Math.max(0,Math.floor(e/r*t)))},scrubTo=e=>{const t=indexAt(e);t<0||t===C.current||(C.current=t,W.current.fire(),W.current.setSelected(t))},e=Gesture.Pan().runOnJS(!0).activeOffsetX([-8,8]).failOffsetY([-12,12]).onStart(e=>{C.current=w.current??-1,scrubTo(e.x)}).onUpdate(e=>scrubTo(e.x)).withTestId(b?`${b}-pan`:"bar-chart-pan"),t=Gesture.Tap().runOnJS(!0).onEnd((e,t)=>{if(!t)return;const r=indexAt(e.x);r<0||(W.current.fire(),C.current=r,W.current.setSelected(r===w.current?null:r))}).withTestId(b?`${b}-tap`:"bar-chart-tap");return Gesture.Race(e,t)},[b]),U=useCallback(e=>{if(0===y)return;const t=w.current,r="increment"===e.nativeEvent.actionName?null===t?0:Math.min(y-1,t+1):null===t?y-1:Math.max(0,t-1);r!==t&&(v(),j(r))},[y,v,j]),X=useCallback(e=>{const t=Math.round(e.nativeEvent.layout.width);g(e=>e===t?e:t)},[]),z=s??toneColor(p,a),J=p.radius.sm,Y=l??"Bar chart",q=0===y?`${Y}, no data`:G?`${Y}, ${G}`:Y,K=null===M?G:N(M),Q=V.map((e,t)=>{const r=Math.min(40,Math.max(4,.6*O)),a=D(e),s=e>=0?a:H,l=0===e?0:Math.max(2,Math.abs(a-H)),o=null!==M&&M!==t;return _jsxs(View,{style:[styles.slot,{height:i}],children:[_>0&&l>0?_jsx(View,{testID:b?`${b}-bar-${t}`:void 0,style:{position:"absolute",left:(O-r)/2,top:s,width:r,height:l,backgroundColor:z,opacity:o?.4:1,...smoothCorners,...e>=0?{borderTopLeftRadius:J,borderTopRightRadius:J}:{borderBottomLeftRadius:J,borderBottomRightRadius:J}}}):null,R&&_>0?_jsx(Text,{variant:"caption",color:"secondary",align:"center",numberOfLines:1,maxFontSizeMultiplier:1.2,style:{position:"absolute",left:0,right:0,top:e>=0?a-20+2:a+2},children:c(e)}):null]},t)});return 0===y?_jsx(View,{ref:t,accessible:!0,accessibilityRole:"image",accessibilityLabel:q,testID:b,style:[styles.root,f],children:_jsx(Text,{variant:"bodySmall",color:"secondary",children:"No data"})}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:q,accessibilityValue:{min:0,max:y-1,now:M??0,text:K},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:U,testID:b,style:[styles.root,f],children:[_jsx(View,{style:[styles.header,{minHeight:48,marginBottom:p.spacing.sm}],children:null===M?G?_jsx(Text,{variant:"bodySmall",color:"secondary",children:G}):null:_jsxs(_Fragment,{children:[_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:1,children:r[M].label}),_jsx(Text,{variant:"h3",numberOfLines:1,testID:b?`${b}-callout`:void 0,children:n(V[M])})]})}),_jsxs(View,{style:styles.body,children:[_jsx(View,{style:{width:E,height:i},children:A.ticks.map((e,t)=>_jsx(Text,{variant:"caption",color:"tertiary",align:"right",numberOfLines:1,maxFontSizeMultiplier:1.2,style:{position:"absolute",right:p.spacing.xs,left:0,top:D(e)-8},children:B[t]},e))}),_jsxs(View,{style:styles.plotColumn,children:[_jsx(GestureDetector,{gesture:P,children:_jsxs(View,{style:{height:i},onLayout:X,testID:b?`${b}-plot`:void 0,children:[A.ticks.map(e=>_jsx(View,{pointerEvents:"none",style:{position:"absolute",left:0,right:0,top:D(e)-(0===e?.75:StyleSheet.hairlineWidth),height:0===e?1.5:2*StyleSheet.hairlineWidth,backgroundColor:0===e?p.colors.text.tertiary:p.colors.border.secondary}},e)),_jsx(View,{style:[styles.slots,{height:i}],children:Q})]})}),_jsx(View,{style:styles.axis,children:r.map((e,t)=>_jsx(View,{style:styles.axisSlot,children:t%F===0?_jsx(Text,{variant:"caption",color:M===t?"primary":"tertiary",weight:M===t?"semibold":void 0,align:"center",numberOfLines:1,maxFontSizeMultiplier:1.2,style:O>0?{width:O*F}:void 0,children:e.axisLabel??e.label}):null},t))})]})]})]})});BarChart.displayName="BarChart";const styles=StyleSheet.create({root:{alignSelf:"stretch"},header:{justifyContent:"center"},body:{flexDirection:"row"},plotColumn:{flex:1},slots:{flexDirection:"row"},slot:{flex:1},axis:{flexDirection:"row"},axisSlot:{flex:1,alignItems:"center",overflow:"visible"}});export{BarChart};export default BarChart;
@@ -1 +1 @@
1
- "use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_PILL_INSET=16,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_FLOATING_MARGIN=16,DEFAULT_FLOATING_RADIUS=28,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",TAB_PADDING_VERTICAL=6,BAR_PADDING_HORIZONTAL=4,BAR_PADDING_TOP=6,BAR_PADDING_TOP_BUBBLE=8,FLOATING_BAR_PADDING_VERTICAL=6,FLOATING_BAR_PADDING_HORIZONTAL=8,EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,TILE_LABEL_GAP=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:r,haptic:a="selection",showLabels:l=!0,variant:s="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:h,iconSize:m,marginHorizontal:p,marginVertical:g,paddingHorizontal:b,paddingVertical:y,border:f,minimizeOnScroll:x=!1,scrollDirection:_="idle",accessory:A,style:I,indicatorStyle:R,labelStyle:S,labelMaxFontScale:E,testID:w}=e,L=useTheme(),T=useSafeAreaInsets(),D=useMemo(()=>buildStyles(L),[L]),v=L.components.bottomNavigation,C=m??v?.iconSize??18,j=v?.pillHeight??C+4+8,B=v?.pillMaxWidth??64,N=v?.pillInset??16,V=v?.floatingMargin??16,P=v?.floatingRadius??28,M=v?.bubbleSize??48,k=v?.bubbleLift??14,F=useReducedMotion(),H=useScreenReaderEnabled(x),[z,O]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&O(null)},[z,_]);const W=x&&!H&&"down"===_&&null===z,[U,G]=React.useState(W);useEffect(()=>{U!==W&&(F||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),G(W))},[U,W,F]);const $="function"==typeof A?A({minimized:U}):A,X=null!=$&&!1!==$,Z=U&&X,[Y,K]=React.useState(0),q=X&&!Z?Y+L.spacing.xs:0,J="tile"===s,Q="floating"===s||J,ee="bubble"===s,te="expand"===s,ie="solid"===s,ne="pill"===s||Q||ie,oe=Math.max(0,i.findIndex(e=>e.key===o)),[re,ae]=React.useState(0),[le,se]=React.useState(0),de=n?Math.ceil(i.length/2):i.length,ce=i.length+(n?1:0),[ue,he]=React.useState({width:0,height:0}),me=n?.size??48,pe=void 0!==n?.gap,ge=Math.max(0,n?.gap??0),be=pe?(ue.width||me)+2*ge:0,ye=pe?i.length>0?Math.max(0,re-be)/i.length:0:ce>0?re/ce:0,fe=pe?be:ye,xe=useRef(createAnimatedValue(oe)).current,Ae=useRef({}),Ie=useRef({});i.forEach(e=>{Ae.current[e.key]||(Ae.current[e.key]=new Animated.Value(1)),Ie.current[e.key]||(Ie.current[e.key]=createAnimatedValue(e.key===o?1:0))});const Re=ye>0?J?Math.min(ye-4,96):Math.min(ye-N,B):0,Se=ye>0?(ye-Re)/2:0,Ee=ye>0?(ye-M)/2:0,hasLabel=e=>l&&!U&&!1!==e.showLabel&&e.label.trim().length>0,we=i[oe],Le=we&&!hasLabel(we)&&le>0?le/2:6+(C+4)/2,Te=Le-k-M/2,De=Math.max(0,le-4),ve=J?2:Le-j/2,Ce=useRef(oe);useEffect(()=>{if(Ce.current===oe)return;Ce.current=oe;const e=Animated.spring(xe,{toValue:oe,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[oe,xe]);const je=Math.max(1,i.length-1),Be=useMemo(()=>{const e=[],t=[];for(let i=0;i<=je;i++)e.push(i),t.push(i<de?i*ye:i*ye+fe);return xe.interpolate({inputRange:e,outputRange:t})},[xe,je,de,ye,fe]),Ne=i.map(e=>e.key).join(" "),Ve=ee||te;useEffect(()=>{const e=Ne.split(" ").flatMap(e=>{const t=e===o?1:0,i=Ie.current[e];return i?Ve?[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,Ne,Ve]);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()},Pe=useRef(new Animated.Value(1)).current,{colors:Me}=L,ke=ie?Me.primary:Me.background.elevated,Fe=ie?Me.onPrimary:Me.primary,He=ie?Me.onPrimary:J?Me.text.primary:Me.text.tertiary,ze=ie?Me.onPrimary:Me.primaryMuted,Oe=ie?Me.primary:ee?Me.onPrimary:Fe,We=p??V,Ue=g??(Q?V:0),Ge=Ue>0,$e=y??(Q?6:ee?8:6),Xe=b??(Q?8:4),Ze=Ge?$e:Math.max($e,T.bottom),Ye=Ge?Math.max(Ue,T.bottom):0,Ke="full"===c,qe=Q?le+q+2*$e+2*StyleSheet.hairlineWidth:le+q+$e+Ze,Je=Ke?le>0?qe/2:L.radius.full:c??v?.borderRadius??(J?L.radius.full:Q?P:0),Qe=void 0!==c||void 0!==v?.borderRadius,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Qe?Math.min(Je,e/2):t,et="underline"===s?Math.max(Xe,Ke&&0===le?0:Je):Xe,tt=h??"none",it=L.shadows[tt],nt="none"===tt?null:supportsBoxShadow()?{boxShadow:toBoxShadow(it)}:it,ot=f?StyleSheet.hairlineWidth:0,rt=ie?Me.primary:Me.border.primary,at=n?.lift??0,lt=$e+ot+q,st=n&&le>0?Math.max(0,(ue.height||me)/2+at-le/2-lt):0,dt=n?_jsx(View,{style:[D.centerCell,pe?{flex:0,marginHorizontal:ge}:null],pointerEvents:"box-none",children:_jsx(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??a;!1!==e&&triggerHaptic(e),popIcon(Pe),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;he(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-at},e?{opacity:.85}:null],testID:n.testID??(w?`${w}-center`:void 0),children:n.content?_jsx(Animated.View,{style:{transform:[{scale:Pe}]},children:n.content}):_jsx(View,{style:[D.centerCircle,{width:me,height:me,borderRadius:me/2,...smoothCorners,backgroundColor:n.color??Me.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Pe}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??Me.onPrimary,size:n.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,ct=X?_jsx(View,{style:Z?D.accessoryInline:D.accessoryStacked,onLayout:e=>K(e.nativeEvent.layout.height),testID:w?`${w}-accessory`:void 0,children:$}):null,ut=_jsxs(View,{style:Z?[D.tabRow,D.tabRowInline]:D.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ae(t),se(i)},children:[ne&&Re>0&&(!J||De>0)?_jsx(Animated.View,{pointerEvents:"none",style:[D.pill,{width:Re,height:J?De:j,left:Se,top:ve,backgroundColor:ze,borderRadius:J?activeBgRadius(De,De/2):activeBgRadius(j,L.radius.full),...smoothCorners,transform:[{translateX:Be}]},R]}):null,ee&&ye>0?_jsx(Animated.View,{pointerEvents:"none",style:[D.bubble,L.shadows.md,{width:M,height:M,borderRadius:M/2,...smoothCorners,left:Ee,top:Te,backgroundColor:Me.primary,borderColor:Me.background.elevated,transform:[{translateX:Be}]},R]}):null,(ht=i.map(e=>{const t=e.key===o,i=t?Fe:He,n=t?Oe:He,l="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,s=t?e.activeIcon??l:e.icon,d=Ae.current[e.key],c=Ie.current[e.key],u=formatBadge(e.badge??null),h=badgeAccessibilitySuffix(e.badge??null),m=ie&&!t?.7:1,p=ee&&t||ie?Me.primary:Me.background.elevated,g=hasLabel(e),b=g&&(!te||t),y=_jsxs(Animated.View,{style:[D.iconWrap,{width:C+4,height:C+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(s,{color:n,size:C,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?D.badgeDot:D.badgePill,{backgroundColor:Me.error,borderColor:p}],children:u.isDot?null:_jsx(Text,{style:[D.badgeText,{color:Me.onError}],numberOfLines:1,children:u.text})}):null]}),f=ee?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-k]})},children:y}):y,x=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:E??L.maxFontSizeMultiplier??1.2,style:[D.label,te?D.labelInline:null,{color:i,opacity:te?c:m,fontWeight:t?L.typography.fontWeight.semibold:L.typography.fontWeight.normal},S],children:e.label}):null,A=_jsx(Pressable,{onPress:()=>(e=>{U&&O(_),e.key!==o&&!1!==a&&triggerHaptic(a);const t=Ae.current[e.key];t&&popIcon(t),r(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${h}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[D.tab,J?D.tabTile:null,e?{opacity:.85}:null],testID:w?`${w}-tab-${e.key}`:void 0,children:te?_jsxs(View,{style:[D.expandPill,{height:j,paddingHorizontal:t&&g?L.spacing.md:Math.max(0,(j-(C+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[D.expandFill,{borderRadius:activeBgRadius(j,j/2),...smoothCorners,backgroundColor:t?Me.primaryMuted:"transparent"},t?R:null]}),f,x]}):_jsxs(_Fragment,{children:[f,x]})},e.key);return te?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:A},e.key):A}),dt?[...ht.slice(0,de),dt,...ht.slice(de)]:ht),"underline"===s&&ye>0?_jsx(Animated.View,{pointerEvents:"none",style:[D.underline,"top"===d?D.underlineTop:D.underlineBottom,"top"===d?{top:-$e-q}:{bottom:-$e},{width:ye,height:v?.underlineHeight??3,backgroundColor:Me.primary,transform:[{translateX:Be}]},R]}):null]});var ht;return _jsx(View,{ref:t,testID:w,accessibilityRole:"tablist",style:[D.outer,{paddingHorizontal:We,paddingTop:Math.max(Ue,st),paddingBottom:Ye},I],children:_jsxs(View,{style:[Q?D.floatingBar:D.dockedBar,Z?D.barInline:null,nt,{backgroundColor:ke,borderColor:rt,borderRadius:Je,...smoothCorners},Q?{borderWidth:ot,paddingHorizontal:Xe,paddingVertical:$e}:{borderTopWidth:ot,borderBottomWidth:ot,borderLeftWidth:ot,borderRightWidth:ot,paddingHorizontal:et,paddingTop:$e,paddingBottom:Ze}],children:[ct,ut]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:4},floatingBar:{paddingVertical:6,paddingHorizontal:8},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.spacing.xs},accessoryInline:{flexShrink:0,marginRight:e.spacing.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:6,gap:4},tabTile:{paddingVertical:8,gap:2},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.typography.fontSize.xs,lineHeight:e.typography.fontSize.xs*e.typography.lineHeight.tight,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.typography.fontSize.sm,lineHeight:e.typography.fontSize.sm*e.typography.lineHeight.tight,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.spacing.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:2,borderTopRightRadius:2,...smoothCorners},underlineTop:{borderBottomLeftRadius:2,borderBottomRightRadius:2,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:9,...smoothCorners,paddingHorizontal:4,paddingVertical:2,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:5,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:10,fontWeight:"700",lineHeight:12,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
1
+ "use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,radiusOf,spaceOf,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:g,marginHorizontal:m,marginVertical:h,paddingHorizontal:b,paddingVertical:f,border:y,minimizeOnScroll:x=!1,scrollDirection:S="idle",accessory:_,style:R,indicatorStyle:w,labelStyle:I,labelMaxFontScale:E,testID:v}=e,A=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(A),[A]),L=A.components.bottomNavigation,T=g??L?.iconSize??18,V=L?.pillHeight??T+4+8,D=L?.pillMaxWidth??64,M=spaceOf(A,L?.pillInset??"lg","components.bottomNavigation.pillInset"),k=spaceOf(A,L?.floatingMargin??"lg","components.bottomNavigation.floatingMargin"),B=radiusOf(A,L?.floatingRadius??"xl","components.bottomNavigation.floatingRadius"),z=L?.bubbleSize??48,N=L?.bubbleLift??14,H=useReducedMotion(),P=useScreenReaderEnabled(x),[F,W]=React.useState(null);useEffect(()=>{null!==F&&F!==S&&W(null)},[F,S]);const O=x&&!P&&"down"===S&&null===F,[U,$]=React.useState(O);useEffect(()=>{U!==O&&(H||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),$(O))},[U,O,H]);const X="function"==typeof _?_({minimized:U}):_,Z=null!=X&&!1!==X,Y=U&&Z,[K,q]=React.useState(0),G=Z&&!Y?K+A.spacing.xs:0,J="tile"===l,Q="floating"===l||J,ee="bubble"===l,te="expand"===l,ie="solid"===l,ne="pill"===l||Q||ie,oe=Math.max(0,i.findIndex(e=>e.key===o)),[ae,re]=React.useState(0),[se,le]=React.useState(0),de=n?Math.ceil(i.length/2):i.length,ce=i.length+(n?1:0),[ue,pe]=React.useState({width:0,height:0}),ge=n?.size??48,me=void 0!==n?.gap,he=Math.max(0,n?.gap??0),be=me?(ue.width||ge)+2*he:0,fe=me?i.length>0?Math.max(0,ae-be)/i.length:0:ce>0?ae/ce:0,ye=me?be:fe,xe=useRef(createAnimatedValue(oe)).current,Se=useRef({}),Re=useRef({});i.forEach(e=>{Se.current[e.key]||(Se.current[e.key]=new Animated.Value(1)),Re.current[e.key]||(Re.current[e.key]=createAnimatedValue(e.key===o?1:0))});const we=fe>0?J?Math.min(fe-4,96):Math.min(fe-M,D):0,Ie=fe>0?(fe-we)/2:0,Ee=fe>0?(fe-z)/2:0,hasLabel=e=>s&&!U&&!1!==e.showLabel&&e.label.trim().length>0,ve=i[oe],Ae=ve&&!hasLabel(ve)&&se>0?se/2:A.spacing.xs+(T+4)/2,Ce=Ae-N-z/2,je=Math.max(0,se-4),Le=J?2:Ae-V/2,Te=useRef(oe);useEffect(()=>{if(Te.current===oe)return;Te.current=oe;const e=Animated.spring(xe,{toValue:oe,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[oe,xe]);const Ve=Math.max(1,i.length-1),De=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ve;i++)e.push(i),t.push(i<de?i*fe:i*fe+ye);return xe.interpolate({inputRange:e,outputRange:t})},[xe,Ve,de,fe,ye]),Me=i.map(e=>e.key).join(" "),ke=ee||te;useEffect(()=>{const e=Me.split(" ").flatMap(e=>{const t=e===o?1:0,i=Re.current[e];return i?ke?[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,Me,ke]);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:ze}=A,Ne=ie?ze.primary:ze.background.elevated,He=ie?ze.onPrimary:ze.primary,Pe=ie?ze.onPrimary:J?ze.text.primary:ze.text.tertiary,Fe=ie?ze.onPrimary:ze.primaryMuted,We=ie?ze.primary:ee?ze.onPrimary:He,Oe=m??k,Ue=h??(Q?k:0),$e=Ue>0,Xe=f??A.spacing.sm,Ze=b??(Q?A.spacing.sm:A.spacing.xs),Ye=$e?Xe:Math.max(Xe,C.bottom),Ke=$e?Math.max(Ue,C.bottom>0?C.bottom+A.spacing.sm:0):0,qe="pill"===c,Ge=Q?se+G+2*Xe+2*StyleSheet.hairlineWidth:se+G+Xe+Ye,Je=void 0===L?.radius?void 0:radiusOf(A,L.radius,"components.bottomNavigation.radius"),Qe=qe?se>0?Ge/2:A.radius.pill:c??Je??(J?A.radius.pill:Q?B:A.radius.none),et=void 0!==c||void 0!==L?.radius,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&et?Math.min(Qe,e/2):t,tt="underline"===l?Math.max(Ze,qe&&0===se?0:Qe):Ze,it=p??"none",nt=A.shadows[it],ot="none"===it?null:supportsBoxShadow()?{boxShadow:toBoxShadow(nt)}:nt,at=y?StyleSheet.hairlineWidth:0,rt=ie?ze.primary:ze.border.primary,st=n?.lift??0,lt=Xe+at+G,dt=n&&se>0?Math.max(0,(ue.height||ge)/2+st-se/2-lt):0,ct=n?_jsx(View,{style:[j.centerCell,me?{flex:0,marginHorizontal:he}:null],pointerEvents:"box-none",children:_jsx(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;pe(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-st},e?{opacity:.85}:null],testID:n.testID??(v?`${v}-center`:void 0),children:n.content?_jsx(Animated.View,{style:{transform:[{scale:Be}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:ge,height:ge,borderRadius:A.radius.pill,...smoothCorners,backgroundColor:n.color??ze.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Be}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??ze.onPrimary,size:n.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,ut=Z?_jsx(View,{style:Y?j.accessoryInline:j.accessoryStacked,onLayout:e=>q(e.nativeEvent.layout.height),testID:v?`${v}-accessory`:void 0,children:X}):null,pt=_jsxs(View,{style:Y?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;re(t),le(i)},children:[ne&&we>0&&(!J||je>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:we,height:J?je:V,left:Ie,top:Le,backgroundColor:Fe,borderRadius:J?activeBgRadius(je,je/2):activeBgRadius(V,A.radius.pill),...smoothCorners,transform:[{translateX:De}]},w]}):null,ee&&fe>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,A.shadows.md,{width:z,height:z,borderRadius:A.radius.pill,...smoothCorners,left:Ee,top:Ce,backgroundColor:ze.primary,borderColor:ze.background.elevated,transform:[{translateX:De}]},w]}):null,(gt=i.map(e=>{const t=e.key===o,i=t?He:Pe,n=t?We:Pe,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=Se.current[e.key],c=Re.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),g=ie&&!t?.7:1,m=ee&&t||ie?ze.primary:ze.background.elevated,h=hasLabel(e),b=h&&(!te||t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:g,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:ze.error,borderColor:m}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:ze.onError}],numberOfLines:1,children:u.text})}):null]}),y=ee?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-N]})},children:f}):f,x=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:E??A.maxFontSizeMultiplier??1.2,style:[j.label,te?j.labelInline:null,{color:i,opacity:te?c:g,fontWeight:t?A.typography.fontWeight.semibold:A.typography.fontWeight.normal},I],children:e.label}):null,_=_jsx(Pressable,{onPress:()=>(e=>{U&&W(S),e.key!==o&&!1!==r&&triggerHaptic(r);const t=Se.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,J?j.tabTile:null,e?{opacity:.85}:null],testID:v?`${v}-tab-${e.key}`:void 0,children:te?_jsxs(View,{style:[j.expandPill,{height:V,paddingHorizontal:t&&h?A.spacing.md:Math.max(0,(V-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(V,V/2),...smoothCorners,backgroundColor:t?ze.primaryMuted:"transparent"},t?w:null]}),y,x]}):_jsxs(_Fragment,{children:[y,x]})},e.key);return te?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,h?1.5:1]})},children:_},e.key):_}),ct?[...gt.slice(0,de),ct,...gt.slice(de)]:gt),"underline"===l&&fe>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-Xe-G}:{bottom:-Xe},{width:fe,height:L?.underlineHeight??3,backgroundColor:ze.primary,transform:[{translateX:De}]},w]}):null]});var gt;return _jsx(View,{ref:t,testID:v,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:Oe,paddingTop:Math.max(Ue,dt),paddingBottom:Ke},R],children:_jsxs(View,{style:[Q?j.floatingBar:j.dockedBar,Y?j.barInline:null,ot,{backgroundColor:Ne,borderColor:rt,borderRadius:Qe,...smoothCorners},Q?{borderWidth:at,paddingHorizontal:Ze,paddingVertical:Xe}:{borderTopWidth:at,borderBottomWidth:at,borderLeftWidth:at,borderRightWidth:at,paddingHorizontal:tt,paddingTop:Xe,paddingBottom:Ye}],children:[ut,pt]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.spacing.xs},floatingBar:{paddingVertical:e.spacing.sm,paddingHorizontal:e.spacing.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.spacing.xs},accessoryInline:{flexShrink:0,marginRight:e.spacing.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.spacing.xs,gap:e.spacing.xs},tabTile:{paddingVertical:e.spacing.sm,gap:e.spacing.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.typography.fontSize.xs,lineHeight:e.typography.fontSize.xs*e.typography.lineHeight.tight,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.typography.fontSize.sm,lineHeight:e.typography.fontSize.sm*e.typography.lineHeight.tight,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.spacing.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.spacing.xs,paddingVertical:e.spacing.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.typography.fontSize.xs,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
@@ -1 +1 @@
1
- "use strict";import{createContext,forwardRef,useCallback,useContext,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Dimensions,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{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TABLET_MIN_SHORT_SIDE=600,DIALOG_MAX_WIDTH=560,BottomSheetContext=createContext(null);export const useBottomSheet=()=>{const e=useContext(BottomSheetContext);if(!e)throw new Error("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=forwardRef((e,t)=>{const{snapPoints:o,index:s,onChange:n,onAnimate:r,onAfterClose:a,enablePanDownToClose:l=!0,enableBackdropPress:i=!0,confirmDismiss:u,scrollable:c=!1,scrollRef:d,onScroll:h,onContentSizeChange:m,onScrollLayout:f,scrollEventThrottle:b,keyboardBehavior:p="shift",mode:S="modal",presentation:g="sheet",handleIndicatorStyle:v,containerStyle:y,header:w,footer:C,headerStyle:x,footerStyle:k,children:M,accessibilityLabel:R,accessibilityViewIsModal:_,testID:E}=e,I=useTheme(),T=usePresenceMotion(),j=useSafeAreaInsets(),[O,A]=useState(()=>Dimensions.get("window").height),[D,V]=useState(()=>Dimensions.get("window").width),P=useCallback(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&A(e=>e===t?e:t),o>0&&V(e=>e===o?e:o)},[]),H=useWindowDimensions(),B="dialog"===g||"auto"===g&&Math.min(H.width,H.height)>=600,N=Math.min(560,D-2*I.spacing.xl),[G,L]=useModalInsets(),F="modal"===S?G.top:j.top,J="modal"===S?G.bottom:j.bottom,z=o.includes("content"),[U,Y]=useMeasuredHeight(),[$,q]=useMeasuredHeight(),[W,K,X]=useMeasuredHeight(),[Q,Z]=useMeasuredHeight(),ee=B?I.spacing.md:U,te=z?Math.min(ee+(null!=w?$:0)+W+(null!=C?Q:0)+J,O-F):0,oe=useCallback((e,t)=>{z&&X(t),m?.(e,t)},[z,m,X]),se=useMemo(()=>resolveSnapPoints(o,O,te),[o,O,te]),ne=O,re=se[se.length-1]??0,ae=useSharedValue(ne),le=useSharedValue(ne),ie=useSharedValue(1),ue=useSharedValue(-1),[ce,de]=useState(-1),he=useRef(!1),[me,fe]=useState(!1),[be,pe]=useState(!1),Se=useRef(!1),ge=useRef(a);ge.current=a;const[ve,ye]=useState(!1),we=useRef(-1),Ce=useRef(!1);Ce.current="modal"===S?be:ve;const xe=useRef(u);xe.current=u;const ke=useRef(!1),Me=useRef(!0),Re=useRef([]),Ee=useCallback(e=>{const t=Re.current;Re.current=[];for(const o of t)o(e)},[]);useEffect(()=>(Me.current=!0,()=>{Me.current=!1,Ee(!1)}),[Ee]);const Ie=useCallback(e=>{if(e<0||e>=se.length)return ne;const t=se[e];return B?(O-t)/2:O-t},[se,O,ne,B]),Te=useCallback(e=>{we.current=e;ce!==e&&(de(e),ue.value=e,n?.(e))},[ce,ue,n]),je=useCallback(()=>{he.current=!1,ue.value<0&&(Se.current=!0,"modal"===S?(fe(!1),"ios"!==Platform.OS&&pe(!1)):ye(!1))},[S,ue]),Oe=useCallback(()=>{Se.current&&pe(!1)},[]);useEffect(()=>{("modal"===S?!be:!ve)&&Se.current&&(Se.current=!1,ge.current?.(),Ee(!0))},[S,be,ve,Ee]);const Ae=useCallback((e,t,o)=>{he.current=!0,r?.(t,o),ae.value=withSpring(e,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(je)()})},[r,ae,je]),De=useCallback(e=>{const t="number"==typeof e?clamp(e,0,se.length-1):ce>=0?ce:0,o=ue.value,s=Ie(t);if(Se.current=!1,Ee(!1),"modal"===S?(pe(!0),fe(!0)):ye(!0),o<0&&T.reduced)return ae.value=s,ie.value=0,ie.value=withTiming(1,{duration:T.duration("fast"),easing:Easing.bezier(...I.motion.easing.decelerate),reduceMotion:PRESENCE_REDUCE_MOTION}),Te(t),void r?.(o,t);o<0&&(ae.value=ne,ie.value=1),Te(t),Ae(s,o,t)},[Ae,ne,ce,ue,S,r,T,ie,se.length,Te,Ee,I.motion.easing.decelerate,ae,Ie]),Ve=useCallback(()=>{if(0===se.length)return;const e=ue.value,t=Ie(0);Te(0),Ae(t,e,0)},[Ae,ue,se.length,Te,Ie]),Pe=useCallback(()=>new Promise(e=>{if(we.current<0)return void(Ce.current?Re.current.push(e):e(!0));Re.current.push(e);const t=ue.value;Te(-1),he.current=!0,r?.(t,-1);const o=T.reduced?ie:ae,s=T.reduced?0:ne;o.value=withTiming(s,{duration:T.duration("fast"),easing:Easing.bezier(...I.motion.easing.accelerate),reduceMotion:PRESENCE_REDUCE_MOTION},e=>{"worklet";e&&runOnJS(je)()})}),[ne,ue,je,r,T,ie,Te,ae,I.motion.easing.accelerate]),He=useCallback(async()=>{await Pe()},[Pe]),Be=useCallback((e,t,o)=>{const s=xe.current;if(!s)return void e();if(ke.current)return void t?.();const n=s();"boolean"!=typeof n?(ke.current=!0,o?.(),n.then(o=>{ke.current=!1,o&&Me.current&&we.current>=0?e():t?.()},e=>{throw ke.current=!1,e})):(n?e:t)?.()},[]),Ne=useCallback(()=>new Promise(e=>{we.current<0?Pe().then(e):Be(()=>{Pe().then(e)},()=>e(!1))}),[Pe,Be]),Ge=useCallback(()=>{i&&Ne()},[i,Ne]);useImperativeHandle(t,()=>({expand:De,collapse:Ve,close:He,requestClose:Ne}),[De,Ve,He,Ne]),useEffect(()=>{"number"==typeof s&&s!==ce&&(-1===s?He():De(s))},[s]);const Le=useRef({hostHeight:O,contentSnap:te});useEffect(()=>{const e=Le.current;e.hostHeight===O&&e.contentSnap===te||(Le.current={hostHeight:O,contentSnap:te},e.hostHeight===O&&ue.value<0||(ae.value=withSpring(Ie(ue.value),SPRING_CONFIG)))},[O,te]);const Fe=O-re,Je=useMemo(()=>se.map(e=>O-e),[se,O]),ze=useCallback(()=>{const e=we.current;e<0||Ae(Ie(e),e,e)},[Ae,Ie]),Ue=useCallback((e,t)=>{const o=ue.value;-1!==e?(Te(e),Ae(t,o,e)):Be(()=>{triggerHaptic("selection"),He()},ze,ze)},[Ae,He,ue,Be,Te,ze]),Ye=useMemo(()=>Gesture.Native().withTestId(E?`${E}-content-gesture`:"bottom-sheet-content-gesture"),[E]),$e=useMemo(()=>{const e=Je,t=ne,o=Fe,s=l;return Gesture.Pan().withTestId(E?`${E}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{"worklet";le.value=ae.value}).onUpdate(e=>{"worklet";const t=le.value+e.translationY;ae.value=t<o?o+.25*(t-o):t}).onEnd(o=>{"worklet";const n=ae.value;if(o.velocityY>1e3)return s?void runOnJS(Ue)(-1,t):void runOnJS(Ue)(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(Ue)(-1,t):runOnJS(Ue)(r,e[r])})},[ne,le,l,Ue,Fe,Je,E,ae]),{height:qe}=useReanimatedKeyboardAnimation(),We="shift"===p,Ke=useDerivedValue(()=>We?qe.value:0),Xe=se[ce>=0?ce:0]??re,Qe=I.spacing.md,Ze=useAnimatedStyle(()=>{if(B){const e=Ke.value,t=O+e-Xe-Qe,o=e<0&&ae.value>t?t:ae.value;return{top:o<F?F:o,opacity:ie.value}}const e=ae.value+Ke.value,t=Ke.value<0?F:Fe;return{top:e<t?t:e,opacity:ie.value}}),et=useAnimatedStyle(()=>{const e=Ke.value;if(B){const t=O+e-Xe-Qe,o=e<0&&ae.value>t?t:ae.value,s=O+e-Qe-(o<F?F:o);return{height:s<0?0:s>Xe?Xe:s}}const t=e<0?F:Fe,o=ae.value+e,s=O+e-(o<t?t:o);return{height:s<0?0:s>re?re:s}}),tt=ce>=0,ot=useMemo(()=>buildStyles(I),[I]),st=useCallback(()=>{i&&Be(()=>{triggerHaptic("selection"),He()})},[i,He,Be]),nt=useMemo(()=>Gesture.Tap().withTestId(E?`${E}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((_e,e)=>{"worklet";e&&runOnJS(st)()}),[st,E]),rt=useMemo(()=>({snapIndex:ce,snapPoints:se,expand:De,collapse:Ve,close:He,requestClose:Ne}),[ce,se,De,Ve,He,Ne]);if("inline"===S&&!ve)return null;if("modal"===S&&!be)return null;const at=_jsxs(View,{collapsable:!1,style:["modal"===S?ot.backdropModal:ot.backdropInline,{backgroundColor:I.colors.background.overlay}],onLayout:P,testID:E,accessibilityViewIsModal:_??tt,children:[_jsx(GestureDetector,{gesture:nt,children:_jsx(Animated.View,{style:StyleSheet.absoluteFill,accessibilityRole:"button",accessibilityLabel:"Close bottom sheet"})}),_jsx(Animated.View,{accessibilityRole:"alert",accessibilityLabel:R,accessibilityViewIsModal:_??tt,accessibilityActions:[{name:"escape",label:"Close bottom sheet"}],onAccessibilityAction:e=>{"escape"===e.nativeEvent.actionName&&Ge()},onAccessibilityEscape:Ge,style:[ot.sheet,{height:re,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius["2xl"],borderTopRightRadius:I.radius["2xl"],...smoothCorners,...I.shadows.xl},B?{height:Xe,left:(D-N)/2,right:void 0,width:N,borderBottomLeftRadius:I.radius["2xl"],borderBottomRightRadius:I.radius["2xl"]}:null,y,Ze],children:_jsxs(SheetBody,{style:[ot.body,et],keyboardOffset:Ke,children:[B?_jsx(View,{style:{height:I.spacing.md}}):_jsx(GestureDetector,{gesture:$e,children:_jsx(View,{style:ot.handleRow,onLayout:z?Y:void 0,accessible:!0,accessibilityLabel:"Drag handle",accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:E?`${E}-handle`:"bottom-sheet-handle",children:_jsx(View,{style:[ot.handle,{backgroundColor:I.components.bottomSheet?.handleColor??I.colors.border.primary},v]})})}),null!=w&&_jsx(View,{style:[ot.header,x],onLayout:z?q:void 0,children:w}),c?_jsx(GestureDetector,{gesture:Ye,children:_jsx(ScrollView,{ref:d,style:ot.scrollContent,onScroll:h,onContentSizeChange:oe,onLayout:f,scrollEventThrottle:b,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:M})}):_jsx(View,{style:z?[ot.content,{overflow:"visible"}]:ot.content,children:z?_jsx(View,{onLayout:K,children:M}):M}),null!=C&&_jsx(View,{style:[ot.footer,k],onLayout:z?Z:void 0,children:C})]})})]}),lt=_jsx(BottomSheetContext.Provider,{value:rt,children:at});return"modal"===S?_jsx(Modal,{transparent:!0,visible:me,onRequestClose:Ge,onDismiss:"ios"===Platform.OS?Oe:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:_jsxs(ModalSafeArea,{onInsets:L,children:["android"===Platform.OS?_jsx(GestureHandlerRootView,{style:ot.modalRoot,children:lt}):lt,_jsx(ToastHost,{})]})}):lt}),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:12,paddingBottom:24},header:{},footer:{},handle:{width:36,height:4,borderRadius:2,...smoothCorners},content:{flex:1,overflow:"hidden"},scrollContent:{flex:1},modalRoot:{flex:1}});export{BottomSheet};export default BottomSheet;
1
+ "use strict";import{createContext,forwardRef,useCallback,useContext,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Dimensions,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{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TABLET_MIN_SHORT_SIDE=600,DIALOG_MAX_WIDTH=560,BottomSheetContext=createContext(null);export const useBottomSheet=()=>{const e=useContext(BottomSheetContext);if(!e)throw new Error("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=forwardRef((e,t)=>{const{snapPoints:o,index:s,onChange:n,onAnimate:r,onAfterClose:a,enablePanDownToClose:l=!0,enableBackdropPress:i=!0,confirmDismiss:u,scrollable:c=!1,scrollRef:d,onScroll:h,onContentSizeChange:m,onScrollLayout:f,scrollEventThrottle:b,keyboardBehavior:p="shift",mode:S="modal",presentation:g="sheet",handleIndicatorStyle:v,containerStyle:y,header:w,footer:C,headerStyle:x,footerStyle:k,children:M,accessibilityLabel:R,accessibilityViewIsModal:_,testID:E}=e,I=useTheme(),T=usePresenceMotion(),j=useSafeAreaInsets(),[O,A]=useState(()=>Dimensions.get("window").height),[D,V]=useState(()=>Dimensions.get("window").width),P=useCallback(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&A(e=>e===t?e:t),o>0&&V(e=>e===o?e:o)},[]),H=useWindowDimensions(),B="dialog"===g||"auto"===g&&Math.min(H.width,H.height)>=600,N=Math.min(560,D-2*I.spacing.xl),[G,L]=useModalInsets(),F="modal"===S?G.top:j.top,J="modal"===S?G.bottom:j.bottom,z=o.includes("content"),[U,Y]=useMeasuredHeight(),[$,q]=useMeasuredHeight(),[W,K,X]=useMeasuredHeight(),[Q,Z]=useMeasuredHeight(),ee=B?I.spacing.md:U,te=z?Math.min(ee+(null!=w?$:0)+W+(null!=C?Q:0)+J,O-F):0,oe=useCallback((e,t)=>{z&&X(t),m?.(e,t)},[z,m,X]),se=useMemo(()=>resolveSnapPoints(o,O,te),[o,O,te]),ne=O,re=se[se.length-1]??0,ae=useSharedValue(ne),le=useSharedValue(ne),ie=useSharedValue(1),ue=useSharedValue(-1),[ce,de]=useState(-1),he=useRef(!1),[me,fe]=useState(!1),[be,pe]=useState(!1),Se=useRef(!1),ge=useRef(a);ge.current=a;const[ve,ye]=useState(!1),we=useRef(-1),Ce=useRef(!1);Ce.current="modal"===S?be:ve;const xe=useRef(u);xe.current=u;const ke=useRef(!1),Me=useRef(!0),Re=useRef([]),Ee=useCallback(e=>{const t=Re.current;Re.current=[];for(const o of t)o(e)},[]);useEffect(()=>(Me.current=!0,()=>{Me.current=!1,Ee(!1)}),[Ee]);const Ie=useCallback(e=>{if(e<0||e>=se.length)return ne;const t=se[e];return B?(O-t)/2:O-t},[se,O,ne,B]),Te=useCallback(e=>{we.current=e;ce!==e&&(de(e),ue.value=e,n?.(e))},[ce,ue,n]),je=useCallback(()=>{he.current=!1,ue.value<0&&(Se.current=!0,"modal"===S?(fe(!1),"ios"!==Platform.OS&&pe(!1)):ye(!1))},[S,ue]),Oe=useCallback(()=>{Se.current&&pe(!1)},[]);useEffect(()=>{("modal"===S?!be:!ve)&&Se.current&&(Se.current=!1,ge.current?.(),Ee(!0))},[S,be,ve,Ee]);const Ae=useCallback((e,t,o)=>{he.current=!0,r?.(t,o),ae.value=withSpring(e,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(je)()})},[r,ae,je]),De=useCallback(e=>{const t="number"==typeof e?clamp(e,0,se.length-1):ce>=0?ce:0,o=ue.value,s=Ie(t);if(Se.current=!1,Ee(!1),"modal"===S?(pe(!0),fe(!0)):ye(!0),o<0&&T.reduced)return ae.value=s,ie.value=0,ie.value=withTiming(1,{duration:T.duration("fast"),easing:Easing.bezier(...I.motion.easing.decelerate),reduceMotion:PRESENCE_REDUCE_MOTION}),Te(t),void r?.(o,t);o<0&&(ae.value=ne,ie.value=1),Te(t),Ae(s,o,t)},[Ae,ne,ce,ue,S,r,T,ie,se.length,Te,Ee,I.motion.easing.decelerate,ae,Ie]),Ve=useCallback(()=>{if(0===se.length)return;const e=ue.value,t=Ie(0);Te(0),Ae(t,e,0)},[Ae,ue,se.length,Te,Ie]),Pe=useCallback(()=>new Promise(e=>{if(we.current<0)return void(Ce.current?Re.current.push(e):e(!0));Re.current.push(e);const t=ue.value;Te(-1),he.current=!0,r?.(t,-1);const o=T.reduced?ie:ae,s=T.reduced?0:ne;o.value=withTiming(s,{duration:T.duration("fast"),easing:Easing.bezier(...I.motion.easing.accelerate),reduceMotion:PRESENCE_REDUCE_MOTION},e=>{"worklet";e&&runOnJS(je)()})}),[ne,ue,je,r,T,ie,Te,ae,I.motion.easing.accelerate]),He=useCallback(async()=>{await Pe()},[Pe]),Be=useCallback((e,t,o)=>{const s=xe.current;if(!s)return void e();if(ke.current)return void t?.();const n=s();"boolean"!=typeof n?(ke.current=!0,o?.(),n.then(o=>{ke.current=!1,o&&Me.current&&we.current>=0?e():t?.()},e=>{throw ke.current=!1,e})):(n?e:t)?.()},[]),Ne=useCallback(()=>new Promise(e=>{we.current<0?Pe().then(e):Be(()=>{Pe().then(e)},()=>e(!1))}),[Pe,Be]),Ge=useCallback(()=>{i&&Ne()},[i,Ne]);useImperativeHandle(t,()=>({expand:De,collapse:Ve,close:He,requestClose:Ne}),[De,Ve,He,Ne]),useEffect(()=>{"number"==typeof s&&s!==ce&&(-1===s?He():De(s))},[s]);const Le=useRef({hostHeight:O,contentSnap:te});useEffect(()=>{const e=Le.current;e.hostHeight===O&&e.contentSnap===te||(Le.current={hostHeight:O,contentSnap:te},e.hostHeight===O&&ue.value<0||(ae.value=withSpring(Ie(ue.value),SPRING_CONFIG)))},[O,te]);const Fe=O-re,Je=useMemo(()=>se.map(e=>O-e),[se,O]),ze=useCallback(()=>{const e=we.current;e<0||Ae(Ie(e),e,e)},[Ae,Ie]),Ue=useCallback((e,t)=>{const o=ue.value;-1!==e?(Te(e),Ae(t,o,e)):Be(()=>{triggerHaptic("selection"),He()},ze,ze)},[Ae,He,ue,Be,Te,ze]),Ye=useMemo(()=>Gesture.Native().withTestId(E?`${E}-content-gesture`:"bottom-sheet-content-gesture"),[E]),$e=useMemo(()=>{const e=Je,t=ne,o=Fe,s=l;return Gesture.Pan().withTestId(E?`${E}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{"worklet";le.value=ae.value}).onUpdate(e=>{"worklet";const t=le.value+e.translationY;ae.value=t<o?o+.25*(t-o):t}).onEnd(o=>{"worklet";const n=ae.value;if(o.velocityY>1e3)return s?void runOnJS(Ue)(-1,t):void runOnJS(Ue)(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(Ue)(-1,t):runOnJS(Ue)(r,e[r])})},[ne,le,l,Ue,Fe,Je,E,ae]),{height:qe}=useReanimatedKeyboardAnimation(),We="shift"===p,Ke=useDerivedValue(()=>We?qe.value:0),Xe=se[ce>=0?ce:0]??re,Qe=I.spacing.md,Ze=useAnimatedStyle(()=>{if(B){const e=Ke.value,t=O+e-Xe-Qe,o=e<0&&ae.value>t?t:ae.value;return{top:o<F?F:o,opacity:ie.value}}const e=ae.value+Ke.value,t=Ke.value<0?F:Fe;return{top:e<t?t:e,opacity:ie.value}}),et=useAnimatedStyle(()=>{const e=Ke.value;if(B){const t=O+e-Xe-Qe,o=e<0&&ae.value>t?t:ae.value,s=O+e-Qe-(o<F?F:o);return{height:s<0?0:s>Xe?Xe:s}}const t=e<0?F:Fe,o=ae.value+e,s=O+e-(o<t?t:o);return{height:s<0?0:s>re?re:s}}),tt=ce>=0,ot=useMemo(()=>buildStyles(I),[I]),st=useCallback(()=>{i&&Be(()=>{triggerHaptic("selection"),He()})},[i,He,Be]),nt=useMemo(()=>Gesture.Tap().withTestId(E?`${E}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((_e,e)=>{"worklet";e&&runOnJS(st)()}),[st,E]),rt=useMemo(()=>({snapIndex:ce,snapPoints:se,expand:De,collapse:Ve,close:He,requestClose:Ne}),[ce,se,De,Ve,He,Ne]);if("inline"===S&&!ve)return null;if("modal"===S&&!be)return null;const at=_jsxs(View,{collapsable:!1,style:["modal"===S?ot.backdropModal:ot.backdropInline,{backgroundColor:I.colors.background.overlay}],onLayout:P,testID:E,accessibilityViewIsModal:_??tt,children:[_jsx(GestureDetector,{gesture:nt,children:_jsx(Animated.View,{style:StyleSheet.absoluteFill,accessibilityRole:"button",accessibilityLabel:"Close bottom sheet"})}),_jsx(Animated.View,{accessibilityRole:"alert",accessibilityLabel:R,accessibilityViewIsModal:_??tt,accessibilityActions:[{name:"escape",label:"Close bottom sheet"}],onAccessibilityAction:e=>{"escape"===e.nativeEvent.actionName&&Ge()},onAccessibilityEscape:Ge,style:[ot.sheet,{height:re,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,...smoothCorners,...I.shadows.xl},B?{height:Xe,left:(D-N)/2,right:void 0,width:N,borderBottomLeftRadius:I.radius.xl,borderBottomRightRadius:I.radius.xl}:null,y,Ze],children:_jsxs(SheetBody,{style:[ot.body,et],keyboardOffset:Ke,children:[B?_jsx(View,{style:{height:I.spacing.md}}):_jsx(GestureDetector,{gesture:$e,children:_jsx(View,{style:ot.handleRow,onLayout:z?Y:void 0,accessible:!0,accessibilityLabel:"Drag handle",accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:E?`${E}-handle`:"bottom-sheet-handle",children:_jsx(View,{style:[ot.handle,{backgroundColor:I.components.bottomSheet?.handleColor??I.colors.border.primary},v]})})}),null!=w&&_jsx(View,{style:[ot.header,x],onLayout:z?q:void 0,children:w}),c?_jsx(GestureDetector,{gesture:Ye,children:_jsx(ScrollView,{ref:d,style:ot.scrollContent,onScroll:h,onContentSizeChange:oe,onLayout:f,scrollEventThrottle:b,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:M})}):_jsx(View,{style:z?[ot.content,{overflow:"visible"}]:ot.content,children:z?_jsx(View,{onLayout:K,children:M}):M}),null!=C&&_jsx(View,{style:[ot.footer,k],onLayout:z?Z:void 0,children:C})]})})]}),lt=_jsx(BottomSheetContext.Provider,{value:rt,children:at});return"modal"===S?_jsx(Modal,{transparent:!0,visible:me,onRequestClose:Ge,onDismiss:"ios"===Platform.OS?Oe:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:_jsxs(ModalSafeArea,{onInsets:L,children:["android"===Platform.OS?_jsx(GestureHandlerRootView,{style:ot.modalRoot,children:lt}):lt,_jsx(ToastHost,{})]})}):lt}),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.spacing.md,paddingBottom:e.spacing.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;
@@ -1 +1 @@
1
- "use strict";import{forwardRef}from"react";import{View}from"react-native";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const space=(r,e)=>null==e?void 0:r.spacing[e];export const resolveBoxStyle=(r,e)=>{const l={};if(null!=e.p&&(l.padding=space(r,e.p)),null!=e.px&&(l.paddingHorizontal=space(r,e.px)),null!=e.py&&(l.paddingVertical=space(r,e.py)),null!=e.pt&&(l.paddingTop=space(r,e.pt)),null!=e.pr&&(l.paddingRight=space(r,e.pr)),null!=e.pb&&(l.paddingBottom=space(r,e.pb)),null!=e.pl&&(l.paddingLeft=space(r,e.pl)),null!=e.m&&(l.margin=space(r,e.m)),null!=e.mx&&(l.marginHorizontal=space(r,e.mx)),null!=e.my&&(l.marginVertical=space(r,e.my)),null!=e.mt&&(l.marginTop=space(r,e.mt)),null!=e.mr&&(l.marginRight=space(r,e.mr)),null!=e.mb&&(l.marginBottom=space(r,e.mb)),null!=e.ml&&(l.marginLeft=space(r,e.ml)),null!=e.gap&&(l.gap=space(r,e.gap)),null!=e.bg){const o=r.colors.background;l.backgroundColor=o[e.bg]??e.bg}return null!=e.radius&&(l.borderRadius=r.radius[e.radius],l.borderCurve=smoothCorners.borderCurve),e.border&&(l.borderWidth=r.colors.border.width,l.borderColor=r.colors.border.primary),null!=e.flex&&(l.flex=e.flex),null!=e.align&&(l.alignItems=e.align),null!=e.justify&&(l.justifyContent=e.justify),null!=e.direction&&(l.flexDirection=e.direction),e.wrap&&(l.flexWrap="wrap"),l};const Box=forwardRef((r,e)=>{const l=useTheme(),{p:o,px:t,py:a,pt:i,pr:s,pb:n,pl:p,m:d,mx:c,my:u,mt:m,mr:g,mb:x,ml:f,gap:b,bg:y,radius:h,border:w,flex:j,align:S,justify:R,direction:B,wrap:C,style:k,children:v,..._}=r,q=resolveBoxStyle(l,{p:o,px:t,py:a,pt:i,pr:s,pb:n,pl:p,m:d,mx:c,my:u,mt:m,mr:g,mb:x,ml:f,gap:b,bg:y,radius:h,border:w,flex:j,align:S,justify:R,direction:B,wrap:C}),z=useSquircle(null!=h&&(null!=y||Boolean(w)),q.borderRadius,_.onLayout),V=z.active?{...q,backgroundColor:"transparent",borderColor:"transparent"}:q;return _jsxs(View,{ref:e,..._,onLayout:z.onLayout,style:[V,k],children:[z.active&&z.size?_jsx(SquircleFill,{width:z.size.width,height:z.size.height,radius:q.borderRadius,fill:q.backgroundColor??"transparent",stroke:q.borderColor,strokeWidth:q.borderWidth??0,outset:q.borderWidth??0}):null,v]})});Box.displayName="Box";const Stack=forwardRef(({gap:r="md",...e},l)=>_jsx(Box,{ref:l,direction:"column",gap:r,...e}));Stack.displayName="Stack";const Row=forwardRef(({gap:r="sm",align:e="center",...l},o)=>_jsx(Box,{ref:o,direction:"row",gap:r,align:e,...l}));Row.displayName="Row";const Spacer=({size:r,style:e,testID:l})=>{const o=useTheme();if(null!=r){const t=o.spacing[r];return _jsx(View,{testID:l,style:[{width:t,height:t},e]})}return _jsx(View,{testID:l,style:[{flex:1},e]})};Spacer.displayName="Spacer";export{Box,Row,Spacer,Stack};export default Box;
1
+ "use strict";import{forwardRef}from"react";import{View}from"react-native";import{useTheme}from"../../theme/index.js";import{radiusOf,spaceOf}from"../../theme/scale.js";import{smoothCorners}from"../../utils/corners.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const space=(r,e,l)=>null==e?void 0:spaceOf(r,e,`Box ${l}`);export const resolveBoxStyle=(r,e)=>{const l={};if(null!=e.p&&(l.padding=space(r,e.p,"p")),null!=e.px&&(l.paddingHorizontal=space(r,e.px,"px")),null!=e.py&&(l.paddingVertical=space(r,e.py,"py")),null!=e.pt&&(l.paddingTop=space(r,e.pt,"pt")),null!=e.pr&&(l.paddingRight=space(r,e.pr,"pr")),null!=e.pb&&(l.paddingBottom=space(r,e.pb,"pb")),null!=e.pl&&(l.paddingLeft=space(r,e.pl,"pl")),null!=e.m&&(l.margin=space(r,e.m,"m")),null!=e.mx&&(l.marginHorizontal=space(r,e.mx,"mx")),null!=e.my&&(l.marginVertical=space(r,e.my,"my")),null!=e.mt&&(l.marginTop=space(r,e.mt,"mt")),null!=e.mr&&(l.marginRight=space(r,e.mr,"mr")),null!=e.mb&&(l.marginBottom=space(r,e.mb,"mb")),null!=e.ml&&(l.marginLeft=space(r,e.ml,"ml")),null!=e.gap&&(l.gap=space(r,e.gap,"gap")),null!=e.bg){const o=r.colors.background;l.backgroundColor=o[e.bg]??e.bg}return null!=e.radius&&(l.borderRadius=radiusOf(r,e.radius,"Box radius"),l.borderCurve=smoothCorners.borderCurve),e.border&&(l.borderWidth=r.colors.border.width,l.borderColor=r.colors.border.primary),null!=e.flex&&(l.flex=e.flex),null!=e.align&&(l.alignItems=e.align),null!=e.justify&&(l.justifyContent=e.justify),null!=e.direction&&(l.flexDirection=e.direction),e.wrap&&(l.flexWrap="wrap"),l};const Box=forwardRef((r,e)=>{const l=useTheme(),{p:o,px:t,py:a,pt:i,pr:s,pb:p,pl:n,m:m,mx:c,my:d,mt:u,mr:g,mb:x,ml:f,gap:b,bg:y,radius:h,border:w,flex:j,align:S,justify:B,direction:R,wrap:C,style:k,children:v,..._}=r,z=resolveBoxStyle(l,{p:o,px:t,py:a,pt:i,pr:s,pb:p,pl:n,m:m,mx:c,my:d,mt:u,mr:g,mb:x,ml:f,gap:b,bg:y,radius:h,border:w,flex:j,align:S,justify:B,direction:R,wrap:C}),q=useSquircle(null!=h&&(null!=y||Boolean(w)),z.borderRadius,_.onLayout),V=q.active?{...z,backgroundColor:"transparent",borderColor:"transparent"}:z;return _jsxs(View,{ref:e,..._,onLayout:q.onLayout,style:[V,k],children:[q.active&&q.size?_jsx(SquircleFill,{width:q.size.width,height:q.size.height,radius:z.borderRadius,fill:z.backgroundColor??"transparent",stroke:z.borderColor,strokeWidth:z.borderWidth??0,outset:z.borderWidth??0}):null,v]})});Box.displayName="Box";const Stack=forwardRef(({gap:r="md",...e},l)=>_jsx(Box,{ref:l,direction:"column",gap:r,...e}));Stack.displayName="Stack";const Row=forwardRef(({gap:r="sm",align:e="center",...l},o)=>_jsx(Box,{ref:o,direction:"row",gap:r,align:e,...l}));Row.displayName="Row";const Spacer=({size:r,style:e,testID:l})=>{const o=useTheme();if(null!=r){const t=spaceOf(o,r,"Spacer size");return _jsx(View,{testID:l,style:[{width:t,height:t},e]})}return _jsx(View,{testID:l,style:[{flex:1},e]})};Spacer.displayName="Spacer";export{Box,Row,Spacer,Stack};export default Box;
@@ -1 +1 @@
1
- "use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,r)=>{const{title:o,children:t,variant:s="solid",tone:i="primary",size:n="md",loading:a=!1,disabled:l=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:m=!1,gradient:h,style:f,containerStyle:S,textStyle:y,pressAnimation:x,onPress:C,accessibilityLabel:I,accessibilityHint:_,accessibilityState:T,testID:k,onLayout:w,...z}=e;if(__DEV__&&hasTextChild(t))throw new Error('[@webority/mobile-ui] Button was given its label as text children. Pass it as `title` (<Button title="Save" />): text children draw a blank button with no accessible name.');const j=useTheme(),F=!l&&!a,R={...T,disabled:!F,busy:a},v="link"===s,H=x??(!v&&"scale"),L=usePressAnimation({preset:H||"scale",enabled:!1!==H&&F}),E=useFlickGuard(),V=useMemo(()=>buildStyles(j),[j]),A={...sizeMap[n],...j.components.button?.[n]??{}},P=useMemo(()=>toneFor(j,i),[j,i]),O=useMemo(()=>variantFor(j,s,P,l),[j,s,P,l]),W=useMemo(()=>!h||l||"solid"!==s?null:"string"==typeof h?j.gradients[h]??null:h,[h,l,s,j.gradients]),D=StyleSheet.flatten(f)?.borderRadius,B=v?0:"number"==typeof D?D:m?j.radius.full:A.borderRadius,N=useSquircle(!W&&"link"!==s,B,w),M=useRef(createAnimatedValue(0)).current,[G,q]=useState(0),[K,U]=useState(null),X=v?e=>q(e.nativeEvent.layout.width):void 0,Y=I??o,J="outline"===s||"ghost"===s,Q=!J&&!v,Z={color:O.textColor,size:A.iconSize,disabled:l},$=g&&!v&&Boolean(c),ee=A.minHeight-2*BADGE_INSET-2*O.borderWidth,re={color:O.badgeInk,size:A.badgeIconSize??A.iconSize,disabled:l},oe=a?_jsx(Spinner,{variant:"circular",size:"sm",color:$?O.badgeInk:O.textColor,accessibilityLabel:"Loading"}):c?renderSlotIcon(c,$?re:Z,b):null,te=_jsxs(View,{style:V.contentRow,children:[$?_jsx(View,{testID:"button-icon-badge",style:[V.iconLeft,V.iconBadge,{width:ee,height:ee,borderRadius:ee/2,backgroundColor:O.badgeFill}],children:oe}):oe?_jsx(View,{style:V.iconLeft,children:oe}):null,o?_jsxs(View,{onLayout:X,children:[_jsx(Text,{style:[V.label,{color:O.textColor,fontSize:A.fontSize,...fontFor(j,"semibold")},y],numberOfLines:1,children:o}),v?_jsx(Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[V.linkUnderline,{backgroundColor:O.textColor,transform:[{translateX:M.interpolate({inputRange:[0,1],outputRange:[-G/2,0]})},{scaleX:M.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):t,u?_jsx(View,{style:V.iconRight,children:renderSlotIcon(u,Z,b)}):null]}),se=v?null===K?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(K)):touchSlopFor(A.minHeight),ie={top:se,bottom:se,left:v?LINK_HIT_SLOP:0,right:v?LINK_HIT_SLOP:0};return _jsx(Animated.View,{style:[L.style,d?V.fullWidth:null,S],children:_jsx(Pressable,{ref:r,onPress:e=>{F&&!E.isFlick(e)&&(L.press(),p&&triggerHaptic(p),C?.(e))},onPressIn:e=>{E.onPressIn(e),L.pressIn(),v&&F&&(M.stopAnimation(),M.setValue(0),Animated.timing(M,{toValue:1,duration:j.motion.duration.slower,easing:Easing.bezier(...j.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{L.pressOut()},disabled:!F,hitSlop:ie,accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:_,accessibilityState:R,...ariaFromState(R),testID:k,onLayout:e=>{N.onLayout(e),v&&U(e.nativeEvent.layout.height)},style:({pressed:e})=>[V.base,{paddingHorizontal:v?0:A.paddingHorizontal,paddingVertical:v?0:$?BADGE_INSET:A.paddingVertical,paddingLeft:$?BADGE_INSET:void 0,minHeight:v?void 0:A.minHeight,borderRadius:B,...smoothCorners,backgroundColor:W||N.active?"transparent":O.backgroundColor,borderWidth:O.borderWidth,borderColor:N.active?"transparent":O.borderColor,opacity:a?.55:1,overflow:N.active||v?"visible":"hidden"},e&&J&&!N.active?{backgroundColor:j.colors.surface.pressed}:null,d?V.fullWidth:null,f],...z,"aria-disabled":!F,"aria-busy":a,children:({pressed:e})=>_jsxs(_Fragment,{children:[N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:B,fill:e&&J?j.colors.surface.pressed:O.backgroundColor,stroke:O.borderColor,strokeWidth:O.borderWidth,outset:O.borderWidth}):null,W?_jsx(Gradient,{gradient:W,style:[StyleSheet.absoluteFill,{borderRadius:B,...smoothCorners}]}):null,e&&Q?N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:B,fill:O.pressedTint,outset:O.borderWidth,testID:"button-pressed"}):_jsx(View,{pointerEvents:"none",style:[V.pressedOverlay,{borderRadius:B,backgroundColor:O.pressedTint,...smoothCorners}],testID:"button-pressed"}):null,te]})})})});Button.displayName="Button";const hasTextChild=e=>React.Children.toArray(e).some(e=>"string"==typeof e||"number"==typeof e),sizeMap={xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8,iconSize:14,badgeIconSize:11},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10,iconSize:16},md:{paddingHorizontal:16,paddingVertical:9,minHeight:44,fontSize:16,borderRadius:12,iconSize:18},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14,iconSize:20},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16,iconSize:22}},SOFT_FILL_OPACITY=.14,toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,fg:e.colors.toneText.primary,soft:tintOf(e.colors.primary,.14,e.colors.primaryMuted)};case"secondary":return{base:e.colors.secondary,on:e.colors.onSecondary,fg:e.colors.onSecondary,soft:e.colors.secondary};case"success":return{base:e.colors.success,on:e.colors.onSuccess,fg:e.colors.toneText.success,soft:tintOf(e.colors.success,.14,e.colors.background.secondary)};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,fg:e.colors.toneText.warning,soft:tintOf(e.colors.warning,.14,e.colors.background.secondary)};case"error":return{base:e.colors.error,on:e.colors.onError,fg:e.colors.toneText.error,soft:tintOf(e.colors.error,.14,e.colors.background.secondary)};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,fg:e.colors.text.primary,soft:e.colors.background.secondary}}},BADGE_INSET=4,BUTTON_BORDER_WIDTH=1,MIN_TOUCH_TARGET=44,LINK_HIT_SLOP=8,touchSlopFor=e=>Math.max(0,Math.ceil((44-e)/2)),variantFor=(e,r,o,t)=>{const s=t?e.colors.text.disabled:o.fg,i={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=t?i:{badgeFill:o.on,badgeInk:o.base},a=t?i:{badgeFill:o.base,badgeInk:o.on};switch(r){case"solid":return{backgroundColor:t?e.colors.surface.disabled:o.base,borderColor:"transparent",borderWidth:1,textColor:t?e.colors.text.disabled:o.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:t?e.colors.surface.disabled:o.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...a};case"outline":return{backgroundColor:"transparent",borderColor:t?e.colors.border.primary:o.base,borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...a};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...a};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:t?e.colors.text.disabled:e.colors.text.link,pressedTint:e.colors.surface.pressed,...a};case"glass":return{backgroundColor:e.colors.glass.fill,borderColor:e.colors.glass.border,borderWidth:1,textColor:t?e.colors.text.disabled:e.colors.glass.on,pressedTint:ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:t?e.colors.text.disabled:o.base};default:return{backgroundColor:o.base,borderColor:"transparent",borderWidth:1,textColor:o.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>StyleSheet.create({pressedOverlay:{position:"absolute",top:0,right:0,bottom:0,left:0},base:{alignItems:"center",justifyContent:"center",flexDirection:"row",overflow:"hidden"},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},linkUnderline:{height:1.5,marginTop:1},iconLeft:{marginRight:8},iconBadge:{alignItems:"center",justifyContent:"center"},iconRight:{marginLeft:8},fullWidth:{alignSelf:"stretch"}});export{Button};export default Button;
1
+ "use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,resolveButtonSize,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,r)=>{const{title:o,children:t,variant:s="solid",tone:i="primary",size:n="md",loading:l=!1,disabled:a=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:m=!1,gradient:h,style:f,containerStyle:y,textStyle:x,pressAnimation:S,onPress:C,accessibilityLabel:I,accessibilityHint:_,accessibilityState:k,testID:T,onLayout:w,...j}=e;if(__DEV__&&hasTextChild(t))throw new Error('[@webority/mobile-ui] Button was given its label as text children. Pass it as `title` (<Button title="Save" />): text children draw a blank button with no accessible name.');const F=useTheme(),v=!a&&!l,L={...k,disabled:!v,busy:l},R="link"===s,P=S??(!R&&"scale"),O=usePressAnimation({preset:P||"scale",enabled:!1!==P&&v}),W=useFlickGuard(),A=useMemo(()=>buildStyles(F),[F]),V=useMemo(()=>resolveButtonSize(F,n),[F,n]),E=useMemo(()=>toneFor(F,i),[F,i]),H=useMemo(()=>variantFor(F,s,E,a),[F,s,E,a]),z=useMemo(()=>!h||a||"solid"!==s?null:"string"==typeof h?F.gradients[h]??null:h,[h,a,s,F.gradients]),B=StyleSheet.flatten(f)?.borderRadius,D=R?0:"number"==typeof B?B:m?F.radius.pill:V.radius,N=useSquircle(!z&&"link"!==s,D,w),M=useRef(createAnimatedValue(0)).current,[q,G]=useState(0),[K,U]=useState(null),X=R?e=>G(e.nativeEvent.layout.width):void 0,Y=I??o,J="outline"===s||"ghost"===s,Q=!J&&!R,Z={color:H.textColor,size:V.icon,disabled:a},$=g&&!R&&Boolean(c),ee=F.spacing.xs,re=V.minHeight-2*ee-2*H.borderWidth,oe={color:H.badgeInk,size:V.badgeIcon,disabled:a},te=l?_jsx(Spinner,{variant:"circular",size:"sm",color:$?H.badgeInk:H.textColor,accessibilityLabel:"Loading"}):c?renderSlotIcon(c,$?oe:Z,b):null,se=_jsxs(View,{style:A.contentRow,children:[$?_jsx(View,{testID:"button-icon-badge",style:[A.iconLeft,A.iconBadge,{width:re,height:re,borderRadius:re/2,backgroundColor:H.badgeFill}],children:te}):te?_jsx(View,{style:A.iconLeft,children:te}):null,o?_jsxs(View,{onLayout:X,children:[_jsx(Text,{style:[A.label,{color:H.textColor,fontSize:V.text,...fontFor(F,"semibold")},x],numberOfLines:1,children:o}),R?_jsx(Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[A.linkUnderline,{backgroundColor:H.textColor,transform:[{translateX:M.interpolate({inputRange:[0,1],outputRange:[-q/2,0]})},{scaleX:M.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):t,u?_jsx(View,{style:A.iconRight,children:renderSlotIcon(u,Z,b)}):null]}),ie=R?null===K?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(K)):touchSlopFor(V.minHeight),ne={top:ie,bottom:ie,left:R?LINK_HIT_SLOP:0,right:R?LINK_HIT_SLOP:0};return _jsx(Animated.View,{style:[O.style,d?A.fullWidth:null,y],children:_jsx(Pressable,{ref:r,onPress:e=>{v&&!W.isFlick(e)&&(O.press(),p&&triggerHaptic(p),C?.(e))},onPressIn:e=>{W.onPressIn(e),O.pressIn(),R&&v&&(M.stopAnimation(),M.setValue(0),Animated.timing(M,{toValue:1,duration:F.motion.duration.slower,easing:Easing.bezier(...F.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{O.pressOut()},disabled:!v,hitSlop:ne,accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:_,accessibilityState:L,...ariaFromState(L),testID:T,onLayout:e=>{N.onLayout(e),R&&U(e.nativeEvent.layout.height)},style:({pressed:e})=>[A.base,{paddingHorizontal:R?0:V.paddingX,paddingVertical:R?0:$?ee:V.paddingY,paddingLeft:$?ee:void 0,minHeight:R?void 0:V.minHeight,borderRadius:D,...smoothCorners,backgroundColor:z||N.active?"transparent":H.backgroundColor,borderWidth:H.borderWidth,borderColor:N.active?"transparent":H.borderColor,opacity:l?.55:1,overflow:N.active||R?"visible":"hidden"},e&&J&&!N.active?{backgroundColor:F.colors.surface.pressed}:null,d?A.fullWidth:null,f],...j,"aria-disabled":!v,"aria-busy":l,children:({pressed:e})=>_jsxs(_Fragment,{children:[N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:D,fill:e&&J?F.colors.surface.pressed:H.backgroundColor,stroke:H.borderColor,strokeWidth:H.borderWidth,outset:H.borderWidth}):null,z?_jsx(Gradient,{gradient:z,style:[StyleSheet.absoluteFill,{borderRadius:D,...smoothCorners}]}):null,e&&Q?N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:D,fill:H.pressedTint,outset:H.borderWidth,testID:"button-pressed"}):_jsx(View,{pointerEvents:"none",style:[A.pressedOverlay,{borderRadius:D,backgroundColor:H.pressedTint,...smoothCorners}],testID:"button-pressed"}):null,se]})})})});Button.displayName="Button";const hasTextChild=e=>React.Children.toArray(e).some(e=>"string"==typeof e||"number"==typeof e),SOFT_FILL_OPACITY=.14,toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,fg:e.colors.toneText.primary,soft:tintOf(e.colors.primary,.14,e.colors.primaryMuted)};case"secondary":return{base:e.colors.secondary,on:e.colors.onSecondary,fg:e.colors.onSecondary,soft:e.colors.secondary};case"success":return{base:e.colors.success,on:e.colors.onSuccess,fg:e.colors.toneText.success,soft:tintOf(e.colors.success,.14,e.colors.background.secondary)};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,fg:e.colors.toneText.warning,soft:tintOf(e.colors.warning,.14,e.colors.background.secondary)};case"error":return{base:e.colors.error,on:e.colors.onError,fg:e.colors.toneText.error,soft:tintOf(e.colors.error,.14,e.colors.background.secondary)};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,fg:e.colors.text.primary,soft:e.colors.background.secondary}}},BUTTON_BORDER_WIDTH=1,MIN_TOUCH_TARGET=44,LINK_HIT_SLOP=8,touchSlopFor=e=>Math.max(0,Math.ceil((44-e)/2)),variantFor=(e,r,o,t)=>{const s=t?e.colors.text.disabled:o.fg,i={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=t?i:{badgeFill:o.on,badgeInk:o.base},l=t?i:{badgeFill:o.base,badgeInk:o.on};switch(r){case"solid":return{backgroundColor:t?e.colors.surface.disabled:o.base,borderColor:"transparent",borderWidth:1,textColor:t?e.colors.text.disabled:o.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:t?e.colors.surface.disabled:o.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"outline":return{backgroundColor:"transparent",borderColor:t?e.colors.border.primary:o.base,borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:t?e.colors.text.disabled:e.colors.text.link,pressedTint:e.colors.surface.pressed,...l};case"glass":return{backgroundColor:e.colors.glass.fill,borderColor:e.colors.glass.border,borderWidth:1,textColor:t?e.colors.text.disabled:e.colors.glass.on,pressedTint:ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:t?e.colors.text.disabled:o.base};default:return{backgroundColor:o.base,borderColor:"transparent",borderWidth:1,textColor:o.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>StyleSheet.create({pressedOverlay:{position:"absolute",top:0,right:0,bottom:0,left:0},base:{alignItems:"center",justifyContent:"center",flexDirection:"row",overflow:"hidden"},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},linkUnderline:{height:1.5,marginTop:1},iconLeft:{marginRight:e.spacing.sm},iconBadge:{alignItems:"center",justifyContent:"center"},iconRight:{marginLeft:e.spacing.sm},fullWidth:{alignSelf:"stretch"}});export{Button};export default Button;
@@ -1 +1 @@
1
- "use strict";import{StyleSheet}from"react-native";import{fontFor}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";export const MIN_CELL_SIZE=44;export const NAV_BUTTON_SIZE=36;const DOT_SIZE=5;export const buildCalendarStyles=e=>{const t=e.components.dateRangePicker,o=t?.navButtonSize??36;return StyleSheet.create({root:{alignSelf:"stretch"},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:e.spacing.md},navBtn:{width:o,height:o,borderRadius:e.radius.full,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.secondary},navBtnPressed:{backgroundColor:e.colors.surface.pressed},navBtnDisabled:{opacity:.4},navText:{fontSize:t?.navTextFontSize??22,lineHeight:t?.navTextLineHeight??24,color:e.colors.text.primary,...fontFor(e,"semibold")},headerLabelWrap:{flex:1,alignItems:"center"},headerLabel:{fontSize:e.typography.fontSize.base,color:e.colors.text.primary,...fontFor(e,"semibold")},weekdayRow:{flexDirection:"row",justifyContent:"center",marginBottom:e.spacing.xs},weekdayCell:{alignItems:"center",paddingVertical:e.spacing.xs},weekdayText:{fontSize:e.typography.fontSize.xs,color:e.colors.text.tertiary,letterSpacing:e.typography.letterSpacing.wide,...fontFor(e,"medium")},gridRow:{flexDirection:"row",justifyContent:"center"},dayCell:{alignItems:"center",justifyContent:"center",padding:0},barLeft:{position:"absolute",left:0,right:"50%",top:"5%",bottom:"5%"},barRight:{position:"absolute",left:"50%",right:0,top:"5%",bottom:"5%"},rangeFill:{backgroundColor:e.colors.primaryMuted},dayInner:{width:"90%",height:"90%",alignItems:"center",justifyContent:"center",borderRadius:e.radius.full,...smoothCorners},dayEdge:{backgroundColor:e.colors.primary},dayMid:{borderRadius:e.radius.none},dayText:{fontSize:e.typography.fontSize.sm,...fontFor(e,"medium")},dayStruck:{textDecorationLine:"line-through"},dots:{position:"absolute",bottom:e.spacing.xs,flexDirection:"row",gap:e.spacing.xxs},dot:{width:5,height:5,borderRadius:e.radius.full,...smoothCorners}})};
1
+ "use strict";import{StyleSheet}from"react-native";import{fontFor}from"../../theme/index.js";import{fontSizeOf}from"../../theme/scale.js";import{smoothCorners}from"../../utils/corners.js";export const MIN_CELL_SIZE=44;export const NAV_BUTTON_SIZE=36;const DOT_SIZE=5;export const buildCalendarStyles=e=>{const t=e.components.dateRangePicker,o=t?.navButtonSize??36;return StyleSheet.create({root:{alignSelf:"stretch"},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:e.spacing.md},navBtn:{width:o,height:o,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.secondary},navBtnPressed:{backgroundColor:e.colors.surface.pressed},navBtnDisabled:{opacity:.4},navText:{fontSize:fontSizeOf(e,t?.navText??"2xl","components.dateRangePicker.navText"),lineHeight:t?.navTextLineHeight??26,color:e.colors.text.primary,...fontFor(e,"semibold")},headerLabelWrap:{flex:1,alignItems:"center"},headerLabel:{fontSize:e.typography.fontSize.base,color:e.colors.text.primary,...fontFor(e,"semibold")},weekdayRow:{flexDirection:"row",justifyContent:"center",marginBottom:e.spacing.xs},weekdayCell:{alignItems:"center",paddingVertical:e.spacing.xs},weekdayText:{fontSize:e.typography.fontSize.xs,color:e.colors.text.tertiary,letterSpacing:e.typography.letterSpacing.wide,...fontFor(e,"medium")},gridRow:{flexDirection:"row",justifyContent:"center"},dayCell:{alignItems:"center",justifyContent:"center",padding:e.spacing.none},barLeft:{position:"absolute",left:0,right:"50%",top:"5%",bottom:"5%"},barRight:{position:"absolute",left:"50%",right:0,top:"5%",bottom:"5%"},rangeFill:{backgroundColor:e.colors.primaryMuted},dayInner:{width:"90%",height:"90%",alignItems:"center",justifyContent:"center",borderRadius:e.radius.pill,...smoothCorners},dayEdge:{backgroundColor:e.colors.primary},dayMid:{borderRadius:e.radius.none},dayText:{fontSize:e.typography.fontSize.sm,...fontFor(e,"medium")},dayStruck:{textDecorationLine:"line-through"},dots:{position:"absolute",bottom:e.spacing.xs,flexDirection:"row",gap:e.spacing.xxs},dot:{width:5,height:5,borderRadius:e.radius.pill,...smoothCorners}})};
@@ -1 +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{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{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 paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:o,variant:i="elevated",elevation:r="sm",radius:s="lg",padding:l="md",interactive:a=!1,bg:n,header:d,title:c,lead:u,action:h,headerActions:m,collapsible:p=!1,collapsed:g,defaultCollapsed:b=!1,onCollapsedChange:y,collapsedSummary:x,onRemove:f,removeLabel:S="Remove",separatorHeight:j=StyleSheet.hairlineWidth,footer:v,imageSource:w,imageHeight:C=160,imageAspectRatio:_,imageOverlay:R,loading:k=!1,gradient:A,onPress:T,haptic:B,contextMenu:I,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,style:V,containerStyle:F,headerStyle:M,bodyStyle:z,footerStyle:q,borderRadius:W,testID:D,onLayout:O,...E}=e,N=useTheme(),G=a||"function"==typeof T,$=useContextMenu(I,{haptic:B||!1,testID:D,accessibilityActions:E.accessibilityActions,onAccessibilityAction:E.onAccessibilityAction}),U=useMemo(()=>mergeRefs(t,$.hostRef),[t,$.hostRef]),J=G||$.enabled,{style:K,pressIn:Q,pressOut:X}=usePressAnimation({enabled:J}),Y=stylesFor(N),Z=Boolean(w),ee=N.spacing[paddingMap[l]],te=useMemo(()=>A?"string"==typeof A?N.gradients[A]??null:A:null,[A,N.gradients]),oe="flat"===i,ie=oe?0:W??N.radius[s],re=resolveBackground(N,n),[se,le]=useControllableState({value:g,defaultValue:b,onChange:y}),ae=p&&se,ne=hasBuiltInHeaderContent(e),de=Boolean(d)||ne,ce=useSquircle(!Z&&!te&&!oe,ie,O),ue=StyleSheet.flatten([V,F])??{},he=ue.backgroundColor,me=ue.borderColor,pe=he??re??("filled"===i?N.colors.background.secondary:N.colors.background.elevated),ge="outlined"===i?N.colors.border.width:0,be=me??N.colors.border.primary,ye="elevated"===i&&supportsBoxShadow()?toBoxShadow(N.shadows[r]):void 0,xe=ce.active&&"elevated"===i&&!ye,fe=ce.active&&!xe?{backgroundColor:"transparent",borderColor:"transparent"}:null,Se=useMemo(()=>{const e={borderRadius:xe&&ce.size?squircleHostRadius(ce.size.width,ce.size.height,ie):ie,...smoothCorners,padding:Z?0:ee,overflow:ce.active?"visible":"hidden"};switch(i){case"flat":return{...e,backgroundColor:re??N.colors.background.elevated,borderBottomWidth:j,borderBottomColor:N.colors.border.primary};case"outlined":return{...e,backgroundColor:ce.active?"transparent":re??N.colors.background.elevated,borderWidth:N.colors.border.width,borderColor:ce.active?"transparent":N.colors.border.primary};case"filled":return{...e,backgroundColor:ce.active?"transparent":re??N.colors.background.secondary};default:return{...e,backgroundColor:re??N.colors.background.elevated,...ye?{boxShadow:ye}:N.shadows[r]}}},[N,i,r,ie,Z,ee,ce.active,ce.size,ye,xe,re,j]),je=useMemo(()=>({..."number"==typeof _?{width:"100%",aspectRatio:_}:{width:"100%",height:C},borderTopLeftRadius:ie,borderTopRightRadius:ie,borderBottomLeftRadius:0,borderBottomRightRadius:0,...smoothCorners}),[ie,_,C]),ve="string"==typeof c?c:"",we=_jsxs(_Fragment,{children:[_jsxs(View,{style:Y.titleColumn,children:["string"==typeof c?_jsx(Text,{variant:"title",accessibilityRole:"header",children:c}):c,u?_jsx(Text,{variant:"bodySmall",style:Y.lead,children:u}):null,ae&&x?_jsx(Text,{variant:"caption",style:Y.lead,children:x}):null]}),isCardTextAction(h)?_jsx(CardTextActionButton,{action:h,haptic:B}):h?_jsx(View,{style:Y.actionNode,children:h}):null,m,p?_jsx(CardIconAction,{icon:ae?"chevron-down":"chevron-up",label:`${ae?"Show":"Hide"} ${ve}`.trim(),expanded:!ae,onPress:()=>le(!ae),haptic:B}):null,f?_jsx(CardIconAction,{icon:"trash",label:S,onPress:f,color:N.colors.toneText.error,haptic:B}):null]}),Ce=_jsxs(_Fragment,{children:[de?_jsx(View,{style:[Y.header,!d&&Y.headerRow,ae&&Y.headerFolded,M],children:d??we}):null,ae?null:_jsx(View,{style:[de||v?Y.body:null,z],children:o}),v&&!ae?_jsx(View,{style:[Y.footer,q],children:v}):null]}),Re=Z?_jsxs(_Fragment,{children:[_jsxs(View,{style:Y.imageWrapper,children:[_jsx(Image,{source:w,resizeMode:"cover",style:je,accessibilityLabel:"",accessible:!1}),R?_jsx(View,{pointerEvents:"box-none",style:Y.imageOverlay,children:R}):null]}),_jsx(View,{style:{padding:ee},children:Ce})]}):Ce,ke=te?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:te,style:StyleSheet.absoluteFill}),Re]}):ce.active&&ce.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:ce.size.width,height:ce.size.height,radius:ie,fill:pe,stroke:ge?be:void 0,strokeWidth:ge,outset:ge}),Re]}):Re;let Ae;if(J){const handlePress=e=>{G&&(B&&triggerHaptic(B),T?.(e))};Ae=_jsx(Animated.View,{style:K,children:_jsx(Pressable,{ref:U,onPress:handlePress,onPressIn:Q,onPressOut:X,android_ripple:{color:N.colors.surface.pressed,borderless:!1},accessibilityRole:P??(G?"button":void 0),accessibilityLabel:H,accessibilityHint:L,testID:D,onLayout:ce.onLayout,style:[Se,V,F,fe],...E,...$.hostProps,children:ke})})}else Ae=_jsx(View,{ref:t,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,testID:D,onLayout:ce.onLayout,style:[Se,V,F,fe],...E,children:ke});return k?_jsx(CardSkeleton,{...e}):$.enabled?_jsxs(_Fragment,{children:[Ae,$.renderSurface(_jsx(View,{style:[Se,V,F,fe,Y.preview],children:ke}))]}):Ae}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:o="lg",padding:i="md",bg:r,header:s,footer:l,imageSource:a,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:p,style:g,...b})=>{const y=useTheme(),x=paddingMap[i],f=y.spacing[x],S="flat"===e?0:c??y.radius[o],j=void 0!==s||hasBuiltInHeaderContent(b),v=resolveBackground(y,r)??y.colors.background.elevated,w="outlined"===e?1:0,C="outlined"===e?y.colors.border.primary:void 0;return _jsxs(View,{style:[{backgroundColor:v,borderRadius:S,...smoothCorners,borderWidth:w,borderColor:C,overflow:"hidden"},u,g],accessibilityRole:"progressbar",accessibilityLabel:"Loading",accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==a?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,j?_jsx(View,{style:[{padding:f,paddingBottom:y.spacing.sm},h],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:f},m],children:_jsx(SkeletonText,{lines:3,fontSize:14,lastLineWidth:"55%"})}),void 0!==l?_jsx(View,{style:[{padding:f,paddingTop:y.spacing.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:o,expanded:i,color:r,haptic:s})=>{const l=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===i?void 0:{expanded:i},"aria-expanded":i,onPress:()=>{s&&triggerHaptic(s),o()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:r??l.colors.text.primary})})},CardTextActionButton=({action:e,haptic:t})=>{const o=useTheme();return _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:o.colors.primary,children:e.label})})},iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},resolveBackground=(e,t)=>{if(null==t)return;return e.colors.background[t]??t},buildStyles=e=>StyleSheet.create({header:{marginBottom:e.spacing.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},headerFolded:{marginBottom:0},titleColumn:{flex:1},lead:{marginTop:e.spacing.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.spacing.md},imageWrapper:{position:"relative"},imageOverlay:{...StyleSheet.absoluteFill},preview:{margin:0,marginTop:0,marginBottom:0,marginLeft:0,marginRight:0,marginStart:0,marginEnd:0,marginHorizontal:0,marginVertical:0,position:"relative",top:0,left:0,width:"100%",height:"100%"}}),stylesFor=themeStyles(buildStyles);export{Card};export default Card;
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{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{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 paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:o,variant:i="elevated",elevation:r="sm",radius:s="lg",padding:n="md",interactive:a=!1,bg:l,header:d,title:c,lead:u,action:h,headerActions:m,collapsible:p=!1,collapsed:g,defaultCollapsed:b=!1,onCollapsedChange:y,collapsedSummary:x,onRemove:f,removeLabel:S="Remove",separatorHeight:j=StyleSheet.hairlineWidth,footer:v,imageSource:w,imageHeight:C=160,imageAspectRatio:_,imageOverlay:R,loading:k=!1,gradient:A,onPress:T,haptic:B,contextMenu:I,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,style:V,containerStyle:F,headerStyle:M,bodyStyle:z,footerStyle:q,borderRadius:W,testID:D,onLayout:O,...E}=e,N=useTheme(),G=a||"function"==typeof T,$=useContextMenu(I,{haptic:B||!1,testID:D,accessibilityActions:E.accessibilityActions,onAccessibilityAction:E.onAccessibilityAction}),U=useMemo(()=>mergeRefs(t,$.hostRef),[t,$.hostRef]),J=G||$.enabled,{style:K,pressIn:Q,pressOut:X}=usePressAnimation({enabled:J}),Y=stylesFor(N),Z=Boolean(w),ee=N.spacing[paddingMap[n]],te=useMemo(()=>A?"string"==typeof A?N.gradients[A]??null:A:null,[A,N.gradients]),oe="flat"===i,ie=oe?N.radius.none:W??N.radius[s],re=resolveBackground(N,l),[se,ne]=useControllableState({value:g,defaultValue:b,onChange:y}),ae=p&&se,le=hasBuiltInHeaderContent(e),de=Boolean(d)||le,ce=useSquircle(!Z&&!te&&!oe,ie,O),ue=StyleSheet.flatten([V,F])??{},he=ue.backgroundColor,me=ue.borderColor,pe=he??re??("filled"===i?N.colors.background.secondary:N.colors.background.elevated),ge="outlined"===i?N.colors.border.width:0,be=me??N.colors.border.primary,ye="elevated"===i&&supportsBoxShadow()?toBoxShadow(N.shadows[r]):void 0,xe=ce.active&&"elevated"===i&&!ye,fe=ce.active&&!xe?{backgroundColor:"transparent",borderColor:"transparent"}:null,Se=useMemo(()=>{const e={borderRadius:xe&&ce.size?squircleHostRadius(ce.size.width,ce.size.height,ie):ie,...smoothCorners,padding:Z?N.spacing.none:ee,overflow:ce.active?"visible":"hidden"};switch(i){case"flat":return{...e,backgroundColor:re??N.colors.background.elevated,borderBottomWidth:j,borderBottomColor:N.colors.border.primary};case"outlined":return{...e,backgroundColor:ce.active?"transparent":re??N.colors.background.elevated,borderWidth:N.colors.border.width,borderColor:ce.active?"transparent":N.colors.border.primary};case"filled":return{...e,backgroundColor:ce.active?"transparent":re??N.colors.background.secondary};default:return{...e,backgroundColor:re??N.colors.background.elevated,...ye?{boxShadow:ye}:N.shadows[r]}}},[N,i,r,ie,Z,ee,ce.active,ce.size,ye,xe,re,j]),je=useMemo(()=>({..."number"==typeof _?{width:"100%",aspectRatio:_}:{width:"100%",height:C},borderTopLeftRadius:ie,borderTopRightRadius:ie,borderBottomLeftRadius:N.radius.none,borderBottomRightRadius:N.radius.none,...smoothCorners}),[N,ie,_,C]),ve="string"==typeof c?c:"",we=_jsxs(_Fragment,{children:[_jsxs(View,{style:Y.titleColumn,children:["string"==typeof c?_jsx(Text,{variant:"title",accessibilityRole:"header",children:c}):c,u?_jsx(Text,{variant:"bodySmall",style:Y.lead,children:u}):null,ae&&x?_jsx(Text,{variant:"caption",style:Y.lead,children:x}):null]}),isCardTextAction(h)?_jsx(CardTextActionButton,{action:h,haptic:B}):h?_jsx(View,{style:Y.actionNode,children:h}):null,m,p?_jsx(CardIconAction,{icon:ae?"chevron-down":"chevron-up",label:`${ae?"Show":"Hide"} ${ve}`.trim(),expanded:!ae,onPress:()=>ne(!ae),haptic:B}):null,f?_jsx(CardIconAction,{icon:"trash",label:S,onPress:f,color:N.colors.toneText.error,haptic:B}):null]}),Ce=_jsxs(_Fragment,{children:[de?_jsx(View,{style:[Y.header,!d&&Y.headerRow,ae&&Y.headerFolded,M],children:d??we}):null,ae?null:_jsx(View,{style:[de||v?Y.body:null,z],children:o}),v&&!ae?_jsx(View,{style:[Y.footer,q],children:v}):null]}),Re=Z?_jsxs(_Fragment,{children:[_jsxs(View,{style:Y.imageWrapper,children:[_jsx(Image,{source:w,resizeMode:"cover",style:je,accessibilityLabel:"",accessible:!1}),R?_jsx(View,{pointerEvents:"box-none",style:Y.imageOverlay,children:R}):null]}),_jsx(View,{style:{padding:ee},children:Ce})]}):Ce,ke=te?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:te,style:StyleSheet.absoluteFill}),Re]}):ce.active&&ce.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:ce.size.width,height:ce.size.height,radius:ie,fill:pe,stroke:ge?be:void 0,strokeWidth:ge,outset:ge}),Re]}):Re;let Ae;if(J){const handlePress=e=>{G&&(B&&triggerHaptic(B),T?.(e))};Ae=_jsx(Animated.View,{style:K,children:_jsx(Pressable,{ref:U,onPress:handlePress,onPressIn:Q,onPressOut:X,android_ripple:{color:N.colors.surface.pressed,borderless:!1},accessibilityRole:P??(G?"button":void 0),accessibilityLabel:H,accessibilityHint:L,testID:D,onLayout:ce.onLayout,style:[Se,V,F,fe],...E,...$.hostProps,children:ke})})}else Ae=_jsx(View,{ref:t,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,testID:D,onLayout:ce.onLayout,style:[Se,V,F,fe],...E,children:ke});return k?_jsx(CardSkeleton,{...e}):$.enabled?_jsxs(_Fragment,{children:[Ae,$.renderSurface(_jsx(View,{style:[Se,V,F,fe,Y.preview],children:ke}))]}):Ae}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:o="lg",padding:i="md",bg:r,header:s,footer:n,imageSource:a,imageHeight:l=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:p,style:g,...b})=>{const y=useTheme(),x=paddingMap[i],f=y.spacing[x],S="flat"===e?y.radius.none:c??y.radius[o],j=void 0!==s||hasBuiltInHeaderContent(b),v=resolveBackground(y,r)??y.colors.background.elevated,w="outlined"===e?1:0,C="outlined"===e?y.colors.border.primary:void 0;return _jsxs(View,{style:[{backgroundColor:v,borderRadius:S,...smoothCorners,borderWidth:w,borderColor:C,overflow:"hidden"},u,g],accessibilityRole:"progressbar",accessibilityLabel:"Loading",accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==a?_jsx(Skeleton,{width:"100%",height:d?void 0:l,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,j?_jsx(View,{style:[{padding:f,paddingBottom:y.spacing.sm},h],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:f},m],children:_jsx(SkeletonText,{lines:3,fontSize:y.typography.fontSize.base,lastLineWidth:"55%"})}),void 0!==n?_jsx(View,{style:[{padding:f,paddingTop:y.spacing.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:o,expanded:i,color:r,haptic:s})=>{const n=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===i?void 0:{expanded:i},"aria-expanded":i,onPress:()=>{s&&triggerHaptic(s),o()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:r??n.colors.text.primary})})},CardTextActionButton=({action:e,haptic:t})=>{const o=useTheme();return _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:o.colors.primary,children:e.label})})},iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},resolveBackground=(e,t)=>{if(null==t)return;return e.colors.background[t]??t},buildStyles=e=>StyleSheet.create({header:{marginBottom:e.spacing.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},headerFolded:{marginBottom:e.spacing.none},titleColumn:{flex:1},lead:{marginTop:e.spacing.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.spacing.md},imageWrapper:{position:"relative"},imageOverlay:{...StyleSheet.absoluteFill},preview:{margin:e.spacing.none,marginTop:e.spacing.none,marginBottom:e.spacing.none,marginLeft:e.spacing.none,marginRight:e.spacing.none,marginStart:e.spacing.none,marginEnd:e.spacing.none,marginHorizontal:e.spacing.none,marginVertical:e.spacing.none,position:"relative",top:0,left:0,width:"100%",height:"100%"}}),stylesFor=themeStyles(buildStyles);export{Card};export default Card;
@@ -1 +1 @@
1
- "use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,AppState,Dimensions,FlatList,Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const CarouselInner=forwardRef((e,t)=>{const{data:n,renderItem:r,keyExtractor:i,index:a,defaultIndex:l=0,onIndexChange:s,onScrollOffsetChange:o,autoPlay:c=!1,autoPlayInterval:u=4e3,loop:d=!1,showPagination:m=!0,paginationStyle:h="dots",itemWidth:g="screen",spacing:y=0,containerStyle:p,accessibilityLabel:b,testID:f,showThumbnails:S=!1,haptic:x,renderThumbnail:w,loading:C=!1}=e,v=useTheme(),j="number"==typeof a,k=d||c,[I,T]=useState(()=>Dimensions.get("window").width),R="screen"===g?I:g,_=R+y,A=useRef(null),V=useRef(createAnimatedValue(0)).current,E=clamp(j?a:l,0,Math.max(0,n.length-1)),[H,z]=useState(E),M=useRef(null),D=useRef(null),P=useRef(!1),W=useRef(H);W.current=H;const L=useCallback(e=>{const t=clamp(e,0,Math.max(0,n.length-1));z(e=>e===t?e:(s?.(t),t))},[n.length,s]),$=useCallback((e,t=!0)=>{if(0===n.length)return;const r=clamp(e,0,n.length-1);A.current?.scrollToOffset({offset:r*_,animated:t}),L(r)},[n.length,_,L]),N=useCallback(()=>{if(0===n.length)return;const e=W.current+1;e>=n.length?k&&$(0,!1):$(e,!0)},[n.length,k,$]),O=useCallback(()=>{if(0===n.length)return;const e=W.current-1;e<0?k&&$(n.length-1,!1):$(e,!0)},[n.length,k,$]);useImperativeHandle(t,()=>({scrollTo:$,next:N,prev:O}),[$,N,O]),useEffect(()=>{j&&a!==H&&$(a,!0)},[a]);const F=useCallback(()=>{M.current&&(clearInterval(M.current),M.current=null)},[]),X=useCallback(()=>{!c||n.length<=1||(F(),M.current=setInterval(()=>{if(P.current)return;const e=W.current+1;e>=n.length?$(0,!1):$(e,!0)},u))},[c,u,n.length,$,F]);useEffect(()=>(X(),()=>{F(),D.current&&clearTimeout(D.current)}),[X,F]),useEffect(()=>{const e=AppState.addEventListener("change",e=>{"active"!==e?(F(),D.current&&(clearTimeout(D.current),D.current=null)):X()});return()=>e.remove()},[X,F]);const B=m&&n.length>1&&"numbers"!==h||void 0!==o,G=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{x:V}}}],{useNativeDriver:!1,listener:o?e=>o(e.nativeEvent.contentOffset.x):void 0}),[V,o]),q=useCallback(e=>{if(_<=0)return;const t=e.nativeEvent.contentOffset.x,n=Math.round(t/_);L(n)},[_,L]),J=useCallback(()=>{P.current=!0,F(),D.current&&(clearTimeout(D.current),D.current=null)},[F]),K=useCallback(()=>{P.current=!1,c&&(D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{X()},1e3))},[c,X]),Q=useCallback(e=>{switch(e.nativeEvent.actionName){case"increment":N();break;case"decrement":O()}},[N,O]),U=useMemo(()=>buildStyles(v),[v]),Y=useCallback(({item:e,index:t})=>_jsx(View,{style:{width:R,marginRight:t===n.length-1?0:y},accessibilityElementsHidden:t!==H,importantForAccessibility:t===H?"yes":"no-hide-descendants",children:r(e,t)}),[r,R,y,n.length,H]),Z=useCallback((e,t)=>String(t),[]),ee=useCallback((e,t)=>({length:_,offset:_*t,index:t}),[_]);return C?_jsx(CarouselSkeleton,{...e,containerWidth:I}):_jsxs(View,{style:[U.container,p],onLayout:e=>T(e.nativeEvent.layout.width),accessibilityRole:"adjustable",accessibilityLabel:b??"Carousel",accessibilityValue:{min:0,max:Math.max(0,n.length-1),now:H,text:`Slide ${H+1} of ${n.length}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:Q,testID:f,children:[_jsx(FlatList,{ref:A,data:n,keyExtractor:i??Z,renderItem:Y,horizontal:!0,pagingEnabled:"screen"===g&&0===y,snapToInterval:_,snapToAlignment:"start",decelerationRate:"fast",showsHorizontalScrollIndicator:!1,onScroll:B?G:void 0,scrollEventThrottle:B?16:void 0,onMomentumScrollEnd:q,onScrollBeginDrag:J,onScrollEndDrag:K,getItemLayout:ee,initialScrollIndex:E,bounces:!1}),m&&n.length>1?_jsx(Pagination,{count:n.length,currentIndex:H,scrollX:V,slideStride:_,variant:h,theme:v}):null,S&&n.length>0?_jsx(ThumbnailStrip,{data:n,currentIndex:H,renderThumbnail:w,onSelect:e=>{const t=resolveHaptic(x,"selection");t&&triggerHaptic(t),$(e,!0)},theme:v}):null]})});CarouselInner.displayName="Carousel";const CarouselSkeleton=({itemWidth:e="screen",showPagination:t=!0,paginationStyle:n="dots",containerStyle:r,containerWidth:i})=>{const a="screen"===e?i||320:e;return _jsxs(View,{style:[carouselSkeletonStyles.container,r],children:[_jsx(Skeleton,{width:a,height:160,radius:"md"}),t?_jsx(View,{style:[carouselSkeletonStyles.paginationRow,{marginTop:12}],children:Array.from({length:3}).map((e,t)=>_jsx(Skeleton,"numbers"===n?{width:24,height:16,radius:"sm",style:{marginHorizontal:4}}:"bars"===n?{width:20,height:4,radius:2,style:{marginHorizontal:3}}:{shape:"circle",width:8,height:8,style:{marginHorizontal:4}},`sk-pg-${t}`))}):null]})};CarouselSkeleton.displayName="CarouselSkeleton";const carouselSkeletonStyles=StyleSheet.create({container:{alignItems:"center"},paginationRow:{flexDirection:"row",justifyContent:"center"}}),Carousel=CarouselInner;Carousel.Skeleton=CarouselSkeleton;const Pagination=({count:e,currentIndex:t,scrollX:n,slideStride:r,variant:i,theme:a})=>{if("numbers"===i)return _jsx(View,{style:paginationStyles.numbersWrap,children:_jsx(Text,{style:[paginationStyles.numbersText,{color:a.colors.text.secondary,fontSize:a.typography.fontSize.sm,fontWeight:a.typography.fontWeight.medium}],accessibilityLabel:`Slide ${t+1} of ${e}`,children:`${t+1} / ${e}`})});const l=Array.from({length:e},(e,t)=>t),s="bars"===i,o=s?24:6,c=s?36:16,u=s?3:6;return _jsx(View,{style:paginationStyles.dotRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:l.map(e=>{const i=[(e-1)*r,e*r,(e+1)*r],l=n.interpolate({inputRange:i,outputRange:[o,c,o],extrapolate:"clamp"}),s=n.interpolate({inputRange:i,outputRange:[.5,1,.5],extrapolate:"clamp"});return _jsx(Animated.View,{style:[{width:l,height:u,marginHorizontal:4,borderRadius:u/2,...smoothCorners,backgroundColor:e===t?a.colors.primary:a.colors.border.primary,opacity:s}]},e)})})},ThumbnailStrip=({data:e,currentIndex:t,renderThumbnail:n,onSelect:r,theme:i})=>_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:thumbStyles.row,accessibilityRole:"tablist",children:e.map((e,a)=>_jsx(ThumbnailItem,{item:e,index:a,isActive:a===t,renderThumbnail:n,onPress:()=>r(a),theme:i},a))}),ThumbnailItem=({item:e,index:t,isActive:n,renderThumbnail:r,onPress:i,theme:a})=>{const l=useRef(createAnimatedValue(n?1.1:1)).current;useEffect(()=>{const e=Animated.spring(l,{toValue:n?1.1:1,useNativeDriver:!0,friction:6,tension:80});return e.start(),()=>e.stop()},[n,l]);const s=useMemo(()=>r?r(e,t):e&&"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?_jsx(Image,{source:{uri:e.uri},style:thumbStyles.image,resizeMode:"cover"}):_jsx(View,{style:[thumbStyles.placeholder,{backgroundColor:a.colors.background.secondary}],children:_jsx(Text,{style:{color:a.colors.text.secondary,fontSize:a.typography.fontSize.xs,fontWeight:a.typography.fontWeight.semibold},children:t+1})}),[e,t,r,a]);return _jsx(Pressable,{onPress:i,accessibilityRole:"tab",accessibilityState:{selected:n},"aria-selected":n,accessibilityLabel:`Go to slide ${t+1}`,children:_jsx(Animated.View,{style:[thumbStyles.thumb,{borderColor:n?a.colors.primary:"transparent",transform:[{scale:l}]}],children:s})})},thumbStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:8},thumb:{width:40,height:40,marginHorizontal:4,borderRadius:6,...smoothCorners,borderWidth:2,overflow:"hidden"},image:{width:"100%",height:"100%"},placeholder:{flex:1,alignItems:"center",justifyContent:"center"}}),clamp=(e,t,n)=>Math.min(Math.max(e,t),n),buildStyles=e=>StyleSheet.create({container:{width:"100%"}}),paginationStyles=StyleSheet.create({dotRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12},numbersWrap:{alignItems:"center",justifyContent:"center",paddingVertical:12},numbersText:{textAlign:"center"}});export{Carousel};export default Carousel;
1
+ "use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,AppState,Dimensions,FlatList,Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const CarouselInner=forwardRef((e,t)=>{const{data:n,renderItem:r,keyExtractor:i,index:a,defaultIndex:s=0,onIndexChange:l,onScrollOffsetChange:o,autoPlay:c=!1,autoPlayInterval:u=4e3,loop:d=!1,showPagination:m=!0,paginationStyle:h="dots",itemWidth:g="screen",spacing:p=0,containerStyle:y,accessibilityLabel:b,testID:f,showThumbnails:x=!1,haptic:S,renderThumbnail:w,loading:C=!1}=e,v=useTheme(),j="number"==typeof a,k=d||c,[I,T]=useState(()=>Dimensions.get("window").width),R="screen"===g?I:g,_=R+p,A=useRef(null),V=useRef(createAnimatedValue(0)).current,E=clamp(j?a:s,0,Math.max(0,n.length-1)),[H,z]=useState(E),M=useRef(null),P=useRef(null),D=useRef(!1),W=useRef(H);W.current=H;const L=useCallback(e=>{const t=clamp(e,0,Math.max(0,n.length-1));z(e=>e===t?e:(l?.(t),t))},[n.length,l]),$=useCallback((e,t=!0)=>{if(0===n.length)return;const r=clamp(e,0,n.length-1);A.current?.scrollToOffset({offset:r*_,animated:t}),L(r)},[n.length,_,L]),N=useCallback(()=>{if(0===n.length)return;const e=W.current+1;e>=n.length?k&&$(0,!1):$(e,!0)},[n.length,k,$]),O=useCallback(()=>{if(0===n.length)return;const e=W.current-1;e<0?k&&$(n.length-1,!1):$(e,!0)},[n.length,k,$]);useImperativeHandle(t,()=>({scrollTo:$,next:N,prev:O}),[$,N,O]),useEffect(()=>{j&&a!==H&&$(a,!0)},[a]);const F=useCallback(()=>{M.current&&(clearInterval(M.current),M.current=null)},[]),X=useCallback(()=>{!c||n.length<=1||(F(),M.current=setInterval(()=>{if(D.current)return;const e=W.current+1;e>=n.length?$(0,!1):$(e,!0)},u))},[c,u,n.length,$,F]);useEffect(()=>(X(),()=>{F(),P.current&&clearTimeout(P.current)}),[X,F]),useEffect(()=>{const e=AppState.addEventListener("change",e=>{"active"!==e?(F(),P.current&&(clearTimeout(P.current),P.current=null)):X()});return()=>e.remove()},[X,F]);const B=m&&n.length>1&&"numbers"!==h||void 0!==o,G=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{x:V}}}],{useNativeDriver:!1,listener:o?e=>o(e.nativeEvent.contentOffset.x):void 0}),[V,o]),q=useCallback(e=>{if(_<=0)return;const t=e.nativeEvent.contentOffset.x,n=Math.round(t/_);L(n)},[_,L]),J=useCallback(()=>{D.current=!0,F(),P.current&&(clearTimeout(P.current),P.current=null)},[F]),K=useCallback(()=>{D.current=!1,c&&(P.current&&clearTimeout(P.current),P.current=setTimeout(()=>{X()},1e3))},[c,X]),Q=useCallback(e=>{switch(e.nativeEvent.actionName){case"increment":N();break;case"decrement":O()}},[N,O]),U=useMemo(()=>buildStyles(v),[v]),Y=useCallback(({item:e,index:t})=>_jsx(View,{style:{width:R,marginRight:t===n.length-1?0:p},accessibilityElementsHidden:t!==H,importantForAccessibility:t===H?"yes":"no-hide-descendants",children:r(e,t)}),[r,R,p,n.length,H]),Z=useCallback((e,t)=>String(t),[]),ee=useCallback((e,t)=>({length:_,offset:_*t,index:t}),[_]);return C?_jsx(CarouselSkeleton,{...e,containerWidth:I}):_jsxs(View,{style:[U.container,y],onLayout:e=>T(e.nativeEvent.layout.width),accessibilityRole:"adjustable",accessibilityLabel:b??"Carousel",accessibilityValue:{min:0,max:Math.max(0,n.length-1),now:H,text:`Slide ${H+1} of ${n.length}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:Q,testID:f,children:[_jsx(FlatList,{ref:A,data:n,keyExtractor:i??Z,renderItem:Y,horizontal:!0,pagingEnabled:"screen"===g&&0===p,snapToInterval:_,snapToAlignment:"start",decelerationRate:"fast",showsHorizontalScrollIndicator:!1,onScroll:B?G:void 0,scrollEventThrottle:B?16:void 0,onMomentumScrollEnd:q,onScrollBeginDrag:J,onScrollEndDrag:K,getItemLayout:ee,initialScrollIndex:E,bounces:!1}),m&&n.length>1?_jsx(Pagination,{count:n.length,currentIndex:H,scrollX:V,slideStride:_,variant:h,theme:v}):null,x&&n.length>0?_jsx(ThumbnailStrip,{data:n,currentIndex:H,renderThumbnail:w,onSelect:e=>{const t=resolveHaptic(S,"selection");t&&triggerHaptic(t),$(e,!0)},theme:v}):null]})});CarouselInner.displayName="Carousel";const CarouselSkeleton=({itemWidth:e="screen",showPagination:t=!0,paginationStyle:n="dots",containerStyle:r,containerWidth:i})=>{const a=useTheme(),s="screen"===e?i||320:e;return _jsxs(View,{style:[carouselSkeletonStyles.container,r],children:[_jsx(Skeleton,{width:s,height:160,radius:"md"}),t?_jsx(View,{style:[carouselSkeletonStyles.paginationRow,{marginTop:a.spacing.md}],children:Array.from({length:3}).map((e,t)=>_jsx(Skeleton,"numbers"===n?{width:24,height:16,radius:"sm",style:{marginHorizontal:a.spacing.xs}}:"bars"===n?{width:20,height:4,radius:"pill",style:{marginHorizontal:a.spacing.xxs}}:{shape:"circle",width:8,height:8,style:{marginHorizontal:a.spacing.xs}},`sk-pg-${t}`))}):null]})};CarouselSkeleton.displayName="CarouselSkeleton";const carouselSkeletonStyles=StyleSheet.create({container:{alignItems:"center"},paginationRow:{flexDirection:"row",justifyContent:"center"}}),Carousel=CarouselInner;Carousel.Skeleton=CarouselSkeleton;const Pagination=({count:e,currentIndex:t,scrollX:n,slideStride:r,variant:i,theme:a})=>{const s=useMemo(()=>buildPaginationStyles(a),[a]);if("numbers"===i)return _jsx(View,{style:s.numbersWrap,children:_jsx(Text,{style:[s.numbersText,{color:a.colors.text.secondary,fontSize:a.typography.fontSize.sm,fontWeight:a.typography.fontWeight.medium}],accessibilityLabel:`Slide ${t+1} of ${e}`,children:`${t+1} / ${e}`})});const l=Array.from({length:e},(e,t)=>t),o="bars"===i,c=o?24:6,u=o?36:16,d=o?3:6;return _jsx(View,{style:s.dotRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:l.map(e=>{const i=[(e-1)*r,e*r,(e+1)*r],s=n.interpolate({inputRange:i,outputRange:[c,u,c],extrapolate:"clamp"}),l=n.interpolate({inputRange:i,outputRange:[.5,1,.5],extrapolate:"clamp"});return _jsx(Animated.View,{style:[{width:s,height:d,marginHorizontal:a.spacing.xs,borderRadius:a.radius.pill,...smoothCorners,backgroundColor:e===t?a.colors.primary:a.colors.border.primary,opacity:l}]},e)})})},ThumbnailStrip=({data:e,currentIndex:t,renderThumbnail:n,onSelect:r,theme:i})=>{const a=useMemo(()=>buildThumbStyles(i),[i]);return _jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:a.row,accessibilityRole:"tablist",children:e.map((e,s)=>_jsx(ThumbnailItem,{item:e,index:s,isActive:s===t,renderThumbnail:n,onPress:()=>r(s),theme:i,styles:a},s))})},ThumbnailItem=({item:e,index:t,isActive:n,renderThumbnail:r,onPress:i,theme:a,styles:s})=>{const l=useRef(createAnimatedValue(n?1.1:1)).current;useEffect(()=>{const e=Animated.spring(l,{toValue:n?1.1:1,useNativeDriver:!0,friction:6,tension:80});return e.start(),()=>e.stop()},[n,l]);const o=useMemo(()=>r?r(e,t):e&&"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?_jsx(Image,{source:{uri:e.uri},style:s.image,resizeMode:"cover"}):_jsx(View,{style:[s.placeholder,{backgroundColor:a.colors.background.secondary}],children:_jsx(Text,{style:{color:a.colors.text.secondary,fontSize:a.typography.fontSize.xs,fontWeight:a.typography.fontWeight.semibold},children:t+1})}),[e,t,r,a,s]);return _jsx(Pressable,{onPress:i,accessibilityRole:"tab",accessibilityState:{selected:n},"aria-selected":n,accessibilityLabel:`Go to slide ${t+1}`,children:_jsx(Animated.View,{style:[s.thumb,{borderColor:n?a.colors.primary:"transparent",transform:[{scale:l}]}],children:o})})},buildThumbStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.sm},thumb:{width:40,height:40,marginHorizontal:e.spacing.xs,borderRadius:e.radius.sm,...smoothCorners,borderWidth:2,overflow:"hidden"},image:{width:"100%",height:"100%"},placeholder:{flex:1,alignItems:"center",justifyContent:"center"}}),clamp=(e,t,n)=>Math.min(Math.max(e,t),n),buildStyles=e=>StyleSheet.create({container:{width:"100%"}}),buildPaginationStyles=e=>StyleSheet.create({dotRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:e.spacing.md},numbersWrap:{alignItems:"center",justifyContent:"center",paddingVertical:e.spacing.md},numbersText:{textAlign:"center"}});export{Carousel};export default Carousel;
@@ -1 +1 @@
1
- "use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:16,md:20,lg:24},toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},toneOnColor=(e,r)=>{switch(r){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},Checkbox=forwardRef((e,r)=>{const{checked:t,defaultChecked:s,onChange:o,indeterminate:i=!1,disabled:a=!1,label:n,description:l,error:c,help:d,labelLines:h,size:p="md",tone:m="primary",accessibilityLabel:u,haptic:x,style:b,boxStyle:f,indeterminateBarStyle:g,containerStyle:y,labelStyle:w,testID:C,...S}=e,[j,k]=useControllableState({value:t,defaultValue:s??!1,onChange:o}),T=useTheme(),v=useMemo(()=>buildStyles(T),[T]),R=T.components.checkbox?.[p]?.boxSize??sizeMap[p],_=T.colors.border.width,L=T.components.checkbox?.labelGap??10,V=toneColor(T,m),M=j||i,A=useRef(createAnimatedValue(M?1:0)).current;useEffect(()=>{const e=Animated.spring(A,{toValue:M?1:0,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[M,A,T.motion.spring.snappy]);const D=A.interpolate({inputRange:[0,1],outputRange:[0,1]}),F=u??fieldTextAsString(n),I=!0===c||hasFieldText(c),P=M?V:a?T.colors.border.primary:I?T.colors.field.borderError:T.colors.border.primary,H=M?V:a?T.colors.surface.disabled:"transparent",B=a&&!M?T.colors.text.disabled:toneOnColor(T,m),W=Math.round(.72*R),z=Math.round(.55*R),E=Math.max(2,Math.round(.12*R)),O=_jsxs(Pressable,{ref:r,onPress:e=>{if(a)return;const r=resolveHaptic(x,"selection");r&&triggerHaptic(r),k(!j),S.onPressOut?.(e)},disabled:a,accessibilityRole:"checkbox",accessibilityLabel:F,accessibilityHint:S.accessibilityHint??fieldTextAsString(l),accessibilityState:{checked:i?"mixed":j,disabled:a},"aria-checked":i?"mixed":j,"aria-disabled":a,testID:C,hitSlop:6,...S,style:({pressed:e})=>[v.row,hasChoiceDetail(l,c)?v.rowTop:null,hasFieldText(d)?v.rowShrink:null,{opacity:a?.55:e?.85:1},y,b],children:[_jsx(View,{style:[v.box,{width:R,height:R,borderWidth:_,borderRadius:T.radius.xs,...smoothCorners,borderColor:P,backgroundColor:H},f],children:_jsx(Animated.View,{style:[v.glyphWrap,{opacity:A,transform:[{scale:D}]}],children:i?_jsx(View,{style:[{width:z,height:E,borderRadius:E/2,...smoothCorners,backgroundColor:B},g]}):_jsx(Svg,{width:W,height:W,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:B,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),_jsx(ChoiceText,{label:n,description:l,error:c,disabled:a,labelLines:h||void 0,descriptionLines:h||void 0,style:{marginLeft:L},labelStyle:w})]});return hasFieldText(d)?_jsxs(View,{style:[v.helpRow,hasChoiceDetail(l,c)?v.rowTop:null],children:[O,_jsx(View,{style:[v.help,{marginLeft:T.spacing.xs}],children:d})]}):O});Checkbox.displayName="Checkbox";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"},rowShrink:{flexShrink:1},helpRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0},box:{alignItems:"center",justifyContent:"center"},glyphWrap:{alignItems:"center",justifyContent:"center"}});export{Checkbox};export default Checkbox;
1
+ "use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveCheckboxSize,spaceOf,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},toneOnColor=(e,r)=>{switch(r){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},Checkbox=forwardRef((e,r)=>{const{checked:t,defaultChecked:s,onChange:o,indeterminate:i=!1,disabled:a=!1,label:l,description:n,error:c,help:d,labelLines:h,size:p="md",tone:m="primary",accessibilityLabel:u,haptic:b,style:x,boxStyle:f,indeterminateBarStyle:g,containerStyle:y,labelStyle:C,testID:w,...S}=e,[k,j]=useControllableState({value:t,defaultValue:s??!1,onChange:o}),v=useTheme(),T=useMemo(()=>buildStyles(v),[v]),{boxSize:R}=useMemo(()=>resolveCheckboxSize(v,p),[v,p]),_=v.colors.border.width,L=spaceOf(v,v.components.checkbox.labelGap,"components.checkbox.labelGap"),V=toneColor(v,m),A=k||i,D=useRef(createAnimatedValue(A?1:0)).current;useEffect(()=>{const e=Animated.spring(D,{toValue:A?1:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[A,D,v.motion.spring.snappy]);const M=D.interpolate({inputRange:[0,1],outputRange:[0,1]}),F=u??fieldTextAsString(l),I=!0===c||hasFieldText(c),P=A?V:a?v.colors.border.primary:I?v.colors.field.borderError:v.colors.border.primary,H=A?V:a?v.colors.surface.disabled:"transparent",B=a&&!A?v.colors.text.disabled:toneOnColor(v,m),O=Math.round(.72*R),W=Math.round(.55*R),z=Math.max(2,Math.round(.12*R)),E=_jsxs(Pressable,{ref:r,onPress:e=>{if(a)return;const r=resolveHaptic(b,"selection");r&&triggerHaptic(r),j(!k),S.onPressOut?.(e)},disabled:a,accessibilityRole:"checkbox",accessibilityLabel:F,accessibilityHint:S.accessibilityHint??fieldTextAsString(n),accessibilityState:{checked:i?"mixed":k,disabled:a},"aria-checked":i?"mixed":k,"aria-disabled":a,testID:w,hitSlop:6,...S,style:({pressed:e})=>[T.row,hasChoiceDetail(n,c)?T.rowTop:null,hasFieldText(d)?T.rowShrink:null,{opacity:a?.55:e?.85:1},y,x],children:[_jsx(View,{style:[T.box,{width:R,height:R,borderWidth:_,borderRadius:v.radius.sm,...smoothCorners,borderColor:P,backgroundColor:H},f],children:_jsx(Animated.View,{style:[T.glyphWrap,{opacity:D,transform:[{scale:M}]}],children:i?_jsx(View,{style:[{width:W,height:z,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:B},g]}):_jsx(Svg,{width:O,height:O,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:B,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),_jsx(ChoiceText,{label:l,description:n,error:c,disabled:a,labelLines:h||void 0,descriptionLines:h||void 0,style:{marginLeft:L},labelStyle:C})]});return hasFieldText(d)?_jsxs(View,{style:[T.helpRow,hasChoiceDetail(n,c)?T.rowTop:null],children:[E,_jsx(View,{style:[T.help,{marginLeft:v.spacing.xs}],children:d})]}):E});Checkbox.displayName="Checkbox";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"},rowShrink:{flexShrink:1},helpRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0},box:{alignItems:"center",justifyContent:"center"},glyphWrap:{alignItems:"center",justifyContent:"center"}});export{Checkbox};export default Checkbox;
@@ -1 +1 @@
1
- "use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";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{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,o)=>{switch(o){case"primary":return{base:e.colors.primaryMuted,on:e.colors.primary,ink:e.colors.toneText.primary,border:e.colors.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"success":return{base:e.colors.background.tertiary,on:e.colors.success,ink:e.colors.toneText.success,border:e.colors.success,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"warning":return{base:e.colors.background.tertiary,on:e.colors.warning,ink:e.colors.toneText.warning,border:e.colors.warning,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"error":return{base:e.colors.background.tertiary,on:e.colors.error,ink:e.colors.toneText.error,border:e.colors.error,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"info":return{base:e.colors.background.tertiary,on:e.colors.info,ink:e.colors.toneText.info,border:e.colors.info,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,ink:e.colors.text.primary,border:e.colors.border.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary}}},SOFT_FILL_OPACITY=.14,SOFT_SELECTED_FILL_OPACITY=.24,sizeMap={sm:{paddingH:10,paddingV:4,fontSize:12,minHeight:26,closeSize:16,closeFont:12,gap:6,iconSize:14},md:{paddingH:12,paddingV:6,fontSize:13,minHeight:32,closeSize:18,closeFont:13,gap:8,iconSize:16}},hasChipCount=e=>null!=e&&""!==e,Chip=forwardRef((e,o)=>{const{label:r,count:t,selected:s=!1,selectionMode:i="single",onPress:l,onClose:n,leftIcon:a,iconVariant:c,variant:d="filled",tone:p="neutral",size:m="md",disabled:u=!1,loading:y=!1,accessibilityLabel:g,haptic:b,style:h,textStyle:f,containerStyle:S,countStyle:x,closeButtonStyle:z,closeIconStyle:k,testID:C}=e,I=useTheme(),M=!!l&&!u,j="radio"===i,H=!!l&&(!u||j),T=hasChipCount(t),{style:w,pressIn:_,pressOut:F}=usePressAnimation({enabled:M}),O=useMemo(()=>toneFor(I,p),[I,p]),B=I.components.chip?.[m],L={paddingH:B?.paddingHorizontal??sizeMap[m].paddingH,paddingV:B?.paddingVertical??sizeMap[m].paddingV,fontSize:B?.fontSize??sizeMap[m].fontSize,minHeight:B?.minHeight??sizeMap[m].minHeight,closeSize:B?.closeSize??sizeMap[m].closeSize,closeFont:B?.closeFontSize??sizeMap[m].closeFont,gap:B?.gap??sizeMap[m].gap,iconSize:B?.iconSize??sizeMap[m].iconSize},V=Math.max(0,Math.ceil((44-L.minHeight)/2)),P=j?{top:V,bottom:V}:void 0,v="filled"===d,A="soft"===d,R=(()=>{if(A){const e=s?O.selectedOn:O.on;return tintOf(e,s?.24:.14,s?O.selectedBg:O.base)}return s?v?O.selectedBg:"transparent":v?O.base:"transparent"})(),D=A?"transparent":s?O.selectedBorder:v?"transparent":O.border,E=u?I.colors.text.disabled:s?A?I.colors.text.primary:O.selectedInk:O.ink,$=v||A?0:I.colors.border.width,handlePress=()=>{if(!M)return;const e=resolveHaptic(b,"selection");e&&triggerHaptic(e),l?.()},N=g??(T?`${r}, ${t}`:r),Y=_jsxs(View,{style:styles.row,children:[a?_jsx(View,{style:{marginRight:L.gap},children:renderSlotIcon(a,{color:E,size:L.iconSize,disabled:u},c)}):null,_jsx(Text,{style:[styles.label,{color:E,fontSize:L.fontSize,...fontFor(I,"medium")},f],numberOfLines:1,children:r??" "}),T?_jsx(Text,{style:[styles.count,{color:E,fontSize:Math.min(I.typography.fontSize.xs,L.fontSize),marginLeft:I.spacing.xs,...fontFor(I,"normal")},x],numberOfLines:1,children:t}):null,n?_jsx(Pressable,{onPress:()=>{u||(!1!==b&&triggerHaptic("impactLight"),n?.())},disabled:u,accessibilityRole:"button",accessibilityLabel:`Remove ${r}`,accessibilityState:{disabled:u},"aria-disabled":u,hitSlop:6,style:({pressed:e})=>[styles.close,{width:L.closeSize,height:L.closeSize,borderRadius:L.closeSize/2,...smoothCorners,marginLeft:L.gap,backgroundColor:e?I.colors.surface.pressed:I.colors.surface.hovered},z],children:_jsx(Text,{style:[{color:E,fontSize:L.closeFont,...fontFor(I,"bold"),lineHeight:L.closeFont+2},k],maxFontSizeMultiplier:1,children:"×"})}):null]}),U={paddingHorizontal:L.paddingH,paddingVertical:L.paddingV,minHeight:L.minHeight,borderRadius:I.radius.full,...smoothCorners,backgroundColor:R,borderWidth:$,borderColor:D,opacity:u?.55:1};let W;return W=H?_jsx(Animated.View,{style:[w,{alignSelf:"flex-start"}],children:_jsx(Pressable,{ref:o,onPress:handlePress,onPressIn:_,onPressOut:F,disabled:!M,accessibilityRole:j?"radio":"multiple"===i?"checkbox":"button",accessibilityLabel:N,accessibilityState:j||"multiple"===i?{checked:s,disabled:u}:{selected:s,disabled:u},"aria-checked":j||"multiple"===i?s:void 0,"aria-selected":j||"multiple"===i?void 0:s,"aria-disabled":u,hitSlop:P,android_ripple:{color:I.colors.surface.pressed,borderless:!1},testID:C,style:({pressed:e})=>[styles.base,U,e&&"outlined"===d?{backgroundColor:I.colors.surface.pressed}:null,S,h],children:Y})}):_jsx(View,{ref:o,style:[styles.base,U,S,h],accessible:!0,accessibilityRole:"text",accessibilityLabel:N,accessibilityState:{selected:s,disabled:u},"aria-selected":s,"aria-disabled":u,testID:C,children:Y}),y?_jsx(ChipSkeleton,{...e}):W});Chip.displayName="Chip";const ChipSkeleton=({label:e,count:o,size:r="md",leftIcon:t,onClose:s,style:i,containerStyle:l})=>{const n=sizeMap[r],a=Math.max(40,Math.min(120,7*(e??"").length)),c=n.minHeight,d=c/2,p=a+2*n.paddingH+(hasChipCount(o)?n.gap/2+7*String(o).length:0)+(void 0!==t?n.gap+14:0)+(void 0!==s?n.gap+n.closeSize:0);return _jsx(Skeleton,{width:p,height:c,radius:d,style:[{alignSelf:"flex-start"},l,i]})};ChipSkeleton.displayName="ChipSkeleton",Chip.Skeleton=ChipSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},row:{flexDirection:"row",alignItems:"center"},label:{flexShrink:1,textAlign:"center"},count:{flexShrink:0,fontVariant:["tabular-nums"]},close:{alignItems:"center",justifyContent:"center"}});export{Chip};export default Chip;
1
+ "use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveChipSize,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{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors.primaryMuted,on:e.colors.primary,ink:e.colors.toneText.primary,border:e.colors.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"success":return{base:e.colors.background.tertiary,on:e.colors.success,ink:e.colors.toneText.success,border:e.colors.success,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"warning":return{base:e.colors.background.tertiary,on:e.colors.warning,ink:e.colors.toneText.warning,border:e.colors.warning,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"error":return{base:e.colors.background.tertiary,on:e.colors.error,ink:e.colors.toneText.error,border:e.colors.error,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};case"info":return{base:e.colors.background.tertiary,on:e.colors.info,ink:e.colors.toneText.info,border:e.colors.info,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,ink:e.colors.text.primary,border:e.colors.border.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedInk:e.colors.toneText.primary,selectedBorder:e.colors.primary}}},SOFT_FILL_OPACITY=.14,SOFT_SELECTED_FILL_OPACITY=.24,hasChipCount=e=>null!=e&&""!==e,Chip=forwardRef((e,r)=>{const{label:o,count:t,selected:s=!1,selectionMode:i="single",onPress:l,onClose:n,leftIcon:c,iconVariant:a,variant:d="filled",tone:p="neutral",size:m="md",disabled:u=!1,loading:y=!1,accessibilityLabel:b,haptic:h,style:f,textStyle:g,containerStyle:x,countStyle:S,closeButtonStyle:k,closeIconStyle:C,testID:I}=e,j=useTheme(),T=!!l&&!u,w="radio"===i,_=!!l&&(!u||w),M=hasChipCount(t),{style:O,pressIn:v,pressOut:z}=usePressAnimation({enabled:T}),B=useMemo(()=>toneFor(j,p),[j,p]),L=useMemo(()=>resolveChipSize(j,m),[j,m]),P=Math.max(0,Math.ceil((44-L.minHeight)/2)),F=w?{top:P,bottom:P}:void 0,H="filled"===d,R="soft"===d,A=(()=>{if(R){const e=s?B.selectedOn:B.on;return tintOf(e,s?.24:.14,s?B.selectedBg:B.base)}return s?H?B.selectedBg:"transparent":H?B.base:"transparent"})(),V=R?"transparent":s?B.selectedBorder:H?"transparent":B.border,D=u?j.colors.text.disabled:s?R?j.colors.text.primary:B.selectedInk:B.ink,E=H||R?0:j.colors.border.width,handlePress=()=>{if(!T)return;const e=resolveHaptic(h,"selection");e&&triggerHaptic(e),l?.()},Y=b??(M?`${o}, ${t}`:o),$=_jsxs(View,{style:styles.row,children:[c?_jsx(View,{style:{marginRight:L.gap},children:renderSlotIcon(c,{color:D,size:L.icon,disabled:u},a)}):null,_jsx(Text,{style:[styles.label,{color:D,fontSize:L.text,...fontFor(j,"medium")},g],numberOfLines:1,children:o??" "}),M?_jsx(Text,{style:[styles.count,{color:D,fontSize:Math.min(j.typography.fontSize.xs,L.text),marginLeft:j.spacing.xs,...fontFor(j,"normal")},S],numberOfLines:1,children:t}):null,n?_jsx(Pressable,{onPress:()=>{u||(!1!==h&&triggerHaptic("impactLight"),n?.())},disabled:u,accessibilityRole:"button",accessibilityLabel:`Remove ${o}`,accessibilityState:{disabled:u},"aria-disabled":u,hitSlop:6,style:({pressed:e})=>[styles.close,{width:L.closeSize,height:L.closeSize,borderRadius:L.closeSize/2,...smoothCorners,marginLeft:L.gap,backgroundColor:e?j.colors.surface.pressed:j.colors.surface.hovered},k],children:_jsx(Text,{style:[{color:D,fontSize:L.closeText,...fontFor(j,"bold"),lineHeight:L.closeText+2},C],maxFontSizeMultiplier:1,children:"×"})}):null]}),N={paddingHorizontal:L.paddingX,paddingVertical:L.paddingY,minHeight:L.minHeight,borderRadius:j.radius.pill,...smoothCorners,overflow:"hidden",backgroundColor:A,borderWidth:E,borderColor:V,opacity:u?.55:1};let X;return X=_?_jsx(Animated.View,{style:[O,{alignSelf:"flex-start",borderRadius:j.radius.pill,...smoothCorners,overflow:"hidden"}],children:_jsx(Pressable,{ref:r,onPress:handlePress,onPressIn:v,onPressOut:z,disabled:!T,accessibilityRole:w?"radio":"multiple"===i?"checkbox":"button",accessibilityLabel:Y,accessibilityState:w||"multiple"===i?{checked:s,disabled:u}:{selected:s,disabled:u},"aria-checked":w||"multiple"===i?s:void 0,"aria-selected":w||"multiple"===i?void 0:s,"aria-disabled":u,hitSlop:F,android_ripple:{color:j.colors.surface.pressed,borderless:!1},testID:I,style:({pressed:e})=>[styles.base,N,e&&"outlined"===d?{backgroundColor:j.colors.surface.pressed}:null,x,f],children:$})}):_jsx(View,{ref:r,style:[styles.base,N,x,f],accessible:!0,accessibilityRole:"text",accessibilityLabel:Y,accessibilityState:{selected:s,disabled:u},"aria-selected":s,"aria-disabled":u,testID:I,children:$}),y?_jsx(ChipSkeleton,{...e}):X});Chip.displayName="Chip";const ChipSkeleton=({label:e,count:r,size:o="md",leftIcon:t,onClose:s,style:i,containerStyle:l})=>{const n=useTheme(),c=resolveChipSize(n,o),a=Math.max(40,Math.min(120,7*(e??"").length)),d=c.minHeight,p=d/2,m=a+2*c.paddingX+(hasChipCount(r)?c.gap/2+7*String(r).length:0)+(void 0!==t?c.gap+14:0)+(void 0!==s?c.gap+c.closeSize:0);return _jsx(Skeleton,{width:m,height:d,radius:p,style:[{alignSelf:"flex-start"},l,i]})};ChipSkeleton.displayName="ChipSkeleton",Chip.Skeleton=ChipSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},row:{flexDirection:"row",alignItems:"center"},label:{flexShrink:1,textAlign:"center"},count:{flexShrink:0,fontVariant:["tabular-nums"]},close:{alignItems:"center",justifyContent:"center"}});export{Chip};export default Chip;