@webority/mobile-ui 0.7.4 → 0.8.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/components/Notation/Notation.js +1 -1
- package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
- package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/commonjs/components/SquircleFill/SquircleFill.js +1 -1
- package/lib/commonjs/theme/tokens.js +1 -1
- package/lib/module/components/Notation/Notation.js +1 -1
- package/lib/module/components/OTPInput/OTPInput.js +1 -1
- package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/module/components/SquircleFill/SquircleFill.js +1 -1
- package/lib/module/theme/tokens.js +1 -1
- package/lib/typescript/commonjs/components/Notation/Notation.d.ts +1 -1
- package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts +6 -1
- package/lib/typescript/commonjs/components/OptionSheet/OptionSheet.d.ts +6 -5
- package/lib/typescript/commonjs/theme/types.d.ts +18 -0
- package/lib/typescript/module/components/Notation/Notation.d.ts +1 -1
- package/lib/typescript/module/components/OTPInput/OTPInput.d.ts +6 -1
- package/lib/typescript/module/components/OptionSheet/OptionSheet.d.ts +6 -5
- package/lib/typescript/module/theme/types.d.ts +18 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sym=exports.parseNotation=exports.default=exports.Notation=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sym=exports.parseNotation=exports.default=exports.Notation=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(s,t,o):s[t]=e[t]);return s})(e,t)}const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g,parseNotation=e=>{const t=String(e??""),r=[];let n=0;for(const e of t.matchAll(SUBSCRIPTED)){const i=e.index??0;i>n&&r.push({text:t.slice(n,i)}),r.push({text:e[1],sub:e[2]}),n=i+e[0].length}return n<t.length&&r.push({text:t.slice(n)}),r};exports.parseNotation=parseNotation;const SUB_DROP=.4,Subscript=({children:e,color:t})=>{const r=(0,_index.useTheme)(),n=Math.round(.75*r.typography.fontSize.sm);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{transform:[{translateY:Math.round(.4*n)}]},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{maxFontSizeMultiplier:r.maxFontSizeMultiplier,style:[styles.sub,{fontSize:n,lineHeight:n,color:t??r.colors.text.primary,...(0,_index.fontFor)(r,"normal")}],children:e})})},renderNotation=(e,t)=>parseNotation(e).map((e,r)=>e.sub?(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[e.text,(0,_jsxRuntime.jsx)(Subscript,{color:t,children:e.sub})]},r):(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.text},r)),Notation=({text:e,base:t,sub:r,desc:n,color:i,testID:o})=>null!=t?(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:o,children:[t,r?(0,_jsxRuntime.jsx)(Subscript,{color:i,children:r}):null,n?` ${n}`:null]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:o,children:"string"==typeof e||null==e?renderNotation(e??"",i):e.map((e,t)=>"string"==typeof e?(0,_jsxRuntime.jsx)(_react.Fragment,{children:renderNotation(e,i)},t):(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.verbatim},t))});exports.Notation=Notation;const sym=(e,t,r,n)=>(0,_jsxRuntime.jsx)(Notation,{base:e,sub:t,desc:r,color:n});exports.sym=sym;const styles=_reactNative.StyleSheet.create({sub:{includeFontPadding:!1}});var _default=exports.default=Notation;
|
|
@@ -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:
|
|
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:i,defaultValue:r,onChange:n,onComplete:a,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:f,style:g,cellStyle:x,textStyle:h,testID:v}=e,[b,y]=(0,_index.useControllableState)({value:i,defaultValue:r??"",onChange:n}),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 i=0;i<s;i+=1){let r=e.get(i);r||(r=new _reactNative.Animated.Value(0),e.set(i,r)),t.push(r)}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||(!1!==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((i,r)=>{const n=r===T?1:0;if(r!==T&&r!==e)return;const a=_reactNative.Animated.timing(i,{toValue:n,duration:j.motion.duration.fast,easing:_reactNative.Easing.bezier(...j.motion.easing.standard),useNativeDriver:!0});a.start(),t.push(a)}),()=>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(b.length,s);t+=1)e[t]=b[t]??"";return e},[b,s]),B=(0,_react.useCallback)(e=>{const t=e.slice(0,s);t!==b&&(y(t),t.length===s&&a&&a(t))},[s,y,a,b]),D=(0,_react.useCallback)((e,t)=>{const i=t.replace(/\u200B/g,""),r=sanitizeChar(i,o);if(!r){const t=O.slice(),i=(t[e]??"").length>0;if(t[e]="",B(t.join("").slice(0,s)),!i&&e>0){const t=O.slice();t[e-1]="",B(t.join("")),M(e-1)}return}const n=O[e]??"",a=n&&r.length>s&&r.startsWith(n)?r.slice(n.length):r;if(a.length>=s){const t=a.slice(0,s),i=b.length;if(B(t),t.length!==i){const e=(0,_index3.resolveHaptic)(p,"selection");e&&(0,_index3.triggerHaptic)(e)}return void C.current[e]?.blur()}const l=O.slice();let c=e;for(let e=0;e<r.length&&c<s;e+=1)l[c]=r[e]??"",c+=1;const u=l.join("").slice(0,s),d=b.length;if(B(u),u.length!==d){const e=(0,_index3.resolveHaptic)(p,"selection");e&&(0,_index3.triggerHaptic)(e)}const _=Math.min(c,s-1);c>=s?C.current[e]?.blur():M(_)},[O,M,o,s,p,B,b]),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=f??`Enter ${s}-digit code`,$=F.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:g,accessible:!0,accessibilityRole:"none",accessibilityLabel:L,accessibilityValue:{text:i},accessibilityState:{disabled:u},testID:v,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 i=T===t,r=e.length>0,n=A?j.colors.border.error:j.colors.border.focus,a=z[t];if(!a)return null;const l=m&&r?"●":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:i,error:A,filled:r,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:x,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:e=>{C.current[t]=e},value:(m&&r?"":e)||"",onChangeText:e=>D(t,e),onKeyPress:e=>P(t,e),onFocus:()=>q(t),onBlur:H,keyboardType:o,editable:!u,selectTextOnFocus:!0,caretHidden:r,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&&r?(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:n,opacity:a}]})]},`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.OptionSheet=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?o(s,t,a):s[t]=e[t]);return s})(e,t)}const SEARCH_ICON_SIZE=18,OptionSheet=e=>{const{open:t,onClose:r,onAfterClose:i,title:o,options:a,sections:s,renderSectionHeader:n,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:u="No options",labelOf:p,getValue:m,disabledOf:h,destructiveOf:g,descriptionOf:_,iconOf:x,isSelected:y,onSelect:f,multi:b=!1,searchable:v=!1,searchSelectionColor:j,accessibilityLabel:R,optionStyle:S,selectedOptionStyle:N,optionTextStyle:T,selectedOptionTextStyle:C,testID:w}=e,k=(0,_index.useTheme)(),V=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),I=(0,_react.useMemo)(()=>buildStyles(k),[k]),[P,D]=(0,_react.useState)(""),W=_reactNative.Dimensions.get("window").height,z=Math.round(.7*W),[L,H]=(0,_react.useState)(t),O=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,M=(0,_react.useRef)((0,_index.createAnimatedValue)(z)).current,A=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,B=(0,_react.useMemo)(()=>_reactNative.Animated.add(M,A),[M,A]);(0,_react.useEffect)(()=>{t&&H(!0)},[t]);const q=(0,_react.useRef)(i);q.current=i;const E=(0,_react.useRef)(L);(0,_react.useEffect)(()=>{E.current&&!L&&"ios"!==_reactNative.Platform.OS&&q.current?.(),E.current=L},[L]),(0,_react.useEffect)(()=>{if(!L)return;t&&(0,_index.setNativeValue)(A,0);const e=t?_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:1,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.spring(M,{toValue:0,damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass,useNativeDriver:!0})]):_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:0,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.timing(M,{toValue:z,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&H(!1)}),()=>e.stop()},[t,L,O,M,A,z,k.motion.duration.fast,k.motion.easing.standard,k.motion.easing.accelerate,k.motion.spring.snappy]);const{handleGesture:F}=(0,_useDragToDismiss.useDragToDismiss)({drag:A,travel:z,onDismiss:r}),G=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Native(),[]),[$,K]=(0,_react.useState)(0),J=(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.height),U=L?Math.max(0,Math.round(J)):0,Y=Math.max(V.top,_reactNative.StatusBar.currentHeight??0)+k.spacing.sm,Z=U>0,Q=Z?Math.max(0,Math.min(z,($>0?$:W)-U-Y)):z;(0,_react.useEffect)(()=>{t||D("")},[t]);const X=(0,_react.useMemo)(()=>{const e=v?P.trim().toLowerCase():"",matches=t=>0===e.length||p(t).toLowerCase().includes(e)||(_(t)??"").toLowerCase().includes(e);if(!s)return a.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return s.forEach((e,r)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:r})}}),t},[v,P,a,s,p,_]),ee=(0,_react.useCallback)(()=>{r()},[r]),te=(0,_react.useRef)(null),re=(0,_react.useMemo)(()=>{const e=new Map;if(!c)return e;let t=0;if(s)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let r=t;r<X.length;r+=1){const t=X[r];if("option"!==t.kind)continue;const i=p(t.option).trim().charAt(0).toUpperCase(),o=/^[A-Z]$/.test(i)?i:"#";e.has(o)||e.set(o,r)}return e},[c,X,s,p]),ie=c&&re.size>0&&0===P.trim().length,oe=(0,_react.useMemo)(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...re.has("#")?["#"]:[]],[re]),ae=(0,_react.useCallback)(e=>{const t=re.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[re]),se=(0,_react.useRef)(null),ne=(0,_react.useCallback)(()=>{null!==se.current&&(clearTimeout(se.current),se.current=null)},[]),le=(0,_react.useCallback)(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ne(),se.current=setTimeout(()=>{se.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ne]);(0,_react.useEffect)(()=>(L||ne(),ne),[L,ne]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:L,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:k.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{testID:w,accessibilityViewIsModal:!0,accessibilityLabel:R??o??"Options",style:[I.sheet,{maxHeight:Q,bottom:U,paddingBottom:Z?16:V.bottom+16,backgroundColor:k.colors.background.elevated,borderTopLeftRadius:k.radius.xl,borderTopRightRadius:k.radius.xl,..._corners.smoothCorners,transform:[{translateY:B}],...k.shadows.xl}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:F,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.sheetHandleRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.sheetHandle,{backgroundColor:k.components.select?.handleColor??k.components.bottomSheet?.handleColor??k.colors.border.primary}]})}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.sheetTitle,{color:k.colors.text.primary,fontSize:k.typography.fontSize.lg,fontWeight:k.typography.fontWeight.semibold,paddingHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:o}):null]})}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.searchWrap,{marginHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[I.searchBox,{backgroundColor:k.colors.background.secondary,borderColor:k.colors.border.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingHorizontal:k.spacing.md,gap:k.spacing.sm}],children:[(k.icons?.search??_defaultIcons.defaultIcons.search)({size:18,color:k.colors.text.tertiary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:P,onChangeText:D,placeholder:d,placeholderTextColor:k.colors.text.tertiary,selectionColor:j??k.colors.border.focus,accessibilityLabel:"Search options",style:[I.searchInput,{color:k.colors.text.primary,fontSize:k.typography.fontSize.base,paddingVertical:k.spacing.sm}]}),P.length>0?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>D(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(k.icons?.close??_defaultIcons.defaultIcons.close)({size:18,color:k.colors.text.secondary})}):null]})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[I.listWrap,ie?I.listRow:null],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:G,children:(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(m(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"header",style:[I.sectionHeader,{paddingHorizontal:k.spacing.lg,paddingTop:k.spacing.md}],children:n?n(e.title):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.sectionTitle,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,r=p(t),i=m(t),o=_(t),a=x(t),s=y(i),c=h(t),d=g?.(t)??!1;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>f(t),disabled:c,android_ripple:{color:k.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:s,disabled:c},style:({pressed:e})=>[I.optionRow,{backgroundColor:s?k.colors.surface.selected:e?k.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md},S,s?N:null],children:[l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.optionTextWrap,children:l(t,{selected:s,disabled:c})}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.optionIcon,children:a}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:I.optionTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.optionLabel,{color:d?k.colors.error:s?k.colors.primary:k.colors.text.primary,fontSize:k.typography.fontSize.base,fontWeight:s?k.typography.fontWeight.semibold:k.typography.fontWeight.medium},T,s?C:null],numberOfLines:1,children:r}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.optionDescription,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm}],numberOfLines:2,children:o}):null]})]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.checkbox,{borderColor:s?k.colors.primary:k.colors.border.primary,backgroundColor:s?k.colors.primary:"transparent"}],children:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.checkboxTick}):null}):s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.singleSelectedDot,{backgroundColor:k.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?I.listBesideRail:null,ListEmptyComponent:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.empty,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm,paddingVertical:k.spacing.xl}],children:u})})}),ie?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.rail,{paddingRight:k.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:oe.map(e=>{const t=re.has(e);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>ae(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:I.railLetter,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.railLetterText,{color:t?k.colors.primary:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.sheetFooter,{borderTopColor:k.colors.border.secondary,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[I.doneButton,{backgroundColor:e?k.colors.primaryPressed:k.colors.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingVertical:k.spacing.sm,paddingHorizontal:k.spacing.lg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:k.colors.onPrimary,fontSize:k.typography.fontSize.base,fontWeight:k.typography.fontWeight.semibold},children:"Done"})})}):null]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})};exports.OptionSheet=OptionSheet,OptionSheet.displayName="OptionSheet";const buildStyles=e=>_reactNative.StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,..._corners.smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,..._corners.smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,..._corners.smoothCorners,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});var _default=exports.default=OptionSheet;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OptionSheet=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?o(s,t,a):s[t]=e[t]);return s})(e,t)}const SEARCH_ICON_SIZE=18,OptionSheet=e=>{const{open:t,onClose:r,onAfterClose:i,title:o,options:a,sections:s,renderSectionHeader:n,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:u="No options",labelOf:p,getValue:m,disabledOf:h,destructiveOf:g,descriptionOf:_,iconOf:x,isSelected:y,onSelect:f,multi:b=!1,searchable:v=!1,searchSelectionColor:j,accessibilityLabel:R,optionStyle:S,selectedOptionStyle:N,optionTextStyle:T,selectedOptionTextStyle:w,testID:C}=e,k=(0,_index.useTheme)(),I=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),V=(0,_react.useMemo)(()=>buildStyles(k),[k]),[P,z]=(0,_react.useState)(""),D=_reactNative.Dimensions.get("window").height,W=Math.round(.7*D),[L,H]=(0,_react.useState)(t),O=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,A=(0,_react.useRef)((0,_index.createAnimatedValue)(W)).current,M=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,B=(0,_react.useMemo)(()=>_reactNative.Animated.add(A,M),[A,M]);(0,_react.useEffect)(()=>{t&&H(!0)},[t]);const q=(0,_react.useRef)(i);q.current=i;const E=(0,_react.useRef)(L);(0,_react.useEffect)(()=>{E.current&&!L&&"ios"!==_reactNative.Platform.OS&&q.current?.(),E.current=L},[L]),(0,_react.useEffect)(()=>{if(!L)return;t&&(0,_index.setNativeValue)(M,0);const e=t?_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:1,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.spring(A,{toValue:0,damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass,useNativeDriver:!0})]):_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:0,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.timing(A,{toValue:W,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&H(!1)}),()=>e.stop()},[t,L,O,A,M,W,k.motion.duration.fast,k.motion.easing.standard,k.motion.easing.accelerate,k.motion.spring.snappy]);const{handleGesture:F}=(0,_useDragToDismiss.useDragToDismiss)({drag:M,travel:W,onDismiss:r}),G=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Native(),[]),[$,K]=(0,_react.useState)(0),J=(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.height),U=L?Math.max(0,Math.round(J)):0,Y=Math.max(I.top,_reactNative.StatusBar.currentHeight??0)+k.spacing.sm,Z=U>0,Q=Z?Math.max(0,Math.min(W,($>0?$:D)-U-Y)):W;(0,_react.useEffect)(()=>{t||z("")},[t]);const X=(0,_react.useMemo)(()=>{const e=v?P.trim().toLowerCase():"",matches=t=>0===e.length||p(t).toLowerCase().includes(e)||(_(t)??"").toLowerCase().includes(e);if(!s)return a.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return s.forEach((e,r)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:r})}}),t},[v,P,a,s,p,_]),ee=(0,_react.useCallback)(()=>{r()},[r]),te=(0,_react.useRef)(null),re=(0,_react.useMemo)(()=>{const e=new Map;if(!c)return e;let t=0;if(s)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let r=t;r<X.length;r+=1){const t=X[r];if("option"!==t.kind)continue;const i=p(t.option).trim().charAt(0).toUpperCase(),o=/^[A-Z]$/.test(i)?i:"#";e.has(o)||e.set(o,r)}return e},[c,X,s,p]),ie=c&&re.size>0&&0===P.trim().length,oe=(0,_react.useMemo)(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...re.has("#")?["#"]:[]],[re]),ae=(0,_react.useCallback)(e=>{const t=re.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[re]),se=(0,_react.useRef)(null),ne=(0,_react.useCallback)(()=>{null!==se.current&&(clearTimeout(se.current),se.current=null)},[]),le=(0,_react.useCallback)(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ne(),se.current=setTimeout(()=>{se.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ne]);(0,_react.useEffect)(()=>(L||ne(),ne),[L,ne]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:L,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:k.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{testID:C,accessibilityViewIsModal:!0,accessibilityLabel:R??o??"Options",style:[V.sheet,{maxHeight:Q,bottom:U,paddingBottom:Z?16:I.bottom+16,backgroundColor:k.colors.background.elevated,borderTopLeftRadius:k.radius.xl,borderTopRightRadius:k.radius.xl,..._corners.smoothCorners,transform:[{translateY:B}],...k.shadows.xl}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:F,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:V.sheetHandleRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.sheetHandle,{backgroundColor:k.components.select?.handleColor??k.components.bottomSheet?.handleColor??k.colors.border.primary}]})}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.sheetTitle,{color:k.colors.text.primary,fontSize:k.typography.fontSize.lg,fontWeight:k.typography.fontWeight.semibold,paddingHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:o}):null]})}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.searchWrap,{marginHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[V.searchBox,{backgroundColor:k.colors.background.secondary,borderColor:k.colors.border.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingHorizontal:k.spacing.md,gap:k.spacing.sm}],children:[(k.icons?.search??_defaultIcons.defaultIcons.search)({size:18,color:k.colors.text.tertiary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:P,onChangeText:z,placeholder:d,placeholderTextColor:k.colors.text.tertiary,selectionColor:j??k.colors.border.focus,accessibilityLabel:"Search options",style:[V.searchInput,{color:k.colors.text.primary,fontSize:k.typography.fontSize.base,paddingVertical:k.spacing.sm}]}),P.length>0?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>z(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(k.icons?.close??_defaultIcons.defaultIcons.close)({size:18,color:k.colors.text.secondary})}):null]})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[V.listWrap,ie?V.listRow:null],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:G,children:(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(m(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"header",style:[V.sectionHeader,{paddingHorizontal:k.spacing.lg,paddingTop:k.spacing.md}],children:n?n(e.title):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.sectionTitle,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,r=p(t),i=m(t),o=_(t),a=x(t),s=y(i),c=h(t),d=g?.(t)??!1;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>f(t),disabled:c,android_ripple:{color:k.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:s,disabled:c},style:({pressed:e})=>[V.optionRow,{backgroundColor:s?k.colors.surface.selected:e?k.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md},S,s?N:null],children:[l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:V.optionTextWrap,children:l(t,{selected:s,disabled:c})}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:V.optionIcon,children:a}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:V.optionTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.optionLabel,{color:d?k.colors.error:s?k.colors.primary:k.colors.text.primary,fontSize:k.typography.fontSize.base,fontWeight:s?k.typography.fontWeight.semibold:k.typography.fontWeight.medium},T,s?w:null],numberOfLines:1,children:r}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.optionDescription,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm}],numberOfLines:2,children:o}):null]})]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.checkbox,{borderColor:s?k.colors.primary:k.colors.border.primary,backgroundColor:s?k.colors.primary:"transparent"}],children:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:V.checkboxTick}):null}):s?"icon"===k.components.optionSheet?.selectedMarker?(0,_jsxRuntime.jsx)(_reactNative.View,{style:V.singleSelectedIcon,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"tick-circle",variant:"bulk",size:20,color:k.colors.primary})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.singleSelectedDot,{backgroundColor:k.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?V.listBesideRail:null,ListEmptyComponent:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.empty,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm,paddingVertical:k.spacing.xl}],children:u})})}),ie?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.rail,{paddingRight:k.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:oe.map(e=>{const t=re.has(e);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>ae(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:V.railLetter,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[V.railLetterText,{color:t?k.colors.primary:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V.sheetFooter,{borderTopColor:k.colors.border.secondary,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[V.doneButton,{backgroundColor:e?k.colors.primaryPressed:k.colors.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingVertical:k.spacing.sm,paddingHorizontal:k.spacing.lg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:k.colors.onPrimary,fontSize:k.typography.fontSize.base,fontWeight:k.typography.fontWeight.semibold},children:"Done"})})}):null]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})};exports.OptionSheet=OptionSheet,OptionSheet.displayName="OptionSheet";const buildStyles=e=>_reactNative.StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,..._corners.smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,..._corners.smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,..._corners.smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});var _default=exports.default=OptionSheet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SquircleFill=SquircleFill,exports.useSquircle=useSquircle;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_squircle=require("../../utils/squircle.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,l
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SquircleFill=SquircleFill,exports.useSquircle=useSquircle;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_index=require("../../theme/index.js"),_squircle=require("../../utils/squircle.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?r:i){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(l,t,a):l[t]=e[t]);return l})(e,t)}const AnimatedPath=_reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Path);function SquircleFill({width:e,height:t,radius:i,fill:r,stroke:n,strokeWidth:a=0,outset:l=0,testID:o}){const u=a>0&&void 0!==n&&"transparent"!==n,s=u?a/2:0,c=(0,_index.useTheme)().cornerSmoothing,d=(0,_squircle.squirclePath)({width:e,height:t,radius:i,inset:s,smoothing:c});return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:o,children:(0,_jsxRuntime.jsx)(_reactNativeSvg.default,{width:e,height:t,viewBox:`0 0 ${e} ${t}`,children:(0,_jsxRuntime.jsx)(AnimatedPath,{d:d,fill:r,stroke:u?n:void 0,strokeWidth:u?a:void 0})})})}function useSquircle(e,t,i){const[r,n]=(0,_react.useState)(null),a=e&&"android"===_reactNative.Platform.OS;return{onLayout:(0,_react.useCallback)(e=>{if(a){const{width:t,height:i}=e.nativeEvent.layout;n(e=>e&&e.width===t&&e.height===i?e:{width:t,height:i})}i?.(e)},[a,i]),size:r,active:a&&null!==r&&(0,_squircle.squircleApplies)(r.width,r.height,t)}}SquircleFill.displayName="SquircleFill";const styles=_reactNative.StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.lightTheme=exports.darkTheme=void 0;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:42,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"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},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:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},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:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",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:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},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,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",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",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:"#71717A",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,shadows:darkShadows,motion:motion,components:components,gradients:{}};
|
|
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:42,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"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},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:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},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:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",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:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},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",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",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:"#71717A",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 React,{Fragment}from"react";import{Text as RNText,StyleSheet,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{
|
|
1
|
+
"use strict";import React,{Fragment}from"react";import{Text as RNText,StyleSheet,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SUBSCRIPTED=/(?<![A-Za-z0-9_])([A-Za-z])_([A-Za-z0-9]+)(?![A-Za-z0-9_])/g;export const parseNotation=t=>{const e=String(t??""),s=[];let r=0;for(const t of e.matchAll(SUBSCRIPTED)){const o=t.index??0;o>r&&s.push({text:e.slice(r,o)}),s.push({text:t[1],sub:t[2]}),r=o+t[0].length}return r<e.length&&s.push({text:e.slice(r)}),s};const SUB_DROP=.4,Subscript=({children:t,color:e})=>{const s=useTheme(),r=Math.round(.75*s.typography.fontSize.sm);return _jsx(View,{style:{transform:[{translateY:Math.round(.4*r)}]},children:_jsx(RNText,{maxFontSizeMultiplier:s.maxFontSizeMultiplier,style:[styles.sub,{fontSize:r,lineHeight:r,color:e??s.colors.text.primary,...fontFor(s,"normal")}],children:t})})},renderNotation=(t,e)=>parseNotation(t).map((t,s)=>t.sub?_jsxs(Fragment,{children:[t.text,_jsx(Subscript,{color:e,children:t.sub})]},s):_jsx(Fragment,{children:t.text},s));export const Notation=({text:t,base:e,sub:s,desc:r,color:o,testID:n})=>null!=e?_jsxs(RNText,{testID:n,children:[e,s?_jsx(Subscript,{color:o,children:s}):null,r?` ${r}`:null]}):_jsx(RNText,{testID:n,children:"string"==typeof t||null==t?renderNotation(t??"",o):t.map((t,e)=>_jsx(Fragment,"string"==typeof t?{children:renderNotation(t,o)}:{children:t.verbatim},e))});export const sym=(t,e,s,r)=>_jsx(Notation,{base:t,sub:e,desc:s,color:r});const styles=StyleSheet.create({sub:{includeFontPadding:!1}});export default Notation;
|
|
@@ -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{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase}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:
|
|
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{resolveHaptic,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:p=!1,haptic:f,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[v,j]=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<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]),z=useRef(-1),A=C.components.otpInput?.shakeOnError??!1,M=useReducedMotion(),_=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===w.current||!_||w.current||(!1!==f&&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,f,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 H=useCallback(e=>{const t=V.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>H(0),blur:()=>{const e=V.current[R>=0?R:0];e?.blur()},clear:()=>{j(""),H(0)}}),[H,R,j]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>H(0),u);return()=>clearTimeout(e)}},[l,u,c,H]);const D=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]),O=useCallback(e=>{const t=e.slice(0,o);t!==v&&(j(t),t.length===o&&s&&s(t))},[o,j,s,v]),P=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),i=sanitizeChar(n,a);if(!i){const t=D.slice(),n=(t[e]??"").length>0;if(t[e]="",O(t.join("").slice(0,o)),!n&&e>0){const t=D.slice();t[e-1]="",O(t.join("")),H(e-1)}return}const r=D[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;if(O(t),t.length!==n){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}return void V.current[e]?.blur()}const l=D.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;if(O(c),c.length!==d){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}const m=Math.min(u,o-1);u>=o?V.current[e]?.blur():H(m)},[D,H,a,o,f,O,v]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(D[e]??"").length){if(e>0){const t=D.slice();t[e-1]="",O(t.join("")),H(e-1)}}else{const t=D.slice();t[e]="",O(t.join(""))}},[D,H,O]),B=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),L=useCallback(()=>{if(c)return;const e=D.findIndex(e=>""===e);H(-1===e?o-1:e)},[D,c,H,o]),$=g??`Enter ${o}-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},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:D.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=p&&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:(p&&i?"":e)||"",onChangeText:e=>P(t,e),onKeyPress:e=>N(t,e),onFocus:()=>B(t),onBlur:W,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:[S.input,{fontSize:T.fontSize,color:C.colors.text.primary,...fontFor(C,"semibold")},y]}),p&&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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,title:s,options:r,sections:n,renderSectionHeader:a,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:p="No options",labelOf:u,getValue:h,disabledOf:m,destructiveOf:g,descriptionOf:y,iconOf:f,isSelected:b,onSelect:x,multi:S=!1,searchable:T=!1,searchSelectionColor:j,accessibilityLabel:C,optionStyle:w,selectedOptionStyle:_,optionTextStyle:R,selectedOptionTextStyle:V,testID:k}=e,I=useTheme(),v=useSafeAreaInsets(),z=useMemo(()=>buildStyles(I),[I]),[D,L]=useState(""),P=Dimensions.get("window").height,H=Math.round(.7*P),[W,A]=useState(t),M=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(H)).current,B=useRef(createAnimatedValue(0)).current,E=useMemo(()=>Animated.add(O,B),[O,B]);useEffect(()=>{t&&A(!0)},[t]);const F=useRef(i);F.current=i;const N=useRef(W);useEffect(()=>{N.current&&!W&&"ios"!==Platform.OS&&F.current?.(),N.current=W},[W]),useEffect(()=>{if(!W)return;t&&setNativeValue(B,0);const e=t?Animated.parallel([Animated.timing(M,{toValue:1,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.spring(O,{toValue:0,damping:I.motion.spring.snappy.damping,stiffness:I.motion.spring.snappy.stiffness,mass:I.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(M,{toValue:0,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.timing(O,{toValue:H,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&A(!1)}),()=>e.stop()},[t,W,M,O,B,H,I.motion.duration.fast,I.motion.easing.standard,I.motion.easing.accelerate,I.motion.spring.snappy]);const{handleGesture:G}=useDragToDismiss({drag:B,travel:H,onDismiss:o}),$=useMemo(()=>Gesture.Native(),[]),[J,K]=useState(0),U=useKeyboardState(e=>e.height),Y=W?Math.max(0,Math.round(U)):0,Z=Math.max(v.top,StatusBar.currentHeight??0)+I.spacing.sm,q=Y>0,Q=q?Math.max(0,Math.min(H,(J>0?J:P)-Y-Z)):H;useEffect(()=>{t||L("")},[t]);const X=useMemo(()=>{const e=T?D.trim().toLowerCase():"",matches=t=>0===e.length||u(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!n)return r.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[T,D,r,n,u,y]),ee=useCallback(()=>{o()},[o]),te=useRef(null),oe=useMemo(()=>{const e=new Map;if(!c)return e;let t=0;if(n)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let o=t;o<X.length;o+=1){const t=X[o];if("option"!==t.kind)continue;const i=u(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[c,X,n,u]),ie=c&&oe.size>0&&0===D.trim().length,se=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...oe.has("#")?["#"]:[]],[oe]),re=useCallback(e=>{const t=oe.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[oe]),ne=useRef(null),ae=useCallback(()=>{null!==ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),le=useCallback(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ae(),ne.current=setTimeout(()=>{ne.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ae]);useEffect(()=>(W||ae(),ae),[W,ae]);return _jsx(Modal,{visible:W,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>F.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:I.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:k,accessibilityViewIsModal:!0,accessibilityLabel:C??s??"Options",style:[z.sheet,{maxHeight:Q,bottom:Y,paddingBottom:q?16:v.bottom+16,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,...smoothCorners,transform:[{translateY:E}],...I.shadows.xl}],children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:z.sheetHandleRow,children:_jsx(View,{style:[z.sheetHandle,{backgroundColor:I.components.select?.handleColor??I.components.bottomSheet?.handleColor??I.colors.border.primary}]})}),s?_jsx(Text,{style:[z.sheetTitle,{color:I.colors.text.primary,fontSize:I.typography.fontSize.lg,fontWeight:I.typography.fontWeight.semibold,paddingHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:s}):null]})}),T?_jsx(View,{style:[z.searchWrap,{marginHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:_jsxs(View,{style:[z.searchBox,{backgroundColor:I.colors.background.secondary,borderColor:I.colors.border.primary,borderRadius:I.radius.md,...smoothCorners,paddingHorizontal:I.spacing.md,gap:I.spacing.sm}],children:[(I.icons?.search??defaultIcons.search)({size:18,color:I.colors.text.tertiary}),_jsx(TextInput,{value:D,onChangeText:L,placeholder:d,placeholderTextColor:I.colors.text.tertiary,selectionColor:j??I.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:I.colors.text.primary,fontSize:I.typography.fontSize.base,paddingVertical:I.spacing.sm}]}),D.length>0?_jsx(Pressable,{onPress:()=>L(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(I.icons?.close??defaultIcons.close)({size:18,color:I.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[z.listWrap,ie?z.listRow:null],children:[_jsx(GestureDetector,{gesture:$,children:_jsx(FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:I.spacing.lg,paddingTop:I.spacing.md}],children:a?a(e.title):_jsx(Text,{style:[z.sectionTitle,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=u(t),i=h(t),s=y(t),r=f(t),n=b(i),c=m(t),d=g?.(t)??!1;return _jsxs(Pressable,{onPress:()=>x(t),disabled:c,android_ripple:{color:I.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:c},style:({pressed:e})=>[z.optionRow,{backgroundColor:n?I.colors.surface.selected:e?I.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md},w,n?_:null],children:[l?_jsx(View,{style:z.optionTextWrap,children:l(t,{selected:n,disabled:c})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:z.optionIcon,children:r}):null,_jsxs(View,{style:z.optionTextWrap,children:[_jsx(Text,{style:[z.optionLabel,{color:d?I.colors.error:n?I.colors.primary:I.colors.text.primary,fontSize:I.typography.fontSize.base,fontWeight:n?I.typography.fontWeight.semibold:I.typography.fontWeight.medium},R,n?V:null],numberOfLines:1,children:o}),s?_jsx(Text,{style:[z.optionDescription,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),S?_jsx(View,{style:[z.checkbox,{borderColor:n?I.colors.primary:I.colors.border.primary,backgroundColor:n?I.colors.primary:"transparent"}],children:n?_jsx(View,{style:z.checkboxTick}):null}):n?_jsx(View,{style:[z.singleSelectedDot,{backgroundColor:I.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?z.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[z.empty,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm,paddingVertical:I.spacing.xl}],children:p})})}),ie?_jsx(View,{style:[z.rail,{paddingRight:I.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:se.map(e=>{const t=oe.has(e);return _jsx(Pressable,{onPress:()=>re(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:z.railLetter,children:_jsx(Text,{style:[z.railLetterText,{color:t?I.colors.primary:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),S?_jsx(View,{style:[z.sheetFooter,{borderTopColor:I.colors.border.secondary,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md}],children:_jsx(Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?I.colors.primaryPressed:I.colors.primary,borderRadius:I.radius.md,...smoothCorners,paddingVertical:I.spacing.sm,paddingHorizontal:I.spacing.lg}],children:_jsx(Text,{style:{color:I.colors.onPrimary,fontSize:I.typography.fontSize.base,fontWeight:I.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
1
|
+
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,title:s,options:r,sections:n,renderSectionHeader:a,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:p="No options",labelOf:u,getValue:h,disabledOf:m,destructiveOf:g,descriptionOf:y,iconOf:f,isSelected:b,onSelect:x,multi:S=!1,searchable:T=!1,searchSelectionColor:j,accessibilityLabel:w,optionStyle:C,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,R=useTheme(),v=useSafeAreaInsets(),z=useMemo(()=>buildStyles(R),[R]),[L,D]=useState(""),P=Dimensions.get("window").height,A=Math.round(.7*P),[H,W]=useState(t),M=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(A)).current,B=useRef(createAnimatedValue(0)).current,E=useMemo(()=>Animated.add(O,B),[O,B]);useEffect(()=>{t&&W(!0)},[t]);const F=useRef(i);F.current=i;const N=useRef(H);useEffect(()=>{N.current&&!H&&"ios"!==Platform.OS&&F.current?.(),N.current=H},[H]),useEffect(()=>{if(!H)return;t&&setNativeValue(B,0);const e=t?Animated.parallel([Animated.timing(M,{toValue:1,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.standard),useNativeDriver:!1}),Animated.spring(O,{toValue:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(M,{toValue:0,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.standard),useNativeDriver:!1}),Animated.timing(O,{toValue:A,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,H,M,O,B,A,R.motion.duration.fast,R.motion.easing.standard,R.motion.easing.accelerate,R.motion.spring.snappy]);const{handleGesture:G}=useDragToDismiss({drag:B,travel:A,onDismiss:o}),$=useMemo(()=>Gesture.Native(),[]),[J,K]=useState(0),U=useKeyboardState(e=>e.height),Y=H?Math.max(0,Math.round(U)):0,Z=Math.max(v.top,StatusBar.currentHeight??0)+R.spacing.sm,q=Y>0,Q=q?Math.max(0,Math.min(A,(J>0?J:P)-Y-Z)):A;useEffect(()=>{t||D("")},[t]);const X=useMemo(()=>{const e=T?L.trim().toLowerCase():"",matches=t=>0===e.length||u(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!n)return r.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[T,L,r,n,u,y]),ee=useCallback(()=>{o()},[o]),te=useRef(null),oe=useMemo(()=>{const e=new Map;if(!c)return e;let t=0;if(n)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let o=t;o<X.length;o+=1){const t=X[o];if("option"!==t.kind)continue;const i=u(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[c,X,n,u]),ie=c&&oe.size>0&&0===L.trim().length,se=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...oe.has("#")?["#"]:[]],[oe]),re=useCallback(e=>{const t=oe.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[oe]),ne=useRef(null),ae=useCallback(()=>{null!==ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),le=useCallback(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ae(),ne.current=setTimeout(()=>{ne.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ae]);useEffect(()=>(H||ae(),ae),[H,ae]);return _jsx(Modal,{visible:H,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>F.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:R.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:w??s??"Options",style:[z.sheet,{maxHeight:Q,bottom:Y,paddingBottom:q?16:v.bottom+16,backgroundColor:R.colors.background.elevated,borderTopLeftRadius:R.radius.xl,borderTopRightRadius:R.radius.xl,...smoothCorners,transform:[{translateY:E}],...R.shadows.xl}],children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:z.sheetHandleRow,children:_jsx(View,{style:[z.sheetHandle,{backgroundColor:R.components.select?.handleColor??R.components.bottomSheet?.handleColor??R.colors.border.primary}]})}),s?_jsx(Text,{style:[z.sheetTitle,{color:R.colors.text.primary,fontSize:R.typography.fontSize.lg,fontWeight:R.typography.fontWeight.semibold,paddingHorizontal:R.spacing.lg,marginBottom:R.spacing.sm}],children:s}):null]})}),T?_jsx(View,{style:[z.searchWrap,{marginHorizontal:R.spacing.lg,marginBottom:R.spacing.sm}],children:_jsxs(View,{style:[z.searchBox,{backgroundColor:R.colors.background.secondary,borderColor:R.colors.border.primary,borderRadius:R.radius.md,...smoothCorners,paddingHorizontal:R.spacing.md,gap:R.spacing.sm}],children:[(R.icons?.search??defaultIcons.search)({size:18,color:R.colors.text.tertiary}),_jsx(TextInput,{value:L,onChangeText:D,placeholder:d,placeholderTextColor:R.colors.text.tertiary,selectionColor:j??R.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:R.colors.text.primary,fontSize:R.typography.fontSize.base,paddingVertical:R.spacing.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>D(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(R.icons?.close??defaultIcons.close)({size:18,color:R.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[z.listWrap,ie?z.listRow:null],children:[_jsx(GestureDetector,{gesture:$,children:_jsx(FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:R.spacing.lg,paddingTop:R.spacing.md}],children:a?a(e.title):_jsx(Text,{style:[z.sectionTitle,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.xs,fontWeight:R.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=u(t),i=h(t),s=y(t),r=f(t),n=b(i),c=m(t),d=g?.(t)??!1;return _jsxs(Pressable,{onPress:()=>x(t),disabled:c,android_ripple:{color:R.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:c},style:({pressed:e})=>[z.optionRow,{backgroundColor:n?R.colors.surface.selected:e?R.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:R.spacing.lg,paddingVertical:R.spacing.md},C,n?_:null],children:[l?_jsx(View,{style:z.optionTextWrap,children:l(t,{selected:n,disabled:c})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:z.optionIcon,children:r}):null,_jsxs(View,{style:z.optionTextWrap,children:[_jsx(Text,{style:[z.optionLabel,{color:d?R.colors.error:n?R.colors.primary:R.colors.text.primary,fontSize:R.typography.fontSize.base,fontWeight:n?R.typography.fontWeight.semibold:R.typography.fontWeight.medium},V,n?k:null],numberOfLines:1,children:o}),s?_jsx(Text,{style:[z.optionDescription,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),S?_jsx(View,{style:[z.checkbox,{borderColor:n?R.colors.primary:R.colors.border.primary,backgroundColor:n?R.colors.primary:"transparent"}],children:n?_jsx(View,{style:z.checkboxTick}):null}):n?"icon"===R.components.optionSheet?.selectedMarker?_jsx(View,{style:z.singleSelectedIcon,children:_jsx(AppIcon,{name:"tick-circle",variant:"bulk",size:20,color:R.colors.primary})}):_jsx(View,{style:[z.singleSelectedDot,{backgroundColor:R.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?z.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[z.empty,{color:R.colors.text.tertiary,fontSize:R.typography.fontSize.sm,paddingVertical:R.spacing.xl}],children:p})})}),ie?_jsx(View,{style:[z.rail,{paddingRight:R.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:se.map(e=>{const t=oe.has(e);return _jsx(Pressable,{onPress:()=>re(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:z.railLetter,children:_jsx(Text,{style:[z.railLetterText,{color:t?R.colors.primary:R.colors.text.tertiary,fontSize:R.typography.fontSize.xs,fontWeight:R.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),S?_jsx(View,{style:[z.sheetFooter,{borderTopColor:R.colors.border.secondary,paddingHorizontal:R.spacing.lg,paddingVertical:R.spacing.md}],children:_jsx(Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?R.colors.primaryPressed:R.colors.primary,borderRadius:R.radius.md,...smoothCorners,paddingVertical:R.spacing.sm,paddingHorizontal:R.spacing.lg}],children:_jsx(Text,{style:{color:R.colors.onPrimary,fontSize:R.typography.fontSize.base,fontWeight:R.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:
|
|
1
|
+
"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:o,stroke:r,strokeWidth:s=0,outset:l=0,testID:a}){const n=s>0&&void 0!==r&&"transparent"!==r,h=n?s/2:0,u=useTheme().cornerSmoothing,c=squirclePath({width:t,height:e,radius:i,inset:h,smoothing:u});return _jsx(View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:a,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:c,fill:o,stroke:n?r:void 0,strokeWidth:n?s:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[o,r]=useState(null),s=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(s){const{width:e,height:i}=t.nativeEvent.layout;r(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[s,i]),size:o,active:s&&null!==o&&squircleApplies(o.width,o.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";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:42,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"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},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:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},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:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",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:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},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,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",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",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:"#71717A",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,shadows:darkShadows,motion:motion,components:components,gradients:{}};
|
|
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:42,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"},md:{iconSize:64,titleFontSize:"xl",descriptionFontSize:"base",paddingVertical:"xl"},lg:{iconSize:80,titleFontSize:"2xl",descriptionFontSize:"base",paddingVertical:"2xl"}},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:4},formField:{inlineLabelWidth:"35%"}},motion={duration:{instant:80,fast:160,normal:240,slow:360,slower:500},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:"#1FAD66",warning:"#F59E0B",error:"#E5484D",info:"#3B82F6",onPrimary:"#FFFFFF",onSecondary:"#0F0F1A",onSuccess:"#FFFFFF",onWarning:"#0F0F1A",onError:"#FFFFFF",onInfo:"#FFFFFF",onOverlay:"#FFFFFF",text:{primary:"#0F0F1A",secondary:"#52525B",tertiary:"#8B8B95",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:"#99A1B7",placeholderDisabled:"#C4CADA",icon:"#99A1B7",iconFocused:"#4B5675",iconDisabled:"#C4CADA",caret:"#5B8DEE",message:"#E82545"},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",onSecondary:"#FAFAFA",onSuccess:"#0F0F1A",onWarning:"#0F0F1A",onError:"#0F0F1A",onInfo:"#0F0F1A",onOverlay:"#FFFFFF",text:{primary:"#FAFAFA",secondary:"#B4B4BB",tertiary:"#71717A",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:"#71717A",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:{}};
|
|
@@ -17,7 +17,7 @@ export interface NotationProps {
|
|
|
17
17
|
* mixes such text with verbatim stored text. Needs a parent Text.
|
|
18
18
|
*/
|
|
19
19
|
text?: string | readonly NotationTextRun[];
|
|
20
|
-
/** One symbol: the base, drawn with `sub` small and lowered after it.
|
|
20
|
+
/** One symbol: the base, drawn with `sub` small and lowered after it. Needs a parent Text. */
|
|
21
21
|
base?: string;
|
|
22
22
|
sub?: string;
|
|
23
23
|
/** Follows the symbol after a space. */
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
3
|
import type { HapticType } from '../../utils';
|
|
3
4
|
export type OTPInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -21,7 +22,11 @@ export interface OTPInputProps {
|
|
|
21
22
|
*/
|
|
22
23
|
autoFocusDelay?: number;
|
|
23
24
|
disabled?: boolean;
|
|
24
|
-
|
|
25
|
+
/**
|
|
26
|
+
* A string or a node puts the cells in the error state and shows it as the
|
|
27
|
+
* message below them; `true` shows the error state without a message.
|
|
28
|
+
*/
|
|
29
|
+
error?: ReactNode;
|
|
25
30
|
size?: OTPInputSize;
|
|
26
31
|
secure?: boolean;
|
|
27
32
|
/**
|
|
@@ -4,10 +4,11 @@
|
|
|
4
4
|
* The picker behind Select and InlineSelect, exported so an app can open the
|
|
5
5
|
* same sheet from its own trigger: RN Modal-backed slide-up
|
|
6
6
|
* sheet with backdrop fade, grab handle, optional title, optional client-side
|
|
7
|
-
* search, the option list (icon + label + description, single dot
|
|
8
|
-
* checkbox) and the multi-select Done footer. Owns the
|
|
9
|
-
* and the search query; selection STATE stays with
|
|
10
|
-
* only reports `onSelect(option)` and asks
|
|
7
|
+
* search, the option list (icon + label + description, single dot or tick
|
|
8
|
+
* icon / multi checkbox) and the multi-select Done footer. Owns the
|
|
9
|
+
* open/close animations and the search query; selection STATE stays with
|
|
10
|
+
* the caller — the sheet only reports `onSelect(option)` and asks
|
|
11
|
+
* `isSelected(value)`.
|
|
11
12
|
*
|
|
12
13
|
* Also the home of the canonical option types (`SelectValue`, `SelectOption`)
|
|
13
14
|
* and accessor signatures shared by every option-picking component. Select
|
|
@@ -58,7 +59,7 @@ export interface OptionSheetProps {
|
|
|
58
59
|
renderSectionHeader?: (title: string) => React.ReactNode;
|
|
59
60
|
/**
|
|
60
61
|
* Replace the row's content (icon + label + description) with your own. The
|
|
61
|
-
* pressable row, its accessibility state and the selected
|
|
62
|
+
* pressable row, its accessibility state and the selected mark / checkbox
|
|
62
63
|
* stay, so a custom row is still a button to a screen reader.
|
|
63
64
|
*/
|
|
64
65
|
renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;
|
|
@@ -638,6 +638,15 @@ export interface InlineSelectTokens {
|
|
|
638
638
|
/** Trigger text + chevron colour. Library default: `colors.primary`. */
|
|
639
639
|
color?: string;
|
|
640
640
|
}
|
|
641
|
+
export interface OptionSheetTokens {
|
|
642
|
+
/**
|
|
643
|
+
* Mark on the selected row of a single-choice sheet (Select, InlineSelect,
|
|
644
|
+
* PhoneNumberInput and every other OptionSheet): `'dot'` is an 8 px dot,
|
|
645
|
+
* `'icon'` the `tick-circle` icon in its bulk style at 20 px. Both are drawn
|
|
646
|
+
* in `colors.primary`. Multi-select keeps its checkbox. Library default: `'dot'`.
|
|
647
|
+
*/
|
|
648
|
+
selectedMarker?: 'dot' | 'icon';
|
|
649
|
+
}
|
|
641
650
|
export interface SelectTokens {
|
|
642
651
|
/** Colour of the grab-handle rendered above the bottom-sheet picker. Library default: `colors.border.primary`. */
|
|
643
652
|
handleColor?: string;
|
|
@@ -1022,6 +1031,7 @@ export interface ComponentTokens {
|
|
|
1022
1031
|
listItem?: ListItemTokens;
|
|
1023
1032
|
modal?: ModalTokens;
|
|
1024
1033
|
numberInput?: NumberInputTokens;
|
|
1034
|
+
optionSheet?: OptionSheetTokens;
|
|
1025
1035
|
otpInput?: OTPInputTokens;
|
|
1026
1036
|
phoneNumberInput?: PhoneNumberInputTokens;
|
|
1027
1037
|
profilePicker?: ProfilePickerTokens;
|
|
@@ -1121,6 +1131,14 @@ export interface Theme {
|
|
|
1121
1131
|
typography: TypographyScale;
|
|
1122
1132
|
spacing: SpacingScale;
|
|
1123
1133
|
radius: RadiusScale;
|
|
1134
|
+
/**
|
|
1135
|
+
* Corner smoothing of the squircle Android draws behind Button, Card,
|
|
1136
|
+
* fields, Box and the other smooth-cornered hosts: 0 is a plain rounded
|
|
1137
|
+
* rectangle, 1 the fullest curve. iOS draws Apple's continuous curve, which
|
|
1138
|
+
* has no smoothing setting, so this changes Android only. Library default:
|
|
1139
|
+
* `SQUIRCLE_SMOOTHING` (0.6, Figma's "iOS" preset).
|
|
1140
|
+
*/
|
|
1141
|
+
cornerSmoothing: number;
|
|
1124
1142
|
shadows: ShadowScale;
|
|
1125
1143
|
motion: MotionScale;
|
|
1126
1144
|
components: ComponentTokens;
|
|
@@ -17,7 +17,7 @@ export interface NotationProps {
|
|
|
17
17
|
* mixes such text with verbatim stored text. Needs a parent Text.
|
|
18
18
|
*/
|
|
19
19
|
text?: string | readonly NotationTextRun[];
|
|
20
|
-
/** One symbol: the base, drawn with `sub` small and lowered after it.
|
|
20
|
+
/** One symbol: the base, drawn with `sub` small and lowered after it. Needs a parent Text. */
|
|
21
21
|
base?: string;
|
|
22
22
|
sub?: string;
|
|
23
23
|
/** Follows the symbol after a space. */
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
3
|
import type { HapticType } from '../../utils/index.js';
|
|
3
4
|
export type OTPInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -21,7 +22,11 @@ export interface OTPInputProps {
|
|
|
21
22
|
*/
|
|
22
23
|
autoFocusDelay?: number;
|
|
23
24
|
disabled?: boolean;
|
|
24
|
-
|
|
25
|
+
/**
|
|
26
|
+
* A string or a node puts the cells in the error state and shows it as the
|
|
27
|
+
* message below them; `true` shows the error state without a message.
|
|
28
|
+
*/
|
|
29
|
+
error?: ReactNode;
|
|
25
30
|
size?: OTPInputSize;
|
|
26
31
|
secure?: boolean;
|
|
27
32
|
/**
|
|
@@ -4,10 +4,11 @@
|
|
|
4
4
|
* The picker behind Select and InlineSelect, exported so an app can open the
|
|
5
5
|
* same sheet from its own trigger: RN Modal-backed slide-up
|
|
6
6
|
* sheet with backdrop fade, grab handle, optional title, optional client-side
|
|
7
|
-
* search, the option list (icon + label + description, single dot
|
|
8
|
-
* checkbox) and the multi-select Done footer. Owns the
|
|
9
|
-
* and the search query; selection STATE stays with
|
|
10
|
-
* only reports `onSelect(option)` and asks
|
|
7
|
+
* search, the option list (icon + label + description, single dot or tick
|
|
8
|
+
* icon / multi checkbox) and the multi-select Done footer. Owns the
|
|
9
|
+
* open/close animations and the search query; selection STATE stays with
|
|
10
|
+
* the caller — the sheet only reports `onSelect(option)` and asks
|
|
11
|
+
* `isSelected(value)`.
|
|
11
12
|
*
|
|
12
13
|
* Also the home of the canonical option types (`SelectValue`, `SelectOption`)
|
|
13
14
|
* and accessor signatures shared by every option-picking component. Select
|
|
@@ -58,7 +59,7 @@ export interface OptionSheetProps {
|
|
|
58
59
|
renderSectionHeader?: (title: string) => React.ReactNode;
|
|
59
60
|
/**
|
|
60
61
|
* Replace the row's content (icon + label + description) with your own. The
|
|
61
|
-
* pressable row, its accessibility state and the selected
|
|
62
|
+
* pressable row, its accessibility state and the selected mark / checkbox
|
|
62
63
|
* stay, so a custom row is still a button to a screen reader.
|
|
63
64
|
*/
|
|
64
65
|
renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;
|
|
@@ -638,6 +638,15 @@ export interface InlineSelectTokens {
|
|
|
638
638
|
/** Trigger text + chevron colour. Library default: `colors.primary`. */
|
|
639
639
|
color?: string;
|
|
640
640
|
}
|
|
641
|
+
export interface OptionSheetTokens {
|
|
642
|
+
/**
|
|
643
|
+
* Mark on the selected row of a single-choice sheet (Select, InlineSelect,
|
|
644
|
+
* PhoneNumberInput and every other OptionSheet): `'dot'` is an 8 px dot,
|
|
645
|
+
* `'icon'` the `tick-circle` icon in its bulk style at 20 px. Both are drawn
|
|
646
|
+
* in `colors.primary`. Multi-select keeps its checkbox. Library default: `'dot'`.
|
|
647
|
+
*/
|
|
648
|
+
selectedMarker?: 'dot' | 'icon';
|
|
649
|
+
}
|
|
641
650
|
export interface SelectTokens {
|
|
642
651
|
/** Colour of the grab-handle rendered above the bottom-sheet picker. Library default: `colors.border.primary`. */
|
|
643
652
|
handleColor?: string;
|
|
@@ -1022,6 +1031,7 @@ export interface ComponentTokens {
|
|
|
1022
1031
|
listItem?: ListItemTokens;
|
|
1023
1032
|
modal?: ModalTokens;
|
|
1024
1033
|
numberInput?: NumberInputTokens;
|
|
1034
|
+
optionSheet?: OptionSheetTokens;
|
|
1025
1035
|
otpInput?: OTPInputTokens;
|
|
1026
1036
|
phoneNumberInput?: PhoneNumberInputTokens;
|
|
1027
1037
|
profilePicker?: ProfilePickerTokens;
|
|
@@ -1121,6 +1131,14 @@ export interface Theme {
|
|
|
1121
1131
|
typography: TypographyScale;
|
|
1122
1132
|
spacing: SpacingScale;
|
|
1123
1133
|
radius: RadiusScale;
|
|
1134
|
+
/**
|
|
1135
|
+
* Corner smoothing of the squircle Android draws behind Button, Card,
|
|
1136
|
+
* fields, Box and the other smooth-cornered hosts: 0 is a plain rounded
|
|
1137
|
+
* rectangle, 1 the fullest curve. iOS draws Apple's continuous curve, which
|
|
1138
|
+
* has no smoothing setting, so this changes Android only. Library default:
|
|
1139
|
+
* `SQUIRCLE_SMOOTHING` (0.6, Figma's "iOS" preset).
|
|
1140
|
+
*/
|
|
1141
|
+
cornerSmoothing: number;
|
|
1124
1142
|
shadows: ShadowScale;
|
|
1125
1143
|
motion: MotionScale;
|
|
1126
1144
|
components: ComponentTokens;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"typecheck": "tsc --noEmit"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
|
-
"@webority/mobile-core": ">=0.
|
|
72
|
+
"@webority/mobile-core": ">=0.8.0 <0.9.0",
|
|
73
73
|
"expo": ">=57.0.0",
|
|
74
74
|
"expo-file-system": ">=57.0.0",
|
|
75
75
|
"expo-haptics": ">=57.0.0",
|