@webority/mobile-ui 0.90.0 → 0.91.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/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/Composer/Composer.js +1 -1
- package/lib/commonjs/components/Dialog/Dialog.js +1 -1
- package/lib/commonjs/components/EmptyState/EmptyState.js +1 -1
- package/lib/commonjs/components/IconButton/IconButton.js +1 -1
- package/lib/commonjs/components/Input/Input.js +1 -1
- package/lib/commonjs/components/ProfileCompletion/ProfileCompletion.js +1 -1
- package/lib/commonjs/components/Text/Text.js +1 -1
- package/lib/commonjs/theme/tokens.generated.js +1 -1
- package/lib/commonjs/utils/hitSlop.js +1 -0
- package/lib/commonjs/utils/warnInvalidValue.js +1 -0
- package/lib/module/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/module/components/Button/Button.js +1 -1
- package/lib/module/components/Card/Card.js +1 -1
- package/lib/module/components/Composer/Composer.js +1 -1
- package/lib/module/components/Dialog/Dialog.js +1 -1
- package/lib/module/components/EmptyState/EmptyState.js +1 -1
- package/lib/module/components/IconButton/IconButton.js +1 -1
- package/lib/module/components/Input/Input.js +1 -1
- package/lib/module/components/ProfileCompletion/ProfileCompletion.js +1 -1
- package/lib/module/components/Text/Text.js +1 -1
- package/lib/module/theme/tokens.generated.js +1 -1
- package/lib/module/utils/hitSlop.js +1 -0
- package/lib/module/utils/warnInvalidValue.js +1 -0
- package/lib/typescript/commonjs/components/Card/Card.d.ts +3 -0
- package/lib/typescript/commonjs/components/Text/Text.d.ts +1 -1
- package/lib/typescript/commonjs/theme/tokens.generated.d.ts +1 -2
- package/lib/typescript/commonjs/theme/types.d.ts +1 -1
- package/lib/typescript/commonjs/utils/hitSlop.d.ts +14 -0
- package/lib/typescript/commonjs/utils/warnInvalidValue.d.ts +10 -0
- package/lib/typescript/module/components/Card/Card.d.ts +3 -0
- package/lib/typescript/module/components/Text/Text.d.ts +1 -1
- package/lib/typescript/module/theme/tokens.generated.d.ts +1 -2
- package/lib/typescript/module/theme/types.d.ts +1 -1
- package/lib/typescript/module/utils/hitSlop.d.ts +14 -0
- package/lib/typescript/module/utils/warnInvalidValue.d.ts +10 -0
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:_="idle",accessory:w,style:R,indicatorStyle:S,labelStyle:E,labelMaxFontScale:I,testID:A}=e,v=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,k=v.radius.xl,B=useReducedMotion(),M=useScreenReaderEnabled(y),[z,N]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&N(null)},[z,_]);const H=y&&!M&&"down"===_&&null===z,[F,P]=React.useState(H);useEffect(()=>{F!==H&&(B||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),P(H))},[F,H,B]);const W="function"==typeof w?w({minimized:F}):w,O=null!=W&&!1!==W,U=F&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l||Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l||K||J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),ae=n?Math.ceil(i.length/2):i.length,re=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width||de)+2*ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:re>0?te/re:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]||(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]||(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,we=me>0?(me-48)/2:0,hasLabel=e=>s&&!F&&!1!==e.showLabel&&e.label.trim().length>0,Re=i[ee],Se=Re&&!hasLabel(Re)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ee=Se-14-24,Ie=Math.max(0,ne-4),Ae=Y?2:Se-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ce=Math.max(1,i.length-1),je=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ce;i++)e.push(i),t.push(i<ae?i*me:i*me+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ce,ae,me,he]),Te=i.map(e=>e.key).join(" "),Le=q||G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,ke=J?De.primary:De.surface,Be=J?De["on-primary"]:De.primary,Me=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Ne=J?De.primary:q?De["on-primary"]:Be,He=h??D,Fe=g??(K?D:0),Pe=Fe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=Pe?We:Math.max(We,C.bottom),$e=Pe?Math.max(Fe,C.bottom>0?C.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2*We+2*StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?k:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height||de)/2+it-ne/2-nt):0,at=n?_jsx(View,{style:[j.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsx(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??r;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,rt=O?_jsx(View,{style:U?j.accessoryInline:j.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,st=_jsxs(View,{style:U?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y||Ie>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:xe,height:Y?Ie:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ie,Ie/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:je}]},S]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:we,top:Ee,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:je}]},S]}):null,(lt=i.map(e=>{const t=e.key===o,i=t?Be:Me,n=t?Ne:Me,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t||J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G||t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:I??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,G?j.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},E],children:e.label}):null,w=_jsx(Pressable,{onPress:()=>(e=>{F&&N(_),e.key!==o&&!1!==r&&triggerHaptic(r);const t=be.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,Y?j.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[j.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?S:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:w},e.key):w}),at?[...lt.slice(0,ae),at,...lt.slice(ae)]:lt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:je}]},S]}):null]});var lt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:He,paddingTop:Math.max(Fe,ot),paddingBottom:$e},R],children:_jsxs(View,{style:[K?j.floatingBar:j.dockedBar,U?j.barInline:null,Qe,{backgroundColor:ke,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[rt,st]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.size*e.leading.tight,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.tight,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
|
|
1
|
+
"use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:_="idle",accessory:w,style:R,indicatorStyle:S,labelStyle:E,labelMaxFontScale:I,testID:A}=e,v=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,k=v.radius.xl,B=useReducedMotion(),M=useScreenReaderEnabled(y),[z,N]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&N(null)},[z,_]);const H=y&&!M&&"down"===_&&null===z,[F,P]=React.useState(H);useEffect(()=>{F!==H&&(B||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),P(H))},[F,H,B]);const W="function"==typeof w?w({minimized:F}):w,O=null!=W&&!1!==W,U=F&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l||Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l||K||J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),ae=n?Math.ceil(i.length/2):i.length,re=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width||de)+2*ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:re>0?te/re:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]||(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]||(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,we=me>0?(me-48)/2:0,hasLabel=e=>s&&!F&&!1!==e.showLabel&&e.label.trim().length>0,Re=i[ee],Se=Re&&!hasLabel(Re)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ee=Se-14-24,Ie=Math.max(0,ne-4),Ae=Y?2:Se-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ce=Math.max(1,i.length-1),je=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ce;i++)e.push(i),t.push(i<ae?i*me:i*me+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ce,ae,me,he]),Te=i.map(e=>e.key).join(" "),Le=q||G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,ke=J?De.primary:De.surface,Be=J?De["on-primary"]:De.primary,Me=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Ne=J?De.primary:q?De["on-primary"]:Be,He=h??D,Fe=g??(K?D:0),Pe=Fe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=Pe?We:Math.max(We,C.bottom),$e=Pe?Math.max(Fe,C.bottom>0?C.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2*We+2*StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?k:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height||de)/2+it-ne/2-nt):0,at=n?_jsx(View,{style:[j.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsx(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??r;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,rt=O?_jsx(View,{style:U?j.accessoryInline:j.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,st=_jsxs(View,{style:U?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y||Ie>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:xe,height:Y?Ie:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ie,Ie/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:je}]},S]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:we,top:Ee,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:je}]},S]}):null,(lt=i.map(e=>{const t=e.key===o,i=t?Be:Me,n=t?Ne:Me,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t||J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G||t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:I??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,G?j.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},E],children:e.label}):null,w=_jsx(Pressable,{onPress:()=>(e=>{F&&N(_),e.key!==o&&!1!==r&&triggerHaptic(r);const t=be.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,Y?j.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[j.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?S:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:w},e.key):w}),at?[...lt.slice(0,ae),at,...lt.slice(ae)]:lt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:je}]},S]}):null]});var lt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:He,paddingTop:Math.max(Fe,ot),paddingBottom:$e},R],children:_jsxs(View,{style:[K?j.floatingBar:j.dockedBar,U?j.barInline:null,Qe,{backgroundColor:ke,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[rt,st]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.size*e.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,resolveButtonSize,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,t)=>{const{title:r,children:o,variant:s="solid",tone:i="primary",size:n="md",loading:l=!1,disabled:a=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:h=!1,gradient:m,style:f,containerStyle:x,textStyle:y,pressAnimation:S,onPress:C,accessibilityLabel:_,accessibilityHint:I,accessibilityState:
|
|
1
|
+
"use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,resolveButtonSize,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,t)=>{const{title:r,children:o,variant:s="solid",tone:i="primary",size:n="md",loading:l=!1,disabled:a=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:h=!1,gradient:m,style:f,containerStyle:x,textStyle:y,pressAnimation:S,onPress:C,accessibilityLabel:_,accessibilityHint:I,accessibilityState:k,testID:w,onLayout:j,...T}=e;if(__DEV__&&hasTextChild(o))throw new Error('[@webority/mobile-ui] Button was given its label as text children. Pass it as `title` (<Button title="Save" />): text children draw a blank button with no accessible name.');const F=useTheme(),v=!a&&!l,L={...k,disabled:!v,busy:l},R="link"===s,O=S??(!R&&"scale"),P=usePressAnimation({preset:O||"scale",enabled:!1!==O&&v}),A=useFlickGuard(),W=useMemo(()=>buildStyles(F),[F]),V=useMemo(()=>resolveButtonSize(F,n),[F,n]),E=useMemo(()=>toneFor(F,i),[F,i]),z=useMemo(()=>variantFor(F,s,E,a),[F,s,E,a]),B=useMemo(()=>!m||a||"solid"!==s?null:"string"==typeof m?F.settings.gradients[m]??null:m,[m,a,s,F.settings.gradients]),D=StyleSheet.flatten(f)?.borderRadius,H=R?0:"number"==typeof D?D:h?F.radius.pill:V.radius,N=useSquircle(!B&&"link"!==s,H,j),M=useRef(createAnimatedValue(0)).current,[q,G]=useState(0),[K,U]=useState(null),X=R?e=>G(e.nativeEvent.layout.width):void 0,Y=_??r,J="outline"===s||"ghost"===s,Q=!J&&!R,Z={color:z.textColor,size:V.icon,disabled:a},$=g&&!R&&Boolean(c),ee=F.space.xs,te=V["min-height"]-2*ee-2*z.borderWidth,re={color:z.badgeInk,size:V["badge-icon"],disabled:a},oe=l?_jsx(Spinner,{variant:"circular",size:"sm",color:$?z.badgeInk:z.textColor,accessibilityLabel:"Loading"}):c?renderSlotIcon(c,$?re:Z,b):null,se=_jsxs(View,{style:W.contentRow,children:[$?_jsx(View,{testID:"button-icon-badge",style:[W.iconLeft,W.iconBadge,{width:te,height:te,borderRadius:te/2,backgroundColor:z.badgeFill}],children:oe}):oe?_jsx(View,{style:W.iconLeft,children:oe}):null,r?_jsxs(View,{onLayout:X,children:[_jsx(Text,{style:[W.label,{color:z.textColor,fontSize:V.text,...fontFor(F,"semibold")},y],numberOfLines:1,children:r}),R?_jsx(Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[W.linkUnderline,{backgroundColor:z.textColor,transform:[{translateX:M.interpolate({inputRange:[0,1],outputRange:[-q/2,0]})},{scaleX:M.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):o,u?_jsx(View,{style:W.iconRight,children:renderSlotIcon(u,Z,b)}):null]}),ie=R?null===K?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(K)):touchSlopFor(V["min-height"]),ne={top:ie,bottom:ie,left:R?LINK_HIT_SLOP:0,right:R?LINK_HIT_SLOP:0};return _jsx(Animated.View,{style:[P.style,d?W.fullWidth:null,x],children:_jsx(Pressable,{ref:t,onPress:e=>{v&&!A.isFlick(e)&&(P.press(),p&&triggerHaptic(p),C?.(e))},onPressIn:e=>{A.onPressIn(e),P.pressIn(),R&&v&&(M.stopAnimation(),M.setValue(0),Animated.timing(M,{toValue:1,duration:F.motion.duration.slower,easing:Easing.bezier(...F.motion.ease.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{P.pressOut()},disabled:!v,hitSlop:ne,...hitSlopMarker(ne),accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:I,accessibilityState:L,...ariaFromState(L),testID:w,onLayout:e=>{N.onLayout(e),R&&U(e.nativeEvent.layout.height)},style:({pressed:e})=>[W.base,{paddingHorizontal:R?0:V["padding-x"],paddingVertical:R?0:$?ee:V["padding-y"],paddingLeft:$?ee:void 0,minHeight:R?void 0:V["min-height"],borderRadius:H,...smoothCorners,backgroundColor:B||N.active?"transparent":z.backgroundColor,borderWidth:z.borderWidth,borderColor:N.active?"transparent":z.borderColor,opacity:l?.55:1,overflow:N.active||R?"visible":"hidden"},e&&J&&!N.active?{backgroundColor:F.colors["surface-pressed"]}:null,d?W.fullWidth:null,f],...T,"aria-disabled":!v,"aria-busy":l,children:({pressed:e})=>_jsxs(_Fragment,{children:[N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:H,fill:e&&J?F.colors["surface-pressed"]:z.backgroundColor,stroke:z.borderColor,strokeWidth:z.borderWidth,outset:z.borderWidth}):null,B?_jsx(Gradient,{gradient:B,style:[StyleSheet.absoluteFill,{borderRadius:H,...smoothCorners}]}):null,e&&Q?N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:H,fill:z.pressedTint,outset:z.borderWidth,testID:"button-pressed"}):_jsx(View,{pointerEvents:"none",style:[W.pressedOverlay,{borderRadius:H,backgroundColor:z.pressedTint,...smoothCorners}],testID:"button-pressed"}):null,se]})})})});Button.displayName="Button";const hasTextChild=e=>React.Children.toArray(e).some(e=>"string"==typeof e||"number"==typeof e),SOFT_FILL_OPACITY=.14,toneFor=(e,t)=>{switch(t){case"primary":return{base:e.colors.primary,on:e.colors["on-primary"],fg:e.colors["primary-text"],soft:tintOf(e.colors.primary,.14,e.colors["primary-soft"])};case"secondary":return{base:e.colors.neutral,on:e.colors["on-neutral"],fg:e.colors["on-neutral"],soft:e.colors.neutral};case"success":return{base:e.colors.success,on:e.colors["on-success"],fg:e.colors["success-text"],soft:tintOf(e.colors.success,.14,e.colors["bg-subtle"])};case"warning":return{base:e.colors.warning,on:e.colors["on-warning"],fg:e.colors["warning-text"],soft:tintOf(e.colors.warning,.14,e.colors["bg-subtle"])};case"danger":return{base:e.colors.danger,on:e.colors["on-danger"],fg:e.colors["danger-text"],soft:tintOf(e.colors.danger,.14,e.colors["bg-subtle"])};default:return{base:e.colors["bg-muted"],on:e.colors["text-body"],fg:e.colors["text-body"],soft:e.colors["bg-subtle"]}}},BUTTON_BORDER_WIDTH=1,MIN_TOUCH_TARGET=44,LINK_HIT_SLOP=8,touchSlopFor=e=>Math.max(0,Math.ceil((44-e)/2)),variantFor=(e,t,r,o)=>{const s=o?e.colors["text-disabled"]:r.fg,i={badgeFill:e.colors["surface-disabled"],badgeInk:e.colors["text-disabled"]},n=o?i:{badgeFill:r.on,badgeInk:r.base},l=o?i:{badgeFill:r.base,badgeInk:r.on};switch(t){case"solid":return{backgroundColor:o?e.colors["surface-disabled"]:r.base,borderColor:"transparent",borderWidth:1,textColor:o?e.colors["text-disabled"]:r.on,pressedTint:e.colors["surface-pressed"],...n};case"soft":return{backgroundColor:o?e.colors["surface-disabled"]:r.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"outline":return{backgroundColor:"transparent",borderColor:o?e.colors.border:r.base,borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:o?e.colors["text-disabled"]:e.colors.link,pressedTint:e.colors["surface-pressed"],...l};case"glass":return{backgroundColor:e.colors["glass-fill"],borderColor:e.colors["glass-border"],borderWidth:1,textColor:o?e.colors["text-disabled"]:e.colors["on-glass"],pressedTint:ACCENT_PRESSED_TINT,badgeFill:e.colors["glass-badge"],badgeInk:o?e.colors["text-disabled"]:r.base};default:return{backgroundColor:r.base,borderColor:"transparent",borderWidth:1,textColor:r.on,pressedTint:e.colors["surface-pressed"],...n}}},buildStyles=e=>StyleSheet.create({pressedOverlay:{position:"absolute",top:0,right:0,bottom:0,left:0},base:{alignItems:"center",justifyContent:"center",flexDirection:"row",overflow:"hidden"},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},linkUnderline:{height:1.5,marginTop:1},iconLeft:{marginRight:e.space.sm},iconBadge:{alignItems:"center",justifyContent:"center"},iconRight:{marginLeft:e.space.sm},fullWidth:{alignSelf:"stretch"}});export{Button};export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{Gradient,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{squircleHostRadius}from"../../utils/squircle.js";import{themeStyles}from"../../utils/themeStyles.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"],paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:o,variant:i="elevated",elevation:s="card",radius:r="lg",padding:
|
|
1
|
+
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{squircleHostRadius}from"../../utils/squircle.js";import{themeStyles}from"../../utils/themeStyles.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"],paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:o,variant:i="elevated",elevation:s="card",radius:r="lg",padding:l="md",interactive:a=!1,bg:n,header:d,title:c,titleFont:u="sans",lead:h,action:m,headerActions:p,collapsible:b=!1,collapsed:g,defaultCollapsed:y=!1,onCollapsedChange:x,collapsedSummary:f,onRemove:S,removeLabel:j="Remove",separatorHeight:v=StyleSheet.hairlineWidth,footer:C,imageSource:_,imageHeight:w=160,imageAspectRatio:R,imageOverlay:A,loading:k=!1,gradient:T,onPress:F,haptic:B,contextMenu:I,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,style:V,containerStyle:z,headerStyle:M,bodyStyle:q,footerStyle:O,borderRadius:W,testID:D,onLayout:N,...E}=e,G=useTheme(),K=a||"function"==typeof F,U=useContextMenu(I,{haptic:B||!1,testID:D,accessibilityActions:E.accessibilityActions,onAccessibilityAction:E.onAccessibilityAction}),$=useMemo(()=>mergeRefs(t,U.hostRef),[t,U.hostRef]),J=K||U.enabled,{style:Q,pressIn:X,pressOut:Y}=usePressAnimation({enabled:J}),Z=stylesFor(G),ee=Boolean(_),te=G.space[paddingMap[l]],oe=useMemo(()=>T?"string"==typeof T?G.settings.gradients[T]??null:T:null,[T,G.settings.gradients]),ie="flat"===i,se=ie?G.radius.none:W??G.radius[r],re=resolveBackground(G,n),[le,ae]=useControllableState({value:g,defaultValue:y,onChange:x}),ne=b&&le,de=hasBuiltInHeaderContent(e),ce=Boolean(d)||de,ue=useSquircle(!ee&&!oe&&!ie,se,N),he=StyleSheet.flatten([V,z])??{},me=he.backgroundColor,pe=he.borderColor,be=me??re??("filled"===i?G.colors["bg-subtle"]:G.colors.surface),ge="outlined"===i?G.size.border:0,ye=pe??G.colors.border,xe="none"===s?void 0:G.shadow[s],fe="elevated"===i&&supportsBoxShadow()&&xe?toBoxShadow(xe):void 0,Se=ue.active&&"elevated"===i&&!fe,je=ue.active&&!Se?{backgroundColor:"transparent",borderColor:"transparent"}:null,ve=useMemo(()=>{const e={borderRadius:Se&&ue.size?squircleHostRadius(ue.size.width,ue.size.height,se):se,...smoothCorners,padding:ee?G.space.none:te,overflow:ue.active?"visible":"hidden"};switch(i){case"flat":return{...e,backgroundColor:re??G.colors.surface,borderBottomWidth:v,borderBottomColor:G.colors.border};case"outlined":return{...e,backgroundColor:ue.active?"transparent":re??G.colors.surface,borderWidth:G.size.border,borderColor:ue.active?"transparent":G.colors.border};case"filled":return{...e,backgroundColor:ue.active?"transparent":re??G.colors["bg-subtle"]};default:return{...e,backgroundColor:re??G.colors.surface,...fe?{boxShadow:fe}:xe}}},[G,i,xe,se,ee,te,ue.active,ue.size,fe,Se,re,v]),Ce=useMemo(()=>({..."number"==typeof R?{width:"100%",aspectRatio:R}:{width:"100%",height:w},borderTopLeftRadius:se,borderTopRightRadius:se,borderBottomLeftRadius:G.radius.none,borderBottomRightRadius:G.radius.none,...smoothCorners}),[G,se,R,w]),we="string"==typeof c?c:"",Re=_jsxs(_Fragment,{children:[_jsxs(View,{style:Z.titleColumn,children:["string"==typeof c?_jsx(Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(G,u),children:c}):c,h?_jsx(Text,{variant:"bodySmall",style:Z.lead,children:h}):null,ne&&f?_jsx(Text,{variant:"caption",style:Z.lead,children:f}):null]}),isCardTextAction(m)?_jsx(CardTextActionButton,{action:m,haptic:B}):m?_jsx(View,{style:Z.actionNode,children:m}):null,p,b?_jsx(CardIconAction,{icon:ne?"chevron-down":"chevron-up",label:`${ne?"Show":"Hide"} ${we}`.trim(),expanded:!ne,onPress:()=>ae(!ne),haptic:B}):null,S?_jsx(CardIconAction,{icon:"trash",label:j,onPress:S,color:G.colors["danger-text"],haptic:B}):null]}),Ae=_jsxs(_Fragment,{children:[ce?_jsx(View,{style:[Z.header,!d&&Z.headerRow,ne&&Z.headerFolded,M],children:d??Re}):null,ne?null:_jsx(View,{style:[ce||C?Z.body:null,q],children:o}),C&&!ne?_jsx(View,{style:[Z.footer,O],children:C}):null]}),ke=ee?_jsxs(_Fragment,{children:[_jsxs(View,{style:Z.imageWrapper,children:[_jsx(Image,{source:_,resizeMode:"cover",style:Ce,accessibilityLabel:"",accessible:!1}),A?_jsx(View,{pointerEvents:"box-none",style:Z.imageOverlay,children:A}):null]}),_jsx(View,{style:{padding:te},children:Ae})]}):Ae,Te=oe?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:oe,style:StyleSheet.absoluteFill}),ke]}):ue.active&&ue.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:ue.size.width,height:ue.size.height,radius:se,fill:be,stroke:ge?ye:void 0,strokeWidth:ge,outset:ge}),ke]}):ke;let Fe;if(J){const handlePress=e=>{K&&(B&&triggerHaptic(B),F?.(e))};Fe=_jsx(Animated.View,{style:Q,children:_jsx(Pressable,{ref:$,onPress:handlePress,onPressIn:X,onPressOut:Y,android_ripple:{color:G.colors["surface-pressed"],borderless:!1},accessibilityRole:P??(K?"button":void 0),accessibilityLabel:H,accessibilityHint:L,testID:D,onLayout:ue.onLayout,style:[ve,V,z,je],...E,...U.hostProps,children:Te})})}else Fe=_jsx(View,{ref:t,accessibilityLabel:H,accessibilityHint:L,accessibilityRole:P,testID:D,onLayout:ue.onLayout,style:[ve,V,z,je],...E,children:Te});return k?_jsx(CardSkeleton,{...e}):U.enabled?_jsxs(_Fragment,{children:[Fe,U.renderSurface(_jsx(View,{style:[ve,V,z,je,Z.preview],children:Te}))]}):Fe}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:o="lg",padding:i="md",bg:s,header:r,footer:l,imageSource:a,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:p,style:b,...g})=>{const y=useTheme(),x=paddingMap[i],f=y.space[x],S="flat"===e?y.radius.none:c??y.radius[o],j=void 0!==r||hasBuiltInHeaderContent(g),v=resolveBackground(y,s)??y.colors.surface,C="outlined"===e?1:0,_="outlined"===e?y.colors.border:void 0;return _jsxs(View,{style:[{backgroundColor:v,borderRadius:S,...smoothCorners,borderWidth:C,borderColor:_,overflow:"hidden"},u,b],accessibilityRole:"progressbar",accessibilityLabel:"Loading",accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==a?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,j?_jsx(View,{style:[{padding:f,paddingBottom:y.space.sm},h],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:f},m],children:_jsx(SkeletonText,{lines:3,fontSize:y.text.base.size,lastLineWidth:"55%"})}),void 0!==l?_jsx(View,{style:[{padding:f,paddingTop:y.space.sm,flexDirection:"row"},p],children:_jsx(Skeleton,{width:88,height:32,shape:"rounded"})}):null]})};CardSkeleton.displayName="CardSkeleton",Card.Skeleton=CardSkeleton;const hasBuiltInHeaderContent=e=>Boolean(e.title||e.lead||e.action||e.headerActions||e.collapsible||e.onRemove),isCardTextAction=e=>"object"==typeof e&&null!==e&&!React.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:o,expanded:i,color:s,haptic:r})=>{const l=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===i?void 0:{expanded:i},"aria-expanded":i,onPress:()=>{r&&triggerHaptic(r),o()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:s??l.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>{const o=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{t&&triggerHaptic(t),e.onPress()},style:textActionStyle,children:_jsx(Text,{variant:"label",weight:"semibold",color:o.colors.primary,children:e.label})})},iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},titleFaceFor=(e,t)=>"serif"===t?fontFor(e,"semibold","display"):{fontFamily:void 0,...fontFor(e,"semibold")},resolveBackground=(e,t)=>{if(null!=t)return BACKGROUND_TOKENS.includes(t)?e.colors[t]:t},buildStyles=e=>StyleSheet.create({header:{marginBottom:e.space.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.space.sm},headerFolded:{marginBottom:e.space.none},titleColumn:{flex:1},lead:{marginTop:e.space.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.space.md},imageWrapper:{position:"relative"},imageOverlay:{...StyleSheet.absoluteFill},preview:{margin:e.space.none,marginTop:e.space.none,marginBottom:e.space.none,marginLeft:e.space.none,marginRight:e.space.none,marginStart:e.space.none,marginEnd:e.space.none,marginHorizontal:e.space.none,marginVertical:e.space.none,position:"relative",top:0,left:0,width:"100%",height:"100%"}}),stylesFor=themeStyles(buildStyles);export{Card};export default Card;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Platform,StyleSheet,TextInput,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useControllableState}from"../../hooks/useControllableState.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{IconButton}from"../IconButton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MIN_BOX=44;export const Composer=forwardRef(({onSend:e,value:o,onChangeText:t,placeholder:a="Message",accessibilityLabel:s,sendLabel:i="Send",busy:r=!1,disabled:l=!1,maxLength:n,maxLines:d=5,leading:c,trailing:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Platform,StyleSheet,TextInput,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useControllableState}from"../../hooks/useControllableState.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{IconButton}from"../IconButton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MIN_BOX=44;export const Composer=forwardRef(({onSend:e,value:o,onChangeText:t,placeholder:a="Message",accessibilityLabel:s,sendLabel:i="Send",busy:r=!1,disabled:l=!1,maxLength:n,maxLines:d=5,leading:c,trailing:b,above:m,below:p,keyboardAware:u=!0,keyboardOffset:h,safeArea:x=!0,autoFocus:f,haptic:g,style:y,testID:S},C)=>{const j=useTheme(),v=useSafeAreaInsets(),w=useMemo(()=>buildStyles(j),[j]),[I,k]=useControllableState({value:o,defaultValue:"",onChange:t}),T=I.trim(),V=r||l||""===T,_=x?v.bottom:0,z=h??_,B=resolveFieldTextStyle(j,{disabled:l}),D=j.text.base.size,F=Math.round(D*j.leading.body),L=(44-F)/2,M=F*d+2*L,[H,A]=useState(void 0),P=useCallback(e=>{const o=e.nativeEvent.contentSize.height+2*L;A(Math.min(Math.max(o,44),M))},[L,M]),O=useCallback(()=>{V||(k(""),e(T))},[V,k,e,T]),R=_jsxs(View,{style:[w.bar,{paddingBottom:j.space.sm+_},y],testID:S,children:[m,_jsxs(View,{style:w.row,children:[c,_jsx(View,{style:[w.box,l?w.boxDisabled:null],children:_jsx(TextInput,{ref:C,value:I,onChangeText:k,multiline:!0,maxLength:n,editable:!l,autoFocus:f,placeholder:a,placeholderTextColor:B.placeholderColor,selectionColor:j.colors["field-caret"],accessibilityLabel:s??a,accessibilityState:{disabled:l},"aria-disabled":l,onContentSizeChange:"web"===Platform.OS?P:void 0,style:[w.input,{color:B.color,...B.weightStyle,fontSize:D,lineHeight:F,paddingVertical:L,maxHeight:M,height:"web"===Platform.OS?H:void 0}],testID:S?`${S}-input`:void 0})}),b,_jsx(IconButton,{icon:"send",accessibilityLabel:i,variant:"solid",tone:"primary",disabled:V,loading:r,haptic:g,onPress:O,testID:S?`${S}-send`:void 0})]}),p]});return u?_jsx(KeyboardStickyView,{offset:{closed:0,opened:z},children:R}):R});Composer.displayName="Composer";const buildStyles=e=>StyleSheet.create({bar:{gap:e.space.xs,paddingHorizontal:e.space.md,paddingTop:e.space.sm,backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors["border-subtle"]},row:{flexDirection:"row",alignItems:"flex-end",gap:e.space.sm},box:{flex:1,minHeight:44,justifyContent:"center",backgroundColor:e.colors["field-bg"],borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.md},boxDisabled:{backgroundColor:e.colors["field-bg-disabled"]},input:{margin:e.space.none,paddingHorizontal:e.space.none,includeFontPadding:!1,textAlignVertical:"top"}});export default Composer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useMemo}from"react";import{ActivityIndicator,Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:t,onClose:o,title:r,message:i,children:s,icon:l,variant:n="default",actions:a,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:m,messageStyle:g,iconWrapperStyle:p,actionsRowStyle:y,actionButtonStyle:x,actionTextStyle:h,haptic:f,testID:C}=e,S=useTheme(),j=useMemo(()=>buildStyles(S),[S]),_=useMemo(()=>discFor(S,n),[S,n]),w=S.components.dialog["icon-wrapper-size"],I=S.components.dialog["action-button-min-height"],D=Boolean(a&&a.length>0),M=useCallback(e=>{if(e.loading||e.disabled)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),c?(o(),setTimeout(e.onPress,MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,f]);return _jsx(Modal,{visible:t,onRequestClose:o,haptic:f,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:_jsxs(View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[l?_jsx(View,{style:[j.iconWrapper,{width:w,height:w,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:_,marginBottom:S.space.md},p],children:l}):null,r?_jsx(Text,{style:[j.title,{color:S.colors["text-body"],fontSize:S.text.xl.size,...fontFor(S,"semibold"),marginBottom:i||null!=s?S.space.sm:S.space.md},m],accessibilityRole:"header",children:r}):null,i?_jsx(Text,{style:[j.message,{color:S.colors["text-muted"],fontSize:S.text.base.size,lineHeight:S.text.base.size*S.leading.
|
|
1
|
+
"use strict";import{useCallback,useMemo}from"react";import{ActivityIndicator,Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{MODAL_DISMISS_GRACE_MS,Modal}from"../Modal/Modal.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Dialog=e=>{const{visible:t,onClose:o,title:r,message:i,children:s,icon:l,variant:n="default",actions:a,dismissOnAction:c=!0,accessibilityLabel:d,contentStyle:u,containerStyle:b,titleStyle:m,messageStyle:g,iconWrapperStyle:p,actionsRowStyle:y,actionButtonStyle:x,actionTextStyle:h,haptic:f,testID:C}=e,S=useTheme(),j=useMemo(()=>buildStyles(S),[S]),_=useMemo(()=>discFor(S,n),[S,n]),w=S.components.dialog["icon-wrapper-size"],I=S.components.dialog["action-button-min-height"],D=Boolean(a&&a.length>0),M=useCallback(e=>{if(e.loading||e.disabled)return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),c?(o(),setTimeout(e.onPress,MODAL_DISMISS_GRACE_MS)):e.onPress()},[c,o,f]);return _jsx(Modal,{visible:t,onRequestClose:o,haptic:f,presentation:"centered",accessibilityLabel:d??r,contentStyle:u,testID:C,children:_jsxs(View,{accessibilityRole:"alert",accessibilityLabel:d??r,style:[j.container,b],children:[l?_jsx(View,{style:[j.iconWrapper,{width:w,height:w,borderRadius:S.radius.pill,...smoothCorners,backgroundColor:_,marginBottom:S.space.md},p],children:l}):null,r?_jsx(Text,{style:[j.title,{color:S.colors["text-body"],fontSize:S.text.xl.size,...fontFor(S,"semibold"),marginBottom:i||null!=s?S.space.sm:S.space.md},m],accessibilityRole:"header",children:r}):null,i?_jsx(Text,{style:[j.message,{color:S.colors["text-muted"],fontSize:S.text.base.size,lineHeight:S.text.base.size*S.leading.body,marginBottom:null!=s?S.space.md:D?S.space.lg:0},g],children:i}):null,null!=s?_jsx(View,{style:{marginBottom:D?S.space.lg:0},children:s}):null,a&&a.length>0?_jsx(View,{style:[j.actionsRow,y],children:a.map((e,t)=>{const o=e.tone??"primary",r=Boolean(e.disabled),i=actionStyleFor(S,o,r),s=t===a.length-1;return _jsx(Pressable,{onPress:()=>M(e),disabled:e.loading||r,accessibilityRole:"button",accessibilityLabel:e.label,accessibilityState:{busy:e.loading,disabled:Boolean(e.loading)||r},"aria-busy":e.loading,"aria-disabled":Boolean(e.loading)||r,style:({pressed:t})=>[j.actionButton,{minHeight:I,backgroundColor:i.backgroundColor,borderColor:i.borderColor,borderWidth:i.borderWidth,borderRadius:S.radius.md,...smoothCorners,paddingVertical:S.space.sm,paddingHorizontal:S.space.md,marginRight:s?0:S.space.sm,opacity:e.loading?.7:t&&!r?.85:1},x],children:e.loading?_jsx(ActivityIndicator,{size:"small",color:i.textColor}):_jsx(Text,{style:[{color:i.textColor,fontSize:S.text.base.size,...fontFor(S,"semibold"),textAlign:"center"},h],children:e.label})},`${e.label}-${t}`)})}):null]})})};Dialog.displayName="Dialog";const SOFT_DISC_OPACITY=.14,discFor=(e,t)=>{const o=e.colors["bg-subtle"];switch(t){case"success":return tintOf(e.colors.success,.14,o);case"warning":return tintOf(e.colors.warning,.14,o);case"danger":return tintOf(e.colors.danger,.14,o);case"info":return tintOf(e.colors.info,.14,o);default:return e.colors["primary-soft"]}},actionStyleFor=(e,t,o)=>{if(o)return{backgroundColor:"neutral"===t?"transparent":e.colors["surface-disabled"],borderColor:"neutral"===t?e.colors.border:"transparent",borderWidth:"neutral"===t?1:0,textColor:e.colors["text-disabled"]};switch(t){case"primary":return{backgroundColor:e.colors.primary,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-primary"]};case"info":return{backgroundColor:e.colors.info,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-info"]};case"danger":return{backgroundColor:e.colors.danger,borderColor:"transparent",borderWidth:0,textColor:e.colors["on-danger"]};default:return{backgroundColor:"transparent",borderColor:e.colors.border,borderWidth:1,textColor:e.colors["text-body"]}}},buildStyles=e=>StyleSheet.create({container:{alignItems:"stretch"},iconWrapper:{alignItems:"center",justifyContent:"center",alignSelf:"center"},title:{textAlign:"center"},message:{textAlign:"center"},actionsRow:{flexDirection:"row",justifyContent:"flex-end",alignItems:"stretch"},actionButton:{flex:1,alignItems:"center",justifyContent:"center"}});export{Dialog};export default Dialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveEmptyStateSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const r=useTheme(),{style:o,pressIn:i,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(r),[r]),l="primary"===t,a=useSquircle(!0,r.radius.md),fillFor=e=>l?e?r.colors["primary-hover"]:r.colors.primary:e?r.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:o,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:i,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:r.radius.md,fill:fillFor(t),stroke:l?void 0:r.colors.border,strokeWidth:l?0:1,outset:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const{icon:r,title:o,description:i,action:s,secondaryAction:n,size:l="md",fill:a=!1,style:c,testID:d}=e,u=useTheme(),m=useMemo(()=>resolveEmptyStateSize(u,l),[u,l]),y=useMemo(()=>buildStyles(u),[u]);return _jsxs(View,{ref:t,accessibilityRole:"summary",testID:d,style:[y.root,{paddingVertical:m["padding-y"]},a?y.fill:null,c],children:[r?_jsx(View,{style:[y.iconCircle,{width:m.icon,height:m.icon,marginBottom:m["title-gap"],borderRadius:u.radius.pill,...smoothCorners}],children:r}):null,_jsx(Text,{style:[y.title,{fontSize:m["title-text"],...fontFor(u,"semibold")}],children:o}),i?_jsx(Text,{style:[y.description,{fontSize:m["description-text"],marginTop:m["description-gap"]}],children:i}):null,s||n?_jsxs(View,{style:y.actions,children:[s?_jsx(ActionButton,{action:s,variant:"primary"}):null,n?_jsx(ActionButton,{action:n,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors["surface-disabled"],alignItems:"center",justifyContent:"center"},title:{color:e.colors["text-body"],textAlign:"center"},description:{color:e.colors["text-muted"],textAlign:"center",maxWidth:320,lineHeight:e.text.base.size*e.leading.
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveEmptyStateSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const r=useTheme(),{style:o,pressIn:i,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(r),[r]),l="primary"===t,a=useSquircle(!0,r.radius.md),fillFor=e=>l?e?r.colors["primary-hover"]:r.colors.primary:e?r.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:o,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:i,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:r.radius.md,fill:fillFor(t),stroke:l?void 0:r.colors.border,strokeWidth:l?0:1,outset:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const{icon:r,title:o,description:i,action:s,secondaryAction:n,size:l="md",fill:a=!1,style:c,testID:d}=e,u=useTheme(),m=useMemo(()=>resolveEmptyStateSize(u,l),[u,l]),y=useMemo(()=>buildStyles(u),[u]);return _jsxs(View,{ref:t,accessibilityRole:"summary",testID:d,style:[y.root,{paddingVertical:m["padding-y"]},a?y.fill:null,c],children:[r?_jsx(View,{style:[y.iconCircle,{width:m.icon,height:m.icon,marginBottom:m["title-gap"],borderRadius:u.radius.pill,...smoothCorners}],children:r}):null,_jsx(Text,{style:[y.title,{fontSize:m["title-text"],...fontFor(u,"semibold")}],children:o}),i?_jsx(Text,{style:[y.description,{fontSize:m["description-text"],marginTop:m["description-gap"]}],children:i}):null,s||n?_jsxs(View,{style:y.actions,children:[s?_jsx(ActionButton,{action:s,variant:"primary"}):null,n?_jsx(ActionButton,{action:n,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors["surface-disabled"],alignItems:"center",justifyContent:"center"},title:{color:e.colors["text-body"],textAlign:"center"},description:{color:e.colors["text-muted"],textAlign:"center",maxWidth:320,lineHeight:e.text.base.size*e.leading.body},actions:{flexDirection:"row",alignItems:"center",gap:e.space.sm,marginTop:e.space.lg}}),buildActionStyles=e=>StyleSheet.create({button:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,minHeight:42,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden",alignItems:"center",justifyContent:"center",flexDirection:"row"},buttonPrimary:{backgroundColor:e.colors.primary},buttonPrimaryPressed:{backgroundColor:e.colors["primary-hover"]},buttonSecondary:{backgroundColor:"transparent",borderWidth:1,borderColor:e.colors.border},buttonSecondaryPressed:{backgroundColor:e.colors["surface-pressed"]},buttonSquircleHost:{backgroundColor:"transparent",borderColor:"transparent",overflow:"visible"},buttonText:{fontSize:e.text.base.size,...fontFor(e,"semibold")},buttonTextPrimary:{color:e.colors["on-primary"]},buttonTextSecondary:{color:e.colors["text-body"]}});export{EmptyState};export default EmptyState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef}from"react";import{Animated,Pressable,StyleSheet}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const GLASS_RIM_WIDTH=1,SOFT_FILL_OPACITY=.14,SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:48,icon:24}},toneFor=(e,
|
|
1
|
+
"use strict";import{forwardRef}from"react";import{Animated,Pressable,StyleSheet}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const GLASS_RIM_WIDTH=1,HIT_SLOP=6,SOFT_FILL_OPACITY=.14,SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:48,icon:24}},toneFor=(e,o)=>{switch(o){case"secondary":return{base:e.colors.neutral,on:e.colors["on-neutral"],fg:e.colors.neutral};case"success":return{base:e.colors.success,on:e.colors["on-success"],fg:e.colors["success-text"]};case"warning":return{base:e.colors.warning,on:e.colors["on-warning"],fg:e.colors["warning-text"]};case"danger":return{base:e.colors.danger,on:e.colors["on-danger"],fg:e.colors["danger-text"]};case"neutral":return{base:e.colors["bg-muted"],on:e.colors["text-body"],fg:e.colors["text-body"]};default:return{base:e.colors.primary,on:e.colors["on-primary"],fg:e.colors.primary}}},IconButton=forwardRef((e,o)=>{const{icon:s,iconVariant:r,onPress:t,accessibilityLabel:n,tone:i="primary",variant:a="solid",size:l="md",shape:c="circle",active:d=!1,disabled:m=!1,loading:u=!1,haptic:b,style:p,testID:f}=e,g=useTheme(),y=SIZE_MAP[l],I=m||u,{style:h,pressIn:S,pressOut:x}=usePressAnimation({scaleTo:.92,enabled:!I}),{base:j,on:P,fg:_}=toneFor(g,i),A=d?"solid":a;let w="transparent",C="transparent",O=0,T=I?g.colors["text-disabled"]:_;"solid"===A?(w=I?g.colors["surface-disabled"]:j,T=I?g.colors["text-disabled"]:P):"soft"===A?w=I?g.colors["surface-disabled"]:tintOf(j,.14,g.colors["bg-subtle"]):"outline"===A?(C=I?g.colors.border:j,O=g.size.border):"glass"===A&&(w=g.colors["glass-fill"],C=g.colors["glass-border"],O=1,T=I?g.colors["text-disabled"]:g.colors["on-glass"]);const H={color:T,size:y.icon,disabled:I},L="circle"===c?y.diameter/2:g.radius.md;return _jsx(Pressable,{ref:o,onPress:e=>{if(I)return;const o=resolveHaptic(b,"selection");o&&triggerHaptic(o),t?.(e)},onPressIn:S,onPressOut:x,disabled:I,accessibilityRole:"button",accessibilityLabel:n,accessibilityState:{disabled:I,selected:d},"aria-disabled":I,"aria-selected":d,hitSlop:6,...hitSlopMarker(6),testID:f,style:({pressed:e})=>[styles.base,{width:y.diameter,height:y.diameter,borderRadius:L,...smoothCorners,backgroundColor:w,borderColor:C,borderWidth:O,opacity:e&&"solid"!==A?.7:1},p],children:_jsx(Animated.View,{style:[styles.content,h],children:u?_jsx(Spinner,{size:"sm",color:T}):renderSlotIcon(s,H,r)})})});IconButton.displayName="IconButton";const styles=StyleSheet.create({base:{alignItems:"center",justifyContent:"center"},content:{alignItems:"center",justifyContent:"center"}});export{IconButton};export default IconButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveFieldSize,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Input=forwardRef((e,t)=>{const{label:i,help:n,placeholder:o,value:l,onChangeText:s,error:r,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:b,readOnly:v=!1,action:S,actionStyle:j,size:w="md",variant:T,labelMode:F,required:I=!1,maxLength:R,showCounter:_=!0,textAlign:V,format:A,parse:z,style:N,containerStyle:k,inputStyle:C,labelStyle:L,messageStyle:P,borderRadius:D,onFocus:H,onBlur:B,accessibilityLabel:E,testID:M,editable:O,...q}=e,G=useTheme(),W=useMemo(()=>buildStyles(G),[G]),$=resolveFieldSize(G,w),X=G.components.input[w]["multiline-min-height"],J=Math.round(
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveFieldSize,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Input=forwardRef((e,t)=>{const{label:i,help:n,placeholder:o,value:l,onChangeText:s,error:r,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:b,readOnly:v=!1,action:S,actionStyle:j,size:w="md",variant:T,labelMode:F,required:I=!1,maxLength:R,showCounter:_=!0,textAlign:V,format:A,parse:z,style:N,containerStyle:k,inputStyle:C,labelStyle:L,messageStyle:P,borderRadius:D,onFocus:H,onBlur:B,accessibilityLabel:E,testID:M,editable:O,...q}=e,G=useTheme(),W=useMemo(()=>buildStyles(G),[G]),$=resolveFieldSize(G,w),X=G.components.input[w]["multiline-min-height"],J=Math.round($.text*G.leading.body),K=T??G.settings.components.input?.defaultVariant??G.settings.components.field?.defaultVariant??"outlined",Q=F??G.settings.components.input?.defaultLabelMode??"top",[U,Y]=useState(!1),[Z,ee]=useState(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||f,oe=ne?Math.round(.1*$.text):0,le="string"==typeof l&&l.length>0,se=hasFieldText(r),re=!0===r||se,ae=hasFieldText(a),de=se||!re&&ae,ce=hasFieldText(i),ue=hasFieldText(y),pe=!p&&!1!==O,fe=U||le||ue,ge=useRef(null),me=useMemo(()=>mergeRefs(ge,t),[t]),xe=useCallback(()=>{pe&&ge.current?.focus()},[pe]),he=ce&&"float"===Q,ye=useRef(createAnimatedValue(0)).current,be=useRef(createAnimatedValue(de?1:0)).current;useEffect(()=>{const e=Animated.timing(be,{toValue:de?1:0,duration:G.motion.duration.fast,easing:Easing.bezier(...G.motion.ease["in-out"]),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,be,G.motion.duration.fast,G.motion.ease["in-out"]]);const ve=useReducedMotion(),Se=G.settings.components.input?.shakeOnError??!1,je=useRef(re);useEffect(()=>{if(!Se)return void(je.current=re);let e;return re&&!je.current&&(ve||(setNativeValue(ye,0),e=Animated.sequence([Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),triggerHaptic("notificationError")),je.current=re,()=>e?.stop()},[re,ye,Se,ve]);const we=useCallback(e=>{Y(!0),H?.(e)},[H]),Te=useCallback(e=>{Y(!1),B?.(e)},[B]),Fe=useCallback(()=>{triggerHaptic("selection"),ee(e=>!e)},[]),Ie=G.colors["field-caret"],Re=D??$.radius,Ve=G.settings.components.input?.tintLabelOnFocus??!1,Ae=U&&Ve?G.colors["field-border-focus"]:G.colors["field-label"],ze=ye.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Ne=Boolean(m)||Boolean(x)||ie,ke="underline"===K,Ce=g?$.icon+G.space.md+1+G.space.md:0,Le=useFloatingLabel({label:i,enabled:he,floated:fe,required:I,variant:K,sizeTokens:$,leadingOffset:Ce,trailingOffset:Ne?$.icon+G.space.sm:0,textAlign:V,paddingLeft:ke?G.space.none:$["padding-x"],lineHeight:ne?J:void 0,restNudge:oe,floatTrim:ne?2:0,color:Ae,style:L}),Pe=resolveFieldTextStyle(G,{disabled:p}),De=Pe.color,He=Pe.placeholderColor,Be=I&&!ce&&!le&&"string"==typeof o&&o.length>0,Ee=re?r:a,Me=_&&"number"==typeof R&&"string"==typeof l?`${l.length} / ${R}`:null,Oe=re?G.colors["field-message"]:G.colors["text-muted"],qe=useNotationInk(P,$["message-text"],Oe),Ge=E??fieldTextAsString(i)??o,We=p?G.colors["field-icon-disabled"]:U?G.colors["field-icon-focus"]:G.colors["field-icon"],$e={focused:U,disabled:p,error:re,color:We,size:$.icon},renderSlot=e=>renderSlotIcon(e,$e),Xe=(()=>{if(ie){const e=(Z?G.settings.icons.eyeOff:G.settings.icons.eye)??(Z?defaultIcons.eyeOff:defaultIcons.eye);return _jsx(Pressable,{onPress:Fe,disabled:!pe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.icon,color:We})})}const e=x?_jsx(Text,{style:[W.unit,{fontSize:$.text,color:He},h],children:x}):null,t=m?_jsx(View,{children:renderSlot(m)}):null;return e&&t?_jsxs(View,{style:W.trailingRow,children:[e,t]}):e??t})(),Je=g?_jsx(View,{children:renderSlot(g)}):null,Ke=StyleSheet.flatten(b),Qe=Ke?.fontSize??$.text,Ue=Ke?.color??He,Ye=useMemo(()=>({fontSize:Qe,color:Ue}),[Qe,Ue]),Ze=ue?"string"==typeof y||"number"==typeof y?_jsx(Text,{style:[W.prefix,{fontSize:$.text,color:He,marginRight:G.space.xs,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0},b],children:y}):_jsx(View,{style:[W.prefixNode,{marginRight:G.space.xs,minHeight:ne?J:void 0,justifyContent:"center",paddingTop:ne?oe:void 0}],children:_jsx(Text,{style:[W.prefix,{fontSize:$.text,color:He,lineHeight:ne?J:void 0},b],children:_jsx(NotationInkContext.Provider,{value:Ye,children:y})})}):null,et=S?_jsx(Button,{variant:S.variant??"outline",tone:S.tone??"primary",size:w,title:S.label,leftIcon:S.icon,loading:S.loading,disabled:p||S.disabled,onPress:S.onPress,pressAnimation:!1,testID:S.testID,style:[W.action,{minHeight:$["min-height"],alignSelf:ne?"flex-start":"stretch"},j]}):null;return _jsxs(Animated.View,{style:[W.container,{transform:[{translateX:ze}]},N],children:[ce&&!he?_jsx(FieldLabel,{size:w,required:I,help:n,color:Ae,style:L,children:i}):null,_jsxs(View,{style:[W.fieldRow,{columnGap:G.space.sm,alignItems:ne?"flex-start":"stretch"}],children:[_jsxs(View,{style:W.fieldWrapper,children:[_jsxs(FieldBase,{size:w,variant:K,focused:U,disabled:p,error:re,filled:le,minHeight:ne?X:void 0,borderRadius:Re,leading:Je,leadingDivider:null!=g,paddingLeft:ke?G.space.none:void 0,trailing:Xe,slotAlign:ne?"top":"center",slotLineHeight:ne?J:void 0,topNotch:Le.topNotch,onPress:xe,pressFeedback:!1,style:k,children:[Ze,_jsxs(View,{style:W.inputWrap,children:[_jsx(TextInput,{ref:me,style:[W.input,{color:De,fontSize:$.text,...Pe.weightStyle,paddingLeft:ke?G.space.none:void 0,minHeight:ne?X-2*$["padding-y"]:void 0,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0,textAlignVertical:ne?"top":"center"},C],textAlign:V,placeholder:he&&!fe||Be?void 0:o,placeholderTextColor:He,value:A&&null!=l?A(l):l,onChangeText:e=>{s&&s(z?z(e):e)},onFocus:we,onBlur:Te,editable:pe,readOnly:v,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:R,selectionColor:Ie,accessibilityLabel:Ge,accessibilityState:{disabled:p},"aria-disabled":p,testID:M,...q}),Be?_jsx(RequiredPlaceholder,{text:o,color:He,fontSize:$.text,weightStyle:Pe.weightStyle,align:ne?"top":"center",paddingTop:ne?oe:void 0,textAlign:V}):null]})]}),Le.node]}),et]}),de||Me?_jsxs(View,{style:[W.footerRow,{marginTop:$["message-gap"]}],children:[de?_jsxs(Animated.View,{style:[W.messageRow,{columnGap:G.space.xs,opacity:be}],accessibilityLiveRegion:re?"polite":"none",children:[re?_jsx(FieldErrorGlyph,{size:$["message-text"],color:Oe}):null,_jsx(Text,{style:[W.messageText,{color:Oe,fontSize:$["message-text"],...fontFor(G,"normal")},P],children:_jsx(NotationInkContext.Provider,{value:qe,children:Ee})})]}):_jsx(View,{style:W.footerSpacer}),Me?_jsx(Text,{style:[W.counterText,{color:G.colors["text-subtle"],fontSize:$["message-text"],...fontFor(G,"normal")}],children:Me}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:e.space.none,margin:e.space.none,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:e.space.sm},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});export{Input};export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_AVATAR_SIZE=56,DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,t)=>{const{progress:o,title:r,subtitle:i,description:s,source:l,ImageComponent:n,size:a=DEFAULT_AVATAR_SIZE,avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:d,ringWidth:p,ringGap:u=DEFAULT_RING_GAP,ringVariant:x="banded",tone:g,ringColor:f,animated:b=!0,showCompleteBadge:y=!0,trailing:h,accessibilityLabel:_,style:j,titleStyle:w,subtitleStyle:A,descriptionStyle:I,testID:C}=e,S=useTheme(),T=useMemo(()=>buildStyles(S),[S]),D=p??3,R=a+2*(u+D),v=Math.min(100,Math.max(0,Number.isNaN(o)?0:o)),z=Math.round(v),P=_??`${r}, profile ${z}% complete`,V=C??"profile-completion",L=y&&v>=100,F=Math.max(16,Math.round(.3*R)),G=R/2*(1+Math.SQRT1_2)-D/2,E=f??("banded"===x&&null==g||"success"===g?S.colors.success:"warning"===g?S.colors.warning:"danger"===g?S.colors.danger:S.colors.primary);return _jsxs(View,{ref:t,style:[T.root,j],testID:C,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:P,accessibilityValue:{min:0,max:100,now:z},testID:`${V}-summary`,children:[_jsxs(View,{style:{width:R,height:R},children:[_jsx(ProgressRing,{progress:v/100,size:R,strokeWidth:D,tone:g??"primary",ringColor:f,colorByProgress:"banded"===x&&null==g&&null==f,animated:b,testID:`${V}-ring`,children:_jsx(Avatar,{name:r,source:l,ImageComponent:n,size:a,tone:c,backgroundColor:m,color:d,accessibilityLabel:`${r}'s avatar`})}),L?_jsx(View,{pointerEvents:"none",style:[T.badge,{width:F,height:F,borderRadius:S.radius.pill,...smoothCorners,left:G-F/2,top:G-F/2,backgroundColor:S.colors.surface}],testID:`${V}-complete-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:F-2,color:E})}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{style:[T.title,w],numberOfLines:2,children:r}),i?_jsx(Text,{style:[T.subtitle,A],numberOfLines:1,children:i}):null,s?_jsx(Text,{style:[T.description,I],children:s}):null]})]}),null!=h?_jsx(View,{style:T.trailing,children:h}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.space.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.space.md},body:{flex:1,rowGap:e.space.xxs},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},title:{fontSize:e.text.xl.size,lineHeight:e.text.xl.size*e.leading.
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Avatar}from"../Avatar/index.js";import{ProgressRing}from"../ProgressRing/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_AVATAR_SIZE=56,DEFAULT_RING_WIDTH=3,DEFAULT_RING_GAP=1,ProfileCompletion=forwardRef((e,t)=>{const{progress:o,title:r,subtitle:i,description:s,source:l,ImageComponent:n,size:a=DEFAULT_AVATAR_SIZE,avatarTone:c="neutral",avatarBackgroundColor:m,avatarColor:d,ringWidth:p,ringGap:u=DEFAULT_RING_GAP,ringVariant:x="banded",tone:g,ringColor:f,animated:b=!0,showCompleteBadge:y=!0,trailing:h,accessibilityLabel:_,style:j,titleStyle:w,subtitleStyle:A,descriptionStyle:I,testID:C}=e,S=useTheme(),T=useMemo(()=>buildStyles(S),[S]),D=p??3,R=a+2*(u+D),v=Math.min(100,Math.max(0,Number.isNaN(o)?0:o)),z=Math.round(v),P=_??`${r}, profile ${z}% complete`,V=C??"profile-completion",L=y&&v>=100,F=Math.max(16,Math.round(.3*R)),G=R/2*(1+Math.SQRT1_2)-D/2,E=f??("banded"===x&&null==g||"success"===g?S.colors.success:"warning"===g?S.colors.warning:"danger"===g?S.colors.danger:S.colors.primary);return _jsxs(View,{ref:t,style:[T.root,j],testID:C,children:[_jsxs(View,{style:T.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:P,accessibilityValue:{min:0,max:100,now:z},testID:`${V}-summary`,children:[_jsxs(View,{style:{width:R,height:R},children:[_jsx(ProgressRing,{progress:v/100,size:R,strokeWidth:D,tone:g??"primary",ringColor:f,colorByProgress:"banded"===x&&null==g&&null==f,animated:b,testID:`${V}-ring`,children:_jsx(Avatar,{name:r,source:l,ImageComponent:n,size:a,tone:c,backgroundColor:m,color:d,accessibilityLabel:`${r}'s avatar`})}),L?_jsx(View,{pointerEvents:"none",style:[T.badge,{width:F,height:F,borderRadius:S.radius.pill,...smoothCorners,left:G-F/2,top:G-F/2,backgroundColor:S.colors.surface}],testID:`${V}-complete-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:F-2,color:E})}):null]}),_jsxs(View,{style:T.body,children:[_jsx(Text,{style:[T.title,w],numberOfLines:2,children:r}),i?_jsx(Text,{style:[T.subtitle,A],numberOfLines:1,children:i}):null,s?_jsx(Text,{style:[T.description,I],children:s}):null]})]}),null!=h?_jsx(View,{style:T.trailing,children:h}):null]})});ProfileCompletion.displayName="ProfileCompletion";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.space.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.space.md},body:{flex:1,rowGap:e.space.xxs},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},title:{fontSize:e.text.xl.size,lineHeight:e.text.xl.size*e.leading.heading,color:e.colors["text-body"],...fontFor(e,"semibold")},subtitle:{fontSize:e.text.sm.size,color:e.colors["text-subtle"],textTransform:"uppercase",letterSpacing:e["letter-spacing"].wide,...fontFor(e,"medium")},description:{fontSize:e.text.base.size,color:e.colors["text-muted"],...fontFor(e,"normal")},trailing:{alignSelf:"flex-start"}});export{ProfileCompletion};export default ProfileCompletion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"display",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"heading",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"heading",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"body",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"body",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"body",color:"secondary"},caption:{size:"xs",weight:"normal",line:"body",color:"tertiary"},label:{size:"sm",weight:"medium",line:"body",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"body",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLE_COLOR={textStrong:"text",primary:"text-body",secondary:"text-muted",tertiary:"text-subtle",inverse:"text-inverse",disabled:"text-disabled",link:"link"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0};export const resolveColor=(e,i)=>Object.hasOwn(TEXT_ROLE_COLOR,i)?e.colors[TEXT_ROLE_COLOR[i]]:Object.hasOwn(SEMANTIC,i)?e.colors[`${i}-text`]:i;const Text=forwardRef((e,i)=>{const{variant:t="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:d,children:c,...m}=e,y=useTheme(),p=Object.hasOwn(VARIANTS,t),g=y.settings.textVariants,h=!p&&g&&Object.hasOwn(g,t)?g[t]:void 0;p||h||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(g??{})]);const x=useMemo(()=>{if(h){const e="string"==typeof n?n:h.size,i="number"==typeof n?n:y.text[e].size;return{fontSize:i,lineHeight:h.lineHeight??("number"==typeof n?void 0:Math.round(i*y.leading[h.heading?"heading":"body"])),color:void 0!==o?resolveColor(y,o):h.color?y.colors[h.color]:resolveColor(y,"primary"),textAlign:l,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:h.letterSpacing?y["letter-spacing"][h.letterSpacing]:void 0,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[p?t:"body"],i="number"==typeof n?n:y.text[n??e.size].size;return{fontSize:i,lineHeight:Math.round(i*y.leading[e.line]),color:resolveColor(y,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,h,p,t,o,r,n,l,a,s]),b=p?VARIANTS[t].heading:h?.heading;return _jsx(RNText,{ref:i,style:[x,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:b?"header":m.accessibilityRole,...m,children:c})});Text.displayName="Text";export{Text};export default Text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";export const COLOR_NAMES=["bg","bg-subtle","bg-muted","surface","surface-inverse","text","text-body","text-muted","text-subtle","text-inverse","link","border","border-subtle","field-bg","field-border","field-border-focus","focus-ring","scrim","on-scrim","thumb","primary","primary-hover","primary-soft","primary-text","on-primary","primary-wash","primary-wash-strong","neutral","neutral-hover","neutral-text","on-neutral","success","success-soft","success-text","on-success","warning","warning-soft","warning-text","on-warning","danger","danger-soft","danger-border","danger-text","on-danger","info","info-soft","info-text","on-info","primary-pressed","on-neutral-strong","text-disabled","surface-pressed","surface-hover","surface-selected","surface-disabled","skeleton","skeleton-highlight","glass-fill","glass-border","on-glass","glass-badge","field-bg-focus","field-bg-disabled","field-border-error","field-label","field-text","field-text-disabled","field-placeholder","field-placeholder-disabled","field-icon","field-icon-focus","field-icon-disabled","field-caret","field-message","avatar-1","avatar-2","avatar-3","avatar-4","avatar-5","avatar-6","avatar-7","avatar-8"];export const SPACE_NAMES=["none","xxs","xs","sm","md","lg","xl","2xl","3xl","4xl"];export const RADIUS_NAMES=["none","sm","md","lg","xl","pill"];export const TEXT_NAMES=["xs","sm","base","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl"];export const WEIGHT_NAMES=["normal","medium","semibold","bold"];export const LEADING_NAMES=["tight","normal","relaxed"];export const LETTER_SPACING_NAMES=["tight","normal","wide"];export const FONT_NAMES=["ui","display","mono"];export const SHADOW_NAMES=["card","elevated","popover","modal","drawer"];export const DURATION_NAMES=["instant","fast","default","slow","slower"];export const EASE_NAMES=["in-out","accelerate","decelerate","sharp"];export const SIZE_NAMES=["border"];export const COMPONENT_KINDS={field:{radius:"radius","padding-x":"space","padding-y":"space","min-height":"px",text:"text",icon:"px","label-text":"text","label-gap":"space","message-text":"text","message-gap":"space"},press:{opacity:"number"},disabled:{opacity:"number"},button:{"padding-x":"space","padding-y":"space","min-height":"px",text:"text",radius:"radius",icon:"px","badge-icon":"px"},input:{"multiline-min-height":"px"},"search-bar":{radius:"radius"},"empty-state":{icon:"px","title-text":"text","description-text":"text","padding-y":"space","title-gap":"space","description-gap":"space"},"list-item":{"padding-y":"space","title-text":"text","subtitle-text":"text","min-height":"px"},badge:{text:"text","min-width":"px",height:"px","padding-x":"space","dot-size":"px","border-width":"px","anchor-offset":"px"},chip:{"padding-x":"space","padding-y":"space",text:"text","min-height":"px","close-size":"px","close-text":"text",gap:"space",icon:"px"},checkbox:{"box-size":"px","label-gap":"space"},radio:{outer:"px",inner:"px","label-gap":"space"},switch:{"track-width":"px","track-height":"px","thumb-size":"px",padding:"space"},"otp-input":{cell:"px",text:"text",radius:"radius",gap:"space"},"segmented-control":{height:"px",text:"text","padding-x":"space",icon:"px","track-padding":"space","underline-height":"px","pill-inset":"space"},tabs:{text:"text","padding-y":"space","padding-x":"space","scrollable-padding-x":"space",icon:"px","icon-gap":"space","track-padding":"space","underline-height":"px","pill-inset":"space","disabled-opacity":"number","badge-gap":"space"},slider:{"track-height":"px","thumb-diameter":"px"},"floating-action-button":{diameter:"px",icon:"px",text:"text","label-padding-x":"space","edge-offset":"space","bottom-offset":"space","secondary-gap":"space","stagger-ms":"ms"},dialog:{"icon-wrapper-size":"px","action-button-min-height":"px"},toast:{"icon-circle-size":"px","icon-glyph-text":"text","tint-bar-width":"px","action-min-height":"px"},banner:{"tint-bar-width":"px"}};export const lightTokens={mode:"light",colors:{bg:"#ffffff","bg-subtle":"#f8f8fb","bg-muted":"#f1f1f5",surface:"#ffffff","surface-inverse":"#0f0f1a",text:"#252f4a","text-body":"#0f0f1a","text-muted":"#52525b","text-subtle":"#62626b","text-inverse":"#ffffff",link:"#5b5bd6",border:"#e5e5ec","border-subtle":"#efeff3","field-bg":"#f9fbfc","field-border":"#ebedf3","field-border-focus":"#bed2f9","focus-ring":"#5b5bd6",scrim:"#0f0f1a80","on-scrim":"#ffffff",thumb:"#ffffff",primary:"#5b5bd6","primary-hover":"#4f4fbf","primary-soft":"#eeeefc","primary-text":"#4f4fd3","on-primary":"#ffffff","primary-wash":"#5b5bd614","primary-wash-strong":"#5b5bd633",neutral:"#f4f4f8","neutral-hover":"#e9e9f0","neutral-text":"#52525b","on-neutral":"#0f0f1a",success:"#18864f","success-soft":"#e8faee","success-text":"#147042","on-success":"#ffffff",warning:"#f59e0b","warning-soft":"#fff8e6","warning-text":"#8f5c06","on-warning":"#0f0f1a",danger:"#e12c32","danger-soft":"#ffeaef","danger-border":"#e5484d","danger-text":"#bc1b20","on-danger":"#ffffff",info:"#1b6ef5","info-soft":"#e9f3ff","info-text":"#0958d9","on-info":"#ffffff","primary-pressed":"#4040a8","on-neutral-strong":"#ffffff","text-disabled":"#b4b4bb","surface-pressed":"#0f0f1a0f","surface-hover":"#0f0f1a0a","surface-selected":"#5b5bd61a","surface-disabled":"#f1f1f5",skeleton:"#ebedf3","skeleton-highlight":"#f5f6fa","glass-fill":"#ffffff47","glass-border":"#ffffff73","on-glass":"#0f0f1a","glass-badge":"#ffffff","field-bg-focus":"#ffffff","field-bg-disabled":"#f5f6fa","field-border-error":"#fdbfce","field-label":"#242f4a","field-text":"#252f4a","field-text-disabled":"#c4cada","field-placeholder":"#626d8b","field-placeholder-disabled":"#c4cada","field-icon":"#7a849f","field-icon-focus":"#4b5675","field-icon-disabled":"#c4cada","field-caret":"#5b8dee","field-message":"#d81736","avatar-1":"#5b5bd6","avatar-2":"#0a7979","avatar-3":"#a45a05","avatar-4":"#cd226e","avatar-5":"#2462eb","avatar-6":"#7c3aed","avatar-7":"#047c57","avatar-8":"#d42222"},space:{none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius:{none:0,sm:6,md:10,lg:14,xl:20,pill:9999},text:{xs:{size:11,lineHeight:17},sm:{size:13,lineHeight:20},base:{size:15,lineHeight:23},lg:{size:17,lineHeight:24},xl:{size:20,lineHeight:26},"2xl":{size:24,lineHeight:30},"3xl":{size:30,lineHeight:36},"4xl":{size:36,lineHeight:40},"5xl":{size:45,lineHeight:47},"6xl":{size:57,lineHeight:57},"7xl":{size:64,lineHeight:64},"8xl":{size:72,lineHeight:72}},weight:{normal:"400",medium:"500",semibold:"600",bold:"700"},leading:{tight:1.2,normal:1.4,relaxed:1.6},"letter-spacing":{tight:-.2,normal:0,wide:.4},font:{ui:{},display:{},mono:{}},shadow:{card:{shadowColor:"#000000",shadowOffset:{width:0,height:2},shadowOpacity:.059,shadowRadius:4,elevation:2},elevated:{shadowColor:"#000000",shadowOffset:{width:0,height:4},shadowOpacity:.078,shadowRadius:8,elevation:4},popover:{shadowColor:"#000000",shadowOffset:{width:0,height:8},shadowOpacity:.102,shadowRadius:16,elevation:8},modal:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.141,shadowRadius:24,elevation:12},drawer:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.141,shadowRadius:24,elevation:12}},motion:{duration:{instant:80,fast:160,default:240,slow:360,slower:500},ease:{"in-out":[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]}},size:{border:1},components:{field:{sm:{radius:"md","padding-x":"sm","padding-y":"sm","min-height":38,text:"sm",icon:14,"label-text":"xs","label-gap":"xs","message-text":"xs","message-gap":"xxs"},md:{radius:"md","padding-x":"md","padding-y":"md","min-height":44,text:"base",icon:16,"label-text":"sm","label-gap":"xs","message-text":"sm","message-gap":"xxs"},lg:{radius:"md","padding-x":"lg","padding-y":"lg","min-height":52,text:"lg",icon:18,"label-text":"base","label-gap":"xs","message-text":"base","message-gap":"xxs"}},press:{opacity:.85},disabled:{opacity:.55},button:{xs:{"padding-x":"sm","padding-y":"xs","min-height":28,text:"xs",radius:"md",icon:14,"badge-icon":11},sm:{"padding-x":"md","padding-y":"xs","min-height":34,text:"sm",radius:"md",icon:16,"badge-icon":16},md:{"padding-x":"lg","padding-y":"sm","min-height":44,text:"base",radius:"md",icon:18,"badge-icon":18},lg:{"padding-x":"xl","padding-y":"md","min-height":50,text:"lg",radius:"lg",icon:20,"badge-icon":20},xl:{"padding-x":"2xl","padding-y":"md","min-height":58,text:"xl",radius:"lg",icon:22,"badge-icon":22}},input:{sm:{"multiline-min-height":72},md:{"multiline-min-height":92},lg:{"multiline-min-height":110}},"search-bar":{sm:{radius:"pill"},md:{radius:"pill"},lg:{radius:"pill"}},"empty-state":{sm:{icon:48,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"title-text":"2xl","description-text":"lg","padding-y":"2xl","title-gap":"md","description-gap":"xs"}},"list-item":{sm:{"padding-y":"sm","title-text":"sm","subtitle-text":"xs","min-height":44},md:{"padding-y":"md","title-text":"base","subtitle-text":"sm","min-height":56},lg:{"padding-y":"lg","title-text":"lg","subtitle-text":"base","min-height":72}},badge:{sm:{text:"xs","min-width":16,height:16,"padding-x":"xs","dot-size":8},md:{text:"sm","min-width":20,height:20,"padding-x":"sm","dot-size":10},"border-width":1.5,"anchor-offset":4},chip:{sm:{"padding-x":"sm","padding-y":"xs",text:"xs","min-height":26,"close-size":16,"close-text":"xs",gap:"xs",icon:14},md:{"padding-x":"md","padding-y":"xs",text:"sm","min-height":32,"close-size":18,"close-text":"sm",gap:"sm",icon:16}},checkbox:{sm:{"box-size":16},md:{"box-size":20},lg:{"box-size":24},"label-gap":"sm"},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},"label-gap":"sm"},switch:{sm:{"track-width":42,"track-height":26,"thumb-size":22,padding:"xxs"},md:{"track-width":51,"track-height":31,"thumb-size":27,padding:"xxs"},lg:{"track-width":60,"track-height":36,"thumb-size":32,padding:"xxs"}},"otp-input":{sm:{cell:36,text:"base",radius:"sm",gap:"sm"},md:{cell:48,text:"xl",radius:"md",gap:"sm"},lg:{cell:56,text:"2xl",radius:"lg",gap:"md"}},"segmented-control":{sm:{height:32,text:"sm","padding-x":"sm",icon:14},md:{height:40,text:"base","padding-x":"md",icon:16},lg:{height:48,text:"lg","padding-x":"lg",icon:18},"track-padding":"xs","underline-height":2,"pill-inset":"xs"},tabs:{sm:{text:"sm","padding-y":"sm","padding-x":"xs","scrollable-padding-x":"md",icon:16},md:{text:"base","padding-y":"md","padding-x":"sm","scrollable-padding-x":"lg",icon:18},lg:{text:"lg","padding-y":"lg","padding-x":"md","scrollable-padding-x":"xl",icon:20},"icon-gap":"xs","track-padding":"xs","underline-height":2,"pill-inset":"xs","disabled-opacity":.45,"badge-gap":"xs"},slider:{sm:{"track-height":4,"thumb-diameter":24},md:{"track-height":6,"thumb-diameter":28},lg:{"track-height":8,"thumb-diameter":32}},"floating-action-button":{sm:{diameter:40,icon:18,text:"sm","label-padding-x":"md"},md:{diameter:56,icon:22,text:"base","label-padding-x":"lg"},lg:{diameter:72,icon:28,text:"lg","label-padding-x":"xl"},"edge-offset":"xl","bottom-offset":"xl","secondary-gap":"lg","stagger-ms":50},dialog:{"icon-wrapper-size":48,"action-button-min-height":44},toast:{"icon-circle-size":28,"icon-glyph-text":"lg","tint-bar-width":0,"action-min-height":30},banner:{"tint-bar-width":0}}};export const darkTokens={mode:"dark",colors:{bg:"#0b0b12","bg-subtle":"#13131c","bg-muted":"#1c1c26",surface:"#1c1c26","surface-inverse":"#fafafa",text:"#e2e2e2","text-body":"#fafafa","text-muted":"#b4b4bb","text-subtle":"#919199","text-inverse":"#0f0f1a",link:"#9292ee",border:"#27272f","border-subtle":"#1c1c26","field-bg":"#13131c","field-border":"#27272f","field-border-focus":"#3d5fb0","focus-ring":"#7c7ce8",scrim:"#000000a6","on-scrim":"#ffffff",thumb:"#ffffff",primary:"#7c7ce8","primary-hover":"#9292ee","primary-soft":"#1f1f3d","primary-text":"#8989ea","on-primary":"#0f0f1a","primary-wash":"#7c7ce814","primary-wash-strong":"#7c7ce833",neutral:"#1f1f26","neutral-hover":"#2a2a33","neutral-text":"#b4b4bb","on-neutral":"#fafafa",success:"#30c780","success-soft":"#04b4402e","success-text":"#30c780","on-success":"#0f0f1a",warning:"#fbbf24","warning-soft":"#dfa0002e","warning-text":"#fbbf24","on-warning":"#0f0f1a",danger:"#f87171","danger-soft":"#e826462e","danger-border":"#f87171","danger-text":"#f87171","on-danger":"#0f0f1a",info:"#60a5fa","info-soft":"#056ee92e","info-text":"#60a5fa","on-info":"#0f0f1a","primary-pressed":"#a8a8f2","on-neutral-strong":"#0f0f1a","text-disabled":"#52525b","surface-pressed":"#ffffff14","surface-hover":"#ffffff0d","surface-selected":"#7c7ce82e","surface-disabled":"#1c1c26",skeleton:"#1c1c26","skeleton-highlight":"#27272f","glass-fill":"#ffffff47","glass-border":"#ffffff73","on-glass":"#0f0f1a","glass-badge":"#ffffff","field-bg-focus":"#0b0b12","field-bg-disabled":"#1c1c26","field-border-error":"#8a2f42","field-label":"#e4e6ee","field-text":"#fafafa","field-text-disabled":"#52525b","field-placeholder":"#84848d","field-placeholder-disabled":"#52525b","field-icon":"#8b8b95","field-icon-focus":"#d4d4db","field-icon-disabled":"#52525b","field-caret":"#7c9ef0","field-message":"#f87171","avatar-1":"#8b8bee","avatar-2":"#2dd4bf","avatar-3":"#fcd34d","avatar-4":"#f472b6","avatar-5":"#60a5fa","avatar-6":"#a78bfa","avatar-7":"#34d399","avatar-8":"#f87171"},space:{none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius:{none:0,sm:6,md:10,lg:14,xl:20,pill:9999},text:{xs:{size:11,lineHeight:17},sm:{size:13,lineHeight:20},base:{size:15,lineHeight:23},lg:{size:17,lineHeight:24},xl:{size:20,lineHeight:26},"2xl":{size:24,lineHeight:30},"3xl":{size:30,lineHeight:36},"4xl":{size:36,lineHeight:40},"5xl":{size:45,lineHeight:47},"6xl":{size:57,lineHeight:57},"7xl":{size:64,lineHeight:64},"8xl":{size:72,lineHeight:72}},weight:{normal:"400",medium:"500",semibold:"600",bold:"700"},leading:{tight:1.2,normal:1.4,relaxed:1.6},"letter-spacing":{tight:-.2,normal:0,wide:.4},font:{ui:{},display:{},mono:{}},shadow:{card:{shadowColor:"#000000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},elevated:{shadowColor:"#000000",shadowOffset:{width:0,height:4},shadowOpacity:.502,shadowRadius:8,elevation:4},popover:{shadowColor:"#000000",shadowOffset:{width:0,height:8},shadowOpacity:.549,shadowRadius:16,elevation:8},modal:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},drawer:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12}},motion:{duration:{instant:80,fast:160,default:240,slow:360,slower:500},ease:{"in-out":[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]}},size:{border:1},components:{field:{sm:{radius:"md","padding-x":"sm","padding-y":"sm","min-height":38,text:"sm",icon:14,"label-text":"xs","label-gap":"xs","message-text":"xs","message-gap":"xxs"},md:{radius:"md","padding-x":"md","padding-y":"md","min-height":44,text:"base",icon:16,"label-text":"sm","label-gap":"xs","message-text":"sm","message-gap":"xxs"},lg:{radius:"md","padding-x":"lg","padding-y":"lg","min-height":52,text:"lg",icon:18,"label-text":"base","label-gap":"xs","message-text":"base","message-gap":"xxs"}},press:{opacity:.85},disabled:{opacity:.55},button:{xs:{"padding-x":"sm","padding-y":"xs","min-height":28,text:"xs",radius:"md",icon:14,"badge-icon":11},sm:{"padding-x":"md","padding-y":"xs","min-height":34,text:"sm",radius:"md",icon:16,"badge-icon":16},md:{"padding-x":"lg","padding-y":"sm","min-height":44,text:"base",radius:"md",icon:18,"badge-icon":18},lg:{"padding-x":"xl","padding-y":"md","min-height":50,text:"lg",radius:"lg",icon:20,"badge-icon":20},xl:{"padding-x":"2xl","padding-y":"md","min-height":58,text:"xl",radius:"lg",icon:22,"badge-icon":22}},input:{sm:{"multiline-min-height":72},md:{"multiline-min-height":92},lg:{"multiline-min-height":110}},"search-bar":{sm:{radius:"pill"},md:{radius:"pill"},lg:{radius:"pill"}},"empty-state":{sm:{icon:48,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"title-text":"2xl","description-text":"lg","padding-y":"2xl","title-gap":"md","description-gap":"xs"}},"list-item":{sm:{"padding-y":"sm","title-text":"sm","subtitle-text":"xs","min-height":44},md:{"padding-y":"md","title-text":"base","subtitle-text":"sm","min-height":56},lg:{"padding-y":"lg","title-text":"lg","subtitle-text":"base","min-height":72}},badge:{sm:{text:"xs","min-width":16,height:16,"padding-x":"xs","dot-size":8},md:{text:"sm","min-width":20,height:20,"padding-x":"sm","dot-size":10},"border-width":1.5,"anchor-offset":4},chip:{sm:{"padding-x":"sm","padding-y":"xs",text:"xs","min-height":26,"close-size":16,"close-text":"xs",gap:"xs",icon:14},md:{"padding-x":"md","padding-y":"xs",text:"sm","min-height":32,"close-size":18,"close-text":"sm",gap:"sm",icon:16}},checkbox:{sm:{"box-size":16},md:{"box-size":20},lg:{"box-size":24},"label-gap":"sm"},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},"label-gap":"sm"},switch:{sm:{"track-width":42,"track-height":26,"thumb-size":22,padding:"xxs"},md:{"track-width":51,"track-height":31,"thumb-size":27,padding:"xxs"},lg:{"track-width":60,"track-height":36,"thumb-size":32,padding:"xxs"}},"otp-input":{sm:{cell:36,text:"base",radius:"sm",gap:"sm"},md:{cell:48,text:"xl",radius:"md",gap:"sm"},lg:{cell:56,text:"2xl",radius:"lg",gap:"md"}},"segmented-control":{sm:{height:32,text:"sm","padding-x":"sm",icon:14},md:{height:40,text:"base","padding-x":"md",icon:16},lg:{height:48,text:"lg","padding-x":"lg",icon:18},"track-padding":"xs","underline-height":2,"pill-inset":"xs"},tabs:{sm:{text:"sm","padding-y":"sm","padding-x":"xs","scrollable-padding-x":"md",icon:16},md:{text:"base","padding-y":"md","padding-x":"sm","scrollable-padding-x":"lg",icon:18},lg:{text:"lg","padding-y":"lg","padding-x":"md","scrollable-padding-x":"xl",icon:20},"icon-gap":"xs","track-padding":"xs","underline-height":2,"pill-inset":"xs","disabled-opacity":.45,"badge-gap":"xs"},slider:{sm:{"track-height":4,"thumb-diameter":24},md:{"track-height":6,"thumb-diameter":28},lg:{"track-height":8,"thumb-diameter":32}},"floating-action-button":{sm:{diameter:40,icon:18,text:"sm","label-padding-x":"md"},md:{diameter:56,icon:22,text:"base","label-padding-x":"lg"},lg:{diameter:72,icon:28,text:"lg","label-padding-x":"xl"},"edge-offset":"xl","bottom-offset":"xl","secondary-gap":"lg","stagger-ms":50},dialog:{"icon-wrapper-size":48,"action-button-min-height":44},toast:{"icon-circle-size":28,"icon-glyph-text":"lg","tint-bar-width":0,"action-min-height":30},banner:{"tint-bar-width":0}}};
|
|
1
|
+
"use strict";export const COLOR_NAMES=["bg","bg-subtle","bg-muted","surface","surface-inverse","text","text-body","text-muted","text-subtle","text-inverse","link","border","border-subtle","field-bg","field-border","field-border-focus","focus-ring","scrim","on-scrim","thumb","primary","primary-hover","primary-soft","primary-text","on-primary","primary-wash","primary-wash-strong","neutral","neutral-hover","neutral-text","on-neutral","success","success-soft","success-text","on-success","warning","warning-soft","warning-text","on-warning","danger","danger-soft","danger-border","danger-text","on-danger","info","info-soft","info-text","on-info","primary-pressed","on-neutral-strong","text-disabled","surface-pressed","surface-hover","surface-selected","surface-disabled","skeleton","skeleton-highlight","glass-fill","glass-border","on-glass","glass-badge","field-bg-focus","field-bg-disabled","field-border-error","field-label","field-text","field-text-disabled","field-placeholder","field-placeholder-disabled","field-icon","field-icon-focus","field-icon-disabled","field-caret","field-message","avatar-1","avatar-2","avatar-3","avatar-4","avatar-5","avatar-6","avatar-7","avatar-8"];export const SPACE_NAMES=["none","xxs","xs","sm","md","lg","xl","2xl","3xl","4xl"];export const RADIUS_NAMES=["none","sm","md","lg","xl","pill"];export const TEXT_NAMES=["xs","sm","base","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl"];export const WEIGHT_NAMES=["normal","medium","semibold","bold"];export const LEADING_NAMES=["heading","body","display"];export const LETTER_SPACING_NAMES=["tight","normal","wide"];export const FONT_NAMES=["ui","display","mono"];export const SHADOW_NAMES=["card","elevated","popover","modal","drawer"];export const DURATION_NAMES=["instant","fast","default","slow","slower"];export const EASE_NAMES=["in-out","accelerate","decelerate","sharp"];export const SIZE_NAMES=["border"];export const COMPONENT_KINDS={field:{radius:"radius","padding-x":"space","padding-y":"space","min-height":"px",text:"text",icon:"px","label-text":"text","label-gap":"space","message-text":"text","message-gap":"space"},press:{opacity:"number"},disabled:{opacity:"number"},button:{"padding-x":"space","padding-y":"space","min-height":"px",text:"text",radius:"radius",icon:"px","badge-icon":"px"},input:{"multiline-min-height":"px"},"search-bar":{radius:"radius"},"empty-state":{icon:"px","title-text":"text","description-text":"text","padding-y":"space","title-gap":"space","description-gap":"space"},"list-item":{"padding-y":"space","title-text":"text","subtitle-text":"text","min-height":"px"},badge:{text:"text","min-width":"px",height:"px","padding-x":"space","dot-size":"px","border-width":"px","anchor-offset":"px"},chip:{"padding-x":"space","padding-y":"space",text:"text","min-height":"px","close-size":"px","close-text":"text",gap:"space",icon:"px"},checkbox:{"box-size":"px","label-gap":"space"},radio:{outer:"px",inner:"px","label-gap":"space"},switch:{"track-width":"px","track-height":"px","thumb-size":"px",padding:"space"},"otp-input":{cell:"px",text:"text",radius:"radius",gap:"space"},"segmented-control":{height:"px",text:"text","padding-x":"space",icon:"px","track-padding":"space","underline-height":"px","pill-inset":"space"},tabs:{text:"text","padding-y":"space","padding-x":"space","scrollable-padding-x":"space",icon:"px","icon-gap":"space","track-padding":"space","underline-height":"px","pill-inset":"space","disabled-opacity":"number","badge-gap":"space"},slider:{"track-height":"px","thumb-diameter":"px"},"floating-action-button":{diameter:"px",icon:"px",text:"text","label-padding-x":"space","edge-offset":"space","bottom-offset":"space","secondary-gap":"space","stagger-ms":"ms"},dialog:{"icon-wrapper-size":"px","action-button-min-height":"px"},toast:{"icon-circle-size":"px","icon-glyph-text":"text","tint-bar-width":"px","action-min-height":"px"},banner:{"tint-bar-width":"px"}};export const lightTokens={mode:"light",colors:{bg:"#ffffff","bg-subtle":"#f8f8fb","bg-muted":"#f1f1f5",surface:"#ffffff","surface-inverse":"#0f0f1a",text:"#252f4a","text-body":"#0f0f1a","text-muted":"#52525b","text-subtle":"#62626b","text-inverse":"#ffffff",link:"#5b5bd6",border:"#e5e5ec","border-subtle":"#efeff3","field-bg":"#f9fbfc","field-border":"#ebedf3","field-border-focus":"#bed2f9","focus-ring":"#5b5bd6",scrim:"#0f0f1a80","on-scrim":"#ffffff",thumb:"#ffffff",primary:"#5b5bd6","primary-hover":"#4f4fbf","primary-soft":"#eeeefc","primary-text":"#4f4fd3","on-primary":"#ffffff","primary-wash":"#5b5bd614","primary-wash-strong":"#5b5bd633",neutral:"#f4f4f8","neutral-hover":"#e9e9f0","neutral-text":"#52525b","on-neutral":"#0f0f1a",success:"#18864f","success-soft":"#e8faee","success-text":"#147042","on-success":"#ffffff",warning:"#f59e0b","warning-soft":"#fff8e6","warning-text":"#8f5c06","on-warning":"#0f0f1a",danger:"#e12c32","danger-soft":"#ffeaef","danger-border":"#e5484d","danger-text":"#bc1b20","on-danger":"#ffffff",info:"#1b6ef5","info-soft":"#e9f3ff","info-text":"#0958d9","on-info":"#ffffff","primary-pressed":"#4040a8","on-neutral-strong":"#ffffff","text-disabled":"#b4b4bb","surface-pressed":"#0f0f1a0f","surface-hover":"#0f0f1a0a","surface-selected":"#5b5bd61a","surface-disabled":"#f1f1f5",skeleton:"#ebedf3","skeleton-highlight":"#f5f6fa","glass-fill":"#ffffff47","glass-border":"#ffffff73","on-glass":"#0f0f1a","glass-badge":"#ffffff","field-bg-focus":"#ffffff","field-bg-disabled":"#f5f6fa","field-border-error":"#fdbfce","field-label":"#242f4a","field-text":"#252f4a","field-text-disabled":"#c4cada","field-placeholder":"#626d8b","field-placeholder-disabled":"#c4cada","field-icon":"#7a849f","field-icon-focus":"#4b5675","field-icon-disabled":"#c4cada","field-caret":"#5b8dee","field-message":"#d81736","avatar-1":"#5b5bd6","avatar-2":"#0a7979","avatar-3":"#a45a05","avatar-4":"#cd226e","avatar-5":"#2462eb","avatar-6":"#7c3aed","avatar-7":"#047c57","avatar-8":"#d42222"},space:{none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius:{none:0,sm:6,md:10,lg:14,xl:20,pill:9999},text:{xs:{size:11},sm:{size:13},base:{size:15},lg:{size:17},xl:{size:20},"2xl":{size:24},"3xl":{size:30},"4xl":{size:36},"5xl":{size:45},"6xl":{size:57},"7xl":{size:64},"8xl":{size:72}},weight:{normal:"400",medium:"500",semibold:"600",bold:"700"},leading:{heading:1.2,body:1.4,display:1.2},"letter-spacing":{tight:-.2,normal:0,wide:.4},font:{ui:{},display:{},mono:{}},shadow:{card:{shadowColor:"#000000",shadowOffset:{width:0,height:2},shadowOpacity:.059,shadowRadius:4,elevation:2},elevated:{shadowColor:"#000000",shadowOffset:{width:0,height:4},shadowOpacity:.078,shadowRadius:8,elevation:4},popover:{shadowColor:"#000000",shadowOffset:{width:0,height:8},shadowOpacity:.102,shadowRadius:16,elevation:8},modal:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.141,shadowRadius:24,elevation:12},drawer:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.141,shadowRadius:24,elevation:12}},motion:{duration:{instant:80,fast:160,default:240,slow:360,slower:500},ease:{"in-out":[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]}},size:{border:1},components:{field:{sm:{radius:"md","padding-x":"sm","padding-y":"sm","min-height":38,text:"sm",icon:14,"label-text":"xs","label-gap":"xs","message-text":"xs","message-gap":"xxs"},md:{radius:"md","padding-x":"md","padding-y":"md","min-height":44,text:"base",icon:16,"label-text":"sm","label-gap":"xs","message-text":"sm","message-gap":"xxs"},lg:{radius:"md","padding-x":"lg","padding-y":"lg","min-height":52,text:"lg",icon:18,"label-text":"base","label-gap":"xs","message-text":"base","message-gap":"xxs"}},press:{opacity:.85},disabled:{opacity:.55},button:{xs:{"padding-x":"sm","padding-y":"xs","min-height":28,text:"xs",radius:"md",icon:14,"badge-icon":11},sm:{"padding-x":"md","padding-y":"xs","min-height":34,text:"sm",radius:"md",icon:16,"badge-icon":16},md:{"padding-x":"lg","padding-y":"sm","min-height":44,text:"base",radius:"md",icon:18,"badge-icon":18},lg:{"padding-x":"xl","padding-y":"md","min-height":50,text:"lg",radius:"lg",icon:20,"badge-icon":20},xl:{"padding-x":"2xl","padding-y":"md","min-height":58,text:"xl",radius:"lg",icon:22,"badge-icon":22}},input:{sm:{"multiline-min-height":72},md:{"multiline-min-height":92},lg:{"multiline-min-height":110}},"search-bar":{sm:{radius:"pill"},md:{radius:"pill"},lg:{radius:"pill"}},"empty-state":{sm:{icon:48,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"title-text":"2xl","description-text":"lg","padding-y":"2xl","title-gap":"md","description-gap":"xs"}},"list-item":{sm:{"padding-y":"sm","title-text":"sm","subtitle-text":"xs","min-height":44},md:{"padding-y":"md","title-text":"base","subtitle-text":"sm","min-height":56},lg:{"padding-y":"lg","title-text":"lg","subtitle-text":"base","min-height":72}},badge:{sm:{text:"xs","min-width":16,height:16,"padding-x":"xs","dot-size":8},md:{text:"sm","min-width":20,height:20,"padding-x":"sm","dot-size":10},"border-width":1.5,"anchor-offset":4},chip:{sm:{"padding-x":"sm","padding-y":"xs",text:"xs","min-height":26,"close-size":16,"close-text":"xs",gap:"xs",icon:14},md:{"padding-x":"md","padding-y":"xs",text:"sm","min-height":32,"close-size":18,"close-text":"sm",gap:"sm",icon:16}},checkbox:{sm:{"box-size":16},md:{"box-size":20},lg:{"box-size":24},"label-gap":"sm"},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},"label-gap":"sm"},switch:{sm:{"track-width":42,"track-height":26,"thumb-size":22,padding:"xxs"},md:{"track-width":51,"track-height":31,"thumb-size":27,padding:"xxs"},lg:{"track-width":60,"track-height":36,"thumb-size":32,padding:"xxs"}},"otp-input":{sm:{cell:36,text:"base",radius:"sm",gap:"sm"},md:{cell:48,text:"xl",radius:"md",gap:"sm"},lg:{cell:56,text:"2xl",radius:"lg",gap:"md"}},"segmented-control":{sm:{height:32,text:"sm","padding-x":"sm",icon:14},md:{height:40,text:"base","padding-x":"md",icon:16},lg:{height:48,text:"lg","padding-x":"lg",icon:18},"track-padding":"xs","underline-height":2,"pill-inset":"xs"},tabs:{sm:{text:"sm","padding-y":"sm","padding-x":"xs","scrollable-padding-x":"md",icon:16},md:{text:"base","padding-y":"md","padding-x":"sm","scrollable-padding-x":"lg",icon:18},lg:{text:"lg","padding-y":"lg","padding-x":"md","scrollable-padding-x":"xl",icon:20},"icon-gap":"xs","track-padding":"xs","underline-height":2,"pill-inset":"xs","disabled-opacity":.45,"badge-gap":"xs"},slider:{sm:{"track-height":4,"thumb-diameter":24},md:{"track-height":6,"thumb-diameter":28},lg:{"track-height":8,"thumb-diameter":32}},"floating-action-button":{sm:{diameter:40,icon:18,text:"sm","label-padding-x":"md"},md:{diameter:56,icon:22,text:"base","label-padding-x":"lg"},lg:{diameter:72,icon:28,text:"lg","label-padding-x":"xl"},"edge-offset":"xl","bottom-offset":"xl","secondary-gap":"lg","stagger-ms":50},dialog:{"icon-wrapper-size":48,"action-button-min-height":44},toast:{"icon-circle-size":28,"icon-glyph-text":"lg","tint-bar-width":0,"action-min-height":30},banner:{"tint-bar-width":0}}};export const darkTokens={mode:"dark",colors:{bg:"#0b0b12","bg-subtle":"#13131c","bg-muted":"#1c1c26",surface:"#1c1c26","surface-inverse":"#fafafa",text:"#e2e2e2","text-body":"#fafafa","text-muted":"#b4b4bb","text-subtle":"#919199","text-inverse":"#0f0f1a",link:"#9292ee",border:"#27272f","border-subtle":"#1c1c26","field-bg":"#13131c","field-border":"#27272f","field-border-focus":"#3d5fb0","focus-ring":"#7c7ce8",scrim:"#000000a6","on-scrim":"#ffffff",thumb:"#ffffff",primary:"#7c7ce8","primary-hover":"#9292ee","primary-soft":"#1f1f3d","primary-text":"#8989ea","on-primary":"#0f0f1a","primary-wash":"#7c7ce814","primary-wash-strong":"#7c7ce833",neutral:"#1f1f26","neutral-hover":"#2a2a33","neutral-text":"#b4b4bb","on-neutral":"#fafafa",success:"#30c780","success-soft":"#04b4402e","success-text":"#30c780","on-success":"#0f0f1a",warning:"#fbbf24","warning-soft":"#dfa0002e","warning-text":"#fbbf24","on-warning":"#0f0f1a",danger:"#f87171","danger-soft":"#e826462e","danger-border":"#f87171","danger-text":"#f87171","on-danger":"#0f0f1a",info:"#60a5fa","info-soft":"#056ee92e","info-text":"#60a5fa","on-info":"#0f0f1a","primary-pressed":"#a8a8f2","on-neutral-strong":"#0f0f1a","text-disabled":"#52525b","surface-pressed":"#ffffff14","surface-hover":"#ffffff0d","surface-selected":"#7c7ce82e","surface-disabled":"#1c1c26",skeleton:"#1c1c26","skeleton-highlight":"#27272f","glass-fill":"#ffffff47","glass-border":"#ffffff73","on-glass":"#0f0f1a","glass-badge":"#ffffff","field-bg-focus":"#0b0b12","field-bg-disabled":"#1c1c26","field-border-error":"#8a2f42","field-label":"#e4e6ee","field-text":"#fafafa","field-text-disabled":"#52525b","field-placeholder":"#84848d","field-placeholder-disabled":"#52525b","field-icon":"#8b8b95","field-icon-focus":"#d4d4db","field-icon-disabled":"#52525b","field-caret":"#7c9ef0","field-message":"#f87171","avatar-1":"#8b8bee","avatar-2":"#2dd4bf","avatar-3":"#fcd34d","avatar-4":"#f472b6","avatar-5":"#60a5fa","avatar-6":"#a78bfa","avatar-7":"#34d399","avatar-8":"#f87171"},space:{none:0,xxs:2,xs:4,sm:8,md:12,lg:16,xl:24,"2xl":32,"3xl":48,"4xl":64},radius:{none:0,sm:6,md:10,lg:14,xl:20,pill:9999},text:{xs:{size:11},sm:{size:13},base:{size:15},lg:{size:17},xl:{size:20},"2xl":{size:24},"3xl":{size:30},"4xl":{size:36},"5xl":{size:45},"6xl":{size:57},"7xl":{size:64},"8xl":{size:72}},weight:{normal:"400",medium:"500",semibold:"600",bold:"700"},leading:{heading:1.2,body:1.4,display:1.2},"letter-spacing":{tight:-.2,normal:0,wide:.4},font:{ui:{},display:{},mono:{}},shadow:{card:{shadowColor:"#000000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:2},elevated:{shadowColor:"#000000",shadowOffset:{width:0,height:4},shadowOpacity:.502,shadowRadius:8,elevation:4},popover:{shadowColor:"#000000",shadowOffset:{width:0,height:8},shadowOpacity:.549,shadowRadius:16,elevation:8},modal:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12},drawer:{shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.6,shadowRadius:24,elevation:12}},motion:{duration:{instant:80,fast:160,default:240,slow:360,slower:500},ease:{"in-out":[.4,0,.2,1],accelerate:[.4,0,1,1],decelerate:[0,0,.2,1],sharp:[.4,0,.6,1]}},size:{border:1},components:{field:{sm:{radius:"md","padding-x":"sm","padding-y":"sm","min-height":38,text:"sm",icon:14,"label-text":"xs","label-gap":"xs","message-text":"xs","message-gap":"xxs"},md:{radius:"md","padding-x":"md","padding-y":"md","min-height":44,text:"base",icon:16,"label-text":"sm","label-gap":"xs","message-text":"sm","message-gap":"xxs"},lg:{radius:"md","padding-x":"lg","padding-y":"lg","min-height":52,text:"lg",icon:18,"label-text":"base","label-gap":"xs","message-text":"base","message-gap":"xxs"}},press:{opacity:.85},disabled:{opacity:.55},button:{xs:{"padding-x":"sm","padding-y":"xs","min-height":28,text:"xs",radius:"md",icon:14,"badge-icon":11},sm:{"padding-x":"md","padding-y":"xs","min-height":34,text:"sm",radius:"md",icon:16,"badge-icon":16},md:{"padding-x":"lg","padding-y":"sm","min-height":44,text:"base",radius:"md",icon:18,"badge-icon":18},lg:{"padding-x":"xl","padding-y":"md","min-height":50,text:"lg",radius:"lg",icon:20,"badge-icon":20},xl:{"padding-x":"2xl","padding-y":"md","min-height":58,text:"xl",radius:"lg",icon:22,"badge-icon":22}},input:{sm:{"multiline-min-height":72},md:{"multiline-min-height":92},lg:{"multiline-min-height":110}},"search-bar":{sm:{radius:"pill"},md:{radius:"pill"},lg:{radius:"pill"}},"empty-state":{sm:{icon:48,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"title-text":"2xl","description-text":"lg","padding-y":"2xl","title-gap":"md","description-gap":"xs"}},"list-item":{sm:{"padding-y":"sm","title-text":"sm","subtitle-text":"xs","min-height":44},md:{"padding-y":"md","title-text":"base","subtitle-text":"sm","min-height":56},lg:{"padding-y":"lg","title-text":"lg","subtitle-text":"base","min-height":72}},badge:{sm:{text:"xs","min-width":16,height:16,"padding-x":"xs","dot-size":8},md:{text:"sm","min-width":20,height:20,"padding-x":"sm","dot-size":10},"border-width":1.5,"anchor-offset":4},chip:{sm:{"padding-x":"sm","padding-y":"xs",text:"xs","min-height":26,"close-size":16,"close-text":"xs",gap:"xs",icon:14},md:{"padding-x":"md","padding-y":"xs",text:"sm","min-height":32,"close-size":18,"close-text":"sm",gap:"sm",icon:16}},checkbox:{sm:{"box-size":16},md:{"box-size":20},lg:{"box-size":24},"label-gap":"sm"},radio:{sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12},"label-gap":"sm"},switch:{sm:{"track-width":42,"track-height":26,"thumb-size":22,padding:"xxs"},md:{"track-width":51,"track-height":31,"thumb-size":27,padding:"xxs"},lg:{"track-width":60,"track-height":36,"thumb-size":32,padding:"xxs"}},"otp-input":{sm:{cell:36,text:"base",radius:"sm",gap:"sm"},md:{cell:48,text:"xl",radius:"md",gap:"sm"},lg:{cell:56,text:"2xl",radius:"lg",gap:"md"}},"segmented-control":{sm:{height:32,text:"sm","padding-x":"sm",icon:14},md:{height:40,text:"base","padding-x":"md",icon:16},lg:{height:48,text:"lg","padding-x":"lg",icon:18},"track-padding":"xs","underline-height":2,"pill-inset":"xs"},tabs:{sm:{text:"sm","padding-y":"sm","padding-x":"xs","scrollable-padding-x":"md",icon:16},md:{text:"base","padding-y":"md","padding-x":"sm","scrollable-padding-x":"lg",icon:18},lg:{text:"lg","padding-y":"lg","padding-x":"md","scrollable-padding-x":"xl",icon:20},"icon-gap":"xs","track-padding":"xs","underline-height":2,"pill-inset":"xs","disabled-opacity":.45,"badge-gap":"xs"},slider:{sm:{"track-height":4,"thumb-diameter":24},md:{"track-height":6,"thumb-diameter":28},lg:{"track-height":8,"thumb-diameter":32}},"floating-action-button":{sm:{diameter:40,icon:18,text:"sm","label-padding-x":"md"},md:{diameter:56,icon:22,text:"base","label-padding-x":"lg"},lg:{diameter:72,icon:28,text:"lg","label-padding-x":"xl"},"edge-offset":"xl","bottom-offset":"xl","secondary-gap":"lg","stagger-ms":50},dialog:{"icon-wrapper-size":48,"action-button-min-height":44},toast:{"icon-circle-size":28,"icon-glyph-text":"lg","tint-bar-width":0,"action-min-height":30},banner:{"tint-bar-width":0}}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";export const hitSlopMarker=t=>{const{top:o=0,right:e=0,bottom:r=0,left:i=0}="number"==typeof t?{top:t,right:t,bottom:t,left:t}:t;return{dataSet:{wuiHitSlop:`${o} ${e} ${r} ${i}`}}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const seen=new Set;export function warnInvalidValue(e,n,t,s){if(!__DEV__||null==t)return;const o=s instanceof Set?s:new Set(s);if(o.has(t))return;const i=`${e}.${n}.${String(t)}`;seen.has(i)||(seen.add(i),console.warn(`[@webority/mobile-ui] <${e}> received ${n}="${String(t)}", which is not one of ${[...o].map(e=>`"${e}"`).join(" | ")}. The component fell back to its default, so this renders something other than what the call site asks for.`))}export function resetInvalidValueWarnings(){seen.clear()}
|
|
@@ -13,6 +13,7 @@ export interface CardTextAction {
|
|
|
13
13
|
export type CardElevation = "none" | ShadowName;
|
|
14
14
|
export type CardRadius = "sm" | "md" | "lg" | "xl";
|
|
15
15
|
export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
|
|
16
|
+
export type CardTitleFont = "sans" | "serif";
|
|
16
17
|
declare const BACKGROUND_TOKENS: readonly ["bg", "bg-subtle", "bg-muted", "surface", "scrim", "surface-inverse"];
|
|
17
18
|
type CardBackgroundToken = (typeof BACKGROUND_TOKENS)[number];
|
|
18
19
|
export type CardBackground = CardBackgroundToken | (string & {});
|
|
@@ -32,6 +33,8 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
|
|
|
32
33
|
header?: React.ReactNode;
|
|
33
34
|
/** Built-in header title. A string is drawn as a heading; a node is drawn as is. */
|
|
34
35
|
title?: React.ReactNode;
|
|
36
|
+
/** Face of a string title: the sans text face, or the serif display face. Default `'sans'`. A node title ignores it. */
|
|
37
|
+
titleFont?: CardTitleFont;
|
|
35
38
|
/** Subtitle line under the title. */
|
|
36
39
|
lead?: React.ReactNode;
|
|
37
40
|
/** Header action: a node is drawn as is; `{ label, onPress }` draws a text action. */
|
|
@@ -6,7 +6,7 @@ export type TextColor = "primary" | "secondary" | "tertiary" | "inverse" | "disa
|
|
|
6
6
|
export interface TextProps extends Omit<RNTextProps, "style"> {
|
|
7
7
|
/**
|
|
8
8
|
* A built-in variant, or the name of one registered in `theme.settings.textVariants`.
|
|
9
|
-
* An unknown name
|
|
9
|
+
* An unknown name warns in development and renders as `body`.
|
|
10
10
|
*/
|
|
11
11
|
variant?: TextVariant | (string & {});
|
|
12
12
|
/** Text role token, semantic tone, or a raw colour string. Defaults per variant. */
|
|
@@ -8,7 +8,7 @@ export declare const TEXT_NAMES: readonly ["xs", "sm", "base", "lg", "xl", "2xl"
|
|
|
8
8
|
export type TextName = (typeof TEXT_NAMES)[number];
|
|
9
9
|
export declare const WEIGHT_NAMES: readonly ["normal", "medium", "semibold", "bold"];
|
|
10
10
|
export type WeightName = (typeof WEIGHT_NAMES)[number];
|
|
11
|
-
export declare const LEADING_NAMES: readonly ["
|
|
11
|
+
export declare const LEADING_NAMES: readonly ["heading", "body", "display"];
|
|
12
12
|
export type LeadingName = (typeof LEADING_NAMES)[number];
|
|
13
13
|
export declare const LETTER_SPACING_NAMES: readonly ["tight", "normal", "wide"];
|
|
14
14
|
export type LetterSpacingName = (typeof LETTER_SPACING_NAMES)[number];
|
|
@@ -342,7 +342,6 @@ export interface TokenSet {
|
|
|
342
342
|
radius: Record<RadiusName, number>;
|
|
343
343
|
text: Record<TextName, {
|
|
344
344
|
size: number;
|
|
345
|
-
lineHeight: number;
|
|
346
345
|
}>;
|
|
347
346
|
weight: Record<WeightName, FontWeightValue>;
|
|
348
347
|
leading: Record<LeadingName, number>;
|
|
@@ -82,7 +82,7 @@ export interface IconRegistry {
|
|
|
82
82
|
export interface TextVariantSpec {
|
|
83
83
|
size: TextName;
|
|
84
84
|
weight?: WeightName;
|
|
85
|
-
/** Line height in px; when unset the variant takes
|
|
85
|
+
/** Line height in px; when unset the variant takes the heading leading when `heading` is set, else the body leading. */
|
|
86
86
|
lineHeight?: number;
|
|
87
87
|
color?: ColorName;
|
|
88
88
|
uppercase?: boolean;
|