@webority/mobile-ui 0.17.0 → 0.18.1
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.
- package/lib/commonjs/canvasKit/index.js +1 -1
- package/lib/commonjs/components/AppBar/AppBar.js +1 -1
- package/lib/commonjs/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Chip/Chip.js +1 -1
- package/lib/commonjs/components/Descriptions/Descriptions.js +1 -1
- package/lib/commonjs/components/Dialog/Dialog.js +1 -1
- package/lib/commonjs/components/EmptyState/EmptyState.js +1 -1
- package/lib/commonjs/components/ForceUpdateDialog/ForceUpdateDialog.js +1 -1
- package/lib/commonjs/components/ListItem/ListItem.js +1 -1
- package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
- package/lib/commonjs/components/TagInput/TagInput.js +1 -1
- package/lib/commonjs/components/Tour/Tour.js +1 -1
- package/lib/commonjs/theme/tokens.js +1 -1
- package/lib/module/canvasKit/index.js +1 -1
- package/lib/module/components/AppBar/AppBar.js +1 -1
- package/lib/module/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/module/components/Button/Button.js +1 -1
- package/lib/module/components/Chip/Chip.js +1 -1
- package/lib/module/components/Descriptions/Descriptions.js +1 -1
- package/lib/module/components/Dialog/Dialog.js +1 -1
- package/lib/module/components/EmptyState/EmptyState.js +1 -1
- package/lib/module/components/ForceUpdateDialog/ForceUpdateDialog.js +1 -1
- package/lib/module/components/ListItem/ListItem.js +1 -1
- package/lib/module/components/OTPInput/OTPInput.js +1 -1
- package/lib/module/components/TagInput/TagInput.js +1 -1
- package/lib/module/components/Tour/Tour.js +1 -1
- package/lib/module/theme/tokens.js +1 -1
- package/lib/typescript/commonjs/canvasKit/index.d.ts +8 -1
- package/lib/typescript/commonjs/components/BottomNavigation/BottomNavigation.d.ts +3 -2
- package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts +1 -1
- package/lib/typescript/commonjs/components/FilePicker/FilePicker.d.ts +9 -9
- package/lib/typescript/commonjs/components/ListItem/ListItem.d.ts +5 -0
- package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts +3 -1
- package/lib/typescript/commonjs/components/ProfilePicker/ProfilePicker.d.ts +6 -6
- package/lib/typescript/commonjs/components/TagInput/TagInput.d.ts +3 -1
- package/lib/typescript/commonjs/components/Tour/Tour.d.ts +7 -0
- package/lib/typescript/module/canvasKit/index.d.ts +8 -1
- package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts +3 -2
- package/lib/typescript/module/components/Dialog/Dialog.d.ts +1 -1
- package/lib/typescript/module/components/FilePicker/FilePicker.d.ts +9 -9
- package/lib/typescript/module/components/ListItem/ListItem.d.ts +5 -0
- package/lib/typescript/module/components/OTPInput/OTPInput.d.ts +3 -1
- package/lib/typescript/module/components/ProfilePicker/ProfilePicker.d.ts +6 -6
- package/lib/typescript/module/components/TagInput/TagInput.d.ts +3 -1
- package/lib/typescript/module/components/Tour/Tour.d.ts +7 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{createElement}from"react";import{StyleSheet,View}from"react-native";import{useKeyboardState}from"react-native-keyboard-controller";import{darkTheme,lightTheme}from"../theme/index.js";const STATUS_BAR_HEIGHT={Ios:54,Android:24},HOME_AREA_HEIGHT={Ios:34,Android:0},HOME_BAR_WIDTH=134,HOME_BAR_HEIGHT=5,MARKER={statusBar:"AppStatusBar",homeIndicator:"AppHomeIndicator",safeArea:"AppSafeArea",keyboardFrame:"AppKeyboardFrame"},wuiMarker=e=>({dataSet:{wui:e}}),paletteFor=e=>"dark"===e?darkTheme:lightTheme,styles=StyleSheet.create({overlayTop:{position:"absolute",top:0,left:0,right:0},overlayBottom:{position:"absolute",bottom:0,left:0,right:0,alignItems:"center",justifyContent:"flex-end"},fill:{flex:1},homeBar:{width:134,height:5}});export const StatusBar=({os:e,colorMode:o="light"})=>{const t=paletteFor(o);return createElement(View,{...wuiMarker(MARKER.statusBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayTop,{height:STATUS_BAR_HEIGHT[e],backgroundColor:t.colors.background.primary}]})};export const HomeIndicator=({os:e,colorMode:o="light"})=>{const t=paletteFor(o);return createElement(View,{...wuiMarker(MARKER.homeIndicator),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:HOME_AREA_HEIGHT[e]}]},"Ios"===e?createElement(View,{style:[styles.homeBar,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full,marginBottom:t.spacing.sm}]}):null)};export const SafeArea=({os:e,children:o})=>createElement(View,{...wuiMarker(MARKER.safeArea),style:[styles.fill,{paddingTop:STATUS_BAR_HEIGHT[e],paddingBottom:HOME_AREA_HEIGHT[e]}]},o);export const KeyboardFrame=({colorMode:e="light",children:
|
|
1
|
+
"use strict";import{createElement}from"react";import{StyleSheet,View}from"react-native";import{useKeyboardState}from"react-native-keyboard-controller";import{darkTheme,lightTheme}from"../theme/index.js";const STATUS_BAR_HEIGHT={Ios:54,Android:24},HOME_AREA_HEIGHT={Ios:34,Android:0},HOME_BAR_WIDTH=134,HOME_BAR_HEIGHT=5,NAV_BAR_HEIGHT=24,NAV_PILL_WIDTH=108,NAV_PILL_HEIGHT=4,KEYBOARD_HEIGHT_IOS=336,KEYBOARD_HEIGHT_ANDROID=300,MARKER={statusBar:"AppStatusBar",homeIndicator:"AppHomeIndicator",navigationBar:"AppNavigationBar",safeArea:"AppSafeArea",keyboardFrame:"AppKeyboardFrame"},wuiMarker=e=>({dataSet:{wui:e}}),paletteFor=e=>"dark"===e?darkTheme:lightTheme,styles=StyleSheet.create({overlayTop:{position:"absolute",top:0,left:0,right:0},overlayBottom:{position:"absolute",bottom:0,left:0,right:0,alignItems:"center",justifyContent:"flex-end"},fill:{flex:1},homeBar:{width:134,height:5},navPill:{width:108,height:4},keyboardPreview:{position:"absolute",bottom:0,left:0,right:0}});export const StatusBar=({os:e,colorMode:o="light"})=>{const t=paletteFor(o);return createElement(View,{...wuiMarker(MARKER.statusBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayTop,{height:STATUS_BAR_HEIGHT[e],backgroundColor:t.colors.background.primary}]})};export const HomeIndicator=({os:e,colorMode:o="light"})=>{const t=paletteFor(o);return createElement(View,{...wuiMarker(MARKER.homeIndicator),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:HOME_AREA_HEIGHT[e]}]},"Ios"===e?createElement(View,{style:[styles.homeBar,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full,marginBottom:t.spacing.sm}]}):null)};export const NavigationBar=({os:e,colorMode:o="light"})=>{if("Android"!==e)return null;const t=paletteFor(o);return createElement(View,{...wuiMarker(MARKER.navigationBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:24,justifyContent:"center"}]},createElement(View,{style:[styles.navPill,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full}]}))};export const SafeArea=({os:e,children:o})=>createElement(View,{...wuiMarker(MARKER.safeArea),style:[styles.fill,{paddingTop:STATUS_BAR_HEIGHT[e],paddingBottom:HOME_AREA_HEIGHT[e]}]},o);const KEYBOARD_PREVIEW_HEIGHT={ios:336,android:300};export const KeyboardFrame=({colorMode:e="light",previewOs:o,children:t})=>{const r=paletteFor(e),a=useKeyboardState(e=>Math.max(0,Math.round(e.height)));return createElement(View,{...wuiMarker(MARKER.keyboardFrame),style:[styles.fill,{paddingBottom:a,backgroundColor:r.colors.background.primary}]},t,o?createElement(View,{pointerEvents:"none",style:[styles.keyboardPreview,{height:KEYBOARD_PREVIEW_HEIGHT[o],backgroundColor:r.colors.background.primary}]}):null)};const SOURCE="@webority/mobile-ui",osProp={name:"os",type:"enum",enum:["Ios","Android"],required:!0},colorModeProp={name:"colorMode",type:"enum",enum:["light","dark"],required:!1};export const phoneChromeEntries=[{name:"StatusBar",marker:MARKER.statusBar,acceptsChildren:!1,props:[osProp,colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"HomeIndicator",marker:MARKER.homeIndicator,acceptsChildren:!1,props:[osProp,colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"NavigationBar",marker:MARKER.navigationBar,acceptsChildren:!1,props:[osProp,colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"SafeArea",marker:MARKER.safeArea,acceptsChildren:!0,props:[osProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"KeyboardFrame",marker:MARKER.keyboardFrame,acceptsChildren:!0,props:[colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const variantSize=(t,e)=>{switch(e){case"compact":return{height:44,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:t.typography.fontSize["2xl"],titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:t,side:e,badgeStyle:i,haptic:o,flush:n})=>{const r=useTheme(),{style:
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const variantSize=(t,e)=>{switch(e){case"compact":return{height:44,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:t.typography.fontSize["2xl"],titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:t,side:e,badgeStyle:i,haptic:o,flush:n})=>{const r=useTheme(),{style:l,pressIn:a,pressOut:s}=usePressAnimation({enabled:!0}),c=useMemo(()=>buildActionStyles(r),[r]),p=t.badge,d=void 0!==p&&0!==p,m=void 0!==t.text;return _jsx(Animated.View,{style:l,children:_jsxs(Pressable,{onPress:()=>{const e=resolveHaptic(o,"selection");e&&triggerHaptic(e),t.onPress()},onPressIn:a,onPressOut:s,accessibilityRole:"button",accessibilityLabel:t.accessibilityLabel??t.text,testID:t.testID,android_ripple:{color:r.colors.surface.pressed,borderless:!m},style:({pressed:t})=>[m?c.textButton:c.actionButton,n?null:"left"===e?c.actionLeft:c.actionRight,t&&!m?c.actionPressed:null,t&&m?c.textPressed:null],children:[m?_jsx(Text,{style:c.actionText,numberOfLines:1,children:t.text}):_jsx(View,{style:c.iconWrap,children:t.icon}),d?_jsx(View,{style:[c.badge,i],pointerEvents:"none",children:_jsx(Text,{style:c.badgeText,numberOfLines:1,children:String(p)})}):null,t.dot?_jsx(View,{testID:t.testID?`${t.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((t,e)=>{const{title:i,subtitle:o,titleAlignment:n="left",leftAction:r,rightActions:l,leading:a,trailing:s,onBack:c,gutter:p,titleVariant:d,titleOffset:m,height:g,divider:u,variant:h="default",transparent:f=!1,scrollY:x,style:y,containerStyle:b,titleStyle:S,subtitleStyle:B,badgeStyle:A,haptic:j,testID:w}=t,_=useTheme(),T=useSafeAreaInsets(),z=useMemo(()=>variantSize(_,h),[_,h]),C=useMemo(()=>buildStyles(_),[_]),I="large"===h&&void 0!==x,R=_.components.appBar?.iconSize??24,v=_.components.appBar?.actionButtonSize??44,W=r??(c?{icon:_jsx(AppIcon,{name:"arrow-left",size:R,color:_.colors.text.primary}),onPress:c,accessibilityLabel:"Back"}:void 0),L=s?void 0:l?.[l.length-1],opticalInset=t=>void 0===t?0:void 0!==t.text?_.spacing.sm:Math.max((v-R)/2,0),V=void 0===p?null:{paddingLeft:Math.max(p-opticalInset(W),0),paddingRight:Math.max(p-opticalInset(L),0)},O=void 0!==m,P=Boolean(W)||Boolean(a),H=u??!f,D=_.components.appBar?.dividerWidth??StyleSheet.hairlineWidth,E=_.components.appBar?.collapseTranslateDistance??-20,M=useMemo(()=>{if(!x)return null;const t={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:x.interpolate({...t,outputRange:[1,.71]}),titleTranslateY:x.interpolate({...t,outputRange:[0,E]}),titleTranslateX:x.interpolate({...t,outputRange:"center"===n?[0,0]:[0,8]}),subtitleOpacity:x.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:x.interpolate({...t,outputRange:[96,56]}),borderOpacity:x.interpolate({...t,outputRange:[0,1]})}},[x,n,E]),k=I&&M?{transform:[{translateX:M.titleTranslateX},{translateY:M.titleTranslateY},{scale:M.titleScale}]}:null,N=i?d?_jsx(Animated.View,{style:k,children:_jsx(ThemedText,{variant:d,align:"center"===n?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[C.titleVariant,S],children:i})}):_jsx(Animated.Text,{accessibilityRole:"header",style:[C.title,{fontSize:z.titleSize,fontWeight:_.typography.fontWeight[z.titleWeight],textAlign:"center"===n?"center":"left"},k,S],numberOfLines:1,children:i}):null,F=o?_jsx(Animated.Text,{style:[C.subtitle,{textAlign:"center"===n?"center":"left"},I&&M?{opacity:M.subtitleOpacity}:null,B],numberOfLines:1,children:o}):null,Y=_jsxs(View,{style:[C.titleColumn,"center"===n?C.titleColumnCenter:null,z.alignBottom?C.titleColumnBottom:null],children:[N,F]}),X=I?Animated.View:View,G=I&&M?{height:Animated.add(M.barHeight,new Animated.Value(T.top))}:{height:(g??z.height)+T.top};return _jsxs(X,{ref:e,testID:w,style:[C.root,{paddingTop:T.top,backgroundColor:f?"transparent":_.colors.background.elevated},G,!I&&H?{borderBottomWidth:D,borderBottomColor:_.colors.border.primary}:null,y,b],children:[I&&M&&H?_jsx(Animated.View,{pointerEvents:"none",style:[C.animatedBorder,{backgroundColor:_.colors.border.primary,opacity:M.borderOpacity}]}):null,_jsxs(View,{style:[C.row,z.alignBottom?C.rowAlignBottom:null,V,{flex:1}],children:[_jsxs(View,{style:[C.sideSlot,O?C.sideSlotCompact:null],children:[W?_jsx(ActionButton,{action:W,side:"left",haptic:j,flush:O}):null,null!=a&&!1!==a?_jsx(View,{style:C.slotNode,children:a}):null]}),_jsx(View,{pointerEvents:"none",style:[C.center,"center"===n?C.centerAligned:C.centerLeft,O?{paddingLeft:P?m:0,paddingRight:0}:null],children:Y}),_jsxs(View,{style:[C.sideSlot,C.sideSlotRight,O?C.sideSlotCompact:null],children:[l?.map((t,e)=>_jsx(ActionButton,{action:t,side:"right",badgeStyle:A,haptic:j,flush:O},`appbar-right-${e}`)),null!=s&&!1!==s?_jsx(View,{style:C.slotNode,children:s}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=t=>StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:t.spacing.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:t.spacing.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:t.components.appBar?.sideSlotMinWidth??48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,paddingHorizontal:t.spacing.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:t.colors.text.primary},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:t.components.appBar?.subtitleMarginTop??2,color:t.colors.text.tertiary,fontSize:t.typography.fontSize.sm,fontWeight:t.typography.fontWeight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:StyleSheet.hairlineWidth}}),buildActionStyles=t=>StyleSheet.create({actionButton:{width:t.components.appBar?.actionButtonSize??44,height:t.components.appBar?.actionButtonSize??44,borderRadius:t.radius.full,...smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:t.spacing.xs},actionRight:{marginLeft:t.spacing.xs},actionPressed:{backgroundColor:t.colors.surface.pressed},textButton:{minWidth:44,minHeight:44,paddingHorizontal:t.spacing.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},actionText:{color:t.colors.text.link,fontSize:t.typography.fontSize.base,...fontFor(t,"semibold")},dot:{position:"absolute",top:t.components.appBar?.dotOffset??10,right:t.components.appBar?.dotOffset??10,width:t.components.appBar?.dotSize??8,height:t.components.appBar?.dotSize??8,borderRadius:t.radius.full,backgroundColor:t.colors.error},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:t.components.appBar?.badgeOffset??4,right:t.components.appBar?.badgeOffset??4,minWidth:t.components.appBar?.badgeMinWidth??16,height:t.components.appBar?.badgeHeight??16,paddingHorizontal:t.components.appBar?.badgePaddingHorizontal??4,borderRadius:t.radius.full,...smoothCorners,backgroundColor:t.colors.error,alignItems:"center",justifyContent:"center"},badgeText:{color:t.colors.onError,fontSize:t.components.appBar?.badgeFontSize??10,fontWeight:t.typography.fontWeight.semibold,lineHeight:t.components.appBar?.badgeLineHeight??12}});export{AppBar};export default AppBar;
|
|
@@ -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,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?T.bottom+L.spacing.sm:0):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 +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:
|
|
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 +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:
|
|
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:h,style:b,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)),v=j?{top:V,bottom:V}:void 0,P="filled"===d,R="soft"===d,A=(()=>{if(R){const e=s?O.selectedOn:O.on;return tintOf(e,s?.24:.14,s?O.selectedBg:O.base)}return s?P?O.selectedBg:"transparent":P?O.base:"transparent"})(),D=R?"transparent":s?O.selectedBorder:P?"transparent":O.border,E=u?I.colors.text.disabled:s?R?I.colors.text.primary:O.selectedInk:O.ink,$=P||R?0:I.colors.border.width,handlePress=()=>{if(!M)return;const e=resolveHaptic(h,"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!==h&&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,overflow:"hidden",backgroundColor:A,borderWidth:$,borderColor:D,opacity:u?.55:1};let W;return W=H?_jsx(Animated.View,{style:[w,{alignSelf:"flex-start",borderRadius:I.radius.full,...smoothCorners,overflow:"hidden"}],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:v,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,b],children:Y})}):_jsx(View,{ref:o,style:[styles.base,U,S,b],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 +1 @@
|
|
|
1
|
-
"use strict";import{isValidElement,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{Notation,NotationInkContext}from"../Notation/Notation.js";import{resolveColor}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length,isInlineText=e=>"string"==typeof e||"number"==typeof e||isValidElement(e)&&e.type===Notation||Array.isArray(e)&&e.length>0&&e.every(isInlineText);export const Descriptions=({items:e,columns:t=1,size:o="md",bordered:
|
|
1
|
+
"use strict";import{isValidElement,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{Notation,NotationInkContext}from"../Notation/Notation.js";import{resolveColor}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length,isInlineText=e=>"string"==typeof e||"number"==typeof e||isValidElement(e)&&e.type===Notation||Array.isArray(e)&&e.length>0&&e.every(isInlineText);export const Descriptions=({items:e,columns:t=1,size:o="md",bordered:l=!1,title:r,variant:i="list",style:s,testID:n})=>{const a=useTheme(),m=useMemo(()=>buildStyles(a),[a]),d="sm"===o?a.typography.fontSize.xs:a.typography.fontSize.sm,y="sm"===o?a.typography.fontSize.sm:a.typography.fontSize.base,c="sm"===o?a.spacing.xs:a.spacing.sm,x="summary"===i,u=useMemo(()=>({fontSize:d,color:a.colors.text.tertiary}),[d,a.colors.text.tertiary]),p=useMemo(()=>({fontSize:y,color:a.colors.text.secondary}),[y,a.colors.text.secondary]);return _jsxs(View,{style:[x?null:{gap:c},s],testID:n,children:[r?_jsx(Text,{style:[m.title,{fontSize:a.typography.fontSize.lg,color:a.colors.text.primary}],children:r}):null,e.map((e,o)=>{const r=isEmptyValue(e.value),i=2===t&&!e.full,s=r?a.colors.text.tertiary:resolveColor(a,e.tone??"primary"),n=fontFor(a,e.strong?"semibold":"normal"),f=r||isInlineText(e.value),h=r?"-":"string"==typeof e.value?e.value:_jsx(NotationInkContext.Provider,{value:{fontSize:y,color:s},children:e.value});return _jsxs(View,x?{style:[m.summaryRow,{paddingVertical:c,borderBottomColor:a.colors.border.secondary}],children:[_jsx(Text,{style:[m.summaryLabel,{fontSize:y,color:a.colors.text.secondary}],children:_jsx(NotationInkContext.Provider,{value:p,children:e.label})}),f?_jsx(Text,{style:[m.summaryValue,{fontSize:y,color:s},n],children:h}):_jsx(View,{style:m.summaryValueView,children:e.value})]}:{style:[i?m.rowSide:m.rowStack,{paddingVertical:c},l&&o>0?m.bordered:null,l&&o>0?{borderTopColor:a.colors.border.secondary}:null],children:["string"==typeof e.label?_jsx(Text,{style:[m.label,{fontSize:d,color:a.colors.text.tertiary},i?m.labelSide:null],children:e.label}):_jsx(View,{style:i?m.labelSide:null,children:_jsx(Text,{style:[m.label,{fontSize:d,color:a.colors.text.tertiary}],children:_jsx(NotationInkContext.Provider,{value:u,children:e.label})})}),f?_jsx(Text,{style:[m.value,{fontSize:y,color:s},e.strong?n:null,i?m.valueSide:null],children:h}):_jsx(View,{style:i?m.valueSide:null,children:e.value})]},rowKey(e,o))})]})};const buildStyles=e=>StyleSheet.create({title:{...fontFor(e,"semibold")},rowStack:{gap:2},rowSide:{flexDirection:"row",alignItems:"flex-start",gap:e.spacing.md},bordered:{borderTopWidth:StyleSheet.hairlineWidth},label:{...fontFor(e,"semibold")},labelSide:{flex:4},value:{...fontFor(e,"normal")},valueSide:{flex:6},summaryRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,borderBottomWidth:StyleSheet.hairlineWidth},summaryLabel:{flex:1,...fontFor(e,"normal")},summaryValue:{textAlign:"right",flexShrink:1,maxWidth:"60%"},summaryValueView:{flexShrink:1,maxWidth:"60%",alignItems:"flex-end"}});export default Descriptions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useMemo}from"react";import{ActivityIndicator,Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:o,onClose:
|
|
1
|
+
"use strict";import{useCallback,useMemo}from"react";import{ActivityIndicator,Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:o,onClose:r,title:t,message:i,children:n,icon:l,variant:s="default",actions:a,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:g,containerStyle:u,titleStyle:m,messageStyle:p,iconWrapperStyle:b,actionsRowStyle:y,actionButtonStyle:h,actionTextStyle:f,haptic:x,testID:S}=e,C=useTheme(),j=useMemo(()=>buildStyles(C),[C]),_=useMemo(()=>discFor(C,s),[C,s]),I=C.components.dialog,M=I?.iconWrapperSize??48,w=I?.iconWrapperBorderRadius??24,B=I?.actionButtonMinHeight??44,D=Boolean(a&&a.length>0),R=useCallback(e=>{if(e.loading||e.disabled)return;const o=resolveHaptic(x,"selection");o&&triggerHaptic(o),c?(r(),setTimeout(e.onPress,MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,r,x]);return _jsx(Modal,{visible:o,onRequestClose:r,haptic:x,presentation:"centered",accessibilityLabel:d??t,contentStyle:g,testID:S,children:_jsxs(View,{accessibilityRole:"alert",accessibilityLabel:d??t,style:[j.container,u],children:[l?_jsx(View,{style:[j.iconWrapper,{width:M,height:M,borderRadius:w,...smoothCorners,backgroundColor:_,marginBottom:C.spacing.md},b],children:l}):null,t?_jsx(Text,{style:[j.title,{color:C.colors.text.primary,fontSize:C.typography.fontSize.xl,...fontFor(C,"semibold"),marginBottom:i||null!=n?C.spacing.sm:C.spacing.md},m],accessibilityRole:"header",children:t}):null,i?_jsx(Text,{style:[j.message,{color:C.colors.text.secondary,fontSize:C.typography.fontSize.base,lineHeight:C.typography.fontSize.base*C.typography.lineHeight.normal,marginBottom:null!=n?C.spacing.md:D?C.spacing.lg:0},p],children:i}):null,null!=n?_jsx(View,{style:{marginBottom:D?C.spacing.lg:0},children:n}):null,a&&a.length>0?_jsx(View,{style:[j.actionsRow,y],children:a.map((e,o)=>{const r=e.tone??"primary",t=Boolean(e.disabled),i=actionStyleFor(C,r,t),n=o===a.length-1;return _jsx(Pressable,{onPress:()=>R(e),disabled:e.loading||t,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)||t},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)||t,style:({pressed:o})=>[j.actionButton,{minHeight:B,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:C.radius.md,...smoothCorners,paddingVertical:C.spacing.md-2,paddingHorizontal:C.spacing.md,marginRight:n?0:C.spacing.sm,opacity:e.loading?.7:o&&!t?.85:1},h],children:e.loading?_jsx(ActivityIndicator,{size:"small",color:i.textColor}):_jsx(Text,{style:[{color:i.textColor,fontSize:C.typography.fontSize.base,...fontFor(C,"semibold"),textAlign:"center"},f],children:e.label})},`${e.label}-${o}`)})}):null]})})};Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,o)=>{const r=e.colors.background.secondary;switch(o){case"success":return tintOf(e.colors.success,.14,r);case"warning":return tintOf(e.colors.warning,.14,r);case"error":return tintOf(e.colors.error,.14,r);case"info":return tintOf(e.colors.info,.14,r);default:return e.colors.primaryMuted}},actionStyleFor=(e,o,r)=>{if(r)return{backgroundColor:"neutral"===o?"transparent":e.colors.surface.disabled,borderColor:"neutral"===o?e.colors.border.primary:"transparent",borderWidth:"neutral"===o?1:0,textColor:e.colors.text.disabled};switch(o){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors.onPrimary};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors.onInfo};case"error":return{backgroundColor:e.colors.error,borderColor:"transparent",borderWidth:0,textColor:e.colors.onError};default:return{backgroundColor:"transparent",borderColor:e.colors.border.primary,borderWidth:1,textColor:e.colors.text.primary}}},buildStyles=e=>StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionButton:{flex:1,alignItems:"center",justifyContent:"center"}});export{Dialog};export default Dialog;
|
|
@@ -1 +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{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_FALLBACK={sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg",titleGap:"md",descriptionGap:"xs"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl",titleGap:"md",descriptionGap:"xs"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl",titleGap:"md",descriptionGap:"xs"}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.emptyState?.[t]??{}};return{iconSize:i.iconSize,titleSize:e.typography.fontSize[i.titleFontSize],descriptionSize:e.typography.fontSize[i.descriptionFontSize],paddingVertical:e.spacing[i.paddingVertical],titleGap:e.spacing[i.titleGap],descriptionGap:e.spacing[i.descriptionGap]}},ActionButton=({action:e,variant:t})=>{const i=useTheme(),{style:r,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(i),[i]),l="primary"===t,a=useSquircle(!0,i.radius.md),fillFor=e=>l?i.colors.primary:e?i.colors.surface.pressed:"transparent";return _jsx(Animated.View,{style:r,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,
|
|
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{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_FALLBACK={sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg",titleGap:"md",descriptionGap:"xs"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl",titleGap:"md",descriptionGap:"xs"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl",titleGap:"md",descriptionGap:"xs"}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.emptyState?.[t]??{}};return{iconSize:i.iconSize,titleSize:e.typography.fontSize[i.titleFontSize],descriptionSize:e.typography.fontSize[i.descriptionFontSize],paddingVertical:e.spacing[i.paddingVertical],titleGap:e.spacing[i.titleGap],descriptionGap:e.spacing[i.descriptionGap]}},ActionButton=({action:e,variant:t})=>{const i=useTheme(),{style:r,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(i),[i]),l="primary"===t,a=useSquircle(!0,i.radius.md),fillFor=e=>l?e?i.colors.primaryHover:i.colors.primary:e?i.colors.surface.pressed:"transparent";return _jsx(Animated.View,{style:r,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:i.radius.md,fill:fillFor(t),stroke:l?void 0:i.colors.border.primary,strokeWidth:l?0:1,outset:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const{icon:i,title:r,description:o,action:s,secondaryAction:n,size:l="md",fill:a=!1,style:c,testID:d}=e,p=useTheme(),m=useMemo(()=>sizeFor(p,l),[p,l]),u=useMemo(()=>buildStyles(p),[p]);return _jsxs(View,{ref:t,accessibilityRole:"summary",testID:d,style:[u.root,{paddingVertical:m.paddingVertical},a?u.fill:null,c],children:[i?_jsx(View,{style:[u.iconCircle,{width:m.iconSize,height:m.iconSize,marginBottom:m.titleGap,borderRadius:m.iconSize/2,...smoothCorners}],children:i}):null,_jsx(Text,{style:[u.title,{fontSize:m.titleSize,...fontFor(p,"semibold")}],children:r}),o?_jsx(Text,{style:[u.description,{fontSize:m.descriptionSize,marginTop:m.descriptionGap}],children:o}):null,s||n?_jsxs(View,{style:u.actions,children:[s?_jsx(ActionButton,{action:s,variant:"primary"}):null,n?_jsx(ActionButton,{action:n,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.spacing.lg},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors.surface.disabled,alignItems:"center",justifyContent:"center"},title:{color:e.colors.text.primary,textAlign:"center"},description:{color:e.colors.text.secondary,textAlign:"center",maxWidth:320,lineHeight:e.typography.fontSize.base*e.typography.lineHeight.normal},actions:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm,marginTop:e.spacing.md+e.spacing.xs}}),buildActionStyles=e=>StyleSheet.create({button:{paddingHorizontal:e.spacing.lg,paddingVertical:e.spacing.sm,minHeight:42,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden",alignItems:"center",justifyContent:"center",flexDirection:"row"},buttonPrimary:{backgroundColor:e.colors.primary},buttonPrimaryPressed:{backgroundColor:e.colors.primaryHover},buttonSecondary:{backgroundColor:"transparent",borderWidth:1,borderColor:e.colors.border.primary},buttonSecondaryPressed:{backgroundColor:e.colors.surface.pressed},buttonSquircleHost:{backgroundColor:"transparent",borderColor:"transparent",overflow:"visible"},buttonText:{fontSize:e.typography.fontSize.base,...fontFor(e,"semibold")},buttonTextPrimary:{color:e.colors.onPrimary},buttonTextSecondary:{color:e.colors.text.primary}});export{EmptyState};export default EmptyState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{Logger,VersionCheck}from"@webority/mobile-core";import{useCallback,useState}from"react";import{Dialog}from"../Dialog/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const ForceUpdateDialog=({visible:e,onClose:t,mandatory:a=!1,updateUrl:o,title:l="Update available",message:s="A new version of the app is available. Please update to continue using the latest features and security improvements.",updateLabel:
|
|
1
|
+
"use strict";import{Logger,VersionCheck}from"@webority/mobile-core";import{useCallback,useState}from"react";import{Dialog}from"../Dialog/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const ForceUpdateDialog=({visible:e,onClose:t,mandatory:a=!1,updateUrl:o,title:l="Update available",message:s="A new version of the app is available. Please update to continue using the latest features and security improvements.",updateLabel:i="Update now",laterLabel:r="Later",containerStyle:n,titleStyle:c,messageStyle:p,testID:m})=>{const[u,d]=useState(!1),g=useCallback(()=>{d(!0),(async()=>{try{await VersionCheck.openUpdateUrl(o??null)}catch(e){Logger.error("[ForceUpdateDialog] Failed to open store URL",e)}finally{d(!1)}})()},[o]),b=useCallback(()=>{a||t?.()},[a,t]);return _jsx(Dialog,{visible:e,onClose:b,title:l,message:s,variant:"info",actions:a?[{label:i,onPress:g,tone:"info",loading:u}]:[{label:r,onPress:b,tone:"neutral"},{label:i,onPress:g,tone:"info",loading:u}],dismissOnAction:!1,containerStyle:n,titleStyle:c,messageStyle:p,testID:m})};export default ForceUpdateDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_FALLBACK={sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.listItem?.[t]??{}};return{paddingVertical:e.spacing[i.paddingVertical],titleSize:e.typography.fontSize[i.titleFontSize],subtitleSize:e.typography.fontSize[i.subtitleFontSize],minHeight:i.minHeight}},Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.icons?.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,DEFAULT_BOX_SIZE=20,SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=i.components.checkbox?.md?.boxSize??20,o=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.colors.border.width,borderRadius:i.radius.xs,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors.onPrimary,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:o,description:n,titleLines:r=1,subtitleLines:
|
|
1
|
+
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_FALLBACK={sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.listItem?.[t]??{}};return{paddingVertical:e.spacing[i.paddingVertical],titleSize:e.typography.fontSize[i.titleFontSize],subtitleSize:e.typography.fontSize[i.subtitleFontSize],minHeight:i.minHeight}},Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.icons?.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,DEFAULT_BOX_SIZE=20,SelectionBox=({checked:e,disabled:t})=>{const i=useTheme(),s=i.components.checkbox?.md?.boxSize??20,o=Math.round(.72*s);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:s,height:s,alignItems:"center",justifyContent:"center",borderWidth:i.colors.border.width,borderRadius:i.radius.xs,...smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:i.colors.onPrimary,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:o,description:n,children:l,titleLines:r=1,subtitleLines:a=1,left:c,icon:d,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:g=!1,checked:p=!1,onCheckedChange:x,actions:b,onPress:y,haptic:f,selected:S=!1,disabled:j=!1,size:_="md",divider:w=!1,chevron:I=!1,leftActions:L,rightActions:k,contextMenu:v,accessibilityLabel:z,accessibilityHint:F,style:V,containerStyle:A,titleStyle:C,subtitleStyle:B,descriptionStyle:R,leftSlotStyle:H,rightSlotStyle:D,testID:P}=e,T=useTheme(),E=useMemo(()=>sizeFor(T,_),[T,_]),M=stylesFor(T),{fontScale:W}=useWindowDimensions(),O=!!h&&("below"===u||"auto"===u&&W>1.2),G=useContextMenu(j?void 0:v,{haptic:f||!1,testID:P}),Z=useMemo(()=>mergeRefs(t,G.hostRef),[t,G.hostRef]),N=g||!!y,K=N||G.enabled,U=K&&!j,{style:X,pressIn:q,pressOut:J}=usePressAnimation({enabled:U}),Q=useFlickGuard(),Y=z??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=c??(void 0===d?null:_jsx(IconBadge,{icon:d,tone:m,size:BADGE_SIZE[_]})),ee=g?_jsxs(View,{style:M.selectionLead,children:[_jsx(SelectionBox,{checked:p,disabled:j}),$?_jsx(View,{style:M.selectionLeadContent,children:$}):null]}):$,te=null!=b&&!1!==b&&!(Array.isArray(b)&&0===b.length),ie=w&&!te,se=_jsxs(View,{style:[M.row,{paddingVertical:E.paddingVertical,minHeight:E.minHeight,backgroundColor:S?T.colors.surface.selected:"transparent"},ie?M.divider:null,j?M.disabled:null,A],children:[ee?_jsx(View,{style:[M.leftSlot,H],children:ee}):null,_jsxs(View,{style:M.middle,children:[null==i||isText(i)?_jsx(Text,{style:[M.title,{fontSize:E.titleSize,...fontFor(T,"medium"),color:j?T.colors.text.disabled:T.colors.text.primary},C],numberOfLines:r,children:i??" "}):i,null==o||""===o?null:isText(o)?_jsx(Text,{style:[M.subtitle,{fontSize:E.subtitleSize,color:j?T.colors.text.disabled:T.colors.text.secondary},B],numberOfLines:a,children:o}):o,n?_jsx(Text,{style:[M.description,{fontSize:E.subtitleSize,color:j?T.colors.text.disabled:T.colors.text.tertiary},R],numberOfLines:2,children:n}):null,null!=l&&!1!==l?_jsx(View,{style:M.body,children:l}):null,O?_jsx(View,{style:[M.rightBelow,D],children:h}):null]}),h&&!O||I?_jsxs(View,{style:[M.rightSlot,O?null:D],children:[O?null:h,I?_jsx(View,{style:h&&!O?M.chevronWithRight:null,children:_jsx(Chevron,{color:j?T.colors.text.disabled:T.colors.text.tertiary})}):null]}):null]}),oe=K?_jsx(Animated.View,{style:[X,V],children:_jsx(Pressable,{ref:Z,onPress:e=>{U&&N&&!Q.isFlick(e)&&(f&&triggerHaptic(f),g?x?.(!p):y?.(e))},onPressIn:e=>{Q.onPressIn(e),q()},onPressOut:J,disabled:!U,accessibilityRole:g?"checkbox":y?"button":void 0,accessibilityLabel:Y,accessibilityHint:F,accessibilityState:g?{checked:p,disabled:!U}:{selected:S,disabled:!U},"aria-disabled":!U,...g?{"aria-checked":p}:{"aria-selected":S},testID:P,android_ripple:{color:T.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?M.pressed:null,...G.hostProps,children:se})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:Y,accessibilityHint:F,accessibilityState:{selected:S,disabled:j},"aria-selected":S,"aria-disabled":j,testID:P,style:V,children:se}),ne=L&&L.length>0||k&&k.length>0,le=te?_jsxs(View,{style:[S?{backgroundColor:T.colors.surface.selected}:null,w?M.divider:null],children:[oe,_jsx(View,{style:M.actions,children:renderActions(b)})]}):oe,re=ne?_jsx(Swipeable,{leftActions:L,rightActions:k,accessibilityLabel:Y,children:le}):le;return s?_jsx(ListItemSkeleton,{...e}):G.enabled?_jsxs(_Fragment,{children:[re,G.renderSurface(_jsx(View,{style:M.preview,children:se}))]}):re}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:o,chevron:n,size:l="md",containerStyle:r,style:a})=>{const c=useTheme(),d=sizeFor(c,l),m=Math.round(1.15*d.titleSize),h=Math.round(1.15*d.subtitleSize);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:c.spacing.md,paddingVertical:d.paddingVertical,minHeight:d.minHeight},r,a],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:c.spacing.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:c.spacing.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:c.spacing.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==o||n?_jsx(View,{style:{marginLeft:c.spacing.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.primary},pressed:{backgroundColor:e.colors.surface.pressed},disabled:{opacity:.55},leftSlot:{marginRight:e.spacing.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.spacing.sm},body:{marginTop:e.spacing.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.spacing.xs},rightSlot:{marginLeft:e.spacing.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.sm,paddingHorizontal:e.spacing.md,paddingBottom:e.spacing.md},chevronWithRight:{marginLeft:e.spacing.xs},preview:{flex:1,backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:2,...fontFor(e,"normal")},description:{marginTop:2,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState,useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldMessage,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:i,onChange:r,onComplete:s,length:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState,useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldMessage,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:i,onChange:r,onComplete:s,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:f=!1,haptic:p,onFocus:g,accessibilityLabel:h,style:b,cellStyle:y,textStyle:x,testID:j}=e,[v,C]=useControllableState({value:n,defaultValue:i??"",onChange:r}),S=useTheme(),T=useMemo(()=>buildStyles(S),[S]),V={...sizeMap[m],...S.components.otpInput?.[m]??{}},R=useRef([]),[k,F]=useState(-1),w=useRef(null),E=useRef(createAnimatedValue(0)).current,z=useRef(new Map),A=useMemo(()=>{const e=z.current,t=[];for(let n=0;n<o;n+=1){let i=e.get(n);i||(i=new Animated.Value(0),e.set(n,i)),t.push(i)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),I=useRef(-1),M=S.components.otpInput?.shakeOnError??!1,_=useReducedMotion(),D=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===w.current||!D||w.current||(p&&triggerHaptic("notificationError"),M&&!_&&(setNativeValue(E,0),e=Animated.sequence([Animated.timing(E,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:-1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:0,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=D,()=>e?.stop()},[D,E,M,p,_,S.motion.duration.instant]),useEffect(()=>{const e=I.current;if(I.current=k,e===k)return;if(-1===e&&-1===k)return;const t=[];return A.forEach((n,i)=>{const r=i===k?1:0;if(i!==k&&i!==e)return;const s=Animated.timing(n,{toValue:r,duration:S.motion.duration.fast,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[k,A,S]);const O=useCallback(e=>{const t=R.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>O(0),blur:()=>{const e=R.current[k>=0?k:0];e?.blur()},clear:()=>{C(""),O(0)}}),[O,k,C]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>O(0),u);return()=>clearTimeout(e)}},[l,u,c,O]);const P=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),H=useCallback(e=>{const t=e.slice(0,o);t!==v&&(C(t),t.length===o&&s&&s(t))},[o,C,s,v]),N=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),i=sanitizeChar(n,a);if(!i){const t=P.slice(),n=(t[e]??"").length>0;if(t[e]="",H(t.join("").slice(0,o)),!n&&e>0){const t=P.slice();t[e-1]="",H(t.join("")),O(e-1)}return}const r=P[e]??"",s=r&&i.length>o&&i.startsWith(r)?i.slice(r.length):i;if(s.length>=o){const t=s.slice(0,o),n=v.length;return H(t),t.length!==n&&p&&triggerHaptic(p),void R.current[e]?.blur()}const l=P.slice();let u=e;for(let e=0;e<i.length&&u<o;e+=1)l[u]=i[e]??"",u+=1;const c=l.join("").slice(0,o),d=v.length;H(c),c.length!==d&&p&&triggerHaptic(p);const m=Math.min(u,o-1);u>=o?R.current[e]?.blur():O(m)},[P,O,a,o,p,H,v]),B=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(P[e]??"").length){if(e>0){const t=P.slice();t[e-1]="",H(t.join("")),O(e-1)}}else{const t=P.slice();t[e]="",H(t.join(""))}},[P,O,H]),W=useCallback((e,t)=>{F(e),g?.(t)},[g]),L=useCallback(()=>{F(-1)},[]),$=useCallback(()=>{if(c)return;const e=P.indexOf("");O(-1===e?o-1:e)},[P,c,O,o]),q=h??`Enter ${o}-digit code`,G=E.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:b,accessible:!0,accessibilityRole:"none",accessibilityLabel:q,accessibilityValue:{text:n},accessibilityState:{disabled:c},"aria-disabled":c,testID:j,children:[_jsx(Pressable,{onPress:$,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[T.row,{columnGap:V.gap,transform:[{translateX:G}]}],children:P.map((e,t)=>{const n=k===t,i=e.length>0,r=D?S.colors.border.error:S.colors.border.focus,s=A[t];if(!s)return null;const l=f&&i?"●":e;return _jsxs(View,{style:T.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:V.cell,height:V.cell,borderRadius:V.borderRadius,borderWidth:1.5,focused:n,error:D,filled:i,disabled:c,paddingHorizontal:0,paddingVertical:0,gap:0,style:y,children:[_jsx(TextInput,{ref:e=>{R.current[t]=e},value:(f&&i?"":e)||"",onChangeText:e=>N(t,e),onKeyPress:e=>B(t,e),onFocus:e=>W(t,e),onBlur:L,keyboardType:a,editable:!c,selectTextOnFocus:!0,caretHidden:i,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[T.input,{fontSize:V.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},x]}),f&&i?_jsx(View,{pointerEvents:"none",style:T.maskOverlay,children:_jsx(Text,{style:[{fontSize:V.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},x],children:l})}):null]}),_jsx(Animated.View,{style:[T.underline,{backgroundColor:r,opacity:s}]})]},`otp-cell-${t}`)})})}),_jsx(FieldMessage,{size:m,error:!0,text:d})]})});OTPInput.displayName="OTPInput";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:0},maskOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:4,height:2,width:"60%",borderRadius:1,...smoothCorners}});export{OTPInput};export default OTPInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder}from"../FieldBase/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:l,placeholder:i,label:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder}from"../FieldBase/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:l,placeholder:i,label:o,helperText:a,error:n,required:u,disabled:c=!1,size:d="md",variant:p,maxTags:f,unique:m=!0,transform:x,separators:h=[","],haptic:g,onFocus:b,style:y,testID:j}=e,C=useTheme(),S=useMemo(()=>buildStyles(C),[C]),[v,F]=useControllableState({value:r,defaultValue:s??[],onChange:l}),[T,w]=useState(""),[_,k]=useState(!1),I=useRef(null),z=useMemo(()=>mergeRefs(I,t),[t]),B=useCallback(()=>{c||I.current?.focus()},[c]),R="number"==typeof f&&v.length>=f,V=!0===n||hasFieldText(n),H=u&&!o&&0===v.length&&0===T.length&&Boolean(i),q=useCallback(e=>{const t=x?x(e.trim()):e.trim();if(!t)return;if(R)return;if(m&&v.some(e=>e.toLowerCase()===t.toLowerCase()))return void w("");F([...v,t]),w("");const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[R,g,F,v,x,m]),L=useCallback(e=>{const t=v.filter((t,r)=>r!==e);F(t);const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[g,F,v]),M=useCallback(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void q(r)}w(e)},[q,h]),D=useCallback(e=>{c||"Backspace"===e.nativeEvent.key&&""===T&&v.length>0&&L(v.length-1)},[c,T,L,v.length]),P=_jsx(FieldBase,{size:d,variant:p,focused:_,disabled:c,error:V,filled:v.length>0||T.length>0,onPress:B,pressFeedback:!1,style:y,children:_jsxs(View,{style:S.wrap,children:[v.map((e,t)=>_jsx(Chip,{label:e,size:"sm",onClose:c?void 0:()=>L(t),haptic:g},`${e}-${t}`)),_jsxs(View,{style:S.inputBox,children:[_jsx(TextInput,{ref:z,value:T,onChangeText:M,onKeyPress:D,onSubmitEditing:()=>q(T),onFocus:e=>{k(!0),b?.(e)},onBlur:()=>{k(!1),q(T)},editable:!c&&!R,placeholder:R||H?void 0:i,placeholderTextColor:C.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",accessibilityLabel:o??i,style:[S.input,{color:C.colors.text.primary,fontSize:C.typography.fontSize.base}],testID:j?`${j}-input`:void 0}),H?_jsx(RequiredPlaceholder,{text:i??"",color:C.colors.text.tertiary,fontSize:C.typography.fontSize.base,weightStyle:fontFor(C,"normal")}):null]})]})});return _jsxs(View,{testID:j,children:[o?_jsx(FieldLabel,{size:d,required:u,children:o}):null,P,_jsx(FieldMessage,{size:d,error:V,text:V?n:a})]})});TagInput.displayName="TagInput";const buildStyles=e=>StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},inputBox:{flexGrow:1,minWidth:80},input:{...fontFor(e,"normal"),padding:0}});export default TagInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_GAP=8,DEFAULT_SCREEN_PADDING=8,MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_GAP=8,DEFAULT_SCREEN_PADDING=8,MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,s,n)=>t({x:e,y:i,width:s,height:n})):t(null)}),isOnScreen=(e,t)=>e.width>0&&e.height>0&&e.x<t.width&&e.y<t.height&&e.x+e.width>0&&e.y+e.height>0,Tour=({tourId:e,steps:t,visible:i,onClose:s,seenStore:n,labels:o,haptic:r,testID:a})=>{const l=useTheme(),c=usePresenceMotion().duration("fast"),d=useMemo(()=>buildStyles(l),[l]),u=useWindowDimensions(),h=useRef(u);h.current=u;const p=l.components.tooltip?.gap??8,m=l.components.tooltip?.screenPadding??8,[x,g]=useState(null),[y,f]=useState(0),b=useRef(createAnimatedValue(0)).current,w=useRef(t);w.current=t;const S=useRef(s);S.current=s;const j=useRef(n);j.current=n;const _=useCallback(async(e,t)=>{for(let i=e;i>=0&&i<w.current.length;i+=t){const e=await measureInWindow(w.current[i].target);if(e&&isOnScreen(e,h.current))return{index:i,rect:e}}return null},[]);useEffect(()=>{if(!i)return void g(null);let t=!1;return(async()=>{const i=j.current;if(i&&await i.isSeen(e))return void(t||S.current("alreadySeen"));const s=await _(0,1);t||(s?(f(s.index),g(s)):S.current("noTargets"))})(),()=>{t=!0}},[i,e,_]),useEffect(()=>{if(!x)return;const e=w.current[x.index],t=`Step ${x.index+1} of ${w.current.length}`;AccessibilityInfo.announceForAccessibility([t,e.title,e.description].filter(Boolean).join(". ")),b.setValue(0);const i=Animated.timing(b,{toValue:1,duration:c,useNativeDriver:!0});return i.start(),()=>i.stop()},[x,b,c]);const k=useCallback(async t=>{g(null),await(j.current?.markSeen(e)),S.current(t)},[e]),v=useCallback(async()=>{if(!x)return;const e=await _(x.index+1,1);e?g(e):await k("finished")},[x,_,k]),D=useCallback(async()=>{if(!x)return;const e=await _(x.index-1,-1);e&&g(e)},[x,_]),C=useCallback(()=>{k("skipped")},[k]),I=x?t[x.index]:void 0,T=!!x&&x.index===t.length-1,M=l.spacing.xs,R=x?{x:x.rect.x-M,y:x.rect.y-M,width:x.rect.width+2*M,height:x.rect.height+2*M}:null,A=Math.min(u.width-2*m,360),P=R?(()=>{const e=R.x+R.width/2,t=Math.max(m,Math.min(e-A/2,u.width-A-m)),i=R.y,s=u.height-(R.y+R.height);return s>=i?{left:t,top:R.y+R.height+p,maxHeight:Math.max(s-p-m,0)}:{left:t,bottom:u.height-R.y+p,maxHeight:Math.max(i-p-m,0)}})():null,V=l.colors.background.overlay,W=R?Math.min(I?.radius?l.radius[I.radius]+M:l.radius.md,Math.min(R.width,R.height)/2):0,z=Math.max(u.width,u.height);return _jsx(Modal,{visible:null!==x,onRequestClose:C,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:d.transparent,contentStyle:d.transparent,accessibilityLabel:I?.title??I?.description,haptic:r,testID:a,children:R&&P&&I?_jsxs(View,{style:StyleSheet.absoluteFill,children:[_jsx(View,{style:[d.dim,{borderColor:V,borderWidth:z,top:R.y-z,left:R.x-z,width:R.width+2*z,height:R.height+2*z,borderRadius:W+z}]}),_jsx(View,{pointerEvents:"none",style:[d.highlight,{top:R.y,left:R.x,width:R.width,height:R.height,borderRadius:W}]}),_jsxs(Animated.View,{accessibilityLiveRegion:"polite",style:[d.card,P,{width:A,opacity:b}],testID:a?`${a}-card`:void 0,children:[_jsx(Text,{style:d.position,children:`Step ${(x?.index??0)+1} of ${t.length}`}),I.title?_jsx(Text,{style:d.title,accessibilityRole:"header",children:I.title}):null,_jsx(Text,{style:d.description,children:I.description}),_jsxs(View,{style:d.actions,children:[_jsx(Button,{title:o?.skip??"Skip",variant:"ghost",size:"sm",haptic:r,onPress:C,testID:a?`${a}-skip`:void 0}),_jsxs(View,{style:d.navigation,children:[x&&x.index>y?_jsx(Button,{title:o?.back??"Back",variant:"outline",size:"sm",haptic:r,onPress:()=>{D()},testID:a?`${a}-back`:void 0}):null,_jsx(Button,{title:T?o?.done??"Done":o?.next??"Next",size:"sm",haptic:r,onPress:()=>{v()},testID:a?`${a}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=e=>StyleSheet.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:e.colors.primary,borderRadius:e.radius.md,...smoothCorners},card:{position:"absolute",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,padding:e.spacing.lg,gap:e.spacing.sm,...e.shadows.lg},position:{color:e.colors.text.tertiary,fontSize:e.typography.fontSize.xs},title:{color:e.colors.text.primary,fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold},description:{color:e.colors.text.secondary,fontSize:e.typography.fontSize.sm},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:e.spacing.xs},navigation:{flexDirection:"row",gap:e.spacing.sm}});export{Tour};export default Tour;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{SQUIRCLE_SMOOTHING}from"../utils/squircle.js";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,xs:4,sm:6,md:10,lg:14,xl:20,"2xl":28,full:9999},FIELD_RADIUS=10,fieldSizes={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},components={button:{xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10},md:{paddingHorizontal:16,paddingVertical:9,minHeight:
|
|
1
|
+
"use strict";import{SQUIRCLE_SMOOTHING}from"../utils/squircle.js";const typography={fontSize:{xs:11,sm:13,base:15,lg:17,xl:20,"2xl":24,"3xl":30,"4xl":36},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.4,relaxed:1.6},letterSpacing:{tight:-.2,normal:0,wide:.4}},spacing={none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius={none:0,xs:4,sm:6,md:10,lg:14,xl:20,"2xl":28,full:9999},FIELD_RADIUS=10,fieldSizes={sm:{paddingHorizontal:12,paddingVertical:10,minHeight:38,fontSize:13,borderRadius:10,iconSize:14,labelFontSize:11,labelGap:4,messageFontSize:11,messageGap:2},md:{paddingHorizontal:14,paddingVertical:13,minHeight:44,fontSize:14,borderRadius:10,iconSize:16,labelFontSize:12,labelGap:4,messageFontSize:12,messageGap:2},lg:{paddingHorizontal:16,paddingVertical:15,minHeight:52,fontSize:16,borderRadius:10,iconSize:18,labelFontSize:13,labelGap:4,messageFontSize:13,messageGap:2}},components={button:{xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10},md:{paddingHorizontal:16,paddingVertical:9,minHeight:44,fontSize:16,borderRadius:12},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16}},input:{sm:{...fieldSizes.sm,multilineMinHeight:72},md:{...fieldSizes.md,multilineMinHeight:92},lg:{...fieldSizes.lg,multilineMinHeight:110}},searchBar:{sm:{borderRadius:radius.full},md:{borderRadius:radius.full},lg:{borderRadius:radius.full}},emptyState:{sm:{iconSize:48,titleFontSize:"lg",descriptionFontSize:"sm",paddingVertical:"lg",titleGap:"md",descriptionGap:"xs"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl",titleGap:"md",descriptionGap:"xs"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl",titleGap:"md",descriptionGap:"xs"}},field:{defaultVariant:"outlined",sm:fieldSizes.sm,md:fieldSizes.md,lg:fieldSizes.lg},listItem:{sm:{paddingVertical:"sm",titleFontSize:"sm",subtitleFontSize:"xs",minHeight:44},md:{paddingVertical:"md",titleFontSize:"base",subtitleFontSize:"sm",minHeight:56},lg:{paddingVertical:"lg",titleFontSize:"lg",subtitleFontSize:"sm",minHeight:72}},badge:{sm:{fontSize:10,minWidth:16,height:16,paddingHorizontal:5,dotSize:8},md:{fontSize:11,minWidth:20,height:20,paddingHorizontal:6,dotSize:10},borderWidth:1.5,anchorOffset:4},chip:{sm:{paddingHorizontal:10,paddingVertical:4,fontSize:12,minHeight:26,closeSize:16,closeFontSize:12,gap:6},md:{paddingHorizontal:12,paddingVertical:6,fontSize:13,minHeight:32,closeSize:18,closeFontSize:13,gap:8}},checkbox:{sm:{boxSize:16},md:{boxSize:20},lg:{boxSize:24},labelGap:10},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},labelGap:10},switch:{sm:{trackWidth:42,trackHeight:26,thumbSize:22,padding:2},md:{trackWidth:51,trackHeight:31,thumbSize:27,padding:2},lg:{trackWidth:60,trackHeight:36,thumbSize:32,padding:2},thumbColor:"#FFFFFF"},otpInput:{sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},dialog:{iconWrapperSize:48,iconWrapperBorderRadius:24,actionButtonMinHeight:44},toast:{iconCircleSize:28,iconCircleBorderRadius:14,iconGlyphFontSize:16,tintBarWidth:0},banner:{tintBarWidth:0},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},fadeDuration:160,easing:{standard:[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]},spring:{gentle:{damping:26,stiffness:240,mass:.9},bouncy:{damping:16,stiffness:200,mass:.7},snappy:{damping:20,stiffness:300,mass:.7}}},lightShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.08,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.1,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.14,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.18,shadowRadius:32,elevation:20}},darkShadows={none:{},xs:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.3,shadowRadius:2,elevation:1},sm:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},md:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,elevation:4},lg:{shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.55,shadowRadius:16,elevation:8},xl:{shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},"2xl":{shadowColor:"#000",shadowOffset:{width:0,height:20},shadowOpacity:.7,shadowRadius:32,elevation:20}};export const lightTheme={mode:"light",colors:{primary:"#5B5BD6",primaryHover:"#4F4FBF",primaryPressed:"#4040A8",primaryMuted:"#EEEEFC",secondary:"#F4F4F8",secondaryHover:"#E9E9F0",success:"#18864F",warning:"#F59E0B",error:"#E12C32",info:"#1B6EF5",onPrimary:"#FFFFFF",onNeutral:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",toneText:{primary:"#4F4FD3",success:"#147042",warning:"#8F5C06",error:"#BC1B20",info:"#0958D9"},text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#62626B",inverse:"#FFFFFF",strong:"#252F4A",disabled:"#B4B4BB",link:"#5B5BD6"},background:{primary:"#FFFFFF",secondary:"#F8F8FB",tertiary:"#F1F1F5",elevated:"#FFFFFF",overlay:"rgba(15, 15, 26, 0.5)",inverse:"#0F0F1A"},border:{primary:"#E5E5EC",secondary:"#EFEFF3",focus:"#5B5BD6",error:"#E5484D",width:1},field:{background:"#F9FBFC",backgroundFocused:"#FFFFFF",backgroundDisabled:"#F5F6FA",border:"#EBEDF3",borderFocused:"#BED2F9",borderError:"#FDBFCE",label:"#242F4A",text:"#252F4A",textDisabled:"#C4CADA",placeholder:"#626D8B",placeholderDisabled:"#C4CADA",icon:"#7A849F",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#D81736"},surface:{pressed:"rgba(15, 15, 26, 0.06)",hovered:"rgba(15, 15, 26, 0.04)",selected:"rgba(91, 91, 214, 0.1)",disabled:"#F1F1F5"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#EBEDF3",highlight:"#F5F6FA"},avatarPalette:["#5B5BD6","#0A7979","#A45A05","#CD226E","#2462EB","#7C3AED","#047C57","#D42222"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:lightShadows,motion:motion,components:components,gradients:{}};export const darkTheme={mode:"dark",colors:{primary:"#7C7CE8",primaryHover:"#9292EE",primaryPressed:"#A8A8F2",primaryMuted:"#1F1F3D",secondary:"#1F1F26",secondaryHover:"#2A2A33",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA",onPrimary:"#0F0F1A",onNeutral:"#0F0F1A",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",toneText:{primary:"#8989EA",success:"#30C780",warning:"#FBBF24",error:"#F87171",info:"#60A5FA"},text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#919199",inverse:"#0F0F1A",strong:"#E2E2E2",disabled:"#52525B",link:"#9292EE"},background:{primary:"#0B0B12",secondary:"#13131C",tertiary:"#1C1C26",elevated:"#1C1C26",overlay:"rgba(0, 0, 0, 0.65)",inverse:"#FAFAFA"},border:{primary:"#27272F",secondary:"#1C1C26",focus:"#7C7CE8",error:"#F87171",width:1},field:{background:"#13131C",backgroundFocused:"#0B0B12",backgroundDisabled:"#1C1C26",border:"#27272F",borderFocused:"#3D5FB0",borderError:"#8A2F42",label:"#E4E6EE",text:"#FAFAFA",textDisabled:"#52525B",placeholder:"#84848D",placeholderDisabled:"#52525B",icon:"#8B8B95",iconFocused:"#D4D4DB",iconDisabled:"#52525B",caret:"#7C9EF0",message:"#F87171"},surface:{pressed:"rgba(255, 255, 255, 0.08)",hovered:"rgba(255, 255, 255, 0.05)",selected:"rgba(124, 124, 232, 0.18)",disabled:"#1C1C26"},glass:{fill:"rgba(255, 255, 255, 0.28)",border:"rgba(255, 255, 255, 0.45)",on:"#0F0F1A",badge:"#FFFFFF"},skeleton:{background:"#1C1C26",highlight:"#27272F"},avatarPalette:["#8B8BEE","#2DD4BF","#FCD34D","#F472B6","#60A5FA","#A78BFA","#34D399","#F87171"]},typography:typography,spacing:spacing,radius:radius,cornerSmoothing:SQUIRCLE_SMOOTHING,shadows:darkShadows,motion:motion,components:components,gradients:{}};
|
|
@@ -12,16 +12,23 @@ export interface HomeIndicatorProps {
|
|
|
12
12
|
colorMode?: ColorMode;
|
|
13
13
|
}
|
|
14
14
|
export declare const HomeIndicator: ({ os, colorMode }: HomeIndicatorProps) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
15
|
+
export interface NavigationBarProps {
|
|
16
|
+
os: PhoneChromeOs;
|
|
17
|
+
colorMode?: ColorMode;
|
|
18
|
+
}
|
|
19
|
+
export declare const NavigationBar: ({ os, colorMode }: NavigationBarProps) => import("react").CElement<import("react-native").ViewProps, View> | null;
|
|
15
20
|
export interface SafeAreaProps {
|
|
16
21
|
os: PhoneChromeOs;
|
|
17
22
|
children?: ReactNode;
|
|
18
23
|
}
|
|
19
24
|
export declare const SafeArea: ({ os, children }: SafeAreaProps) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
25
|
+
export type KeyboardPreviewOs = 'ios' | 'android';
|
|
20
26
|
export interface KeyboardFrameProps {
|
|
21
27
|
colorMode?: ColorMode;
|
|
28
|
+
previewOs?: KeyboardPreviewOs;
|
|
22
29
|
children?: ReactNode;
|
|
23
30
|
}
|
|
24
|
-
export declare const KeyboardFrame: ({ colorMode, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
31
|
+
export declare const KeyboardFrame: ({ colorMode, previewOs, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
25
32
|
export interface PhoneChromeManifestProp {
|
|
26
33
|
name: string;
|
|
27
34
|
type: 'enum';
|
|
@@ -183,8 +183,9 @@ export interface BottomNavigationProps {
|
|
|
183
183
|
/**
|
|
184
184
|
* Air above and below the bar surface, in pixels. Default 16 for the
|
|
185
185
|
* `floating` and `tile` capsules and 0 for a docked bar. Above zero it
|
|
186
|
-
* lifts any variant off the screen edge
|
|
187
|
-
*
|
|
186
|
+
* lifts any variant off the screen edge. Over a safe-area inset (a home
|
|
187
|
+
* indicator or Android's system buttons) the lift is the inset plus
|
|
188
|
+
* `theme.spacing.sm`, never less than this margin.
|
|
188
189
|
*/
|
|
189
190
|
marginVertical?: number;
|
|
190
191
|
/**
|
|
@@ -2,7 +2,7 @@ import type React from 'react';
|
|
|
2
2
|
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
import type { HapticType } from '../../utils/hapticUtils';
|
|
4
4
|
export type DialogVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
5
|
-
export type DialogActionTone = 'primary' | 'neutral' | 'error';
|
|
5
|
+
export type DialogActionTone = 'primary' | 'neutral' | 'info' | 'error';
|
|
6
6
|
export interface DialogAction {
|
|
7
7
|
label: string;
|
|
8
8
|
onPress: () => void;
|