@webority/mobile-ui 0.17.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/canvasKit/index.js +1 -1
- package/lib/commonjs/components/AppBar/AppBar.js +1 -1
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Dialog/Dialog.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/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/Button/Button.js +1 -1
- package/lib/module/components/Dialog/Dialog.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/theme/tokens.js +1 -1
- package/lib/typescript/commonjs/canvasKit/index.d.ts +8 -1
- 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/module/canvasKit/index.d.ts +8 -1
- 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/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.phoneChromeEntries=exports.StatusBar=exports.SafeArea=exports.KeyboardFrame=exports.HomeIndicator=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_index=require("../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?_index.darkTheme:_index.lightTheme,styles=_reactNative.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}}),StatusBar=({os:e,colorMode:r="light"})=>{const t=paletteFor(r);return(0,_react.createElement)(_reactNative.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}]})};exports.StatusBar=StatusBar;const HomeIndicator=({os:e,colorMode:r="light"})=>{const t=paletteFor(r);return(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.homeIndicator),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:HOME_AREA_HEIGHT[e]}]},"Ios"===e?(0,_react.createElement)(_reactNative.View,{style:[styles.homeBar,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full,marginBottom:t.spacing.sm}]}):null)};exports.HomeIndicator=HomeIndicator;const SafeArea=({os:e,children:r})=>(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.safeArea),style:[styles.fill,{paddingTop:STATUS_BAR_HEIGHT[e],paddingBottom:HOME_AREA_HEIGHT[e]}]},r);exports.SafeArea=SafeArea;const KeyboardFrame=({colorMode:e="light",children:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.phoneChromeEntries=exports.StatusBar=exports.SafeArea=exports.NavigationBar=exports.KeyboardFrame=exports.HomeIndicator=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_index=require("../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?_index.darkTheme:_index.lightTheme,styles=_reactNative.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}}),StatusBar=({os:e,colorMode:r="light"})=>{const t=paletteFor(r);return(0,_react.createElement)(_reactNative.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}]})};exports.StatusBar=StatusBar;const HomeIndicator=({os:e,colorMode:r="light"})=>{const t=paletteFor(r);return(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.homeIndicator),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:HOME_AREA_HEIGHT[e]}]},"Ios"===e?(0,_react.createElement)(_reactNative.View,{style:[styles.homeBar,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full,marginBottom:t.spacing.sm}]}):null)};exports.HomeIndicator=HomeIndicator;const NavigationBar=({os:e,colorMode:r="light"})=>{if("Android"!==e)return null;const t=paletteFor(r);return(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.navigationBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:24,justifyContent:"center"}]},(0,_react.createElement)(_reactNative.View,{style:[styles.navPill,{backgroundColor:t.colors.text.primary,borderRadius:t.radius.full}]}))};exports.NavigationBar=NavigationBar;const SafeArea=({os:e,children:r})=>(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.safeArea),style:[styles.fill,{paddingTop:STATUS_BAR_HEIGHT[e],paddingBottom:HOME_AREA_HEIGHT[e]}]},r);exports.SafeArea=SafeArea;const KEYBOARD_PREVIEW_HEIGHT={ios:336,android:300},KeyboardFrame=({colorMode:e="light",previewOs:r,children:t})=>{const o=paletteFor(e),a=(0,_reactNativeKeyboardController.useKeyboardState)(e=>Math.max(0,Math.round(e.height)));return(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.keyboardFrame),style:[styles.fill,{paddingBottom:a,backgroundColor:o.colors.background.primary}]},t,r?(0,_react.createElement)(_reactNative.View,{pointerEvents:"none",style:[styles.keyboardPreview,{height:KEYBOARD_PREVIEW_HEIGHT[r],backgroundColor:o.colors.background.primary}]}):null)};exports.KeyboardFrame=KeyboardFrame;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},phoneChromeEntries=exports.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";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AppBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const variantSize=(t
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AppBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:e.typography.fontSize["2xl"],titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:e.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:e,side:t,badgeStyle:i,haptic:n,flush:a})=>{const o=(0,_index.useTheme)(),{style:r,pressIn:s,pressOut:l}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),c=(0,_react.useMemo)(()=>buildActionStyles(o),[o]),p=e.badge,d=void 0!==p&&0!==p,u=void 0!==e.text;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:r,children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{const t=(0,_hapticUtils.resolveHaptic)(n,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),e.onPress()},onPressIn:s,onPressOut:l,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.text,testID:e.testID,android_ripple:{color:o.colors.surface.pressed,borderless:!u},style:({pressed:e})=>[u?c.textButton:c.actionButton,a?null:"left"===t?c.actionLeft:c.actionRight,e&&!u?c.actionPressed:null,e&&u?c.textPressed:null],children:[u?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:c.actionText,numberOfLines:1,children:e.text}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:c.iconWrap,children:e.icon}),d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.badge,i],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:c.badgeText,numberOfLines:1,children:String(p)})}):null,e.dot?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=exports.AppBar=(0,_react.forwardRef)((e,t)=>{const{title:i,subtitle:n,titleAlignment:a="left",leftAction:o,rightActions:r,leading:s,trailing:l,onBack:c,gutter:p,titleVariant:d,titleOffset:u,height:m,divider:g,variant:h="default",transparent:x=!1,scrollY:f,style:_,containerStyle:y,titleStyle:b,subtitleStyle:j,badgeStyle:S,haptic:v,testID:B}=e,R=(0,_index.useTheme)(),A=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),N=(0,_react.useMemo)(()=>variantSize(R,h),[R,h]),w=(0,_react.useMemo)(()=>buildStyles(R),[R]),C="large"===h&&void 0!==f,z=R.components.appBar?.iconSize??24,I=R.components.appBar?.actionButtonSize??44,T=o??(c?{icon:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"arrow-left",size:z,color:R.colors.text.primary}),onPress:c,accessibilityLabel:"Back"}:void 0),W=l?void 0:r?.[r.length-1],opticalInset=e=>void 0===e?0:void 0!==e.text?R.spacing.sm:Math.max((I-z)/2,0),L=void 0===p?null:{paddingLeft:Math.max(p-opticalInset(T),0),paddingRight:Math.max(p-opticalInset(W),0)},V=void 0!==u,O=Boolean(T)||Boolean(s),P=g??!x,D=R.components.appBar?.dividerWidth??_reactNative.StyleSheet.hairlineWidth,H=R.components.appBar?.collapseTranslateDistance??-20,E=(0,_react.useMemo)(()=>{if(!f)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:f.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:f.interpolate({...e,outputRange:[0,H]}),titleTranslateX:f.interpolate({...e,outputRange:"center"===a?[0,0]:[0,8]}),subtitleOpacity:f.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:f.interpolate({...e,outputRange:[96,56]}),borderOpacity:f.interpolate({...e,outputRange:[0,1]})}},[f,a,H]),M=C&&E?{transform:[{translateX:E.titleTranslateX},{translateY:E.titleTranslateY},{scale:E.titleScale}]}:null,k=i?d?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:M,children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:d,align:"center"===a?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[w.titleVariant,b],children:i})}):(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{accessibilityRole:"header",style:[w.title,{fontSize:N.titleSize,fontWeight:R.typography.fontWeight[N.titleWeight],textAlign:"center"===a?"center":"left"},M,b],numberOfLines:1,children:i}):null,q=n?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[w.subtitle,{textAlign:"center"===a?"center":"left"},C&&E?{opacity:E.subtitleOpacity}:null,j],numberOfLines:1,children:n}):null,U=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[w.titleColumn,"center"===a?w.titleColumnCenter:null,N.alignBottom?w.titleColumnBottom:null],children:[k,q]}),Y=C?_reactNative.Animated.View:_reactNative.View,F=C&&E?{height:_reactNative.Animated.add(E.barHeight,new _reactNative.Animated.Value(A.top))}:{height:(m??N.height)+A.top};return(0,_jsxRuntime.jsxs)(Y,{ref:t,testID:B,style:[w.root,{paddingTop:A.top,backgroundColor:x?"transparent":R.colors.background.elevated},F,!C&&P?{borderBottomWidth:D,borderBottomColor:R.colors.border.primary}:null,_,y],children:[C&&E&&P?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[w.animatedBorder,{backgroundColor:R.colors.border.primary,opacity:E.borderOpacity}]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[w.row,N.alignBottom?w.rowAlignBottom:null,L,{flex:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[w.sideSlot,V?w.sideSlotCompact:null],children:[T?(0,_jsxRuntime.jsx)(ActionButton,{action:T,side:"left",haptic:v,flush:V}):null,null!=s&&!1!==s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:w.slotNode,children:s}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[w.center,"center"===a?w.centerAligned:w.centerLeft,V?{paddingLeft:O?u:0,paddingRight:0}:null],children:U}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[w.sideSlot,w.sideSlotRight,V?w.sideSlotCompact:null],children:[r?.map((e,t)=>(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:S,haptic:v,flush:V},`appbar-right-${t}`)),null!=l&&!1!==l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:w.slotNode,children:l}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.spacing.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:e.components.appBar?.sideSlotMinWidth??48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,paddingHorizontal:e.spacing.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors.text.primary},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.components.appBar?.subtitleMarginTop??2,color:e.colors.text.tertiary,fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:_reactNative.StyleSheet.hairlineWidth}}),buildActionStyles=e=>_reactNative.StyleSheet.create({actionButton:{width:e.components.appBar?.actionButtonSize??44,height:e.components.appBar?.actionButtonSize??44,borderRadius:e.radius.full,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.spacing.xs},actionRight:{marginLeft:e.spacing.xs},actionPressed:{backgroundColor:e.colors.surface.pressed},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.spacing.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},actionText:{color:e.colors.text.link,fontSize:e.typography.fontSize.base,...(0,_index.fontFor)(e,"semibold")},dot:{position:"absolute",top:e.components.appBar?.dotOffset??10,right:e.components.appBar?.dotOffset??10,width:e.components.appBar?.dotSize??8,height:e.components.appBar?.dotSize??8,borderRadius:e.radius.full,backgroundColor:e.colors.error},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:e.components.appBar?.badgeOffset??4,right:e.components.appBar?.badgeOffset??4,minWidth:e.components.appBar?.badgeMinWidth??16,height:e.components.appBar?.badgeHeight??16,paddingHorizontal:e.components.appBar?.badgePaddingHorizontal??4,borderRadius:e.radius.full,..._corners.smoothCorners,backgroundColor:e.colors.error,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors.onError,fontSize:e.components.appBar?.badgeFontSize??10,fontWeight:e.typography.fontWeight.semibold,lineHeight:e.components.appBar?.badgeLineHeight??12}});var _default=exports.default=AppBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Button=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useFlickGuard=require("../../hooks/useFlickGuard.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_animatedValue=require("../../theme/animatedValue.js"),_ariaState=require("../../utils/ariaState.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Spinner/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=r?o:t){if(i.has(e))return i.get(e);i.set(e,n)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((s=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(s.get||s.set)?i(n,r,s):n[r]=e[r]);return n})(e,r)}const Button=exports.Button=(0,_react.forwardRef)((e,r)=>{const{title:t,children:o,variant:i="solid",tone:s="primary",size:n="md",loading:a=!1,disabled:l=!1,fullWidth:c=!1,leftIcon:d,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:_=!1,gradient:h,style:f,containerStyle:m,textStyle:x,pressAnimation:y,onPress:S,accessibilityLabel:j,accessibilityHint:v,accessibilityState:I,testID:C,onLayout:R,...k}=e;if(__DEV__&&hasTextChild(o))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 w=(0,_index.useTheme)(),T=!l&&!a,z={...I,disabled:!T,busy:a},F="link"===i,N=y??(!F&&"scale"),q=(0,_usePressAnimation.usePressAnimation)({preset:N||"scale",enabled:!1!==N&&T}),H=(0,_useFlickGuard.useFlickGuard)(),L=(0,_react.useMemo)(()=>buildStyles(w),[w]),W={...sizeMap[n],...w.components.button?.[n]??{}},O=(0,_react.useMemo)(()=>toneFor(w,s),[w,s]),P=(0,_react.useMemo)(()=>variantFor(w,i,O,l),[w,i,O,l]),V=(0,_react.useMemo)(()=>!h||l||"solid"!==i?null:"string"==typeof h?w.gradients[h]??null:h,[h,l,i,w.gradients]),A=_reactNative.StyleSheet.flatten(f)?.borderRadius,E=F?0:"number"==typeof A?A:_?w.radius.full:W.borderRadius,B=(0,_SquircleFill.useSquircle)(!V&&"link"!==i,E,R),D=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(0)).current,[M,G]=(0,_react.useState)(0),[U,K]=(0,_react.useState)(null),X=F?e=>G(e.nativeEvent.layout.width):void 0,Y=j??t,J="outline"===i||"ghost"===i,Q=!J&&!F,Z={color:P.textColor,size:W.iconSize,disabled:l},$=g&&!F&&Boolean(d),ee=W.minHeight-2*BADGE_INSET-2*P.borderWidth,re={color:P.badgeInk,size:W.badgeIconSize??W.iconSize,disabled:l},te=a?(0,_jsxRuntime.jsx)(_index2.Spinner,{variant:"circular",size:"sm",color:$?P.badgeInk:P.textColor,accessibilityLabel:"Loading"}):d?(0,_slotIcon.renderSlotIcon)(d,$?re:Z,b):null,oe=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:L.contentRow,children:[$?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"button-icon-badge",style:[L.iconLeft,L.iconBadge,{width:ee,height:ee,borderRadius:ee/2,backgroundColor:P.badgeFill}],children:te}):te?(0,_jsxRuntime.jsx)(_reactNative.View,{style:L.iconLeft,children:te}):null,t?(0,_jsxRuntime.jsxs)(_reactNative.View,{onLayout:X,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[L.label,{color:P.textColor,fontSize:W.fontSize,...(0,_index.fontFor)(w,"semibold")},x],numberOfLines:1,children:t}),F?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[L.linkUnderline,{backgroundColor:P.textColor,transform:[{translateX:D.interpolate({inputRange:[0,1],outputRange:[-M/2,0]})},{scaleX:D.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):o,u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:L.iconRight,children:(0,_slotIcon.renderSlotIcon)(u,Z,b)}):null]}),ie=F?null===U?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(U)):touchSlopFor(W.minHeight),se={top:ie,bottom:ie,left:F?LINK_HIT_SLOP:0,right:F?LINK_HIT_SLOP:0};return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[q.style,c?L.fullWidth:null,m],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:r,onPress:e=>{T&&!H.isFlick(e)&&(q.press(),p&&(0,_hapticUtils.triggerHaptic)(p),S?.(e))},onPressIn:e=>{H.onPressIn(e),q.pressIn(),F&&T&&(D.stopAnimation(),D.setValue(0),_reactNative.Animated.timing(D,{toValue:1,duration:w.motion.duration.slower,easing:_reactNative.Easing.bezier(...w.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{q.pressOut()},disabled:!T,hitSlop:se,accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:v,accessibilityState:z,...(0,_ariaState.ariaFromState)(z),testID:C,onLayout:e=>{B.onLayout(e),F&&K(e.nativeEvent.layout.height)},style:({pressed:e})=>[L.base,{paddingHorizontal:F?0:W.paddingHorizontal,paddingVertical:F?0:$?BADGE_INSET:W.paddingVertical,paddingLeft:$?BADGE_INSET:void 0,minHeight:F?void 0:W.minHeight,borderRadius:E,..._corners.smoothCorners,backgroundColor:V||B.active?"transparent":P.backgroundColor,borderWidth:P.borderWidth,borderColor:B.active?"transparent":P.borderColor,opacity:a?.55:1,overflow:B.active||F?"visible":"hidden"},e&&J&&!B.active?{backgroundColor:w.colors.surface.pressed}:null,c?L.fullWidth:null,f],...k,"aria-disabled":!T,"aria-busy":a,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[B.active&&B.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:B.size.width,height:B.size.height,radius:E,fill:e&&J?w.colors.surface.pressed:P.backgroundColor,stroke:P.borderColor,strokeWidth:P.borderWidth,outset:P.borderWidth}):null,V?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:V,style:[_reactNative.StyleSheet.absoluteFill,{borderRadius:E,..._corners.smoothCorners}]}):null,e&&Q?B.active&&B.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:B.size.width,height:B.size.height,radius:E,fill:P.pressedTint,outset:P.borderWidth,testID:"button-pressed"}):(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[L.pressedOverlay,{borderRadius:E,backgroundColor:P.pressedTint,..._corners.smoothCorners}],testID:"button-pressed"}):null,oe]})})})});Button.displayName="Button";const hasTextChild=e=>_react.default.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:42,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:(0,_color.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:(0,_color.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:(0,_color.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:(0,_color.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,t,o)=>{const i=o?e.colors.text.disabled:t.fg,s={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=o?s:{badgeFill:t.on,badgeInk:t.base},a=o?s:{badgeFill:t.base,badgeInk:t.on};switch(r){case"solid":return{backgroundColor:o?e.colors.surface.disabled:t.base,borderColor:"transparent",borderWidth:1,textColor:o?e.colors.text.disabled:t.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:o?e.colors.surface.disabled:t.soft,borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"outline":return{backgroundColor:"transparent",borderColor:o?e.colors.border.primary:t.base,borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:o?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:o?e.colors.text.disabled:e.colors.glass.on,pressedTint:_color.ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:o?e.colors.text.disabled:t.base};default:return{backgroundColor:t.base,borderColor:"transparent",borderWidth:1,textColor:t.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>_reactNative.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"}});var _default=exports.default=Button;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Button=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useFlickGuard=require("../../hooks/useFlickGuard.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_animatedValue=require("../../theme/animatedValue.js"),_ariaState=require("../../utils/ariaState.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Spinner/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=r?o:t){if(i.has(e))return i.get(e);i.set(e,n)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((s=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(s.get||s.set)?i(n,r,s):n[r]=e[r]);return n})(e,r)}const Button=exports.Button=(0,_react.forwardRef)((e,r)=>{const{title:t,children:o,variant:i="solid",tone:s="primary",size:n="md",loading:a=!1,disabled:l=!1,fullWidth:c=!1,leftIcon:d,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:_=!1,gradient:h,style:f,containerStyle:m,textStyle:x,pressAnimation:y,onPress:S,accessibilityLabel:j,accessibilityHint:v,accessibilityState:I,testID:C,onLayout:R,...k}=e;if(__DEV__&&hasTextChild(o))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 w=(0,_index.useTheme)(),T=!l&&!a,z={...I,disabled:!T,busy:a},F="link"===i,N=y??(!F&&"scale"),q=(0,_usePressAnimation.usePressAnimation)({preset:N||"scale",enabled:!1!==N&&T}),H=(0,_useFlickGuard.useFlickGuard)(),L=(0,_react.useMemo)(()=>buildStyles(w),[w]),W={...sizeMap[n],...w.components.button?.[n]??{}},O=(0,_react.useMemo)(()=>toneFor(w,s),[w,s]),P=(0,_react.useMemo)(()=>variantFor(w,i,O,l),[w,i,O,l]),V=(0,_react.useMemo)(()=>!h||l||"solid"!==i?null:"string"==typeof h?w.gradients[h]??null:h,[h,l,i,w.gradients]),A=_reactNative.StyleSheet.flatten(f)?.borderRadius,E=F?0:"number"==typeof A?A:_?w.radius.full:W.borderRadius,B=(0,_SquircleFill.useSquircle)(!V&&"link"!==i,E,R),D=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(0)).current,[M,G]=(0,_react.useState)(0),[U,K]=(0,_react.useState)(null),X=F?e=>G(e.nativeEvent.layout.width):void 0,Y=j??t,J="outline"===i||"ghost"===i,Q=!J&&!F,Z={color:P.textColor,size:W.iconSize,disabled:l},$=g&&!F&&Boolean(d),ee=W.minHeight-2*BADGE_INSET-2*P.borderWidth,re={color:P.badgeInk,size:W.badgeIconSize??W.iconSize,disabled:l},te=a?(0,_jsxRuntime.jsx)(_index2.Spinner,{variant:"circular",size:"sm",color:$?P.badgeInk:P.textColor,accessibilityLabel:"Loading"}):d?(0,_slotIcon.renderSlotIcon)(d,$?re:Z,b):null,oe=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:L.contentRow,children:[$?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"button-icon-badge",style:[L.iconLeft,L.iconBadge,{width:ee,height:ee,borderRadius:ee/2,backgroundColor:P.badgeFill}],children:te}):te?(0,_jsxRuntime.jsx)(_reactNative.View,{style:L.iconLeft,children:te}):null,t?(0,_jsxRuntime.jsxs)(_reactNative.View,{onLayout:X,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[L.label,{color:P.textColor,fontSize:W.fontSize,...(0,_index.fontFor)(w,"semibold")},x],numberOfLines:1,children:t}),F?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[L.linkUnderline,{backgroundColor:P.textColor,transform:[{translateX:D.interpolate({inputRange:[0,1],outputRange:[-M/2,0]})},{scaleX:D.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):o,u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:L.iconRight,children:(0,_slotIcon.renderSlotIcon)(u,Z,b)}):null]}),ie=F?null===U?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(U)):touchSlopFor(W.minHeight),se={top:ie,bottom:ie,left:F?LINK_HIT_SLOP:0,right:F?LINK_HIT_SLOP:0};return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[q.style,c?L.fullWidth:null,m],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:r,onPress:e=>{T&&!H.isFlick(e)&&(q.press(),p&&(0,_hapticUtils.triggerHaptic)(p),S?.(e))},onPressIn:e=>{H.onPressIn(e),q.pressIn(),F&&T&&(D.stopAnimation(),D.setValue(0),_reactNative.Animated.timing(D,{toValue:1,duration:w.motion.duration.slower,easing:_reactNative.Easing.bezier(...w.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{q.pressOut()},disabled:!T,hitSlop:se,accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:v,accessibilityState:z,...(0,_ariaState.ariaFromState)(z),testID:C,onLayout:e=>{B.onLayout(e),F&&K(e.nativeEvent.layout.height)},style:({pressed:e})=>[L.base,{paddingHorizontal:F?0:W.paddingHorizontal,paddingVertical:F?0:$?BADGE_INSET:W.paddingVertical,paddingLeft:$?BADGE_INSET:void 0,minHeight:F?void 0:W.minHeight,borderRadius:E,..._corners.smoothCorners,backgroundColor:V||B.active?"transparent":P.backgroundColor,borderWidth:P.borderWidth,borderColor:B.active?"transparent":P.borderColor,opacity:a?.55:1,overflow:B.active||F?"visible":"hidden"},e&&J&&!B.active?{backgroundColor:w.colors.surface.pressed}:null,c?L.fullWidth:null,f],...k,"aria-disabled":!T,"aria-busy":a,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[B.active&&B.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:B.size.width,height:B.size.height,radius:E,fill:e&&J?w.colors.surface.pressed:P.backgroundColor,stroke:P.borderColor,strokeWidth:P.borderWidth,outset:P.borderWidth}):null,V?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:V,style:[_reactNative.StyleSheet.absoluteFill,{borderRadius:E,..._corners.smoothCorners}]}):null,e&&Q?B.active&&B.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:B.size.width,height:B.size.height,radius:E,fill:P.pressedTint,outset:P.borderWidth,testID:"button-pressed"}):(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[L.pressedOverlay,{borderRadius:E,backgroundColor:P.pressedTint,..._corners.smoothCorners}],testID:"button-pressed"}):null,oe]})})})});Button.displayName="Button";const hasTextChild=e=>_react.default.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:(0,_color.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:(0,_color.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:(0,_color.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:(0,_color.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,t,o)=>{const i=o?e.colors.text.disabled:t.fg,s={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=o?s:{badgeFill:t.on,badgeInk:t.base},a=o?s:{badgeFill:t.base,badgeInk:t.on};switch(r){case"solid":return{backgroundColor:o?e.colors.surface.disabled:t.base,borderColor:"transparent",borderWidth:1,textColor:o?e.colors.text.disabled:t.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:o?e.colors.surface.disabled:t.soft,borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"outline":return{backgroundColor:"transparent",borderColor:o?e.colors.border.primary:t.base,borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:o?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:o?e.colors.text.disabled:e.colors.glass.on,pressedTint:_color.ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:o?e.colors.text.disabled:t.base};default:return{backgroundColor:t.base,borderColor:"transparent",borderWidth:1,textColor:t.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>_reactNative.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"}});var _default=exports.default=Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Dialog=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Modal=require("../Modal/Modal.js"),_jsxRuntime=require("react/jsx-runtime");const Dialog=e=>{const{visible:t,onClose:r,title:o,message:i,children:n,icon:a,variant:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Dialog=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Modal=require("../Modal/Modal.js"),_jsxRuntime=require("react/jsx-runtime");const Dialog=e=>{const{visible:t,onClose:r,title:o,message:i,children:n,icon:a,variant:l="default",actions:s,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:g,titleStyle:p,messageStyle:b,iconWrapperStyle:m,actionsRowStyle:y,actionButtonStyle:x,actionTextStyle:_,haptic:h,testID:f}=e,C=(0,_index.useTheme)(),j=(0,_react.useMemo)(()=>buildStyles(C),[C]),S=(0,_react.useMemo)(()=>discFor(C,l),[C,l]),R=C.components.dialog,v=R?.iconWrapperSize??48,M=R?.iconWrapperBorderRadius??24,w=R?.actionButtonMinHeight??44,B=Boolean(s&&s.length>0),D=(0,_react.useCallback)(e=>{if(e.loading||e.disabled)return;const t=(0,_hapticUtils.resolveHaptic)(h,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),c?(r(),setTimeout(e.onPress,_Modal.MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,r,h]);return(0,_jsxRuntime.jsx)(_Modal.Modal,{visible:t,onRequestClose:r,haptic:h,presentation:"centered",accessibilityLabel:d??o,contentStyle:u,testID:f,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{accessibilityRole:"alert",accessibilityLabel:d??o,style:[j.container,g],children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.iconWrapper,{width:v,height:v,borderRadius:M,..._corners.smoothCorners,backgroundColor:S,marginBottom:C.spacing.md},m],children:a}):null,o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[j.title,{color:C.colors.text.primary,fontSize:C.typography.fontSize.xl,...(0,_index.fontFor)(C,"semibold"),marginBottom:i||null!=n?C.spacing.sm:C.spacing.md},p],accessibilityRole:"header",children:o}):null,i?(0,_jsxRuntime.jsx)(_reactNative.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:B?C.spacing.lg:0},b],children:i}):null,null!=n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginBottom:B?C.spacing.lg:0},children:n}):null,s&&s.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.actionsRow,y],children:s.map((e,t)=>{const r=e.tone??"primary",o=Boolean(e.disabled),i=actionStyleFor(C,r,o),n=t===s.length-1;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>D(e),disabled:e.loading||o,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)||o},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)||o,style:({pressed:t})=>[j.actionButton,{minHeight:w,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:C.radius.md,..._corners.smoothCorners,paddingVertical:C.spacing.md-2,paddingHorizontal:C.spacing.md,marginRight:n?0:C.spacing.sm,opacity:e.loading?.7:t&&!o?.85:1},x],children:e.loading?(0,_jsxRuntime.jsx)(_reactNative.ActivityIndicator,{size:"small",color:i.textColor}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:i.textColor,fontSize:C.typography.fontSize.base,...(0,_index.fontFor)(C,"semibold"),textAlign:"center"},_],children:e.label})},`${e.label}-${t}`)})}):null]})})};exports.Dialog=Dialog,Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const r=e.colors.background.secondary;switch(t){case"success":return(0,_color.tintOf)(e.colors.success,.14,r);case"warning":return(0,_color.tintOf)(e.colors.warning,.14,r);case"error":return(0,_color.tintOf)(e.colors.error,.14,r);case"info":return(0,_color.tintOf)(e.colors.info,.14,r);default:return e.colors.primaryMuted}},actionStyleFor=(e,t,r)=>{if(r)return{backgroundColor:"neutral"===t?"transparent":e.colors.surface.disabled,borderColor:"neutral"===t?e.colors.border.primary:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors.text.disabled};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors.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=>_reactNative.StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionButton:{flex:1,alignItems:"center",justifyContent:"center"}});var _default=exports.default=Dialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ForceUpdateDialog=void 0;var _mobileCore=require("@webority/mobile-core"),_react=require("react"),_index=require("../Dialog/index.js"),_jsxRuntime=require("react/jsx-runtime");const ForceUpdateDialog=({visible:e,onClose:t,mandatory:a=!1,updateUrl:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ForceUpdateDialog=void 0;var _mobileCore=require("@webority/mobile-core"),_react=require("react"),_index=require("../Dialog/index.js"),_jsxRuntime=require("react/jsx-runtime");const ForceUpdateDialog=({visible:e,onClose:t,mandatory:a=!1,updateUrl:o,title:r="Update available",message:l="A new version of the app is available. Please update to continue using the latest features and security improvements.",updateLabel:i="Update now",laterLabel:s="Later",containerStyle:n,titleStyle:c,messageStyle:d,testID:u})=>{const[p,b]=(0,_react.useState)(!1),g=(0,_react.useCallback)(()=>{b(!0),(async()=>{try{await _mobileCore.VersionCheck.openUpdateUrl(o??null)}catch(e){_mobileCore.Logger.error("[ForceUpdateDialog] Failed to open store URL",e)}finally{b(!1)}})()},[o]),m=(0,_react.useCallback)(()=>{a||t?.()},[a,t]),_=a?[{label:i,onPress:g,tone:"info",loading:p}]:[{label:s,onPress:m,tone:"neutral"},{label:i,onPress:g,tone:"info",loading:p}];return(0,_jsxRuntime.jsx)(_index.Dialog,{visible:e,onClose:m,title:r,message:l,variant:"info",actions:_,dismissOnAction:!1,containerStyle:n,titleStyle:c,messageStyle:d,testID:u})};exports.ForceUpdateDialog=ForceUpdateDialog;var _default=exports.default=ForceUpdateDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ListItem=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_useFlickGuard=require("../../hooks/useFlickGuard.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_themeStyles=require("../../utils/themeStyles.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index2=require("../Button/index.js"),_index3=require("../IconBadge/index.js"),_useContextMenu=require("../Menu/useContextMenu.js"),_index4=require("../Skeleton/index.js"),_index5=require("../Swipeable/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,r,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?s:i){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(r.get||r.set)?n(l,t,r):l[t]=e[t]);return l})(e,t)}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=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(t.icons?.chevronRight??_defaultIcons.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=(0,_index.useTheme)(),s=i.components.checkbox?.md?.boxSize??20,n=Math.round(.72*s);return(0,_jsxRuntime.jsx)(_reactNative.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,..._corners.smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?(0,_jsxRuntime.jsx)(_reactNativeSvg.default,{width:n,height:n,viewBox:"0 0 24 24",children:(0,_jsxRuntime.jsx)(_reactNativeSvg.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.default.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>(0,_jsxRuntime.jsx)(_index2.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=exports.ListItem=_react.default.memo((0,_react.forwardRef)((e,t)=>{const{title:i,loading:s=!1,subtitle:n,description:r,titleLines:l=1,subtitleLines:o=1,left:a,icon:c,iconTone:d="primary",right:u,rightPlacement:m="auto",selectable:x=!1,checked:h=!1,onCheckedChange:_,actions:g,onPress:p,haptic:j,selected:y=!1,disabled:b=!1,size:f="md",divider:S=!1,chevron:v=!1,leftActions:R,rightActions:w,contextMenu:I,accessibilityLabel:L,accessibilityHint:k,style:z,containerStyle:N,titleStyle:F,subtitleStyle:V,descriptionStyle:A,leftSlotStyle:C,rightSlotStyle:q,testID:B}=e,P=(0,_index.useTheme)(),D=(0,_react.useMemo)(()=>sizeFor(P,f),[P,f]),H=stylesFor(P),{fontScale:M}=(0,_reactNative.useWindowDimensions)(),W=!!u&&("below"===m||"auto"===m&&M>1.2),T=(0,_useContextMenu.useContextMenu)(b?void 0:I,{haptic:j||!1,testID:B}),E=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(t,T.hostRef),[t,T.hostRef]),O=x||!!p,G=O||T.enabled,Z=G&&!b,{style:U,pressIn:K,pressOut:X}=(0,_usePressAnimation.usePressAnimation)({enabled:Z}),J=(0,_useFlickGuard.useFlickGuard)(),Q=L??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,Y=a??(void 0===c?null:(0,_jsxRuntime.jsx)(_index3.IconBadge,{icon:c,tone:d,size:BADGE_SIZE[f]})),$=x?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:H.selectionLead,children:[(0,_jsxRuntime.jsx)(SelectionBox,{checked:h,disabled:b}),Y?(0,_jsxRuntime.jsx)(_reactNative.View,{style:H.selectionLeadContent,children:Y}):null]}):Y,ee=null!=g&&!1!==g&&!(Array.isArray(g)&&0===g.length),te=S&&!ee,ie=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[H.row,{paddingVertical:D.paddingVertical,minHeight:D.minHeight,backgroundColor:y?P.colors.surface.selected:"transparent"},te?H.divider:null,b?H.disabled:null,N],children:[$?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[H.leftSlot,C],children:$}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:H.middle,children:[null==i||isText(i)?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[H.title,{fontSize:D.titleSize,...(0,_index.fontFor)(P,"medium"),color:b?P.colors.text.disabled:P.colors.text.primary},F],numberOfLines:l,children:i??" "}):i,null==n||""===n?null:isText(n)?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[H.subtitle,{fontSize:D.subtitleSize,color:b?P.colors.text.disabled:P.colors.text.secondary},V],numberOfLines:o,children:n}):n,r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[H.description,{fontSize:D.subtitleSize,color:b?P.colors.text.disabled:P.colors.text.tertiary},A],numberOfLines:2,children:r}):null,W?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[H.rightBelow,q],children:u}):null]}),u&&!W||v?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[H.rightSlot,W?null:q],children:[W?null:u,v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:u&&!W?H.chevronWithRight:null,children:(0,_jsxRuntime.jsx)(Chevron,{color:b?P.colors.text.disabled:P.colors.text.tertiary})}):null]}):null]}),se=G?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[U,z],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:E,onPress:e=>{Z&&O&&!J.isFlick(e)&&(j&&(0,_hapticUtils.triggerHaptic)(j),x?_?.(!h):p?.(e))},onPressIn:e=>{J.onPressIn(e),K()},onPressOut:X,disabled:!Z,accessibilityRole:x?"checkbox":p?"button":void 0,accessibilityLabel:Q,accessibilityHint:k,accessibilityState:x?{checked:h,disabled:!Z}:{selected:y,disabled:!Z},"aria-disabled":!Z,...x?{"aria-checked":h}:{"aria-selected":y},testID:B,android_ripple:{color:P.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?H.pressed:null,...T.hostProps,children:ie})}):(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"none",accessibilityLabel:Q,accessibilityHint:k,accessibilityState:{selected:y,disabled:b},"aria-selected":y,"aria-disabled":b,testID:B,style:z,children:ie}),ne=R&&R.length>0||w&&w.length>0,re=ee?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[y?{backgroundColor:P.colors.surface.selected}:null,S?H.divider:null],children:[se,(0,_jsxRuntime.jsx)(_reactNative.View,{style:H.actions,children:renderActions(g)})]}):se,le=ne?(0,_jsxRuntime.jsx)(_index5.Swipeable,{leftActions:R,rightActions:w,accessibilityLabel:Q,children:re}):re;return s?(0,_jsxRuntime.jsx)(ListItemSkeleton,{...e}):T.enabled?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[le,T.renderSurface((0,_jsxRuntime.jsx)(_reactNative.View,{style:H.preview,children:ie}))]}):le}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:n,chevron:r,size:l="md",containerStyle:o,style:a})=>{const c=(0,_index.useTheme)(),d=sizeFor(c,l),u=Math.round(1.15*d.titleSize),m=Math.round(1.15*d.subtitleSize);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:c.spacing.md,paddingVertical:d.paddingVertical,minHeight:d.minHeight},o,a],children:[void 0!==i||void 0!==s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginRight:c.spacing.sm},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"circle",width:40,height:40})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"70%",height:u,style:{marginBottom:c.spacing.xs}}),void 0!==e?(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"50%",height:m,style:void 0!==t?{marginBottom:c.spacing.xs}:void 0}):null,void 0!==t?(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"85%",height:m}):null]}),void 0!==n||r?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginLeft:c.spacing.sm},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:_reactNative.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},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,..._corners.smoothCorners,overflow:"hidden"},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:2,...(0,_index.fontFor)(e,"normal")},description:{marginTop:2,...(0,_index.fontFor)(e,"normal")}}),stylesFor=(0,_themeStyles.themeStyles)(buildStyles);var _default=exports.default=ListItem;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ListItem=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_useFlickGuard=require("../../hooks/useFlickGuard.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_themeStyles=require("../../utils/themeStyles.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index2=require("../Button/index.js"),_index3=require("../IconBadge/index.js"),_useContextMenu=require("../Menu/useContextMenu.js"),_index4=require("../Skeleton/index.js"),_index5=require("../Swipeable/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,r,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?s:i){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(r.get||r.set)?n(l,t,r):l[t]=e[t]);return l})(e,t)}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=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(t.icons?.chevronRight??_defaultIcons.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=(0,_index.useTheme)(),s=i.components.checkbox?.md?.boxSize??20,n=Math.round(.72*s);return(0,_jsxRuntime.jsx)(_reactNative.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,..._corners.smoothCorners,borderColor:e?i.colors.primary:i.colors.border.primary,backgroundColor:e?i.colors.primary:t?i.colors.surface.disabled:"transparent"},children:e?(0,_jsxRuntime.jsx)(_reactNativeSvg.default,{width:n,height:n,viewBox:"0 0 24 24",children:(0,_jsxRuntime.jsx)(_reactNativeSvg.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.default.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>(0,_jsxRuntime.jsx)(_index2.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=exports.ListItem=_react.default.memo((0,_react.forwardRef)((e,t)=>{const{title:i,loading:s=!1,subtitle:n,description:r,children:l,titleLines:o=1,subtitleLines:a=1,left:c,icon:d,iconTone:u="primary",right:m,rightPlacement:x="auto",selectable:h=!1,checked:_=!1,onCheckedChange:g,actions:p,onPress:j,haptic:y,selected:b=!1,disabled:f=!1,size:S="md",divider:v=!1,chevron:R=!1,leftActions:w,rightActions:I,contextMenu:L,accessibilityLabel:k,accessibilityHint:N,style:z,containerStyle:V,titleStyle:F,subtitleStyle:A,descriptionStyle:C,leftSlotStyle:q,rightSlotStyle:B,testID:P}=e,D=(0,_index.useTheme)(),H=(0,_react.useMemo)(()=>sizeFor(D,S),[D,S]),M=stylesFor(D),{fontScale:W}=(0,_reactNative.useWindowDimensions)(),T=!!m&&("below"===x||"auto"===x&&W>1.2),E=(0,_useContextMenu.useContextMenu)(f?void 0:L,{haptic:y||!1,testID:P}),O=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(t,E.hostRef),[t,E.hostRef]),G=h||!!j,Z=G||E.enabled,U=Z&&!f,{style:K,pressIn:X,pressOut:J}=(0,_usePressAnimation.usePressAnimation)({enabled:U}),Q=(0,_useFlickGuard.useFlickGuard)(),Y=k??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=c??(void 0===d?null:(0,_jsxRuntime.jsx)(_index3.IconBadge,{icon:d,tone:u,size:BADGE_SIZE[S]})),ee=h?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:M.selectionLead,children:[(0,_jsxRuntime.jsx)(SelectionBox,{checked:_,disabled:f}),$?(0,_jsxRuntime.jsx)(_reactNative.View,{style:M.selectionLeadContent,children:$}):null]}):$,te=null!=p&&!1!==p&&!(Array.isArray(p)&&0===p.length),ie=v&&!te,se=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[M.row,{paddingVertical:H.paddingVertical,minHeight:H.minHeight,backgroundColor:b?D.colors.surface.selected:"transparent"},ie?M.divider:null,f?M.disabled:null,V],children:[ee?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[M.leftSlot,q],children:ee}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:M.middle,children:[null==i||isText(i)?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[M.title,{fontSize:H.titleSize,...(0,_index.fontFor)(D,"medium"),color:f?D.colors.text.disabled:D.colors.text.primary},F],numberOfLines:o,children:i??" "}):i,null==n||""===n?null:isText(n)?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[M.subtitle,{fontSize:H.subtitleSize,color:f?D.colors.text.disabled:D.colors.text.secondary},A],numberOfLines:a,children:n}):n,r?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[M.description,{fontSize:H.subtitleSize,color:f?D.colors.text.disabled:D.colors.text.tertiary},C],numberOfLines:2,children:r}):null,null!=l&&!1!==l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:M.body,children:l}):null,T?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[M.rightBelow,B],children:m}):null]}),m&&!T||R?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[M.rightSlot,T?null:B],children:[T?null:m,R?(0,_jsxRuntime.jsx)(_reactNative.View,{style:m&&!T?M.chevronWithRight:null,children:(0,_jsxRuntime.jsx)(Chevron,{color:f?D.colors.text.disabled:D.colors.text.tertiary})}):null]}):null]}),ne=Z?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[K,z],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:O,onPress:e=>{U&&G&&!Q.isFlick(e)&&(y&&(0,_hapticUtils.triggerHaptic)(y),h?g?.(!_):j?.(e))},onPressIn:e=>{Q.onPressIn(e),X()},onPressOut:J,disabled:!U,accessibilityRole:h?"checkbox":j?"button":void 0,accessibilityLabel:Y,accessibilityHint:N,accessibilityState:h?{checked:_,disabled:!U}:{selected:b,disabled:!U},"aria-disabled":!U,...h?{"aria-checked":_}:{"aria-selected":b},testID:P,android_ripple:{color:D.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?M.pressed:null,...E.hostProps,children:se})}):(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"none",accessibilityLabel:Y,accessibilityHint:N,accessibilityState:{selected:b,disabled:f},"aria-selected":b,"aria-disabled":f,testID:P,style:z,children:se}),re=w&&w.length>0||I&&I.length>0,le=te?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[b?{backgroundColor:D.colors.surface.selected}:null,v?M.divider:null],children:[ne,(0,_jsxRuntime.jsx)(_reactNative.View,{style:M.actions,children:renderActions(p)})]}):ne,oe=re?(0,_jsxRuntime.jsx)(_index5.Swipeable,{leftActions:w,rightActions:I,accessibilityLabel:Y,children:le}):le;return s?(0,_jsxRuntime.jsx)(ListItemSkeleton,{...e}):E.enabled?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[oe,E.renderSurface((0,_jsxRuntime.jsx)(_reactNative.View,{style:M.preview,children:se}))]}):oe}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:n,chevron:r,size:l="md",containerStyle:o,style:a})=>{const c=(0,_index.useTheme)(),d=sizeFor(c,l),u=Math.round(1.15*d.titleSize),m=Math.round(1.15*d.subtitleSize);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:c.spacing.md,paddingVertical:d.paddingVertical,minHeight:d.minHeight},o,a],children:[void 0!==i||void 0!==s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginRight:c.spacing.sm},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"circle",width:40,height:40})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"70%",height:u,style:{marginBottom:c.spacing.xs}}),void 0!==e?(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"50%",height:m,style:void 0!==t?{marginBottom:c.spacing.xs}:void 0}):null,void 0!==t?(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"85%",height:m}):null]}),void 0!==n||r?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginLeft:c.spacing.sm},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:_reactNative.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,..._corners.smoothCorners,overflow:"hidden"},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:2,...(0,_index.fontFor)(e,"normal")},description:{marginTop:2,...(0,_index.fontFor)(e,"normal")}}),stylesFor=(0,_themeStyles.themeStyles)(buildStyles);var _default=exports.default=ListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OTPInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_jsxRuntime=require("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=exports.OTPInput=(0,_react.forwardRef)((e,t)=>{const{value:r,defaultValue:i,onChange:a,onComplete:n,length:s=6,keyboardType:o="number-pad",autoFocus:l=!1,autoFocusDelay:c=0,disabled:u=!1,error:d,size:_="md",secure:m=!1,haptic:p,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OTPInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_jsxRuntime=require("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=exports.OTPInput=(0,_react.forwardRef)((e,t)=>{const{value:r,defaultValue:i,onChange:a,onComplete:n,length:s=6,keyboardType:o="number-pad",autoFocus:l=!1,autoFocusDelay:c=0,disabled:u=!1,error:d,size:_="md",secure:m=!1,haptic:p,onFocus:g,accessibilityLabel:f,style:x,cellStyle:h,textStyle:b,testID:v}=e,[y,j]=(0,_index.useControllableState)({value:r,defaultValue:i??"",onChange:a}),N=(0,_index2.useTheme)(),R=(0,_react.useMemo)(()=>buildStyles(N),[N]),C={...sizeMap[_],...N.components.otpInput?.[_]??{}},T=(0,_react.useRef)([]),[F,S]=(0,_react.useState)(-1),k=(0,_react.useRef)(null),V=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,z=(0,_react.useRef)(new Map),w=(0,_react.useMemo)(()=>{const e=z.current,t=[];for(let r=0;r<s;r+=1){let i=e.get(r);i||(i=new _reactNative.Animated.Value(0),e.set(r,i)),t.push(i)}for(const t of Array.from(e.keys()))t>=s&&e.delete(t);return t},[s]),E=(0,_react.useRef)(-1),I=N.components.otpInput?.shakeOnError??!1,A=(0,_index.useReducedMotion)(),O=!0===d||(0,_FieldBase.hasFieldText)(d);(0,_react.useEffect)(()=>{let e;return null===k.current||!O||k.current||(p&&(0,_index3.triggerHaptic)("notificationError"),I&&!A&&((0,_index2.setNativeValue)(V,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(V,{toValue:1,duration:N.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(V,{toValue:-1,duration:N.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(V,{toValue:1,duration:N.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(V,{toValue:0,duration:N.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0})]),e.start())),k.current=O,()=>e?.stop()},[O,V,I,p,A,N.motion.duration.instant]),(0,_react.useEffect)(()=>{const e=E.current;if(E.current=F,e===F)return;if(-1===e&&-1===F)return;const t=[];return w.forEach((r,i)=>{const a=i===F?1:0;if(i!==F&&i!==e)return;const n=_reactNative.Animated.timing(r,{toValue:a,duration:N.motion.duration.fast,easing:_reactNative.Easing.bezier(...N.motion.easing.standard),useNativeDriver:!0});n.start(),t.push(n)}),()=>t.forEach(e=>e.stop())},[F,w,N]);const M=(0,_react.useCallback)(e=>{const t=T.current[e];t&&t.focus()},[]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>M(0),blur:()=>{const e=T.current[F>=0?F:0];e?.blur()},clear:()=>{j(""),M(0)}}),[M,F,j]),(0,_react.useEffect)(()=>{if(l&&!u){const e=setTimeout(()=>M(0),c);return()=>clearTimeout(e)}},[l,c,u,M]);const B=(0,_react.useMemo)(()=>{const e=new Array(s).fill("");for(let t=0;t<Math.min(y.length,s);t+=1)e[t]=y[t]??"";return e},[y,s]),D=(0,_react.useCallback)(e=>{const t=e.slice(0,s);t!==y&&(j(t),t.length===s&&n&&n(t))},[s,j,n,y]),P=(0,_react.useCallback)((e,t)=>{const r=t.replace(/\u200B/g,""),i=sanitizeChar(r,o);if(!i){const t=B.slice(),r=(t[e]??"").length>0;if(t[e]="",D(t.join("").slice(0,s)),!r&&e>0){const t=B.slice();t[e-1]="",D(t.join("")),M(e-1)}return}const a=B[e]??"",n=a&&i.length>s&&i.startsWith(a)?i.slice(a.length):i;if(n.length>=s){const t=n.slice(0,s),r=y.length;return D(t),t.length!==r&&p&&(0,_index3.triggerHaptic)(p),void T.current[e]?.blur()}const l=B.slice();let c=e;for(let e=0;e<i.length&&c<s;e+=1)l[c]=i[e]??"",c+=1;const u=l.join("").slice(0,s),d=y.length;D(u),u.length!==d&&p&&(0,_index3.triggerHaptic)(p);const _=Math.min(c,s-1);c>=s?T.current[e]?.blur():M(_)},[B,M,o,s,p,D,y]),q=(0,_react.useCallback)((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(B[e]??"").length){if(e>0){const t=B.slice();t[e-1]="",D(t.join("")),M(e-1)}}else{const t=B.slice();t[e]="",D(t.join(""))}},[B,M,D]),H=(0,_react.useCallback)((e,t)=>{S(e),g?.(t)},[g]),W=(0,_react.useCallback)(()=>{S(-1)},[]),L=(0,_react.useCallback)(()=>{if(u)return;const e=B.indexOf("");M(-1===e?s-1:e)},[B,u,M,s]),$=f??`Enter ${s}-digit code`,G=V.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:x,accessible:!0,accessibilityRole:"none",accessibilityLabel:$,accessibilityValue:{text:r},accessibilityState:{disabled:u},"aria-disabled":u,testID:v,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:L,disabled:u,accessible:!1,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[R.row,{columnGap:C.gap,transform:[{translateX:G}]}],children:B.map((e,t)=>{const r=F===t,i=e.length>0,a=O?N.colors.border.error:N.colors.border.focus,n=w[t];if(!n)return null;const l=m&&i?"●":e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:R.cellWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:_,width:C.cell,height:C.cell,borderRadius:C.borderRadius,borderWidth:1.5,focused:r,error:O,filled:i,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:h,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:e=>{T.current[t]=e},value:(m&&i?"":e)||"",onChangeText:e=>P(t,e),onKeyPress:e=>q(t,e),onFocus:e=>H(t,e),onBlur:W,keyboardType:o,editable:!u,selectTextOnFocus:!0,caretHidden:i,maxLength:s+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[R.input,{fontSize:C.fontSize,color:N.colors.text.primary,...(0,_index2.fontFor)(N,"semibold")},b]}),m&&i?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:R.maskOverlay,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{fontSize:C.fontSize,color:N.colors.text.primary,...(0,_index2.fontFor)(N,"semibold")},b],children:l})}):null]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[R.underline,{backgroundColor:a,opacity:n}]})]},`otp-cell-${t}`)})})}),(0,_jsxRuntime.jsx)(_FieldBase.FieldMessage,{size:_,error:!0,text:d})]})});OTPInput.displayName="OTPInput";const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:0},maskOverlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:4,height:2,width:"60%",borderRadius:1,..._corners.smoothCorners}});var _default=exports.default=OTPInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TagInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../Chip/index.js"),_index5=require("../FieldBase/index.js"),_jsxRuntime=require("react/jsx-runtime");const TagInput=exports.TagInput=(0,_react.forwardRef)((e,t)=>{const{value:i,defaultValue:r,onChange:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TagInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../Chip/index.js"),_index5=require("../FieldBase/index.js"),_jsxRuntime=require("react/jsx-runtime");const TagInput=exports.TagInput=(0,_react.forwardRef)((e,t)=>{const{value:i,defaultValue:r,onChange:n,placeholder:a,label:s,helperText:l,error:o,required:u,disabled:d=!1,size:c="md",variant:x,maxTags:p,unique:_=!0,transform:g,separators:h=[","],haptic:m,onFocus:f,style:j,testID:v}=e,b=(0,_index2.useTheme)(),y=(0,_react.useMemo)(()=>buildStyles(b),[b]),[C,R]=(0,_index.useControllableState)({value:i,defaultValue:r??[],onChange:n}),[S,T]=(0,_react.useState)(""),[q,w]=(0,_react.useState)(!1),I=(0,_react.useRef)(null),F=(0,_react.useMemo)(()=>(0,_index3.mergeRefs)(I,t),[t]),k=(0,_react.useCallback)(()=>{d||I.current?.focus()},[d]),z="number"==typeof p&&C.length>=p,B=!0===o||(0,_index5.hasFieldText)(o),N=u&&!s&&0===C.length&&0===S.length&&Boolean(a),V=(0,_react.useCallback)(e=>{const t=g?g(e.trim()):e.trim();if(!t)return;if(z)return;if(_&&C.some(e=>e.toLowerCase()===t.toLowerCase()))return void T("");R([...C,t]),T("");const i=(0,_index3.resolveHaptic)(m,"selection");i&&(0,_index3.triggerHaptic)(i)},[z,m,R,C,g,_]),D=(0,_react.useCallback)(e=>{const t=C.filter((t,i)=>i!==e);R(t);const i=(0,_index3.resolveHaptic)(m,"selection");i&&(0,_index3.triggerHaptic)(i)},[m,R,C]),H=(0,_react.useCallback)(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[i]=e.split(t);return void V(i)}T(e)},[V,h]),L=(0,_react.useCallback)(e=>{d||"Backspace"===e.nativeEvent.key&&""===S&&C.length>0&&D(C.length-1)},[d,S,D,C.length]),M=(0,_jsxRuntime.jsx)(_index5.FieldBase,{size:c,variant:x,focused:q,disabled:d,error:B,filled:C.length>0||S.length>0,onPress:k,pressFeedback:!1,style:j,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:y.wrap,children:[C.map((e,t)=>(0,_jsxRuntime.jsx)(_index4.Chip,{label:e,size:"sm",onClose:d?void 0:()=>D(t),haptic:m},`${e}-${t}`)),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:y.inputBox,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:F,value:S,onChangeText:H,onKeyPress:L,onSubmitEditing:()=>V(S),onFocus:e=>{w(!0),f?.(e)},onBlur:()=>{w(!1),V(S)},editable:!d&&!z,placeholder:z||N?void 0:a,placeholderTextColor:b.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",accessibilityLabel:s??a,style:[y.input,{color:b.colors.text.primary,fontSize:b.typography.fontSize.base}],testID:v?`${v}-input`:void 0}),N?(0,_jsxRuntime.jsx)(_index5.RequiredPlaceholder,{text:a??"",color:b.colors.text.tertiary,fontSize:b.typography.fontSize.base,weightStyle:(0,_index2.fontFor)(b,"normal")}):null]})]})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:v,children:[s?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{size:c,required:u,children:s}):null,M,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{size:c,error:B,text:B?o:l})]})});TagInput.displayName="TagInput";const buildStyles=e=>_reactNative.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:{...(0,_index2.fontFor)(e,"normal"),padding:0}});var _default=exports.default=TagInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.lightTheme=exports.darkTheme=void 0;var _squircle=require("../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";Object.defineProperty(exports,"__esModule",{value:!0}),exports.lightTheme=exports.darkTheme=void 0;var _squircle=require("../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}},lightTheme=exports.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.SQUIRCLE_SMOOTHING,shadows:lightShadows,motion:motion,components:components,gradients:{}},darkTheme=exports.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.SQUIRCLE_SMOOTHING,shadows:darkShadows,motion:motion,components:components,gradients:{}};
|
|
@@ -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,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{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{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{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';
|
|
@@ -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;
|
|
@@ -81,18 +81,18 @@ export interface FilePickerTriggerState {
|
|
|
81
81
|
}
|
|
82
82
|
export interface FilePickerLabels {
|
|
83
83
|
/** Trigger text when no files are attached. Default 'Attach file'. */
|
|
84
|
-
trigger
|
|
84
|
+
trigger?: string;
|
|
85
85
|
/** Add-affordance text/tile label once files exist. Default '+'. (card tile) / 'Add more' (list row). */
|
|
86
|
-
addMore
|
|
86
|
+
addMore?: string;
|
|
87
87
|
/** Source chooser sheet title. Default 'Add from'. */
|
|
88
|
-
sheetTitle
|
|
88
|
+
sheetTitle?: string;
|
|
89
89
|
/** A11y label template for a file's remove button. */
|
|
90
|
-
removeFile
|
|
90
|
+
removeFile?: (name: string) => string;
|
|
91
91
|
/** Retry affordance a11y label. Default 'Retry upload'. */
|
|
92
|
-
retry
|
|
93
|
-
errorTooMany
|
|
94
|
-
errorTooLarge
|
|
95
|
-
errorWrongType
|
|
92
|
+
retry?: string;
|
|
93
|
+
errorTooMany?: (maxFiles: number) => string;
|
|
94
|
+
errorTooLarge?: (name: string, maxSizeMB: number) => string;
|
|
95
|
+
errorWrongType?: (name: string) => string;
|
|
96
96
|
}
|
|
97
97
|
export interface FilePickerRef {
|
|
98
98
|
/** Open a source by key, or the chooser (sheet when >1 source). */
|
|
@@ -132,7 +132,7 @@ export interface FilePickerProps {
|
|
|
132
132
|
helperText?: string;
|
|
133
133
|
/** External error — wins over internal validation errors (form binding). */
|
|
134
134
|
error?: React.ReactNode;
|
|
135
|
-
labels?:
|
|
135
|
+
labels?: FilePickerLabels;
|
|
136
136
|
/** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
|
|
137
137
|
haptic?: HapticType | false;
|
|
138
138
|
/** Files accepted by a pick (post-validation, post-process). */
|
|
@@ -40,6 +40,11 @@ export interface ListItemProps {
|
|
|
40
40
|
/** Text in the subtitle style, or any node drawn as is. */
|
|
41
41
|
subtitle?: React.ReactNode;
|
|
42
42
|
description?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Content drawn in the text column under the description, before a `right`
|
|
45
|
+
* slot placed below. Inside the row's press target.
|
|
46
|
+
*/
|
|
47
|
+
children?: React.ReactNode;
|
|
43
48
|
/** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
|
|
44
49
|
titleLines?: number;
|
|
45
50
|
/** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
|
+
import type { FocusEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
import type { HapticType } from '../../utils';
|
|
4
4
|
export type OTPInputSize = 'sm' | 'md' | 'lg';
|
|
5
5
|
export interface OTPInputRef {
|
|
@@ -33,6 +33,8 @@ export interface OTPInputProps {
|
|
|
33
33
|
* Haptic feedback for interactions. Off unless a HapticType is passed.
|
|
34
34
|
*/
|
|
35
35
|
haptic?: HapticType | false;
|
|
36
|
+
/** Called when any cell takes focus. */
|
|
37
|
+
onFocus?: (e: FocusEvent) => void;
|
|
36
38
|
accessibilityLabel?: string;
|
|
37
39
|
style?: StyleProp<ViewStyle>;
|
|
38
40
|
cellStyle?: StyleProp<ViewStyle>;
|
|
@@ -38,13 +38,13 @@ export type ProfilePickerTone = 'primary' | 'success' | 'warning' | 'error' | 'i
|
|
|
38
38
|
export type ProfilePickerVariant = 'solid' | 'soft' | 'outline';
|
|
39
39
|
export interface ProfilePickerLabels {
|
|
40
40
|
/** A11y label of the photo button. Default 'Change profile photo'. */
|
|
41
|
-
pick
|
|
41
|
+
pick?: string;
|
|
42
42
|
/** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
|
|
43
|
-
remove
|
|
43
|
+
remove?: string;
|
|
44
44
|
/** Source chooser sheet title. Default 'Change photo'. */
|
|
45
|
-
sheetTitle
|
|
46
|
-
errorTooLarge
|
|
47
|
-
errorWrongType
|
|
45
|
+
sheetTitle?: string;
|
|
46
|
+
errorTooLarge?: (maxSizeMB: number) => string;
|
|
47
|
+
errorWrongType?: string;
|
|
48
48
|
}
|
|
49
49
|
export interface ProfilePickerProps {
|
|
50
50
|
/** Current photo URL or local URI, or null for none. */
|
|
@@ -109,7 +109,7 @@ export interface ProfilePickerProps {
|
|
|
109
109
|
subtitle?: React.ReactNode;
|
|
110
110
|
/** Renders the photo, e.g. an authenticated image loader (see Avatar). */
|
|
111
111
|
ImageComponent?: React.ComponentType<AvatarImageProps>;
|
|
112
|
-
labels?:
|
|
112
|
+
labels?: ProfilePickerLabels;
|
|
113
113
|
/** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
|
|
114
114
|
haptic?: HapticType | false;
|
|
115
115
|
/** Called with the message of a rejected or failed pick. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
import type { FocusEvent, TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
import type { HapticType } from '../../utils';
|
|
4
4
|
import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase';
|
|
5
5
|
export interface TagInputProps {
|
|
@@ -28,6 +28,8 @@ export interface TagInputProps {
|
|
|
28
28
|
/** Characters that commit the current draft in addition to submit. Default [',']. */
|
|
29
29
|
separators?: string[];
|
|
30
30
|
haptic?: HapticType | false;
|
|
31
|
+
/** Called when the text field takes focus. */
|
|
32
|
+
onFocus?: (e: FocusEvent) => void;
|
|
31
33
|
style?: StyleProp<ViewStyle>;
|
|
32
34
|
testID?: string;
|
|
33
35
|
}
|
|
@@ -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';
|
|
@@ -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.js';
|
|
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;
|
|
@@ -81,18 +81,18 @@ export interface FilePickerTriggerState {
|
|
|
81
81
|
}
|
|
82
82
|
export interface FilePickerLabels {
|
|
83
83
|
/** Trigger text when no files are attached. Default 'Attach file'. */
|
|
84
|
-
trigger
|
|
84
|
+
trigger?: string;
|
|
85
85
|
/** Add-affordance text/tile label once files exist. Default '+'. (card tile) / 'Add more' (list row). */
|
|
86
|
-
addMore
|
|
86
|
+
addMore?: string;
|
|
87
87
|
/** Source chooser sheet title. Default 'Add from'. */
|
|
88
|
-
sheetTitle
|
|
88
|
+
sheetTitle?: string;
|
|
89
89
|
/** A11y label template for a file's remove button. */
|
|
90
|
-
removeFile
|
|
90
|
+
removeFile?: (name: string) => string;
|
|
91
91
|
/** Retry affordance a11y label. Default 'Retry upload'. */
|
|
92
|
-
retry
|
|
93
|
-
errorTooMany
|
|
94
|
-
errorTooLarge
|
|
95
|
-
errorWrongType
|
|
92
|
+
retry?: string;
|
|
93
|
+
errorTooMany?: (maxFiles: number) => string;
|
|
94
|
+
errorTooLarge?: (name: string, maxSizeMB: number) => string;
|
|
95
|
+
errorWrongType?: (name: string) => string;
|
|
96
96
|
}
|
|
97
97
|
export interface FilePickerRef {
|
|
98
98
|
/** Open a source by key, or the chooser (sheet when >1 source). */
|
|
@@ -132,7 +132,7 @@ export interface FilePickerProps {
|
|
|
132
132
|
helperText?: string;
|
|
133
133
|
/** External error — wins over internal validation errors (form binding). */
|
|
134
134
|
error?: React.ReactNode;
|
|
135
|
-
labels?:
|
|
135
|
+
labels?: FilePickerLabels;
|
|
136
136
|
/** Haptics for pick/remove (selection) and rejections (error). Pass false to disable. */
|
|
137
137
|
haptic?: HapticType | false;
|
|
138
138
|
/** Files accepted by a pick (post-validation, post-process). */
|
|
@@ -40,6 +40,11 @@ export interface ListItemProps {
|
|
|
40
40
|
/** Text in the subtitle style, or any node drawn as is. */
|
|
41
41
|
subtitle?: React.ReactNode;
|
|
42
42
|
description?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Content drawn in the text column under the description, before a `right`
|
|
45
|
+
* slot placed below. Inside the row's press target.
|
|
46
|
+
*/
|
|
47
|
+
children?: React.ReactNode;
|
|
43
48
|
/** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
|
|
44
49
|
titleLines?: number;
|
|
45
50
|
/** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
|
+
import type { FocusEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
import type { HapticType } from '../../utils/index.js';
|
|
4
4
|
export type OTPInputSize = 'sm' | 'md' | 'lg';
|
|
5
5
|
export interface OTPInputRef {
|
|
@@ -33,6 +33,8 @@ export interface OTPInputProps {
|
|
|
33
33
|
* Haptic feedback for interactions. Off unless a HapticType is passed.
|
|
34
34
|
*/
|
|
35
35
|
haptic?: HapticType | false;
|
|
36
|
+
/** Called when any cell takes focus. */
|
|
37
|
+
onFocus?: (e: FocusEvent) => void;
|
|
36
38
|
accessibilityLabel?: string;
|
|
37
39
|
style?: StyleProp<ViewStyle>;
|
|
38
40
|
cellStyle?: StyleProp<ViewStyle>;
|
|
@@ -38,13 +38,13 @@ export type ProfilePickerTone = 'primary' | 'success' | 'warning' | 'error' | 'i
|
|
|
38
38
|
export type ProfilePickerVariant = 'solid' | 'soft' | 'outline';
|
|
39
39
|
export interface ProfilePickerLabels {
|
|
40
40
|
/** A11y label of the photo button. Default 'Change profile photo'. */
|
|
41
|
-
pick
|
|
41
|
+
pick?: string;
|
|
42
42
|
/** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
|
|
43
|
-
remove
|
|
43
|
+
remove?: string;
|
|
44
44
|
/** Source chooser sheet title. Default 'Change photo'. */
|
|
45
|
-
sheetTitle
|
|
46
|
-
errorTooLarge
|
|
47
|
-
errorWrongType
|
|
45
|
+
sheetTitle?: string;
|
|
46
|
+
errorTooLarge?: (maxSizeMB: number) => string;
|
|
47
|
+
errorWrongType?: string;
|
|
48
48
|
}
|
|
49
49
|
export interface ProfilePickerProps {
|
|
50
50
|
/** Current photo URL or local URI, or null for none. */
|
|
@@ -109,7 +109,7 @@ export interface ProfilePickerProps {
|
|
|
109
109
|
subtitle?: React.ReactNode;
|
|
110
110
|
/** Renders the photo, e.g. an authenticated image loader (see Avatar). */
|
|
111
111
|
ImageComponent?: React.ComponentType<AvatarImageProps>;
|
|
112
|
-
labels?:
|
|
112
|
+
labels?: ProfilePickerLabels;
|
|
113
113
|
/** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
|
|
114
114
|
haptic?: HapticType | false;
|
|
115
115
|
/** Called with the message of a rejected or failed pick. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
import type { FocusEvent, TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
import type { HapticType } from '../../utils/index.js';
|
|
4
4
|
import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
|
|
5
5
|
export interface TagInputProps {
|
|
@@ -28,6 +28,8 @@ export interface TagInputProps {
|
|
|
28
28
|
/** Characters that commit the current draft in addition to submit. Default [',']. */
|
|
29
29
|
separators?: string[];
|
|
30
30
|
haptic?: HapticType | false;
|
|
31
|
+
/** Called when the text field takes focus. */
|
|
32
|
+
onFocus?: (e: FocusEvent) => void;
|
|
31
33
|
style?: StyleProp<ViewStyle>;
|
|
32
34
|
testID?: string;
|
|
33
35
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.0",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@webority/mobile-core": ">=0.
|
|
73
|
+
"@webority/mobile-core": ">=0.18.0 <0.19.0",
|
|
74
74
|
"expo": ">=57.0.0",
|
|
75
75
|
"expo-file-system": ">=57.0.0",
|
|
76
76
|
"expo-haptics": ">=57.0.0",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
]
|
|
118
118
|
},
|
|
119
119
|
"devDependencies": {
|
|
120
|
-
"@webority/mobile-core": "0.
|
|
120
|
+
"@webority/mobile-core": "0.18.0"
|
|
121
121
|
},
|
|
122
122
|
"scripts": {
|
|
123
123
|
"build": "bob build && node ../../scripts/minify-lib.mjs",
|