@webority/mobile-ui 0.16.6 → 0.17.0

package/lib/commonjs/canvasKit/index.js

@@ -0,0 +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:r})=>{const t=paletteFor(e),o=(0,_reactNativeKeyboardController.useKeyboardState)(e=>Math.max(0,Math.round(e.height)));return(0,_react.createElement)(_reactNative.View,{...wuiMarker(MARKER.keyboardFrame),style:[styles.fill,{paddingBottom:o,backgroundColor:t.colors.background.primary}]},r)};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:"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}];

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -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,accessibilityLabel:g,style:f,cellStyle:x,textStyle:h,testID:b}=e,[v,y]=(0,_index.useControllableState)({value:r,defaultValue:i??"",onChange:a}),j=(0,_index2.useTheme)(),N=(0,_react.useMemo)(()=>buildStyles(j),[j]),R={...sizeMap[_],...j.components.otpInput?.[_]??{}},C=(0,_react.useRef)([]),[T,S]=(0,_react.useState)(-1),k=(0,_react.useRef)(null),F=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,V=(0,_react.useRef)(new Map),z=(0,_react.useMemo)(()=>{const e=V.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]),I=(0,_react.useRef)(-1),w=j.components.otpInput?.shakeOnError??!1,E=(0,_index.useReducedMotion)(),A=!0===d||(0,_FieldBase.hasFieldText)(d);(0,_react.useEffect)(()=>{let e;return null===k.current||!A||k.current||(p&&(0,_index3.triggerHaptic)("notificationError"),w&&!E&&((0,_index2.setNativeValue)(F,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(F,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:-1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:0,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0})]),e.start())),k.current=A,()=>e?.stop()},[A,F,w,p,E,j.motion.duration.instant]),(0,_react.useEffect)(()=>{const e=I.current;if(I.current=T,e===T)return;if(-1===e&&-1===T)return;const t=[];return z.forEach((r,i)=>{const a=i===T?1:0;if(i!==T&&i!==e)return;const n=_reactNative.Animated.timing(r,{toValue:a,duration:j.motion.duration.fast,easing:_reactNative.Easing.bezier(...j.motion.easing.standard),useNativeDriver:!0});n.start(),t.push(n)}),()=>t.forEach(e=>e.stop())},[T,z,j]);const M=(0,_react.useCallback)(e=>{const t=C.current[e];t&&t.focus()},[]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>M(0),blur:()=>{const e=C.current[T>=0?T:0];e?.blur()},clear:()=>{y(""),M(0)}}),[M,T,y]),(0,_react.useEffect)(()=>{if(l&&!u){const e=setTimeout(()=>M(0),c);return()=>clearTimeout(e)}},[l,c,u,M]);const O=(0,_react.useMemo)(()=>{const e=new Array(s).fill("");for(let t=0;t<Math.min(v.length,s);t+=1)e[t]=v[t]??"";return e},[v,s]),B=(0,_react.useCallback)(e=>{const t=e.slice(0,s);t!==v&&(y(t),t.length===s&&n&&n(t))},[s,y,n,v]),D=(0,_react.useCallback)((e,t)=>{const r=t.replace(/\u200B/g,""),i=sanitizeChar(r,o);if(!i){const t=O.slice(),r=(t[e]??"").length>0;if(t[e]="",B(t.join("").slice(0,s)),!r&&e>0){const t=O.slice();t[e-1]="",B(t.join("")),M(e-1)}return}const a=O[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=v.length;return B(t),t.length!==r&&p&&(0,_index3.triggerHaptic)(p),void C.current[e]?.blur()}const l=O.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=v.length;B(u),u.length!==d&&p&&(0,_index3.triggerHaptic)(p);const _=Math.min(c,s-1);c>=s?C.current[e]?.blur():M(_)},[O,M,o,s,p,B,v]),P=(0,_react.useCallback)((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(O[e]??"").length){if(e>0){const t=O.slice();t[e-1]="",B(t.join("")),M(e-1)}}else{const t=O.slice();t[e]="",B(t.join(""))}},[O,M,B]),q=(0,_react.useCallback)(e=>{S(e)},[]),H=(0,_react.useCallback)(()=>{S(-1)},[]),W=(0,_react.useCallback)(()=>{if(u)return;const e=O.findIndex(e=>""===e);M(-1===e?s-1:e)},[O,u,M,s]),L=g??`Enter ${s}-digit code`,$=F.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:f,accessible:!0,accessibilityRole:"none",accessibilityLabel:L,accessibilityValue:{text:r},accessibilityState:{disabled:u},"aria-disabled":u,testID:b,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:W,disabled:u,accessible:!1,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.row,{columnGap:R.gap,transform:[{translateX:$}]}],children:O.map((e,t)=>{const r=T===t,i=e.length>0,a=A?j.colors.border.error:j.colors.border.focus,n=z[t];if(!n)return null;const l=m&&i?"●":e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:N.cellWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:_,width:R.cell,height:R.cell,borderRadius:R.borderRadius,borderWidth:1.5,focused:r,error:A,filled:i,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:x,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:e=>{C.current[t]=e},value:(m&&i?"":e)||"​",onChangeText:e=>D(t,e),onKeyPress:e=>P(t,e),onFocus:()=>q(t),onBlur:H,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:[N.input,{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h]}),m&&i?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:N.maskOverlay,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h],children:l})}):null]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.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;
+"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,accessibilityLabel:g,style:f,cellStyle:x,textStyle:h,testID:b}=e,[v,y]=(0,_index.useControllableState)({value:r,defaultValue:i??"",onChange:a}),j=(0,_index2.useTheme)(),N=(0,_react.useMemo)(()=>buildStyles(j),[j]),R={...sizeMap[_],...j.components.otpInput?.[_]??{}},C=(0,_react.useRef)([]),[T,S]=(0,_react.useState)(-1),k=(0,_react.useRef)(null),F=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,V=(0,_react.useRef)(new Map),z=(0,_react.useMemo)(()=>{const e=V.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]),w=(0,_react.useRef)(-1),E=j.components.otpInput?.shakeOnError??!1,I=(0,_index.useReducedMotion)(),A=!0===d||(0,_FieldBase.hasFieldText)(d);(0,_react.useEffect)(()=>{let e;return null===k.current||!A||k.current||(p&&(0,_index3.triggerHaptic)("notificationError"),E&&!I&&((0,_index2.setNativeValue)(F,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(F,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:-1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(F,{toValue:0,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0})]),e.start())),k.current=A,()=>e?.stop()},[A,F,E,p,I,j.motion.duration.instant]),(0,_react.useEffect)(()=>{const e=w.current;if(w.current=T,e===T)return;if(-1===e&&-1===T)return;const t=[];return z.forEach((r,i)=>{const a=i===T?1:0;if(i!==T&&i!==e)return;const n=_reactNative.Animated.timing(r,{toValue:a,duration:j.motion.duration.fast,easing:_reactNative.Easing.bezier(...j.motion.easing.standard),useNativeDriver:!0});n.start(),t.push(n)}),()=>t.forEach(e=>e.stop())},[T,z,j]);const O=(0,_react.useCallback)(e=>{const t=C.current[e];t&&t.focus()},[]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>O(0),blur:()=>{const e=C.current[T>=0?T:0];e?.blur()},clear:()=>{y(""),O(0)}}),[O,T,y]),(0,_react.useEffect)(()=>{if(l&&!u){const e=setTimeout(()=>O(0),c);return()=>clearTimeout(e)}},[l,c,u,O]);const M=(0,_react.useMemo)(()=>{const e=new Array(s).fill("");for(let t=0;t<Math.min(v.length,s);t+=1)e[t]=v[t]??"";return e},[v,s]),B=(0,_react.useCallback)(e=>{const t=e.slice(0,s);t!==v&&(y(t),t.length===s&&n&&n(t))},[s,y,n,v]),D=(0,_react.useCallback)((e,t)=>{const r=t.replace(/\u200B/g,""),i=sanitizeChar(r,o);if(!i){const t=M.slice(),r=(t[e]??"").length>0;if(t[e]="",B(t.join("").slice(0,s)),!r&&e>0){const t=M.slice();t[e-1]="",B(t.join("")),O(e-1)}return}const a=M[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=v.length;return B(t),t.length!==r&&p&&(0,_index3.triggerHaptic)(p),void C.current[e]?.blur()}const l=M.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=v.length;B(u),u.length!==d&&p&&(0,_index3.triggerHaptic)(p);const _=Math.min(c,s-1);c>=s?C.current[e]?.blur():O(_)},[M,O,o,s,p,B,v]),P=(0,_react.useCallback)((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(M[e]??"").length){if(e>0){const t=M.slice();t[e-1]="",B(t.join("")),O(e-1)}}else{const t=M.slice();t[e]="",B(t.join(""))}},[M,O,B]),q=(0,_react.useCallback)(e=>{S(e)},[]),H=(0,_react.useCallback)(()=>{S(-1)},[]),W=(0,_react.useCallback)(()=>{if(u)return;const e=M.indexOf("");O(-1===e?s-1:e)},[M,u,O,s]),L=g??`Enter ${s}-digit code`,$=F.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:f,accessible:!0,accessibilityRole:"none",accessibilityLabel:L,accessibilityValue:{text:r},accessibilityState:{disabled:u},"aria-disabled":u,testID:b,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:W,disabled:u,accessible:!1,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.row,{columnGap:R.gap,transform:[{translateX:$}]}],children:M.map((e,t)=>{const r=T===t,i=e.length>0,a=A?j.colors.border.error:j.colors.border.focus,n=z[t];if(!n)return null;const l=m&&i?"●":e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:N.cellWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:_,width:R.cell,height:R.cell,borderRadius:R.borderRadius,borderWidth:1.5,focused:r,error:A,filled:i,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:x,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:e=>{C.current[t]=e},value:(m&&i?"":e)||"​",onChangeText:e=>D(t,e),onKeyPress:e=>P(t,e),onFocus:()=>q(t),onBlur:H,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:[N.input,{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h]}),m&&i?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:N.maskOverlay,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h],children:l})}):null]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.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;

package/lib/module/canvasKit/index.js

@@ -0,0 +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:o})=>{const t=paletteFor(e),r=useKeyboardState(e=>Math.max(0,Math.round(e.height)));return createElement(View,{...wuiMarker(MARKER.keyboardFrame),style:[styles.fill,{paddingBottom:r,backgroundColor:t.colors.background.primary}]},o)};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:"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}];

package/lib/module/components/OTPInput/OTPInput.js

@@ -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:a=6,keyboardType:o="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:f=!1,haptic:p,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[j,v]=useControllableState({value:n,defaultValue:i??"",onChange:r}),C=useTheme(),S=useMemo(()=>buildStyles(C),[C]),T={...sizeMap[m],...C.components.otpInput?.[m]??{}},V=useRef([]),[R,k]=useState(-1),w=useRef(null),E=useRef(createAnimatedValue(0)).current,F=useRef(new Map),I=useMemo(()=>{const e=F.current,t=[];for(let n=0;n<a;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>=a&&e.delete(t);return t},[a]),z=useRef(-1),A=C.components.otpInput?.shakeOnError??!1,M=useReducedMotion(),_=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===w.current||!_||w.current||(p&&triggerHaptic("notificationError"),A&&!M&&(setNativeValue(E,0),e=Animated.sequence([Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:-1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:0,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=_,()=>e?.stop()},[_,E,A,p,M,C.motion.duration.instant]),useEffect(()=>{const e=z.current;if(z.current=R,e===R)return;if(-1===e&&-1===R)return;const t=[];return I.forEach((n,i)=>{const r=i===R?1:0;if(i!==R&&i!==e)return;const s=Animated.timing(n,{toValue:r,duration:C.motion.duration.fast,easing:Easing.bezier(...C.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[R,I,C]);const D=useCallback(e=>{const t=V.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=V.current[R>=0?R:0];e?.blur()},clear:()=>{v(""),D(0)}}),[D,R,v]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>D(0),u);return()=>clearTimeout(e)}},[l,u,c,D]);const O=useMemo(()=>{const e=new Array(a).fill("");for(let t=0;t<Math.min(j.length,a);t+=1)e[t]=j[t]??"";return e},[j,a]),P=useCallback(e=>{const t=e.slice(0,a);t!==j&&(v(t),t.length===a&&s&&s(t))},[a,v,s,j]),H=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),i=sanitizeChar(n,o);if(!i){const t=O.slice(),n=(t[e]??"").length>0;if(t[e]="",P(t.join("").slice(0,a)),!n&&e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}return}const r=O[e]??"",s=r&&i.length>a&&i.startsWith(r)?i.slice(r.length):i;if(s.length>=a){const t=s.slice(0,a),n=j.length;return P(t),t.length!==n&&p&&triggerHaptic(p),void V.current[e]?.blur()}const l=O.slice();let u=e;for(let e=0;e<i.length&&u<a;e+=1)l[u]=i[e]??"",u+=1;const c=l.join("").slice(0,a),d=j.length;P(c),c.length!==d&&p&&triggerHaptic(p);const m=Math.min(u,a-1);u>=a?V.current[e]?.blur():D(m)},[O,D,o,a,p,P,j]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(O[e]??"").length){if(e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}}else{const t=O.slice();t[e]="",P(t.join(""))}},[O,D,P]),B=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),L=useCallback(()=>{if(c)return;const e=O.findIndex(e=>""===e);D(-1===e?a-1:e)},[O,c,D,a]),$=g??`Enter ${a}-digit code`,q=E.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:h,accessible:!0,accessibilityRole:"none",accessibilityLabel:$,accessibilityValue:{text:n},accessibilityState:{disabled:c},"aria-disabled":c,testID:x,children:[_jsx(Pressable,{onPress:L,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[S.row,{columnGap:T.gap,transform:[{translateX:q}]}],children:O.map((e,t)=>{const n=R===t,i=e.length>0,r=_?C.colors.border.error:C.colors.border.focus,s=I[t];if(!s)return null;const l=f&&i?"●":e;return _jsxs(View,{style:S.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:T.cell,height:T.cell,borderRadius:T.borderRadius,borderWidth:1.5,focused:n,error:_,filled:i,disabled:c,paddingHorizontal:0,paddingVertical:0,gap:0,style:b,children:[_jsx(TextInput,{ref:e=>{V.current[t]=e},value:(f&&i?"":e)||"​",onChangeText:e=>H(t,e),onKeyPress:e=>N(t,e),onFocus:()=>B(t),onBlur:W,keyboardType:o,editable:!c,selectTextOnFocus:!0,caretHidden:i,maxLength:a+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[S.input,{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y]}),f&&i?_jsx(View,{pointerEvents:"none",style:S.maskOverlay,children:_jsx(Text,{style:[{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[S.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;
+"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:a=6,keyboardType:o="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:f=!1,haptic:p,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[j,v]=useControllableState({value:n,defaultValue:i??"",onChange:r}),C=useTheme(),S=useMemo(()=>buildStyles(C),[C]),T={...sizeMap[m],...C.components.otpInput?.[m]??{}},V=useRef([]),[R,k]=useState(-1),w=useRef(null),E=useRef(createAnimatedValue(0)).current,F=useRef(new Map),z=useMemo(()=>{const e=F.current,t=[];for(let n=0;n<a;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>=a&&e.delete(t);return t},[a]),A=useRef(-1),I=C.components.otpInput?.shakeOnError??!1,M=useReducedMotion(),_=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===w.current||!_||w.current||(p&&triggerHaptic("notificationError"),I&&!M&&(setNativeValue(E,0),e=Animated.sequence([Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:-1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(E,{toValue:0,duration:C.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=_,()=>e?.stop()},[_,E,I,p,M,C.motion.duration.instant]),useEffect(()=>{const e=A.current;if(A.current=R,e===R)return;if(-1===e&&-1===R)return;const t=[];return z.forEach((n,i)=>{const r=i===R?1:0;if(i!==R&&i!==e)return;const s=Animated.timing(n,{toValue:r,duration:C.motion.duration.fast,easing:Easing.bezier(...C.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[R,z,C]);const D=useCallback(e=>{const t=V.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=V.current[R>=0?R:0];e?.blur()},clear:()=>{v(""),D(0)}}),[D,R,v]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>D(0),u);return()=>clearTimeout(e)}},[l,u,c,D]);const O=useMemo(()=>{const e=new Array(a).fill("");for(let t=0;t<Math.min(j.length,a);t+=1)e[t]=j[t]??"";return e},[j,a]),P=useCallback(e=>{const t=e.slice(0,a);t!==j&&(v(t),t.length===a&&s&&s(t))},[a,v,s,j]),H=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),i=sanitizeChar(n,o);if(!i){const t=O.slice(),n=(t[e]??"").length>0;if(t[e]="",P(t.join("").slice(0,a)),!n&&e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}return}const r=O[e]??"",s=r&&i.length>a&&i.startsWith(r)?i.slice(r.length):i;if(s.length>=a){const t=s.slice(0,a),n=j.length;return P(t),t.length!==n&&p&&triggerHaptic(p),void V.current[e]?.blur()}const l=O.slice();let u=e;for(let e=0;e<i.length&&u<a;e+=1)l[u]=i[e]??"",u+=1;const c=l.join("").slice(0,a),d=j.length;P(c),c.length!==d&&p&&triggerHaptic(p);const m=Math.min(u,a-1);u>=a?V.current[e]?.blur():D(m)},[O,D,o,a,p,P,j]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(O[e]??"").length){if(e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}}else{const t=O.slice();t[e]="",P(t.join(""))}},[O,D,P]),B=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),L=useCallback(()=>{if(c)return;const e=O.indexOf("");D(-1===e?a-1:e)},[O,c,D,a]),$=g??`Enter ${a}-digit code`,q=E.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:h,accessible:!0,accessibilityRole:"none",accessibilityLabel:$,accessibilityValue:{text:n},accessibilityState:{disabled:c},"aria-disabled":c,testID:x,children:[_jsx(Pressable,{onPress:L,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[S.row,{columnGap:T.gap,transform:[{translateX:q}]}],children:O.map((e,t)=>{const n=R===t,i=e.length>0,r=_?C.colors.border.error:C.colors.border.focus,s=z[t];if(!s)return null;const l=f&&i?"●":e;return _jsxs(View,{style:S.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:T.cell,height:T.cell,borderRadius:T.borderRadius,borderWidth:1.5,focused:n,error:_,filled:i,disabled:c,paddingHorizontal:0,paddingVertical:0,gap:0,style:b,children:[_jsx(TextInput,{ref:e=>{V.current[t]=e},value:(f&&i?"":e)||"​",onChangeText:e=>H(t,e),onKeyPress:e=>N(t,e),onFocus:()=>B(t),onBlur:W,keyboardType:o,editable:!c,selectTextOnFocus:!0,caretHidden:i,maxLength:a+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[S.input,{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y]}),f&&i?_jsx(View,{pointerEvents:"none",style:S.maskOverlay,children:_jsx(Text,{style:[{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[S.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;

package/lib/typescript/commonjs/canvasKit/index.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+import type { ColorMode } from '../theme/types';
+export type PhoneChromeOs = 'Ios' | 'Android';
+export interface StatusBarProps {
+    os: PhoneChromeOs;
+    colorMode?: ColorMode;
+}
+export declare const StatusBar: ({ os, colorMode }: StatusBarProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface HomeIndicatorProps {
+    os: PhoneChromeOs;
+    colorMode?: ColorMode;
+}
+export declare const HomeIndicator: ({ os, colorMode }: HomeIndicatorProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface SafeAreaProps {
+    os: PhoneChromeOs;
+    children?: ReactNode;
+}
+export declare const SafeArea: ({ os, children }: SafeAreaProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface KeyboardFrameProps {
+    colorMode?: ColorMode;
+    children?: ReactNode;
+}
+export declare const KeyboardFrame: ({ colorMode, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface PhoneChromeManifestProp {
+    name: string;
+    type: 'enum';
+    enum: string[];
+    required: boolean;
+}
+export interface PhoneChromeManifestComponent {
+    name: string;
+    marker: string;
+    acceptsChildren: boolean;
+    props: PhoneChromeManifestProp[];
+    itemsTakeAction: string[];
+    takesAction: string[];
+    source: string;
+}
+export declare const phoneChromeEntries: readonly PhoneChromeManifestComponent[];
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Input/Input.d.ts

@@ -16,6 +16,7 @@ export type InputLabelMode = 'float' | 'top';
  *   does on a single-line field.
  */
 export type InputType = 'input' | 'password' | 'textarea';
+export type InputKeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'decimal-pad' | 'numbers-and-punctuation' | 'url' | 'visible-password';
 /** State handed to a `leftIcon` / `rightIcon` render function. */
 export interface InputSlotState extends SlotIconState {
     focused: boolean;
@@ -49,6 +50,7 @@ export interface InputAction {
     testID?: string;
 }
 export interface InputProps extends Omit<TextInputProps, 'style'> {
+    keyboardType?: InputKeyboardType;
     /**
      * A string, or a node for a symbol with a subscript. A node label needs an
      * explicit `accessibilityLabel` (the field's screen-reader name), the same

package/lib/typescript/commonjs/components/Input/index.d.ts

@@ -1,3 +1,3 @@
-export type { InputAction, InputProps, InputSize, InputSlotIcon, InputSlotState, InputVariant } from './Input';
+export type { InputAction, InputKeyboardType, InputProps, InputSize, InputSlotIcon, InputSlotState, InputVariant } from './Input';
 export { default, Input } from './Input';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/canvasKit/index.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+import type { ColorMode } from '../theme/types.js';
+export type PhoneChromeOs = 'Ios' | 'Android';
+export interface StatusBarProps {
+    os: PhoneChromeOs;
+    colorMode?: ColorMode;
+}
+export declare const StatusBar: ({ os, colorMode }: StatusBarProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface HomeIndicatorProps {
+    os: PhoneChromeOs;
+    colorMode?: ColorMode;
+}
+export declare const HomeIndicator: ({ os, colorMode }: HomeIndicatorProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface SafeAreaProps {
+    os: PhoneChromeOs;
+    children?: ReactNode;
+}
+export declare const SafeArea: ({ os, children }: SafeAreaProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface KeyboardFrameProps {
+    colorMode?: ColorMode;
+    children?: ReactNode;
+}
+export declare const KeyboardFrame: ({ colorMode, children }: KeyboardFrameProps) => import("react").CElement<import("react-native").ViewProps, View>;
+export interface PhoneChromeManifestProp {
+    name: string;
+    type: 'enum';
+    enum: string[];
+    required: boolean;
+}
+export interface PhoneChromeManifestComponent {
+    name: string;
+    marker: string;
+    acceptsChildren: boolean;
+    props: PhoneChromeManifestProp[];
+    itemsTakeAction: string[];
+    takesAction: string[];
+    source: string;
+}
+export declare const phoneChromeEntries: readonly PhoneChromeManifestComponent[];
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Input/Input.d.ts

@@ -16,6 +16,7 @@ export type InputLabelMode = 'float' | 'top';
  *   does on a single-line field.
  */
 export type InputType = 'input' | 'password' | 'textarea';
+export type InputKeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'decimal-pad' | 'numbers-and-punctuation' | 'url' | 'visible-password';
 /** State handed to a `leftIcon` / `rightIcon` render function. */
 export interface InputSlotState extends SlotIconState {
     focused: boolean;
@@ -49,6 +50,7 @@ export interface InputAction {
     testID?: string;
 }
 export interface InputProps extends Omit<TextInputProps, 'style'> {
+    keyboardType?: InputKeyboardType;
     /**
      * A string, or a node for a symbol with a subscript. A node label needs an
      * explicit `accessibilityLabel` (the field's screen-reader name), the same

package/lib/typescript/module/components/Input/index.d.ts

@@ -1,3 +1,3 @@
-export type { InputAction, InputProps, InputSize, InputSlotIcon, InputSlotState, InputVariant } from './Input.js';
+export type { InputAction, InputKeyboardType, InputProps, InputSize, InputSlotIcon, InputSlotState, InputVariant } from './Input.js';
 export { default, Input } from './Input.js';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.16.6",
+  "version": "0.17.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -30,6 +30,16 @@
         "default": "./lib/commonjs/index.js"
       }
     },
+    "./canvasKit": {
+      "import": {
+        "types": "./lib/typescript/module/canvasKit/index.d.ts",
+        "default": "./lib/module/canvasKit/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/canvasKit/index.d.ts",
+        "default": "./lib/commonjs/canvasKit/index.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "./lib/commonjs/index.js",
@@ -107,7 +117,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.16.6"
+    "@webority/mobile-core": "0.17.0"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",