@webority/mobile-ui 0.112.3 → 0.114.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/dist/canvas-kit/kit.js +4788 -4725
- package/dist/canvas-kit/manifest.json +24 -5
- package/dist/canvas-kit/release.json +6 -6
- package/lib/commonjs/components/Banner/Banner.js +1 -1
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/EmptyState/EmptyState.js +1 -1
- package/lib/commonjs/components/ForceUpdateDialog/ForceUpdateDialog.js +1 -1
- package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +1 -1
- package/lib/commonjs/components/Screen/Screen.js +1 -1
- package/lib/commonjs/components/SectionHeader/SectionHeader.js +1 -1
- package/lib/commonjs/components/Text/Text.js +1 -1
- package/lib/commonjs/theme/merge.js +1 -1
- package/lib/commonjs/theme/tokens.generated.js +1 -1
- package/lib/module/components/Banner/Banner.js +1 -1
- package/lib/module/components/Card/Card.js +1 -1
- package/lib/module/components/EmptyState/EmptyState.js +1 -1
- package/lib/module/components/ForceUpdateDialog/ForceUpdateDialog.js +1 -1
- package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +1 -1
- package/lib/module/components/Screen/Screen.js +1 -1
- package/lib/module/components/SectionHeader/SectionHeader.js +1 -1
- package/lib/module/components/Text/Text.js +1 -1
- package/lib/module/theme/merge.js +1 -1
- package/lib/module/theme/tokens.generated.js +1 -1
- package/lib/typescript/commonjs/components/ForceUpdateDialog/ForceUpdateDialog.d.ts +2 -0
- package/lib/typescript/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.d.ts +6 -4
- package/lib/typescript/commonjs/components/Screen/Screen.d.ts +11 -1
- package/lib/typescript/commonjs/theme/tokens.generated.d.ts +6 -0
- package/lib/typescript/commonjs/theme/types.d.ts +20 -1
- package/lib/typescript/module/components/ForceUpdateDialog/ForceUpdateDialog.d.ts +2 -0
- package/lib/typescript/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.d.ts +6 -4
- package/lib/typescript/module/components/Screen/Screen.d.ts +11 -1
- package/lib/typescript/module/theme/tokens.generated.d.ts +6 -0
- package/lib/typescript/module/theme/types.d.ts +20 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BANNER_LABELS=Object.freeze({dismiss:"Dismiss banner"});const Banner=forwardRef((e,t)=>{const{title:r,message:o,tone:n="neutral",variant:s="bar",icon:i,actions:a,dismissible:l=!1,onClose:c,haptic:d,visible:u=!0,animateMount:m=!0,loading:p=!1,accessibilityRole:g="alert",accessibilityLabel:h,labels:y,style:x,containerStyle:b,iconCircleStyle:f,tintBarStyle:w,closeButtonStyle:j,actionButtonStyle:S,testID:B}=e;warnInvalidValue("Banner","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","variant",e.variant,["bar","wash","tint"]),warnInvalidValue("Banner","accessibilityRole",e.accessibilityRole,["alert","summary","none"]);const v=useTheme(),k=usePresenceMotion(),
|
|
1
|
+
"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_BANNER_LABELS=Object.freeze({dismiss:"Dismiss banner"});const Banner=forwardRef((e,t)=>{const{title:r,message:o,tone:n="neutral",variant:s="bar",icon:i,actions:a,dismissible:l=!1,onClose:c,haptic:d,visible:u=!0,animateMount:m=!0,loading:p=!1,accessibilityRole:g="alert",accessibilityLabel:h,labels:y,style:x,containerStyle:b,iconCircleStyle:f,tintBarStyle:w,closeButtonStyle:j,actionButtonStyle:S,testID:B}=e;warnInvalidValue("Banner","tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","variant",e.variant,["bar","wash","tint"]),warnInvalidValue("Banner","accessibilityRole",e.accessibilityRole,["alert","summary","none"]);const v=useTheme(),k=usePresenceMotion(),C=useMemo(()=>buildStyles(v),[v]),_=useMemo(()=>tintFor(v,n),[v,n]),I=useMemo(()=>({...DEFAULT_BANNER_LABELS,...y}),[y]),[R,V]=k.range(-20,0),A=useRef(createAnimatedValue(m&&u?R:0)).current,T=useRef(createAnimatedValue(m&&u?0:u?1:0)).current,[L,D]=useState(u),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!m))return;let e;return u?(D(!0),e=Animated.parallel([Animated.timing(A,{toValue:V,duration:v.motion.duration.default,useNativeDriver:!0}),Animated.timing(T,{toValue:1,duration:k.duration("default"),useNativeDriver:!0})]),e.start()):L&&(e=Animated.parallel([Animated.timing(A,{toValue:R,duration:v.motion.duration.fast,useNativeDriver:!0}),Animated.timing(T,{toValue:0,duration:k.duration("fast"),useNativeDriver:!0})]),e.start(()=>{D(!1)})),()=>e?.stop()},[u]),!L)return null;const E=r??" ",M="string"==typeof o?o??" ":"",N="wash"===s,z="bar"!==s,P="alert"===g?"danger"===n?"assertive":"polite":"none",W=_jsxs(Animated.View,{ref:t,accessibilityRole:g,accessibilityLiveRegion:P,accessibilityLabel:h,testID:B,style:[C.container,{backgroundColor:z?_.soft:v.colors["bg-subtle"],borderRadius:N?v.radius.sm:v.radius.md,...smoothCorners,padding:v.space.md,opacity:T,transform:[{translateY:A}]},x,b],children:[!N&&v.components.banner["tint-bar-width"]>0?_jsx(View,{style:[C.tintBar,{backgroundColor:_.bar},w]}):null,_jsxs(View,{style:[C.row,void 0===r&&C.rowCentred],children:[!1===i?null:i?_jsx(View,{style:C.iconWrap,children:renderSlotIcon(i,{color:_.ink,size:v.text.xl.size,disabled:!1})}):_jsx(IconBadge,{dimension:ICON_CIRCLE_SIZE,color:_.bar,icon:_jsx(Text,{variant:"body",weight:"bold",accessible:!1,style:[C.iconGlyph,{color:_.ink}],children:_.glyph}),style:[C.iconCircle,f]}),_jsxs(View,{style:C.textBlock,children:[r||p?_jsx(Text,{variant:"body",weight:"semibold",numberOfLines:2,style:{lineHeight:20,...N?{color:_.ink}:null},children:E}):null,"string"==typeof o||p?_jsx(Text,{variant:"bodySmall",color:"secondary",style:{lineHeight:18,marginTop:r?v.space.xxs:0},children:M||" "}):_jsx(View,{style:{marginTop:r?v.space.xxs:0},children:o})]}),l?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:I.dismiss,onPress:()=>{const e=resolveHaptic(d,"selection");e&&triggerHaptic(e),c?.()},hitSlop:8,...hitSlopMarker(8),style:({pressed:e})=>[C.closeBtn,{backgroundColor:e?v.colors["surface-pressed"]:"transparent"},j],children:_jsx(Text,{variant:"title",weight:"bold",color:"secondary",accessible:!1,style:{lineHeight:17},children:"×"})}):null]}),a&&a.length>0?_jsx(View,{style:C.actionsRow,children:a.map((e,t)=>{warnInvalidValue("Banner","action.tone",e.tone,["primary","success","warning","danger","info","neutral"]),warnInvalidValue("Banner","action.variant",e.variant,["solid","outline","ghost"]),warnInvalidValue("Banner","action.size",e.size,["sm","md"]);const r=e.tone??"primary",o=e.variant??"ghost",n="primary"===r?_.glyphColor:"neutral"===r?v.colors["text-muted"]:v.colors[r],s="primary"===r?_.ink:"neutral"===r?v.colors["text-muted"]:v.colors[`${r}-text`],i="primary"===r?_.on:"neutral"===r?v.colors["on-neutral-strong"]:v.colors[`on-${r}`],a="solid"===o;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,testID:e.testID,onPress:()=>{const t=resolveHaptic(d,"selection");t&&triggerHaptic(t),e.onPress()},style:({pressed:t})=>[C.actionBtn,"md"===e.size&&C.actionBtnMd,"outline"===o&&{borderWidth:1,borderColor:s},{backgroundColor:a?n:t?v.colors["surface-pressed"]:"transparent",opacity:a&&t?.85:1},S],children:_jsx(Text,{variant:"bodySmall",weight:"semibold",align:"center",style:{color:a?i:s},children:e.label})},`${e.label}-${t}`)})}):null]});return p?_jsx(BannerSkeleton,{...e}):W});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:r,containerStyle:o,style:n})=>{const s=useTheme(),i=!1!==r;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:s.colors.surface,borderRadius:s.radius.md,...smoothCorners,padding:s.space.md,borderWidth:1,borderColor:s.colors.border},o,n],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(View,{style:{marginRight:s.space.sm},children:_jsx(Skeleton,{shape:"circle",width:32,height:32})}):null,_jsxs(View,{style:{flex:1},children:[void 0!==e?_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:s.space.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:s.text.sm.size,lastLineWidth:"70%"}),t&&t.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.sm},children:t.map((e,t)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:s.space.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{soft:e.colors["success-soft"],bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors["success-text"],on:e.colors["on-success"],glyph:"✓"};case"warning":return{soft:e.colors["warning-soft"],bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors["warning-text"],on:e.colors["on-warning"],glyph:"⚠"};case"danger":return{soft:e.colors["danger-soft"],bar:e.colors.danger,glyphColor:e.colors.danger,ink:e.colors["danger-text"],on:e.colors["on-danger"],glyph:"✗"};case"neutral":return{soft:e.colors["bg-subtle"],bar:e.colors["text-subtle"],glyphColor:e.colors["text-muted"],ink:e.colors["text-muted"],on:e.colors["on-neutral-strong"],glyph:"i"};case"primary":return{soft:e.colors["primary-soft"],bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors["primary-text"],on:e.colors["on-primary"],glyph:"i"};case"info":return{soft:e.colors["info-soft"],bar:e.colors.info,glyphColor:e.colors.info,ink:e.colors["info-text"],on:e.colors["on-info"],glyph:"i"};default:return tintFor(e,"neutral")}},ICON_CIRCLE_SIZE=28,buildStyles=e=>{const t=e.components.banner,r=e.space.sm;return StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.space.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:t["tint-bar-width"]},row:{flexDirection:"row",alignItems:"flex-start"},rowCentred:{alignItems:"center"},iconWrap:{marginRight:r},iconCircle:{marginRight:r},iconGlyph:{lineHeight:17},textBlock:{flex:1,paddingRight:e.space.xs},closeBtn:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.space.xxs},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:e.space.xs,columnGap:e.space.xs,rowGap:e.space.xs},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.space.md}})};export{Banner};export default Banner;
|
|
@@ -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{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{warnInvalidValue}from"../../utils/warnInvalidValue.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"];export const DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"});const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:i,variant:o="elevated",elevation:s="card",radius:r="lg",padding:a="md",interactive:l=!1,pressAnimation:n="scale",bg:d,header:c,title:u,titleFont:m="sans",lead:h,action:p,headerActions:b,collapsible:g=!1,collapsed:y,defaultCollapsed:x=!1,onCollapsedChange:f,collapsedSummary:S,onRemove:v,separatorHeight:j=StyleSheet.hairlineWidth,footer:C,imageSource:w,imageHeight:_=160,imageAspectRatio:R,imageOverlay:A,loading:F=!1,gradient:k,onPress:T,haptic:I,contextMenu:B,accessibilityLabel:L,accessibilityHint:V,accessibilityRole:H,style:P,containerStyle:z,headerStyle:M,bodyStyle:D,footerStyle:q,borderRadius:E,testID:O,labels:W,onLayout:N,...G}=e;warnInvalidValue("Card","variant",e.variant,["elevated","outline","filled","flat"]),warnInvalidValue("Card","radius",e.radius,["sm","md","lg","xl"]),warnInvalidValue("Card","padding",e.padding,["none","sm","md","lg","xl"]),warnInvalidValue("Card","titleFont",e.titleFont,["sans","serif"]),warnInvalidValue("Card","pressAnimation",e.pressAnimation,["scale","bounce","fade","sink","pulse","dim","false"]);const U=useTheme(),K=useMemo(()=>({...DEFAULT_CARD_LABELS,...W}),[W]),$=l||"function"==typeof T,J=useContextMenu(B,{haptic:I||!1,testID:O,accessibilityActions:G.accessibilityActions,onAccessibilityAction:G.onAccessibilityAction}),Q=useMemo(()=>mergeRefs(t,J.hostRef),[t,J.hostRef]),X=$||J.enabled,{style:Y,pressIn:Z,pressOut:ee}=usePressAnimation({preset:n||"scale",enabled:X&&!1!==n}),te=stylesFor(U),ie=Boolean(w),oe=U.space[paddingMap[a]],se=useMemo(()=>k?"string"==typeof k?U.settings.gradients[k]??null:k:null,[k,U.settings.gradients]),re="flat"===o,ae=re?U.radius.none:E??U.radius[r],le=resolveBackground(U,d),[ne,de]=useControllableState({value:y,defaultValue:x,onChange:f}),ce=g&&ne,ue=hasBuiltInHeaderContent(e),me=Boolean(c)||ue,he=useSquircle(!ie&&!se&&!re,ae,N),pe=StyleSheet.flatten([P,z])??{},be=pe.backgroundColor,ge=pe.borderColor,ye=be??le??("filled"===o?U.colors["bg-subtle"]:U.colors.surface),xe="outline"===o?U.size.border:0,fe=ge??U.colors.border,Se="none"===s?void 0:U.shadow[s],ve="elevated"===o&&supportsBoxShadow()&&Se?toBoxShadow(Se):void 0,je=he.active&&"elevated"===o&&!ve,Ce=he.active&&!je?{backgroundColor:"transparent",borderColor:"transparent"}:null,we=useMemo(()=>{const e={borderRadius:je&&he.size?squircleHostRadius(he.size.width,he.size.height,ae):ae,...smoothCorners,padding:ie||he.active?U.space.none:oe,overflow:he.active?"visible":"hidden"};switch(o){case"flat":return{...e,backgroundColor:le??U.colors.surface,borderBottomWidth:j,borderBottomColor:U.colors.border};case"outline":return{...e,backgroundColor:he.active?"transparent":le??U.colors.surface,borderWidth:U.size.border,borderColor:he.active?"transparent":U.colors.border};case"filled":return{...e,backgroundColor:he.active?"transparent":le??U.colors["bg-subtle"]};default:return{...e,backgroundColor:le??U.colors.surface,...ve?{boxShadow:ve}:Se}}},[U,o,Se,ae,ie,oe,he.active,he.size,ve,je,le,j]),Re=useMemo(()=>({..."number"==typeof R?{width:"100%",aspectRatio:R}:{width:"100%",height:_},borderTopLeftRadius:ae,borderTopRightRadius:ae,borderBottomLeftRadius:U.radius.none,borderBottomRightRadius:U.radius.none,...smoothCorners}),[U,ae,R,_]),Ae=u??"",Fe=_jsxs(_Fragment,{children:[_jsxs(View,{style:te.titleColumn,children:[u?_jsx(Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(U,m),children:u}):null,h?_jsx(Text,{variant:"bodySmall",style:te.lead,children:h}):null,ce&&S?_jsx(Text,{variant:"caption",style:te.lead,children:S}):null]}),isCardTextAction(p)?_jsx(CardTextActionButton,{action:p,haptic:I}):p?_jsx(View,{style:te.actionNode,children:p}):null,b,g?_jsx(CardIconAction,{icon:ce?"chevron-down":"chevron-up",label:`${ce?K.show:K.hide} ${Ae}`.trim(),expanded:!ce,onPress:()=>de(!ce),haptic:I}):null,v?_jsx(CardIconAction,{icon:"trash",label:K.remove,onPress:v,color:U.colors["danger-text"],haptic:I}):null]}),ke=_jsxs(_Fragment,{children:[me?_jsx(View,{style:[te.header,!c&&te.headerRow,ce&&te.headerFolded,M],children:c??Fe}):null,ce?null:_jsx(View,{style:[me||C?te.body:null,D],children:i}),C&&!ce?_jsx(View,{style:[te.footer,q],children:C}):null]}),Te=ie?_jsxs(_Fragment,{children:[_jsxs(View,{style:te.imageWrapper,children:[_jsx(Image,{source:w,resizeMode:"cover",style:Re,accessibilityLabel:"",accessible:!1}),A?_jsx(View,{pointerEvents:"box-none",style:te.imageOverlay,children:A}):null]}),_jsx(View,{style:{padding:oe},children:ke})]}):ke,Ie=se?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:se,style:StyleSheet.absoluteFill}),Te]}):he.active&&he.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:he.size.width,height:he.size.height,radius:ae,fill:ye,stroke:xe?fe:void 0,strokeWidth:xe}),_jsx(View,{style:[te.squircleClip,{padding:oe,borderRadius:he.size?squircleHostRadius(he.size.width,he.size.height,ae):ae}],children:Te})]}):Te;let Be;if(X){const handlePress=e=>{$&&(I&&triggerHaptic(I),T?.(e))};Be=_jsx(Animated.View,{style:Y,children:_jsx(Pressable,{ref:Q,onPress:handlePress,onPressIn:Z,onPressOut:ee,accessibilityRole:H??($?"button":void 0),accessibilityLabel:L,accessibilityHint:V,testID:O,onLayout:he.onLayout,style:[we,P,z,Ce],...G,...J.hostProps,children:Ie})})}else Be=_jsx(View,{ref:t,accessibilityLabel:L,accessibilityHint:V,accessibilityRole:H,testID:O,onLayout:he.onLayout,style:[we,P,z,Ce],...G,children:Ie});return F?_jsx(CardSkeleton,{...e}):J.enabled?_jsxs(_Fragment,{children:[Be,J.renderSurface(_jsx(View,{style:[we,P,z,Ce,te.preview],children:Ie}))]}):Be}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:i="lg",padding:o="md",bg:s,header:r,footer:a,imageSource:l,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:m,bodyStyle:h,footerStyle:p,style:b,labels:g,...y})=>{const x=useTheme(),f={...DEFAULT_CARD_LABELS,...g},S=paddingMap[o],v=x.space[S],j="flat"===e?x.radius.none:c??x.radius[i],C=void 0!==r||hasBuiltInHeaderContent(y),w=resolveBackground(x,s)??x.colors.surface,_="outline"===e?1:0,R="outline"===e?x.colors.border:void 0;return _jsxs(View,{style:[{backgroundColor:w,borderRadius:j,...smoothCorners,borderWidth:_,borderColor:R,overflow:"hidden"},u,b],accessibilityRole:"progressbar",accessibilityLabel:f.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==l?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,C?_jsx(View,{style:[{padding:v,paddingBottom:x.space.sm},m],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:v},h],children:_jsx(SkeletonText,{lines:3,fontSize:x.text.base.size,lastLineWidth:"55%"})}),void 0!==a?_jsx(View,{style:[{padding:v,paddingTop:x.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:i,expanded:o,color:s,haptic:r})=>{const a=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===o?void 0:{expanded:o},"aria-expanded":o,onPress:()=>{r&&triggerHaptic(r),i()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:s??a.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>_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:"brand",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},squircleClip:{flexGrow:1,overflow:"hidden",...smoothCorners},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
|
+
"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{warnInvalidValue}from"../../utils/warnInvalidValue.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"];export const DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"});const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=React.memo(forwardRef((e,t)=>{const{children:i,variant:o,elevation:s="card",radius:r,padding:a,interactive:l=!1,pressAnimation:n="scale",bg:d,header:c,title:u,titleFont:m,lead:h,action:p,headerActions:g,collapsible:b=!1,collapsed:y,defaultCollapsed:x=!1,onCollapsedChange:f,collapsedSummary:S,onRemove:v,separatorHeight:j=StyleSheet.hairlineWidth,footer:C,imageSource:w,imageHeight:_=160,imageAspectRatio:R,imageOverlay:A,loading:F=!1,gradient:T,onPress:k,haptic:I,contextMenu:V,accessibilityLabel:B,accessibilityHint:L,accessibilityRole:P,style:H,containerStyle:z,headerStyle:M,bodyStyle:D,footerStyle:q,borderRadius:E,testID:O,labels:W,onLayout:N,...G}=e;warnInvalidValue("Card","variant",e.variant,["elevated","outline","filled","flat"]),warnInvalidValue("Card","radius",e.radius,["sm","md","lg","xl"]),warnInvalidValue("Card","padding",e.padding,["none","sm","md","lg","xl"]),warnInvalidValue("Card","titleFont",e.titleFont,["sans","serif"]),warnInvalidValue("Card","pressAnimation",e.pressAnimation,["scale","bounce","fade","sink","pulse","dim","false"]);const U=useTheme(),K=U.settings.components.card,$=o??K?.defaultVariant??"elevated",J=r??K?.defaultRadius??"lg",Q=a??K?.defaultPadding??"md",X=m??K?.defaultTitleFont??"sans",Y=useMemo(()=>({...DEFAULT_CARD_LABELS,...W}),[W]),Z=l||"function"==typeof k,ee=useContextMenu(V,{haptic:I||!1,testID:O,accessibilityActions:G.accessibilityActions,onAccessibilityAction:G.onAccessibilityAction}),te=useMemo(()=>mergeRefs(t,ee.hostRef),[t,ee.hostRef]),ie=Z||ee.enabled,{style:oe,pressIn:se,pressOut:re}=usePressAnimation({preset:n||"scale",enabled:ie&&!1!==n}),ae=stylesFor(U),le=Boolean(w),ne=U.space[paddingMap[Q]],de=useMemo(()=>T?"string"==typeof T?U.settings.gradients[T]??null:T:null,[T,U.settings.gradients]),ce="flat"===$,ue=ce?U.radius.none:E??U.radius[J],me=resolveBackground(U,d),[he,pe]=useControllableState({value:y,defaultValue:x,onChange:f}),ge=b&&he,be=hasBuiltInHeaderContent(e),ye=Boolean(c)||be,xe=useSquircle(!le&&!de&&!ce,ue,N),fe=StyleSheet.flatten([H,z])??{},Se=fe.backgroundColor,ve=fe.borderColor,je=Se??me??("filled"===$?U.colors["bg-subtle"]:U.colors.surface),Ce="outline"===$?U.size.border:0,we=ve??U.colors.border,Re="none"===s?void 0:U.shadow[s],Ae="elevated"===$&&supportsBoxShadow()&&Re?toBoxShadow(Re):void 0,Fe=xe.active&&"elevated"===$&&!Ae,Te=xe.active&&!Fe?{backgroundColor:"transparent",borderColor:"transparent"}:null,ke=useMemo(()=>{const e={borderRadius:Fe&&xe.size?squircleHostRadius(xe.size.width,xe.size.height,ue):ue,...smoothCorners,padding:le||xe.active?U.space.none:ne,overflow:xe.active?"visible":"hidden"};switch($){case"flat":return{...e,backgroundColor:me??U.colors.surface,borderBottomWidth:j,borderBottomColor:U.colors.border};case"outline":return{...e,backgroundColor:xe.active?"transparent":me??U.colors.surface,borderWidth:U.size.border,borderColor:xe.active?"transparent":U.colors.border};case"filled":return{...e,backgroundColor:xe.active?"transparent":me??U.colors["bg-subtle"]};default:return{...e,backgroundColor:me??U.colors.surface,...Ae?{boxShadow:Ae}:Re}}},[U,$,Re,ue,le,ne,xe.active,xe.size,Ae,Fe,me,j]),Ie=useMemo(()=>({..."number"==typeof R?{width:"100%",aspectRatio:R}:{width:"100%",height:_},borderTopLeftRadius:ue,borderTopRightRadius:ue,borderBottomLeftRadius:U.radius.none,borderBottomRightRadius:U.radius.none,...smoothCorners}),[U,ue,R,_]),Ve=u??"",Be=_jsxs(_Fragment,{children:[_jsxs(View,{style:ae.titleColumn,children:[u?_jsx(Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(U,X),children:u}):null,h?_jsx(Text,{variant:"bodySmall",style:ae.lead,children:h}):null,ge&&S?_jsx(Text,{variant:"caption",style:ae.lead,children:S}):null]}),isCardTextAction(p)?_jsx(CardTextActionButton,{action:p,haptic:I}):p?_jsx(View,{style:ae.actionNode,children:p}):null,g,b?_jsx(CardIconAction,{icon:ge?"chevron-down":"chevron-up",label:`${ge?Y.show:Y.hide} ${Ve}`.trim(),expanded:!ge,onPress:()=>pe(!ge),haptic:I}):null,v?_jsx(CardIconAction,{icon:"trash",label:Y.remove,onPress:v,color:U.colors["danger-text"],haptic:I}):null]}),Le=_jsxs(_Fragment,{children:[ye?_jsx(View,{style:[ae.header,!c&&ae.headerRow,ge&&ae.headerFolded,M],children:c??Be}):null,ge?null:_jsx(View,{style:[ye||C?ae.body:null,D],children:i}),C&&!ge?_jsx(View,{style:[ae.footer,q],children:C}):null]}),Pe=le?_jsxs(_Fragment,{children:[_jsxs(View,{style:ae.imageWrapper,children:[_jsx(Image,{source:w,resizeMode:"cover",style:Ie,accessibilityLabel:"",accessible:!1}),A?_jsx(View,{pointerEvents:"box-none",style:ae.imageOverlay,children:A}):null]}),_jsx(View,{style:{padding:ne},children:Le})]}):Le,He=de?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:de,style:StyleSheet.absoluteFill}),Pe]}):xe.active&&xe.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:xe.size.width,height:xe.size.height,radius:ue,fill:je,stroke:Ce?we:void 0,strokeWidth:Ce}),_jsx(View,{style:[ae.squircleClip,{padding:ne,borderRadius:xe.size?squircleHostRadius(xe.size.width,xe.size.height,ue):ue}],children:Pe})]}):Pe;let ze;if(ie){const handlePress=e=>{Z&&(I&&triggerHaptic(I),k?.(e))};ze=_jsx(Animated.View,{style:oe,children:_jsx(Pressable,{ref:te,onPress:handlePress,onPressIn:se,onPressOut:re,accessibilityRole:P??(Z?"button":void 0),accessibilityLabel:B,accessibilityHint:L,testID:O,onLayout:xe.onLayout,style:[ke,H,z,Te],...G,...ee.hostProps,children:He})})}else ze=_jsx(View,{ref:t,accessibilityLabel:B,accessibilityHint:L,accessibilityRole:P,testID:O,onLayout:xe.onLayout,style:[ke,H,z,Te],...G,children:He});return F?_jsx(CardSkeleton,{...e}):ee.enabled?_jsxs(_Fragment,{children:[ze,ee.renderSurface(_jsx(View,{style:[ke,H,z,Te,ae.preview],children:He}))]}):ze}));Card.displayName="Card";const CardSkeleton=({variant:e,elevation:t,radius:i,padding:o,bg:s,header:r,footer:a,imageSource:l,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:m,bodyStyle:h,footerStyle:p,style:g,labels:b,...y})=>{const x=useTheme(),f=x.settings.components.card,S=e??f?.defaultVariant??"elevated",v=i??f?.defaultRadius??"lg",j=o??f?.defaultPadding??"md",C={...DEFAULT_CARD_LABELS,...b},w=paddingMap[j],_=x.space[w],R="flat"===S?x.radius.none:c??x.radius[v],A=void 0!==r||hasBuiltInHeaderContent(y),F=resolveBackground(x,s)??x.colors.surface,T="outline"===S?1:0,k="outline"===S?x.colors.border:void 0;return _jsxs(View,{style:[{backgroundColor:F,borderRadius:R,...smoothCorners,borderWidth:T,borderColor:k,overflow:"hidden"},u,g],accessibilityRole:"progressbar",accessibilityLabel:C.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==l?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,A?_jsx(View,{style:[{padding:_,paddingBottom:x.space.sm},m],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:_},h],children:_jsx(SkeletonText,{lines:3,fontSize:x.text.base.size,lastLineWidth:"55%"})}),void 0!==a?_jsx(View,{style:[{padding:_,paddingTop:x.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:i,expanded:o,color:s,haptic:r})=>{const a=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===o?void 0:{expanded:o},"aria-expanded":o,onPress:()=>{r&&triggerHaptic(r),i()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:s??a.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>_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:"brand",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},squircleClip:{flexGrow:1,overflow:"hidden",...smoothCorners},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,isValidElement,useMemo}from"react";import{Animated,Image,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{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text as UiText}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const i=useTheme(),{style:r,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(i),[i]),l="primary"===t,a=useSquircle(!0,i.radius.md),fillFor=e=>l?e?i.colors["primary-hover"]:i.colors.primary:e?i.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:r,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:i.radius.md,fill:fillFor(t),stroke:l?void 0:i.colors.border,strokeWidth:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const i=useTheme(),r=Object.keys(i.components["empty-state"]);warnInvalidValue("EmptyState","size",e.size,r),warnInvalidValue("EmptyState","variant",e.variant,["block","inline"]);const{icon:o,illustration:s,title:n,description:l,action:a,secondaryAction:c,size:d
|
|
1
|
+
"use strict";import{forwardRef,isValidElement,useMemo}from"react";import{Animated,Image,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{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text as UiText}from"../Text/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const ActionButton=({action:e,variant:t})=>{const i=useTheme(),{style:r,pressIn:o,pressOut:s}=usePressAnimation({enabled:!0}),n=useMemo(()=>buildActionStyles(i),[i]),l="primary"===t,a=useSquircle(!0,i.radius.md),fillFor=e=>l?e?i.colors["primary-hover"]:i.colors.primary:e?i.colors["surface-pressed"]:"transparent";return _jsx(Animated.View,{style:r,children:_jsx(Pressable,{onPress:()=>{triggerHaptic("selection"),e.onPress()},onPressIn:o,onPressOut:s,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:a.onLayout,style:({pressed:e})=>[n.button,l?n.buttonPrimary:n.buttonSecondary,e&&!a.active?l?n.buttonPrimaryPressed:n.buttonSecondaryPressed:null,a.active?n.buttonSquircleHost:null],children:({pressed:t})=>_jsxs(_Fragment,{children:[a.active&&a.size?_jsx(SquircleFill,{width:a.size.width,height:a.size.height,radius:i.radius.md,fill:fillFor(t),stroke:l?void 0:i.colors.border,strokeWidth:l?0:1}):null,_jsx(Text,{style:[n.buttonText,l?n.buttonTextPrimary:n.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=forwardRef((e,t)=>{const i=useTheme(),r=Object.keys(i.components["empty-state"]);warnInvalidValue("EmptyState","size",e.size,r),warnInvalidValue("EmptyState","variant",e.variant,["block","inline"]);const{icon:o,illustration:s,title:n,description:l,action:a,secondaryAction:c,size:d,variant:u,fill:m=!1,style:y,testID:p}=e,b=i.settings.components["empty-state"],x=d??b?.defaultSize??"md",g=u??b?.defaultVariant??"block",h=r.includes(x)?x:"md",f=useMemo(()=>resolveEmptyStateSize(i,h),[i,h]),S=useMemo(()=>buildStyles(i),[i]);return"inline"===g?_jsx(View,{ref:t,accessibilityRole:"summary",testID:p,style:[S.inline,m?S.fill:null,y],children:_jsx(UiText,{variant:"caption",weight:"medium",color:"secondary",align:"center",children:n})}):_jsxs(View,{ref:t,accessibilityRole:"summary",testID:p,style:[S.root,{paddingVertical:f["padding-y"]},m?S.fill:null,y],children:[null!=s?_jsx(View,{style:{marginBottom:f["title-gap"]},children:isValidElement(s)?s:_jsx(Image,{source:s,style:{width:f["illustration-size"],height:f["illustration-size"]},resizeMode:"contain",accessibilityIgnoresInvertColors:!0})}):o?_jsx(View,{style:[S.iconCircle,{width:f.icon,height:f.icon,marginBottom:f["title-gap"],borderRadius:i.radius.pill,...smoothCorners}],children:o}):null,_jsx(Text,{style:[S.title,{fontSize:f["title-text"],...fontFor(i,"semibold")}],children:n}),l?_jsx(Text,{style:[S.description,{fontSize:f["description-text"],marginTop:f["description-gap"]}],children:l}):null,a||c?_jsxs(View,{style:S.actions,children:[a?_jsx(ActionButton,{action:a,variant:"primary"}):null,c?_jsx(ActionButton,{action:c,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},inline:{alignItems:"center",justifyContent:"center"},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{Logger,VersionCheck}from"@webority/mobile-core";import{useCallback,useMemo,useState}from"react";import{Dialog}from"../Dialog/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const DEFAULT_FORCE_UPDATE_DIALOG_LABELS={title:"Update available",message:"A new version of the app is available. Please update to continue using the latest features and security improvements.",update:"Update now",later:"Later"};export const ForceUpdateDialog=({visible:e,onClose:t,mandatory:
|
|
1
|
+
"use strict";import{Logger,VersionCheck}from"@webority/mobile-core";import{useCallback,useMemo,useState}from"react";import{Linking,StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{Dialog}from"../Dialog/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_FORCE_UPDATE_DIALOG_LABELS={title:"Update available",message:"A new version of the app is available. Please update to continue using the latest features and security improvements.",update:"Update now",later:"Later"};const STORE_FALLBACK_COPY="We could not open the store. Update from this address instead.",styles=StyleSheet.create({fallback:{alignItems:"center"},fallbackCopy:{textAlign:"center"},fallbackLink:{textAlign:"center",textDecorationLine:"underline"}});export const ForceUpdateDialog=({visible:e,onClose:t,mandatory:l=!1,updateUrl:a,updateFallbackUrl:s,title:o,message:i,labels:n,containerStyle:r,titleStyle:c,messageStyle:d,testID:m})=>{const p=useTheme(),[u,b]=useState(!1),[g,y]=useState(!1),f=useMemo(()=>({...DEFAULT_FORCE_UPDATE_DIALOG_LABELS,...n}),[n]),x=useCallback(()=>{b(!0),y(!1),(async()=>{let e=!1;try{e=await VersionCheck.openUpdateUrl(a??null)}catch(e){Logger.error("[@webority/mobile-ui] ForceUpdateDialog failed to open the store URL.",e)}finally{b(!1),y(!e)}})()},[a]),L=useCallback(e=>{Linking.openURL(e).catch(e=>{Logger.error("[@webority/mobile-ui] ForceUpdateDialog failed to open the fallback address.",e)})},[]),h=g?s:null,k=h?_jsxs(View,{style:styles.fallback,children:[_jsx(Text,{style:[styles.fallbackCopy,{color:p.colors["text-muted"],fontSize:p.text.base.size,lineHeight:p.text.base.size*p.leading.body}],children:STORE_FALLBACK_COPY}),_jsx(Text,{accessibilityRole:"link",onPress:()=>L(h),style:[styles.fallbackLink,{color:p.colors.link,fontSize:p.text.base.size,marginTop:p.space.xs}],children:h})]}):null,S=useCallback(()=>{l||t?.()},[l,t]),_=l?[{label:f.update,onPress:x,tone:"info",loading:u}]:[{label:f.later,onPress:S,tone:"neutral"},{label:f.update,onPress:x,tone:"info",loading:u}];return _jsx(Dialog,{visible:e,onClose:S,title:o??f.title,message:i??f.message,tone:"info",actions:_,dismissOnAction:!1,containerStyle:r,titleStyle:c,messageStyle:d,testID:m,children:k})};export default ForceUpdateDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef}from"react";import{Keyboard,Pressable,RefreshControl}from"react-native";import{KeyboardAwareScrollView as ControllerScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=forwardRef((e,r)=>{const{children:o,bottomOffset:t=24,extraKeyboardSpace:s=0,safeAreaEdges:a=["bottom"],refreshing:l=!1,onRefresh:i,dismissOnTapOutside:n=!
|
|
1
|
+
"use strict";import{forwardRef}from"react";import{Keyboard,Pressable,RefreshControl}from"react-native";import{KeyboardAwareScrollView as ControllerScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=forwardRef((e,r)=>{const{children:o,bottomOffset:t=24,extraKeyboardSpace:s=0,safeAreaEdges:a=["bottom"],refreshing:l=!1,onRefresh:i,dismissOnTapOutside:n=!0,contentContainerStyle:d,refreshControl:c,...f}=e,m=useTheme(),p=useSafeAreaInsets(),b=a.includes("bottom"),y={paddingBottom:b?p.bottom:0,...a.includes("top")?{paddingTop:p.top}:null,...a.includes("left")?{paddingLeft:p.left}:null,...a.includes("right")?{paddingRight:p.right}:null},u=c??(i?_jsx(RefreshControl,{refreshing:l,onRefresh:i,tintColor:m.colors.primary,colors:[m.colors.primary],progressBackgroundColor:m.colors.surface,titleColor:m.colors["text-muted"]}):void 0);return _jsx(ControllerScrollView,{ref:r,bottomOffset:t,extraKeyboardSpace:s-(b?p.bottom:0),disableScrollOnKeyboardHide:!0,keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,y],refreshControl:u,...f,children:n?_jsx(Pressable,{accessible:!1,onPress:Keyboard.dismiss,style:tapAreaStyle,children:o}):o})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";export{KeyboardAwareScrollView};export default KeyboardAwareScrollView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{cloneElement,createElement,isValidElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSharedValue}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{AsyncBlock}from"../AsyncBlock/index.js";import{EmptyState}from"../EmptyState/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{PagedListFooter}from"../PagedListFooter/index.js";import{ScrollHostContext}from"./ScrollHost.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return isValidElement(e)?e:e?createElement(e):null}const buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:s,children:a,onRefresh:i,refreshing:d=!1,footer:c,scroll:u=!0,list:f,edges:m=DEFAULT_EDGES,keyboardToolbar:
|
|
1
|
+
"use strict";import{cloneElement,createElement,isValidElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSharedValue}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{resolveFloatingActionButtonSize,useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{AsyncBlock}from"../AsyncBlock/index.js";import{EmptyState}from"../EmptyState/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{PagedListFooter}from"../PagedListFooter/index.js";import{ScrollHostContext}from"./ScrollHost.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return isValidElement(e)?e:e?createElement(e):null}const buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:s,children:a,onRefresh:i,refreshing:d=!1,footer:c,scroll:u=!0,list:f,edges:m=DEFAULT_EDGES,keyboardToolbar:p=!0,bottomInset:h=0,gutter:g,floatingAction:y,scrollRef:S,onScroll:v,contentContainerStyle:b,testID:x}=e,E=useTheme(),C=g??void 0===f,j=E.space[E.components.screen.gutter],T=C?j:0,k=useSafeAreaInsets(),L=useMemo(()=>buildStyles(E),[E]),[R]=useState(()=>new Animated.Value(0)),[_,A]=useState(0),[V,F]=useState(0),w=void 0!==n,B=useRef(n);B.current=n;const M=Boolean(t||o||n||s||l?.length),O=r&&void 0!==t,H=O&&(void 0!==f||u),K=H?_:0,z=void 0!==c,{refreshControl:D}=useRefreshControl({onRefresh:i??noop,refreshing:d}),P=i?cloneElement(D,{progressViewOffset:K}):void 0,I=useSharedValue(0),N=useSharedValue(0),W=useSharedValue(0),G=useSharedValue(0),U=useRef(null),Y=useRef(0),q=useRef(0),J=useMemo(()=>({top:I,bottom:N,offset:W,maxOffset:G,scrollTo:e=>{const t=U.current;t instanceof FlatList?t.scrollToOffset({offset:e,animated:!1}):t?.scrollTo({y:e,animated:!1})}}),[I,N,W,G]),Q=useCallback(e=>{U.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),X=useCallback(()=>{G.value=Math.max(0,Y.current-q.current)},[G]),Z=useRef(v);Z.current=v;const $=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:R}}}],{useNativeDriver:!1,listener:e=>{W.value=e.nativeEvent.contentOffset.y,Z.current?.(e)}}),[R,W]),ee=useCallback(e=>{const{height:t}=e.nativeEvent.layout;A(e=>Math.max(e,t))},[]),te=useCallback(e=>{F(e.nativeEvent.layout.height)},[]);useEffect(()=>{if(!w)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(B.current?.(),!0));return()=>e.remove()},[w]);const oe=m.includes("left")?k.left:0,re=m.includes("right")?k.right:0,ne=m.includes("bottom")?k.bottom:0,le=m.includes("top")&&!M?k.top:0,se=E.space[E.components["floating-action-button"]["bottom-offset"]],ae=y?resolveFloatingActionButtonSize(E,y.props.size??"md").diameter+se+E.space.lg:0,ie=z?Math.max(0,V-k.bottom):h,de=y?cloneElement(y,{bottomOffset:(y.props.bottomOffset??se)+ie}):null,ce=m.filter(e=>"top"!==e&&!("bottom"===e&&z)),ue=M?_jsx(View,{style:H?L.overlay:void 0,onLayout:H?ee:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:O?"large":"default",scrollY:H?R:void 0,onBack:n,rightActions:l,leading:s,gutter:j})}):null,fe=useCallback(()=>{const e=U.current?.getNativeScrollRef();e&&e.measureInWindow((e,t,o,r)=>{q.current=r,I.value=t+K,N.value=t+r,X()})},[K,I,N,X]);useEffect(()=>{fe()},[fe]);const me=useCallback((e,t)=>{Y.current=t,X()},[X]);let pe;if(void 0!==f){const{state:e,paging:t,...o}=f,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),o.onEndReached?.(e)},r=_jsx(FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...o,ref:Q,refreshControl:P,onScroll:$,onLayout:e=>{fe(),o.onLayout?.(e)},onContentSizeChange:(e,t)=>{me(e,t),o.onContentSizeChange?.(e,t)},onEndReached:t?handleEndReached:o.onEndReached,ListEmptyComponent:e?.empty?_jsx(EmptyState,{...e.empty}):void 0,ListFooterComponent:t||o.ListFooterComponent?_jsxs(_Fragment,{children:[renderFooter(o.ListFooterComponent),t?_jsx(PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:16,style:L.flex,contentContainerStyle:[{paddingTop:K,paddingLeft:oe+T,paddingRight:re+T},{paddingBottom:(z?0:ne)+h+ae},o.contentContainerStyle,b]});pe=_jsx(ScrollHostContext.Provider,{value:J,children:e?_jsx(AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[L.flex,{paddingTop:K}],children:r}):r})}else pe=u?_jsx(ScrollHostContext.Provider,{value:J,children:_jsxs(KeyboardAwareScrollView,{ref:Q,refreshControl:P,onScroll:$,scrollEventThrottle:16,onLayout:fe,onContentSizeChange:me,safeAreaEdges:ce,style:L.flex,contentContainerStyle:[{paddingTop:K,paddingHorizontal:T},b],children:[a,h+ae>0?_jsx(View,{style:{height:h+ae}}):null]})}):_jsx(View,{style:[L.flex,{paddingLeft:oe+T,paddingRight:re+T,paddingBottom:(z?0:ne)+h+ae},b],children:a});const he=z?_jsx(KeyboardStickyView,{onLayout:te,style:[L.footer,{paddingLeft:oe+j,paddingRight:re+j,paddingBottom:ne+h}],children:c}):null;return _jsxs(View,{testID:x,style:[L.root,{paddingTop:le}],children:[H?null:ue,pe,he,de,void 0!==f?a:null,H?ue:null,p?_jsx(KeyboardToolbar,{}):null]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useMemo}from"react";import{View}from"react-native";import{useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Button}from"../Button/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SECTION_HEADER_LABELS=Object.freeze({required:e=>`${e}, required`});export const SectionHeader=e=>{const{children:t,variant:r
|
|
1
|
+
"use strict";import{useMemo}from"react";import{View}from"react-native";import{useTheme}from"../../theme/index.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{Button}from"../Button/index.js";import{RequiredMark}from"../FieldBase/index.js";import{Text}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SECTION_HEADER_LABELS=Object.freeze({required:e=>`${e}, required`});export const SectionHeader=e=>{const{children:t,variant:r,flush:i,required:s=!1,action:a,labels:o,style:n,testID:l}=e;warnInvalidValue("SectionHeader","variant",e.variant,["title","caps","sub"]);const c=useTheme(),m=c.settings.components["section-header"],u=r??m?.defaultVariant??"title",d=i??m?.defaultFlush??!1,p=useMemo(()=>({...DEFAULT_SECTION_HEADER_LABELS,...o}),[o]),x=useMemo(()=>({marginTop:d?0:c.space.lg,marginBottom:c.space.sm}),[c,d]),v=useMemo(()=>({flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:c.space.sm}),[c]),f=useMemo(()=>({flex:1}),[]),j="caps"===u?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===u?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0},h=_jsxs(Text,{variant:j.variant,color:j.color,weight:j.weight,accessibilityRole:"header",accessibilityLabel:s&&"string"==typeof t?p.required(t):void 0,style:a?f:[x,n],testID:l,children:[t,s?_jsx(RequiredMark,{}):null]});return a?_jsxs(View,{style:[v,x,n],children:[h,_jsx(Button,{variant:"link",size:"sm",label:a.label,onPress:a.onPress,testID:a.testID})]}):h};export default SectionHeader;
|
|
@@ -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{TEXT_NAMES}from"../../theme/tokens.generated.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.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",brand:"primary"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0,neutral:!0},COLOR_NAMES=["primary","secondary","tertiary","inverse","disabled","link","textStrong","brand","success","warning","danger","info","neutral"];export const resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;const Text=forwardRef((e,t)=>{const{variant:i="body",color:o,weight:r,size:n,align:a,italic:l,underline:s,style:d,children:c,...m}=e,y=useTheme(),g=Object.hasOwn(VARIANTS,i),p=y.settings.textVariants,x=!g&&p&&Object.hasOwn(p,i)?p[i]:void 0;g||x||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(p??{})]),warnInvalidValue("Text","color",o,COLOR_NAMES),warnInvalidValue("Text","size",n,TEXT_NAMES);const h=void 0!==o&&COLOR_NAMES.includes(o)?o:void 0,u=useMemo(()=>{if(x){const e=n??x.size,t=y.text[e].size;return{fontSize:t,lineHeight:x.lineHeight??Math.round(t*y.leading[x.heading?"heading":"body"]),color:void 0!==h?resolveColor(y,h):x.color?y
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{TEXT_NAMES}from"../../theme/tokens.generated.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.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",brand:"primary"},SEMANTIC={success:!0,warning:!0,danger:!0,info:!0,neutral:!0},COLOR_NAMES=["primary","secondary","tertiary","inverse","disabled","link","textStrong","brand","success","warning","danger","info","neutral"];export const resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;const resolveVariantColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)||Object.hasOwn(SEMANTIC,t)?resolveColor(e,t):e.colors[t],Text=forwardRef((e,t)=>{const{variant:i="body",color:o,weight:r,size:n,align:a,italic:l,underline:s,style:d,children:c,...m}=e,y=useTheme(),g=Object.hasOwn(VARIANTS,i),p=y.settings.textVariants,x=!g&&p&&Object.hasOwn(p,i)?p[i]:void 0;g||x||warnInvalidValue("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(p??{})]),warnInvalidValue("Text","color",o,COLOR_NAMES),warnInvalidValue("Text","size",n,TEXT_NAMES);const h=void 0!==o&&COLOR_NAMES.includes(o)?o:void 0,u=useMemo(()=>{if(x){const e=n??x.size,t=y.text[e].size;return{fontSize:t,lineHeight:x.lineHeight??Math.round(t*y.leading[x.heading?"heading":"body"]),color:void 0!==h?resolveColor(y,h):x.color?resolveVariantColor(y,x.color):resolveColor(y,"primary"),textAlign:a,textTransform:x.uppercase?"uppercase":void 0,letterSpacing:x.letterSpacing?y["letter-spacing"][x.letterSpacing]:void 0,fontStyle:l||x.italic?"italic":void 0,fontVariant:x.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(y,r??x.weight??"normal",x.fontFamily)}}const e=VARIANTS[g?i:"body"],t=y.text[n??e.size].size;return{fontSize:t,lineHeight:Math.round(t*y.leading[e.line]),color:resolveColor(y,h??e.color),textAlign:a,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?y["letter-spacing"][e.letterSpacing]:void 0,fontStyle:l?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(y,r??e.weight,e.fontFamily)}},[y,x,g,i,h,r,n,a,l,s]),b=useNotationInk([u,d],y.text.base.size,y.colors["text-body"]),f=g?VARIANTS[i].heading:x?.heading,T="string"==typeof c||"number"==typeof c;return _jsx(RNText,{ref:t,style:[u,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:f?"header":m.accessibilityRole,...m,children:T?c:_jsx(NotationInkContext.Provider,{value:b,children:c})})});Text.displayName="Text";export{Text};export default Text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{validateComponentTokens}from"./componentSizes.js";import{COLOR_NAMES,FONT_NAMES,RADIUS_NAMES,WEIGHT_NAMES}from"./tokens.generated.js";import{deriveSolidFill,deriveStateFills,deriveToneInk}from"./toneInk.js";const HINT="Run webority upgrade to rename old names.",BRAND_KEYS=["colors","radius","font"],COLOR_MODES=["light","dark"],FIXED_RADII=["none","pill"],RADIUS_ALLOWED="sm, md, lg, xl",SETTINGS_KEYS=["icons","gradients","textVariants","maxFontSizeMultiplier","components"],COMPONENT_SETTING_KEYS={field:{defaultVariant:!0,requiredMarker:!0},input:{defaultVariant:!0,defaultLabelMode:!0,tintLabelOnFocus:!0,shakeOnError:!0},"search-bar":{defaultVariant:!0},select:{defaultVariant:!0},"otp-input":{shakeOnError:!0},"option-sheet":{selectedMarker:!0},"profile-picker":{defaultTone:!0,defaultVariant:!0,defaultAvatarTone:!0},slider:{thumbPressAnimation:!0},rating:{pulseOnPress:!0},stepper:{pulseAnimation:!0},tooltip:{enableScaleAnimation:!0},toast:{enableSwipeDismiss:!0,defaultDurationMs:!0},button:{defaultVariant:!0,defaultSize:!0,defaultPressAnimation:!0},screen:{tabBarFloats:!0}},isPlainObject=
|
|
1
|
+
"use strict";import{validateComponentTokens}from"./componentSizes.js";import{COLOR_NAMES,FONT_NAMES,RADIUS_NAMES,WEIGHT_NAMES}from"./tokens.generated.js";import{deriveSolidFill,deriveStateFills,deriveToneInk}from"./toneInk.js";const HINT="Run webority upgrade to rename old names.",BRAND_KEYS=["colors","radius","font"],COLOR_MODES=["light","dark"],FIXED_RADII=["none","pill"],RADIUS_ALLOWED="sm, md, lg, xl",SETTINGS_KEYS=["icons","gradients","textVariants","maxFontSizeMultiplier","components"],COMPONENT_SETTING_KEYS={field:{defaultVariant:!0,requiredMarker:!0},input:{defaultVariant:!0,defaultLabelMode:!0,tintLabelOnFocus:!0,shakeOnError:!0},"search-bar":{defaultVariant:!0},select:{defaultVariant:!0},"otp-input":{shakeOnError:!0},"option-sheet":{selectedMarker:!0},"profile-picker":{defaultTone:!0,defaultVariant:!0,defaultAvatarTone:!0},slider:{thumbPressAnimation:!0},rating:{pulseOnPress:!0},stepper:{pulseAnimation:!0},tooltip:{enableScaleAnimation:!0},toast:{enableSwipeDismiss:!0,defaultDurationMs:!0},button:{defaultVariant:!0,defaultSize:!0,defaultPressAnimation:!0},card:{defaultVariant:!0,defaultPadding:!0,defaultRadius:!0,defaultTitleFont:!0},"section-header":{defaultVariant:!0,defaultFlush:!0},"empty-state":{defaultSize:!0,defaultVariant:!0},screen:{tabBarFloats:!0}},isPlainObject=t=>"object"==typeof t&&null!==t&&!Array.isArray(t),validateBrand=t=>{if(void 0===t)return;if(!isPlainObject(t))throw new Error(`A brand is an object of colors, radius and font; got ${typeof t}. ${HINT}`);for(const e of Object.keys(t))if(!BRAND_KEYS.includes(e))throw new Error(`A brand sets colors, radius and font only; ${e} is not allowed (allowed: colors, radius, font). ${HINT}`);const e=t.colors;if(void 0!==e&&!isPlainObject(e))throw new Error(`A brand's colors is an object of light and dark; got ${typeof e}. ${HINT}`);for(const t of Object.keys(e??{})){if(!COLOR_MODES.includes(t))throw new Error(`A brand sets colours under light and dark only; ${t} is not allowed (allowed: light, dark). ${HINT}`);const o=e[t];for(const t of Object.keys(o)){if(!COLOR_NAMES.includes(t))throw new Error(`unknown colour ${t}; allowed: ${COLOR_NAMES.join(", ")}. ${HINT}`);if(void 0!==o[t]&&"string"!=typeof o[t])throw new Error(`colour ${t} must be a string; got ${typeof o[t]}.`)}}const o=t.radius;if(void 0!==o&&!isPlainObject(o))throw new Error(`A brand's radius is an object of radius names; got ${typeof o}. ${HINT}`);for(const t of Object.keys(o??{})){const e=o[t];if(!RADIUS_NAMES.includes(t))throw new Error(`unknown radius ${t}; allowed: ${RADIUS_ALLOWED}. ${HINT}`);if(FIXED_RADII.includes(t))throw new Error(`radius ${t} is fixed by the library; allowed: ${RADIUS_ALLOWED}.`);if("number"!=typeof e||!Number.isFinite(e))throw new Error(`radius ${t} must be a number; got ${typeof e}.`)}const n=t.font;if(void 0!==n&&!isPlainObject(n))throw new Error(`A brand's font is an object of font names; got ${typeof n}. ${HINT}`);for(const t of Object.keys(n??{})){if(!FONT_NAMES.includes(t))throw new Error(`unknown font ${t}; allowed: ${FONT_NAMES.join(", ")}. ${HINT}`);const e=n[t];if(!isPlainObject(e))throw new Error(`font ${t} must be an object of weights; got ${typeof e}. ${HINT}`);for(const o of Object.keys(e)){if(!WEIGHT_NAMES.includes(o))throw new Error(`unknown font weight ${o} in font ${t}; allowed: ${WEIGHT_NAMES.join(", ")}. ${HINT}`);const n=e[o];if("string"!=typeof n||0===n.length)throw new Error(`font ${t} weight ${o} must be a non-empty string.`)}}},validateSettings=t=>{if(void 0===t)return;if(!isPlainObject(t))throw new Error(`Theme settings is an object; got ${typeof t}. ${HINT}`);for(const e of Object.keys(t))if(!SETTINGS_KEYS.includes(e))throw new Error(`Theme settings take ${SETTINGS_KEYS.join(", ")} only; ${e} is not allowed. ${HINT}`);const e=t.components;if(void 0===e)return;if(!isPlainObject(e))throw new Error(`Theme settings components is an object of component names; got ${typeof e}. ${HINT}`);const o=COMPONENT_SETTING_KEYS;for(const t of Object.keys(e)){if(!Object.keys(o).includes(t))throw new Error(`unknown component ${t} in theme settings; allowed: ${Object.keys(COMPONENT_SETTING_KEYS).join(", ")}. ${HINT}`);const n=e[t];if(void 0===n)continue;if(!isPlainObject(n))throw new Error(`theme settings for ${t} is an object; got ${typeof n}. ${HINT}`);const r=o[t];for(const e of Object.keys(n))if(!(e in r))throw new Error(`unknown setting ${e} for ${t}; allowed: ${Object.keys(r).join(", ")}. ${HINT}`)}},TONES=["primary","success","warning","danger","info"];export const mergeBrand=(t,e,o)=>{validateBrand(e),validateSettings(o);const n=Object.fromEntries(Object.entries(e?.colors?.[t.mode]??{}).filter(([,t])=>void 0!==t)),r={...t.colors,...n},i={...t.radius,...e?.radius},s={...t.font};for(const o of Object.keys(e?.font??{}))s[o]={...t.font[o],...e?.font?.[o]};const a=[r.bg,r["bg-subtle"],r["bg-muted"]],l={};for(const e of TONES){const o="string"==typeof n[e];let i=r[e];if(o||"string"==typeof n[`on-${e}`]){const t=deriveSolidFill(i,r[`on-${e}`]);t!==i&&(l[e]=t,i=t)}if(o&&"string"!=typeof n[`${e}-text`]&&(l[`${e}-text`]=deriveToneInk(i,a,t.mode)),"primary"===e&&(o||void 0!==l.primary)){const e=deriveStateFills(i,r["on-primary"],{fill:t.colors.primary,hover:t.colors["primary-hover"],pressed:t.colors["primary-pressed"]});"string"!=typeof n["primary-hover"]&&(l["primary-hover"]=e.hover),"string"!=typeof n["primary-pressed"]&&(l["primary-pressed"]=e.pressed)}}const d={},f=new Set([...Object.keys(t.settings.components),...Object.keys(o?.components??{})]);for(const e of f)d[e]={...t.settings.components[e],...o?.components?.[e]};const c=o?.maxFontSizeMultiplier??t.settings.maxFontSizeMultiplier,u={icons:{...t.settings.icons,...o?.icons},gradients:{...t.settings.gradients,...o?.gradients},textVariants:{...t.settings.textVariants,...o?.textVariants},components:d,...void 0===c?{}:{maxFontSizeMultiplier:c}},p={...t,colors:{...r,...l},radius:i,font:s,settings:u};return validateComponentTokens(p),p};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";export const COLOR_NAMES=["bg","bg-subtle","bg-muted","surface","surface-inverse","surface-dark","surface-dark-border","on-surface-dark","on-surface-dark-muted","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","illustration-size":"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","surface-dark":"#071437","surface-dark-border":"#2a3553","on-surface-dark":"#ffffff","on-surface-dark-muted":"#babdc7",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,"illustration-size":96,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"illustration-size":160,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"illustration-size":240,"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","surface-dark":"#071437","surface-dark-border":"#2a3553","on-surface-dark":"#ffffff","on-surface-dark-muted":"#babdc7",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,"illustration-size":96,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"illustration-size":160,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"illustration-size":240,"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","surface-dark","surface-dark-border","on-surface-dark","on-surface-dark-muted","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","illustration-size":"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"},screen:{gutter:"space"}};export const lightTokens={mode:"light",colors:{bg:"#ffffff","bg-subtle":"#f8f8fb","bg-muted":"#f1f1f5",surface:"#ffffff","surface-inverse":"#0f0f1a","surface-dark":"#071437","surface-dark-border":"#2a3553","on-surface-dark":"#ffffff","on-surface-dark-muted":"#babdc7",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":"#7a8197","field-placeholder":"#626d8b","field-placeholder-disabled":"#7a8197","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,"illustration-size":96,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"illustration-size":160,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"illustration-size":240,"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},screen:{gutter:"lg"}}};export const darkTokens={mode:"dark",colors:{bg:"#0b0b12","bg-subtle":"#13131c","bg-muted":"#1c1c26",surface:"#1c1c26","surface-inverse":"#fafafa","surface-dark":"#071437","surface-dark-border":"#2a3553","on-surface-dark":"#ffffff","on-surface-dark-muted":"#babdc7",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":"#71717a","field-placeholder":"#84848d","field-placeholder-disabled":"#71717a","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,"illustration-size":96,"title-text":"lg","description-text":"sm","padding-y":"lg","title-gap":"md","description-gap":"xs"},md:{icon:64,"illustration-size":160,"title-text":"xl","description-text":"base","padding-y":"xl","title-gap":"md","description-gap":"xs"},lg:{icon:80,"illustration-size":240,"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},screen:{gutter:"lg"}}};
|
|
@@ -19,6 +19,8 @@ export interface ForceUpdateDialogProps {
|
|
|
19
19
|
mandatory?: boolean;
|
|
20
20
|
/** Optional override of the destination URL (defaults to the platform store). */
|
|
21
21
|
updateUrl?: string | null;
|
|
22
|
+
/** Address shown as a tappable link when the store cannot be opened. Nothing extra is shown without it. */
|
|
23
|
+
updateFallbackUrl?: string | null;
|
|
22
24
|
/** Per-call title override; wins over `labels.title`. */
|
|
23
25
|
title?: string;
|
|
24
26
|
/** Per-call message override; wins over `labels.message`. */
|
package/lib/typescript/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.d.ts
CHANGED
|
@@ -12,7 +12,8 @@ export interface KeyboardAwareScrollViewProps extends ControllerScrollViewProps
|
|
|
12
12
|
/**
|
|
13
13
|
* A tap on empty space inside the content closes the keyboard and blurs the
|
|
14
14
|
* focused field. Taps that a field, button or any other pressable claims are
|
|
15
|
-
* left alone. Default false
|
|
15
|
+
* left alone. Default true; pass false for content that handles its own taps
|
|
16
|
+
* on empty space (a canvas, a map). Needed on Android edge-to-edge, where the
|
|
16
17
|
* ScrollView's own tap-out dismissal never fires because React Native sees no
|
|
17
18
|
* keyboard metrics.
|
|
18
19
|
*/
|
|
@@ -21,9 +22,10 @@ export interface KeyboardAwareScrollViewProps extends ControllerScrollViewProps
|
|
|
21
22
|
/**
|
|
22
23
|
* react-native-keyboard-controller's `KeyboardAwareScrollView` with the
|
|
23
24
|
* library's defaults: the focused field kept 24 above the keyboard, safe-area
|
|
24
|
-
* padding, a themed pull-to-refresh,
|
|
25
|
-
* keyboard open. The controller follows the keyboard
|
|
26
|
-
* thread, so nothing here listens to keyboard events.
|
|
25
|
+
* padding, a themed pull-to-refresh, a tap on empty space that closes the
|
|
26
|
+
* keyboard, and scrolls that keep it open. The controller follows the keyboard
|
|
27
|
+
* frame by frame on the UI thread, so nothing here listens to keyboard events.
|
|
28
|
+
* Needs the app's
|
|
27
29
|
* `KeyboardProvider` at the root.
|
|
28
30
|
*/
|
|
29
31
|
declare const KeyboardAwareScrollView: import("react").ForwardRefExoticComponent<KeyboardAwareScrollViewProps & import("react").RefAttributes<KeyboardAwareScrollViewRef>>;
|
|
@@ -22,6 +22,10 @@ export interface ScreenListProps<ItemT> extends Omit<FlatListProps<ItemT>, "onSc
|
|
|
22
22
|
/** From usePagedList or pagingFromInfiniteQuery: the screen draws PagedListFooter and calls loadMore on end reached. */
|
|
23
23
|
paging?: PagedListPaging;
|
|
24
24
|
}
|
|
25
|
+
export interface FloatingActionSlotProps {
|
|
26
|
+
bottomOffset?: number;
|
|
27
|
+
size?: "sm" | "md" | "lg";
|
|
28
|
+
}
|
|
25
29
|
export interface ScreenProps<ItemT = unknown> {
|
|
26
30
|
title?: string;
|
|
27
31
|
subtitle?: string;
|
|
@@ -44,6 +48,10 @@ export interface ScreenProps<ItemT = unknown> {
|
|
|
44
48
|
edges?: SafeAreaEdge[];
|
|
45
49
|
/** Extra space under the content and the footer, for a tab bar drawn over the screen. Default 0. */
|
|
46
50
|
bottomInset?: number;
|
|
51
|
+
/** Side margin of the content from the theme's screen gutter (16). Default true in scroll and fixed modes, false in list mode, where rows carry their own padding. The footer always has it. */
|
|
52
|
+
gutter?: boolean;
|
|
53
|
+
/** A FloatingActionButton or FloatingActionButtonGroup. The screen draws it above the tab bar and the footer and leaves room under the content so the last row is never covered. */
|
|
54
|
+
floatingAction?: React.ReactElement<FloatingActionSlotProps>;
|
|
47
55
|
/** Default true. */
|
|
48
56
|
keyboardToolbar?: boolean;
|
|
49
57
|
scrollRef?: React.Ref<ScrollView | FlatList<ItemT>>;
|
|
@@ -54,7 +62,9 @@ export interface ScreenProps<ItemT = unknown> {
|
|
|
54
62
|
/**
|
|
55
63
|
* The page shell: safe area, app bar with a large title that collapses as the
|
|
56
64
|
* content scrolls, a keyboard-aware scroll view (or a virtualised list), pull to
|
|
57
|
-
* refresh, a pinned footer
|
|
65
|
+
* refresh, a pinned footer, a floating action button with room kept under the content
|
|
66
|
+
* and the keyboard toolbar. Content and footer sit inside the theme's screen gutter (16)
|
|
67
|
+
* unless `gutter` is false. The screen never navigates:
|
|
58
68
|
* it calls `onBack`; `NavigationScreen` from `@webority/mobile-ui/navigation` binds
|
|
59
69
|
* it to react-navigation and holds the unsaved-changes guard.
|
|
60
70
|
*/
|
|
@@ -194,6 +194,9 @@ export interface ComponentTokens {
|
|
|
194
194
|
banner: {
|
|
195
195
|
"tint-bar-width": number;
|
|
196
196
|
};
|
|
197
|
+
screen: {
|
|
198
|
+
gutter: SpaceName;
|
|
199
|
+
};
|
|
197
200
|
}
|
|
198
201
|
export type ComponentName = keyof ComponentTokens;
|
|
199
202
|
type SizeKeysOf<C extends ComponentName> = Extract<keyof ComponentTokens[C], "xs" | "sm" | "md" | "lg" | "xl">;
|
|
@@ -336,6 +339,9 @@ export declare const COMPONENT_KINDS: {
|
|
|
336
339
|
readonly banner: {
|
|
337
340
|
readonly "tint-bar-width": "px";
|
|
338
341
|
};
|
|
342
|
+
readonly screen: {
|
|
343
|
+
readonly gutter: "space";
|
|
344
|
+
};
|
|
339
345
|
};
|
|
340
346
|
export interface TokenSet {
|
|
341
347
|
mode: "light" | "dark";
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type { TextStyle } from "react-native";
|
|
3
3
|
import type { ButtonSize, ButtonVariant } from "../components/Button/Button";
|
|
4
|
+
import type { CardPadding, CardRadius, CardTitleFont, CardVariant } from "../components/Card/Card";
|
|
5
|
+
import type { EmptyStateSize, EmptyStateVariant } from "../components/EmptyState/EmptyState";
|
|
6
|
+
import type { SectionHeaderVariant } from "../components/SectionHeader/SectionHeader";
|
|
7
|
+
import type { TextColor } from "../components/Text/Text";
|
|
4
8
|
import type { PressAnimationPreset } from "../hooks/usePressAnimation";
|
|
5
9
|
import type { FieldVariant } from "../types/vocabulary";
|
|
6
10
|
import type { ColorName, FontFaces, FontName, LetterSpacingName, RadiusName, TextName, TokenSet, WeightName } from "./tokens.generated";
|
|
@@ -87,7 +91,8 @@ export interface TextVariantSpec {
|
|
|
87
91
|
weight?: WeightName;
|
|
88
92
|
/** Line height in px; when unset the variant takes the heading leading when `heading` is set, else the body leading. */
|
|
89
93
|
lineHeight?: number;
|
|
90
|
-
color
|
|
94
|
+
/** A text role or tone, as the `color` prop takes (`secondary`), or a colour token (`text-muted`). */
|
|
95
|
+
color?: TextColor | ColorName;
|
|
91
96
|
uppercase?: boolean;
|
|
92
97
|
letterSpacing?: LetterSpacingName;
|
|
93
98
|
italic?: boolean;
|
|
@@ -147,6 +152,20 @@ export interface ComponentSettings {
|
|
|
147
152
|
defaultSize?: ButtonSize;
|
|
148
153
|
defaultPressAnimation?: PressAnimationPreset;
|
|
149
154
|
};
|
|
155
|
+
card?: {
|
|
156
|
+
defaultVariant?: CardVariant;
|
|
157
|
+
defaultPadding?: CardPadding;
|
|
158
|
+
defaultRadius?: CardRadius;
|
|
159
|
+
defaultTitleFont?: CardTitleFont;
|
|
160
|
+
};
|
|
161
|
+
"section-header"?: {
|
|
162
|
+
defaultVariant?: SectionHeaderVariant;
|
|
163
|
+
defaultFlush?: boolean;
|
|
164
|
+
};
|
|
165
|
+
"empty-state"?: {
|
|
166
|
+
defaultSize?: EmptyStateSize;
|
|
167
|
+
defaultVariant?: EmptyStateVariant;
|
|
168
|
+
};
|
|
150
169
|
/** NavigationScreen with kind "tab" adds the tab bar's height under content and footer when the app's tab bar floats over the screens. */
|
|
151
170
|
screen?: {
|
|
152
171
|
tabBarFloats?: boolean;
|
|
@@ -19,6 +19,8 @@ export interface ForceUpdateDialogProps {
|
|
|
19
19
|
mandatory?: boolean;
|
|
20
20
|
/** Optional override of the destination URL (defaults to the platform store). */
|
|
21
21
|
updateUrl?: string | null;
|
|
22
|
+
/** Address shown as a tappable link when the store cannot be opened. Nothing extra is shown without it. */
|
|
23
|
+
updateFallbackUrl?: string | null;
|
|
22
24
|
/** Per-call title override; wins over `labels.title`. */
|
|
23
25
|
title?: string;
|
|
24
26
|
/** Per-call message override; wins over `labels.message`. */
|